Update media preview screen design

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

@@ -760,7 +760,7 @@ public final class io/getstream/chat/android/compose/ui/attachments/factory/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;
@@ -771,7 +771,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;
@@ -788,7 +788,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;
@@ -799,7 +799,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;
@@ -861,8 +861,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 {

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

@@ -17,7 +17,6 @@
 package io.getstream.chat.android.compose.ui.attachments.content
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -38,7 +37,6 @@ import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -58,18 +56,17 @@ import io.getstream.chat.android.compose.state.messages.attachments.AttachmentSt
 import io.getstream.chat.android.compose.ui.components.LoadingIndicator
 import io.getstream.chat.android.compose.ui.components.audio.PlaybackTimerText
 import io.getstream.chat.android.compose.ui.components.audio.StaticWaveformSlider
+import io.getstream.chat.android.compose.ui.components.button.SpeedButton
 import io.getstream.chat.android.compose.ui.components.button.StreamButton
 import io.getstream.chat.android.compose.ui.components.button.StreamButtonStyleDefaults
 import io.getstream.chat.android.compose.ui.theme.ChatPreviewTheme
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.MessageStyling
 import io.getstream.chat.android.compose.ui.theme.StreamTokens
 import io.getstream.chat.android.compose.ui.util.applyIf
-import io.getstream.chat.android.compose.ui.util.clickable
 import io.getstream.chat.android.compose.ui.util.shouldBeDisplayedAsFullSizeAttachment
 import io.getstream.chat.android.compose.viewmodel.messages.AudioPlayerViewModel
 import io.getstream.chat.android.compose.viewmodel.messages.AudioPlayerViewModelFactory
-import io.getstream.chat.android.extensions.isInt
 import io.getstream.chat.android.models.Attachment
 import io.getstream.chat.android.models.Attachment.UploadState
 import io.getstream.chat.android.ui.common.state.messages.list.AudioPlayerState
@@ -307,36 +304,6 @@ internal fun PlaybackToggleButton(
     }
 }
 
-private val speedButtonShape = RoundedCornerShape(StreamTokens.radiusLg)
-
-/**
- * Represents the speed button.
- */
-@Composable
-private fun SpeedButton(
-    speed: Float,
-    outlineColor: Color,
-    enabled: Boolean = true,
-    onClick: () -> Unit,
-) {
-    val colors = ChatTheme.colors
-    val textColor = if (enabled) colors.controlPlaybackToggleText else colors.textDisabled
-    val borderColor = if (enabled) outlineColor else colors.borderUtilityDisabled
-    Text(
-        text = when (speed.isInt()) {
-            true -> "x${speed.toInt()}"
-            else -> "x$speed"
-        },
-        style = ChatTheme.typography.metadataEmphasis,
-        color = textColor,
-        modifier = Modifier
-            .border(1.dp, borderColor, speedButtonShape)
-            .clip(speedButtonShape)
-            .applyIf(enabled) { clickable(onClick = onClick) }
-            .padding(horizontal = StreamTokens.spacingXs, vertical = StreamTokens.spacing2xs),
-    )
-}
-
 @Composable
 private fun UploadProgressIndicator(
     uploadState: UploadState.InProgress,

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/preview/MediaGalleryPreviewOptionsMenu.kt

@@ -16,22 +16,19 @@
 
 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.Text
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -40,7 +37,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
@@ -50,27 +46,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,
@@ -79,39 +75,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 = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+        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()
                 }
             }
         }
@@ -138,28 +120,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,
         )