From 2c6b4e31b9d6d3a9d0fa7648e92cad64ca445ec2 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 6 Dec 2024 10:02:16 +0100 Subject: [PATCH 1/3] MediaViewer: Align title to left and move action bottom to top bar. --- .../impl/viewer/MediaViewerView.kt | 90 ++++++++----------- 1 file changed, 36 insertions(+), 54 deletions(-) diff --git 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 index cdcc6f9fb2..d802aac778 100644 --- 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 @@ -117,6 +115,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 +125,8 @@ fun MediaViewerView( ) MediaViewerBottomBar( modifier = Modifier.align(Alignment.BottomCenter), - actionsEnabled = state.downloadedMedia is AsyncData.Success, - canDownload = state.canDownload, - canShare = state.canShare, - mimeType = state.mediaInfo.mimeType, caption = state.mediaInfo.caption, onHeightChange = { bottomPaddingInPixels = it }, - eventSink = state.eventSink ) } } @@ -276,11 +272,13 @@ private fun rememberShowProgress(downloadedMedia: AsyncData): 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 +290,6 @@ private fun MediaViewerTopBar( Column( modifier = Modifier .fillMaxWidth() - .padding(end = 48.dp), - horizontalAlignment = Alignment.CenterHorizontally, ) { Text( text = senderName, @@ -313,55 +309,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 +322,6 @@ private fun MediaViewerBottomBar( ) } } - Spacer(modifier = Modifier.weight(1f)) IconButton( enabled = actionsEnabled, onClick = { @@ -400,6 +352,36 @@ private fun MediaViewerBottomBar( ) } } + // TODO Add action to open infos. + } + ) +} + +@Composable +private fun MediaViewerBottomBar( + caption: String?, + onHeightChange: (Int) -> 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, + ) } } } From 53567562d572c642d34f3c21f4138239754df61d Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 6 Dec 2024 10:19:19 +0100 Subject: [PATCH 2/3] MediaViewer: Show divider above the caption only if there is a caption and the media is video (to have a divider with the video controller) --- .../libraries/mediaviewer/impl/viewer/MediaViewerView.kt | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git 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 index d802aac778..3a468eb0f5 100644 --- 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 @@ -51,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 @@ -125,6 +126,7 @@ fun MediaViewerView( ) MediaViewerBottomBar( modifier = Modifier.align(Alignment.BottomCenter), + showDivider = state.mediaInfo.mimeType.isMimeTypeVideo(), caption = state.mediaInfo.caption, onHeightChange = { bottomPaddingInPixels = it }, ) @@ -360,6 +362,7 @@ private fun MediaViewerTopBar( @Composable private fun MediaViewerBottomBar( caption: String?, + showDivider: Boolean, onHeightChange: (Int) -> Unit, modifier: Modifier = Modifier, ) { @@ -371,8 +374,10 @@ private fun MediaViewerBottomBar( onHeightChange(it.height) }, ) { - HorizontalDivider() if (caption != null) { + if (showDivider) { + HorizontalDivider() + } Text( modifier = Modifier .fillMaxWidth() From 0b3a8f0e3d471b0740a90afa3e4358028c17172b Mon Sep 17 00:00:00 2001 From: ElementBot Date: Fri, 6 Dec 2024 09:31:34 +0000 Subject: [PATCH 3/3] Update screenshots --- ...libraries.mediaviewer.impl.viewer_MediaViewerView_0_en.png | 4 ++-- ...ibraries.mediaviewer.impl.viewer_MediaViewerView_10_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_1_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_2_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_3_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_4_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_5_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_6_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_7_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_8_en.png | 4 ++-- ...libraries.mediaviewer.impl.viewer_MediaViewerView_9_en.png | 4 ++-- 11 files changed, 22 insertions(+), 22 deletions(-) diff --git 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 index ae44f16e97..93393fba05 100644 --- 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 diff --git 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 index 347f2dd6c2..6a81f3f129 100644 --- 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 diff --git 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 index a9ae9d7999..4439239760 100644 --- 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 diff --git 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 index 173f440a84..061278ca3f 100644 --- 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 diff --git 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 index a63c5a2230..5d77b5705d 100644 --- 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 diff --git 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 index 585ab58d5e..dcbe73cf41 100644 --- 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 diff --git 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 index 94ba7bede2..c8856654b4 100644 --- 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 diff --git 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 index 72bdd87b18..fbda655334 100644 --- 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 diff --git 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 index 7658ec5375..4ff875eb5c 100644 --- 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 diff --git 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 index f927629007..1d9b20bcf3 100644 --- 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 diff --git 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 index 4394560d46..9698527a7d 100644 --- 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