Merge pull request #6938 from element-hq/feature/bma/mediaDetailsUpdate

[Media bottom sheet] UI iteration
2026-06-02 16:20:05 +02:00
parent 13f9ecca18 e36115e28a
commit 41b4a56681
23 changed files with 100 additions and 84 deletions
@@ -16,6 +16,7 @@ sealed interface MediaBottomSheetState {
    data object Hidden : MediaBottomSheetState

    data class Details(
+        val fromGallery: Boolean,
        val eventId: EventId?,
        val canDelete: Boolean,
        val mediaInfo: MediaInfo,
@@ -29,10 +29,14 @@ open class MediaBottomSheetStateDetailsProvider : PreviewParameterProvider<Media
            aMediaBottomSheetStateDetails(
                eventId = null,
            ),
+            aMediaBottomSheetStateDetails(
+                fromGallery = true,
+            ),
        )
 }

 fun aMediaBottomSheetStateDetails(
+    fromGallery: Boolean = false,
    eventId: EventId? = EventId($$"$eventId"),
    canDelete: Boolean = true,
    mediaInfo: MediaInfo = anImageMediaInfo(
@@ -40,6 +44,7 @@ fun aMediaBottomSheetStateDetails(
        dateSentFull = "December 6, 2024 at 12:59",
    ),
 ) = MediaBottomSheetState.Details(
+    fromGallery = fromGallery,
    eventId = eventId,
    canDelete = canDelete,
    mediaInfo = mediaInfo,
@@ -10,7 +10,6 @@ package io.element.android.libraries.mediaviewer.impl.details

 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -27,7 +26,6 @@ import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -102,34 +100,6 @@ fun MediaDetailsBottomSheet(
            Spacer(modifier = Modifier.height(16.dp))
            if (state.eventId != null) {
                HorizontalDivider()
-                ListItem(
-                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.VisibilityOn())),
-                    headlineContent = { Text(stringResource(CommonStrings.action_view_in_timeline)) },
-                    onClick = {
-                        onViewInTimeline(state.eventId)
-                    }
-                )
-                ListItem(
-                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ShareAndroid())),
-                    headlineContent = { Text(stringResource(CommonStrings.action_share)) },
-                    onClick = {
-                        onShare(state.eventId)
-                    }
-                )
-                ListItem(
-                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Forward())),
-                    headlineContent = { Text(stringResource(CommonStrings.action_forward)) },
-                    onClick = {
-                        onForward(state.eventId)
-                    }
-                )
-                ListItem(
-                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Download())),
-                    headlineContent = { Text(stringResource(CommonStrings.action_download)) },
-                    onClick = {
-                        onDownload(state.eventId)
-                    }
-                )
                val mimeType = state.mediaInfo.mimeType
                val icon = when (mimeType) {
                    MimeTypes.Apk ->
@@ -148,11 +118,41 @@ fun MediaDetailsBottomSheet(
                        onOpenWith(state.eventId)
                    }
                )
+                ListItem(
+                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.VisibilityOn())),
+                    headlineContent = { Text(stringResource(CommonStrings.action_view_in_timeline)) },
+                    onClick = {
+                        onViewInTimeline(state.eventId)
+                    }
+                )
+                if (state.fromGallery) {
+                    ListItem(
+                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ShareAndroid())),
+                        headlineContent = { Text(stringResource(CommonStrings.action_share)) },
+                        onClick = {
+                            onShare(state.eventId)
+                        }
+                    )
+                    ListItem(
+                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Download())),
+                        headlineContent = { Text(stringResource(CommonStrings.action_download)) },
+                        onClick = {
+                            onDownload(state.eventId)
+                        }
+                    )
+                }
+                ListItem(
+                    leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Forward())),
+                    headlineContent = { Text(stringResource(CommonStrings.action_forward)) },
+                    onClick = {
+                        onForward(state.eventId)
+                    }
+                )
                if (state.canDelete) {
                    HorizontalDivider()
                    ListItem(
                        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Delete())),
-                        headlineContent = { Text(stringResource(CommonStrings.action_delete)) },
+                        headlineContent = { Text(stringResource(CommonStrings.action_delete_file)) },
                        style = ListItemStyle.Destructive,
                        onClick = {
                            onDelete(state.eventId)
@@ -216,16 +216,14 @@ private fun SenderRow(
 }

@Composable
-private fun ColumnScope.Title() {
+private fun Title() {
    Text(
        modifier = Modifier
-            .align(Alignment.CenterHorizontally)
            .padding(top = 16.dp, bottom = 8.dp, start = 16.dp, end = 16.dp)
            .semantics {
                heading()
            },
        text = stringResource(R.string.screen_media_details_title),
-        textAlign = TextAlign.Center,
        style = ElementTheme.typography.fontBodyLgMedium,
        color = ElementTheme.colors.textPrimary,
    )
@@ -129,6 +129,7 @@ class MediaGalleryPresenter(
                }
                is MediaGalleryEvent.OpenInfo -> coroutineScope.launch {
                    mediaBottomSheetState = MediaBottomSheetState.Details(
+                        fromGallery = true,
                        eventId = event.mediaItem.eventId(),
                        canDelete = when (event.mediaItem.mediaInfo().senderId) {
                            null -> false
@@ -145,6 +145,7 @@ class MediaViewerPresenter(
                }
                is MediaViewerEvent.OpenInfo -> coroutineScope.launch {
                    mediaBottomSheetState = MediaBottomSheetState.Details(
+                        fromGallery = false,
                        eventId = event.data.eventId,
                        canDelete = when (event.data.mediaInfo.senderId) {
                            null -> false
@@ -280,6 +280,7 @@ fun MediaViewerView(
                    state.eventSink(MediaViewerEvent.ViewInTimeline(it))
                },
                onShare = {
+                    // Note: share action is not rendered when the bottom sheet is opened from the media viewer
                    (currentData as? MediaViewerPageData.MediaViewerData)?.let {
                        state.eventSink(MediaViewerEvent.Share(currentData))
                    }
@@ -288,6 +289,7 @@ fun MediaViewerView(
                    state.eventSink(MediaViewerEvent.Forward(it))
                },
                onDownload = {
+                    // Note: download action is not rendered when the bottom sheet is opened from the media viewer
                    (currentData as? MediaViewerPageData.MediaViewerData)?.let {
                        state.eventSink(MediaViewerEvent.SaveOnDisk(currentData))
                    }
@@ -45,7 +45,9 @@ class MediaDetailsBottomSheetTest {
    @Test
    @Config(qualifiers = "h1024dp")
    fun `clicking on Share invokes expected callback`() = runAndroidComposeUiTest {
-        val state = aMediaBottomSheetStateDetails()
+        val state = aMediaBottomSheetStateDetails(
+            fromGallery = true,
+        )
        ensureCalledOnceWithParam(state.eventId) { callback ->
            setMediaDetailsBottomSheet(
                state = state,
@@ -55,6 +57,15 @@ class MediaDetailsBottomSheetTest {
        }
    }

+    @Test
+    @Config(qualifiers = "h1024dp")
+    fun `item Share is not displayed when opened from the media viewer`() = runAndroidComposeUiTest {
+        setMediaDetailsBottomSheet(
+            state = aMediaBottomSheetStateDetails(),
+        )
+        onNodeWithText(activity!!.getString(CommonStrings.action_share)).assertDoesNotExist()
+    }
+
    @Test
    @Config(qualifiers = "h1024dp")
    fun `clicking on Forward invokes expected callback`() = runAndroidComposeUiTest {
@@ -71,7 +82,9 @@ class MediaDetailsBottomSheetTest {
    @Test
    @Config(qualifiers = "h1024dp")
    fun `clicking on Download invokes expected callback`() = runAndroidComposeUiTest {
-        val state = aMediaBottomSheetStateDetails()
+        val state = aMediaBottomSheetStateDetails(
+            fromGallery = true,
+        )
        ensureCalledOnceWithParam(state.eventId) { callback ->
            setMediaDetailsBottomSheet(
                state = state,
@@ -81,6 +94,15 @@ class MediaDetailsBottomSheetTest {
        }
    }

+    @Test
+    @Config(qualifiers = "h1024dp")
+    fun `item Download is not displayed when opened from the media viewer`() = runAndroidComposeUiTest {
+        setMediaDetailsBottomSheet(
+            state = aMediaBottomSheetStateDetails(),
+        )
+        onNodeWithText(activity!!.getString(CommonStrings.action_download)).assertDoesNotExist()
+    }
+
    @Config(qualifiers = "h1024dp")
    @Test
    fun `clicking on Delete invokes expected callback`() = runAndroidComposeUiTest {
@@ -90,8 +112,8 @@ class MediaDetailsBottomSheetTest {
                state = state,
                onDelete = callback,
            )
-            onNodeWithText(activity!!.getString(CommonStrings.action_delete)).assertExists()
-            clickOn(CommonStrings.action_delete)
+            onNodeWithText(activity!!.getString(CommonStrings.action_delete_file)).assertExists()
+            clickOn(CommonStrings.action_delete_file)
        }
    }

@@ -137,6 +137,7 @@ class MediaGalleryPresenterTest {
            val state = awaitItem()
            assertThat(state.mediaBottomSheetState).isEqualTo(
                MediaBottomSheetState.Details(
+                    fromGallery = true,
                    eventId = AN_EVENT_ID,
                    canDelete = canDeleteOwn,
                    mediaInfo = item.mediaInfo,
@@ -184,6 +185,7 @@ class MediaGalleryPresenterTest {
            val state = awaitItem()
            assertThat(state.mediaBottomSheetState).isEqualTo(
                MediaBottomSheetState.Details(
+                    fromGallery = true,
                    eventId = AN_EVENT_ID,
                    canDelete = canDeleteOther,
                    mediaInfo = item.mediaInfo,
@@ -135,28 +135,6 @@ class MediaViewerViewTest {
        )
    }

-    @Test
-    @Config(qualifiers = "h1024dp")
-    fun `clicking on download emits expected Event`() {
-        val data = aMediaViewerPageData()
-        testBottomSheetAction(
-            data,
-            CommonStrings.action_download,
-            MediaViewerEvent.SaveOnDisk(data),
-        )
-    }
-
-    @Test
-    @Config(qualifiers = "h1024dp")
-    fun `clicking on share emits expected Event`() {
-        val data = aMediaViewerPageData()
-        testBottomSheetAction(
-            data,
-            CommonStrings.action_share,
-            MediaViewerEvent.Share(data),
-        )
-    }
-
    @Config(qualifiers = "h1024dp")
    @Test
    fun `clicking on open in emits expected Event`() {
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be6223e16a2b9936164ec4ba659129ceb80ed5746e3376f32559b4942b271502
-size 40656
+oid sha256:3239eba4debc9249ecd75a11f9f96aa543ea0bab3f527a654a5ea58e07b942fb
+size 40364
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be6223e16a2b9936164ec4ba659129ceb80ed5746e3376f32559b4942b271502
-size 40656
+oid sha256:e2c67d25e8e74b9ab7ebcff3d167bc72de2bc2ae7ef827c7785c64b551426eb7
+size 38652
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b57d412a5815756b453d907543bc74b4a154814633d8664a3dcffaa0057c7279
-size 44962
+oid sha256:7c7aebf16d23748e4a0a3a035c6ff1d67277d11fac223e2fb2bf66fdbc13ac99
+size 44576
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6144f221b9d11c70d15b54321bfbff3d1de1454e6c73be34d7b2e82bd1625a94
-size 30701
+oid sha256:a335f858bbca40a0bdb3bd239fdc3625975d44ddc45bb653815f20acde9ffd0f
+size 30710
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:90ed265904cdf988d9b2ef6b5695d5793c48fa9d33d4db8c6f4bf94c3055844d
+size 40720
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e3e43f4dbd1bf0e271de57c962b93100720439d608a7d552669ede42141dbc1
-size 39705
+oid sha256:73ee558ceb73554e8ab72797797a3e4fb4ae60bc805d9603cc23a5ec3325ae71
+size 39361
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e3e43f4dbd1bf0e271de57c962b93100720439d608a7d552669ede42141dbc1
-size 39705
+oid sha256:16b6c38de0dcb40f5141f06a8957c6a64c406ec45765a38a5a371f873cca676f
+size 37330
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:086c64f4094cb2e0fda8e415a0d8d89b7dafe67f4d42088eded7abbf45b8de93
-size 44088
+oid sha256:4e37123303553d032b579ce0cdace8c6f2aa6c32b3ccce8ef04abac4c84e16b7
+size 43659
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2898f00a828a69ce9cdd56994d7878f6aae8c5b2ea5d1150df57aa2ebd7e537b
-size 29233
+oid sha256:423e92ee408ca6c3ab7c1071245810fcbc2d25a7ce62b3068f1616c933ad008c
+size 29216
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5fd5c4d8d9d2ca9709a2b03d423899ef99738b4ba2e081d9456168605e65e07
+size 39788
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ad4bf14c2f6d2d36c978d90c7641fc8b3a9c71062d6b23362eea12c0b7ff24e4
-size 40572
+oid sha256:0c8c1dd110d367173c8a918ff9f94aa4e67e9bcba6d417e8ddd0b6660f6ecf20
+size 40280
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7b44ce089c932019d58e7f1c993f80871352878adf0f5a133a72edce18f5bcb9
-size 39496
+oid sha256:00c97219fdc6377f9f965635b3ed696f3595f6de413528a96ea05d2c4b385c9a
+size 39155
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e641d1d6604b6c5f489ab38438d9f3b8dcea9802113011200e9ea589c4e2dbee
-size 25310
+oid sha256:5a9b7b0c427f40aa8f0a61025fdcfb8093c611e15ef10f22576545a64c6ec35c
+size 25286
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7b44ce089c932019d58e7f1c993f80871352878adf0f5a133a72edce18f5bcb9
-size 39496
+oid sha256:00c97219fdc6377f9f965635b3ed696f3595f6de413528a96ea05d2c4b385c9a
+size 39155