Skip to content

Update media preview screen design #6247

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

Merged
aleksandar-apostolov merged 9 commits into from
Mar 17, 2026
+960 −390
Merged

Update media preview screen design #6247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
137e602
Filter out non-media attachments in media gallery
gpunto Mar 11, 2026
058bad3
Update design of media gallery
gpunto Mar 12, 2026
83faee2
Update content description of close icon
gpunto Mar 16, 2026
5aab3a4
Update share icon
gpunto Mar 17, 2026
ef3777c
Fix bottom sheet not appearing in snapshots
gpunto Mar 17, 2026
0326332
Update DefaultMessageThreadSeparatorContent to use topBorder & bottom…
gpunto Mar 17, 2026
c450471
Use PlaybackSpeedToggle
gpunto Mar 17, 2026
c976f71
Set PlaybackSpeedToggle min width to accomodate "x1.5"
gpunto Mar 17, 2026
deb0169
Use common back button string
gpunto Mar 17, 2026
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
24 changes: 12 additions & 12 deletions stream-chat-android-compose/api/stream-chat-android-compose.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,7 @@ public final class io/getstream/chat/android/compose/ui/attachments/content/Unsu

public final class io/getstream/chat/android/compose/ui/attachments/preview/ComposableSingletons$MediaGalleryPreviewScreenKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/attachments/preview/ComposableSingletons$MediaGalleryPreviewScreenKt;
public static field lambda-1 Lkotlin/jvm/functions/Function6;
public static field lambda-1 Lkotlin/jvm/functions/Function7;
public static field lambda-10 Lkotlin/jvm/functions/Function2;
public static field lambda-11 Lkotlin/jvm/functions/Function2;
public static field lambda-12 Lkotlin/jvm/functions/Function2;
Expand All @@ -621,7 +621,7 @@ public final class io/getstream/chat/android/compose/ui/attachments/preview/Comp
public static field lambda-17 Lkotlin/jvm/functions/Function2;
public static field lambda-18 Lkotlin/jvm/functions/Function2;
public static field lambda-19 Lkotlin/jvm/functions/Function2;
public static field lambda-2 Lkotlin/jvm/functions/Function6;
public static field lambda-2 Lkotlin/jvm/functions/Function7;
public static field lambda-20 Lkotlin/jvm/functions/Function2;
public static field lambda-21 Lkotlin/jvm/functions/Function2;
public static field lambda-22 Lkotlin/jvm/functions/Function2;
Expand All @@ -638,7 +638,7 @@ public final class io/getstream/chat/android/compose/ui/attachments/preview/Comp
public static field lambda-8 Lkotlin/jvm/functions/Function2;
public static field lambda-9 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function6;
public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function7;
public final fun getLambda-10$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-11$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-12$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
Expand All @@ -649,7 +649,7 @@ public final class io/getstream/chat/android/compose/ui/attachments/preview/Comp
public final fun getLambda-17$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-18$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-19$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function6;
public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function7;
public final fun getLambda-20$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-21$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-22$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
Expand Down Expand Up @@ -711,8 +711,8 @@ public final class io/getstream/chat/android/compose/ui/attachments/preview/Medi
}

public final class io/getstream/chat/android/compose/ui/attachments/preview/MediaGalleryPreviewScreenKt {
public static final fun MediaGalleryPreviewScreen (Lio/getstream/chat/android/compose/viewmodel/mediapreview/MediaGalleryPreviewViewModel;ILkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/compose/ui/theme/MediaGalleryConfig;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function6;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;III)V
public static final fun MediaGalleryPreviewScreen (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/ConnectionState;Lio/getstream/chat/android/models/User;ILio/getstream/chat/android/models/Attachment;ZZZLkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/compose/ui/theme/MediaGalleryConfig;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function6;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;IIII)V
public static final fun MediaGalleryPreviewScreen (Lio/getstream/chat/android/compose/viewmodel/mediapreview/MediaGalleryPreviewViewModel;ILkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/compose/ui/theme/MediaGalleryConfig;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function7;Lkotlin/jvm/functions/Function5;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;III)V
public static final fun MediaGalleryPreviewScreen (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/ConnectionState;Lio/getstream/chat/android/models/User;ILio/getstream/chat/android/models/Attachment;ZZZLkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/compose/ui/theme/MediaGalleryConfig;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function7;Lkotlin/jvm/functions/Function5;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;IIII)V
}

public final class io/getstream/chat/android/compose/ui/attachments/preview/MediaPreviewActivity : androidx/appcompat/app/AppCompatActivity {
Expand Down Expand Up @@ -2559,16 +2559,18 @@ public final class io/getstream/chat/android/compose/ui/theme/ChannelListConfig

public final class io/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams {
public static final field $stable I
public fun <init> (Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;)V
public synthetic fun <init> (Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public fun <init> (Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;)V
public synthetic fun <init> (Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1 ()Lkotlin/jvm/functions/Function2;
public final fun component2 ()Lkotlin/jvm/functions/Function2;
public final fun component3 ()Lkotlin/jvm/functions/Function2;
public final fun copy (Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;)Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;
public final fun component4 ()Lkotlin/jvm/functions/Function2;
public final fun copy (Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;)Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;
public fun equals (Ljava/lang/Object;)Z
public final fun getCenterContent ()Lkotlin/jvm/functions/Function2;
public final fun getLeadingContent ()Lkotlin/jvm/functions/Function2;
public final fun getTopContent ()Lkotlin/jvm/functions/Function2;
public final fun getTrailingContent ()Lkotlin/jvm/functions/Function2;
public fun hashCode ()I
public fun toString ()Ljava/lang/String;
Expand Down Expand Up @@ -2644,7 +2646,6 @@ public abstract interface class io/getstream/chat/android/compose/ui/theme/ChatC
public abstract fun ChannelMediaAttachmentsLoadingIndicator (Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
public abstract fun ChannelMediaAttachmentsLoadingItem (Landroidx/compose/foundation/lazy/grid/LazyGridItemScope;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
public abstract fun ChannelMediaAttachmentsPreviewBottomBar (Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;Landroidx/compose/runtime/Composer;I)V
public abstract fun ChannelMediaAttachmentsPreviewBottomBar (Ljava/lang/String;Landroidx/compose/runtime/Composer;I)V
public abstract fun ChannelMediaAttachmentsPreviewTopBar (Lio/getstream/chat/android/ui/common/state/channel/attachments/ChannelAttachmentsViewState$Content$Item;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
public abstract fun ChannelMediaAttachmentsPreviewTopBarTitle (Lio/getstream/chat/android/ui/common/state/channel/attachments/ChannelAttachmentsViewState$Content$Item;Landroidx/compose/runtime/Composer;I)V
public abstract fun ChannelMediaAttachmentsTopBar (Landroidx/compose/foundation/lazy/grid/LazyGridState;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
Expand Down Expand Up @@ -2833,7 +2834,6 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatComponentFacto
public static fun ChannelMediaAttachmentsLoadingIndicator (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
public static fun ChannelMediaAttachmentsLoadingItem (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/foundation/lazy/grid/LazyGridItemScope;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
public static fun ChannelMediaAttachmentsPreviewBottomBar (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ChannelMediaAttachmentsPreviewBottomBarParams;Landroidx/compose/runtime/Composer;I)V
public static fun ChannelMediaAttachmentsPreviewBottomBar (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Ljava/lang/String;Landroidx/compose/runtime/Composer;I)V
public static fun ChannelMediaAttachmentsPreviewTopBar (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/ui/common/state/channel/attachments/ChannelAttachmentsViewState$Content$Item;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
public static fun ChannelMediaAttachmentsPreviewTopBarTitle (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/ui/common/state/channel/attachments/ChannelAttachmentsViewState$Content$Item;Landroidx/compose/runtime/Composer;I)V
public static fun ChannelMediaAttachmentsTopBar (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/foundation/lazy/grid/LazyGridState;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
Expand Down
82 changes: 32 additions & 50 deletions ...o/getstream/chat/android/compose/ui/attachments/preview/MediaGalleryPreviewOptionsMenu.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,20 @@

package io.getstream.chat.android.compose.ui.attachments.preview

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Surface
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand All @@ -40,7 +38,6 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.getstream.chat.android.compose.R
import io.getstream.chat.android.compose.state.mediagallerypreview.Delete
import io.getstream.chat.android.compose.state.mediagallerypreview.MediaGalleryPreviewOption
Expand All @@ -50,27 +47,27 @@ import io.getstream.chat.android.compose.state.mediagallerypreview.ShowInChat
import io.getstream.chat.android.compose.ui.components.StreamHorizontalDivider
import io.getstream.chat.android.compose.ui.theme.ChatTheme
import io.getstream.chat.android.compose.ui.theme.MediaGalleryOptionsConfig
import io.getstream.chat.android.compose.ui.theme.StreamTokens
import io.getstream.chat.android.models.Attachment
import io.getstream.chat.android.models.ConnectionState
import io.getstream.chat.android.models.Message
import io.getstream.chat.android.models.User

/**
* Composable rendering the options menu overlay for media gallery preview.
* Composable rendering the options menu as a bottom sheet for media gallery preview.
*
* Displays a dropdown menu in the top-right corner with available actions for the
* currently displayed attachment. The menu appears as a floating surface with a
* semi-transparent overlay covering the entire screen behind it. Clicking anywhere
* outside the menu dismisses it.
* Displays a [ModalBottomSheet] with available actions for the currently displayed attachment.
* The sheet can be dismissed by swiping down, tapping outside, or tapping the scrim.
*
* Each option is rendered as a [MediaGalleryOptionItem] with dividers between items.
*
* @param attachment The currently displayed attachment for which options are shown.
* @param options List of available options to display in the menu.
* @param onOptionClick Callback invoked when an option is clicked, providing both the attachment and option.
* @param onDismiss Callback invoked when the menu should be dismissed.
* @param modifier Optional modifier applied to the Surface containing the options.
* @param modifier Optional modifier applied to the [ModalBottomSheet].
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun MediaGalleryOptionsMenu(
attachment: Attachment,
Expand All @@ -79,39 +76,25 @@ internal fun MediaGalleryOptionsMenu(
onDismiss: () -> Unit,
modifier: Modifier = Modifier,
) {
Box(
modifier = Modifier
.fillMaxSize()
.background(ChatTheme.colors.backgroundCoreScrim)
.clickable(
indication = null,
interactionSource = null,
onClick = onDismiss,
),
ModalBottomSheet(
modifier = modifier,
sheetState = rememberStandardBottomSheetState(initialValue = SheetValue.Expanded, skipHiddenState = false),
containerColor = ChatTheme.colors.backgroundElevationElevation1,
scrimColor = ChatTheme.colors.backgroundCoreScrim,
onDismissRequest = onDismiss,
) {
Surface(
modifier = modifier
.padding(16.dp)
.width(150.dp)
.wrapContentHeight()
.align(Alignment.TopEnd),
shape = RoundedCornerShape(16.dp),
shadowElevation = 4.dp,
color = ChatTheme.colors.backgroundElevationElevation1,
) {
Column(modifier = Modifier.fillMaxWidth()) {
options.forEachIndexed { index, option ->
MediaGalleryOptionItem(
option = option,
onClick = {
onDismiss()
onOptionClick(attachment, option)
},
)
Column(modifier = Modifier.fillMaxWidth()) {
options.forEachIndexed { index, option ->
MediaGalleryOptionItem(
option = option,
onClick = {
onOptionClick(attachment, option)
onDismiss()
},
)

if (index != options.lastIndex) {
StreamHorizontalDivider()
}
if (index != options.lastIndex) {
StreamHorizontalDivider()
}
}
}
Expand All @@ -138,28 +121,27 @@ internal fun MediaGalleryOptionItem(
Row(
modifier = Modifier
.fillMaxWidth()
.background(ChatTheme.colors.backgroundElevationElevation1)
.padding(horizontal = StreamTokens.spacing2xs)
.clickable(
interactionSource = null,
indication = ripple(),
enabled = option.isEnabled,
onClick = onClick,
)
.padding(horizontal = 16.dp, vertical = 8.dp),
.padding(StreamTokens.spacingSm),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
modifier = Modifier.size(18.dp),
modifier = Modifier.size(20.dp),
painter = option.iconPainter,
tint = option.iconColor,
contentDescription = option.title,
)
Spacer(modifier = Modifier.width(8.dp))
Spacer(modifier = Modifier.width(StreamTokens.spacingSm))
Text(
text = option.title,
color = option.titleColor,
style = ChatTheme.typography.bodyEmphasis,
fontSize = 12.sp,
style = ChatTheme.typography.bodyDefault,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
Expand Down
Loading
Loading