From ee4595eb5496b5464f3067f4c2004d07185beb7d Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 20 Dec 2024 14:44:14 +0100 Subject: [PATCH 1/3] Add background to loading state --- .../impl/gallery/MediaGalleryView.kt | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt index 6053695029..373aa50d1d 100644 --- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt +++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt @@ -460,23 +460,28 @@ private fun EmptyContent( private fun LoadingContent( mode: MediaGalleryMode, ) { - Column( - modifier = Modifier - .fillMaxSize() - .padding(top = 48.dp) - .padding(24.dp), - verticalArrangement = Arrangement.spacedBy(16.dp), - horizontalAlignment = Alignment.CenterHorizontally, + Box( + modifier = Modifier.fillMaxSize(), ) { - CircularProgressIndicator() - val res = when (mode) { - MediaGalleryMode.Images -> R.string.screen_media_browser_list_loading_media - MediaGalleryMode.Files -> R.string.screen_media_browser_list_loading_files + OnboardingBackground() + Column( + modifier = Modifier + .fillMaxSize() + .padding(top = 48.dp) + .padding(24.dp), + verticalArrangement = Arrangement.spacedBy(16.dp), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + CircularProgressIndicator() + val res = when (mode) { + MediaGalleryMode.Images -> R.string.screen_media_browser_list_loading_media + MediaGalleryMode.Files -> R.string.screen_media_browser_list_loading_files + } + Text( + text = stringResource(res), + modifier = Modifier.align(Alignment.CenterHorizontally), + ) } - Text( - text = stringResource(res), - modifier = Modifier.align(Alignment.CenterHorizontally), - ) } } From bb7a90815c7790dd198c9ad9569115b6f178e871 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 20 Dec 2024 15:26:18 +0100 Subject: [PATCH 2/3] Media gallery: render Loading state when there is only a loader in the timeline. --- .../impl/gallery/MediaGalleryState.kt | 9 ++- .../impl/gallery/MediaGalleryStateProvider.kt | 21 +++++++ .../impl/gallery/MediaGalleryView.kt | 56 ++++++++++++------- 3 files changed, 64 insertions(+), 22 deletions(-) diff --git a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt index 51ae794175..1cfcd40a60 100644 --- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt +++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt @@ -25,7 +25,14 @@ data class MediaGalleryState( data class GroupedMediaItems( val imageAndVideoItems: ImmutableList, val fileItems: ImmutableList, -) +) { + fun getItems(mode: MediaGalleryMode): ImmutableList { + return when (mode) { + MediaGalleryMode.Images -> imageAndVideoItems + MediaGalleryMode.Files -> fileItems + } + } +} enum class MediaGalleryMode(val stringResource: Int) { Images(R.string.screen_media_browser_list_mode_media), diff --git a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt index 8876917bf6..42585d8219 100644 --- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt +++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt @@ -84,6 +84,27 @@ open class MediaGalleryStateProvider : PreviewParameterProvider Unit, ) { - when (val groupedMediaItems = state.groupedMediaItems) { - AsyncData.Uninitialized, - is AsyncData.Loading -> { - LoadingContent(mode) - } - is AsyncData.Success -> { - when (mode) { - MediaGalleryMode.Images -> MediaGalleryImages( - imagesAndVideos = groupedMediaItems.data.imageAndVideoItems, - eventSink = state.eventSink, - onItemClick = onItemClick, - ) - MediaGalleryMode.Files -> MediaGalleryFiles( - files = groupedMediaItems.data.fileItems, - eventSink = state.eventSink, - onItemClick = onItemClick, + val groupedMediaItems = state.groupedMediaItems + if (groupedMediaItems.isLoadingItems(mode)) { + LoadingContent(mode) + } else { + when (groupedMediaItems) { + is AsyncData.Success -> { + when (mode) { + MediaGalleryMode.Images -> MediaGalleryImages( + imagesAndVideos = groupedMediaItems.data.imageAndVideoItems, + eventSink = state.eventSink, + onItemClick = onItemClick, + ) + MediaGalleryMode.Files -> MediaGalleryFiles( + files = groupedMediaItems.data.fileItems, + eventSink = state.eventSink, + onItemClick = onItemClick, + ) + } + } + is AsyncData.Failure -> { + ErrorContent( + error = groupedMediaItems.error, ) } + else -> Unit } - is AsyncData.Failure -> { - ErrorContent( - error = groupedMediaItems.error, - ) - } + } +} + +/** + * Return true when the timeline is not loaded or if it contains only a single loading item. + */ +private fun AsyncData.isLoadingItems(mode: MediaGalleryMode): Boolean { + return when (this) { + AsyncData.Uninitialized, + is AsyncData.Loading -> true + is AsyncData.Success -> data.getItems(mode).singleOrNull() is MediaItem.LoadingIndicator + is AsyncData.Failure -> false } } From 2a180f4b935602c64ae193145feff03744538241 Mon Sep 17 00:00:00 2001 From: ElementBot Date: Fri, 20 Dec 2024 14:50:11 +0000 Subject: [PATCH 3/3] Update screenshots --- ...ies.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png | 4 ++-- ...es.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png | 3 +++ ...es.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png | 3 +++ ...ies.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png | 4 ++-- ...ies.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png | 4 ++-- ...ies.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png | 4 ++-- ...s.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png | 4 ++-- ....mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png | 3 +++ ....mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png | 3 +++ ...s.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png | 4 ++-- ...s.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png | 4 ++-- ...s.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png | 4 ++-- 12 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png create mode 100644 tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png create mode 100644 tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png create mode 100644 tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png index b17c686b18..aa8c588458 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8b04072b9e16342e333c2a10e6462420216b4192226c97f0d4bd5b5ada1aecef -size 18791 +oid sha256:3924189c91a3e5af84f01365c4e147540882aa58478a8d1f2df180ecf6d7c9c8 +size 62580 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png new file mode 100644 index 0000000000..17b49bf7e2 --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c3e033d714925e3f49101232f07dc074306a02a0982751c27b9632cded807805 +size 59633 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png new file mode 100644 index 0000000000..0b1af2f10d --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac +size 59331 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png index f7d527bf6d..17b49bf7e2 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1853de49049bcd1448cc4e7c4a38ed8ab3cf11c3d11b1ddf296f2b6a37e985b4 -size 15428 +oid sha256:c3e033d714925e3f49101232f07dc074306a02a0982751c27b9632cded807805 +size 59633 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png index 1f1b966fff..0b1af2f10d 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7d1cdeba30c6efca096c3625613ce5ad33b6f09e08eb09b2758d9a039e4206fb -size 15106 +oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac +size 59331 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png index 1f1b966fff..0b1af2f10d 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7d1cdeba30c6efca096c3625613ce5ad33b6f09e08eb09b2758d9a039e4206fb -size 15106 +oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac +size 59331 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png index 8baa855f7b..4be2cf1bdb 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f9d7fecddc7aff63c795dcad68665dc1771544f5facda5a838b1f3391655ee49 -size 18306 +oid sha256:d6fcc983290fe807c5a77220306db0ce71d6f6135e06a2e9e36bebae36b8adda +size 54797 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png new file mode 100644 index 0000000000..c9a8545ce3 --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2484c3e0a0520fda13fa306ec6fa4c3d1cb7a8c19f516c49a3e4807d51ce48e0 +size 51830 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png new file mode 100644 index 0000000000..8b7b417f9b --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5 +size 51412 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png index fa9f362ab4..c9a8545ce3 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:739e2618bac9233b0ff7335d734d7fb594e3ee8860f9e61ef80d2dc4d7736a27 -size 15026 +oid sha256:2484c3e0a0520fda13fa306ec6fa4c3d1cb7a8c19f516c49a3e4807d51ce48e0 +size 51830 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png index 73e39f4bd6..8b7b417f9b 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8be4c40bcec9cb84bd087dc395be694b614f88ff5b44a33dafc3ad87576d23c6 -size 14578 +oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5 +size 51412 diff --git a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png index 73e39f4bd6..8b7b417f9b 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png +++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8be4c40bcec9cb84bd087dc395be694b614f88ff5b44a33dafc3ad87576d23c6 -size 14578 +oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5 +size 51412