feat(keyboard shortcuts): play/pause on space, seek position on left/right

lib/components/Player/PlayerActions.dart

@@ -79,11 +79,11 @@ class PlayerActions extends HookConsumerWidget {
         if (!kIsWeb)
           if (isInQueue)
             const SizedBox(
+              height: 20,
+              width: 20,
               child: CircularProgressIndicator.adaptive(
                 strokeWidth: 2,
               ),
-              height: 20,
-              width: 20,
             )
           else
             IconButton(

lib/components/Player/PlayerControls.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/hooks/playback.dart';
+import 'package:spotube/models/Intents.dart';
 import 'package:spotube/models/Logger.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/utils/primitive_utils.dart';
@@ -16,17 +18,42 @@ class PlayerControls extends HookConsumerWidget {
 
   final logger = getLogger(PlayerControls);
 
+  static FocusNode focusNode = FocusNode();
+
   @override
   Widget build(BuildContext context, ref) {
+    final shortcuts = useMemoized(
+        () => {
+              const SingleActivator(LogicalKeyboardKey.arrowRight):
+                  SeekIntent(ref, true),
+              const SingleActivator(LogicalKeyboardKey.arrowLeft):
+                  SeekIntent(ref, false),
+            },
+        [ref]);
+    final actions = useMemoized(
+        () => {
+              SeekIntent: SeekAction(),
+            },
+        []);
     final Playback playback = ref.watch(playbackProvider);
 
     final onNext = useNextTrack(ref);
     final onPrevious = usePreviousTrack(ref);
-    final _playOrPause = useTogglePlayPause(ref);
 
     final duration = playback.currentDuration;
 
-    return Container(
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: () {
+        if (focusNode.canRequestFocus) {
+          focusNode.requestFocus();
+        }
+      },
+      child: FocusableActionDetector(
+        focusNode: focusNode,
+        shortcuts: shortcuts,
+        actions: actions,
+        child: Container(
           constraints: const BoxConstraints(maxWidth: 600),
           child: Column(
             children: [
@@ -68,6 +95,7 @@ class PlayerControls extends HookConsumerWidget {
                       return Column(
                         children: [
                           Slider.adaptive(
+                            focusNode: FocusNode(),
                             // cannot divide by zero
                             // there's an edge case for value being bigger
                             // than total duration. Keeping it resolved
@@ -115,7 +143,8 @@ class PlayerControls extends HookConsumerWidget {
                               ? Icons.shuffle_rounded
                               : Icons.repeat_rounded,
                     ),
-                  onPressed: playback.track == null || playback.playlist == null
+                    onPressed:
+                        playback.track == null || playback.playlist == null
                             ? null
                             : playback.cyclePlaybackMode,
                   ),
@@ -138,7 +167,10 @@ class PlayerControls extends HookConsumerWidget {
                                 : Icons.play_arrow_rounded,
                           ),
                     color: iconColor,
-                  onPressed: _playOrPause,
+                    onPressed: Actions.handler<PlayPauseIntent>(
+                      context,
+                      PlayPauseIntent(ref),
+                    ),
                   ),
                   IconButton(
                     icon: const Icon(Icons.skip_next_rounded),
@@ -162,6 +194,9 @@ class PlayerControls extends HookConsumerWidget {
               ),
               const SizedBox(height: 5)
             ],
-        ));
+          ),
+        ),
+      ),
+    );
   }
 }

lib/components/Player/PlayerOverlay.dart

@@ -7,6 +7,7 @@ import 'package:spotube/components/Player/PlayerTrackDetails.dart';
 import 'package:spotube/hooks/playback.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/hooks/usePaletteColor.dart';
+import 'package:spotube/models/Intents.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/UserPreferences.dart';
 
@@ -33,7 +34,6 @@ class PlayerOverlay extends HookConsumerWidget {
 
     final onNext = useNextTrack(ref);
     final onPrevious = usePreviousTrack(ref);
-    final _playOrPause = useTogglePlayPause(ref);
 
     if (!isHome && !isAllowedPage) return Container();
 
@@ -109,7 +109,10 @@ class PlayerOverlay extends HookConsumerWidget {
                                     : Icons.play_arrow_rounded,
                               ),
                               color: paletteColor.bodyTextColor,
-                              onPressed: _playOrPause,
+                              onPressed: Actions.handler<PlayPauseIntent>(
+                                context,
+                                PlayPauseIntent(ref),
+                              ),
                             );
                           },
                         ),

lib/hooks/playback.dart

@@ -1,5 +1,4 @@
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:spotify/spotify.dart';
 import 'package:spotube/models/Logger.dart';
 import 'package:spotube/provider/Playback.dart';
 
@@ -30,24 +29,3 @@ Future<void> Function() usePreviousTrack(WidgetRef ref) {
     }
   };
 }
-
-Future<void> Function([dynamic]) useTogglePlayPause(WidgetRef ref) {
-  return ([key]) async {
-    try {
-      final playback = ref.read(playbackProvider);
-      if (playback.track == null) {
-        return;
-      } else if (playback.track != null &&
-          playback.currentDuration == Duration.zero &&
-          await playback.player.getCurrentPosition() == Duration.zero) {
-        final track = Track.fromJson(playback.track!.toJson());
-        playback.track = null;
-        await playback.play(track);
-      } else {
-        await playback.togglePlayPause();
-      }
-    } catch (e, stack) {
-      logger.e("useTogglePlayPause", e, stack);
-    }
-  };
-}

lib/main.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:audio_service/audio_service.dart';
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hive_flutter/hive_flutter.dart';
@@ -11,6 +12,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotube/components/Shared/ReplaceDownloadedFileDialog.dart';
 import 'package:spotube/entities/CacheTrack.dart';
 import 'package:spotube/models/GoRouteDeclarations.dart';
+import 'package:spotube/models/Intents.dart';
 import 'package:spotube/models/LocalStorageKeys.dart';
 import 'package:spotube/models/Logger.dart';
 import 'package:spotube/provider/AudioPlayer.dart';
@@ -52,7 +54,6 @@ void main() async {
     Builder(
       builder: (context) {
         return ProviderScope(
-          child: const Spotube(),
           overrides: [
             playbackProvider.overrideWithProvider(
               ChangeNotifierProvider(
@@ -123,6 +124,7 @@ void main() async {
               ),
             )
           ],
+          child: const Spotube(),
         );
       },
     ),
@@ -205,6 +207,17 @@ class _SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
         backgroundMaterialColor: backgroundMaterialColor,
       ),
       themeMode: themeMode,
+      shortcuts: {
+        ...WidgetsApp.defaultShortcuts,
+        const SingleActivator(LogicalKeyboardKey.space): PlayPauseIntent(ref),
+        const SingleActivator(LogicalKeyboardKey.comma, control: true):
+            OpenSettingsIntent(_router),
+      },
+      actions: {
+        ...WidgetsApp.defaultActions,
+        PlayPauseIntent: PlayPauseAction(),
+        OpenSettingsIntent: OpenSettingsAction(),
+      },
     );
   }
 }

lib/models/Intents.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Player/PlayerControls.dart';
+import 'package:spotube/models/Logger.dart';
+import 'package:spotube/provider/Playback.dart';
+
+class PlayPauseIntent extends Intent {
+  final WidgetRef ref;
+  const PlayPauseIntent(this.ref);
+}
+
+class PlayPauseAction extends Action<PlayPauseIntent> {
+  final logger = getLogger(PlayPauseAction);
+
+  @override
+  invoke(intent) async {
+    try {
+      if (PlayerControls.focusNode.canRequestFocus) {
+        PlayerControls.focusNode.requestFocus();
+      }
+      final playback = intent.ref.read(playbackProvider);
+      if (playback.track == null) {
+        return null;
+      } else if (playback.track != null &&
+          playback.currentDuration == Duration.zero &&
+          await playback.player.getCurrentPosition() == Duration.zero) {
+        final track = Track.fromJson(playback.track!.toJson());
+        playback.track = null;
+        await playback.play(track);
+      } else {
+        await playback.togglePlayPause();
+      }
+      return null;
+    } catch (e, stack) {
+      logger.e("useTogglePlayPause", e, stack);
+      return null;
+    }
+  }
+}
+
+class OpenSettingsIntent extends Intent {
+  final GoRouter router;
+  const OpenSettingsIntent(this.router);
+}
+
+class OpenSettingsAction extends Action<OpenSettingsIntent> {
+  @override
+  invoke(intent) async {
+    intent.router.push("/settings");
+    FocusManager.instance.primaryFocus?.unfocus();
+    return null;
+  }
+}
+
+class SeekIntent extends Intent {
+  final WidgetRef ref;
+  final bool forward;
+  const SeekIntent(this.ref, this.forward);
+}
+
+class SeekAction extends Action<SeekIntent> {
+  @override
+  invoke(intent) async {
+    final playback = intent.ref.read(playbackProvider);
+    if ((playback.playlist == null && playback.track == null) ||
+        playback.status == PlaybackStatus.loading) {
+      DirectionalFocusAction().invoke(
+        DirectionalFocusIntent(
+          intent.forward ? TraversalDirection.right : TraversalDirection.left,
+        ),
+      );
+      return null;
+    }
+    final position =
+        (await playback.player.getCurrentPosition() ?? Duration.zero).inSeconds;
+    await playback.seekPosition(
+      Duration(
+        seconds: intent.forward ? position + 5 : position - 5,
+      ),
+    );
+    return null;
+  }
+}