demo shell service implemented

src/App/App.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const { Router } = require('stremio-router');
-const { KeyboardNavigation, ServicesProvider, StremioCore } = require('stremio/services');
+const { KeyboardNavigation, ServicesProvider, Shell, StremioCore } = require('stremio/services');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
@@ -10,19 +10,28 @@ const App = () => {
     }, []);
     const services = React.useMemo(() => ({
         keyboardNavigation: new KeyboardNavigation(),
+        shell: new Shell(),
         core: new StremioCore()
     }), []);
-    const [coreActive, setCoreActive] = React.useState(services.core.active);
+    const [shellStarted, setShellStarted] = React.useState(false);
+    const [coreStarted, setCoreStarted] = React.useState(false);
     React.useEffect(() => {
-        const onCoreStateChanged = () => {
-            setCoreActive(services.core.active);
+        const onShellStateChanged = () => {
+            setShellStarted(services.shell.active || services.shell.error instanceof Error);
         };
-        services.keyboardNavigation.start();
-        services.core.start();
+        const onCoreStateChanged = () => {
+            setCoreStarted(services.core.active || services.core.error instanceof Error);
+        };
+        services.shell.on('stateChanged', onShellStateChanged);
         services.core.on('stateChanged', onCoreStateChanged);
+        services.keyboardNavigation.start();
+        services.shell.start();
+        services.core.start();
         return () => {
             services.keyboardNavigation.stop();
+            services.shell.stop();
             services.core.stop();
+            services.shell.off('stateChanged', onShellStateChanged);
             services.core.off('stateChanged', onCoreStateChanged);
         };
     }, []);
@@ -30,7 +39,7 @@ const App = () => {
         <React.StrictMode>
             <ServicesProvider services={services}>
                 {
-                    coreActive ?
+                    shellStarted && coreStarted ?
                         <Router
                             className={styles['router']}
                             homePath={'/'}

src/index.html

@@ -15,8 +15,6 @@
     <script type="text/javascript">
         <%= compilation.assets['main.js'].source() %>
     </script>
-    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
-    <script type="text/javascript" src="qrc:///stremio-shell.js"></script>
 </body>
 
 </html>

src/index.js

@@ -2,35 +2,4 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const App = require('./App');
 
-const loadShell = () => {
-    if (!window.qt || window.shell) {
-        return Promise.resolve();
-    }
-
-    return new Promise((resolve) => {
-        window.shellOnLoad = () => {
-            resolve();
-        };
-    });
-};
-
-
-Promise.all([
-    loadShell()
-]).then(() => {
-    if (window.shell) {
-        window.shell.dispatch('mpv', 'setOption', null, 'terminal', 'yes');
-        window.shell.dispatch('mpv', 'setOption', null, 'msg-level', 'all=v');
-        window.shell.dispatch('mpv', 'setProp', null, 'vo', 'opengl-cb');
-        window.shell.dispatch('mpv', 'setProp', null, 'opengl-hwdec-interop', 'auto');
-        window.shell.dispatch('mpv', 'setProp', null, 'cache-default', 15000);
-        window.shell.dispatch('mpv', 'setProp', null, 'cache-backbuffer', 15000);
-        window.shell.dispatch('mpv', 'setProp', null, 'cache-secs', 10);
-        window.shell.dispatch('mpv', 'setProp', null, 'audio-client-name', 'Stremio');
-        window.shell.dispatch('mpv', 'setProp', null, 'title', 'Stremio');
-        window.shell.dispatch('mpv', 'setProp', null, 'audio-fallback-to-null', 'yes');
-        window.shell.dispatch('mpv', 'setProp', null, 'sid', 'no');
-    }
-
 ReactDOM.render(<App />, document.getElementById('app'));
-});

src/services/Shell/Shell.js

@@ -0,0 +1,71 @@
+const EventEmitter = require('events');
+
+function Shell() {
+    let active = false;
+    let error = null;
+    let starting = false;
+    let events = new EventEmitter();
+    events.on('error', () => { });
+
+    function onStateChanged() {
+        events.emit('stateChanged');
+    }
+    function start() {
+        if (active || error instanceof Error || starting) {
+            return;
+        }
+
+        starting = true;
+        setTimeout(() => {
+            error = new Error('Unable to init stremio shell');
+            starting = false;
+            onStateChanged();
+        });
+    }
+    function stop() {
+        active = false;
+        error = null;
+        starting = false;
+        onStateChanged();
+    }
+    function on(name, listener) {
+        events.on(name, listener);
+    }
+    function off(name, listener) {
+        events.off(name, listener);
+    }
+    function dispatch() {
+        if (!active) {
+            return;
+        }
+
+        // TODO
+    }
+
+    Object.defineProperties(this, {
+        active: {
+            configurable: false,
+            enumerable: true,
+            get: function() {
+                return active;
+            }
+        },
+        error: {
+            configurable: false,
+            enumerable: true,
+            get: function() {
+                return error;
+            }
+        }
+    });
+
+    this.start = start;
+    this.stop = stop;
+    this.on = on;
+    this.off = off;
+    this.dispatch = dispatch;
+
+    Object.freeze(this);
+};
+
+module.exports = Shell;

src/services/Shell/index.js

@@ -0,0 +1,3 @@
+const Shell = require('./Shell');
+
+module.exports = Shell;

src/services/index.js

@@ -1,10 +1,12 @@
 const KeyboardNavigation = require('./KeyboardNavigation');
 const { ServicesProvider, useServices } = require('./ServicesContext');
+const Shell = require('./Shell');
 const StremioCore = require('./StremioCore');
 
 module.exports = {
     KeyboardNavigation,
     ServicesProvider,
     useServices,
+    Shell,
     StremioCore
 };