Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement MSC4027 (Custom images in reactions) #2160

Merged
merged 13 commits into from
Jan 4, 2024
Merged

Implement MSC4027 (Custom images in reactions) #2160

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8cdb988
Implement MSC4027 (Custom Images in Reactions)
surakin Jan 3, 2024
b81b4f8
add changelog
surakin Jan 4, 2024
50e3605
fix Modifier forbidden pattern and missing const
surakin Jan 4, 2024
6880bf2
fix top level property naming
surakin Jan 4, 2024
c914b76
use AsyncImage instead of BlurHashAsyncImage
surakin Jan 4, 2024
639c349
Merge branch 'develop' into msc4027
surakin Jan 4, 2024
fe0043c
Update screenshots
Jan 4, 2024
9352d7d
Merge branch 'develop' into msc4027
surakin Jan 4, 2024
4a6135e
use different heights for reaction summary view and reaction buttons
surakin Jan 4, 2024
3e3bc71
Update screenshots
Jan 4, 2024
290951c
empty commit
surakin Jan 4, 2024
b1613c9
Merge branch 'msc4027' of github.com:surakin/element-x-android into m…
surakin Jan 4, 2024
5cf4dc8
Merge branch 'develop' into msc4027
surakin Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog.d/2159.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added support for MSC4027 (render custom images in reactions)
35 changes: 26 additions & 9 deletions ...n/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ import androidx.compose.foundation.border
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
Expand All @@ -41,18 +43,21 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.compound.theme.ElementTheme
import io.element.android.features.messages.impl.R
import io.element.android.features.messages.impl.timeline.model.AggregatedReaction
import io.element.android.features.messages.impl.timeline.model.AggregatedReactionProvider
import io.element.android.features.messages.impl.timeline.model.aTimelineItemReactions
import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toDp
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.matrix.api.media.MediaSource
import io.element.android.libraries.matrix.ui.media.MediaRequestData

@Composable
@OptIn(ExperimentalFoundationApi::class)
Expand Down Expand Up @@ -114,7 +119,8 @@ sealed interface MessagesReactionsButtonContent {
val isHighlighted get() = this is Reaction && reaction.isHighlighted
}

private val reactionEmojiLineHeight = 20.sp
internal val reactionEmojiLineHeight = 20.sp
internal val reactionImageAspectRatio = 1.33f
private val addEmojiSize = 16.dp

@Composable
Expand Down Expand Up @@ -150,13 +156,24 @@ private fun ReactionContent(
verticalAlignment = Alignment.CenterVertically,
modifier = modifier,
) {
Text(
text = reaction.displayKey,
style = ElementTheme.typography.fontBodyMdRegular.copy(
fontSize = 15.sp,
lineHeight = reactionEmojiLineHeight,
),
)
if (reaction.key.startsWith("mxc://")) {
surakin marked this conversation as resolved.
Show resolved Hide resolved
BlurHashAsyncImage(
surakin marked this conversation as resolved.
Show resolved Hide resolved
modifier = modifier
.heightIn(min = reactionEmojiLineHeight.toDp(), max = reactionEmojiLineHeight.toDp())
.aspectRatio(reactionImageAspectRatio, false),
model = MediaRequestData(MediaSource(reaction.key), MediaRequestData.Kind.Content),
blurHash = null
)
}
else {
Text(
text = reaction.displayKey,
style = ElementTheme.typography.fontBodyMdRegular.copy(
fontSize = 15.sp,
lineHeight = reactionEmojiLineHeight,
),
)
}
if (reaction.count > 1) {
Spacer(modifier = Modifier.width(4.dp))
Text(
Expand Down
36 changes: 27 additions & 9 deletions ...android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
Expand Down Expand Up @@ -57,18 +58,24 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.compound.theme.ElementTheme
import io.element.android.features.messages.impl.timeline.components.reactionEmojiLineHeight
import io.element.android.features.messages.impl.timeline.components.reactionImageAspectRatio
import io.element.android.features.messages.impl.timeline.model.AggregatedReaction
import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toDp
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.api.media.MediaSource
import io.element.android.libraries.matrix.api.user.MatrixUser
import io.element.android.libraries.matrix.ui.media.MediaRequestData
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.compound.theme.ElementTheme
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
Expand Down Expand Up @@ -192,13 +199,24 @@ private fun AggregatedReactionButton(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier,
) {
Text(
text = reaction.displayKey,
style = ElementTheme.typography.fontBodyMdRegular.copy(
fontSize = 20.sp,
lineHeight = 25.sp
),
)
if (reaction.key.startsWith("mxc://")) {
BlurHashAsyncImage(
modifier = modifier
.heightIn(min = reactionEmojiLineHeight.toDp(), max = reactionEmojiLineHeight.toDp())
jmartinesp marked this conversation as resolved.
Show resolved Hide resolved
.aspectRatio(reactionImageAspectRatio, false),
model = MediaRequestData(MediaSource(reaction.key), MediaRequestData.Kind.Content),
blurHash = null
surakin marked this conversation as resolved.
Show resolved Hide resolved
)
}
else {
Text(
text = reaction.displayKey,
style = ElementTheme.typography.fontBodyMdRegular.copy(
fontSize = 20.sp,
lineHeight = 25.sp
),
)
}
if (reaction.count > 1) {
Spacer(modifier = Modifier.width(4.dp))
Text(
Expand Down
Loading