From 749e995d42487b2a93b0fbfddf044afb8edc9752 Mon Sep 17 00:00:00 2001 From: vfsfitvnm Date: Wed, 6 Jul 2022 22:56:02 +0200 Subject: [PATCH] Rework song UI --- .../vimusic/ui/screens/LocalPlaylistScreen.kt | 11 ++++ .../vimusic/ui/views/CurrentPlaylistView.kt | 12 ++++ .../vfsfitvnm/vimusic/ui/views/PlayerView.kt | 2 +- .../it/vfsfitvnm/vimusic/ui/views/SongItem.kt | 55 ++++++++++--------- app/src/main/res/drawable/reorder.xml | 20 +++++++ 5 files changed, 72 insertions(+), 28 deletions(-) create mode 100644 app/src/main/res/drawable/reorder.xml diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/LocalPlaylistScreen.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/LocalPlaylistScreen.kt index b9e3b62..cb05b46 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/LocalPlaylistScreen.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/LocalPlaylistScreen.kt @@ -276,6 +276,17 @@ fun LocalPlaylistScreen( song = song ) }, + trailingContent = { + Image( + painter = painterResource(R.drawable.reorder), + contentDescription = null, + colorFilter = ColorFilter.tint(colorPalette.textSecondary), + modifier = Modifier + .clickable {} + .padding(horizontal = 8.dp, vertical = 4.dp) + .size(20.dp) + ) + }, modifier = Modifier .verticalDragAfterLongPressToReorder( reorderingState = reorderingState, diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/CurrentPlaylistView.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/CurrentPlaylistView.kt index 023a9b6..f472061 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/CurrentPlaylistView.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/CurrentPlaylistView.kt @@ -6,6 +6,7 @@ import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed @@ -138,6 +139,17 @@ fun CurrentPlaylistView( } } }, + trailingContent = { + Image( + painter = painterResource(R.drawable.reorder), + contentDescription = null, + colorFilter = ColorFilter.tint(colorPalette.textSecondary), + modifier = Modifier + .clickable {} + .padding(horizontal = 8.dp, vertical = 4.dp) + .size(20.dp) + ) + }, backgroundColor = colorPalette.elevatedBackground, modifier = Modifier .verticalDragAfterLongPressToReorder( diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt index 53f36ef..5e9d1d3 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt @@ -95,7 +95,7 @@ fun PlayerView( collapsedContent = { if (!layoutState.isExpanded) { Row( - horizontalArrangement = Arrangement.spacedBy(8.dp), + horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically, modifier = Modifier .height(layoutState.lowerBound) diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/SongItem.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/SongItem.kt index 530db42..b3903f9 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/SongItem.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/SongItem.kt @@ -1,9 +1,9 @@ package it.vfsfitvnm.vimusic.ui.views import androidx.compose.animation.ExperimentalAnimationApi -import androidx.compose.foundation.Image +import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background -import androidx.compose.foundation.clickable +import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.BasicText @@ -15,16 +15,13 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.media3.common.MediaItem import coil.compose.AsyncImage import coil.request.ImageRequest -import it.vfsfitvnm.vimusic.R import it.vfsfitvnm.vimusic.enums.ThumbnailRoundness import it.vfsfitvnm.vimusic.models.DetailedSong import it.vfsfitvnm.vimusic.ui.components.LocalMenuState @@ -46,6 +43,7 @@ fun SongItem( modifier: Modifier = Modifier, backgroundColor: Color? = null, onThumbnailContent: (@Composable BoxScope.() -> Unit)? = null, + trailingContent: (@Composable () -> Unit)? = null ) { SongItem( thumbnailModel = ImageRequest.Builder(LocalContext.current) @@ -58,6 +56,7 @@ fun SongItem( menuContent = menuContent, onClick = onClick, onThumbnailContent = onThumbnailContent, + trailingContent = trailingContent, backgroundColor = backgroundColor, modifier = modifier, ) @@ -74,6 +73,7 @@ fun SongItem( modifier: Modifier = Modifier, backgroundColor: Color? = null, onThumbnailContent: (@Composable BoxScope.() -> Unit)? = null, + trailingContent: (@Composable () -> Unit)? = null ) { SongItem( thumbnailModel = song.song.thumbnailUrl?.thumbnail(thumbnailSize), @@ -84,6 +84,7 @@ fun SongItem( onClick = onClick, onThumbnailContent = onThumbnailContent, backgroundColor = backgroundColor, + trailingContent = trailingContent, modifier = modifier, ) } @@ -102,6 +103,7 @@ fun SongItem( modifier: Modifier = Modifier, backgroundColor: Color? = null, onThumbnailContent: (@Composable BoxScope.() -> Unit)? = null, + trailingContent: (@Composable () -> Unit)? = null ) { SongItem( title = title, @@ -127,10 +129,12 @@ fun SongItem( }, menuContent = menuContent, backgroundColor = backgroundColor, + trailingContent = trailingContent, modifier = modifier, ) } +@OptIn(ExperimentalFoundationApi::class) @ExperimentalAnimationApi @Composable fun SongItem( @@ -142,6 +146,7 @@ fun SongItem( menuContent: @Composable () -> Unit, modifier: Modifier = Modifier, backgroundColor: Color? = null, + trailingContent: (@Composable () -> Unit)? = null ) { val menuState = LocalMenuState.current val colorPalette = LocalColorPalette.current @@ -149,17 +154,20 @@ fun SongItem( Row( verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), + horizontalArrangement = Arrangement.spacedBy(12.dp), modifier = modifier - .clickable( + .combinedClickable( indication = rememberRipple(bounded = true), interactionSource = remember { MutableInteractionSource() }, + onLongClick = { + menuState.display(menuContent) + }, onClick = onClick ) .fillMaxWidth() - .padding(vertical = 4.dp) + .padding(vertical = 5.dp) .background(backgroundColor ?: colorPalette.background) - .padding(start = 16.dp, end = 8.dp) + .padding(start = 16.dp, end = if (trailingContent == null) 16.dp else 8.dp) ) { startContent() @@ -174,29 +182,22 @@ fun SongItem( overflow = TextOverflow.Ellipsis, ) BasicText( - text = buildString { - append(authors) - if (authors?.isNotEmpty() == true && durationText != null) { - append(" • ") - } - append(durationText) - }, + text = authors ?: "", style = typography.xs.semiBold.secondary, maxLines = 1, overflow = TextOverflow.Ellipsis, ) } - Image( - painter = painterResource(R.drawable.ellipsis_vertical), - contentDescription = null, - colorFilter = ColorFilter.tint(colorPalette.textSecondary), - modifier = Modifier - .clickable { - menuState.display(menuContent) - } - .padding(horizontal = 8.dp, vertical = 4.dp) - .size(20.dp) - ) + durationText?.let { + BasicText( + text = durationText, + style = typography.xxs.secondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } + + trailingContent?.invoke() } } \ No newline at end of file diff --git a/app/src/main/res/drawable/reorder.xml b/app/src/main/res/drawable/reorder.xml new file mode 100644 index 0000000..29fc954 --- /dev/null +++ b/app/src/main/res/drawable/reorder.xml @@ -0,0 +1,20 @@ + + + +