feature: Improved video player stop controls (#146)

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

lib/l10n/app_en.arb

@@ -1072,7 +1072,7 @@
   "subtitleConfiguration": "Subtitle configuration",
   "off": "Off",
   "screenBrightness": "Screen brightness",
-  "scale":"Scale",
+  "scale": "Scale",
   "playBackSettings": "Playback Settings",
   "settingsAutoNextTitle": "Next-up preview",
   "settingsAutoNextDesc": "Displays a next-up preview near the end if another item is queued",
@@ -1091,13 +1091,13 @@
   "@removeFilterForLibrary": {
     "description": "removeFilterForLibrary",
     "placeholders": {
-      "filter":{
+      "filter": {
         "type": "String"
       }
     }
   },
   "deleteFilterConfirmation": "Are you sure you want to delete this filter?",
-  "libraryFiltersLimitReached" : "Filter limit reached (10) remove some filters",
+  "libraryFiltersLimitReached": "Filter limit reached (10) remove some filters",
   "libraryFiltersRemoveAll": "Remove all filters",
   "libraryFiltersRemoveAllConfirm": "This will delete all saved filters for every library",
   "playerSettingsOrientationTitle": "Player orientation",
@@ -1121,5 +1121,9 @@
   "libraryShuffleAndPlayItems": "Shuffle and play items",
   "libraryPlayItems": "Play items",
   "clientSettingsShowAllCollectionsTitle": "Show all collection types",
-  "clientSettingsShowAllCollectionsDesc": "When enabled, show all collection types, including those not supported by Fladder" 
+  "clientSettingsShowAllCollectionsDesc": "When enabled, show all collection types, including those not supported by Fladder",
+  "stop": "Stop",
+  "resumeVideo": "Resume video",
+  "closeVideo": "Close video",
+  "playNextVideo": "Play next video"
 }

lib/screens/book_viewer/book_viewer_controls.dart

@@ -13,7 +13,7 @@ import 'package:fladder/providers/items/book_details_provider.dart';
 import 'package:fladder/providers/settings/book_viewer_settings_provider.dart';
 import 'package:fladder/screens/book_viewer/book_viewer_chapters.dart';
 import 'package:fladder/screens/book_viewer/book_viewer_settings.dart';
-import 'package:fladder/screens/shared/default_titlebar.dart';
+import 'package:fladder/screens/shared/default_title_bar.dart';
 import 'package:fladder/screens/shared/fladder_snackbar.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/input_handler.dart';

lib/screens/photo_viewer/photo_viewer_screen.dart

@@ -10,7 +10,7 @@ import 'package:fladder/providers/user_provider.dart';
 import 'package:fladder/screens/photo_viewer/photo_viewer_controls.dart';
 import 'package:fladder/providers/settings/photo_view_settings_provider.dart';
 import 'package:fladder/screens/photo_viewer/simple_video_player.dart';
-import 'package:fladder/screens/shared/default_titlebar.dart';
+import 'package:fladder/screens/shared/default_title_bar.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/item_base_model/item_base_model_extensions.dart';
 import 'package:fladder/util/list_padding.dart';

lib/screens/video_player/components/video_player_next_wrapper.dart

@@ -1,23 +1,28 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import 'package:ficonsax/ficonsax.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:screen_brightness/screen_brightness.dart';
 
 import 'package:fladder/models/item_base_model.dart';
 import 'package:fladder/models/items/movie_model.dart';
 import 'package:fladder/models/media_playback_model.dart';
 import 'package:fladder/models/playback/playback_model.dart';
 import 'package:fladder/models/settings/video_player_settings.dart';
+import 'package:fladder/providers/settings/client_settings_provider.dart';
 import 'package:fladder/providers/settings/video_player_settings_provider.dart';
 import 'package:fladder/providers/user_provider.dart';
 import 'package:fladder/providers/video_player_provider.dart';
 import 'package:fladder/screens/shared/animated_fade_size.dart';
-import 'package:fladder/screens/shared/default_titlebar.dart';
+import 'package:fladder/screens/shared/default_title_bar.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/fladder_image.dart';
 import 'package:fladder/util/list_padding.dart';
 import 'package:fladder/util/localization_helper.dart';
 import 'package:fladder/widgets/navigation_scaffold/components/floating_player_bar.dart';
+import 'package:fladder/widgets/shared/full_screen_button.dart'
+    if (dart.library.html) 'package:fladder/widgets/shared/full_screen_button_web.dart';
 import 'package:fladder/widgets/shared/progress_floating_button.dart';
 
 class VideoPlayerNextWrapper extends ConsumerStatefulWidget {
@@ -117,6 +122,24 @@ class _VideoPlayerNextWrapperState extends ConsumerState<VideoPlayerNextWrapper>
     });
   }
 
+  Future<void> closePlayer() async {
+    clearOverlaySettings();
+    ref.read(videoPlayerProvider).stop();
+    Navigator.of(context).pop();
+  }
+
+  Future<void> clearOverlaySettings() async {
+    if (AdaptiveLayout.of(context).inputDevice != InputDevice.pointer) {
+      ScreenBrightness().resetScreenBrightness();
+    } else {
+      closeFullScreen();
+    }
+
+    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
+      statusBarIconBrightness: ref.read(clientSettingsProvider.select((value) => value.statusBarBrightness(context))),
+    ));
+  }
+
   @override
   void dispose() {
     timerController.cancel();
@@ -252,9 +275,15 @@ class _VideoPlayerNextWrapperState extends ConsumerState<VideoPlayerNextWrapper>
                                     const SizedBox(width: 8),
                                     IconButton.filledTonal(
                                       onPressed: () => hideNextUp(),
-                                      tooltip: "Resume video",
+                                      tooltip: context.localized.resumeVideo,
                                       icon: const Icon(IconsaxBold.maximize_4),
                                     ),
+                                    const SizedBox(width: 8),
+                                    IconButton.filledTonal(
+                                      onPressed: () => closePlayer(),
+                                      tooltip: context.localized.closeVideo,
+                                      icon: const Icon(IconsaxBold.close_square),
+                                    ),
                                   ],
                                 ),
                               )
@@ -430,7 +459,7 @@ class _SimpleControls extends ConsumerWidget {
           if (skip != null)
             IconButton.filledTonal(
               onPressed: skip,
-              tooltip: "Play next video",
+              tooltip: context.localized.playNextVideo,
               icon: const Icon(IconsaxBold.next),
             )
         ].addInBetween(const SizedBox(width: 4)));

lib/screens/video_player/video_player_controls.dart

@@ -10,8 +10,6 @@ import 'package:collection/collection.dart';
 import 'package:ficonsax/ficonsax.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:screen_brightness/screen_brightness.dart';
-import 'package:universal_html/html.dart' as html;
-import 'package:window_manager/window_manager.dart';
 
 import 'package:fladder/models/items/media_segments_model.dart';
 import 'package:fladder/models/media_playback_model.dart';
@@ -19,7 +17,7 @@ import 'package:fladder/models/playback/playback_model.dart';
 import 'package:fladder/providers/settings/client_settings_provider.dart';
 import 'package:fladder/providers/settings/video_player_settings_provider.dart';
 import 'package:fladder/providers/video_player_provider.dart';
-import 'package:fladder/screens/shared/default_titlebar.dart';
+import 'package:fladder/screens/shared/default_title_bar.dart';
 import 'package:fladder/screens/video_player/components/video_playback_information.dart';
 import 'package:fladder/screens/video_player/components/video_player_controls_extras.dart';
 import 'package:fladder/screens/video_player/components/video_player_options_sheet.dart';
@@ -83,7 +81,7 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
         return true;
       }
       if (value.logicalKey == LogicalKeyboardKey.escape) {
-        disableFullscreen();
+        disableFullScreen();
         return true;
       }
       if (value.logicalKey == LogicalKeyboardKey.space) {
@@ -262,12 +260,17 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                       ),
                     ),
                     const SizedBox(width: 16),
-                    Flexible(
+                    Expanded(
                       child: Text(
                         currentItem?.title ?? "",
                         style: Theme.of(context).textTheme.titleLarge,
                       ),
                     ),
+                    if (AdaptiveLayout.of(context).inputDevice == InputDevice.touch)
+                      Tooltip(
+                          message: context.localized.stop,
+                          child: IconButton(
+                              onPressed: () => closePlayer(), icon: const Icon(IconsaxOutline.close_square))),
                   ],
                 ),
               ),
@@ -375,11 +378,13 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.end,
                       children: [
-                        Tooltip(
+                        if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer)
-                            message: "Stop",
+                          Tooltip(
-                            child: IconButton(onPressed: () => closePlayer(), icon: const Icon(IconsaxOutline.stop))),
+                              message: context.localized.stop,
+                              child: IconButton(
+                                  onPressed: () => closePlayer(), icon: const Icon(IconsaxOutline.close_square))),
                         const Spacer(),
-                        if ((AdaptiveLayout.of(context).isDesktop || kIsWeb) &&
+                        if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer &&
                             ref.read(videoPlayerProvider).player != null) ...{
                           // OpenQueueButton(x),
                           // ChapterButton(
@@ -641,10 +646,10 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
 
   Future<void> clearOverlaySettings() async {
     toggleOverlay(value: true);
-    if (!(AdaptiveLayout.of(context).isDesktop || kIsWeb)) {
+    if (AdaptiveLayout.of(context).inputDevice != InputDevice.pointer) {
       ScreenBrightness().resetScreenBrightness();
     } else {
-      disableFullscreen();
+      disableFullScreen();
     }
 
     SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
@@ -654,18 +659,8 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
     timer.cancel();
   }
 
-  Future<void> disableFullscreen() async {
+  Future<void> disableFullScreen() async {
     resetTimer();
-    if (kIsWeb) {
+    closeFullScreen();
-      if (html.document.fullscreenElement != null) {
-        html.document.exitFullscreen();
-        await Future.delayed(const Duration(milliseconds: 500));
-      }
-    } else {
-      final isFullScreen = await windowManager.isFullScreen();
-      if (isFullScreen) {
-        await windowManager.setFullScreen(false);
-      }
-    }
   }
 }

lib/widgets/navigation_scaffold/components/fladder_appbar.dart

@@ -1,5 +1,5 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:fladder/screens/shared/default_titlebar.dart';
+import 'package:fladder/screens/shared/default_title_bar.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';

lib/widgets/navigation_scaffold/components/floating_player_bar.dart

@@ -15,6 +15,7 @@ import 'package:fladder/screens/video_player/video_player.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/duration_extensions.dart';
 import 'package:fladder/util/list_padding.dart';
+import 'package:fladder/util/localization_helper.dart';
 import 'package:fladder/util/refresh_state.dart';
 
 const videoPlayerHeroTag = "HeroPlayer";
@@ -178,16 +179,16 @@ class _CurrentlyPlayingBarState extends ConsumerState<FloatingPlayerBar> {
                                           : IconsaxBold.volume_high,
                                     ),
                                   ),
-                                  Tooltip(
-                                    message: "Stop playback",
-                                    waitDuration: const Duration(milliseconds: 500),
-                                    child: IconButton(
-                                      onPressed: () async => stopPlayer(),
-                                      icon: const Icon(IconsaxBold.stop),
-                                    ),
-                                  ),
                                 },
-                              ].addInBetween(const SizedBox(width: 8)),
+                                Tooltip(
+                                  message: context.localized.stop,
+                                  waitDuration: const Duration(milliseconds: 500),
+                                  child: IconButton(
+                                    onPressed: () async => stopPlayer(),
+                                    icon: const Icon(IconsaxBold.stop),
+                                  ),
+                                ),
+                              ].addInBetween(const SizedBox(width: 6)),
                             ),
                           ),
                         ),
@@ -196,7 +197,7 @@ class _CurrentlyPlayingBarState extends ConsumerState<FloatingPlayerBar> {
                           backgroundColor: Colors.black.withOpacity(0.25),
                           color: Theme.of(context).colorScheme.primary,
                           value: progress.clamp(0, 1),
-                        )
+                        ),
                       ],
                     ),
                   ),

lib/widgets/shared/full_screen_button.dart

@@ -6,6 +6,13 @@ import 'package:window_manager/window_manager.dart';
 
 import 'package:fladder/providers/video_player_provider.dart';
 
+Future<void> closeFullScreen() async {
+  final isFullScreen = await windowManager.isFullScreen();
+  if (isFullScreen) {
+    await windowManager.setFullScreen(false);
+  }
+}
+
 Future<void> toggleFullScreen(WidgetRef ref) async {
   final isFullScreen = await windowManager.isFullScreen();
   await windowManager.setFullScreen(!isFullScreen);
@@ -21,7 +28,7 @@ class FullScreenButton extends ConsumerWidget {
     return IconButton(
       onPressed: () => toggleFullScreen(ref),
       icon: Icon(
-        fullScreen ? IconsaxOutline.close_square : IconsaxOutline.maximize_4,
+        fullScreen ? IconsaxOutline.screenmirroring : IconsaxOutline.maximize_4,
       ),
     );
   }

lib/widgets/shared/full_screen_button_web.dart

@@ -6,6 +6,13 @@ import 'package:universal_html/html.dart' as html;
 
 import 'package:fladder/providers/video_player_provider.dart';
 
+Future<void> closeFullScreen() async {
+  if (html.document.fullscreenElement != null) {
+    html.document.exitFullscreen();
+    await Future.delayed(const Duration(milliseconds: 500));
+  }
+}
+
 Future<void> toggleFullScreen(WidgetRef ref) async {
   final isFullScreen = html.document.fullscreenElement != null;
 
@@ -30,7 +37,7 @@ class FullScreenButton extends ConsumerWidget {
     return IconButton(
       onPressed: () => toggleFullScreen(ref),
       icon: Icon(
-        fullScreen ? IconsaxOutline.close_square : IconsaxOutline.maximize_4,
+        fullScreen ? IconsaxOutline.screenmirroring : IconsaxOutline.maximize_4,
       ),
     );
   }