Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Merge pull request #4080 from element-hq/feature/bma/galleryLoading

Browse source 
Improve gallery loading state
This commit is contained in:
Benoit Marty 2024-12-20 16:40:45 +01:00 • committed by GitHub
commit d608eeace7
15 changed files with 112 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

9
libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt
View file

@ -25,7 +25,14 @@ data class MediaGalleryState(
data class GroupedMediaItems( data class GroupedMediaItems(
val imageAndVideoItems: ImmutableList<MediaItem>, val imageAndVideoItems: ImmutableList<MediaItem>,
val fileItems: ImmutableList<MediaItem>, val fileItems: ImmutableList<MediaItem>,
) ) {
fun getItems(mode: MediaGalleryMode): ImmutableList<MediaItem> {
return when (mode) {
MediaGalleryMode.Images -> imageAndVideoItems
MediaGalleryMode.Files -> fileItems
}
}
}
enum class MediaGalleryMode(val stringResource: Int) { enum class MediaGalleryMode(val stringResource: Int) {
Images(R.string.screen_media_browser_list_mode_media), Images(R.string.screen_media_browser_list_mode_media),

21
libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt
View file

@ -84,6 +84,27 @@ open class MediaGalleryStateProvider : PreviewParameterProvider<MediaGalleryStat
mode = MediaGalleryMode.Files, mode = MediaGalleryMode.Files,
groupedMediaItems = AsyncData.Failure(Exception("Failed to load media")), groupedMediaItems = AsyncData.Failure(Exception("Failed to load media")),
), ),
// Timeline is loaded but does not have relevant content yet for images and videos
aMediaGalleryState(
groupedMediaItems = AsyncData.Success(
aGroupedMediaItems(
imageAndVideoItems = listOf(
aMediaItemLoadingIndicator(),
),
)
)
),
// Timeline is loaded but does not have relevant content yet for files
aMediaGalleryState(
mode = MediaGalleryMode.Files,
groupedMediaItems = AsyncData.Success(
aGroupedMediaItems(
fileItems = listOf(
aMediaItemLoadingIndicator(),
),
)
)
),
) )
} }

91
libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt
View file

@ -196,30 +196,44 @@ private fun MediaGalleryPage(
state: MediaGalleryState, state: MediaGalleryState,
onItemClick: (MediaItem.Event) -> Unit, onItemClick: (MediaItem.Event) -> Unit,
) { ) {
when (val groupedMediaItems = state.groupedMediaItems) { val groupedMediaItems = state.groupedMediaItems
AsyncData.Uninitialized, if (groupedMediaItems.isLoadingItems(mode)) {
is AsyncData.Loading -> { LoadingContent(mode)
LoadingContent(mode) } else {
} when (groupedMediaItems) {
is AsyncData.Success -> { is AsyncData.Success -> {
when (mode) { when (mode) {
MediaGalleryMode.Images -> MediaGalleryImages( MediaGalleryMode.Images -> MediaGalleryImages(
imagesAndVideos = groupedMediaItems.data.imageAndVideoItems, imagesAndVideos = groupedMediaItems.data.imageAndVideoItems,
eventSink = state.eventSink, eventSink = state.eventSink,
onItemClick = onItemClick, onItemClick = onItemClick,
) )
MediaGalleryMode.Files -> MediaGalleryFiles( MediaGalleryMode.Files -> MediaGalleryFiles(
files = groupedMediaItems.data.fileItems, files = groupedMediaItems.data.fileItems,
eventSink = state.eventSink, eventSink = state.eventSink,
onItemClick = onItemClick, 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<GroupedMediaItems>.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
} }
} }
@ -460,23 +474,28 @@ private fun EmptyContent(
private fun LoadingContent( private fun LoadingContent(
mode: MediaGalleryMode, mode: MediaGalleryMode,
) { ) {
Column( Box(
modifier = Modifier modifier = Modifier.fillMaxSize(),
.fillMaxSize()
.padding(top = 48.dp)
.padding(24.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
CircularProgressIndicator() OnboardingBackground()
val res = when (mode) { Column(
MediaGalleryMode.Images -> R.string.screen_media_browser_list_loading_media modifier = Modifier
MediaGalleryMode.Files -> R.string.screen_media_browser_list_loading_files .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),
)
} }
} }

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:8b04072b9e16342e333c2a10e6462420216b4192226c97f0d4bd5b5ada1aecef oid sha256:3924189c91a3e5af84f01365c4e147540882aa58478a8d1f2df180ecf6d7c9c8
size 18791 size 62580

3
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c3e033d714925e3f49101232f07dc074306a02a0982751c27b9632cded807805
size 59633

3
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac
size 59331

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:1853de49049bcd1448cc4e7c4a38ed8ab3cf11c3d11b1ddf296f2b6a37e985b4 oid sha256:c3e033d714925e3f49101232f07dc074306a02a0982751c27b9632cded807805
size 15428 size 59633

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:7d1cdeba30c6efca096c3625613ce5ad33b6f09e08eb09b2758d9a039e4206fb oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac
size 15106 size 59331

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:7d1cdeba30c6efca096c3625613ce5ad33b6f09e08eb09b2758d9a039e4206fb oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac
size 15106 size 59331

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:f9d7fecddc7aff63c795dcad68665dc1771544f5facda5a838b1f3391655ee49 oid sha256:d6fcc983290fe807c5a77220306db0ce71d6f6135e06a2e9e36bebae36b8adda
size 18306 size 54797

3
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2484c3e0a0520fda13fa306ec6fa4c3d1cb7a8c19f516c49a3e4807d51ce48e0
size 51830

3
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5
size 51412

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:739e2618bac9233b0ff7335d734d7fb594e3ee8860f9e61ef80d2dc4d7736a27 oid sha256:2484c3e0a0520fda13fa306ec6fa4c3d1cb7a8c19f516c49a3e4807d51ce48e0
size 15026 size 51830

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:8be4c40bcec9cb84bd087dc395be694b614f88ff5b44a33dafc3ad87576d23c6 oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5
size 14578 size 51412

4
tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1 version https://git-lfs.github.com/spec/v1
oid sha256:8be4c40bcec9cb84bd087dc395be694b614f88ff5b44a33dafc3ad87576d23c6 oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5
size 14578 size 51412