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

MediaViewer: Align title to left and move action bottom to top bar.

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,
+                    showDivider = state.mediaInfo.mimeType.isMimeTypeVideo(),
-                    canDownload = state.canDownload,
-                    canShare = state.canShare,
-                    mimeType = state.mediaInfo.mimeType,
                     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,
+            )
         }
     }
 }

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
+oid sha256:f8672f053256e9ab2984aa06a22e4c27f2dd3f3373f3d87c12bc3269297713fd
-size 389594
+size 389602

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
+oid sha256:2b286342ff4d46637beac1f980294f77b3e2eb6824d56448cdbdce7b41c911ab
-size 388615
+size 388612

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
+oid sha256:33f460febda376d35c6eceb643dca374e9dbc76d30f21ccab99085a628e90e79
-size 389631
+size 389629

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
+oid sha256:1b5c823df53d7a6fb2df235c2016b0e71bbf26aa2f7ec1c175e3360424b69c37
-size 94735
+size 94822

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
+oid sha256:4b5506ab9651470ae3fe08d89a1ee2783d333a0fc1a657e45d50c156d664e84c
-size 396792
+size 396617

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
+oid sha256:e4a44ab880d3d9660c6671505d0575f6a89e21c4e4a16d5838b6826fe770473d
-size 22219
+size 22041

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
+oid sha256:1c7122bd07a25e38d8056ca2f9d297e2073c418d359b4d286a5ba3441bce1e4b
-size 5751
+size 5712

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
+oid sha256:f67a1db4ce45d9b5d2cf8f9f3bf0e5e6de439d1d9631a407826f984afdaf90c7
-size 14768
+size 14756

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
+oid sha256:3b9d8de8cddf75a662c72d519eef8ae6409e109d944826147f71ddc97f2d5a40
-size 15043
+size 14954

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
+oid sha256:7e202c4748e6c0afcfdcfb77c3e3f14a234d0622e579ea926311e669486ba0e8
-size 13502
+size 13576

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
+oid sha256:646a010fc57669e8bd7a97cab1f5bfdd94c78a05cd02c0150a6b41ef82e8f466
-size 13736
+size 13687