global stateContainer replaced by core service

src/App/App.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const { Router } = require('stremio-router');
-const { KeyboardNavigation, ServicesProvider } = require('stremio/services');
+const { KeyboardNavigation, ServicesProvider, StremioCore } = require('stremio/services');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
@@ -9,20 +9,37 @@ const App = () => {
         window.history.back();
     }, []);
     const services = React.useMemo(() => ({
-        keyboardNavigation: new KeyboardNavigation()
+        keyboardNavigation: new KeyboardNavigation(),
+        core: new StremioCore()
     }), []);
+    const [coreActive, setCoreActive] = React.useState(services.core.active);
     React.useEffect(() => {
+        const onCoreStateChanged = () => {
+            setCoreActive(services.core.active);
+        };
         services.keyboardNavigation.start();
-    }, [services]);
+        services.core.start();
+        services.core.on('stateChanged', onCoreStateChanged);
+        return () => {
+            services.keyboardNavigation.stop();
+            services.core.stop();
+            services.core.off('stateChanged', onCoreStateChanged);
+        };
+    }, []);
     return (
         <React.StrictMode>
             <ServicesProvider services={services}>
-                <Router
-                    className={styles['router']}
-                    homePath={'/'}
-                    viewsConfig={routerViewsConfig}
-                    onPathNotMatch={onPathNotMatch}
-                />
+                {
+                    coreActive ?
+                        <Router
+                            className={styles['router']}
+                            homePath={'/'}
+                            viewsConfig={routerViewsConfig}
+                            onPathNotMatch={onPathNotMatch}
+                        />
+                        :
+                        <div className={styles['app-loader']} />
+                }
             </ServicesProvider>
         </React.StrictMode>
     );

src/App/styles.less

@@ -63,6 +63,12 @@ html, body, :global(#app) {
         width: 100%;
         height: 100%;
     }
+
+    .app-loader {
+        width: 100%;
+        height: 100%;
+        background-color: var(--color-background);
+    }
 }
 
 @media only screen and (min-width: @xxlarge) {

src/index.js

@@ -1,6 +1,5 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const StateContainer = require('stremio-core-web');
 const App = require('./App');
 
 const loadShell = () => {
@@ -15,17 +14,9 @@ const loadShell = () => {
     });
 };
 
-const loadStateContainer = () => {
-    if (window.stateContainer) {
-        return Promise.resolve();
-    }
-
-    return StateContainer.load();
-};
 
 Promise.all([
-    loadShell(),
-    loadStateContainer()
+    loadShell()
 ]).then(() => {
     if (window.shell) {
         window.shell.dispatch('mpv', 'setOption', null, 'terminal', 'yes');

src/routes/Board/useCatalogs.js

@@ -1,14 +1,16 @@
 const React = require('react');
+const { useServices } = require('stremio/services');
 
 const useCatalogs = () => {
     const [catalogs, setCatalogs] = React.useState([]);
+    const { core } = useServices();
     React.useEffect(() => {
         const onNewState = () => {
-            const state = window.stateContainer.getState();
+            const state = core.getState();
             setCatalogs(state.catalogs.groups);
         };
-        window.stateContainer.on('NewModel', onNewState);
-        window.stateContainer.dispatch({
+        core.on('NewModel', onNewState);
+        core.dispatch({
             action: 'Load',
             args: {
                 load: 'CatalogGrouped',
@@ -16,7 +18,7 @@ const useCatalogs = () => {
             }
         });
         return () => {
-            window.stateContainer.off('NewModel', onNewState);
+            core.off('NewModel', onNewState);
         };
     }, []);
     return catalogs;