Merge pull request #2 from OpenMediaStation/lna/seek-bar-tv-focus

Lna/seek bar tv focus
OpenMediaStation · Oct 21, 2024 · dc6c4b3 · dc6c4b3
2 parents 55bb9c6 + a80608b
commit dc6c4b3
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 20 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
     "cSpell.words": [
         "autofocus",
+        "Focusable",
         "fullscreen"
     ],
     "cmake.sourceDirectory": "/home/lna-dev/Documents/Repos/OpenMediaStation.FE.MovieTV/windows/runner"

diff --git a/lib/player_controls/material_tv.dart b/lib/player_controls/material_tv.dart
@@ -372,8 +372,7 @@ class _MaterialTvVideoControls extends StatefulWidget {
 }
 
 /// {@macro material_desktop_video_controls}
-class _MaterialTvVideoControlsState
-    extends State<_MaterialTvVideoControls> {
+class _MaterialTvVideoControlsState extends State<_MaterialTvVideoControls> {
   late bool mount = _theme(context).visibleOnMount;
   late bool visible = _theme(context).visibleOnMount;
 
@@ -891,22 +890,64 @@ class MaterialTvSeekBarState extends State<MaterialTvSeekBar> {
     }
   }
 
+  FocusNode focusNode = FocusNode();
+  FocusNode focusNode2 = FocusNode();
+
   @override
   Widget build(BuildContext context) {
-    return Container(
-      clipBehavior: Clip.none,
-      margin: _theme(context).seekBarMargin,
-      child: LayoutBuilder(
-        builder: (context, constraints) => MouseRegion(
-          cursor: SystemMouseCursors.click,
-          onHover: (e) => onHover(e, constraints),
-          onEnter: (e) => onEnter(e, constraints),
-          onExit: (e) => onExit(e, constraints),
-          child: Listener(
-            onPointerMove: (e) => onPointerMove(e, constraints),
-            onPointerDown: (e) => onPointerDown(),
-            onPointerUp: (e) => onPointerUp(),
-            child: Container(
+    return FocusableActionDetector(
+      focusNode: focusNode, // Create a FocusNode to manage focus
+      autofocus: false, // Automatically focus when the widget appears
+      onFocusChange: (focused) {
+        // Handle focus changes
+        setState(() {
+          hover = focused; // Example: show hover effect when focused
+        });
+
+        if (focused) {
+          focusNode2.requestFocus();
+        }
+      },
+      child: Focus(
+        focusNode: focusNode2,
+        onKeyEvent: (node, event) {
+          if (event is KeyDownEvent) {
+            if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
+              double percent = 0.01;
+
+              double sliderPercent =
+                  (positionPercent + percent).clamp(0.0, 1.0);
+
+              setState(() {
+                hover = true;
+                slider = sliderPercent;
+              });
+              controller(context).player.seek(duration * slider);
+
+              return KeyEventResult.handled;
+            } else if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
+              double percent = 0.01;
+
+              double sliderPercent =
+                  (positionPercent - percent).clamp(0.0, 1.0);
+
+              setState(() {
+                hover = true;
+                slider = sliderPercent;
+              });
+              controller(context).player.seek(duration * slider);
+
+              return KeyEventResult.handled;
+            }
+          }
+
+          return KeyEventResult.ignored;
+        },
+        child: Container(
+          clipBehavior: Clip.none,
+          margin: _theme(context).seekBarMargin,
+          child: LayoutBuilder(
+            builder: (context, constraints) => Container(
               color: const Color(0x00000000),
               width: constraints.maxWidth,
               height: _theme(context).seekBarContainerHeight,
@@ -1225,12 +1266,10 @@ class MaterialTvVolumeButton extends StatefulWidget {
   });
 
   @override
-  MaterialTvVolumeButtonState createState() =>
-      MaterialTvVolumeButtonState();
+  MaterialTvVolumeButtonState createState() => MaterialTvVolumeButtonState();
 }
 
-class MaterialTvVolumeButtonState
-    extends State<MaterialTvVolumeButton>
+class MaterialTvVolumeButtonState extends State<MaterialTvVolumeButton>
     with SingleTickerProviderStateMixin {
   late double volume = controller(context).player.state.volume;