Merge fea8e63704 into da675cd56c

Player: Add mute shortcut

package.json

@@ -41,7 +41,7 @@
         "react-i18next": "^15.1.3",
         "react-is": "18.3.1",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "github:Stremio/stremio-translations#01aaa201e419782b26b9f2cbe4430795021426e5",
+        "stremio-translations": "github:Stremio/stremio-translations#0e7fbd8522148f5727ac6adee3b2eb96132c10ac",
         "url": "0.11.4",
         "use-long-press": "^3.2.0"
     },

pnpm-lock.yaml

@@ -90,8 +90,8 @@ importers:
         specifier: github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6
         version: https://codeload.github.com/Stremio/spatial-navigation/tar.gz/64871b1422466f5f45d24ebc8bbd315b2ebab6a6
       stremio-translations:
-        specifier: github:Stremio/stremio-translations#01aaa201e419782b26b9f2cbe4430795021426e5
-        version: https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5
+        specifier: github:Stremio/stremio-translations#0e7fbd8522148f5727ac6adee3b2eb96132c10ac
+        version: https://codeload.github.com/Stremio/stremio-translations/tar.gz/0e7fbd8522148f5727ac6adee3b2eb96132c10ac
       url:
         specifier: 0.11.4
         version: 0.11.4
@@ -1808,8 +1808,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.7:
-    resolution: {integrity: sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==}
+  baseline-browser-mapping@2.9.14:
+    resolution: {integrity: sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==}
     hasBin: true
 
   batch@0.6.1:
@@ -1907,8 +1907,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001745:
-    resolution: {integrity: sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==}
+  caniuse-lite@1.0.30001763:
+    resolution: {integrity: sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==}
 
   centra@2.7.0:
     resolution: {integrity: sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==}
@@ -4527,9 +4527,9 @@ packages:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5:
-    resolution: {tarball: https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5}
-    version: 1.44.13
+  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/0e7fbd8522148f5727ac6adee3b2eb96132c10ac:
+    resolution: {tarball: https://codeload.github.com/Stremio/stremio-translations/tar.gz/0e7fbd8522148f5727ac6adee3b2eb96132c10ac}
+    version: 1.44.14
 
   string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
@@ -7125,7 +7125,7 @@ snapshots:
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
       browserslist: 4.26.2
-      caniuse-lite: 1.0.30001745
+      caniuse-lite: 1.0.30001763
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -7226,7 +7226,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.7: {}
+  baseline-browser-mapping@2.9.14: {}
 
   batch@0.6.1: {}
 
@@ -7277,8 +7277,8 @@ snapshots:
 
   browserslist@4.26.2:
     dependencies:
-      baseline-browser-mapping: 2.8.7
-      caniuse-lite: 1.0.30001745
+      baseline-browser-mapping: 2.9.14
+      caniuse-lite: 1.0.30001763
       electron-to-chromium: 1.5.224
       node-releases: 2.0.21
       update-browserslist-db: 1.1.3(browserslist@4.26.2)
@@ -7338,11 +7338,11 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.26.2
-      caniuse-lite: 1.0.30001745
+      caniuse-lite: 1.0.30001763
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001745: {}
+  caniuse-lite@1.0.30001763: {}
 
   centra@2.7.0:
     dependencies:
@@ -10283,7 +10283,7 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5: {}
+  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/0e7fbd8522148f5727ac6adee3b2eb96132c10ac: {}
 
   string-length@4.0.2:
     dependencies:

src/common/CONSTANTS.js

@@ -65,7 +65,7 @@ const EXTERNAL_PLAYERS = [
     {
         label: 'VLC',
         value: 'vlc',
-        platforms: ['ios', 'visionos', 'android'],
+        platforms: ['ios', 'visionos', 'android', 'windows', 'linux', 'macos'],
     },
     {
         label: 'MPV',

src/common/Shortcuts/Shortcuts.tsx

@@ -1,13 +1,15 @@
-import React, { createContext, useCallback, useContext, useEffect } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
 import shortcuts from './shortcuts.json';
 
 const SHORTCUTS = shortcuts.map(({ shortcuts }) => shortcuts).flat();
 
 export type ShortcutName = string;
-export type ShortcutListener = () => void;
+export type ShortcutListener = (combo: number) => void;
 
 interface ShortcutsContext {
     grouped: ShortcutGroup[],
+    on: (name: ShortcutName, listener: ShortcutListener) => void,
+    off: (name: ShortcutName, listener: ShortcutListener) => void,
 }
 
 const ShortcutsContext = createContext<ShortcutsContext>({} as ShortcutsContext);
@@ -18,27 +20,38 @@ type Props = {
 };
 
 const ShortcutsProvider = ({ children, onShortcut }: Props) => {
-    const onKeyDown = useCallback(({ ctrlKey, shiftKey, key }: KeyboardEvent) => {
+    const listeners = useRef<Map<ShortcutName, Set<ShortcutListener>>>(new Map());
+
+    const onKeyDown = useCallback(({ ctrlKey, shiftKey, code, key }: KeyboardEvent) => {
         SHORTCUTS.forEach(({ name, combos }) => combos.forEach((keys) => {
             const modifers = (keys.includes('Ctrl') ? ctrlKey : true)
                 && (keys.includes('Shift') ? shiftKey : true);
 
-            if (modifers && keys.includes(key.toUpperCase())) {
+            if (modifers && (keys.includes(code) || keys.includes(key.toUpperCase()))) {
+                const combo = combos.indexOf(keys);
+                listeners.current.get(name)?.forEach((listener) => listener(combo));
+
                 onShortcut(name as ShortcutName);
             }
         }));
     }, [onShortcut]);
 
+    const on = (name: ShortcutName, listener: ShortcutListener) => {
+        !listeners.current.has(name) && listeners.current.set(name, new Set());
+        listeners.current.get(name)!.add(listener);
+    };
+
+    const off = (name: ShortcutName, listener: ShortcutListener) => {
+        listeners.current.get(name)?.delete(listener);
+    };
+
     useEffect(() => {
         document.addEventListener('keydown', onKeyDown);
-
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
+        return () => document.removeEventListener('keydown', onKeyDown);
     }, [onKeyDown]);
 
     return (
-        <ShortcutsContext.Provider value={{ grouped: shortcuts }}>
+        <ShortcutsContext.Provider value={{ grouped: shortcuts, on, off }}>
             {children}
         </ShortcutsContext.Provider>
     );
@@ -50,5 +63,5 @@ const useShortcuts = () => {
 
 export {
     ShortcutsProvider,
-    useShortcuts
+    useShortcuts,
 };

src/common/Shortcuts/index.ts

@@ -1,5 +1,8 @@
 import { ShortcutsProvider, useShortcuts } from './Shortcuts';
+import onShortcut from './onShortcut';
+
 export {
     ShortcutsProvider,
     useShortcuts,
+    onShortcut,
 };

src/common/Shortcuts/onShortcut.ts

@@ -0,0 +1,15 @@
+import { DependencyList, useCallback, useEffect } from 'react';
+import { ShortcutListener, ShortcutName, useShortcuts } from './Shortcuts';
+
+const onShortcut = (name: ShortcutName, listener: ShortcutListener, deps: DependencyList) => {
+    const shortcuts = useShortcuts();
+
+    const listenerCallback = useCallback(listener, deps);
+
+    useEffect(() => {
+        shortcuts.on(name, listenerCallback);
+        return () => shortcuts.off(name, listenerCallback);
+    }, [listenerCallback]);
+};
+
+export default onShortcut;

src/common/Shortcuts/shortcuts.json

@@ -59,6 +59,11 @@
                 "label": "SETTINGS_SHORTCUT_VOLUME_DOWN",
                 "combos": [["ArrowDown"]]
             },
+            {
+                "name": "mute",
+                "label": "SETTINGS_SHORTCUT_MUTE",
+                "combos": [["M"]]
+            },
             {
                 "name": "subtitlesSize",
                 "label": "SETTINGS_SHORTCUT_SUBTITLES_SIZE",
@@ -83,6 +88,16 @@
                 "name": "infoMenu",
                 "label": "SETTINGS_SHORTCUT_MENU_INFO",
                 "combos": [["I"]]
+            },
+            {
+                "name": "speedMenu",
+                "label": "SETTINGS_SHORTCUT_MENU_PLAYBACK_SPEED",
+                "combos": [["R"]]
+            },
+            {
+                "name": "statisticsMenu",
+                "label": "SETTINGS_SHORTCUT_MENU_STATISTICS",
+                "combos": [["D"]]
             }
         ]
     }

src/common/index.js

@@ -4,7 +4,7 @@ const { FileDropProvider, onFileDrop } = require('./FileDrop');
 const { PlatformProvider, usePlatform } = require('./Platform');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
-const { ShortcutsProvider, useShortcuts } = require('./Shortcuts');
+const { ShortcutsProvider, useShortcuts, onShortcut } = require('./Shortcuts');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
 const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
@@ -38,6 +38,7 @@ module.exports = {
     usePlatform,
     ShortcutsProvider,
     useShortcuts,
+    onShortcut,
     ToastProvider,
     useToast,
     TooltipProvider,

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -51,7 +51,6 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
     const popupMenuOnKeyDown = React.useCallback((event) => {
         event.nativeEvent.buttonClickPrevented = true;
     }, []);
-
     const href = React.useMemo(() => {
         return deepLinks ?
             deepLinks.externalPlayer ?
@@ -101,6 +100,10 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
         }
     }, [videoId, videoReleased]);
 
+    const streamingUrl = React.useMemo(() => {
+        return deepLinks?.externalPlayer?.streaming;
+    }, [deepLinks]);
+
     const onClick = React.useCallback((event) => {
         if (profile.settings.playerType !== null) {
             markVideoAsWatched();
@@ -109,6 +112,18 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
                 title: 'Stream opened in external player',
                 timeout: 4000
             });
+            if (profile.settings.playerType === 'vlc' && streamingUrl) {
+                core.transport.dispatch({
+                    action: 'StreamingServer',
+                    args: {
+                        action: 'PlayOnDevice',
+                        args: {
+                            device: 'vlc',
+                            source: streamingUrl,
+                        }
+                    }
+                });
+            }
         }
 
         if (typeof props.onClick === 'function') {

src/routes/Player/Player.js

@@ -8,7 +8,7 @@ const langs = require('langs');
 const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { onFileDrop, useSettings, useProfile, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell, usePlatform } = require('stremio/common');
+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');
 const VolumeChangeIndicator = require('./VolumeChangeIndicator');
@@ -568,7 +568,7 @@ const Player = ({ urlParams, queryParams }) => {
         const videoId = player.selected ? player.selected?.streamRequest?.path?.id : null;
         const video = metaItem ? metaItem.videos.find(({ id }) => id === videoId) : null;
 
-        const videoInfo = video && video.season && video.episode ? ` (${video.season}x${video.episode})`: null;
+        const videoInfo = video && video.season && video.episode ? ` (${video.season}x${video.episode})` : null;
         const videoTitle = video ? `${video.title}${videoInfo}` : null;
         const metaTitle = metaItem ? metaItem.name : null;
         const imageUrl = metaItem ? metaItem.logo : null;
@@ -597,117 +597,99 @@ const Player = ({ urlParams, queryParams }) => {
         navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
     }, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
 
-    React.useLayoutEffect(() => {
-        const onKeyDown = (event) => {
-            switch (event.code) {
-                case 'Space': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
-                        if (video.state.paused) {
-                            onPlayRequested();
-                            setSeeking(false);
-                        } else {
-                            onPauseRequested();
-                        }
-                    }
-
-                    break;
-                }
-                case 'ArrowRight': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
-                        const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
-                        setSeeking(true);
-                        onSeekRequested(video.state.time + seekDuration);
-                    }
-
-                    break;
-                }
-                case 'ArrowLeft': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
-                        const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;
-                        setSeeking(true);
-                        onSeekRequested(video.state.time - seekDuration);
-                    }
-
-                    break;
-                }
-                case 'ArrowUp': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
-                        onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
-                    }
-
-                    break;
-                }
-                case 'ArrowDown': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
-                        onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
-                    }
-
-                    break;
-                }
-                case 'KeyS': {
-                    closeMenus();
-                    if ((Array.isArray(video.state.subtitlesTracks) && video.state.subtitlesTracks.length > 0) ||
-                        (Array.isArray(video.state.extraSubtitlesTracks) && video.state.extraSubtitlesTracks.length > 0)) {
-                        toggleSubtitlesMenu();
-                    }
-
-                    break;
-                }
-                case 'KeyA': {
-                    closeMenus();
-                    if (Array.isArray(video.state.audioTracks) && video.state.audioTracks.length > 0) {
-                        toggleAudioMenu();
-                    }
-
-                    break;
-                }
-                case 'KeyI': {
-                    closeMenus();
-                    if (player.metaItem !== null && player.metaItem.type === 'Ready') {
-                        toggleSideDrawer();
-                    }
-
-                    break;
-                }
-                case 'KeyR': {
-                    closeMenus();
-                    if (video.state.playbackSpeed !== null) {
-                        toggleSpeedMenu();
-                    }
-
-                    break;
-                }
-                case 'KeyD': {
-                    closeMenus();
-                    if (streamingServer.statistics !== null && streamingServer.statistics.type !== 'Err' && player.selected && typeof player.selected.stream.infoHash === 'string' && typeof player.selected.stream.fileIdx === 'number') {
-                        toggleStatisticsMenu();
-                    }
-
-                    break;
-                }
-                case 'KeyG': {
-                    onDecreaseSubtitlesDelay();
-                    break;
-                }
-                case 'KeyH': {
-                    onIncreaseSubtitlesDelay();
-                    break;
-                }
-                case 'Minus': {
-                    onUpdateSubtitlesSize(-1);
-                    break;
-                }
-                case 'Equal': {
-                    onUpdateSubtitlesSize(1);
-                    break;
-                }
-                case 'Escape': {
-                    closeMenus();
-                    !settings.escExitFullscreen && window.history.back();
-                    break;
-                }
+    onShortcut('playPause', () => {
+        if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
+            if (video.state.paused) {
+                onPlayRequested();
+                setSeeking(false);
+            } else {
+                onPauseRequested();
             }
-        };
+        }
+    }, [menusOpen, nextVideoPopupOpen, video.state.paused, onPlayRequested, onPauseRequested]);
+
+    onShortcut('seekForward', (combo) => {
+        if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
+            const seekDuration = combo === 1 ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+            setSeeking(true);
+            onSeekRequested(video.state.time + seekDuration);
+        }
+    }, [menusOpen, nextVideoPopupOpen, video.state.time, onSeekRequested]);
+
+    onShortcut('seekBackward', (combo) => {
+        if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
+            const seekDuration = combo === 1 ? settings.seekShortTimeDuration : settings.seekTimeDuration;
+            setSeeking(true);
+            onSeekRequested(video.state.time - seekDuration);
+        }
+    }, [menusOpen, nextVideoPopupOpen, video.state.time, onSeekRequested]);
+
+    onShortcut('mute', () => {
+        video.state.muted === true ? onUnmuteRequested() : onMuteRequested();
+    }, [video.state.muted]);
+
+    onShortcut('volumeUp', () => {
+        if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+            onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
+        }
+    }, [menusOpen, nextVideoPopupOpen, video.state.volume]);
+
+    onShortcut('volumeDown', () => {
+        if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+            onVolumeChangeRequested(Math.min(video.state.volume - 5, 200));
+        }
+    }, [menusOpen, nextVideoPopupOpen, video.state.volume]);
+
+    onShortcut('subtitlesDelay', (combo) => {
+        combo === 1 ? onIncreaseSubtitlesDelay() : onDecreaseSubtitlesDelay();
+    }, [onIncreaseSubtitlesDelay, onDecreaseSubtitlesDelay]);
+
+    onShortcut('subtitlesSize', (combo) => {
+        combo === 1 ? onUpdateSubtitlesSize(-1) : onUpdateSubtitlesSize(1);
+    }, [onUpdateSubtitlesSize, onUpdateSubtitlesSize]);
+
+    onShortcut('subtitlesMenu', () => {
+        closeMenus();
+        if (video.state?.subtitlesTracks?.length > 0 || video.state?.extraSubtitlesTracks?.length > 0) {
+            toggleSubtitlesMenu();
+        }
+    }, [video.state.subtitlesTracks, video.state.extraSubtitlesTracks, toggleSubtitlesMenu]);
+
+    onShortcut('audioMenu', () => {
+        closeMenus();
+        if (video.state?.audioTracks?.length > 0) {
+            toggleAudioMenu();
+        }
+    }, [video.state.audioTracks, toggleAudioMenu]);
+
+    onShortcut('infoMenu', () => {
+        closeMenus();
+        if (player.metaItem?.type === 'Ready') {
+            toggleSideDrawer();
+        }
+    }, [player.metaItem, toggleSideDrawer]);
+
+    onShortcut('speedMenu', () => {
+        closeMenus();
+        if (video.state.playbackSpeed !== null) {
+            toggleSpeedMenu();
+        }
+    }, [video.state.playbackSpeed, toggleSpeedMenu]);
+
+    onShortcut('statisticsMenu', () => {
+        closeMenus();
+        const stream = player.selected?.stream;
+        if (streamingServer?.statistics?.type !== 'Err' && typeof stream === 'string' && typeof stream === 'number') {
+            toggleStatisticsMenu();
+        }
+    }, [player.selected, streamingServer.statistics, toggleStatisticsMenu]);
+
+    onShortcut('exit', () => {
+        closeMenus();
+        !settings.escExitFullscreen && window.history.back();
+    }, [settings.escExitFullscreen]);
+
+    React.useLayoutEffect(() => {
         const onKeyUp = (event) => {
             if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
                 setSeeking(false);
@@ -725,39 +707,14 @@ const Player = ({ urlParams, queryParams }) => {
             }
         };
         if (routeFocused) {
-            window.addEventListener('keydown', onKeyDown);
             window.addEventListener('keyup', onKeyUp);
             window.addEventListener('wheel', onWheel);
         }
         return () => {
-            window.removeEventListener('keydown', onKeyDown);
             window.removeEventListener('keyup', onKeyUp);
             window.removeEventListener('wheel', onWheel);
         };
-    }, [
-        player.metaItem,
-        player.selected,
-        streamingServer.statistics,
-        settings.seekTimeDuration,
-        settings.seekShortTimeDuration,
-        settings.escExitFullscreen,
-        routeFocused,
-        menusOpen,
-        nextVideoPopupOpen,
-        video.state.paused,
-        video.state.time,
-        video.state.volume,
-        video.state.audioTracks,
-        video.state.subtitlesTracks,
-        video.state.extraSubtitlesTracks,
-        video.state.playbackSpeed,
-        toggleSubtitlesMenu,
-        toggleStatisticsMenu,
-        toggleSideDrawer,
-        onDecreaseSubtitlesDelay,
-        onIncreaseSubtitlesDelay,
-        onUpdateSubtitlesSize,
-    ]);
+    }, [routeFocused, menusOpen, video.state.volume]);
 
     React.useEffect(() => {
         video.events.on('error', onError);