From edf017d8c14837ff861e00c15097b6eba459a12c Mon Sep 17 00:00:00 2001 From: Suhas Dissanayake Date: Thu, 12 Oct 2023 23:46:39 +0530 Subject: [PATCH] feat: highlight currently playing song --- .../vibeyou/ui/components/SongCard.kt | 46 ++++++++++++++----- .../vibeyou/ui/screens/player/Queue.kt | 14 +++--- .../vibeyou/ui/screens/player/QueueSheet.kt | 16 ------- 3 files changed, 43 insertions(+), 33 deletions(-) diff --git a/app/src/main/java/app/suhasdissa/vibeyou/ui/components/SongCard.kt b/app/src/main/java/app/suhasdissa/vibeyou/ui/components/SongCard.kt index 08b861ea..db6ac301 100644 --- a/app/src/main/java/app/suhasdissa/vibeyou/ui/components/SongCard.kt +++ b/app/src/main/java/app/suhasdissa/vibeyou/ui/components/SongCard.kt @@ -3,17 +3,22 @@ package app.suhasdissa.vibeyou.ui.components import android.net.Uri import android.view.SoundEffectConstants import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.combinedClickable +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.aspectRatio +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.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.PlayArrow +import androidx.compose.material.icons.rounded.BarChart +import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -104,6 +109,7 @@ fun SongCardCompact( thumbnail: Uri?, title: String, artist: String?, + active: Boolean = false, onClickVideoCard: () -> Unit, TrailingContent: @Composable () -> Unit, modifier: Modifier = Modifier @@ -114,17 +120,35 @@ fun SongCardCompact( .clickable { onClickVideoCard() }, verticalAlignment = Alignment.CenterVertically ) { - AsyncImage( - modifier = Modifier - .size(64.dp) - .padding(8.dp) - .aspectRatio(1f) - .clip(RoundedCornerShape(8.dp)), - model = thumbnail, - contentDescription = null, - contentScale = ContentScale.Crop, - error = painterResource(id = R.drawable.music_placeholder) - ) + if (active) { + Box( + modifier = Modifier + .size(64.dp) + .padding(8.dp) + .aspectRatio(1f) + .clip(RoundedCornerShape(8.dp)) + .background(MaterialTheme.colorScheme.secondaryContainer) + ) { + Icon( + Icons.Rounded.BarChart, + modifier = Modifier.fillMaxSize().padding(8.dp), + contentDescription = null, + tint = MaterialTheme.colorScheme.onSecondaryContainer + ) + } + } else { + AsyncImage( + modifier = Modifier + .size(64.dp) + .padding(8.dp) + .aspectRatio(1f) + .clip(RoundedCornerShape(8.dp)), + model = thumbnail, + contentDescription = null, + contentScale = ContentScale.Crop, + error = painterResource(id = R.drawable.music_placeholder) + ) + } Column( Modifier .weight(1f) diff --git a/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/Queue.kt b/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/Queue.kt index 8e840fc3..0e775430 100644 --- a/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/Queue.kt +++ b/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/Queue.kt @@ -15,6 +15,7 @@ import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue @@ -23,9 +24,12 @@ import androidx.compose.ui.draw.shadow import androidx.compose.ui.platform.LocalView import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp +import androidx.media3.common.MediaItem +import androidx.media3.common.Player import androidx.media3.session.MediaController import app.suhasdissa.vibeyou.R import app.suhasdissa.vibeyou.ui.components.SongCardCompact +import app.suhasdissa.vibeyou.utils.DisposableListener import app.suhasdissa.vibeyou.utils.queue import org.burnoutcrew.reorderable.ReorderableItem import org.burnoutcrew.reorderable.detectReorderAfterLongPress @@ -38,17 +42,14 @@ fun Queue( controller: MediaController ) { var queueItems by remember { mutableStateOf(controller.currentTimeline.queue) } - // This code seems to break the drag and drop animation - /* + var currentItemIndex by remember { mutableIntStateOf(controller.currentMediaItemIndex) } controller.DisposableListener { object : Player.Listener { - override fun onTimelineChanged(timeline: Timeline, reason: Int) { - queueItems.clear() - queueItems.addAll(timeline.queue) + override fun onMediaItemTransition(mediaItem: MediaItem?, reason: Int) { + currentItemIndex = controller.currentMediaItemIndex } } } - */ val state = rememberReorderableLazyListState(onMove = { from, to -> queueItems = queueItems.toMutableList().apply { val removedItem = removeAt(from.index) @@ -71,6 +72,7 @@ fun Queue( thumbnail = mediaItem.mediaMetadata.artworkUri, title = mediaItem.mediaMetadata.title.toString(), artist = mediaItem.mediaMetadata.artist.toString(), + active = queue.first == currentItemIndex, TrailingContent = { IconButton(onClick = { view.playSoundEffect(SoundEffectConstants.CLICK) diff --git a/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/QueueSheet.kt b/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/QueueSheet.kt index 0573fea7..9ef9d3aa 100644 --- a/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/QueueSheet.kt +++ b/app/src/main/java/app/suhasdissa/vibeyou/ui/screens/player/QueueSheet.kt @@ -11,7 +11,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.ModalBottomSheet -import androidx.compose.material3.SheetValue import androidx.compose.material3.Text import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.runtime.Composable @@ -21,10 +20,8 @@ import androidx.compose.ui.platform.LocalView import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel -import androidx.media3.common.Player import app.suhasdissa.vibeyou.R import app.suhasdissa.vibeyou.backend.viewmodel.PlayerViewModel -import app.suhasdissa.vibeyou.utils.DisposableListener import kotlinx.coroutines.launch @OptIn(ExperimentalMaterial3Api::class) @@ -38,19 +35,6 @@ fun QueueSheet( ) val scope = rememberCoroutineScope() val view = LocalView.current - playerViewModel.controller?.let { - it.DisposableListener { - object : Player.Listener { - override fun onIsPlayingChanged(isPlaying: Boolean) { - if (playerSheetState.currentValue == SheetValue.Hidden) { - scope.launch { - playerSheetState.expand() - } - } - } - } - } - } ModalBottomSheet( onDismissRequest = onDismissRequest, sheetState = playerSheetState,