Extract PlaybackSpeedButton as an Atom.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt

@@ -9,7 +9,6 @@
 package io.element.android.features.messages.impl.timeline.components.event
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -19,7 +18,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -45,6 +43,7 @@ import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVoiceContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVoiceContentProvider
+import io.element.android.libraries.designsystem.atomic.atoms.PlaybackSpeedButton
 import io.element.android.libraries.designsystem.components.media.WaveformPlaybackView
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -187,36 +186,6 @@ private fun RetryButton(
     }
 }
 
-@Composable
-private fun PlaybackSpeedButton(
-    speed: Float,
-    onClick: () -> Unit,
-) {
-    val speedText = when (speed) {
-        0.5f -> "0.5×"
-        1.0f -> "1×"
-        1.5f -> "1.5×"
-        2.0f -> "2×"
-        else -> "${speed}×"
-    }
-    androidx.compose.foundation.layout.Box(
-        modifier = Modifier
-            .background(
-                color = ElementTheme.colors.bgCanvasDefault,
-                shape = RoundedCornerShape(12.dp)
-            )
-            .clickable(onClick = onClick)
-            .padding(horizontal = 8.dp, vertical = 4.dp),
-        contentAlignment = Alignment.Center,
-    ) {
-        Text(
-            text = speedText,
-            color = ElementTheme.colors.iconSecondary,
-            style = ElementTheme.typography.fontBodyXsMedium,
-        )
-    }
-}
-
 @Composable
 private fun ControlIcon(
     imageVector: ImageVector,
@@ -340,14 +309,3 @@ internal fun ProgressButtonPreview() = ElementPreview {
         ProgressButton(displayImmediately = false)
     }
 }
-
-@PreviewsDayNight
-@Composable
-internal fun PlaybackSpeedButtonPreview() = ElementPreview {
-    Row {
-        PlaybackSpeedButton(speed = 0.5f, onClick = {})
-        PlaybackSpeedButton(speed = 1.0f, onClick = {})
-        PlaybackSpeedButton(speed = 1.5f, onClick = {})
-        PlaybackSpeedButton(speed = 2.0f, onClick = {})
-    }
-}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/PlaybackSpeedButton.kt

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.designsystem.atomic.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+fun PlaybackSpeedButton(
+    speed: Float,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val speedText = when (speed) {
+        0.5f -> "0.5×"
+        1.0f -> "1×"
+        1.5f -> "1.5×"
+        2.0f -> "2×"
+        else -> "${speed}×"
+    }
+    Box(
+        modifier = modifier
+            .background(
+                color = ElementTheme.colors.bgCanvasDefault,
+                shape = RoundedCornerShape(12.dp)
+            )
+            .clickable(onClick = onClick)
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = speedText,
+            color = ElementTheme.colors.iconSecondary,
+            style = ElementTheme.typography.fontBodyXsMedium,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun PlaybackSpeedButtonPreview() = ElementPreview {
+    Row {
+        PlaybackSpeedButton(speed = 0.5f, onClick = {})
+        PlaybackSpeedButton(speed = 1.0f, onClick = {})
+        PlaybackSpeedButton(speed = 1.5f, onClick = {})
+        PlaybackSpeedButton(speed = 2.0f, onClick = {})
+    }
+}

libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/ui/VoiceItemView.kt

@@ -10,7 +10,6 @@ package io.element.android.libraries.mediaviewer.impl.gallery.ui
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -40,6 +39,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.atomic.atoms.PlaybackSpeedButton
 import io.element.android.libraries.designsystem.components.media.WaveformPlaybackView
 import io.element.android.libraries.designsystem.modifiers.onKeyboardContextMenuAction
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -235,36 +235,6 @@ private fun RetryButton(
     }
 }
 
-@Composable
-private fun PlaybackSpeedButton(
-    speed: Float,
-    onClick: () -> Unit,
-) {
-    val speedText = when (speed) {
-        0.5f -> "0.5×"
-        1.0f -> "1×"
-        1.5f -> "1.5×"
-        2.0f -> "2×"
-        else -> "${speed}×"
-    }
-    androidx.compose.foundation.layout.Box(
-        modifier = Modifier
-            .background(
-                color = ElementTheme.colors.bgCanvasDefault,
-                shape = RoundedCornerShape(12.dp)
-            )
-            .padding(horizontal = 8.dp, vertical = 4.dp)
-            .clickable(onClick = onClick),
-        contentAlignment = Alignment.Center,
-    ) {
-        Text(
-            text = speedText,
-            color = ElementTheme.colors.iconSecondary,
-            style = ElementTheme.typography.fontBodyXsMedium,
-        )
-    }
-}
-
 @Composable
 private fun ControlIcon(
     imageVector: ImageVector,
@@ -325,14 +295,3 @@ internal fun VoiceItemViewPlayPreview(
         onLongClick = {},
     )
 }
-
-@PreviewsDayNight
-@Composable
-internal fun PlaybackSpeedButtonPreview() = ElementPreview {
-    Row {
-        PlaybackSpeedButton(speed = 0.5f, onClick = {})
-        PlaybackSpeedButton(speed = 1.0f, onClick = {})
-        PlaybackSpeedButton(speed = 1.5f, onClick = {})
-        PlaybackSpeedButton(speed = 2.0f, onClick = {})
-    }
-}