feat(useVerticalSpatialNav): added hook for enabling spatial nav on vertical navigation

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}

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';
 

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,
+};