more core suspender to separate file

src/common/AddonDetailsModal/AddonDetailsModal.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ModalDialog = require('stremio/common/ModalDialog');
-const { withCoreSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/coreSuspender');
 const { useServices } = require('stremio/services');
 const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
 const useAddonDetails = require('./useAddonDetails');

src/common/AddonDetailsModal/useAddonDetails.js

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
-const { useModelState } = require('stremio/common/useModelState');
+const useModelState = require('stremio/common/useModelState');
 
 const useAddonDetails = (transportUrl) => {
     const action = React.useMemo(() => {

src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js

@@ -8,7 +8,7 @@ const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/coreSuspender');
 const styles = require('./styles');
 
 const NavMenuContent = ({ onClick }) => {

src/common/StreamingServerWarning/StreamingServerWarning.js

@@ -6,7 +6,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Button = require('stremio/common/Button');
 const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/coreSuspender');
 const styles = require('./styles');
 
 const StreamingServerWarning = ({ className }) => {

src/common/coreSuspender.js

@@ -0,0 +1,67 @@
+const React = require('react');
+const { useServices } = require('stremio/services');
+
+const CoreSuspenderContext = React.createContext();
+
+CoreSuspenderContext.displayName = 'CoreSuspenderContext';
+
+function wrapPromise(promise) {
+    let status = 'pending';
+    let result;
+    const suspender = promise.then(
+        (resp) => {
+            status = 'success';
+            result = resp;
+        },
+        (error) => {
+            status = 'error';
+            result = error;
+        }
+    );
+    return {
+        read() {
+            if (status === 'pending') {
+                throw suspender;
+            } else if (status === 'error') {
+                throw result;
+            } else if (status === 'success') {
+                return result;
+            }
+        }
+    };
+}
+
+const withCoreSuspender = (Component, Fallback = () => { }) => {
+    return function withCoreSuspender(props) {
+        const { core } = useServices();
+        const statesRef = React.useRef({});
+        const streamsRef = React.useRef({});
+        const getState = React.useCallback((model) => {
+            if (!statesRef.current[model]) {
+                statesRef.current[model] = wrapPromise(core.transport.getState(model));
+            }
+
+            return statesRef.current[model].read();
+        }, []);
+        const decodeStream = React.useCallback((stream) => {
+            if (!streamsRef.current[stream]) {
+                streamsRef.current[stream] = wrapPromise(core.transport.decodeStream(stream));
+            }
+
+            return streamsRef.current[stream].read();
+        }, []);
+        return (
+            <React.Suspense fallback={<Fallback {...props} />}>
+                <CoreSuspenderContext.Provider value={{ getState, decodeStream }}>
+                    <Component {...props} />
+                </CoreSuspenderContext.Provider>
+            </React.Suspense>
+        );
+    };
+};
+
+const useCoreSuspender = () => {
+    return React.useContext(CoreSuspenderContext);
+};
+
+module.exports = { withCoreSuspender, useCoreSuspender };

src/common/index.js

@@ -25,6 +25,7 @@ const TextInput = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
+const { withCoreSuspender, useCoreSuspender } = require('./coreSuspender');
 const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const languageNames = require('./languageNames');
 const routesRegexp = require('./routesRegexp');
@@ -36,7 +37,7 @@ const useDeepEqualMemo = require('./useDeepEqualMemo');
 const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
-const { withCoreSuspender, useModelState } = require('./useModelState');
+const useModelState = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
@@ -69,6 +70,8 @@ module.exports = {
     useToast,
     comparatorWithPriorities,
     CONSTANTS,
+    withCoreSuspender,
+    useCoreSuspender,
     getVisibleChildrenRange,
     languageNames,
     routesRegexp,
@@ -80,7 +83,6 @@ module.exports = {
     useDeepEqualState,
     useFullscreen,
     useLiveRef,
-    withCoreSuspender,
     useModelState,
     useOnScrollToBottom,
     useProfile,

src/common/useModelState.js

@@ -4,60 +4,10 @@ const React = require('react');
 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 { useServices } = require('stremio/services');
 
-const CoreSuspenderContext = React.createContext();
-
-CoreSuspenderContext.displayName = 'CoreSuspenderContext';
-
-function wrapPromise(promise) {
-    let status = 'pending';
-    let result;
-    const suspender = promise.then(
-        (resp) => {
-            status = 'success';
-            result = resp;
-        },
-        (error) => {
-            status = 'error';
-            result = error;
-        }
-    );
-    return {
-        read() {
-            if (status === 'pending') {
-                throw suspender;
-            } else if (status === 'error') {
-                throw result;
-            } else if (status === 'success') {
-                return result;
-            }
-        }
-    };
-}
-
-const withCoreSuspender = (Component, Fallback = () => { }) => {
-    return function withCoreSuspender(props) {
-        const { core } = useServices();
-        const initStateRef = React.useRef({});
-        const getInitState = React.useCallback((model) => {
-            if (!initStateRef.current[model]) {
-                initStateRef.current[model] = wrapPromise(core.transport.getState(model));
-            }
-
-            return initStateRef.current[model].read();
-        }, []);
-        return (
-            <React.Suspense fallback={<Fallback {...props} />}>
-                <CoreSuspenderContext.Provider value={getInitState}>
-                    <Component {...props} />
-                </CoreSuspenderContext.Provider>
-            </React.Suspense>
-        );
-    };
-};
-
 const useModelState = ({ action, ...args }) => {
     const { core } = useServices();
     const routeFocused = useRouteFocused();
@@ -65,7 +15,7 @@ const useModelState = ({ action, ...args }) => {
     const [model, timeout, map, deps] = React.useMemo(() => {
         return [args.model, args.timeout, args.map, args.deps];
     }, []);
-    const getInitState = React.useContext(CoreSuspenderContext);
+    const { getState } = useCoreSuspender();
     const [state, setState] = React.useReducer(
         (prevState, nextState) => {
             return Object.keys(prevState).reduce((result, key) => {
@@ -76,9 +26,9 @@ const useModelState = ({ action, ...args }) => {
         undefined,
         () => {
             if (typeof map === 'function') {
-                return map(getInitState(model));
+                return map(getState(model));
             } else {
-                return getInitState(model);
+                return getState(model);
             }
         }
     );
@@ -123,7 +73,4 @@ const useModelState = ({ action, ...args }) => {
     return state;
 };
 
-module.exports = {
-    withCoreSuspender,
-    useModelState
-};
+module.exports = useModelState;

src/common/useProfile.js

@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const { useModelState } = require('stremio/common/useModelState');
+const useModelState = require('stremio/common/useModelState');
 
 const map = (ctx) => ({
     ...ctx.profile,

src/common/useStreamingServer.js

@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const { useModelState } = require('stremio/common/useModelState');
+const useModelState = require('stremio/common/useModelState');
 
 const useStreamingServer = () => {
     return useModelState({ model: 'streaming_server' });