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
+};