beenull/ViMusic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix misaligned placeholders

Browse source
This commit is contained in:
vfsfitvnm 2022-10-05 19:40:47 +02:00
parent 98939b6ac1
commit 6abe789c2f
6 changed files with 56 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/ShimmerHost.kt
View file

@ -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
)
},

37
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumScreen.kt
View file

@ -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,

5
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumSongs.kt
View file

@ -133,7 +133,10 @@ fun AlbumSongs(
if (songs.isEmpty()) {
item(key = "loading") {
ShimmerHost {
ShimmerHost(
modifier = Modifier
.fillParentMaxSize()
) {
repeat(4) {
SongItemPlaceholder(thumbnailSizeDp = Dimensions.thumbnails.song)
}

38
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/artist/ArtistScreen.kt
View file

@ -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,

11
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/playlist/PlaylistSongList.kt
View file

@ -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)

5
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/searchresult/ItemsPage.kt
View file

@ -103,7 +103,10 @@ inline fun <T : Innertube.Item> ItemsPage(
if (!(itemsPage != null && itemsPage?.continuation == null)) {
item(key = "loading") {
ShimmerHost {
ShimmerHost(
modifier = Modifier
.fillParentMaxSize()
) {
repeat(if (itemsPage?.items.isNullOrEmpty()) initialPlaceholderCount else continuationPlaceholderCount) {
itemPlaceholderContent()
}