diff --git a/src/App/App.js b/src/App/App.js index cbf709be2..8067aa870 100644 --- a/src/App/App.js +++ b/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 ( - + + + ); }; diff --git a/src/services/KeyboardNavigation/KeyboardNavigation.js b/src/services/KeyboardNavigation/KeyboardNavigation.js new file mode 100644 index 000000000..ea21d1740 --- /dev/null +++ b/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; diff --git a/src/services/KeyboardNavigation/index.js b/src/services/KeyboardNavigation/index.js new file mode 100644 index 000000000..e5e65b9f3 --- /dev/null +++ b/src/services/KeyboardNavigation/index.js @@ -0,0 +1,3 @@ +const KeyboardNavigation = require('./KeyboardNavigation'); + +module.exports = KeyboardNavigation; diff --git a/src/services/ServicesContext/ServicesContext.js b/src/services/ServicesContext/ServicesContext.js new file mode 100644 index 000000000..49fca5c41 --- /dev/null +++ b/src/services/ServicesContext/ServicesContext.js @@ -0,0 +1,7 @@ +const React = require('react'); + +const ServicesContext = React.createContext({}); + +ServicesContext.displayName = 'ServicesContext'; + +module.exports = ServicesContext; diff --git a/src/services/ServicesContext/ServicesProvider.js b/src/services/ServicesContext/ServicesProvider.js new file mode 100644 index 000000000..275fe6457 --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +ServicesProvider.propTypes = { + services: PropTypes.object, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]) +}; + +module.exports = ServicesProvider; diff --git a/src/services/ServicesContext/index.js b/src/services/ServicesContext/index.js new file mode 100644 index 000000000..95c276ac2 --- /dev/null +++ b/src/services/ServicesContext/index.js @@ -0,0 +1,7 @@ +const ServicesProvider = require('./ServicesProvider'); +const useServices = require('./useServices'); + +module.exports = { + ServicesProvider, + useServices +}; \ No newline at end of file diff --git a/src/services/ServicesContext/useServices.js b/src/services/ServicesContext/useServices.js new file mode 100644 index 000000000..43e6c7f02 --- /dev/null +++ b/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; diff --git a/src/services/index.js b/src/services/index.js new file mode 100644 index 000000000..bbe0adb73 --- /dev/null +++ b/src/services/index.js @@ -0,0 +1,8 @@ +const KeyboardNavigation = require('./KeyboardNavigation'); +const { ServicesProvider, useServices } = require('./ServicesContext'); + +module.exports = { + KeyboardNavigation, + ServicesProvider, + useServices +};