{
@@ -132,7 +135,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
fullscreenButton={true}
navMenu={true}
/>
-
+
{
tabs.length > 0 ?
{
MetaDetails.propTypes = {
urlParams: PropTypes.shape({
+ path: PropTypes.string,
type: PropTypes.string,
id: PropTypes.string,
videoId: PropTypes.string
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 3a02f7c3d..382447f0f 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -7,7 +7,7 @@ const debounce = require('lodash.debounce');
const langs = require('langs');
const { useTranslation } = require('react-i18next');
const { useRouteFocused } = require('stremio-router');
-const { useServices } = require('stremio/services');
+const { useServices, useGamepad } = require('stremio/services');
const { onFileDrop, useSettings, useProfile, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell, usePlatform, onShortcut } = require('stremio/common');
const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');
const BufferingLoader = require('./BufferingLoader');
@@ -33,10 +33,13 @@ const { default: useMediaSession } = require('./useMediaSession');
const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
const findTrackById = (tracks, id) => tracks.find((track) => track.id === id);
+const GAMEPAD_HANDLER_ID = 'player';
+
const Player = ({ urlParams, queryParams }) => {
const { t } = useTranslation();
const services = useServices();
const shell = useShell();
+ const gamepad = useGamepad();
const forceTranscoding = React.useMemo(() => {
return queryParams.has('forceTranscoding');
}, [queryParams]);
@@ -380,6 +383,77 @@ const Player = ({ urlParams, queryParams }) => {
video.addLocalSubtitles(filename, buffer);
});
+ const onPlayPause = React.useCallback(() => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
+ if (video.state.paused) {
+ onPlayRequested();
+ setSeeking(false);
+ } else {
+ onPauseRequested();
+ }
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.paused]);
+
+ const onSeekPrev = React.useCallback((event) => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
+ const seekDuration = event?.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+ const seekTime = video.state.time - seekDuration;
+ setSeeking(true);
+ onSeekRequested(Math.max(seekTime, 0));
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.time]);
+
+ const onSeekNext = React.useCallback((event) => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
+ const seekDuration = event?.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+ setSeeking(true);
+ onSeekRequested(video.state.time + seekDuration);
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.time]);
+
+ const onVolumeUp = React.useCallback(() => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+ onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.volume]);
+
+ const onVolumeDown = React.useCallback(() => {
+ if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+ onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
+ }
+ }, [menusOpen, nextVideoPopupOpen, video.state.volume]);
+
+ const onGamepadSeekAndVol = React.useCallback((axis) => {
+ switch(axis) {
+ case 'left': {
+ onSeekPrev();
+ break;
+ }
+ case 'right': {
+ onSeekNext();
+ break;
+ }
+ case 'up': {
+ onVolumeUp();
+ break;
+ }
+ case 'down': {
+ onVolumeDown();
+ break;
+ }
+ }
+ }, [onSeekPrev, onSeekNext, onVolumeUp, onVolumeDown]);
+
+ React.useEffect(() => {
+ gamepad?.on('buttonA', GAMEPAD_HANDLER_ID, onPlayPause);
+ gamepad?.on('analog', GAMEPAD_HANDLER_ID, onGamepadSeekAndVol);
+
+ return () => {
+ gamepad?.off('buttonA', GAMEPAD_HANDLER_ID);
+ gamepad?.off('analog', GAMEPAD_HANDLER_ID);
+ };
+ }, [onPlayPause, onGamepadSeekAndVol]);
+
React.useEffect(() => {
setError(null);
video.unload();
diff --git a/src/routes/Settings/Interface/Interface.tsx b/src/routes/Settings/Interface/Interface.tsx
index a4b429a56..330d41931 100644
--- a/src/routes/Settings/Interface/Interface.tsx
+++ b/src/routes/Settings/Interface/Interface.tsx
@@ -16,6 +16,7 @@ const Interface = forwardRef(({ profile }: Props, ref) =>
quitOnCloseToggle,
escExitFullscreenToggle,
hideSpoilersToggle,
+ gamepadSupportToggle,
} = useInterfaceOptions(profile);
return (
@@ -50,6 +51,12 @@ const Interface = forwardRef(({ profile }: Props, ref) =>
{...hideSpoilersToggle}
/>
+
);
});
diff --git a/src/routes/Settings/Interface/useInterfaceOptions.ts b/src/routes/Settings/Interface/useInterfaceOptions.ts
index 67780b7e1..94243fd5e 100644
--- a/src/routes/Settings/Interface/useInterfaceOptions.ts
+++ b/src/routes/Settings/Interface/useInterfaceOptions.ts
@@ -81,11 +81,28 @@ const useInterfaceOptions = (profile: Profile) => {
}
}), [profile.settings]);
+ const gamepadSupportToggle = useMemo(() => ({
+ checked: profile.settings.gamepadSupport,
+ onClick: () => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...profile.settings,
+ gamepadSupport: !profile.settings.gamepadSupport
+ }
+ }
+ });
+ }
+ }), [profile.settings]);
+
return {
interfaceLanguageSelect,
escExitFullscreenToggle,
quitOnCloseToggle,
hideSpoilersToggle,
+ gamepadSupportToggle,
};
};
diff --git a/src/services/GamepadContext/GamepadContext.ts b/src/services/GamepadContext/GamepadContext.ts
new file mode 100644
index 000000000..54e6afccb
--- /dev/null
+++ b/src/services/GamepadContext/GamepadContext.ts
@@ -0,0 +1,10 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { createContext } from 'react';
+
+const GamepadContext = createContext<{
+ on: (event: string, id: string, callback: (data?: any) => void) => void;
+ off: (event: string, id: string) => void;
+} | null>(null);
+
+export default GamepadContext;
diff --git a/src/services/GamepadContext/GamepadProvider.tsx b/src/services/GamepadContext/GamepadProvider.tsx
new file mode 100644
index 000000000..3fc315a08
--- /dev/null
+++ b/src/services/GamepadContext/GamepadProvider.tsx
@@ -0,0 +1,184 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import useToast from 'stremio/common/Toast/useToast';
+import GamepadContext from './GamepadContext';
+
+type GamepadEventHandlers = Map void>>;
+
+const GamepadProvider: React.FC<{
+ enabled: boolean;
+ children: React.ReactNode;
+}> = ({ enabled, children }) => {
+ const { t } = useTranslation();
+ const toast = useToast();
+ const connectedGamepads = useRef(0);
+ const lastButtonState = useRef([]);
+ const lastButtonPressedTime = useRef(0);
+ const axisTimer = useRef(0);
+ const eventHandlers = useRef(new Map());
+
+ const on = useCallback((event: string, id: string, callback: (data?: any) => void) => {
+ if (!eventHandlers.current.has(event)) {
+ eventHandlers.current.set(event, new Map());
+ }
+
+ const handlers = eventHandlers.current.get(event)!;
+
+ // Ensure only one handler per component
+ handlers.set(id, callback);
+ }, []);
+
+ const off = useCallback((event: string, id: string) => {
+ const handlersMap = eventHandlers.current.get(event);
+ handlersMap?.delete(id);
+ if (handlersMap?.size === 0) {
+ eventHandlers.current.delete(event);
+ }
+ }, []);
+
+ const emit = (event: string, data?: any) => {
+ if (eventHandlers.current.has(event)) {
+ const handlersMap = eventHandlers.current.get(event)!;
+
+ if (!handlersMap || handlersMap.size === 0) return;
+
+ const latestHandler = Array.from(handlersMap.values()).slice(-1)[0];
+ if (latestHandler) {
+ latestHandler(data);
+ }
+ }
+ };
+
+ const onGamepadConnected = () => {
+ // @ts-expect-error show() expects no arguments
+ toast.show({
+ type: 'info',
+ title: t('GAMEPAD_CONNECTED'),
+ timeout: 4000,
+ });
+ };
+
+ const onGamepadDisconnected = () => {
+ // @ts-expect-error show() expects no arguments
+ toast.show({
+ type: 'info',
+ title: t('GAMEPAD_DISCONNECTED'),
+ timeout: 4000,
+ });
+ };
+
+ useEffect(() => {
+ if (enabled) {
+ window.addEventListener('gamepadconnected', onGamepadConnected);
+ window.addEventListener('gamepaddisconnected', onGamepadDisconnected);
+ }
+
+ return () => {
+ if (enabled) {
+ window.removeEventListener('gamepadconnected', onGamepadConnected);
+ window.removeEventListener('gamepaddisconnected', onGamepadDisconnected);
+ }
+ };
+ }, [enabled]);
+
+ useEffect(() => {
+ if (!enabled || typeof navigator.getGamepads !== 'function') return;
+
+ let animationFrameId: number;
+
+ const updateStatus = () => {
+ if (document.hasFocus()) {
+ const currentTime = Date.now();
+ const controllers = Array.from(navigator.getGamepads()).filter(
+ (gp) => gp !== null
+ ) as Gamepad[];
+
+ connectedGamepads.current = controllers.length;
+
+ controllers.forEach((controller, index) => {
+ const buttonsState = controller.buttons.reduce(
+ (buttons, button, i) => buttons | (button.pressed ? 1 << i : 0),
+ 0
+ );
+
+ const processButton =
+ currentTime - lastButtonPressedTime.current > 250;
+ if (
+ lastButtonState.current[index] !== buttonsState ||
+ processButton
+ ) {
+ lastButtonPressedTime.current = currentTime;
+ lastButtonState.current[index] = buttonsState;
+
+ if (buttonsState & (1 << 0)) emit('buttonA');
+ if (buttonsState & (1 << 1)) emit('buttonB');
+ if (buttonsState & (1 << 2)) emit('buttonX');
+ if (buttonsState & (1 << 3)) emit('buttonY');
+ if (buttonsState & (1 << 4)) emit('buttonLT');
+ if (buttonsState & (1 << 5)) emit('buttonRT');
+ }
+
+ const deadZone = 0.05;
+ const maxSpeed = 100;
+ let axisHandled = false;
+
+ if (controller.axes[0] < -deadZone) {
+ if (
+ currentTime - axisTimer.current >
+ maxSpeed + (2000 - Math.abs(controller.axes[0]) * 2000)
+ ) {
+ emit('analog', 'left');
+ axisHandled = true;
+ }
+ }
+ if (controller.axes[0] > deadZone) {
+ if (
+ currentTime - axisTimer.current >
+ maxSpeed + (2000 - Math.abs(controller.axes[0]) * 2000)
+ ) {
+ emit('analog', 'right');
+ axisHandled = true;
+ }
+ }
+ if (controller.axes[1] < -deadZone) {
+ if (
+ currentTime - axisTimer.current >
+ maxSpeed + (2000 - Math.abs(controller.axes[1]) * 2000)
+ ) {
+ emit('analog', 'up');
+ axisHandled = true;
+ }
+ }
+ if (controller.axes[1] > deadZone) {
+ if (
+ currentTime - axisTimer.current >
+ maxSpeed + (2000 - Math.abs(controller.axes[1]) * 2000)
+ ) {
+ emit('analog', 'down');
+ axisHandled = true;
+ }
+ }
+
+ if (axisHandled) axisTimer.current = currentTime;
+ });
+ }
+ animationFrameId = requestAnimationFrame(updateStatus);
+ };
+
+ animationFrameId = requestAnimationFrame(updateStatus);
+
+ return () => {
+ cancelAnimationFrame(animationFrameId);
+ };
+ }, [enabled]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default GamepadProvider;
diff --git a/src/services/GamepadContext/index.tsx b/src/services/GamepadContext/index.tsx
new file mode 100644
index 000000000..aac999a2f
--- /dev/null
+++ b/src/services/GamepadContext/index.tsx
@@ -0,0 +1,7 @@
+import GamepadProvider from './GamepadProvider';
+import useGamepad from './useGamepad';
+
+export {
+ GamepadProvider,
+ useGamepad
+};
diff --git a/src/services/GamepadContext/useGamepad.tsx b/src/services/GamepadContext/useGamepad.tsx
new file mode 100644
index 000000000..4753e2f81
--- /dev/null
+++ b/src/services/GamepadContext/useGamepad.tsx
@@ -0,0 +1,10 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useContext } from 'react';
+import GamepadContext from './GamepadContext';
+
+const useGamepad = () => {
+ return useContext(GamepadContext);
+};
+
+export default useGamepad;
diff --git a/src/services/GamepadNavigation/index.tsx b/src/services/GamepadNavigation/index.tsx
new file mode 100644
index 000000000..aee93d4ff
--- /dev/null
+++ b/src/services/GamepadNavigation/index.tsx
@@ -0,0 +1,9 @@
+import useContentGamepadNavigation from './useContentGamepadNavigation';
+import useVerticalNavGamepadNavigation from './useVerticalNavGamepadNavigation';
+import useHorizontalNavGamepadNavigation from './useHorizontalNavGamepadNavigation';
+
+export {
+ useContentGamepadNavigation,
+ useVerticalNavGamepadNavigation,
+ useHorizontalNavGamepadNavigation,
+};
diff --git a/src/services/GamepadNavigation/useContentGamepadNavigation.tsx b/src/services/GamepadNavigation/useContentGamepadNavigation.tsx
new file mode 100644
index 000000000..e2823730f
--- /dev/null
+++ b/src/services/GamepadNavigation/useContentGamepadNavigation.tsx
@@ -0,0 +1,122 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useEffect } from 'react';
+import { useGamepad } from '../GamepadContext';
+
+const useContentGamepadNavigation = (
+ sectionRef: React.RefObject,
+ gamepadHandlerId: string
+) => {
+ const gamepad = useGamepad();
+
+ useEffect(() => {
+ const handleGamepadNavigation = (
+ direction: 'left' | 'right' | 'up' | 'down'
+ ) => {
+ const elements = Array.from(
+ sectionRef.current?.querySelectorAll('[tabindex="0"]') || []
+ );
+ if (elements.length === 0) return;
+
+ const activeElement = sectionRef.current?.querySelector(':focus');
+
+ if (!activeElement) {
+ elements[0].focus();
+ return;
+ }
+
+ let closestElement: HTMLDivElement | null = null;
+
+ const currentRect = activeElement.getBoundingClientRect();
+
+ let closestDistance = Infinity;
+
+ elements.forEach((el) => {
+ if (el === activeElement) return;
+ const rect = el.getBoundingClientRect();
+
+ let distance = Infinity;
+
+ switch (direction) {
+ case 'left':
+ if (
+ rect.right <= currentRect.left &&
+ (rect.top === currentRect.top ||
+ (rect.top < currentRect.top && rect.bottom > currentRect.top)
+ )
+ ) {
+ distance = currentRect.left - rect.right;
+ }
+ break;
+ case 'right':
+ if (
+ currentRect.right <= rect.left &&
+ (rect.top === currentRect.top ||
+ (rect.top < currentRect.top && rect.bottom > currentRect.top)
+ )
+ ) {
+ distance = rect.left - currentRect.right;
+ }
+ break;
+ case 'up':
+ if (
+ rect.bottom <= currentRect.top &&
+ (rect.left === currentRect.left ||
+ (rect.left < currentRect.left && rect.right > currentRect.left)
+ )
+ ) {
+ distance = currentRect.top - rect.bottom;
+ }
+ break;
+ case 'down':
+ if (
+ rect.top >= currentRect.bottom &&
+ (rect.left === currentRect.left ||
+ (rect.left < currentRect.left && rect.right > currentRect.left)
+ )
+ ) {
+ distance = rect.top - currentRect.bottom;
+ }
+ break;
+ }
+
+ if (distance < closestDistance) {
+ closestDistance = distance;
+ closestElement = el;
+ }
+ });
+
+ if (closestElement) {
+ closestElement.focus();
+ }
+ };
+
+ const onSelect = () => {
+ const elements = Array.from(
+ sectionRef.current?.querySelectorAll('[tabindex="0"]') || []
+ );
+ if (elements.length === 0) return;
+
+ const activeElement = sectionRef.current?.querySelector(':focus');
+
+ if (!activeElement) {
+ elements[0].focus();
+ return;
+ }
+ const isActiveSelectElement = [activeElement.classList].some((className) => /^select-input/.test(className.toString()));
+ if (!isActiveSelectElement) {
+ activeElement?.click();
+ }
+ };
+
+ gamepad?.on('analog', gamepadHandlerId, handleGamepadNavigation);
+ gamepad?.on('buttonA', gamepadHandlerId, onSelect);
+
+ return () => {
+ gamepad?.off('analog', gamepadHandlerId);
+ gamepad?.off('buttonA', gamepadHandlerId);
+ };
+ }, [gamepad, gamepadHandlerId, sectionRef]);
+};
+
+export default useContentGamepadNavigation;
diff --git a/src/services/GamepadNavigation/useHorizontalNavGamepadNavigation.tsx b/src/services/GamepadNavigation/useHorizontalNavGamepadNavigation.tsx
new file mode 100644
index 000000000..42042e40c
--- /dev/null
+++ b/src/services/GamepadNavigation/useHorizontalNavGamepadNavigation.tsx
@@ -0,0 +1,24 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useEffect } from 'react';
+import { useGamepad } from '../GamepadContext';
+import useFullscreen from 'stremio/common/useFullscreen';
+
+const useHorizontalNavGamepadNavigation = (gamepadHandlerId: string, enableGoBack: boolean) => {
+ const gamepad = useGamepad();
+ const [fullscreen,,,toggleFullscreen] = useFullscreen();
+
+ useEffect(() => {
+ const goBack = () => enableGoBack && window.history.back();
+
+ gamepad?.on('buttonY', gamepadHandlerId, toggleFullscreen as () => void);
+ gamepad?.on('buttonB', gamepadHandlerId, goBack);
+
+ return () => {
+ gamepad?.off('buttonY', gamepadHandlerId);
+ gamepad?.off('buttonB', gamepadHandlerId);
+ };
+ }, [gamepad, gamepadHandlerId, enableGoBack, fullscreen]);
+};
+
+export default useHorizontalNavGamepadNavigation;
diff --git a/src/services/GamepadNavigation/useVerticalNavGamepadNavigation.tsx b/src/services/GamepadNavigation/useVerticalNavGamepadNavigation.tsx
new file mode 100644
index 000000000..a076a6d53
--- /dev/null
+++ b/src/services/GamepadNavigation/useVerticalNavGamepadNavigation.tsx
@@ -0,0 +1,55 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useEffect } from 'react';
+import { useGamepad } from '../GamepadContext';
+
+const useVerticalGamepadNavigation = (sectionRef: React.RefObject, gamepadHandlerId: string) => {
+ const gamepad = useGamepad();
+
+ useEffect(() => {
+ const focusableSelector = 'a';
+ const focusableElements = () =>
+ Array.from(sectionRef.current?.querySelectorAll(focusableSelector) || []);
+
+ const moveFocus = (direction: 'prev' | 'next') => {
+ const route = window.location.hash.replace('#/', '') || 'board';
+ const elements = focusableElements();
+ if (!elements.length || route !== gamepadHandlerId) 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: KeyboardEvent) => {
+ if (!(event as any).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]);
+};
+
+export default useVerticalGamepadNavigation;
diff --git a/src/services/index.js b/src/services/index.js
index 84cfcc8b8..3a3b0128a 100644
--- a/src/services/index.js
+++ b/src/services/index.js
@@ -5,6 +5,7 @@ const Core = require('./Core');
const DragAndDrop = require('./DragAndDrop');
const KeyboardShortcuts = require('./KeyboardShortcuts');
const { ServicesProvider, useServices } = require('./ServicesContext');
+const { GamepadProvider, useGamepad } = require('./GamepadContext');
const Shell = require('./Shell');
module.exports = {
@@ -14,5 +15,7 @@ module.exports = {
KeyboardShortcuts,
ServicesProvider,
useServices,
- Shell
+ Shell,
+ GamepadProvider,
+ useGamepad,
};
diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts
index fad9c2f4b..4bdb22ec5 100644
--- a/src/types/models/Ctx.d.ts
+++ b/src/types/models/Ctx.d.ts
@@ -24,6 +24,7 @@ type Settings = {
interfaceLanguage: string,
quitOnClose: boolean,
hideSpoilers: boolean,
+ gamepadSupport: boolean,
nextVideoNotificationDuration: number,
playInBackground: boolean,
playerType: string | null,