initial architecture for services implemented

src/App/App.js

@@ -1,21 +1,30 @@
 const React = require('react');
 const { Router } = require('stremio-navigation');
+const { KeyboardNavigation, ServicesProvider } = require('stremio/services');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
 const App = () => {
+    const services = React.useMemo(() => ({
+        keyboardNavigation: new KeyboardNavigation()
+    }), []);
     const onPathNotMatch = React.useCallback(() => {
         window.history.back();
     }, []);
+    React.useEffect(() => {
+        services.keyboardNavigation.start();
+    }, [services]);
 
     return (
         <React.StrictMode>
-            <Router
-                className={styles['router']}
-                homePath={'/'}
-                viewsConfig={routerViewsConfig}
-                onPathNotMatch={onPathNotMatch}
-            />
+            <ServicesProvider services={services}>
+                <Router
+                    className={styles['router']}
+                    homePath={'/'}
+                    viewsConfig={routerViewsConfig}
+                    onPathNotMatch={onPathNotMatch}
+                />
+            </ServicesProvider>
         </React.StrictMode>
     );
 };

src/services/KeyboardNavigation/KeyboardNavigation.js

@@ -0,0 +1,51 @@
+const TABS = [
+    { href: '#/', keyCode: 112 },
+    { href: '#/discover', keyCode: 113 },
+    { href: '#/library', keyCode: 114 },
+    { href: '#/calendar', keyCode: 115 }
+];
+
+function KeyboardNavigation() {
+    var active = false;
+
+    function onKeyDown(event) {
+        const tab = TABS.find(({ keyCode }) => event.keyCode === keyCode);
+        if (tab) {
+            event.preventDefault();
+            window.location = tab.href;
+        }
+    }
+    function start() {
+        if (active) {
+            return;
+        }
+
+        window.addEventListener('keydown', onKeyDown);
+    }
+    function stop() {
+        if (!active) {
+            return;
+        }
+
+        window.removeEventListener('keydown', onKeyDown);
+    }
+
+    Object.defineProperties(this, {
+        active: {
+            configurable: false,
+            enumerable: true,
+            get: function() {
+                return active;
+            }
+        }
+    });
+
+    this.start = start;
+    this.stop = stop;
+
+    Object.freeze(this);
+};
+
+Object.freeze(KeyboardNavigation);
+
+module.exports = KeyboardNavigation;

src/services/KeyboardNavigation/index.js

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

src/services/ServicesContext/ServicesContext.js

@@ -0,0 +1,7 @@
+const React = require('react');
+
+const ServicesContext = React.createContext({});
+
+ServicesContext.displayName = 'ServicesContext';
+
+module.exports = ServicesContext;

src/services/ServicesContext/ServicesProvider.js

@@ -0,0 +1,21 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const ServicesContext = require('./ServicesContext');
+
+const ServicesProvider = ({ services = {}, children }) => {
+    return (
+        <ServicesContext.Provider value={services}>
+            {children}
+        </ServicesContext.Provider>
+    );
+};
+
+ServicesProvider.propTypes = {
+    services: PropTypes.object,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
+};
+
+module.exports = ServicesProvider;

src/services/ServicesContext/index.js

@@ -0,0 +1,7 @@
+const ServicesProvider = require('./ServicesProvider');
+const useServices = require('./useServices');
+
+module.exports = {
+    ServicesProvider,
+    useServices
+};

src/services/ServicesContext/useServices.js

@@ -0,0 +1,8 @@
+const React = require('react');
+const ServicesContext = require('./ServicesContext');
+
+const useServices = () => {
+    return React.useContext(ServicesContext);
+};
+
+module.exports = useServices;

src/services/index.js

@@ -0,0 +1,8 @@
+const KeyboardNavigation = require('./KeyboardNavigation');
+const { ServicesProvider, useServices } = require('./ServicesContext');
+
+module.exports = {
+    KeyboardNavigation,
+    ServicesProvider,
+    useServices
+};