feature(Library): Use dialog to ask what to play (#111)

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>

lib/l10n/app_en.arb

@@ -1117,5 +1117,7 @@
   "schemeSettingsRainbow": "Rainbow",
   "schemeSettingsFruitSalad": "Fruit salad",
   "clientSettingsRequireWifiTitle": "Require Wi-Fi",
-  "clientSettingsRequireWifiDesc": "Only download when connected to a Wi-Fi network"
+  "clientSettingsRequireWifiDesc": "Only download when connected to a Wi-Fi network",
+  "libraryShuffleAndPlayItems": "Shuffle and play items",
+  "libraryPlayItems": "Play items"
 }

lib/screens/library_search/library_search_screen.dart

@@ -18,6 +18,7 @@ import 'package:fladder/providers/settings/client_settings_provider.dart';
 import 'package:fladder/providers/video_player_provider.dart';
 import 'package:fladder/screens/collections/add_to_collection.dart';
 import 'package:fladder/screens/library_search/widgets/library_filter_chips.dart';
+import 'package:fladder/screens/library_search/widgets/library_play_options_.dart';
 import 'package:fladder/screens/library_search/widgets/library_saved_filters.dart';
 import 'package:fladder/screens/library_search/widgets/library_sort_dialogue.dart';
 import 'package:fladder/screens/library_search/widgets/library_views.dart';
@@ -171,25 +172,34 @@ class _LibrarySearchScreenState extends ConsumerState<LibrarySearchScreen> {
                 crossAxisAlignment: CrossAxisAlignment.end,
                 mainAxisSize: MainAxisSize.min,
                 children: [
-                  if (librarySearchResults.showPlayButtons)
+                  if (librarySearchResults.activePosters.isNotEmpty)
                     FloatingActionButtonAnimated(
                       key: Key(context.localized.playLabel),
                       isExtended: visible,
                       tooltip: context.localized.playVideos,
-                      onPressed: () async => await libraryProvider.playLibraryItems(context, ref),
+                      onPressed: () async {
+                        if (librarySearchResults.showGalleryButtons && !librarySearchResults.showPlayButtons) {
+                          libraryProvider.viewGallery(context);
+                          return;
+                        } else if (!librarySearchResults.showGalleryButtons && librarySearchResults.showPlayButtons) {
+                          libraryProvider.playLibraryItems(context, ref);
+                          return;
+                        }
+
+                        await showLibraryPlayOptions(
+                          context,
+                          context.localized.libraryPlayItems,
+                          playVideos: librarySearchResults.showPlayButtons
+                              ? () => libraryProvider.playLibraryItems(context, ref)
+                              : null,
+                          viewGallery: librarySearchResults.showGalleryButtons
+                              ? () => libraryProvider.viewGallery(context)
+                              : null,
+                        );
+                      },
                       label: Text(context.localized.playLabel),
                       icon: const Icon(IconsaxBold.play),
                     ),
-                  if (librarySearchResults.showGalleryButtons)
-                    FloatingActionButtonAnimated(
-                      key: Key(context.localized.viewPhotos),
-                      isExtended: visible,
-                      alternate: true,
-                      tooltip: context.localized.viewPhotos,
-                      onPressed: () async => await libraryProvider.viewGallery(context),
-                      label: Text(context.localized.viewPhotos),
-                      icon: const Icon(IconsaxBold.gallery),
-                    )
                 ].addInBetween(const SizedBox(height: 10)),
               ),
             ),
@@ -288,7 +298,7 @@ class _LibrarySearchScreenState extends ConsumerState<LibrarySearchScreen> {
                                       icon: const Icon(IconsaxOutline.refresh),
                                     );
                                     final showSavedFiltersDialogue = ItemActionButton(
-                                      label: Text("Filters"),
+                                      label: Text(context.localized.filter(2)),
                                       action: () => showSavedFilters(context, librarySearchResults, libraryProvider),
                                       icon: const Icon(IconsaxOutline.refresh),
                                     );
@@ -772,43 +782,44 @@ class _LibrarySearchBottomBar extends ConsumerWidget {
                     : const SizedBox(),
               ),
               const Spacer(),
-              IconButton(
-                tooltip: context.localized.random,
-                onPressed: () => libraryProvider.openRandom(context),
-                icon: Card(
-                  color: Theme.of(context).colorScheme.secondary,
-                  child: Padding(
-                    padding: const EdgeInsets.all(2.0),
-                    child: Icon(
-                      IconsaxBold.arrow_up_1,
-                      color: Theme.of(context).colorScheme.onSecondary,
-                    ),
-                  ),
-                ),
-              ),
-              if (librarySearchResults.showGalleryButtons)
+              if (librarySearchResults.activePosters.isNotEmpty)
                 IconButton(
-                  tooltip: context.localized.shuffleGallery,
-                  onPressed: () => libraryProvider.viewGallery(context, shuffle: true),
+                  tooltip: context.localized.random,
+                  onPressed: () => libraryProvider.openRandom(context),
                   icon: Card(
-                    color: Theme.of(context).colorScheme.primary,
+                    color: Theme.of(context).colorScheme.secondary,
                     child: Padding(
                       padding: const EdgeInsets.all(2.0),
                       child: Icon(
-                        IconsaxBold.shuffle,
-                        color: Theme.of(context).colorScheme.onPrimary,
+                        IconsaxBold.arrow_up_1,
+                        color: Theme.of(context).colorScheme.onSecondary,
                       ),
                     ),
                   ),
                 ),
-              if (librarySearchResults.showPlayButtons)
+              if (librarySearchResults.activePosters.isNotEmpty)
                 IconButton(
                   tooltip: context.localized.shuffleVideos,
-                  onPressed: librarySearchResults.activePosters.isNotEmpty
-                      ? () async {
-                          await libraryProvider.playLibraryItems(context, ref, shuffle: true);
-                        }
-                      : null,
+                  onPressed: () async {
+                    if (librarySearchResults.showGalleryButtons && !librarySearchResults.showPlayButtons) {
+                      libraryProvider.viewGallery(context, shuffle: true);
+                      return;
+                    } else if (!librarySearchResults.showGalleryButtons && librarySearchResults.showPlayButtons) {
+                      libraryProvider.playLibraryItems(context, ref, shuffle: true);
+                      return;
+                    }
+
+                    await showLibraryPlayOptions(
+                      context,
+                      context.localized.libraryShuffleAndPlayItems,
+                      playVideos: librarySearchResults.showPlayButtons
+                          ? () => libraryProvider.playLibraryItems(context, ref, shuffle: true)
+                          : null,
+                      viewGallery: librarySearchResults.showGalleryButtons
+                          ? () => libraryProvider.viewGallery(context, shuffle: true)
+                          : null,
+                    );
+                  },
                   icon: const Icon(IconsaxOutline.shuffle),
                 ),
             ],

lib/screens/library_search/widgets/library_play_options_.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'package:fladder/util/list_padding.dart';
+import 'package:fladder/util/localization_helper.dart';
+
+Future<void> showLibraryPlayOptions(
+  BuildContext context,
+  String label, {
+  Function()? playVideos,
+  Function()? viewGallery,
+}) {
+  return showDialog(
+      context: context,
+      builder: (context) => LibraryPlayOptions(
+            label: label,
+            playVideos: playVideos,
+            viewGallery: viewGallery,
+          ));
+}
+
+class LibraryPlayOptions extends ConsumerWidget {
+  final String label;
+  final Function()? playVideos;
+  final Function()? viewGallery;
+  const LibraryPlayOptions({required this.label, required this.playVideos, required this.viewGallery, super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Dialog(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 500),
+        child: Padding(
+          padding: const EdgeInsets.all(12.0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                label,
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
+              const Divider(),
+              Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  if (playVideos != null)
+                    TextButton(
+                      onPressed: () {
+                        Navigator.of(context).pop();
+                        playVideos?.call();
+                      },
+                      child: Text(context.localized.playVideos),
+                    ),
+                  if (viewGallery != null)
+                    TextButton(
+                      onPressed: () {
+                        Navigator.of(context).pop();
+                        viewGallery?.call();
+                      },
+                      child: Text(context.localized.viewPhotos),
+                    )
+                ].addInBetween(const SizedBox(height: 8)),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screens/login/login_user_grid.dart

@@ -1,14 +1,16 @@
-import 'package:ficonsax/ficonsax.dart';
-import 'package:fladder/models/account_model.dart';
-import 'package:fladder/providers/auth_provider.dart';
-import 'package:fladder/screens/shared/user_icon.dart';
-import 'package:fladder/screens/shared/flat_button.dart';
-import 'package:fladder/util/adaptive_layout.dart';
-import 'package:fladder/util/list_padding.dart';
 import 'package:flutter/material.dart';
+
+import 'package:ficonsax/ficonsax.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:reorderable_grid/reorderable_grid.dart';
 
+import 'package:fladder/models/account_model.dart';
+import 'package:fladder/providers/auth_provider.dart';
+import 'package:fladder/screens/shared/flat_button.dart';
+import 'package:fladder/screens/shared/user_icon.dart';
+import 'package:fladder/util/adaptive_layout.dart';
+import 'package:fladder/util/list_padding.dart';
+
 class LoginUserGrid extends ConsumerWidget {
   final List<AccountModel> users;
   final bool editMode;
@@ -41,7 +43,7 @@ class LoginUserGrid extends ConsumerWidget {
             children: [
               Column(
                 mainAxisAlignment: MainAxisAlignment.spaceAround,
-                mainAxisSize: MainAxisSize.max,
+                mainAxisSize: MainAxisSize.min,
                 children: [
                   Flexible(
                     child: UserIcon(