Update design of the play button

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

@@ -1624,6 +1624,13 @@ public final class io/getstream/chat/android/compose/ui/components/common/Compos
 	public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
 }
 
+public final class io/getstream/chat/android/compose/ui/components/common/ComposableSingletons$PlayButtonKt {
+	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/common/ComposableSingletons$PlayButtonKt;
+	public static field lambda-1 Lkotlin/jvm/functions/Function2;
+	public fun <init> ()V
+	public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class io/getstream/chat/android/compose/ui/components/common/MenuOptionItemKt {
 	public static final fun MenuOptionItem-Y_kIC3U (Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function3;Ljava/lang/String;JLandroidx/compose/ui/text/TextStyle;FLandroidx/compose/ui/Alignment$Vertical;Landroidx/compose/foundation/layout/Arrangement$Horizontal;Landroidx/compose/runtime/Composer;II)V
 }

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

@@ -37,7 +37,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -65,7 +64,6 @@ import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
 import coil3.ColorImage
 import coil3.annotation.ExperimentalCoilApi
 import coil3.compose.AsyncImagePainter
@@ -80,6 +78,8 @@ import io.getstream.chat.android.compose.ui.attachments.preview.MediaGalleryInje
 import io.getstream.chat.android.compose.ui.attachments.preview.MediaGalleryPreviewContract
 import io.getstream.chat.android.compose.ui.attachments.preview.MediaGalleryPreviewContract.Input
 import io.getstream.chat.android.compose.ui.components.ShimmerProgressIndicator
+import io.getstream.chat.android.compose.ui.components.common.PlayButton
+import io.getstream.chat.android.compose.ui.components.common.PlayButtonSize
 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
@@ -146,7 +146,7 @@ public fun MediaAttachmentContent(
     ) -> Unit = ::onMediaAttachmentContentItemClick,
     itemOverlayContent: @Composable (attachmentType: String?) -> Unit = { attachmentType ->
         if (attachmentType == AttachmentType.VIDEO) {
-            PlayButton()
+            PlayButton(PlayButtonSize.Medium)
         }
     },
 ) {
@@ -206,7 +206,7 @@ public fun MediaAttachmentContent(
     },
     itemOverlayContent: @Composable (attachmentType: String?) -> Unit = { attachmentType ->
         if (attachmentType == AttachmentType.VIDEO) {
-            PlayButtonOverlay()
+            PlayButton(PlayButtonSize.Medium)
         }
     },
 ) {
@@ -634,50 +634,6 @@ internal fun MediaAttachmentContentItem(
     }
 }
 
-@Composable
-private fun PlayButtonOverlay() {
-    val colors = ChatTheme.colors
-    Box(
-        modifier = Modifier
-            .size(40.dp)
-            .background(colors.controlPlayControlBg, CircleShape),
-        contentAlignment = Alignment.Center,
-    ) {
-        Icon(
-            painter = painterResource(R.drawable.stream_compose_ic_play),
-            contentDescription = null,
-            tint = colors.controlPlayControlIcon,
-            modifier = Modifier.size(16.dp),
-        )
-    }
-}
-
-/**
- * A simple play button that is overlaid above
- * video attachments.
- *
- * @param modifier The modifier used for styling.
- * @param contentDescription Used to describe the content represented by this composable.
- */
-@Suppress("MagicNumber")
-@Composable
-internal fun PlayButton(
-    modifier: Modifier = Modifier,
-    contentDescription: String? = null,
-) {
-    Box(
-        modifier = modifier,
-        contentAlignment = Alignment.Center,
-    ) {
-        Icon(
-            modifier = Modifier.fillMaxSize(0.6f),
-            painter = painterResource(id = R.drawable.stream_compose_ic_play),
-            contentDescription = contentDescription,
-            tint = ChatTheme.colors.controlPlayControlIcon,
-        )
-    }
-}
-
 /**
  * Represents an overlay that's shown on the last media attachment preview in the media attachment
  * item gallery.

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/factory/MediaAttachmentFactory.kt

@@ -16,27 +16,18 @@
 
 package io.getstream.chat.android.compose.ui.attachments.factory
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import io.getstream.chat.android.client.utils.attachment.isImage
 import io.getstream.chat.android.client.utils.attachment.isVideo
 import io.getstream.chat.android.compose.ui.attachments.AttachmentFactory
 import io.getstream.chat.android.compose.ui.attachments.content.MediaAttachmentClickData
 import io.getstream.chat.android.compose.ui.attachments.content.MediaAttachmentPreviewContent
-import io.getstream.chat.android.compose.ui.attachments.content.PlayButton
 import io.getstream.chat.android.compose.ui.attachments.content.onMediaAttachmentContentItemClick
-import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.components.common.PlayButton
+import io.getstream.chat.android.compose.ui.components.common.PlayButtonSize
 import io.getstream.chat.android.models.Attachment
 import io.getstream.chat.android.models.AttachmentType
 
@@ -104,13 +95,8 @@ public class MediaAttachmentFactory(
 @Composable
 private fun DefaultItemOverlayContent() {
     PlayButton(
-        modifier = Modifier
-            .padding(2.dp)
-            .shadow(6.dp, shape = CircleShape)
-            .background(color = Color.White, shape = CircleShape)
-            .fillMaxWidth(0.25f)
-            .aspectRatio(1f)
-            .testTag("Stream_PlayButton"),
+        size = PlayButtonSize.Small,
+        modifier = Modifier.testTag("Stream_PlayButton"),
     )
 }
 
@@ -122,10 +108,5 @@ private fun DefaultItemOverlayContent() {
 @Preview(name = "DefaultPreviewItemOverlayContent Preview")
 @Composable
 internal fun DefaultPreviewItemOverlayContent() {
-    PlayButton(
-        modifier = Modifier
-            .shadow(6.dp, shape = CircleShape)
-            .background(color = ChatTheme.colors.controlPlayControlBg, shape = CircleShape)
-            .fillMaxSize(0.25f),
-    )
+    PlayButton(size = PlayButtonSize.Small)
 }

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

@@ -30,7 +30,6 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.itemsIndexed
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Surface
@@ -42,8 +41,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
@@ -54,9 +51,10 @@ import coil3.request.ImageRequest
 import io.getstream.chat.android.client.utils.attachment.isImage
 import io.getstream.chat.android.client.utils.attachment.isVideo
 import io.getstream.chat.android.compose.R
-import io.getstream.chat.android.compose.ui.attachments.content.PlayButton
 import io.getstream.chat.android.compose.ui.components.ShimmerProgressIndicator
 import io.getstream.chat.android.compose.ui.components.avatar.AvatarSize
+import io.getstream.chat.android.compose.ui.components.common.PlayButton
+import io.getstream.chat.android.compose.ui.components.common.PlayButtonSize
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.util.StreamAsyncImage
 import io.getstream.chat.android.compose.ui.util.clickable
@@ -245,10 +243,7 @@ private fun MediaGalleryPhotosMenuItem(
 
         if (isVideo && imageState.isCompleted) {
             PlayButton(
-                modifier = Modifier
-                    .shadow(6.dp, shape = CircleShape)
-                    .background(color = Color.White, shape = CircleShape)
-                    .fillMaxSize(fraction = 0.2f),
+                size = PlayButtonSize.Small,
                 contentDescription = stringResource(R.string.stream_compose_cd_play_button),
             )
         }

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

@@ -21,8 +21,6 @@ import android.view.LayoutInflater
 import androidx.annotation.OptIn
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -31,11 +29,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.compose.LifecycleResumeEffect
 import androidx.media3.common.MediaItem
@@ -45,8 +41,9 @@ import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.ui.PlayerView
 import io.getstream.chat.android.compose.R
-import io.getstream.chat.android.compose.ui.attachments.content.PlayButton
 import io.getstream.chat.android.compose.ui.components.LoadingIndicator
+import io.getstream.chat.android.compose.ui.components.common.PlayButton
+import io.getstream.chat.android.compose.ui.components.common.PlayButtonSize
 import io.getstream.chat.android.compose.ui.util.StreamAsyncImage
 import io.getstream.chat.android.compose.ui.util.clickable
 import io.getstream.chat.android.core.internal.StreamHandsOff
@@ -168,13 +165,7 @@ internal fun MediaThumbnail(
             )
         }
         PlayButton(
-            modifier = Modifier
-                .shadow(6.dp, shape = CircleShape)
-                .background(color = Color.White, shape = CircleShape)
-                .size(
-                    width = 42.dp,
-                    height = 42.dp,
-                ),
+            size = PlayButtonSize.Large,
             contentDescription = stringResource(R.string.stream_compose_cd_play_button),
         )
     }

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/common/PlayButton.kt

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2014-2026 Stream.io Inc. All rights reserved.
+ *
+ * Licensed under the Stream License;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.getstream.chat.android.compose.ui.components.common
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.getstream.chat.android.compose.R
+import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.util.ifNotNull
+
+/**
+ * Default play button component. Used, for example, as an overlay for video attachments.
+ *
+ * @param modifier The modifier used for styling.
+ * @param contentDescription Text used by accessibility services to describe what this button represents.
+ */
+@Composable
+internal fun PlayButton(
+    size: PlayButtonSize,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+) {
+    val colors = ChatTheme.colors
+    Box(
+        modifier = modifier
+            .size(size.componentSize)
+            .background(colors.controlPlayControlBg, CircleShape)
+            .ifNotNull(contentDescription) { description ->
+                semantics { this.contentDescription = description }
+            },
+        contentAlignment = Alignment.Companion.Center,
+    ) {
+        Icon(
+            modifier = Modifier.Companion.size(size.iconSize),
+            painter = painterResource(id = R.drawable.stream_compose_ic_play),
+            contentDescription = null,
+            tint = colors.controlPlayControlIcon,
+        )
+    }
+}
+
+internal enum class PlayButtonSize(val componentSize: Dp, val iconSize: Dp) {
+    Large(componentSize = 48.dp, iconSize = 20.dp),
+    Medium(componentSize = 40.dp, iconSize = 16.dp),
+    Small(componentSize = 20.dp, iconSize = 10.dp),
+}
+
+@Preview
+@Composable
+private fun PlayButtonPreview() {
+    ChatTheme {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            PlayButtonSize.entries.forEach { size ->
+                PlayButton(size)
+            }
+        }
+    }
+}