Add a navigation system to control the page with arrow keys

.eslintrc.cjs

@@ -7,6 +7,7 @@ const a11yOff = Object.keys(require("eslint-plugin-jsx-a11y").rules).reduce(
 );
 
 module.exports = {
+  root: true,
   env: {
     browser: true,
   },

.github/workflows/build_deploy.yml

@@ -0,0 +1,46 @@
+name: Deploy Website
+description: "hope this works now, im building on github actions on the remote machines then deploying on my home server"
+# I should put my ssh private key here in plaintext instead? Seems like the smart thing to do
+
+
+on:
+  push:
+    branches:
+      - production
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install Pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build Project
+        run: pnpm build
+
+      - name: Deploy to server
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc --delete"
+          SOURCE: "dist/"
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          TARGET: "/var/www/html/"
+          EXCLUDE: "/node_modules/"

src/assets/locales/en.json

@@ -1392,8 +1392,11 @@
       "holdToBoostDescription": "Hold spacebar or touch and hold the screen to temporarily increase playback speed to 2x. Release to return to previous speed.",
       "holdToBoostLabel": "Enable hold to boost",
       "doubleClickToSeek": "Double tap to seek",
-      "doubleClickToSeekDescription": "Double tap on the left or right side of the player to seek 10 seconds forward or backward.",
+      "doubleClickToSeekDescription": "Double tap on the /left or right side of the player to seek 10 seconds forward or backward.",
       "doubleClickToSeekLabel": "Enable double tap to seek",
+      "spatialNavigation": "Spatial Navigation",
+      "spatialNavigationDescription": "Enable arrow key/remote navigation",
+      "spatialNavigationLabel": "Enable navigation",
       "keyboardShortcuts": "Keyboard Shortcuts",
       "keyboardShortcutsDescription": "Customize the keyboard shortcuts for the application. Hold ` to show this help anytime",
       "keyboardShortcutsLabel": "Customize Keyboard Shortcuts",

src/components/buttons/Button.tsx

@@ -99,20 +99,26 @@ export function Button(props: Props) {
         rel="noreferrer"
         download={props.download}
         onClick={cb}
+        data-focusable="true"
       >
         {content}
       </a>
     );
 
   if (props.href)
     return (
-      <a className={classes} onClick={cb}>
+      <a className={classes} onClick={cb} data-focusable="true">
         {content}
       </a>
     );
 
   return (
-    <button type="button" onClick={cb} className={classes}>
+    <button
+      type="button"
+      onClick={cb}
+      className={classes}
+      data-focusable="true"
+    >
       {content}
     </button>
   );
@@ -143,7 +149,12 @@ export function ButtonPlain(props: ButtonPlainProps) {
   );
 
   return (
-    <button type="button" onClick={props.onClick} className={classes}>
+    <button
+      type="button"
+      onClick={props.onClick}
+      className={classes}
+      data-focusable="true"
+    >
       {props.children}
     </button>
   );

src/hooks/useGlobalKeyboardEvents.ts

@@ -4,9 +4,9 @@ import { useOverlayStack } from "@/stores/interface/overlayStack";
 
 /**
  * Global keyboard event handler that works across the entire application.
- * Handles Escape key to close modals and other global shortcuts.
+ * Handles Escape key to close modals, navigation keys, and other global shortcuts.
  */
-export function useGlobalKeyboardEvents() {
+export function useGlobalKeyboardEvents(onAction?: (action: string) => void) {
   const { getTopModal, hideModal, showModal } = useOverlayStack();
   const holdTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>();
   const isKeyHeldRef = useRef<boolean>(false);
@@ -21,10 +21,22 @@ export function useGlobalKeyboardEvents() {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      const isNavigationKey =
+        event.key === "ArrowUp" ||
+        event.key === "ArrowDown" ||
+        event.key === "ArrowLeft" ||
+        event.key === "ArrowRight" ||
+        event.key === "Enter" ||
+        event.key === "Backspace" ||
+        event.key === "Escape";
+
       // Don't handle keyboard events if user is typing in an input
       if (
         event.target &&
-        (event.target as HTMLInputElement).nodeName === "INPUT"
+        ((event.target as HTMLElement).nodeName === "INPUT" ||
+          (event.target as HTMLElement).nodeName === "TEXTAREA" ||
+          (event.target as HTMLElement).contentEditable === "true") &&
+        !isNavigationKey
       ) {
         return;
       }
@@ -52,6 +64,40 @@ export function useGlobalKeyboardEvents() {
         const topModal = getTopModal();
         if (topModal) {
           hideModal(topModal);
+        } else if (onAction) {
+          onAction("back");
+        }
+      }
+
+      // Handle navigation and action keys
+      if (onAction) {
+        switch (event.key) {
+          case "ArrowUp":
+            event.preventDefault();
+            onAction("navigate-up");
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            onAction("navigate-down");
+            break;
+          case "ArrowLeft":
+            event.preventDefault();
+            onAction("navigate-left");
+            break;
+          case "ArrowRight":
+            event.preventDefault();
+            onAction("navigate-right");
+            break;
+          case "Enter":
+            event.preventDefault();
+            onAction("confirm");
+            break;
+          case "Backspace":
+            event.preventDefault();
+            onAction("back");
+            break;
+          default:
+            break;
         }
       }
     };
@@ -86,5 +132,11 @@ export function useGlobalKeyboardEvents() {
         clearTimeout(holdTimeoutRef.current);
       }
     };
-  }, [getTopModal, hideModal, showKeyboardCommands, hideKeyboardCommands]);
+  }, [
+    getTopModal,
+    hideModal,
+    showKeyboardCommands,
+    hideKeyboardCommands,
+    onAction,
+  ]);
 }

src/hooks/useProviderScrape.tsx

@@ -1,4 +1,8 @@
-import { FullScraperEvents, RunOutput, ScrapeMedia } from "@jenish094/providers";
+import {
+  FullScraperEvents,
+  RunOutput,
+  ScrapeMedia,
+} from "@jenish094/providers";
 import { RefObject, useCallback, useEffect, useRef, useState } from "react";
 
 import { isExtensionActiveCached } from "@/backend/extension/messaging";