[Media upload] Upload image, video and files (#411)

* Add media upload * Display media upload error messages using a Snackbar.
2023-05-11 17:56:13 +02:00 · 2023-05-11 17:56:13 +02:00 · 89b9db3be6
commit 89b9db3be6
parent 1765398eb1
24 changed files with 373 additions and 77 deletions
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt
@ -41,6 +41,8 @@ import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.textcomposer.MessageComposerMode
 import io.element.android.features.networkmonitor.api.NetworkMonitor
 import io.element.android.features.networkmonitor.api.NetworkStatus
+import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
+import io.element.android.libraries.designsystem.utils.handleSnackbarMessage
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import timber.log.Timber
@ -52,6 +54,7 @@ class MessagesPresenter @Inject constructor(
    private val timelinePresenter: TimelinePresenter,
    private val actionListPresenter: ActionListPresenter,
    private val networkMonitor: NetworkMonitor,
+    private val snackbarDispatcher: SnackbarDispatcher,
 ) : Presenter<MessagesState> {

    @Composable
@ -71,6 +74,8 @@ class MessagesPresenter @Inject constructor(

        val networkConnectionStatus by networkMonitor.connectivity.collectAsState(initial = networkMonitor.currentConnectivityStatus)

+        val snackbarMessage = handleSnackbarMessage(snackbarDispatcher)
+
        LaunchedEffect(syncUpdateFlow) {
            roomAvatar.value =
                AvatarData(
@ -97,6 +102,7 @@ class MessagesPresenter @Inject constructor(
            timelineState = timelineState,
            actionListState = actionListState,
            hasNetworkConnection = networkConnectionStatus == NetworkStatus.Online,
+            snackbarMessage = snackbarMessage,
            eventSink = ::handleEvents
        )
    }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesState.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesState.kt
@ -21,6 +21,7 @@ import io.element.android.features.messages.impl.actionlist.ActionListState
 import io.element.android.features.messages.impl.textcomposer.MessageComposerState
 import io.element.android.features.messages.impl.timeline.TimelineState
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.utils.SnackbarMessage
 import io.element.android.libraries.matrix.api.core.RoomId

@Immutable
@ -32,5 +33,6 @@ data class MessagesState(
    val timelineState: TimelineState,
    val actionListState: ActionListState,
    val hasNetworkConnection: Boolean,
+    val snackbarMessage: SnackbarMessage?,
    val eventSink: (MessagesEvents) -> Unit
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt
@ -52,5 +52,6 @@ fun aMessagesState() = MessagesState(
    ),
    actionListState = anActionListState(),
    hasNetworkConnection = true,
+    snackbarMessage = null,
    eventSink = {}
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
@ -46,6 +46,7 @@ import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
@ -94,7 +95,6 @@ fun MessagesView(
    val itemActionsBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
    )
-    val snackbarHostState = remember { SnackbarHostState() }
    val composerState = state.composerState
    val initialBottomSheetState = if (LocalInspectionMode.current && composerState.attachmentSourcePicker != null) {
        ModalBottomSheetValue.Expanded
@ -110,6 +110,19 @@ fun MessagesView(
        }
    }

+    val snackbarHostState = remember { SnackbarHostState() }
+    val snackbarMessageText = state.snackbarMessage?.let { stringResource(it.messageResId) }
+    if (snackbarMessageText != null) {
+        SideEffect {
+            coroutineScope.launch {
+                snackbarHostState.showSnackbar(
+                    message = snackbarMessageText,
+                    duration = state.snackbarMessage.duration
+                )
+            }
+        }
+    }
+
    // This is needed because the composer is inside an AndroidView that can't be affected by the FocusManager in Compose
    val localView = LocalView.current

--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/textcomposer/MessageComposerPresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/textcomposer/MessageComposerPresenter.kt
@ -32,6 +32,8 @@ import io.element.android.libraries.core.data.toStableCharSequence
 import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeImage
 import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
+import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
+import io.element.android.libraries.designsystem.utils.SnackbarMessage
 import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.di.SingleIn
 import io.element.android.libraries.featureflag.api.FeatureFlagService
@ -40,11 +42,13 @@ import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.mediapickers.api.PickerProvider
 import io.element.android.libraries.mediaupload.api.MediaPreProcessor
 import io.element.android.libraries.mediaupload.api.MediaType
+import io.element.android.libraries.mediaupload.api.MediaUploadInfo
 import io.element.android.libraries.textcomposer.MessageComposerMode
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import timber.log.Timber
 import javax.inject.Inject
+import io.element.android.libraries.ui.strings.R as StringR

@SingleIn(RoomScope::class)
 class MessageComposerPresenter @Inject constructor(
@ -53,6 +57,7 @@ class MessageComposerPresenter @Inject constructor(
    private val mediaPickerProvider: PickerProvider,
    private val featureFlagService: FeatureFlagService,
    private val mediaPreProcessor: MediaPreProcessor,
+    private val snackbarDispatcher: SnackbarDispatcher,
 ) : Presenter<MessageComposerState> {

    @Composable
@ -60,6 +65,7 @@ class MessageComposerPresenter @Inject constructor(
        val localCoroutineScope = rememberCoroutineScope()

        val galleryMediaPicker = mediaPickerProvider.registerGalleryPicker(onResult = { uri, mimeType ->
+            if (uri == null) return@registerGalleryPicker
            Timber.d("Media picked from $uri")
            // We don't know which type of media was retrieved, so we need this check
            val mediaType = when {
@ -67,22 +73,25 @@ class MessageComposerPresenter @Inject constructor(
                mimeType.isMimeTypeVideo() -> MediaType.Video
                else -> error("MimeType must be either image/* or video/*")
            }
-            localCoroutineScope.handleMediaPreProcessing(uri, mediaType)
+            appCoroutineScope.sendMedia(uri, mediaType)
        })

        val filesPicker = mediaPickerProvider.registerFilePicker(mimeType = MimeTypes.Any) { uri ->
+            if (uri == null) return@registerFilePicker
            Timber.d("File picked from $uri")
-            localCoroutineScope.handleMediaPreProcessing(uri, MediaType.File)
+            appCoroutineScope.sendMedia(uri, MediaType.File)
        }

        val cameraPhotoPicker = mediaPickerProvider.registerCameraPhotoPicker { uri ->
+            if (uri == null) return@registerCameraPhotoPicker
            Timber.d("Photo saved at $uri")
-            localCoroutineScope.handleMediaPreProcessing(uri, MediaType.Image, deleteOriginal = true)
+            appCoroutineScope.sendMedia(uri, MediaType.Image, deleteOriginal = true)
        }

        val cameraVideoPicker = mediaPickerProvider.registerCameraVideoPicker { uri ->
+            if (uri == null) return@registerCameraVideoPicker
            Timber.d("Video saved at $uri")
-            localCoroutineScope.handleMediaPreProcessing(uri, MediaType.Video, deleteOriginal = true)
+            appCoroutineScope.sendMedia(uri, MediaType.Video, deleteOriginal = true)
        }

        val isFullScreen = rememberSaveable {
@ -181,14 +190,44 @@ class MessageComposerPresenter @Inject constructor(
            }
        }

-    private fun CoroutineScope.handleMediaPreProcessing(
-        uri: Uri?,
+    private fun CoroutineScope.sendMedia(
+        uri: Uri,
        mediaType: MediaType,
        deleteOriginal: Boolean = false
    ) = launch {
-        if (uri == null) return@launch
+        runCatching {
+            val info = handleMediaPreProcessing(uri, mediaType, deleteOriginal).getOrNull() ?: return@runCatching
+            when (info) {
+                is MediaUploadInfo.Image -> {
+                    room.sendImage(info.file, info.thumbnailInfo.file, info.info)
+                }

-        val result = mediaPreProcessor.process(uri, mediaType,  deleteOriginal = deleteOriginal)
+                is MediaUploadInfo.Video -> {
+                    room.sendVideo(info.file, info.thumbnailInfo.file, info.info)
+                }
+
+                is MediaUploadInfo.AnyFile -> {
+                    room.sendFile(info.file, info.info)
+                }
+                else -> error("Unexpected MediaUploadInfo format: $info")
+            }.getOrThrow()
+        }.onFailure {
+            snackbarDispatcher.post(SnackbarMessage(StringR.string.screen_media_upload_preview_error_failed_sending))
+            Timber.e(it, "Couldn't upload media")
+        }.onSuccess {
+            Timber.d("Media uploaded")
+        }
+    }
+
+    private suspend fun handleMediaPreProcessing(
+        uri: Uri,
+        mediaType: MediaType,
+        deleteOriginal: Boolean,
+    ): Result<MediaUploadInfo> {
+        val result = mediaPreProcessor.process(uri, mediaType, deleteOriginal = deleteOriginal)
        Timber.d("Pre-processed media result: $result")
+        return result.onFailure {
+            snackbarDispatcher.post(SnackbarMessage(StringR.string.screen_media_upload_preview_error_failed_processing))
+        }
    }
 }
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/MessagesPresenterTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/MessagesPresenterTest.kt
@ -31,6 +31,7 @@ import io.element.android.features.messages.impl.actionlist.model.TimelineItemAc
 import io.element.android.features.messages.impl.textcomposer.MessageComposerPresenter
 import io.element.android.features.messages.impl.timeline.TimelinePresenter
 import io.element.android.features.networkmonitor.test.FakeNetworkMonitor
+import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
 import io.element.android.libraries.featureflag.test.FakeFeatureFlagService
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
@ -136,6 +137,7 @@ class MessagesPresenterTest {
            mediaPickerProvider = FakePickerProvider(),
            featureFlagService = FakeFeatureFlagService(),
            mediaPreProcessor = FakeMediaPreProcessor(),
+            snackbarDispatcher = SnackbarDispatcher(),
        )
        val timelinePresenter = TimelinePresenter(
            timelineItemsFactory = aTimelineItemsFactory(),
@ -148,6 +150,7 @@ class MessagesPresenterTest {
            timelinePresenter = timelinePresenter,
            actionListPresenter = actionListPresenter,
            networkMonitor = FakeNetworkMonitor(),
+            snackbarDispatcher = SnackbarDispatcher(),
        )
    }
 }
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/textcomposer/MessageComposerPresenterTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/textcomposer/MessageComposerPresenterTest.kt
@ -29,9 +29,13 @@ import io.element.android.features.messages.impl.textcomposer.MessageComposerPre
 import io.element.android.features.messages.impl.textcomposer.MessageComposerState
 import io.element.android.libraries.core.data.StableCharSequence
 import io.element.android.libraries.core.mimetype.MimeTypes
+import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
 import io.element.android.libraries.featureflag.api.FeatureFlagService
 import io.element.android.libraries.featureflag.api.FeatureFlags
 import io.element.android.libraries.featureflag.test.FakeFeatureFlagService
+import io.element.android.libraries.matrix.api.media.ImageInfo
+import io.element.android.libraries.matrix.api.media.ThumbnailInfo
+import io.element.android.libraries.matrix.api.media.VideoInfo
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.test.ANOTHER_MESSAGE
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
@ -42,14 +46,22 @@ import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
 import io.element.android.libraries.mediapickers.api.PickerProvider
 import io.element.android.libraries.mediapickers.test.FakePickerProvider
 import io.element.android.libraries.mediaupload.api.MediaPreProcessor
+import io.element.android.libraries.mediaupload.api.MediaUploadInfo
+import io.element.android.libraries.mediaupload.api.ThumbnailProcessingInfo
 import io.element.android.libraries.mediaupload.test.FakeMediaPreProcessor
 import io.element.android.libraries.textcomposer.MessageComposerMode
 import io.mockk.mockk
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.android.awaitFrame
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.runBlocking
+import kotlinx.coroutines.test.runCurrent
 import kotlinx.coroutines.test.runTest
+import kotlinx.coroutines.test.setMain
 import org.junit.Test
+import java.io.File

 class MessageComposerPresenterTest {

@ -62,6 +74,7 @@ class MessageComposerPresenterTest {
        }
    }
    private val mediaPreProcessor = FakeMediaPreProcessor()
+    private val snackbarDispatcher = SnackbarDispatcher()

    @Test
    fun `present - initial state`() = runTest {
@ -285,16 +298,83 @@ class MessageComposerPresenterTest {
    }

    @Test
-    fun `present - Pick media from gallery`() = runTest {
-        val presenter = createPresenter(this)
+    fun `present - Pick image from gallery`() = runTest {
+        val room = FakeMatrixRoom()
+        val presenter = createPresenter(this, room = room)
        pickerProvider.givenMimeType(MimeTypes.Images)
+        mediaPreProcessor.givenResult(Result.success(
+            MediaUploadInfo.Image(
+                file = File("/some/path"),
+                info = ImageInfo(
+                    width = null,
+                    height = null,
+                    mimetype = null,
+                    size = null,
+                    thumbnailInfo = null,
+                    thumbnailUrl = null,
+                    blurhash = null,
+                ),
+                thumbnailInfo = ThumbnailProcessingInfo(
+                    file = File("/some/path"),
+                    info = ThumbnailInfo(
+                        width = null,
+                        height = null,
+                        mimetype = null,
+                        size = null,
+                    ),
+                    blurhash = "",
+                )
+            )
+        ))
        moleculeFlow(RecompositionClock.Immediate) {
            presenter.present()
        }.test {
            val initialState = awaitItem()
            initialState.eventSink(MessageComposerEvents.PickAttachmentSource.FromGallery)
+            // Wait for the launched upload coroutine to run
+            runCurrent()
+            assertThat(room.sendMediaCount).isEqualTo(1)
+        }
+    }

-            // TODO verify some post processing of the selected media is done
+    @Test
+    fun `present - Pick video from gallery`() = runTest {
+        val room = FakeMatrixRoom()
+        val presenter = createPresenter(this, room = room)
+        pickerProvider.givenMimeType(MimeTypes.Videos)
+        mediaPreProcessor.givenResult(Result.success(
+            MediaUploadInfo.Video(
+                file = File("/some/path"),
+                info = VideoInfo(
+                    width = null,
+                    height = null,
+                    mimetype = null,
+                    duration = null,
+                    size = null,
+                    thumbnailInfo = null,
+                    thumbnailUrl = null,
+                    blurhash = null,
+                ),
+                thumbnailInfo = ThumbnailProcessingInfo(
+                    file = File("/some/path"),
+                    info = ThumbnailInfo(
+                        width = null,
+                        height = null,
+                        mimetype = null,
+                        size = null,
+                    ),
+                    blurhash = "",
+                )
+            )
+        ))
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            initialState.eventSink(MessageComposerEvents.PickAttachmentSource.FromGallery)
+            // Wait for the launched upload coroutine to run
+            runCurrent()
+            assertThat(room.sendMediaCount).isEqualTo(1)
        }
    }

@ -329,40 +409,67 @@ class MessageComposerPresenterTest {

    @Test
    fun `present - Pick file from storage`() = runTest {
-        val presenter = createPresenter(this)
+        val room = FakeMatrixRoom()
+        val presenter = createPresenter(this, room = room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            initialState.eventSink(MessageComposerEvents.PickAttachmentSource.FromFiles)
+            // Wait for the launched upload coroutine to run
+            runCurrent()
+            assertThat(room.sendMediaCount).isEqualTo(1)
+        }
+    }
+
+    @Test
+    fun `present - Take photo`() = runTest {
+        val room = FakeMatrixRoom()
+        val presenter = createPresenter(this, room = room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            initialState.eventSink(MessageComposerEvents.PickCameraAttachmentSource.Photo)
+            // Wait for the launched upload coroutine to run
+            runCurrent()
+            assertThat(room.sendMediaCount).isEqualTo(1)
+        }
+    }
+
+    @Test
+    fun `present - Record video`() = runTest {
+        val room = FakeMatrixRoom()
+        val presenter = createPresenter(this, room = room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            initialState.eventSink(MessageComposerEvents.PickCameraAttachmentSource.Video)
+            // Wait for the launched upload coroutine to run
+            runCurrent()
+            assertThat(room.sendMediaCount).isEqualTo(1)
+        }
+    }
+
+    @Test
+    fun `present - Uploading media failure can be recovered from`() = runTest {
+        val room = FakeMatrixRoom().apply {
+            givenSendMediaResult(Result.failure(Exception()))
+        }
+        val presenter = createPresenter(this, room = room)
        moleculeFlow(RecompositionClock.Immediate) {
            presenter.present()
        }.test {
            val initialState = awaitItem()
            initialState.eventSink(MessageComposerEvents.PickAttachmentSource.FromFiles)

-            // TODO verify some post processing of the selected media is done
-        }
-    }
-
-    @Test
-    fun `present - Take photo`() = runTest {
-        val presenter = createPresenter(this)
-        moleculeFlow(RecompositionClock.Immediate) {
-            presenter.present()
-        }.test {
-            val initialState = awaitItem()
-            initialState.eventSink(MessageComposerEvents.PickCameraAttachmentSource.Photo)
-
-            // TODO verify some post processing of the captured image is done
-        }
-    }
-
-    @Test
-    fun `present - Record video`() = runTest {
-        val presenter = createPresenter(this)
-        moleculeFlow(RecompositionClock.Immediate) {
-            presenter.present()
-        }.test {
-            val initialState = awaitItem()
-            initialState.eventSink(MessageComposerEvents.PickCameraAttachmentSource.Video)
-
-            // TODO verify some post processing of the captured video is done
+            snackbarDispatcher.snackbarMessage.test {
+                // Initial value is always null
+                skipItems(1)
+                // Assert error message received
+                assertThat(awaitItem()).isNotNull()
+            }
        }
    }

@ -381,8 +488,9 @@ class MessageComposerPresenterTest {
        pickerProvider: PickerProvider = this.pickerProvider,
        featureFlagService: FeatureFlagService = this.featureFlagService,
        mediaPreProcessor: MediaPreProcessor = this.mediaPreProcessor,
+        snackbarDispatcher: SnackbarDispatcher = this.snackbarDispatcher,
    ) = MessageComposerPresenter(
-        coroutineScope, room, pickerProvider, featureFlagService, mediaPreProcessor
+        coroutineScope, room, pickerProvider, featureFlagService, mediaPreProcessor, snackbarDispatcher
    )
 }