From 476f2f85517e787b9eb3ee951d983f6debf5bfdf Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 26 Mar 2025 19:00:55 +0200
Subject: [PATCH] feat(useVerticalSpatialNav): added hook for enabling spatial
 nav on vertical navigation

---
 src/components/MainNavBars/MainNavBars.tsx    | 10 +++-
 .../NavBar/VerticalNavBar/VerticalNavBar.js   |  6 +-
 .../useSpatialNavigation.tsx                  | 56 +++++++++++++++++++
 3 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 src/services/SpatialNavigation/useSpatialNavigation.tsx

diff --git a/src/components/MainNavBars/MainNavBars.tsx b/src/components/MainNavBars/MainNavBars.tsx
index 43d08f5c8..fed1668a2 100644
--- a/src/components/MainNavBars/MainNavBars.tsx
+++ b/src/components/MainNavBars/MainNavBars.tsx
@@ -1,9 +1,10 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import classnames from 'classnames';
 import { VerticalNavBar, HorizontalNavBar } from 'stremio/components/NavBar';
 import styles from './MainNavBars.less';
+import { useGamepad, useVerticalSpatialNavigation } from 'stremio/services';
 
 const TABS = [
     { id: 'board', label: 'Board', icon: 'home', href: '#/' },
@@ -21,7 +22,13 @@ type Props = {
     children?: React.ReactNode,
 };
 
+const GAMEPAD_HANDLER_ID = 'vertical-nav';
+
 const MainNavBars = memo(({ className, route, query, children }: Props) => {
+    const navRef = React.useRef(null);
+
+    useVerticalSpatialNavigation(navRef, GAMEPAD_HANDLER_ID);
+
     return (
         <div className={classnames(className, styles['main-nav-bars-container'])}>
             <HorizontalNavBar
@@ -34,6 +41,7 @@ const MainNavBars = memo(({ className, route, query, children }: Props) => {
                 navMenu={true}
             />
             <VerticalNavBar
+                ref={navRef}
                 className={styles['vertical-nav-bar']}
                 selected={route}
                 tabs={TABS}
diff --git a/src/components/NavBar/VerticalNavBar/VerticalNavBar.js b/src/components/NavBar/VerticalNavBar/VerticalNavBar.js
index 4ba4b5d75..c8787b3f2 100644
--- a/src/components/NavBar/VerticalNavBar/VerticalNavBar.js
+++ b/src/components/NavBar/VerticalNavBar/VerticalNavBar.js
@@ -7,10 +7,10 @@ const { useTranslation } = require('react-i18next');
 const NavTabButton = require('./NavTabButton');
 const styles = require('./styles');
 
-const VerticalNavBar = React.memo(({ className, selected, tabs }) => {
+const VerticalNavBar = React.memo(React.forwardRef(({ className, selected, tabs }, ref) => {
     const { t } = useTranslation();
     return (
-        <nav className={classnames(className, styles['vertical-nav-bar-container'])}>
+        <nav ref={ref} className={classnames(className, styles['vertical-nav-bar-container'])}>
             {
                 Array.isArray(tabs) ?
                     tabs.map((tab, index) => (
@@ -30,7 +30,7 @@ const VerticalNavBar = React.memo(({ className, selected, tabs }) => {
             }
         </nav>
     );
-});
+}));
 
 VerticalNavBar.displayName = 'VerticalNavBar';
 
diff --git a/src/services/SpatialNavigation/useSpatialNavigation.tsx b/src/services/SpatialNavigation/useSpatialNavigation.tsx
new file mode 100644
index 000000000..2bd8c2a7c
--- /dev/null
+++ b/src/services/SpatialNavigation/useSpatialNavigation.tsx
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { useGamepad } from '../GamepadContext';
+
+const useVerticalSpatialNavigation = (sectionRef: React.RefObject<HTMLDivElement>, gamepadHandlerId: string) => {
+    const gamepad = useGamepad();
+
+    useEffect(() => {
+        const focusableSelector = 'a';
+        const focusableElements = () =>
+            Array.from(sectionRef.current?.querySelectorAll(focusableSelector) || []);
+
+        const moveFocus = (direction: 'prev' | 'next') => {
+            const elements = focusableElements();
+            if (!elements.length) return;
+
+            const currentIndex = elements.findIndex((item) => item.classList.contains('selected'));
+
+            let nextIndex = currentIndex;
+
+            if (direction === 'next')
+                nextIndex = (elements.length + currentIndex + 1) % elements.length;
+            if (direction === 'prev')
+                nextIndex = (elements.length + currentIndex - 1) % elements.length;
+
+            elements[nextIndex]?.click();
+        };
+
+        const handleKeyDown = (event) => {
+            if (!event.nativeEvent?.spatialNavigationPrevented) {
+                switch (event.key) {
+                    case 'Tab':
+                        moveFocus('next');
+                        break;
+                    default:
+                        break;
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        gamepad?.on('buttonLT', gamepadHandlerId, () => moveFocus('prev'));
+        gamepad?.on('buttonRT', gamepadHandlerId, () => moveFocus('next'));
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            gamepad?.off('buttonLT', gamepadHandlerId);
+            gamepad?.off('buttonRT', gamepadHandlerId);
+        };
+    }, [gamepad, sectionRef]);
+
+    return sectionRef;
+};
+
+export {
+    useVerticalSpatialNavigation,
+};