Merge pull request #4003 from element-hq/feature/bma/mediaViewerTopBar

MediaViewer: Align title to left and move action bottom to top bar.
2024-12-06 11:50:04 +01:00 · 2024-12-06 11:50:04 +01:00 · 1822c9b6b1
commit 1822c9b6b1
parent 317931dc0c 332a382d7d
12 changed files with 63 additions and 76 deletions
--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt
@ -17,8 +17,6 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@ -53,6 +51,7 @@ 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.core.mimetype.MimeTypes
+import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@ -117,6 +116,9 @@ fun MediaViewerView(
            ) {
                MediaViewerTopBar(
                    actionsEnabled = state.downloadedMedia is AsyncData.Success,
+                    canDownload = state.canDownload,
+                    canShare = state.canShare,
+                    mimeType = state.mediaInfo.mimeType,
                    senderName = state.mediaInfo.senderName,
                    dateSent = state.mediaInfo.dateSent,
                    onBackClick = onBackClick,
@ -124,13 +126,9 @@ fun MediaViewerView(
                )
                MediaViewerBottomBar(
                    modifier = Modifier.align(Alignment.BottomCenter),
-                    actionsEnabled = state.downloadedMedia is AsyncData.Success,
-                    canDownload = state.canDownload,
-                    canShare = state.canShare,
-                    mimeType = state.mediaInfo.mimeType,
+                    showDivider = state.mediaInfo.mimeType.isMimeTypeVideo(),
                    caption = state.mediaInfo.caption,
                    onHeightChange = { bottomPaddingInPixels = it },
-                    eventSink = state.eventSink
                )
            }
        }
@ -276,11 +274,13 @@ private fun rememberShowProgress(downloadedMedia: AsyncData<LocalMedia>): Boolea
    return showProgress
 }

-@Suppress("UNUSED_PARAMETER")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
 private fun MediaViewerTopBar(
    actionsEnabled: Boolean,
+    canDownload: Boolean,
+    canShare: Boolean,
+    mimeType: String,
    senderName: String?,
    dateSent: String?,
    onBackClick: () -> Unit,
@ -292,8 +292,6 @@ private fun MediaViewerTopBar(
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
-                        .padding(end = 48.dp),
-                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Text(
                        text = senderName,
@ -313,55 +311,12 @@ private fun MediaViewerTopBar(
        ),
        navigationIcon = { BackButton(onClick = onBackClick) },
        actions = {
-            // TODO Add action to open infos.
-        }
-    )
-}
-
-@Composable
-private fun MediaViewerBottomBar(
-    actionsEnabled: Boolean,
-    canDownload: Boolean,
-    canShare: Boolean,
-    mimeType: String,
-    caption: String?,
-    onHeightChange: (Int) -> Unit,
-    eventSink: (MediaViewerEvents) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-            .background(Color(0x99101317))
-            .onSizeChanged {
-                onHeightChange(it.height)
-            },
-    ) {
-        HorizontalDivider()
-        if (caption != null) {
-            Text(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(16.dp),
-                text = caption,
-                maxLines = 5,
-                overflow = TextOverflow.Ellipsis,
-                style = ElementTheme.typography.fontBodyLgRegular,
-            )
-        }
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(start = 8.dp, end = 8.dp, bottom = 8.dp),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
            if (canShare) {
                IconButton(
                    enabled = actionsEnabled,
                    onClick = {
                        eventSink(MediaViewerEvents.Share)
                    },
-                    modifier = Modifier.align(Alignment.CenterVertically)
                ) {
                    Icon(
                        imageVector = CompoundIcons.ShareAndroid(),
@ -369,7 +324,6 @@ private fun MediaViewerBottomBar(
                    )
                }
            }
-            Spacer(modifier = Modifier.weight(1f))
            IconButton(
                enabled = actionsEnabled,
                onClick = {
@ -400,6 +354,39 @@ private fun MediaViewerBottomBar(
                    )
                }
            }
+            // TODO Add action to open infos.
+        }
+    )
+}
+
+@Composable
+private fun MediaViewerBottomBar(
+    caption: String?,
+    showDivider: Boolean,
+    onHeightChange: (Int) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(Color(0x99101317))
+            .onSizeChanged {
+                onHeightChange(it.height)
+            },
+    ) {
+        if (caption != null) {
+            if (showDivider) {
+                HorizontalDivider()
+            }
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+                text = caption,
+                maxLines = 5,
+                overflow = TextOverflow.Ellipsis,
+                style = ElementTheme.typography.fontBodyLgRegular,
+            )
        }
    }
 }
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9df1a0ff2b3aaab2d1a346cb134b560d65c462286575ffc6124099529562eac1
-size 389594
+oid sha256:f8672f053256e9ab2984aa06a22e4c27f2dd3f3373f3d87c12bc3269297713fd
+size 389602
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_10_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_10_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4fde3cef34d23c894ae480a1b4c961065f244d845584f8607c4bb21e0a7e5f10
-size 388615
+oid sha256:2b286342ff4d46637beac1f980294f77b3e2eb6824d56448cdbdce7b41c911ab
+size 388612
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cf07ed00618c0552205b1e726050382369041bb7f2d9742b754a5652eca48265
-size 389631
+oid sha256:33f460febda376d35c6eceb643dca374e9dbc76d30f21ccab99085a628e90e79
+size 389629
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:143285221dd5a1e714a9897293f13c45ca567635e60350738033b315f44f742a
-size 94735
+oid sha256:1b5c823df53d7a6fb2df235c2016b0e71bbf26aa2f7ec1c175e3360424b69c37
+size 94822
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a4e1b6a7a3dcc1627aec1767ac8edac95bec483ebdc98d71d65342084e08a4dc
-size 396792
+oid sha256:4b5506ab9651470ae3fe08d89a1ee2783d333a0fc1a657e45d50c156d664e84c
+size 396617
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6c3c2b7b1d64387ec1109ab21304df50de5bd4fac0317c27a2799e7405da3843
-size 22219
+oid sha256:e4a44ab880d3d9660c6671505d0575f6a89e21c4e4a16d5838b6826fe770473d
+size 22041
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:364fce9e921a21dcaae9ef1d7c98efe47c4c9118d23958550ee9eafaf202e2fa
-size 5751
+oid sha256:1c7122bd07a25e38d8056ca2f9d297e2073c418d359b4d286a5ba3441bce1e4b
+size 5712
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:769a00d9e84cb2da43d790158f35e66bc5ed6538fdcb7f5e316f5de13d9bd9ad
-size 14768
+oid sha256:f67a1db4ce45d9b5d2cf8f9f3bf0e5e6de439d1d9631a407826f984afdaf90c7
+size 14756
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bf1804b21f3d383c94e28714746ac61987643c8ec0480d2850b19eb01991aa4e
-size 15043
+oid sha256:3b9d8de8cddf75a662c72d519eef8ae6409e109d944826147f71ddc97f2d5a40
+size 14954
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec58fa08f3c160e1b7d462b580f79b1c05a5644b9f807a79cfeebbeea417ed10
-size 13502
+oid sha256:7e202c4748e6c0afcfdcfb77c3e3f14a234d0622e579ea926311e669486ba0e8
+size 13576
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.viewer_MediaViewerView_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:689081427ece8bc009266a50b9d2a80def581f51f00bf65b35d295b0ea7dcab3
-size 13736
+oid sha256:646a010fc57669e8bd7a97cab1f5bfdd94c78a05cd02c0150a6b41ef82e8f466
+size 13687