fixes

1. Player.js — Added optional chaining (gamepad?.on/gamepad?.off) to prevent null crash
  2. GamepadProvider.tsx — Toast messages now use t('GAMEPAD_CONNECTED') / t('GAMEPAD_DISCONNECTED') via i18next, added keys to en-US.json
  3. useVerticalNavGamepadNavigation.tsx — Fixed event.nativeEvent?.spatialNavigationPrevented → event.spatialNavigationPrevented (native DOM events don't have nativeEvent)
  4. GamepadProvider.tsx — Changed connectedGamepads from useState to useRef to avoid rAF effect restart cycle, removed it from effect deps, simplified the enabled guard

src/routes/Player/Player.js

@@ -445,12 +445,12 @@ const Player = ({ urlParams, queryParams }) => {
     }, [onSeekPrev, onSeekNext, onVolumeUp, onVolumeDown]);
 
     React.useEffect(() => {
-        gamepad.on('buttonA', GAMEPAD_HANDLER_ID, onPlayPause);
+        gamepad?.on('buttonA', GAMEPAD_HANDLER_ID, onPlayPause);
-        gamepad.on('analog', GAMEPAD_HANDLER_ID, onGamepadSeekAndVol);
+        gamepad?.on('analog', GAMEPAD_HANDLER_ID, onGamepadSeekAndVol);
 
         return () => {
-            gamepad.off('buttonA', GAMEPAD_HANDLER_ID);
+            gamepad?.off('buttonA', GAMEPAD_HANDLER_ID);
-            gamepad.off('analog', GAMEPAD_HANDLER_ID);
+            gamepad?.off('analog', GAMEPAD_HANDLER_ID);
         };
     }, [onPlayPause, onGamepadSeekAndVol]);
 

src/routes/Settings/Interface/Interface.tsx

@@ -16,6 +16,7 @@ const Interface = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) =>
         quitOnCloseToggle,
         escExitFullscreenToggle,
         hideSpoilersToggle,
+        gamepadSupportToggle,
     } = useInterfaceOptions(profile);
 
     return (
@@ -50,6 +51,12 @@ const Interface = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) =>
                     {...hideSpoilersToggle}
                 />
             </Option>
+            <Option label={'SETTINGS_GAMEPAD'}>
+                <Toggle
+                    tabIndex={-1}
+                    {...gamepadSupportToggle}
+                />
+            </Option>
         </Section>
     );
 });

src/services/GamepadContext/GamepadProvider.tsx

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2025 Smart code 203358507
 
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import useToast from 'stremio/common/Toast/useToast';
 import GamepadContext from './GamepadContext';
 
@@ -10,8 +11,9 @@ const GamepadProvider: React.FC<{
     enabled: boolean;
     children: React.ReactNode;
 }> = ({ enabled, children }) => {
+    const { t } = useTranslation();
     const toast = useToast();
-    const [connectedGamepads, setConnectedGamepads] = useState<number>(0);
+    const connectedGamepads = useRef<number>(0);
     const lastButtonState = useRef<number[]>([]);
     const lastButtonPressedTime = useRef<number>(0);
     const axisTimer = useRef<number>(0);
@@ -53,7 +55,7 @@ const GamepadProvider: React.FC<{
         // @ts-expect-error show() expects no arguments
         toast.show({
             type: 'info',
-            title: 'Gamepad detected',
+            title: t('GAMEPAD_CONNECTED'),
             timeout: 4000,
         });
     };
@@ -62,7 +64,7 @@ const GamepadProvider: React.FC<{
         // @ts-expect-error show() expects no arguments
         toast.show({
             type: 'info',
-            title: 'Gamepad disconnected',
+            title: t('GAMEPAD_DISCONNECTED'),
             timeout: 4000,
         });
     };
@@ -82,10 +84,9 @@ const GamepadProvider: React.FC<{
     }, [enabled]);
 
     useEffect(() => {
-        if (typeof navigator.getGamepads !== 'function') return;
+        if (!enabled || typeof navigator.getGamepads !== 'function') return;
 
         let animationFrameId: number;
-        if (enabled) {
 
         const updateStatus = () => {
             if (document.hasFocus()) {
@@ -94,9 +95,7 @@ const GamepadProvider: React.FC<{
                     (gp) => gp !== null
                 ) as Gamepad[];
 
-                    if (controllers.length !== connectedGamepads) {
+                connectedGamepads.current = controllers.length;
-                        setConnectedGamepads(controllers.length);
-                    }
 
                 controllers.forEach((controller, index) => {
                     const buttonsState = controller.buttons.reduce(
@@ -169,14 +168,11 @@ const GamepadProvider: React.FC<{
         };
 
         animationFrameId = requestAnimationFrame(updateStatus);
-        }
 
         return () => {
-            if (enabled) {
             cancelAnimationFrame(animationFrameId);
-            }
         };
-    }, [connectedGamepads, enabled]);
+    }, [enabled]);
 
     return (
         <GamepadContext.Provider value={{ on, off }}>

src/services/GamepadNavigation/useVerticalNavGamepadNavigation.tsx

@@ -28,8 +28,8 @@ const useVerticalGamepadNavigation = (sectionRef: React.RefObject<HTMLDivElement
             elements[nextIndex]?.click();
         };
 
-        const handleKeyDown = (event) => {
+        const handleKeyDown = (event: KeyboardEvent) => {
-            if (!event.nativeEvent?.spatialNavigationPrevented) {
+            if (!(event as any).spatialNavigationPrevented) {
                 switch (event.key) {
                     case 'Tab':
                         moveFocus('next');