fix: cycle dependency with useRouteFocused

src/common/useModelState.js

@@ -5,7 +5,7 @@ const throttle = require('lodash.throttle');
 const isEqual = require('lodash.isequal');
 const intersection = require('lodash.intersection');
 const { useCoreSuspender } = require('stremio/common/CoreSuspender');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useServices } = require('stremio/services');
 
 const useModelState = ({ action, ...args }) => {

src/common/useRouteFocused.ts

@@ -0,0 +1,24 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React from 'react';
+
+const useRouteFocused = () => {
+    const [isFocused, setIsFocused] = React.useState(document.hasFocus());
+
+    React.useEffect(() => {
+        const handleFocus = () => setIsFocused(true);
+        const handleBlur = () => setIsFocused(false);
+
+        window.addEventListener('focus', handleFocus);
+        window.addEventListener('blur', handleBlur);
+
+        return () => {
+            window.removeEventListener('focus', handleFocus);
+            window.removeEventListener('blur', handleBlur);
+        };
+    }, []);
+
+    return isFocused;
+};
+
+export default useRouteFocused;

src/components/ModalDialog/ModalDialog.js

@@ -3,7 +3,8 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useRouteFocused, useModalsContainer } = require('stremio-router');
+const { useModalsContainer } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { default: Button } = require('stremio/components/Button');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Modal } = require('stremio-router');

src/components/NavBar/HorizontalNavBar/NavMenu/NavMenu.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const Popup = require('stremio/components/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
 const NavMenuContent = require('./NavMenuContent');

src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js

@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const Button = require('stremio/components/Button').default;
 const TextInput = require('stremio/components/TextInput').default;
 const useTorrent = require('stremio/common/useTorrent');

src/components/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js

@@ -4,8 +4,9 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image } = require('stremio/components');
+const { Image } = require('stremio/components');
 const styles = require('./styles');
+const { Link } = require('react-router-dom');
 
 const NavTabButton = ({ className, logo, icon, label, href, selected, onClick }) => {
     const renderLogoFallback = React.useCallback(() => (
@@ -24,7 +25,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
         });
     };
     return (
-        <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick} onDoubleClick={onDoubleClick}>
+        <Link className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} to={href} onClick={onClick} onDoubleClick={onDoubleClick}>
             {
                 typeof logo === 'string' && logo.length > 0 ?
                     <Image
@@ -45,7 +46,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
                     :
                     null
             }
-        </Button>
+        </Link>
     );
 };
 

src/components/Popup/Popup.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const FocusLock = require('react-focus-lock').default;
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const styles = require('./styles');
 
 const getAnchorElement = (element) => {

src/components/SharePrompt/SharePrompt.js

@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useServices } = require('stremio/services');
 const { Button } = require('stremio/components');
 const { default: TextInput } = require('stremio/components/TextInput');

src/components/Slider/Slider.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const useAnimationFrame = require('stremio/common/useAnimationFrame');
 const useLiveRef = require('stremio/common/useLiveRef');
 const styles = require('./styles');

src/components/Video/Video.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Image, Popup } = require('stremio/components');
 const useBinaryState = require('stremio/common/useBinaryState');

src/router/RouteFocusedContext/RouteFocusedContext.js

@@ -1,9 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-
-const RouteFocusedContext = React.createContext(true);
-
-RouteFocusedContext.displayName = 'RouteFocusedContext';
-
-module.exports = RouteFocusedContext;

src/router/RouteFocusedContext/index.js

@@ -1,9 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const RouteFocusedContext = require('./RouteFocusedContext');
-const useRouteFocused = require('./useRouteFocused');
-
-module.exports = {
-    RouteFocusedProvider: RouteFocusedContext.Provider,
-    useRouteFocused
-};

src/router/RouteFocusedContext/useRouteFocused.js

@@ -1,10 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const RouteFocusedContext = require('./RouteFocusedContext');
-
-const useRouteFocused = () => {
-    return React.useContext(RouteFocusedContext);
-};
-
-module.exports = useRouteFocused;

src/router/index.js

@@ -1,12 +1,10 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-const { useRouteFocused } = require('./RouteFocusedContext');
 const { useModalsContainer } = require('./ModalsContainerContext');
 const Modal = require('./Modal');
 const Router = require('./Router');
 
 module.exports = {
-    useRouteFocused,
     useModalsContainer,
     Modal,
     Router

src/routes/Intro/Intro.js

@@ -5,9 +5,10 @@ const { useTranslation } = require('react-i18next');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Modal, useRouteFocused } = require('stremio-router');
+const { Modal } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { useBinaryState } = require('stremio/common');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { Button, Image, Checkbox } = require('stremio/components');
 const CredentialsTextInput = require('./CredentialsTextInput');
 const PasswordResetModal = require('./PasswordResetModal');

src/routes/Intro/PasswordResetModal/PasswordResetModal.js

@@ -2,7 +2,7 @@
 
 const React = require('react');
 const PropTypes = require('prop-types');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { usePlatform } = require('stremio/common');
 const { ModalDialog } = require('stremio/components');
 const CredentialsTextInput = require('../CredentialsTextInput');

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

@@ -8,7 +8,7 @@ const { t } = require('i18next');
 const { useProfile, usePlatform, useToast, useBinaryState } = require('stremio/common');
 const { Button, Image, Popup } = require('stremio/components');
 const { useServices } = require('stremio/services');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const styles = require('./styles');
 

src/routes/Player/ControlBar/SeekBar/SeekBar.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useBinaryState } = require('stremio/common');
 const { Button, Slider } = require('stremio/components');
 const formatTime = require('./formatTime');

src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useServices } = require('stremio/services');
 const { Slider } = require('stremio/components');
 const styles = require('./styles');

src/routes/Player/Player.js

@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const langs = require('langs');
 const { useTranslation } = require('react-i18next');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useServices } = require('stremio/services');
 const { onFileDrop, useSettings, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell } = require('stremio/common');
 const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');

src/routes/Settings/Settings.js

@@ -5,7 +5,7 @@ const classnames = require('classnames');
 const throttle = require('lodash.throttle');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { useRouteFocused } = require('stremio-router');
+const { default: useRouteFocused } = require('stremio/common/useRouteFocused');
 const { useServices } = require('stremio/services');
 const { useProfile, usePlatform, useStreamingServer, withCoreSuspender, useToast } = require('stremio/common');
 const { Button, ColorInput, MainNavBars, Multiselect, Toggle } = require('stremio/components');
@@ -23,7 +23,7 @@ const SHORTCUTS_SECTION = 'shortcuts';
 const Settings = () => {
     const { t } = useTranslation();
     const { core, shell } = useServices();
-    const { routeFocused } = useRouteFocused();
+    const routeFocused = useRouteFocused();
     const profile = useProfile();
     const [dataExport, loadDataExport] = useDataExport();
     const streamingServer = useStreamingServer();