Skip to content

Commit b10882b

Browse files
gpuntogpunto
committed
Update sizing of media attachments in messages
1 parent 8a7a697 commit b10882b

7 files changed

Lines changed: 47 additions & 24 deletions

File tree

‎stream-chat-android-compose/api/stream-chat-android-compose.api‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1666,7 +1666,7 @@ public final class io/getstream/chat/android/compose/ui/components/messages/Mess
16661666
}
16671667

16681668
public final class io/getstream/chat/android/compose/ui/components/messages/MessageContentKt {
1669-
public static final fun MessageContent (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;III)V
1669+
public static final fun MessageContent (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lio/getstream/chat/android/compose/state/messages/MessageAlignment;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;III)V
16701670
}
16711671

16721672
public final class io/getstream/chat/android/compose/ui/components/messages/MessageFooterKt {
@@ -5729,20 +5729,22 @@ public final class io/getstream/chat/android/compose/ui/theme/MessageReactionsPi
57295729

57305730
public final class io/getstream/chat/android/compose/ui/theme/MessageRegularContentParams {
57315731
public static final field $stable I
5732-
public fun <init> (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;)V
5733-
public synthetic fun <init> (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
5732+
public fun <init> (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/compose/state/messages/MessageAlignment;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;)V
5733+
public synthetic fun <init> (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/compose/state/messages/MessageAlignment;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
57345734
public final fun component1 ()Lio/getstream/chat/android/models/Message;
57355735
public final fun component2 ()Lio/getstream/chat/android/models/User;
5736-
public final fun component3 ()Lkotlin/jvm/functions/Function1;
5736+
public final fun component3 ()Lio/getstream/chat/android/compose/state/messages/MessageAlignment;
57375737
public final fun component4 ()Lkotlin/jvm/functions/Function1;
57385738
public final fun component5 ()Lkotlin/jvm/functions/Function1;
57395739
public final fun component6 ()Lkotlin/jvm/functions/Function1;
5740-
public final fun component7 ()Lkotlin/jvm/functions/Function2;
5741-
public final fun copy (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;)Lio/getstream/chat/android/compose/ui/theme/MessageRegularContentParams;
5742-
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/MessageRegularContentParams;Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/MessageRegularContentParams;
5740+
public final fun component7 ()Lkotlin/jvm/functions/Function1;
5741+
public final fun component8 ()Lkotlin/jvm/functions/Function2;
5742+
public final fun copy (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/compose/state/messages/MessageAlignment;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;)Lio/getstream/chat/android/compose/ui/theme/MessageRegularContentParams;
5743+
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/MessageRegularContentParams;Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/compose/state/messages/MessageAlignment;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/MessageRegularContentParams;
57435744
public fun equals (Ljava/lang/Object;)Z
57445745
public final fun getCurrentUser ()Lio/getstream/chat/android/models/User;
57455746
public final fun getMessage ()Lio/getstream/chat/android/models/Message;
5747+
public final fun getMessageAlignment ()Lio/getstream/chat/android/compose/state/messages/MessageAlignment;
57465748
public final fun getOnLinkClick ()Lkotlin/jvm/functions/Function2;
57475749
public final fun getOnLongItemClick ()Lkotlin/jvm/functions/Function1;
57485750
public final fun getOnMediaGalleryPreviewResult ()Lkotlin/jvm/functions/Function1;

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/content/MediaAttachmentContent.kt‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ import androidx.compose.ui.semantics.testTag
6464
import androidx.compose.ui.text.style.TextAlign
6565
import androidx.compose.ui.tooling.preview.Preview
6666
import androidx.compose.ui.unit.Dp
67+
import androidx.compose.ui.unit.DpSize
6768
import androidx.compose.ui.unit.dp
6869
import coil3.ColorImage
6970
import coil3.annotation.ExperimentalCoilApi
@@ -217,7 +218,6 @@ internal fun SingleMediaAttachment(
217218
onContentItemClick: (MediaAttachmentClickData) -> Unit,
218219
overlayContent: @Composable (attachmentType: String?) -> Unit,
219220
) {
220-
val isVideo = attachment.isVideo()
221221
// Depending on the CDN, images might not contain their original dimensions
222222
val ratio: Float by remember(key1 = attachment.originalWidth, key2 = attachment.originalHeight) {
223223
derivedStateOf {
@@ -237,10 +237,7 @@ internal fun SingleMediaAttachment(
237237
attachment = attachment,
238238
modifier = modifier
239239
.applyIf(!shouldBeFullSize) { padding(MessageStyling.messageSectionPadding) }
240-
.size(
241-
width = 250.dp,
242-
height = singleMediaAttachmentHeight(isVideo, ratio),
243-
),
240+
.size(singleMediaAttachmentSize(ratio)),
244241
shape = if (shouldBeFullSize) null else RoundedCornerShape(StreamTokens.radiusLg),
245242
message = message,
246243
onMediaGalleryPreviewResult = onMediaGalleryPreviewResult,
@@ -639,20 +636,35 @@ public data class MediaAttachmentClickData internal constructor(
639636
)
640637

641638
/**
642-
* Calculates the actual single-media attachment height, based on the configurable width, maxHeight and the aspectRatio.
639+
* Calculates the single-media attachment size using orientation-based bounding boxes.
640+
*
641+
* - Landscape (ratio > 1): max 256×192 dp, fills width first.
642+
* - Portrait (ratio < 1): max 192×256 dp, fills height first.
643+
* - Square (ratio ≈ 1): 256×256 dp.
643644
*
644-
* @param isVideo true if "video", false if "image".
645-
* @param aspectRatio the desired aspect ratio.
645+
* Media maintains its aspect ratio and scales to fit the bounding box.
646+
*
647+
* @param aspectRatio the width-to-height ratio of the media.
646648
*/
647-
@Composable
648-
private fun singleMediaAttachmentHeight(isVideo: Boolean, aspectRatio: Float): Dp {
649-
val maxHeight = if (isVideo) {
650-
400.dp
651-
} else {
652-
600.dp
649+
private fun singleMediaAttachmentSize(aspectRatio: Float): DpSize = when {
650+
aspectRatio > 1f -> {
651+
// Landscape: bounding box 256×192
652+
val width = 256.dp
653+
val height = (width / aspectRatio).coerceAtMost(192.dp)
654+
DpSize(width, height)
655+
}
656+
657+
aspectRatio < 1f -> {
658+
// Portrait: bounding box 192×256
659+
val height = 256.dp
660+
val width = (height * aspectRatio).coerceAtMost(192.dp)
661+
DpSize(width, height)
662+
}
663+
664+
else -> {
665+
// Square
666+
DpSize(256.dp, 256.dp)
653667
}
654-
val heightAccordingAspectRatio = 250.dp / aspectRatio
655-
return minOf(heightAccordingAspectRatio, maxHeight)
656668
}
657669

658670
/**

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageContent.kt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import io.getstream.chat.android.client.utils.message.isDeleted
4646
import io.getstream.chat.android.client.utils.message.isGiphyEphemeral
4747
import io.getstream.chat.android.compose.R
4848
import io.getstream.chat.android.compose.state.mediagallerypreview.MediaGalleryPreviewResult
49+
import io.getstream.chat.android.compose.state.messages.MessageAlignment
4950
import io.getstream.chat.android.compose.state.messages.attachments.AttachmentState
5051
import io.getstream.chat.android.compose.ui.theme.AudioRecordAttachmentContentParams
5152
import io.getstream.chat.android.compose.ui.theme.ChatTheme
@@ -92,6 +93,7 @@ public fun MessageContent(
9293
onGiphyActionClick: (GiphyAction) -> Unit = {},
9394
onQuotedMessageClick: (Message) -> Unit = {},
9495
onUserMentionClick: (User) -> Unit = {},
96+
messageAlignment: MessageAlignment = MessageAlignment.Start,
9597
onLinkClick: ((Message, String) -> Unit)? = null,
9698
onMediaGalleryPreviewResult: (MediaGalleryPreviewResult?) -> Unit = {},
9799
giphyEphemeralContent: @Composable () -> Unit = {
@@ -117,6 +119,7 @@ public fun MessageContent(
117119
params = MessageRegularContentParams(
118120
message = message,
119121
currentUser = currentUser,
122+
messageAlignment = messageAlignment,
120123
onLongItemClick = onLongItemClick,
121124
onMediaGalleryPreviewResult = onMediaGalleryPreviewResult,
122125
onQuotedMessageClick = onQuotedMessageClick,
@@ -180,6 +183,7 @@ internal fun DefaultMessageDeletedContent(
180183
internal fun DefaultMessageContent(
181184
message: Message,
182185
currentUser: User?,
186+
messageAlignment: MessageAlignment = MessageAlignment.Start,
183187
onLongItemClick: (Message) -> Unit,
184188
onMediaGalleryPreviewResult: (MediaGalleryPreviewResult?) -> Unit = {},
185189
onQuotedMessageClick: (Message) -> Unit,
@@ -188,7 +192,7 @@ internal fun DefaultMessageContent(
188192
) {
189193
val componentFactory = ChatTheme.componentFactory
190194

191-
Column {
195+
Column(horizontalAlignment = messageAlignment.contentAlignment) {
192196
val quotedMessage = message.replyTo
193197
if (quotedMessage != null) {
194198
componentFactory.MessageQuotedContent(

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -760,6 +760,7 @@ public fun RegularMessageContent(
760760
MessageContent(
761761
message = message,
762762
currentUser = messageItem.currentUser,
763+
messageAlignment = messageAlignment,
763764
onLongItemClick = onLongItemClick,
764765
onGiphyActionClick = onGiphyActionClick,
765766
onMediaGalleryPreviewResult = onMediaGalleryPreviewResult,

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1077,6 +1077,7 @@ public interface ChatComponentFactory {
10771077
DefaultMessageContent(
10781078
message = params.message,
10791079
currentUser = params.currentUser,
1080+
messageAlignment = params.messageAlignment,
10801081
onLongItemClick = params.onLongItemClick,
10811082
onMediaGalleryPreviewResult = params.onMediaGalleryPreviewResult,
10821083
onQuotedMessageClick = params.onQuotedMessageClick,

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactoryParams.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import androidx.compose.ui.unit.dp
3737
import io.getstream.chat.android.compose.state.channels.list.ItemState
3838
import io.getstream.chat.android.compose.state.mediagallerypreview.MediaGalleryPreviewResult
3939
import io.getstream.chat.android.compose.state.messageoptions.MessageOptionItemState
40+
import io.getstream.chat.android.compose.state.messages.MessageAlignment
4041
import io.getstream.chat.android.compose.state.messages.MessageReactionItemState
4142
import io.getstream.chat.android.compose.state.messages.attachments.AttachmentPickerItemState
4243
import io.getstream.chat.android.compose.state.messages.attachments.AttachmentPickerMode
@@ -787,6 +788,7 @@ public data class MessageDeletedContentParams(
787788
*
788789
* @param message The message to display.
789790
* @param currentUser The currently logged in user.
791+
* @param messageAlignment The horizontal alignment of the message in the message list.
790792
* @param onLongItemClick Action invoked when a message is long-clicked.
791793
* @param onMediaGalleryPreviewResult Action invoked with the media gallery preview result.
792794
* @param onQuotedMessageClick Action invoked when a quoted message is clicked.
@@ -796,6 +798,7 @@ public data class MessageDeletedContentParams(
796798
public data class MessageRegularContentParams(
797799
val message: Message,
798800
val currentUser: User?,
801+
val messageAlignment: MessageAlignment,
799802
val onLongItemClick: (Message) -> Unit,
800803
val onMediaGalleryPreviewResult: (MediaGalleryPreviewResult?) -> Unit,
801804
val onQuotedMessageClick: (Message) -> Unit,

‎stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.content_AttachmentsContentTest_single_media_attachment_content.png‎

238 Bytes
Loading

0 commit comments

Comments
 (0)