Streaming server is not available.
@@ -56,4 +63,4 @@ StreamingServerWarning.propTypes = {
className: PropTypes.string
};
-module.exports = StreamingServerWarning;
+module.exports = withCoreSuspender(StreamingServerWarning);
diff --git a/src/common/animations.less b/src/common/animations.less
new file mode 100644
index 000000000..9173a625b
--- /dev/null
+++ b/src/common/animations.less
@@ -0,0 +1,22 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+:global(.animation-fade-in) {
+ :local {
+ animation-name: fade-in;
+ }
+
+ animation-timing-function: ease-in-out;
+ animation-duration: 100ms;
+}
+
+@keyframes fade-in {
+ 0% {
+ opacity: 0.6;
+ transform: translateY(0.2vh);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 1ee08108c..54fac3a83 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -4,6 +4,7 @@ const AddonDetailsModal = require('./AddonDetailsModal');
const Button = require('./Button');
const Checkbox = require('./Checkbox');
const ColorInput = require('./ColorInput');
+const DelayedRenderer = require('./DelayedRenderer');
const Image = require('./Image');
const LibItem = require('./LibItem');
const MainNavBars = require('./MainNavBars');
@@ -24,15 +25,13 @@ 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');
-const sanitizeLocationPath = require('./sanitizeLocationPath');
const useAnimationFrame = require('./useAnimationFrame');
const useBinaryState = require('./useBinaryState');
-const useDeepEqualEffect = require('./useDeepEqualEffect');
const useDeepEqualMemo = require('./useDeepEqualMemo');
-const useDeepEqualState = require('./useDeepEqualState');
const useFullscreen = require('./useFullscreen');
const useLiveRef = require('./useLiveRef');
const useModelState = require('./useModelState');
@@ -45,6 +44,7 @@ module.exports = {
Button,
Checkbox,
ColorInput,
+ DelayedRenderer,
Image,
LibItem,
MainNavBars,
@@ -67,15 +67,14 @@ module.exports = {
useToast,
comparatorWithPriorities,
CONSTANTS,
+ withCoreSuspender,
+ useCoreSuspender,
getVisibleChildrenRange,
languageNames,
routesRegexp,
- sanitizeLocationPath,
useAnimationFrame,
useBinaryState,
- useDeepEqualEffect,
useDeepEqualMemo,
- useDeepEqualState,
useFullscreen,
useLiveRef,
useModelState,
diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js
index d15bc7d46..21ad98662 100644
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@@ -26,7 +26,7 @@ const routesRegexp = {
urlParamsNames: []
},
metadetails: {
- regexp: /^\/metadetails\/([^/]*)\/([^/]*)(?:\/([^/]*))?$/,
+ regexp: /^\/(?:metadetails|detail)\/([^/]*)\/([^/]*)(?:\/([^/]*))?$/,
urlParamsNames: ['type', 'id', 'videoId']
},
addons: {
diff --git a/src/common/sanitizeLocationPath.js b/src/common/sanitizeLocationPath.js
deleted file mode 100644
index e45f1e15b..000000000
--- a/src/common/sanitizeLocationPath.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const UrlUtils = require('url');
-const routesRegexp = require('stremio/common/routesRegexp');
-
-const sanitizeLocationPath = (path) => {
- const { href, pathname, search } = UrlUtils.parse(path);
- if (typeof pathname === 'string') {
- const matches = pathname.match(routesRegexp.player.regexp);
- if (matches) {
- if (typeof matches[2] === 'string') {
- return `/player/***/***/${matches[3]}/${matches[4]}/${matches[5]}/${matches[6]}${typeof search === 'string' ? search : ''}`;
- } else {
- return `/player/***${typeof search === 'string' ? search : ''}`;
- }
- }
- }
-
- return href;
-};
-
-module.exports = sanitizeLocationPath;
diff --git a/src/common/useDeepEqualEffect.js b/src/common/useDeepEqualEffect.js
deleted file mode 100644
index 095576356..000000000
--- a/src/common/useDeepEqualEffect.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const React = require('react');
-const useDeepEqualMemo = require('stremio/common/useDeepEqualMemo');
-
-const useDeepEqualEffect = (cb, deps) => {
- React.useEffect(cb, [useDeepEqualMemo(() => ({}), deps)]);
-};
-
-module.exports = useDeepEqualEffect;
diff --git a/src/common/useDeepEqualState.js b/src/common/useDeepEqualState.js
deleted file mode 100644
index edd762b46..000000000
--- a/src/common/useDeepEqualState.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const React = require('react');
-const isEqual = require('lodash.isequal');
-
-const useDeepEqualState = (initialState) => {
- return React.useReducer(
- (prevState, nextState) => {
- return isEqual(prevState, nextState) ?
- prevState
- :
- nextState;
- },
- undefined,
- () => {
- return typeof initialState === 'function' ?
- initialState()
- :
- initialState;
- }
- );
-};
-
-module.exports = useDeepEqualState;
diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 75e2ab634..a2a630237 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -3,16 +3,19 @@
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 useModelState = ({ init, action, ...args }) => {
+const useModelState = ({ action, ...args }) => {
const { core } = useServices();
const routeFocused = useRouteFocused();
const mountedRef = React.useRef(false);
- const [model, timeout, map] = React.useMemo(() => {
- return [args.model, args.timeout, args.map];
+ const [model, timeout, map, deps] = React.useMemo(() => {
+ return [args.model, args.timeout, args.map, args.deps];
}, []);
+ const { getState } = useCoreSuspender();
const [state, setState] = React.useReducer(
(prevState, nextState) => {
return Object.keys(prevState).reduce((result, key) => {
@@ -22,35 +25,41 @@ const useModelState = ({ init, action, ...args }) => {
},
undefined,
() => {
- return typeof init === 'function' ?
- init()
- :
- init;
+ if (typeof map === 'function') {
+ return map(getState(model));
+ } else {
+ return getState(model);
+ }
}
);
- React.useLayoutEffect(() => {
+ React.useInsertionEffect(() => {
if (action) {
core.transport.dispatch(action, model);
}
}, [action]);
- React.useLayoutEffect(() => {
+ React.useInsertionEffect(() => {
return () => {
core.transport.dispatch({ action: 'Unload' }, model);
};
}, []);
- React.useLayoutEffect(() => {
- const onNewStateThrottled = throttle(() => {
- const state = core.transport.getState(model);
+ React.useInsertionEffect(() => {
+ const onNewState = async (models) => {
+ if (models.indexOf(model) === -1 && (!Array.isArray(deps) || intersection(deps, models).length === 0)) {
+ return;
+ }
+
+ const state = await core.transport.getState(model);
if (typeof map === 'function') {
setState(map(state));
} else {
setState(state);
}
- }, timeout);
+ };
+ const onNewStateThrottled = throttle(onNewState, timeout);
if (routeFocused) {
core.transport.on('NewState', onNewStateThrottled);
if (mountedRef.current) {
- onNewStateThrottled.call();
+ onNewState([model]);
}
}
return () => {
@@ -58,7 +67,7 @@ const useModelState = ({ init, action, ...args }) => {
core.transport.off('NewState', onNewStateThrottled);
};
}, [routeFocused]);
- React.useLayoutEffect(() => {
+ React.useInsertionEffect(() => {
mountedRef.current = true;
}, []);
return state;
diff --git a/src/common/useProfile.js b/src/common/useProfile.js
index cbd60b36c..371a4df12 100644
--- a/src/common/useProfile.js
+++ b/src/common/useProfile.js
@@ -1,7 +1,5 @@
// Copyright (C) 2017-2022 Smart code 203358507
-const React = require('react');
-const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const map = (ctx) => ({
@@ -18,12 +16,7 @@ const map = (ctx) => ({
});
const useProfile = () => {
- const { core } = useServices();
- const init = React.useCallback(() => {
- const ctx = core.transport.getState('ctx');
- return map(ctx);
- }, []);
- return useModelState({ model: 'ctx', init, map });
+ return useModelState({ model: 'ctx', map });
};
module.exports = useProfile;
diff --git a/src/common/useStreamingServer.js b/src/common/useStreamingServer.js
index a8cf71596..00dd0cee1 100644
--- a/src/common/useStreamingServer.js
+++ b/src/common/useStreamingServer.js
@@ -1,15 +1,9 @@
// Copyright (C) 2017-2022 Smart code 203358507
-const React = require('react');
-const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const useStreamingServer = () => {
- const { core } = useServices();
- const init = React.useCallback(() => {
- return core.transport.getState('streaming_server');
- }, []);
- return useModelState({ model: 'streaming_server', init });
+ return useModelState({ model: 'streaming_server' });
};
module.exports = useStreamingServer;
diff --git a/src/index.js b/src/index.js
index c7af67f8b..d716b0b2e 100755
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,8 @@ if (browser?.platform?.type === 'desktop') {
}
const React = require('react');
-const ReactDOM = require('react-dom');
+const ReactDOM = require('react-dom/client');
const App = require('./App');
-ReactDOM.render(
, document.getElementById('app'));
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
);
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 1a889ae50..aa513daaf 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -2,8 +2,9 @@
const React = require('react');
const PropTypes = require('prop-types');
+const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
-const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState, withCoreSuspender } = require('stremio/common');
const Addon = require('./Addon');
const useInstalledAddons = require('./useInstalledAddons');
const useRemoteAddons = require('./useRemoteAddons');
@@ -118,7 +119,7 @@ const Addons = ({ urlParams, queryParams }) => {
.map((addon, index) => (
{
.map((addon, index) => (
(
+
+);
+
+module.exports = withCoreSuspender(Addons, AddonsFallback);
diff --git a/src/routes/Addons/useInstalledAddons.js b/src/routes/Addons/useInstalledAddons.js
index 8be193982..fc649c772 100644
--- a/src/routes/Addons/useInstalledAddons.js
+++ b/src/routes/Addons/useInstalledAddons.js
@@ -1,14 +1,9 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
-const { useServices } = require('stremio/services');
const { useModelState } = require('stremio/common');
const useInstalledAddons = (urlParams) => {
- const { core } = useServices();
- const init = React.useMemo(() => {
- return core.transport.getState('installed_addons');
- }, []);
const action = React.useMemo(() => {
if (typeof urlParams.transportUrl !== 'string' && typeof urlParams.catalogId !== 'string') {
return {
@@ -28,7 +23,7 @@ const useInstalledAddons = (urlParams) => {
};
}
}, [urlParams]);
- return useModelState({ model: 'installed_addons', action, init });
+ return useModelState({ model: 'installed_addons', action });
};
module.exports = useInstalledAddons;
diff --git a/src/routes/Addons/useRemoteAddons.js b/src/routes/Addons/useRemoteAddons.js
index f6bc023d1..b3f74516e 100644
--- a/src/routes/Addons/useRemoteAddons.js
+++ b/src/routes/Addons/useRemoteAddons.js
@@ -3,15 +3,6 @@
const React = require('react');
const { useModelState } = require('stremio/common');
-const init = () => ({
- selected: null,
- selectable: {
- catalogs: [],
- types: []
- },
- catalog: null,
-});
-
const useRemoteAddons = (urlParams) => {
const action = React.useMemo(() => {
if (typeof urlParams.type === 'string' && typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string') {
@@ -38,7 +29,7 @@ const useRemoteAddons = (urlParams) => {
};
}
}, [urlParams]);
- return useModelState({ model: 'remote_addons', action, init });
+ return useModelState({ model: 'remote_addons', action, deps: ['ctx'] });
};
module.exports = useRemoteAddons;
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 0aca6964b..d01666448 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -3,7 +3,7 @@
const React = require('react');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
-const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
@@ -11,7 +11,6 @@ const styles = require('./styles');
const THRESHOLD = 5;
const Board = () => {
- const profile = useProfile();
const streamingServer = useStreamingServer();
const continueWatchingPreview = useContinueWatchingPreview();
const [board, loadBoardRows] = useBoard();
@@ -42,7 +41,7 @@ const Board = () => {
{
continueWatchingPreview.libraryItems.length > 0 ?
{
return (
{
return (
{
return (
@@ -91,8 +90,7 @@ const Board = () => {
{
- streamingServer.settings !== null && streamingServer.settings.type === 'Err' &&
- (isNaN(profile.settings.streamingServerWarningDismissed.getTime()) || profile.settings.streamingServerWarningDismissed.getTime() < Date.now()) ?
+ streamingServer.settings !== null && streamingServer.settings.type === 'Err' ?