make background visiable when dragging playlist item

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/StreamSelectUI.kt

@@ -145,15 +145,16 @@ fun ReorderableStreamItemsList(
                 key = playlistItem.uniqueId
             ) { isDragging ->
                 StreamItem(
-                    id = index,
+                    uniqueId = playlistItem.uniqueId,
                     title = playlistItem.title,
                     creator = playlistItem.creator,
                     thumbnail = playlistItem.thumbnail,
                     lengthInMs = playlistItem.lengthInS.toLong() * 1000,
-                    onClicked = { viewModel.streamSelected(it) },
+                    onClicked = { viewModel.streamSelected(0) },
                     reorderableScope = this@ReorderableItem,
                     haptic = haptic,
-                    onDragFinished = viewModel::onStreamItemDragFinished
+                    onDragFinished = viewModel::onStreamItemDragFinished,
+                    isDragging = isDragging
                 )
             }
         }

new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/StreamItem.kt

@@ -20,8 +20,13 @@
 
 package net.newpipe.newplayer.ui.videoplayer.streamselect
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+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.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -37,6 +42,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DragHandle
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -55,6 +61,8 @@ import coil.compose.AsyncImage
 import net.newpipe.newplayer.R
 import net.newpipe.newplayer.ui.CONTROLLER_UI_BACKGROUND_COLOR
 import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
+import net.newpipe.newplayer.ui.videoplayer.gesture_ui.SEEK_ANIMATION_FADE_IN
+import net.newpipe.newplayer.ui.videoplayer.gesture_ui.SEEK_ANIMATION_FADE_OUT
 import net.newpipe.newplayer.utils.BitmapThumbnail
 import net.newpipe.newplayer.utils.OnlineThumbnail
 import net.newpipe.newplayer.utils.ReorderHapticFeedback
@@ -98,24 +106,39 @@ private fun Thumbnail(thumbnail: Thumbnail?, contentDescription: String) {
 @Composable
 fun StreamItem(
     modifier: Modifier = Modifier,
-    id: Int,
+    uniqueId: Long,
     title: String,
     creator: String?,
     thumbnail: Thumbnail?,
     lengthInMs: Long,
-    onClicked: (Int) -> Unit,
+    onClicked: (Long) -> Unit,
     onDragFinished: () -> Unit,
     reorderableScope: ReorderableCollectionItemScope?,
-    haptic: ReorderHapticFeedback?
+    haptic: ReorderHapticFeedback?,
+    isDragging: Boolean
 ) {
     val locale = getLocale()!!
 
     val interactionSource = remember { MutableInteractionSource() }
+    Box(modifier = modifier.height(60.dp).clickable {
+        onClicked(uniqueId)
+    }) {
+
+        AnimatedVisibility(
+            visible = isDragging,
+            enter = fadeIn(animationSpec = tween(200)),
+            exit = fadeOut(animationSpec = tween(400))
+        ) {
+            Surface(
+                modifier = Modifier.fillMaxSize(),
+                color = MaterialTheme.colorScheme.background,
+                shadowElevation = 8.dp
+            ) {}
+        }
 
         Row(
             modifier = modifier
                 .padding(5.dp)
-            .height(60.dp)
         ) {
             Box(
                 modifier = Modifier
@@ -138,7 +161,11 @@ fun StreamItem(
                             top = 0.5.dp,
                             bottom = 0.5.dp
                         ),
-                    text = getTimeStringFromMs(lengthInMs, locale, leadingZerosForMinutes = false),
+                        text = getTimeStringFromMs(
+                            lengthInMs,
+                            locale,
+                            leadingZerosForMinutes = false
+                        ),
                         fontSize = 14.sp,
                     )
                 }
@@ -157,7 +184,10 @@ fun StreamItem(
                 )
                 if (creator != null) {
                     Text(
-                    text = creator, fontSize = 13.sp, fontWeight = FontWeight.Light, maxLines = 1,
+                        text = creator,
+                        fontSize = 13.sp,
+                        fontWeight = FontWeight.Light,
+                        maxLines = 1,
                         overflow = TextOverflow.Ellipsis
                     )
                 }
@@ -193,6 +223,7 @@ fun StreamItem(
             }
         }
     }
+}
 
 
 @Preview(device = "spec:width=1080px,height=400px,dpi=440,orientation=landscape")
@@ -202,7 +233,7 @@ fun StreamItemPreview() {
         Surface(modifier = Modifier.fillMaxSize(), color = Color.DarkGray) {
             Box(modifier = Modifier.fillMaxSize()) {
                 StreamItem(
-                    id = 0,
+                    uniqueId = 0,
                     title = "Video Title",
                     creator = "Video Creator",
                     thumbnail = null,
@@ -210,7 +241,8 @@ fun StreamItemPreview() {
                     onClicked = {},
                     reorderableScope = null,
                     haptic = null,
-                    onDragFinished = {}
+                    onDragFinished = {},
+                    isDragging = false,
                 )
             }
         }