Add confirmation dialog for clearing watch history

Author: Isira-Seneviratne

app/src/main/java/org/schabi/newpipe/ui/screens/HistoryScreen.kt

@@ -6,15 +6,14 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.PlaylistPlay
 import androidx.compose.material.icons.filled.ClearAll
 import androidx.compose.material.icons.filled.Headphones
 import androidx.compose.material.icons.filled.PictureInPicture
+import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
@@ -24,6 +23,7 @@ import androidx.compose.material3.MenuAnchorType
 import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TooltipBox
 import androidx.compose.material3.TooltipDefaults
@@ -93,20 +93,20 @@ private fun HistoryHeader(
     onClickPlayAll: () -> Unit,
     onClickPopup: () -> Unit
 ) {
-    var expanded by remember { mutableStateOf(false) }
-    val selected = when (sortKey) {
-        SortKey.MOST_PLAYED -> R.string.title_most_played
-        SortKey.LAST_PLAYED -> R.string.title_last_played
-    }
-
     Column(
         modifier = Modifier
             .fillMaxWidth()
             .padding(12.dp),
-        verticalArrangement = Arrangement.Center,
+        verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Row(verticalAlignment = Alignment.CenterVertically) {
+            var expanded by remember { mutableStateOf(false) }
+            val selected = when (sortKey) {
+                SortKey.MOST_PLAYED -> R.string.title_most_played
+                SortKey.LAST_PLAYED -> R.string.title_last_played
+            }
+
             ExposedDropdownMenuBox(
                 expanded = expanded,
                 onExpandedChange = { expanded = it },
@@ -119,7 +119,7 @@ private fun HistoryHeader(
                     onValueChange = {},
                     trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
                     colors = ExposedDropdownMenuDefaults.textFieldColors(),
-                    label = { Text(text = stringResource(R.string.history_sort_label)) }
+                    label = { Text(text = stringResource(R.string.history_sort_label)) },
                 )
 
                 ExposedDropdownMenu(
@@ -131,14 +131,14 @@ private fun HistoryHeader(
                         onClick = {
                             expanded = false
                             onSelectSortKey(SortKey.MOST_PLAYED)
-                        }
+                        },
                     )
                     DropdownTextMenuItem(
                         text = R.string.title_last_played,
                         onClick = {
                             expanded = false
                             onSelectSortKey(SortKey.LAST_PLAYED)
-                        }
+                        },
                     )
                 }
             }
@@ -150,39 +150,69 @@ private fun HistoryHeader(
                 },
                 state = rememberTooltipState(),
             ) {
-                IconButton(onClick = onClickClear) {
+                var openClearDialog by remember { mutableStateOf(false) }
+
+                IconButton(onClick = { openClearDialog = true }) {
                     Icon(
                         imageVector = Icons.Default.ClearAll,
                         contentDescription = stringResource(R.string.clear_history_description),
                     )
                 }
+
+                ClearHistoryDialog(openClearDialog, onClickClear, onDismissRequest = { openClearDialog = false })
             }
         }
 
-        Spacer(Modifier.height(12.dp))
-
         FlowRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
             IconButtonWithLabel(
                 icon = Icons.Default.Headphones,
                 label = R.string.controls_background_title,
-                onClick = onClickBackground
+                onClick = onClickBackground,
             )
 
             IconButtonWithLabel(
                 icon = Icons.AutoMirrored.Filled.PlaylistPlay,
                 label = R.string.play_all,
-                onClick = onClickPlayAll
+                onClick = onClickPlayAll,
             )
 
             IconButtonWithLabel(
                 icon = Icons.Default.PictureInPicture,
                 label = R.string.controls_popup_title,
-                onClick = onClickPopup
+                onClick = onClickPopup,
             )
         }
     }
 }
 
+@Composable
+private fun ClearHistoryDialog(
+    openClearDialog: Boolean,
+    onClickClear: () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+    if (openClearDialog) {
+        AlertDialog(
+            onDismissRequest = onDismissRequest,
+            title = { Text(text = stringResource(R.string.delete_view_history_alert)) },
+            text = { Text(text = stringResource(R.string.delete_view_history_description)) },
+            confirmButton = {
+                TextButton(onClick = {
+                    onClickClear()
+                    onDismissRequest()
+                }) {
+                    Text(stringResource(R.string.delete))
+                }
+            },
+            dismissButton = {
+                TextButton(onClick = onDismissRequest) {
+                    Text(stringResource(R.string.cancel))
+                }
+            },
+        )
+    }
+}
+
 @Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable

app/src/main/res/values/strings.xml

@@ -215,6 +215,7 @@
     <string name="clear_views_history_title">Clear watch history</string>
     <string name="clear_views_history_summary">Deletes the history of played streams and the playback positions</string>
     <string name="delete_view_history_alert">Delete entire watch history?</string>
+    <string name="delete_view_history_description">Your watching history will be permanently erased</string>
     <string name="watch_history_deleted">Watch history deleted</string>
     <string name="clear_playback_states_title">Delete playback positions</string>
     <string name="clear_playback_states_summary">Deletes all playback positions</string>