Add voice message preview player (#1646)

---------

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

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerView.kt

@@ -33,6 +33,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.textcomposer.model.Message
 import io.element.android.libraries.textcomposer.TextComposer
 import io.element.android.libraries.textcomposer.model.PressEvent
+import io.element.android.libraries.textcomposer.model.VoiceMessagePlayerEvent
 import kotlinx.coroutines.launch
 
 @Composable
@@ -83,6 +84,10 @@ internal fun MessageComposerView(
         voiceMessageState.eventSink(VoiceMessageComposerEvents.DeleteVoiceMessage)
     }
 
+    val onVoicePlayerEvent = { event: VoiceMessagePlayerEvent ->
+        voiceMessageState.eventSink(VoiceMessageComposerEvents.PlayerEvent(event))
+    }
+
     TextComposer(
         modifier = modifier,
         state = state.richTextEditorState,
@@ -98,6 +103,7 @@ internal fun MessageComposerView(
         enableTextFormatting = enableTextFormatting,
         enableVoiceMessages = enableVoiceMessages,
         onVoiceRecordButtonEvent = onVoiceRecordButtonEvent,
+        onVoicePlayerEvent = onVoicePlayerEvent,
         onSendVoiceMessage = onSendVoiceMessage,
         onDeleteVoiceMessage = onDeleteVoiceMessage,
         onError = ::onError,

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

@@ -18,11 +18,15 @@ package io.element.android.features.messages.impl.voicemessages.composer
 
 import androidx.lifecycle.Lifecycle
 import io.element.android.libraries.textcomposer.model.PressEvent
+import io.element.android.libraries.textcomposer.model.VoiceMessagePlayerEvent
 
 sealed interface VoiceMessageComposerEvents {
     data class RecordButtonEvent(
         val pressEvent: PressEvent
     ): VoiceMessageComposerEvents
+    data class PlayerEvent(
+        val playerEvent: VoiceMessagePlayerEvent,
+    ): VoiceMessageComposerEvents
     data object SendVoiceMessage: VoiceMessageComposerEvents
     data object DeleteVoiceMessage: VoiceMessageComposerEvents
     data object AcceptPermissionRationale: VoiceMessageComposerEvents

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

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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.element.android.features.messages.impl.voicemessages.composer
+
+import io.element.android.features.messages.impl.mediaplayer.MediaPlayer
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.map
+import javax.inject.Inject
+
+/**
+ * A media player for the voice message composer.
+ *
+ * @param mediaPlayer The [MediaPlayer] to use.
+ */
+class VoiceMessageComposerPlayer @Inject constructor(
+    private val mediaPlayer: MediaPlayer,
+) {
+    private var lastPlayedMediaPath: String? = null
+    private val curPlayingMediaId
+        get() = mediaPlayer.state.value.mediaId
+
+    val state: Flow<State> = mediaPlayer.state.map { state ->
+        if (lastPlayedMediaPath == null || lastPlayedMediaPath != state.mediaId) {
+            return@map State.NotPlaying
+        }
+
+        State(
+            isPlaying = state.isPlaying,
+            currentPosition = state.currentPosition
+        )
+    }.distinctUntilChanged()
+
+    /**
+     * Start playing from the current position.
+     *
+     * @param mediaPath The path to the media to be played.
+     * @param mimeType The mime type of the media file.
+     */
+    fun play(mediaPath: String, mimeType: String) {
+        if (mediaPath == curPlayingMediaId) {
+            mediaPlayer.play()
+        } else {
+            lastPlayedMediaPath = mediaPath
+            mediaPlayer.acquireControlAndPlay(
+                uri = mediaPath,
+                mediaId = mediaPath,
+                mimeType = mimeType,
+            )
+        }
+    }
+
+    /**
+     * Pause playback.
+     */
+    fun pause() {
+        if (lastPlayedMediaPath == curPlayingMediaId) {
+            mediaPlayer.pause()
+        }
+    }
+
+    data class State(
+        /**
+         * Whether this player is currently playing.
+         */
+        val isPlaying: Boolean,
+        /**
+         * The elapsed time of this player in milliseconds.
+         */
+        val currentPosition: Long,
+    ) {
+        companion object {
+            val NotPlaying = State(
+                isPlaying = false,
+                currentPosition = 0L,
+            )
+        }
+    }
+}

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

@@ -19,6 +19,7 @@ package io.element.android.features.messages.impl.voicemessages.composer
 import android.Manifest
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -34,6 +35,7 @@ import io.element.android.libraries.mediaupload.api.MediaSender
 import io.element.android.libraries.permissions.api.PermissionsEvents
 import io.element.android.libraries.permissions.api.PermissionsPresenter
 import io.element.android.libraries.textcomposer.model.PressEvent
+import io.element.android.libraries.textcomposer.model.VoiceMessagePlayerEvent
 import io.element.android.libraries.textcomposer.model.VoiceMessageState
 import io.element.android.libraries.voicerecorder.api.VoiceRecorder
 import io.element.android.libraries.voicerecorder.api.VoiceRecorderState
@@ -50,6 +52,7 @@ class VoiceMessageComposerPresenter @Inject constructor(
     private val voiceRecorder: VoiceRecorder,
     private val analyticsService: AnalyticsService,
     private val mediaSender: MediaSender,
+    private val player: VoiceMessageComposerPlayer,
     permissionsPresenterFactory: PermissionsPresenter.Factory
 ) : Presenter<VoiceMessageComposerState> {
     private val permissionsPresenter = permissionsPresenterFactory.create(Manifest.permission.RECORD_AUDIO)
@@ -61,11 +64,14 @@ class VoiceMessageComposerPresenter @Inject constructor(
 
         val permissionState = permissionsPresenter.present()
         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 onLifecycleEvent = { event: Lifecycle.Event ->
             when (event) {
                 Lifecycle.Event.ON_PAUSE -> {
                     appCoroutineScope.finishRecording()
+                    player.pause()
                 }
                 Lifecycle.Event.ON_DESTROY -> {
                     appCoroutineScope.cancelRecording()
@@ -99,6 +105,25 @@ class VoiceMessageComposerPresenter @Inject constructor(
                 }
             }
         }
+        val onPlayerEvent = { event: VoiceMessagePlayerEvent ->
+            when (event) {
+                VoiceMessagePlayerEvent.Play ->
+                    when (val recording = recorderState) {
+                        is VoiceRecorderState.Finished ->
+                            player.play(
+                                mediaPath = recording.file.path,
+                                mimeType = recording.mimeType,
+                            )
+                        else -> Timber.e("Voice message player event received but no file to play")
+                    }
+                VoiceMessagePlayerEvent.Pause -> {
+                    player.pause()
+                }
+                is VoiceMessagePlayerEvent.Seek -> {
+                    // TODO implement seeking
+                }
+            }
+        }
 
         val onAcceptPermissionsRationale = {
             permissionState.eventSink(PermissionsEvents.OpenSystemSettingAndCloseDialog)
@@ -131,6 +156,7 @@ class VoiceMessageComposerPresenter @Inject constructor(
         val handleEvents: (VoiceMessageComposerEvents) -> Unit = { event ->
             when (event) {
                 is VoiceMessageComposerEvents.RecordButtonEvent -> onRecordButtonPress(event)
+                is VoiceMessageComposerEvents.PlayerEvent -> onPlayerEvent(event.playerEvent)
                 is VoiceMessageComposerEvents.SendVoiceMessage -> localCoroutineScope.launch {
                     onSendButtonPress()
                 }
@@ -150,7 +176,7 @@ class VoiceMessageComposerPresenter @Inject constructor(
                 is VoiceRecorderState.Finished -> if (isSending) {
                     VoiceMessageState.Sending
                 } else {
-                    VoiceMessageState.Preview
+                    VoiceMessageState.Preview(isPlaying = isPlaying)
                 }
                 else -> VoiceMessageState.Idle
             },