feat: highlight currently playing song

you-apps · Oct 12, 2023 · edf017d · edf017d
1 parent 4ee34cb
commit edf017d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 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
@@ -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
@@ -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
@@ -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,