From bbe8e112cd48856ce02c014c952f9cf4aad47d37 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 31 Dec 2025 09:17:40 +0100 Subject: [PATCH] Extract PlaybackSpeedButton as an Atom. --- .../components/event/TimelineItemVoiceView.kt | 44 +------------ .../atomic/atoms/PlaybackSpeedButton.kt | 65 +++++++++++++++++++ .../impl/gallery/ui/VoiceItemView.kt | 43 +----------- 3 files changed, 67 insertions(+), 85 deletions(-) create mode 100644 libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/PlaybackSpeedButton.kt diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt index 1010075803..45534e9591 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt +++ b/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 = {}) - } -} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/PlaybackSpeedButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/PlaybackSpeedButton.kt new file mode 100644 index 0000000000..bfc876d13a --- /dev/null +++ b/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 = {}) + } +} diff --git a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/ui/VoiceItemView.kt b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/ui/VoiceItemView.kt index 878c8ffd3a..9b2eaa2b32 100644 --- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/ui/VoiceItemView.kt +++ b/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 = {}) - } -}