feat: Add volume indicator and scroll handles on entire screen (#443)

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

lib/l10n/app_en.arb

@@ -1317,5 +1317,13 @@
       }
     }
   },
-  "blurred": "Blurred"
+  "blurred": "Blurred",
+  "volumeIndicator": "Volume: {volume}",
+  "@volumeIndicator": {
+    "placeholders": {
+      "volume": {
+        "type": "int"
+      }
+    }
+  }
 }

lib/screens/video_player/components/video_player_volume_indicator.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+
+import 'package:async/async.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:iconsax_plus/iconsax_plus.dart';
+
+import 'package:fladder/providers/settings/video_player_settings_provider.dart';
+import 'package:fladder/util/localization_helper.dart';
+
+class VideoPlayerVolumeIndicator extends ConsumerStatefulWidget {
+  const VideoPlayerVolumeIndicator({super.key});
+
+  @override
+  ConsumerState<ConsumerStatefulWidget> createState() => _VideoPlayerVolumeIndicatorState();
+}
+
+class _VideoPlayerVolumeIndicatorState extends ConsumerState<VideoPlayerVolumeIndicator> {
+  late double currentVolume = ref.read(videoPlayerSettingsProvider.select((value) => value.volume));
+
+  bool showIndicator = false;
+  late final timer = RestartableTimer(const Duration(seconds: 1), () {
+    setState(() {
+      showIndicator = false;
+    });
+  });
+
+  @override
+  void dispose() {
+    showIndicator = false;
+    timer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    ref.listen(
+      videoPlayerSettingsProvider.select((value) => value.volume),
+      (previous, next) {
+        setState(() {
+          showIndicator = true;
+          currentVolume = next;
+        });
+        timer.reset();
+      },
+    );
+    return IgnorePointer(
+      child: AnimatedOpacity(
+        duration: const Duration(milliseconds: 250),
+        opacity: showIndicator ? 1 : 0,
+        child: Center(
+          child: Container(
+            decoration: BoxDecoration(
+              color: Colors.black.withValues(alpha: 0.85),
+              borderRadius: BorderRadius.circular(16),
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                spacing: 12,
+                children: [
+                  Icon(
+                    volumeIcon(currentVolume),
+                  ),
+                  Text(context.localized.volumeIndicator(currentVolume.round()))
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+IconData volumeIcon(double value) {
+  if (value <= 0) {
+    return IconsaxPlusLinear.volume_mute;
+  }
+  if (value < 50) {
+    return IconsaxPlusLinear.volume_low_1;
+  }
+  return IconsaxPlusLinear.volume_high;
+}

lib/screens/video_player/components/video_volume_slider.dart

@@ -80,7 +80,7 @@ IconData volumeIcon(double value) {
     return IconsaxPlusLinear.volume_mute;
   }
   if (value < 50) {
-    return IconsaxPlusLinear.volume_low;
+    return IconsaxPlusLinear.volume_low_1;
   }
   return IconsaxPlusLinear.volume_high;
 }

lib/screens/video_player/video_player_controls.dart

@@ -26,6 +26,7 @@ import 'package:fladder/screens/video_player/components/video_player_controls_ex
 import 'package:fladder/screens/video_player/components/video_player_options_sheet.dart';
 import 'package:fladder/screens/video_player/components/video_player_quality_controls.dart';
 import 'package:fladder/screens/video_player/components/video_player_seek_indicator.dart';
+import 'package:fladder/screens/video_player/components/video_player_volume_indicator.dart';
 import 'package:fladder/screens/video_player/components/video_progress_bar.dart';
 import 'package:fladder/screens/video_player/components/video_volume_slider.dart';
 import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
@@ -71,7 +72,9 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
     final mediaSegments = ref.watch(playBackModel.select((value) => value?.mediaSegments));
     final player = ref.watch(videoPlayerProvider);
     final subtitleWidget = player.subtitleWidget(showOverlay, controlsKey: _bottomControlsKey);
-    return InputHandler(
+    return Listener(
+      onPointerSignal: setVolume,
+      child: InputHandler(
         autoFocus: true,
         keyMap: ref.watch(videoPlayerSettingsProvider.select((value) => value.currentShortcuts)),
         keyMapResult: (result) => _onKey(result),
@@ -121,6 +124,7 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                   ),
                 ),
                 const VideoPlayerSeekIndicator(),
+                const VideoPlayerVolumeIndicator(),
                 Consumer(
                   builder: (context, ref, child) {
                     final position = ref.watch(mediaPlaybackProvider.select((value) => value.position));
@@ -157,6 +161,7 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
             ),
           ),
         ),
+      ),
     );
   }
 
@@ -374,20 +379,9 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                         },
                         if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer &&
                             AdaptiveLayout.viewSizeOf(context) > ViewSize.phone) ...[
-                          Listener(
+                          VideoVolumeSlider(
-                            onPointerSignal: (event) {
-                              if (event is PointerScrollEvent) {
-                                if (event.scrollDelta.dy > 0) {
-                                  ref.read(videoPlayerSettingsProvider.notifier).steppedVolume(-5);
-                                } else {
-                                  ref.read(videoPlayerSettingsProvider.notifier).steppedVolume(5);
-                                }
-                              }
-                            },
-                            child: VideoVolumeSlider(
                             onChanged: () => resetTimer(),
                           ),
-                          ),
                           const FullScreenButton(),
                         ]
                       ].addInBetween(const SizedBox(width: 8)),
@@ -673,6 +667,16 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
     fullScreenHelper.closeFullScreen(ref);
   }
 
+  void setVolume(PointerEvent event) {
+    if (event is PointerScrollEvent) {
+      if (event.scrollDelta.dy > 0) {
+        ref.read(videoPlayerSettingsProvider.notifier).steppedVolume(-5);
+      } else {
+        ref.read(videoPlayerSettingsProvider.notifier).steppedVolume(5);
+      }
+    }
+  }
+
   bool _onKey(VideoHotKeys value) {
     final mediaSegments = ref.read(playBackModel.select((value) => value?.mediaSegments));
     final position = ref.read(mediaPlaybackProvider).position;

lib/util/input_handler.dart

@@ -44,7 +44,7 @@ class _InputHandlerState<T> extends State<InputHandler<T>> {
           focusNode.requestFocus();
         }
       },
-      onKeyEvent: (node, event) => _onKey(event),
+      onKeyEvent: widget.onKeyEvent ?? (node, event) => _onKey(event),
       child: widget.child,
     );
   }