Merge branch 'develop' of https://github.com/vector-im/element-x-android into langleyd/live_waveform

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -48,6 +48,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.media.FakeWaveformFactory.createFakeWaveform
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.applyScaleUp
@@ -123,6 +124,10 @@ fun TextComposer(
         onVoicePlayerEvent(VoiceMessagePlayerEvent.Pause)
     }
 
+    val onSeekVoiceMessage = { position: Float ->
+        onVoicePlayerEvent(VoiceMessagePlayerEvent.Seek(position))
+    }
+
     val layoutModifier = modifier
         .fillMaxSize()
         .height(IntrinsicSize.Min)
@@ -189,8 +194,10 @@ fun TextComposer(
             when (voiceMessageState) {
                 VoiceMessageState.Idle,
                 is VoiceMessageState.Recording -> recordVoiceButton
-                is VoiceMessageState.Preview -> sendVoiceButton
-                is VoiceMessageState.Sending -> uploadVoiceProgress
+                is VoiceMessageState.Preview -> when(voiceMessageState.isSending) {
+                    true -> uploadVoiceProgress
+                    false -> sendVoiceButton
+                }
             }
         else ->
             sendButton
@@ -200,17 +207,12 @@ fun TextComposer(
         when (voiceMessageState) {
             is VoiceMessageState.Preview ->
                 VoiceMessagePreview(
-                    isInteractive = true,
+                    isInteractive = !voiceMessageState.isSending,
                     isPlaying = voiceMessageState.isPlaying,
+                    waveform = voiceMessageState.waveform,
                     onPlayClick = onPlayVoiceMessageClicked,
-                    onPauseClick = onPauseVoiceMessageClicked
-                )
-            VoiceMessageState.Sending ->
-                VoiceMessagePreview(
-                    isInteractive = false,
-                    isPlaying = false,
-                    onPlayClick = onPlayVoiceMessageClicked,
-                    onPauseClick = onPauseVoiceMessageClicked
+                    onPauseClick = onPauseVoiceMessageClicked,
+                    onSeek = onSeekVoiceMessage,
                 )
             is VoiceMessageState.Recording ->
                 VoiceMessageRecording(voiceMessageState.levels, voiceMessageState.duration)
@@ -219,13 +221,9 @@ fun TextComposer(
     }
 
     val voiceDeleteButton = @Composable {
-        val enabled = when (voiceMessageState) {
-            is VoiceMessageState.Preview -> true
-            VoiceMessageState.Sending,
-            is VoiceMessageState.Recording,
-            VoiceMessageState.Idle -> false
+        if(voiceMessageState is VoiceMessageState.Preview) {
+            VoiceMessageDeleteButton(enabled = !voiceMessageState.isSending, onClick = onDeleteVoiceMessage)
         }
-        VoiceMessageDeleteButton(enabled = enabled, onClick = onDeleteVoiceMessage)
     }
 
     if (showTextFormatting) {
@@ -286,7 +284,7 @@ private fun StandardLayout(
         verticalAlignment = Alignment.Bottom,
     ) {
         if (enableVoiceMessages && voiceMessageState !is VoiceMessageState.Idle) {
-            if (voiceMessageState is VoiceMessageState.Preview || voiceMessageState is VoiceMessageState.Sending) {
+            if (voiceMessageState is VoiceMessageState.Preview) {
                 Box(
                     modifier = Modifier
                         .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
@@ -819,11 +817,11 @@ internal fun TextComposerVoicePreview() = ElementPreview {
     PreviewColumn(items = persistentListOf({
         VoicePreview(voiceMessageState = VoiceMessageState.Recording(61.seconds, List(100) { it.toFloat() / 100 }.toPersistentList()))
     }, {
-        VoicePreview(voiceMessageState = VoiceMessageState.Preview(isPlaying = false))
+        VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = false, isPlaying = false, waveform = createFakeWaveform()))
     }, {
-        VoicePreview(voiceMessageState = VoiceMessageState.Preview(isPlaying = true))
+        VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = false, isPlaying = true, waveform = createFakeWaveform()))
     }, {
-        VoicePreview(voiceMessageState = VoiceMessageState.Sending)
+        VoicePreview(voiceMessageState = VoiceMessageState.Preview(isSending = true, isPlaying = false, waveform = createFakeWaveform()))
     }))
 }
 

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt

@@ -20,10 +20,13 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 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.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -31,6 +34,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.media.FakeWaveformFactory.createFakeWaveform
+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
 import io.element.android.libraries.designsystem.text.applyScaleUp
@@ -39,14 +44,18 @@ import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.textcomposer.R
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.collections.immutable.ImmutableList
 
 @Composable
 internal fun VoiceMessagePreview(
     isInteractive: Boolean,
     isPlaying: Boolean,
+    waveform: ImmutableList<Float>,
     modifier: Modifier = Modifier,
+    playbackProgress: Float = 0f,
     onPlayClick: () -> Unit = {},
-    onPauseClick: () -> Unit = {}
+    onPauseClick: () -> Unit = {},
+    onSeek: (Float) -> Unit = {},
 ) {
     Row(
         modifier = modifier
@@ -72,7 +81,22 @@ internal fun VoiceMessagePreview(
                 enabled = isInteractive
             )
         }
-        // TODO Add recording preview UI
+
+        Spacer(modifier = Modifier.width(8.dp))
+
+        // TODO Add timer UI
+
+        Spacer(modifier = Modifier.width(12.dp))
+
+        WaveformPlaybackView(
+            modifier = Modifier
+                .weight(1f)
+                .height(26.dp.applyScaleUp()),
+            playbackProgress = playbackProgress,
+            showCursor = isInteractive,
+            waveform = waveform,
+            onSeek = onSeek,
+        )
     }
 }
 
@@ -119,8 +143,8 @@ internal fun VoiceMessagePreviewPreview() = ElementPreview {
     Column(
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
-        VoiceMessagePreview(isInteractive = true, isPlaying = true)
-        VoiceMessagePreview(isInteractive = true, isPlaying = false)
-        VoiceMessagePreview(isInteractive = false, isPlaying = false)
+        VoiceMessagePreview(isInteractive = true, isPlaying = true, waveform = createFakeWaveform())
+        VoiceMessagePreview(isInteractive = true, isPlaying = false, waveform = createFakeWaveform())
+        VoiceMessagePreview(isInteractive = false, isPlaying = false, waveform = createFakeWaveform())
     }
 }

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/model/VoiceMessageState.kt

@@ -23,9 +23,11 @@ sealed class VoiceMessageState {
     data object Idle: VoiceMessageState()
 
     data class Preview(
+        val isSending: Boolean,
         val isPlaying: Boolean,
+        val waveform: ImmutableList<Float>,
     ): VoiceMessageState()
-    data object Sending: VoiceMessageState()
+
     data class Recording(
         val duration: Duration,
         val levels: ImmutableList<Float>,