feature(Desktop: Added seek indicator (#80)

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

lib/screens/video_player/components/video_player_seek_indicator.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:async/async.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'package:fladder/providers/video_player_provider.dart';
+import 'package:fladder/util/localization_helper.dart';
+
+class VideoPlayerSeekIndicator extends ConsumerStatefulWidget {
+  const VideoPlayerSeekIndicator({super.key});
+
+  @override
+  ConsumerState<ConsumerStatefulWidget> createState() => _VideoPlayerSeekIndicatorState();
+}
+
+class _VideoPlayerSeekIndicatorState extends ConsumerState<VideoPlayerSeekIndicator> {
+  RestartableTimer? timer;
+
+  bool visible = false;
+  int seekPosition = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    ServicesBinding.instance.keyboard.addHandler(_onKey);
+  }
+
+  @override
+  void dispose() {
+    ServicesBinding.instance.keyboard.removeHandler(_onKey);
+    super.dispose();
+  }
+
+  void onSeekEnd() {
+    setState(() {
+      visible = false;
+    });
+    timer?.cancel();
+    timer = null;
+    if (seekPosition == 0) return;
+    final mediaPlayback = ref.read(mediaPlaybackProvider);
+    final newPosition = (mediaPlayback.position.inSeconds + seekPosition).clamp(0, mediaPlayback.duration.inSeconds);
+    ref.read(videoPlayerProvider).seek(Duration(seconds: newPosition));
+  }
+
+  void onSeekStart(int value) {
+    if (timer == null) {
+      timer = RestartableTimer(const Duration(seconds: 2), () => onSeekEnd());
+      setState(() {
+        seekPosition = 0;
+      });
+    } else {
+      timer?.reset();
+    }
+    setState(() {
+      visible = true;
+      seekPosition += value;
+    });
+  }
+
+  bool _onKey(KeyEvent value) {
+    if (value is KeyRepeatEvent) {
+      if (value.logicalKey == LogicalKeyboardKey.arrowLeft) {
+        seekBack();
+        return true;
+      }
+      if (value.logicalKey == LogicalKeyboardKey.arrowRight) {
+        seekForward();
+        return true;
+      }
+    }
+    if (value is KeyDownEvent) {
+      if (value.logicalKey == LogicalKeyboardKey.arrowLeft) {
+        seekBack();
+        return true;
+      }
+      if (value.logicalKey == LogicalKeyboardKey.arrowRight) {
+        seekForward();
+        return true;
+      }
+    }
+    return false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return IgnorePointer(
+      child: AnimatedOpacity(
+        duration: const Duration(milliseconds: 500),
+        opacity: (visible && seekPosition != 0) ? 1 : 0,
+        child: Center(
+          child: Container(
+            decoration: BoxDecoration(
+              color: Colors.black.withOpacity(0.85),
+              borderRadius: BorderRadius.circular(16),
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    seekPosition > 0
+                        ? "+$seekPosition ${context.localized.seconds(seekPosition)}"
+                        : "$seekPosition ${context.localized.seconds(seekPosition)}",
+                    style: Theme.of(context).textTheme.bodyMedium,
+                  )
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void seekBack({int seconds = -10}) => onSeekStart(seconds);
+  void seekForward({int seconds = 30}) => onSeekStart(seconds);
+}

lib/screens/video_player/video_player_controls.dart

@@ -23,6 +23,7 @@ import 'package:fladder/screens/shared/default_titlebar.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';
+import 'package:fladder/screens/video_player/components/video_player_seek_indicator.dart';
 import 'package:fladder/screens/video_player/components/video_progress_bar.dart';
 import 'package:fladder/screens/video_player/components/video_subtitles.dart';
 import 'package:fladder/screens/video_player/components/video_volume_slider.dart';
@@ -86,12 +87,6 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
       if (value.logicalKey == LogicalKeyboardKey.space) {
         ref.read(videoPlayerProvider).playOrPause();
       }
-      if (value.logicalKey == LogicalKeyboardKey.arrowLeft) {
-        seekBack(ref);
-      }
-      if (value.logicalKey == LogicalKeyboardKey.arrowRight) {
-        seekForward(ref);
-      }
       if (value.logicalKey == LogicalKeyboardKey.keyF) {
         toggleFullScreen(ref);
       }
@@ -172,6 +167,7 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                     ),
                   ),
                 ),
+                const VideoPlayerSeekIndicator(),
                 Consumer(
                   builder: (context, ref, child) {
                     final position = ref.watch(mediaPlaybackProvider.select((value) => value.position));