Add waveform to voice message preview UI (#1661)

* Add waveform to preview UI

* Update screenshots

* Make random waveform function deterministic

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/voicemessages/WaveformUtils.kt

@@ -20,4 +20,9 @@ package io.element.android.features.messages.impl.voicemessages
  * Resizes the given [0;1024] int list as per unstable MSC3246 spec
  * to a [0;1] range float list to be used for waveform rendering.
  */
-fun List<Int>.fromMSC3246range(): List<Float> = map { it / 1024f }
+internal fun List<Int>.fromMSC3246range(): List<Float> = map { it / 1024f }
+
+/**
+ * Resizes the given [0;1] float list to [0;1024] int list as per unstable MSC3246 spec.
+ */
+internal fun List<Float>.toMSC3246range(): List<Int> = map { (it * 1024).toInt() }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/voicemessages/composer/VoiceMessageComposerPresenter.kt

@@ -28,6 +28,7 @@ import androidx.compose.runtime.setValue
 import androidx.core.net.toUri
 import androidx.lifecycle.Lifecycle
 import io.element.android.features.messages.impl.voicemessages.VoiceMessageException
+import io.element.android.features.messages.impl.voicemessages.toMSC3246range
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.di.SingleIn
@@ -40,6 +41,8 @@ import io.element.android.libraries.textcomposer.model.VoiceMessageState
 import io.element.android.libraries.voicerecorder.api.VoiceRecorder
 import io.element.android.libraries.voicerecorder.api.VoiceRecorderState
 import io.element.android.services.analytics.api.AnalyticsService
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import timber.log.Timber
@@ -66,6 +69,7 @@ class VoiceMessageComposerPresenter @Inject constructor(
         var isSending by remember { mutableStateOf(false) }
         val playerState by player.state.collectAsState(initial = VoiceMessageComposerPlayer.State.NotPlaying)
         val isPlaying by remember(playerState.isPlaying) { derivedStateOf { playerState.isPlaying } }
+        val waveform by remember(recorderState) { derivedStateOf { recorderState.finishedWaveform() } }
 
         val onLifecycleEvent = { event: Lifecycle.Event ->
             when (event) {
@@ -174,11 +178,11 @@ class VoiceMessageComposerPresenter @Inject constructor(
                     duration = state.elapsedTime,
                     level = state.level
                 )
-                is VoiceRecorderState.Finished -> if (isSending) {
-                    VoiceMessageState.Sending
-                } else {
-                    VoiceMessageState.Preview(isPlaying = isPlaying)
-                }
+                is VoiceRecorderState.Finished -> VoiceMessageState.Preview(
+                    isSending = isSending,
+                    isPlaying = isPlaying,
+                    waveform = waveform,
+                )
                 else -> VoiceMessageState.Idle
             },
             showPermissionRationaleDialog = permissionState.showDialog,
@@ -227,7 +231,8 @@ class VoiceMessageComposerPresenter @Inject constructor(
     }
 }
 
-/**
- * Resizes the given [0;1] float list to [0;1024] int list as per unstable MSC3246 spec.
- */
-private fun List<Float>.toMSC3246range(): List<Int> = map { (it * 1024).toInt() }
+private fun VoiceRecorderState.finishedWaveform(): ImmutableList<Float> =
+    (this as? VoiceRecorderState.Finished)
+        ?.waveform
+        .orEmpty()
+        .toImmutableList()

features/messages/impl/src/test/kotlin/io/element/android/features/messages/voicemessages/composer/VoiceMessageComposerPresenterTest.kt

@@ -25,11 +25,11 @@ import app.cash.molecule.moleculeFlow
 import app.cash.turbine.TurbineTestContext
 import app.cash.turbine.test
 import com.google.common.truth.Truth.assertThat
+import io.element.android.features.messages.impl.voicemessages.VoiceMessageException
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerEvents
+import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerPlayer
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerPresenter
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerState
-import io.element.android.features.messages.impl.voicemessages.VoiceMessageException
-import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerPlayer
 import io.element.android.libraries.mediaplayer.test.FakeMediaPlayer
 import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
 import io.element.android.libraries.mediaupload.api.MediaSender
@@ -44,6 +44,7 @@ import io.element.android.libraries.textcomposer.model.VoiceMessageState
 import io.element.android.libraries.voicerecorder.test.FakeVoiceRecorder
 import io.element.android.services.analytics.test.FakeAnalyticsService
 import io.element.android.tests.testutils.WarmUpRule
+import kotlinx.collections.immutable.toImmutableList
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.test.TestScope
 import kotlinx.coroutines.test.runTest
@@ -216,7 +217,7 @@ class VoiceMessageComposerPresenterTest {
             awaitItem().eventSink(VoiceMessageComposerEvents.RecordButtonEvent(PressEvent.PressStart))
             awaitItem().eventSink(VoiceMessageComposerEvents.RecordButtonEvent(PressEvent.LongPressEnd))
             awaitItem().eventSink(VoiceMessageComposerEvents.SendVoiceMessage)
-            assertThat(awaitItem().voiceMessageState).isEqualTo(VoiceMessageState.Sending)
+            assertThat(awaitItem().voiceMessageState).isEqualTo(aPreviewState(isSending = true))
 
             val finalState = awaitItem()
             assertThat(finalState.voiceMessageState).isEqualTo(VoiceMessageState.Idle)
@@ -239,7 +240,7 @@ class VoiceMessageComposerPresenterTest {
                 eventSink(VoiceMessageComposerEvents.SendVoiceMessage)
                 eventSink(VoiceMessageComposerEvents.SendVoiceMessage)
             }
-            assertThat(awaitItem().voiceMessageState).isEqualTo(VoiceMessageState.Sending)
+            assertThat(awaitItem().voiceMessageState).isEqualTo(aPreviewState(isSending = true))
 
             val finalState = awaitItem()
             assertThat(finalState.voiceMessageState).isEqualTo(VoiceMessageState.Idle)
@@ -266,7 +267,7 @@ class VoiceMessageComposerPresenterTest {
             }
 
             val finalState = awaitItem()
-            assertThat(finalState.voiceMessageState).isEqualTo(VoiceMessageState.Sending)
+            assertThat(finalState.voiceMessageState).isEqualTo(aPreviewState(isSending = true))
             assertThat(matrixRoom.sendMediaCount).isEqualTo(0)
             assertThat(analyticsService.trackedErrors).hasSize(0)
             voiceRecorder.assertCalls(started = 1, stopped = 1, deleted = 0)
@@ -288,7 +289,7 @@ class VoiceMessageComposerPresenterTest {
             val previewState = awaitItem()
 
             previewState.eventSink(VoiceMessageComposerEvents.SendVoiceMessage)
-            assertThat(awaitItem().voiceMessageState).isEqualTo(VoiceMessageState.Sending)
+            assertThat(awaitItem().voiceMessageState).isEqualTo(aPreviewState(isSending = true))
 
             ensureAllEventsConsumed()
             assertThat(previewState.voiceMessageState).isEqualTo(aPreviewState())
@@ -452,18 +453,15 @@ class VoiceMessageComposerPresenterTest {
             VoiceMessageComposerEvents.LifecycleEvent(event = Lifecycle.Event.ON_PAUSE)
         )
 
-        val onPauseState = when (val vmState = mostRecentState.voiceMessageState) {
-            VoiceMessageState.Idle,
-            VoiceMessageState.Sending -> {
-                mostRecentState
-            }
+        val onPauseState = when (val state = mostRecentState.voiceMessageState) {
+            VoiceMessageState.Idle -> mostRecentState
             is VoiceMessageState.Recording -> {
                 // If recorder was active, it stops
                 awaitItem().apply {
                     assertThat(voiceMessageState).isEqualTo(aPreviewState())
                 }
             }
-            is VoiceMessageState.Preview -> when(vmState.isPlaying) {
+            is VoiceMessageState.Preview -> when (state.isPlaying) {
                 // If the preview was playing, it pauses
                 true -> awaitItem().apply {
                     assertThat(voiceMessageState).isEqualTo(aPreviewState())
@@ -476,13 +474,15 @@ class VoiceMessageComposerPresenterTest {
             VoiceMessageComposerEvents.LifecycleEvent(event = Lifecycle.Event.ON_DESTROY)
         )
 
-        when (onPauseState.voiceMessageState) {
-            VoiceMessageState.Idle,
-            VoiceMessageState.Sending ->
+        when (val state = onPauseState.voiceMessageState) {
+            VoiceMessageState.Idle ->
                 ensureAllEventsConsumed()
-            is VoiceMessageState.Recording,
-            is VoiceMessageState.Preview ->
+            is VoiceMessageState.Recording ->
                 assertThat(awaitItem().voiceMessageState).isEqualTo(VoiceMessageState.Idle)
+            is VoiceMessageState.Preview -> when (state.isSending) {
+                true -> ensureAllEventsConsumed()
+                false -> assertThat(awaitItem().voiceMessageState).isEqualTo(VoiceMessageState.Idle)
+            }
         }
     }
 
@@ -514,9 +514,12 @@ class VoiceMessageComposerPresenterTest {
     }
 
     private fun aPreviewState(
-        isPlaying: Boolean = false
+        isPlaying: Boolean = false,
+        isSending: Boolean = false,
+        waveform: List<Float> = voiceRecorder.waveform,
     ) = VoiceMessageState.Preview(
-        isPlaying = isPlaying
+        isPlaying = isPlaying,
+        isSending = isSending,
+        waveform = waveform.toImmutableList(),
     )
-
 }