Show dropdown menu on long click, make some adjustments

TeamNewPipe · Jul 12, 2024 · 6926e7f · 6926e7f
1 parent 2d9e629
commit 6926e7f
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 78 deletions.
diff --git a/app/src/main/java/org/schabi/newpipe/compose/stream/StreamCardItem.kt b/app/src/main/java/org/schabi/newpipe/compose/stream/StreamCardItem.kt
@@ -1,8 +1,10 @@
 package org.schabi.newpipe.compose.stream
 
 import android.content.res.Configuration
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -20,39 +22,55 @@ import androidx.compose.ui.unit.dp
 import org.schabi.newpipe.compose.theme.AppTheme
 import org.schabi.newpipe.extractor.stream.StreamInfoItem
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun StreamCardItem(stream: StreamInfoItem, onClick: (StreamInfoItem) -> Unit) {
-    Column(
-        modifier = Modifier
-            .clickable(onClick = { onClick(stream) })
-            .padding(top = 12.dp, start = 2.dp, end = 2.dp)
-    ) {
-        StreamThumbnail(
-            stream = stream,
-            modifier = Modifier.fillMaxWidth(),
-            contentScale = ContentScale.FillWidth
-        )
-
-        Column(modifier = Modifier.padding(10.dp)) {
-            Text(
-                text = stream.name,
-                overflow = TextOverflow.Ellipsis,
-                style = MaterialTheme.typography.titleSmall,
-                maxLines = 2
-            )
-
-            Row(
+fun StreamCardItem(
+    stream: StreamInfoItem,
+    isSelected: Boolean = false,
+    onClick: (StreamInfoItem) -> Unit = {},
+    onLongClick: (StreamInfoItem) -> Unit = {},
+    onDismissPopup: () -> Unit = {}
+) {
+    Box {
+        Column(
+            modifier = Modifier
+                .combinedClickable(
+                    onLongClick = { onLongClick(stream) },
+                    onClick = { onClick(stream) }
+                )
+                .padding(top = 12.dp, start = 2.dp, end = 2.dp)
+        ) {
+            StreamThumbnail(
                 modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceBetween
-            ) {
-                Text(text = stream.uploaderName.orEmpty(), style = MaterialTheme.typography.bodySmall)
+                stream = stream,
+                contentScale = ContentScale.FillWidth
+            )
 
+            Column(modifier = Modifier.padding(10.dp)) {
                 Text(
-                    text = getStreamInfoDetail(stream),
-                    style = MaterialTheme.typography.bodySmall
+                    text = stream.name,
+                    overflow = TextOverflow.Ellipsis,
+                    style = MaterialTheme.typography.titleSmall,
+                    maxLines = 2
                 )
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Text(text = stream.uploaderName.orEmpty(), style = MaterialTheme.typography.bodySmall)
+
+                    Text(
+                        text = getStreamInfoDetail(stream),
+                        style = MaterialTheme.typography.bodySmall
+                    )
+                }
             }
         }
+
+        if (isSelected) {
+            StreamMenu(onDismissPopup)
+        }
     }
 }
 
@@ -64,7 +82,7 @@ private fun StreamCardItemPreview(
 ) {
     AppTheme {
         Surface(color = MaterialTheme.colorScheme.background) {
-            StreamCardItem(stream) {}
+            StreamCardItem(stream)
         }
     }
 }
diff --git a/app/src/main/java/org/schabi/newpipe/compose/stream/StreamGridItem.kt b/app/src/main/java/org/schabi/newpipe/compose/stream/StreamGridItem.kt
@@ -1,7 +1,9 @@
 package org.schabi.newpipe.compose.stream
 
 import android.content.res.Configuration
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -17,28 +19,47 @@ import androidx.compose.ui.unit.dp
 import org.schabi.newpipe.compose.theme.AppTheme
 import org.schabi.newpipe.extractor.stream.StreamInfoItem
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun StreamGridItem(stream: StreamInfoItem, onClick: (StreamInfoItem) -> Unit) {
-    Column(
-        modifier = Modifier
-            .clickable(onClick = { onClick(stream) })
-            .padding(12.dp)
-    ) {
-        StreamThumbnail(stream = stream, modifier = Modifier.size(width = 246.dp, height = 138.dp))
+fun StreamGridItem(
+    stream: StreamInfoItem,
+    isSelected: Boolean = false,
+    onClick: (StreamInfoItem) -> Unit = {},
+    onLongClick: (StreamInfoItem) -> Unit = {},
+    onDismissPopup: () -> Unit = {}
+) {
+    Box {
+        Column(
+            modifier = Modifier
+                .combinedClickable(
+                    onLongClick = { onLongClick(stream) },
+                    onClick = { onClick(stream) }
+                )
+                .padding(12.dp)
+        ) {
+            StreamThumbnail(
+                modifier = Modifier.size(width = 246.dp, height = 138.dp),
+                stream = stream
+            )
+
+            Text(
+                text = stream.name,
+                overflow = TextOverflow.Ellipsis,
+                style = MaterialTheme.typography.titleSmall,
+                maxLines = 2
+            )
 
-        Text(
-            text = stream.name,
-            overflow = TextOverflow.Ellipsis,
-            style = MaterialTheme.typography.titleSmall,
-            maxLines = 2
-        )
+            Text(text = stream.uploaderName.orEmpty(), style = MaterialTheme.typography.bodySmall)
 
-        Text(text = stream.uploaderName.orEmpty(), style = MaterialTheme.typography.bodySmall)
+            Text(
+                text = getStreamInfoDetail(stream),
+                style = MaterialTheme.typography.bodySmall
+            )
+        }
 
-        Text(
-            text = getStreamInfoDetail(stream),
-            style = MaterialTheme.typography.bodySmall
-        )
+        if (isSelected) {
+            StreamMenu(onDismissPopup)
+        }
     }
 }
 
@@ -50,7 +71,7 @@ private fun StreamGridItemPreview(
 ) {
     AppTheme {
         Surface(color = MaterialTheme.colorScheme.background) {
-            StreamGridItem(stream, onClick = {})
+            StreamGridItem(stream)
         }
     }
 }
diff --git a/app/src/main/java/org/schabi/newpipe/compose/stream/StreamList.kt b/app/src/main/java/org/schabi/newpipe/compose/stream/StreamList.kt
@@ -8,7 +8,10 @@ import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.FragmentActivity
@@ -36,7 +39,20 @@ fun StreamList(
             )
         }
     }
-    // TODO: Handle long-click by showing a dropdown menu instead of a dialog.
+
+    // Handle long clicks
+    // TODO: Adjust the menu display depending on where it was triggered
+    var selectedStream by remember { mutableStateOf<StreamInfoItem?>(null) }
+    val onLongClick = remember {
+        { stream: StreamInfoItem ->
+            selectedStream = stream
+        }
+    }
+    val onDismissPopup = remember {
+        {
+            selectedStream = null
+        }
+    }
 
     if (mode == ItemViewMode.GRID) {
         val gridState = rememberLazyGridState()
@@ -46,7 +62,11 @@ fun StreamList(
                 gridHeader()
 
                 items(streams.itemCount) {
-                    StreamGridItem(streams[it]!!, onClick)
+                    val stream = streams[it]!!
+                    StreamGridItem(
+                        stream, selectedStream == stream, onClick, onLongClick,
+                        onDismissPopup
+                    )
                 }
             }
         }
@@ -60,10 +80,12 @@ fun StreamList(
 
                 items(streams.itemCount) {
                     val stream = streams[it]!!
+                    val isSelected = selectedStream == stream
+
                     if (mode == ItemViewMode.CARD) {
-                        StreamCardItem(stream, onClick)
+                        StreamCardItem(stream, isSelected, onClick, onLongClick, onDismissPopup)
                     } else {
-                        StreamListItem(stream, onClick)
+                        StreamListItem(stream, isSelected, onClick, onLongClick, onDismissPopup)
                     }
                 }
             }

diff --git a/app/src/main/java/org/schabi/newpipe/compose/stream/StreamListItem.kt b/app/src/main/java/org/schabi/newpipe/compose/stream/StreamListItem.kt
@@ -1,8 +1,10 @@
 package org.schabi.newpipe.compose.stream
 
 import android.content.res.Configuration
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -21,32 +23,51 @@ import androidx.compose.ui.unit.dp
 import org.schabi.newpipe.compose.theme.AppTheme
 import org.schabi.newpipe.extractor.stream.StreamInfoItem
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun StreamListItem(stream: StreamInfoItem, onClick: (StreamInfoItem) -> Unit) {
-    Row(
-        modifier = Modifier
-            .clickable(onClick = { onClick(stream) })
-            .fillMaxWidth()
-            .padding(12.dp),
-        horizontalArrangement = Arrangement.spacedBy(4.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        StreamThumbnail(stream = stream, modifier = Modifier.size(width = 98.dp, height = 55.dp))
-
-        Column {
-            Text(
-                text = stream.name,
-                overflow = TextOverflow.Ellipsis,
-                style = MaterialTheme.typography.titleSmall,
-                maxLines = 1
+fun StreamListItem(
+    stream: StreamInfoItem,
+    isSelected: Boolean = false,
+    onClick: (StreamInfoItem) -> Unit = {},
+    onLongClick: (StreamInfoItem) -> Unit = {},
+    onDismissPopup: () -> Unit = {}
+) {
+    Box {
+        Row(
+            modifier = Modifier
+                .combinedClickable(
+                    onLongClick = { onLongClick(stream) },
+                    onClick = { onClick(stream) }
+                )
+                .fillMaxWidth()
+                .padding(12.dp),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            StreamThumbnail(
+                modifier = Modifier.size(width = 98.dp, height = 55.dp),
+                stream = stream
             )
 
-            Text(text = stream.uploaderName.orEmpty(), style = MaterialTheme.typography.bodySmall)
+            Column {
+                Text(
+                    text = stream.name,
+                    overflow = TextOverflow.Ellipsis,
+                    style = MaterialTheme.typography.titleSmall,
+                    maxLines = 1
+                )
 
-            Text(
-                text = getStreamInfoDetail(stream),
-                style = MaterialTheme.typography.bodySmall
-            )
+                Text(text = stream.uploaderName.orEmpty(), style = MaterialTheme.typography.bodySmall)
+
+                Text(
+                    text = getStreamInfoDetail(stream),
+                    style = MaterialTheme.typography.bodySmall
+                )
+            }
+        }
+
+        if (isSelected) {
+            StreamMenu(onDismissPopup)
         }
     }
 }
@@ -59,7 +80,7 @@ private fun StreamListItemPreview(
 ) {
     AppTheme {
         Surface(color = MaterialTheme.colorScheme.background) {
-            StreamListItem(stream, onClick = {})
+            StreamListItem(stream)
         }
     }
 }
diff --git a/app/src/main/java/org/schabi/newpipe/compose/stream/StreamMenu.kt b/app/src/main/java/org/schabi/newpipe/compose/stream/StreamMenu.kt
@@ -0,0 +1,46 @@
+package org.schabi.newpipe.compose.stream
+
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import org.schabi.newpipe.R
+
+@Composable
+fun StreamMenu(onDismissRequest: () -> Unit) {
+    DropdownMenu(expanded = true, onDismissRequest = onDismissRequest) {
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.start_here_on_background)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.start_here_on_popup)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.download)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.add_to_playlist)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.share)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.open_in_browser)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.mark_as_watched)) },
+            onClick = onDismissRequest
+        )
+        DropdownMenuItem(
+            text = { Text(text = stringResource(R.string.show_channel_details)) },
+            onClick = onDismissRequest
+        )
+    }
+}