From 6abe789c2fd9864d2a4b8934ed68c8d50d4514f8 Mon Sep 17 00:00:00 2001 From: vfsfitvnm Date: Wed, 5 Oct 2022 19:40:47 +0200 Subject: [PATCH] Fix misaligned placeholders --- .../ui/components/themed/ShimmerHost.kt | 11 +++--- .../vimusic/ui/screens/album/AlbumScreen.kt | 37 +++++++++--------- .../vimusic/ui/screens/album/AlbumSongs.kt | 5 ++- .../vimusic/ui/screens/artist/ArtistScreen.kt | 38 +++++++++---------- .../ui/screens/playlist/PlaylistSongList.kt | 11 +++--- .../ui/screens/searchresult/ItemsPage.kt | 5 ++- 6 files changed, 56 insertions(+), 51 deletions(-) diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/ShimmerHost.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/ShimmerHost.kt index bbed73d..8462ce8 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/ShimmerHost.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/ShimmerHost.kt @@ -2,6 +2,7 @@ package it.vfsfitvnm.vimusic.ui.components.themed import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -14,20 +15,20 @@ import com.valentinilk.shimmer.shimmer @Composable fun ShimmerHost( + modifier: Modifier = Modifier, horizontalAlignment: Alignment.Horizontal = Alignment.Start, - content: @Composable ColumnScope.() -> Unit, + content: @Composable ColumnScope.() -> Unit ) { Column( horizontalAlignment = horizontalAlignment, - modifier = Modifier + modifier = modifier .shimmer() + .fillMaxSize() .graphicsLayer(alpha = 0.99f) .drawWithContent { drawContent() drawRect( - brush = Brush.verticalGradient( - listOf(Color.Black, Color.Transparent) - ), + brush = Brush.verticalGradient(listOf(Color.Black, Color.Transparent)), blendMode = BlendMode.DstIn ) }, diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumScreen.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumScreen.kt index cb4ec58..d6e8f36 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumScreen.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumScreen.kt @@ -8,7 +8,6 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -44,7 +43,6 @@ import it.vfsfitvnm.vimusic.ui.items.AlbumItemPlaceholder import it.vfsfitvnm.vimusic.ui.screens.albumRoute import it.vfsfitvnm.vimusic.ui.screens.globalRoutes import it.vfsfitvnm.vimusic.ui.screens.searchresult.ItemsPage -import it.vfsfitvnm.vimusic.ui.styling.Dimensions import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance import it.vfsfitvnm.vimusic.ui.styling.px import it.vfsfitvnm.vimusic.ui.styling.shimmer @@ -182,25 +180,24 @@ fun AlbumScreen(browseId: String) { val thumbnailContent: @Composable ColumnScope.() -> Unit = { val (colorPalette, _, thumbnailShape) = LocalAppearance.current - if (album?.timestamp == null) { - Spacer( - modifier = Modifier - .shimmer() - .align(Alignment.CenterHorizontally) - .padding(all = 16.dp) - .clip(thumbnailShape) - .fillMaxWidth() - .aspectRatio(1f) - .background(colorPalette.shimmer) - ) - } else { - BoxWithConstraints( - modifier = Modifier - .align(Alignment.CenterHorizontally) - ) { - val thumbnailSizeDp = maxWidth - Dimensions.navigationRailWidth - val thumbnailSizePx = (thumbnailSizeDp - 32.dp).px + BoxWithConstraints( + contentAlignment = Alignment.Center, + modifier = Modifier + .fillMaxWidth() + ) { + val thumbnailSizeDp = maxWidth - 64.dp + val thumbnailSizePx = thumbnailSizeDp.px + if (album?.timestamp == null) { + Spacer( + modifier = Modifier + .padding(all = 16.dp) + .shimmer() + .clip(thumbnailShape) + .size(thumbnailSizeDp) + .background(colorPalette.shimmer) + ) + } else { AsyncImage( model = album?.thumbnailUrl?.thumbnail(thumbnailSizePx), contentDescription = null, diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumSongs.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumSongs.kt index e877e37..d4aaa96 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumSongs.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumSongs.kt @@ -133,7 +133,10 @@ fun AlbumSongs( if (songs.isEmpty()) { item(key = "loading") { - ShimmerHost { + ShimmerHost( + modifier = Modifier + .fillParentMaxSize() + ) { repeat(4) { SongItemPlaceholder(thumbnailSizeDp = Dimensions.thumbnails.song) } diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/artist/ArtistScreen.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/artist/ArtistScreen.kt index 29c6f29..bb616a6 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/artist/ArtistScreen.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/artist/ArtistScreen.kt @@ -9,7 +9,6 @@ import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -125,25 +124,26 @@ fun ArtistScreen(browseId: String) { host { val thumbnailContent: @Composable ColumnScope.() -> Unit = { - if (artist?.timestamp == null) { - Spacer( - modifier = Modifier - .shimmer() - .align(Alignment.CenterHorizontally) - .padding(all = 16.dp) - .clip(CircleShape) - .fillMaxWidth() - .aspectRatio(1f) - .background(LocalAppearance.current.colorPalette.shimmer) - ) - } else { - BoxWithConstraints( - modifier = Modifier - .align(Alignment.CenterHorizontally) - ) { - val thumbnailSizeDp = maxWidth - Dimensions.navigationRailWidth - val thumbnailSizePx = (thumbnailSizeDp - 32.dp).px + BoxWithConstraints( + contentAlignment = Alignment.Center, + modifier = Modifier + .fillMaxWidth() + ) { + val thumbnailSizeDp = maxWidth - 64.dp + val thumbnailSizePx = thumbnailSizeDp.px + if (artist?.timestamp == null) { + val (colorPalette) = LocalAppearance.current + + Spacer( + modifier = Modifier + .padding(all = 16.dp) + .shimmer() + .clip(CircleShape) + .size(thumbnailSizeDp) + .background(colorPalette.shimmer) + ) + } else { AsyncImage( model = artist?.thumbnailUrl?.thumbnail(thumbnailSizePx), contentDescription = null, diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/playlist/PlaylistSongList.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/playlist/PlaylistSongList.kt index 998e927..85a72bd 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/playlist/PlaylistSongList.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/playlist/PlaylistSongList.kt @@ -99,9 +99,12 @@ fun PlaylistSongList( .collect { value = it } } - BoxWithConstraints { - val thumbnailSizeDp = maxWidth - Dimensions.navigationRailWidth - val thumbnailSizePx = (thumbnailSizeDp - 32.dp).px + BoxWithConstraints( + modifier = Modifier + .fillMaxWidth() + ) { + val thumbnailSizeDp = maxWidth - 64.dp + val thumbnailSizePx = thumbnailSizeDp.px val songThumbnailSizeDp = Dimensions.thumbnails.song val songThumbnailSizePx = songThumbnailSizeDp.px @@ -182,7 +185,6 @@ fun PlaylistSongList( model = playlist.thumbnail?.size(thumbnailSizePx), contentDescription = null, modifier = Modifier - .align(Alignment.CenterHorizontally) .padding(all = 16.dp) .clip(thumbnailShape) .size(thumbnailSizeDp) @@ -249,7 +251,6 @@ fun PlaylistSongList( Spacer( modifier = Modifier - .align(Alignment.CenterHorizontally) .padding(all = 16.dp) .clip(thumbnailShape) .size(thumbnailSizeDp) diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/searchresult/ItemsPage.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/searchresult/ItemsPage.kt index 915e916..a4d657b 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/searchresult/ItemsPage.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/searchresult/ItemsPage.kt @@ -103,7 +103,10 @@ inline fun ItemsPage( if (!(itemsPage != null && itemsPage?.continuation == null)) { item(key = "loading") { - ShimmerHost { + ShimmerHost( + modifier = Modifier + .fillParentMaxSize() + ) { repeat(if (itemsPage?.items.isNullOrEmpty()) initialPlaceholderCount else continuationPlaceholderCount) { itemPlaceholderContent() }