From 9c9d628f0c10fb0c692e50a6be68f3b4f77a9824 Mon Sep 17 00:00:00 2001 From: Christian Schabesberger Date: Tue, 3 Sep 2024 14:13:56 +0200 Subject: [PATCH] make background visiable when dragging playlist item --- .../ui/videoplayer/StreamSelectUI.kt | 7 +- .../ui/videoplayer/streamselect/StreamItem.kt | 176 +++++++++++------- 2 files changed, 108 insertions(+), 75 deletions(-) diff --git a/new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/StreamSelectUI.kt b/new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/StreamSelectUI.kt index 64e77da..e059ca8 100644 --- a/new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/StreamSelectUI.kt +++ b/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 ) } } diff --git a/new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/StreamItem.kt b/new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/StreamItem.kt index b8add40..5a4e098 100644 --- a/new-player/src/main/java/net/newpipe/newplayer/ui/videoplayer/streamselect/StreamItem.kt +++ b/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,98 +106,121 @@ 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) + }) { - Row( - modifier = modifier - .padding(5.dp) - .height(60.dp) - ) { - Box( - modifier = Modifier - .aspectRatio(16f / 9f) - .fillMaxSize() + AnimatedVisibility( + visible = isDragging, + enter = fadeIn(animationSpec = tween(200)), + exit = fadeOut(animationSpec = tween(400)) ) { - val contentDescription = stringResource(R.string.stream_item_thumbnail) - Thumbnail(thumbnail, contentDescription) Surface( - color = CONTROLLER_UI_BACKGROUND_COLOR, + modifier = Modifier.fillMaxSize(), + color = MaterialTheme.colorScheme.background, + shadowElevation = 8.dp + ) {} + } + + Row( + modifier = modifier + .padding(5.dp) + ) { + Box( modifier = Modifier - .wrapContentSize() - .align(Alignment.BottomEnd) - .padding(4.dp) + .aspectRatio(16f / 9f) + .fillMaxSize() + ) { + val contentDescription = stringResource(R.string.stream_item_thumbnail) + Thumbnail(thumbnail, contentDescription) + Surface( + color = CONTROLLER_UI_BACKGROUND_COLOR, + modifier = Modifier + .wrapContentSize() + .align(Alignment.BottomEnd) + .padding(4.dp) + ) { + Text( + modifier = Modifier.padding( + start = 4.dp, + end = 4.dp, + top = 0.5.dp, + bottom = 0.5.dp + ), + text = getTimeStringFromMs( + lengthInMs, + locale, + leadingZerosForMinutes = false + ), + fontSize = 14.sp, + ) + } + } + + Column( + modifier = Modifier + .padding(1.dp) + .weight(1f) + .wrapContentHeight() + .fillMaxWidth() ) { Text( - modifier = Modifier.padding( - start = 4.dp, - end = 4.dp, - top = 0.5.dp, - bottom = 0.5.dp - ), - text = getTimeStringFromMs(lengthInMs, locale, leadingZerosForMinutes = false), - fontSize = 14.sp, - ) - } - } - - Column( - modifier = Modifier - .padding(1.dp) - .weight(1f) - .wrapContentHeight() - .fillMaxWidth() - ) { - Text( - text = title, fontSize = 14.sp, fontWeight = FontWeight.Bold, maxLines = 1, - overflow = TextOverflow.Ellipsis - ) - if (creator != null) { - Text( - text = creator, fontSize = 13.sp, fontWeight = FontWeight.Light, maxLines = 1, + text = title, fontSize = 14.sp, fontWeight = FontWeight.Bold, maxLines = 1, overflow = TextOverflow.Ellipsis ) + if (creator != null) { + Text( + text = creator, + fontSize = 13.sp, + fontWeight = FontWeight.Light, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } } - } - IconButton( - modifier = if (reorderableScope != null) { - with(reorderableScope) { + IconButton( + modifier = if (reorderableScope != null) { + with(reorderableScope) { + Modifier + .aspectRatio(1f) + .fillMaxSize() + .draggableHandle( + onDragStarted = { + haptic?.performHapticFeedback(ReorderHapticFeedbackType.START) + }, + onDragStopped = { + haptic?.performHapticFeedback(ReorderHapticFeedbackType.END) + onDragFinished() + }, + interactionSource = interactionSource, + ) + } + } else { Modifier .aspectRatio(1f) .fillMaxSize() - .draggableHandle( - onDragStarted = { - haptic?.performHapticFeedback(ReorderHapticFeedbackType.START) - }, - onDragStopped = { - haptic?.performHapticFeedback(ReorderHapticFeedbackType.END) - onDragFinished() - }, - interactionSource = interactionSource, - ) - } - } else { - Modifier - .aspectRatio(1f) - .fillMaxSize() - }, - onClick = {} - ) { - Icon( - imageVector = Icons.Filled.DragHandle, - contentDescription = stringResource(R.string.stream_item_drag_handle) - ) + }, + onClick = {} + ) { + Icon( + imageVector = Icons.Filled.DragHandle, + contentDescription = stringResource(R.string.stream_item_drag_handle) + ) + } } } } @@ -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, ) } }