Merge pull request #4045 from element-hq/feature/bma/inlinePlayer

Inline voice message player in the files gallery.

Author: bmarty

libraries/mediaviewer/api/src/main/kotlin/io/element/android/libraries/mediaviewer/api/MediaInfo.kt

@@ -125,3 +125,24 @@ fun anAudioMediaInfo(
     dateSentFull = dateSentFull,
     waveform = waveForm,
 )
+
+fun aVoiceMediaInfo(
+    filename: String = "a voice file.ogg",
+    caption: String? = null,
+    senderName: String? = null,
+    dateSent: String? = null,
+    dateSentFull: String? = null,
+    waveForm: List<Float>? = null,
+): MediaInfo = MediaInfo(
+    filename = filename,
+    caption = caption,
+    mimeType = MimeTypes.Ogg,
+    formattedFileSize = "3MB",
+    fileExtension = "ogg",
+    senderId = UserId("@alice:server.org"),
+    senderName = senderName,
+    senderAvatar = null,
+    dateSent = dateSent,
+    dateSentFull = dateSentFull,
+    waveform = waveForm,
+)

libraries/mediaviewer/impl/build.gradle.kts

@@ -43,6 +43,7 @@ dependencies {
     implementation(projects.libraries.matrix.api)
     implementation(projects.libraries.matrixui)
     implementation(projects.libraries.uiStrings)
+    implementation(projects.libraries.voiceplayer.api)
     implementation(projects.services.toolbox.api)
 
     api(projects.libraries.mediaviewer.api)

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

@@ -40,6 +40,7 @@ import io.element.android.libraries.matrix.api.timeline.item.event.getAvatarUrl
 import io.element.android.libraries.matrix.api.timeline.item.event.getDisambiguatedDisplayName
 import io.element.android.libraries.mediaviewer.api.MediaInfo
 import io.element.android.libraries.mediaviewer.api.util.FileExtensionExtractor
+import kotlinx.collections.immutable.persistentListOf
 import timber.log.Timber
 import javax.inject.Inject
 
@@ -104,7 +105,6 @@ class EventItemFactory @Inject constructor(
                         ),
                         mediaSource = type.source,
                         duration = type.info?.duration?.inWholeMilliseconds?.toHumanReadableDuration(),
-                        waveform = null,
                     )
                     is FileMessageType -> MediaItem.File(
                         id = currentTimelineItem.uniqueId,
@@ -182,7 +182,7 @@ class EventItemFactory @Inject constructor(
                         thumbnailSource = type.info?.thumbnailSource,
                         duration = type.info?.duration?.inWholeMilliseconds?.toHumanReadableDuration(),
                     )
-                    is VoiceMessageType -> MediaItem.Audio(
+                    is VoiceMessageType -> MediaItem.Voice(
                         id = currentTimelineItem.uniqueId,
                         eventId = currentTimelineItem.eventId,
                         mediaInfo = MediaInfo(
@@ -200,7 +200,7 @@ class EventItemFactory @Inject constructor(
                         ),
                         mediaSource = type.source,
                         duration = type.info?.duration?.inWholeMilliseconds?.toHumanReadableDuration(),
-                        waveform = type.details?.waveform,
+                        waveform = type.details?.waveform ?: persistentListOf(),
                     )
                 }
             }

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

@@ -8,6 +8,7 @@
 package io.element.android.libraries.mediaviewer.impl.gallery
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
@@ -18,12 +19,15 @@ import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
 import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.mediaviewer.impl.gallery.di.LocalMediaItemPresenterFactories
+import io.element.android.libraries.mediaviewer.impl.gallery.di.MediaItemPresenterFactories
 
 @ContributesNode(RoomScope::class)
 class MediaGalleryNode @AssistedInject constructor(
     @Assisted buildContext: BuildContext,
     @Assisted plugins: List<Plugin>,
     presenterFactory: MediaGalleryPresenter.Factory,
+    private val mediaItemPresenterFactories: MediaItemPresenterFactories,
 ) : Node(buildContext, plugins = plugins),
     MediaGalleryNavigator {
     private val presenter = presenterFactory.create(
@@ -56,12 +60,16 @@ class MediaGalleryNode @AssistedInject constructor(
 
     @Composable
     override fun View(modifier: Modifier) {
-        val state = presenter.present()
-        MediaGalleryView(
-            state = state,
-            onBackClick = ::onBackClick,
-            onItemClick = ::onItemClick,
-            modifier = modifier,
-        )
+        CompositionLocalProvider(
+            LocalMediaItemPresenterFactories provides mediaItemPresenterFactories,
+        ) {
+            val state = presenter.present()
+            MediaGalleryView(
+                state = state,
+                onBackClick = ::onBackClick,
+                onItemClick = ::onItemClick,
+                modifier = modifier,
+            )
+        }
     }
 }

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

@@ -137,6 +137,7 @@ class MediaGalleryPresenter @AssistedInject constructor(
                             is MediaItem.Video -> event.mediaItem.thumbnailSource ?: event.mediaItem.mediaSource
                             is MediaItem.Audio -> null
                             is MediaItem.File -> null
+                            is MediaItem.Voice -> null
                         },
                     )
                 }

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

@@ -19,6 +19,7 @@ import io.element.android.libraries.mediaviewer.impl.gallery.ui.aMediaItemFile
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.aMediaItemImage
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.aMediaItemLoadingIndicator
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.aMediaItemVideo
+import io.element.android.libraries.mediaviewer.impl.gallery.ui.aMediaItemVoice
 import kotlinx.collections.immutable.toImmutableList
 
 open class MediaGalleryStateProvider : PreviewParameterProvider<MediaGalleryState> {
@@ -63,9 +64,8 @@ open class MediaGalleryStateProvider : PreviewParameterProvider<MediaGalleryStat
                                 id = UniqueId("2"),
                                 formattedDate = "September 2004",
                             ),
-                            aMediaItemFile(id = UniqueId("3")),
                             aMediaItemAudio(id = UniqueId("4")),
-                            aMediaItemAudio(
+                            aMediaItemVoice(
                                 id = UniqueId("5"),
                                 waveform = aWaveForm(),
                             ),

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

@@ -27,6 +27,7 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberUpdatedState
@@ -40,6 +41,7 @@ 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.architecture.AsyncData
+import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.PageTitle
 import io.element.android.libraries.designsystem.components.async.AsyncFailure
@@ -60,11 +62,16 @@ import io.element.android.libraries.mediaviewer.impl.R
 import io.element.android.libraries.mediaviewer.impl.details.MediaBottomSheetState
 import io.element.android.libraries.mediaviewer.impl.details.MediaDeleteConfirmationBottomSheet
 import io.element.android.libraries.mediaviewer.impl.details.MediaDetailsBottomSheet
+import io.element.android.libraries.mediaviewer.impl.gallery.di.LocalMediaItemPresenterFactories
+import io.element.android.libraries.mediaviewer.impl.gallery.di.aFakeMediaItemPresenterFactories
+import io.element.android.libraries.mediaviewer.impl.gallery.di.rememberPresenter
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.AudioItemView
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.DateItemView
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.FileItemView
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.ImageItemView
 import io.element.android.libraries.mediaviewer.impl.gallery.ui.VideoItemView
+import io.element.android.libraries.mediaviewer.impl.gallery.ui.VoiceItemView
+import io.element.android.libraries.voiceplayer.api.VoiceMessageState
 import kotlinx.collections.immutable.ImmutableList
 import kotlin.math.max
 
@@ -255,6 +262,7 @@ private fun MediaGalleryFilesList(
     eventSink: (MediaGalleryEvents) -> Unit,
     onItemClick: (MediaItem.Event) -> Unit,
 ) {
+    val presenterFactories = LocalMediaItemPresenterFactories.current
     LazyColumn(
         modifier = Modifier.fillMaxSize(),
     ) {
@@ -274,6 +282,16 @@ private fun MediaGalleryFilesList(
                     onDownloadClick = { eventSink(MediaGalleryEvents.SaveOnDisk(item)) },
                     onInfoClick = { eventSink(MediaGalleryEvents.OpenInfo(item)) },
                 )
+                is MediaItem.Voice -> {
+                    val presenter: Presenter<VoiceMessageState> = presenterFactories.rememberPresenter(item)
+                    VoiceItemView(
+                        presenter.present(),
+                        item,
+                        onShareClick = { eventSink(MediaGalleryEvents.Share(item)) },
+                        onDownloadClick = { eventSink(MediaGalleryEvents.SaveOnDisk(item)) },
+                        onInfoClick = { eventSink(MediaGalleryEvents.OpenInfo(item)) },
+                    )
+                }
                 is MediaItem.DateSeparator -> DateItemView(item)
                 is MediaItem.Image,
                 is MediaItem.Video -> {
@@ -332,6 +350,9 @@ private fun MediaGalleryImageGrid(
                 is MediaItem.Audio -> {
                     // Should not happen
                 }
+                is MediaItem.Voice -> {
+                    // Should not happen
+                }
                 is MediaItem.File -> {
                     // Should not happen
                 }
@@ -452,9 +473,13 @@ private fun LoadingContent(
 internal fun MediaGalleryViewPreview(
     @PreviewParameter(MediaGalleryStateProvider::class) state: MediaGalleryState
 ) = ElementPreview {
-    MediaGalleryView(
-        state = state,
-        onBackClick = {},
-        onItemClick = {},
-    )
+    CompositionLocalProvider(
+        LocalMediaItemPresenterFactories provides aFakeMediaItemPresenterFactories(),
+    ) {
+        MediaGalleryView(
+            state = state,
+            onBackClick = {},
+            onItemClick = {},
+        )
+    }
 }

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

@@ -58,7 +58,15 @@ sealed interface MediaItem {
         val mediaInfo: MediaInfo,
         val mediaSource: MediaSource,
         val duration: String?,
-        val waveform: ImmutableList<Float>?,
+    ) : Event
+
+    data class Voice(
+        val id: UniqueId,
+        val eventId: EventId?,
+        val mediaInfo: MediaInfo,
+        val mediaSource: MediaSource,
+        val duration: String?,
+        val waveform: ImmutableList<Float>,
     ) : Event
 
     data class File(
@@ -77,6 +85,7 @@ fun MediaItem.id(): UniqueId {
         is MediaItem.Video -> id
         is MediaItem.File -> id
         is MediaItem.Audio -> id
+        is MediaItem.Voice -> id
     }
 }
 
@@ -86,6 +95,7 @@ fun MediaItem.Event.eventId(): EventId? {
         is MediaItem.Video -> eventId
         is MediaItem.File -> eventId
         is MediaItem.Audio -> eventId
+        is MediaItem.Voice -> eventId
     }
 }
 
@@ -95,6 +105,7 @@ fun MediaItem.Event.mediaInfo(): MediaInfo {
         is MediaItem.Video -> mediaInfo
         is MediaItem.File -> mediaInfo
         is MediaItem.Audio -> mediaInfo
+        is MediaItem.Voice -> mediaInfo
     }
 }
 
@@ -104,6 +115,7 @@ fun MediaItem.Event.mediaSource(): MediaSource {
         is MediaItem.Video -> mediaSource
         is MediaItem.File -> mediaSource
         is MediaItem.Audio -> mediaSource
+        is MediaItem.Voice -> mediaSource
     }
 }
 
@@ -113,5 +125,6 @@ fun MediaItem.Event.thumbnailSource(): MediaSource? {
         is MediaItem.Video -> thumbnailSource
         is MediaItem.File -> null
         is MediaItem.Audio -> null
+        is MediaItem.Voice -> null
     }
 }

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

@@ -57,6 +57,7 @@ class MediaItemsPostProcessor @Inject constructor() {
                             imageAndVideoItemsSubList.add(0, item)
                         }
                         is MediaItem.Audio,
+                        is MediaItem.Voice,
                         is MediaItem.File -> {
                             fileItemsSublist.add(0, item)
                         }

libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/di/FakeTimelineItemPresenterFactories.kt

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+package io.element.android.libraries.mediaviewer.impl.gallery.di
+
+import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.mediaviewer.impl.gallery.MediaItem
+import io.element.android.libraries.voiceplayer.api.VoiceMessageState
+import io.element.android.libraries.voiceplayer.api.aVoiceMessageState
+
+/**
+ * A fake [MediaItemPresenterFactories] for screenshot tests.
+ */
+fun aFakeMediaItemPresenterFactories() = MediaItemPresenterFactories(
+    mapOf(
+        Pair(
+            MediaItem.Voice::class.java,
+            MediaItemPresenterFactory<MediaItem.Voice, VoiceMessageState> { Presenter { aVoiceMessageState() } },
+        ),
+    )
+)