From 6c9ab4954b42f1b5b10b41886af11cfe2f9ea709 Mon Sep 17 00:00:00 2001 From: Kirill Zhukov Date: Sun, 9 Feb 2025 12:17:39 +0300 Subject: [PATCH] Skeleton progress for servers and play queue --- .../player/queue/ui/PlayerQueueScreen.kt | 73 +++++++++++++++++-- .../server/list/ui/ServerListScreen.kt | 60 +++++++++++++-- 2 files changed, 121 insertions(+), 12 deletions(-) diff --git a/feature/player/queue/src/main/java/ru/stersh/youamp/feature/player/queue/ui/PlayerQueueScreen.kt b/feature/player/queue/src/main/java/ru/stersh/youamp/feature/player/queue/ui/PlayerQueueScreen.kt index 16b0ad15..5c048688 100644 --- a/feature/player/queue/src/main/java/ru/stersh/youamp/feature/player/queue/ui/PlayerQueueScreen.kt +++ b/feature/player/queue/src/main/java/ru/stersh/youamp/feature/player/queue/ui/PlayerQueueScreen.kt @@ -4,14 +4,16 @@ import android.content.res.Configuration import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background import androidx.compose.foundation.combinedClickable -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.DragHandle import androidx.compose.material.icons.rounded.MusicNote -import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon import androidx.compose.material3.LargeTopAppBar import androidx.compose.material3.ListItem @@ -35,6 +37,8 @@ import ru.stersh.youamp.core.ui.Artwork import ru.stersh.youamp.core.ui.ArtworkMaskColor import ru.stersh.youamp.core.ui.BackNavigationButton import ru.stersh.youamp.core.ui.DragAndDropLazyColumn +import ru.stersh.youamp.core.ui.SkeletonLayout +import ru.stersh.youamp.core.ui.SkeletonScope import ru.stersh.youamp.core.ui.SongPlayAnimation import ru.stersh.youamp.core.ui.YouampPlayerTheme import ru.stersh.youamp.feature.player.queue.R @@ -85,13 +89,11 @@ private fun PlayerQueueScreen( } ) { padding -> if (state.progress) { - Box( + Progress( modifier = Modifier .padding(padding) .fillMaxSize() - ) { - CircularProgressIndicator(modifier = Modifier.align(Alignment.Center)) - } + ) } else { DragAndDropLazyColumn( items = state.songs, @@ -114,6 +116,49 @@ private fun PlayerQueueScreen( } } +@Composable +private fun Progress(modifier: Modifier = Modifier) { + SkeletonLayout(modifier = modifier) { + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 16.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + ProgressItem() + ProgressItem() + ProgressItem() + } + } +} + +@Composable +private fun SkeletonScope.ProgressItem() { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(12.dp) + ) { + SkeletonItem( + modifier = Modifier.size(48.dp), + shape = MaterialTheme.shapes.medium + ) + Column( + verticalArrangement = Arrangement.spacedBy(6.dp), + modifier = Modifier.weight(1f) + ) { + SkeletonItem(modifier = Modifier.size(160.dp, 16.dp)) + SkeletonItem(modifier = Modifier.size(100.dp, 16.dp)) + } + SkeletonItem( + modifier = Modifier + .padding(end = 8.dp) + .size(24.dp, 12.dp), + shape = MaterialTheme.shapes.small + ) + } +} + @OptIn(ExperimentalFoundationApi::class) @Composable private fun SongItem( @@ -205,4 +250,20 @@ private fun PlayerQueueScreenPreview() { onBackClick = {} ) } +} + +@Composable +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview +private fun PlayerQueueScreenProgressPreview() { + YouampPlayerTheme { + val state = StateUi() + PlayerQueueScreen( + state = state, + onSongClick = {}, + onSongLongClick = {}, + onMoveSong = { from, to -> }, + onBackClick = {} + ) + } } \ No newline at end of file diff --git a/feature/server/list/src/main/java/ru/stersh/youamp/feature/server/list/ui/ServerListScreen.kt b/feature/server/list/src/main/java/ru/stersh/youamp/feature/server/list/ui/ServerListScreen.kt index 01d88008..ee7902f8 100644 --- a/feature/server/list/src/main/java/ru/stersh/youamp/feature/server/list/ui/ServerListScreen.kt +++ b/feature/server/list/src/main/java/ru/stersh/youamp/feature/server/list/ui/ServerListScreen.kt @@ -2,8 +2,12 @@ package ru.stersh.youamp.feature.server.list.ui import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn @@ -12,7 +16,6 @@ import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.Add import androidx.compose.material.icons.rounded.Dns -import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.Icon @@ -40,6 +43,8 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle import kotlinx.collections.immutable.persistentListOf import org.koin.androidx.compose.koinViewModel import ru.stersh.youamp.core.ui.BackNavigationButton +import ru.stersh.youamp.core.ui.SkeletonLayout +import ru.stersh.youamp.core.ui.SkeletonScope import ru.stersh.youamp.core.ui.YouampPlayerTheme import ru.stersh.youamp.feature.server.list.R @@ -94,11 +99,11 @@ private fun ServerListScreen( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection) ) { if (state.progress) { - Box(modifier = Modifier.fillMaxSize()) { - CircularProgressIndicator( - modifier = Modifier.align(Alignment.Center) - ) - } + Progress( + modifier = Modifier + .padding(it) + .fillMaxSize() + ) } else { LazyColumn( modifier = Modifier.padding(it) @@ -120,6 +125,49 @@ private fun ServerListScreen( } } +@Composable +private fun Progress(modifier: Modifier = Modifier) { + SkeletonLayout(modifier = modifier) { + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 16.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + ProgressItem() + ProgressItem() + ProgressItem() + } + } +} + +@Composable +private fun SkeletonScope.ProgressItem() { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(12.dp) + ) { + SkeletonItem( + modifier = Modifier.size(48.dp), + shape = CircleShape + ) + Column( + verticalArrangement = Arrangement.spacedBy(6.dp), + modifier = Modifier.weight(1f) + ) { + SkeletonItem(modifier = Modifier.size(100.dp, 16.dp)) + SkeletonItem(modifier = Modifier.size(160.dp, 16.dp)) + } + SkeletonItem( + modifier = Modifier + .padding(end = 8.dp) + .size(24.dp), + shape = CircleShape + ) + } +} + @Composable private fun ServerItem( item: ServerUi,