diff --git a/package-lock.json b/package-lock.json
index d67e81a74..f85c0907b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1868,7 +1868,7 @@
},
"util": {
"version": "0.10.3",
- "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+ "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
"dev": true,
"requires": {
@@ -2056,7 +2056,7 @@
},
"chalk": {
"version": "1.1.3",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+ "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -2444,7 +2444,7 @@
"dependencies": {
"resolve": {
"version": "1.1.7",
- "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+ "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
"integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
"dev": true
}
@@ -2662,7 +2662,7 @@
"dependencies": {
"callsites": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+ "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
"dev": true
}
@@ -2679,7 +2679,7 @@
},
"callsites": {
"version": "0.2.0",
- "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
+ "resolved": "http://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
"integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
"dev": true
},
@@ -2691,7 +2691,7 @@
},
"camelcase-keys": {
"version": "2.1.0",
- "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+ "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
"integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
"dev": true,
"requires": {
@@ -3952,7 +3952,7 @@
"dependencies": {
"doctrine": {
"version": "1.5.0",
- "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+ "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
"integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
"dev": true,
"requires": {
@@ -3968,7 +3968,7 @@
},
"load-json-file": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+ "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
"integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
"dev": true,
"requires": {
@@ -4540,7 +4540,7 @@
"dependencies": {
"json5": {
"version": "0.5.1",
- "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+ "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
"dev": true
}
@@ -5544,7 +5544,7 @@
"dependencies": {
"get-stream": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+ "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
}
@@ -6150,7 +6150,7 @@
},
"is-accessor-descriptor": {
"version": "0.1.6",
- "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+ "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
"integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
"dev": true,
"requires": {
@@ -6237,7 +6237,7 @@
},
"is-data-descriptor": {
"version": "0.1.4",
- "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+ "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
"integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
"dev": true,
"requires": {
@@ -6988,7 +6988,7 @@
},
"jest-get-type": {
"version": "22.4.3",
- "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
+ "resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
"dev": true
},
@@ -8176,7 +8176,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
@@ -8278,7 +8278,7 @@
},
"load-json-file": {
"version": "1.1.0",
- "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+ "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
"requires": {
@@ -8308,7 +8308,7 @@
"dependencies": {
"json5": {
"version": "0.5.1",
- "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+ "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
"dev": true
}
@@ -8549,7 +8549,7 @@
},
"meow": {
"version": "3.7.0",
- "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+ "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
"integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
"dev": true,
"requires": {
@@ -8567,7 +8567,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
@@ -8676,7 +8676,7 @@
},
"minimist": {
"version": "0.0.8",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
},
@@ -8761,7 +8761,7 @@
},
"mkdirp": {
"version": "0.5.1",
- "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+ "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@@ -8864,7 +8864,7 @@
"dependencies": {
"semver": {
"version": "5.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+ "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
"dev": true
}
@@ -8976,7 +8976,7 @@
},
"chalk": {
"version": "1.1.3",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+ "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -9353,7 +9353,7 @@
},
"os-homedir": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+ "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true
},
@@ -9387,7 +9387,7 @@
},
"os-tmpdir": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+ "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true
},
@@ -9435,7 +9435,7 @@
},
"p-is-promise": {
"version": "1.1.0",
- "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+ "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
"integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
"dev": true
},
@@ -9571,7 +9571,7 @@
},
"path-is-absolute": {
"version": "1.0.1",
- "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
},
@@ -9636,7 +9636,7 @@
},
"pify": {
"version": "2.3.0",
- "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+ "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
},
@@ -10343,7 +10343,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
@@ -10371,6 +10371,14 @@
"scheduler": "^0.11.2"
}
},
+ "react-hotkeys": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
+ "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
+ "requires": {
+ "prop-types": "^15.6.1"
+ }
+ },
"react-is": {
"version": "16.6.3",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
@@ -10484,7 +10492,7 @@
},
"readable-stream": {
"version": "2.3.6",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"requires": {
@@ -10650,7 +10658,7 @@
"dependencies": {
"jsesc": {
"version": "0.5.0",
- "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+ "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
"dev": true
}
@@ -10788,7 +10796,7 @@
},
"get-stream": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+ "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
},
@@ -11144,7 +11152,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
@@ -11190,7 +11198,7 @@
},
"os-locale": {
"version": "1.4.0",
- "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+ "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
@@ -11284,7 +11292,7 @@
"dependencies": {
"source-map": {
"version": "0.4.4",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+ "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
"dev": true,
"requires": {
@@ -11857,7 +11865,7 @@
},
"string_decoder": {
"version": "1.1.1",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -11878,7 +11886,7 @@
},
"strip-ansi": {
"version": "3.0.1",
- "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+ "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -12411,7 +12419,7 @@
},
"get-stream": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+ "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
}
@@ -13673,7 +13681,7 @@
},
"get-stream": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+ "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
},
diff --git a/package.json b/package.json
index 30e11605f..21e2647a2 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,9 @@
"start": "npm run server",
"dev": "npm run watch",
"watch": "run-p watch:*",
- "watch:webpack": "npm run build:webpack -- --watch",
+ "tempwatch:webpack": "npm run build:webpack -- --watch && npm run start",
"watch:css": "nodemon --watch src -e scss -x \"node-sass --output-style nested --source-map true --include-path src/scss src/scss/style.scss public/assets/css/bundle.css\"",
- "watch:server": "nodemon --watch server/ --exec npm run server",
+ "watch:server": "nodemon --watch src/ --exec npm run tempwatch:webpack",
"test": "npm-run-all test:*",
"test:lint": "run-p test:lint:*",
"test:lint:css": "stylelint \"src/scss/*.scss\" --syntax scss",
@@ -108,6 +108,7 @@
"marinate": "^0.1.5",
"react": "^16.6.3",
"react-dom": "^16.6.3",
+ "react-hotkeys": "^2.0.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.2.2",
"redux": "^4.0.1",
@@ -123,4 +124,4 @@
"pre-push": "npm run pre-push-message && npm run test"
}
}
-}
+}
\ No newline at end of file
diff --git a/src/js/Root.js b/src/js/Root.js
index 6ad24ddf7..a1b63a622 100644
--- a/src/js/Root.js
+++ b/src/js/Root.js
@@ -7,17 +7,32 @@ import {
saveToLocalStorage,
} from './util';
import { LOCAL_STORAGE_KEY_FOR_GDPR_NOTICE, TEXTS } from './constants';
+import { GlobalHotKeys, configure } from 'react-hotkeys';
+import { GlobalHandlers, GlobalShortcuts } from './Shortcuts';
export default class Root extends React.PureComponent {
+ constructor() {
+ super();
+
+ configure({
+ // logLevel: 'debug', use this when hotkeys break
+ defaultKeyEvent: 'keydown',
+ defaultComponent: 'div',
+ ignoreTags: ['input'],
+ defaultTabIndex: -1
+ })
+ }
render() {
return (
+
{routes.map((props, key) => (
))}
} />
+
);
}
diff --git a/src/js/Shortcuts.js b/src/js/Shortcuts.js
new file mode 100644
index 000000000..d54c1e7ff
--- /dev/null
+++ b/src/js/Shortcuts.js
@@ -0,0 +1,103 @@
+import store from './features/store'
+import { toggleItemInArray } from './util'
+
+const ViewerShortcuts = {
+ toggleLarivar: {
+ name: 'Toggle Larivar',
+ sequences: ['l']
+ },
+ toggleLarivarAssist: {
+ name: "Toggle Larivar Assist",
+ sequences: ['shift+l']
+ },
+ toggleVishraams: {
+ name: 'Toggle Vishraams',
+ sequences: ['v'],
+ },
+ centerAlign: {
+ name: 'Center Align',
+ sequences: ['meta+shift+c', 'ctrl+shift+c']
+ },
+ toggleEngTranslation: {
+ name: 'Toggle English Translation',
+ sequences: ['e'], // alt + e = Dead, accoring to hotkeys handler
+ },
+ togglePunjabiTranslation: {
+ name: 'Toggle Punjabi Translation',
+ sequences: ['t']
+ },
+ toggleSpanishTranslation: {
+ name: 'Toggle Spanish Translation',
+ sequences: ['s'],
+ },
+ toggleEngTranslit: {
+ name: 'Toggle English Transliteration',
+ sequences: ['shift+e']
+ },
+ toggleShahTranslit: {
+ name: 'Toggle Shahmukhi Transliteration',
+ sequences: ['shift+s']
+ },
+ toggleHinTranslit: {
+ name: 'Toggle Hindi Transliteration',
+ sequences: ['shift+h']
+ },
+
+}
+const GlobalShortcuts = {
+ toggleSearchBar: {
+ name: 'activate search bar',
+ sequences: ['meta+/', 'ctrl+/']
+ }
+}
+
+const GlobalHandlers = {
+ toggleSearchBar: (e) => {
+ e.preventDefault();
+ document.querySelector('#search').focus();
+ }
+}
+const ViewerShortcutHanders = {
+ toggleLarivar: () => {
+ store.dispatch({type: "TOGGLE_LARIVAAR_OPTION"})},
+ toggleLarivarAssist: () => {
+ const state = store.getState();
+ store.dispatch({type: 'TOGGLE_LARIVAAR_ASSIST_OPTION', payload:!state.larivaarAssist})
+ },
+ toggleVishraams: () => {
+ store.dispatch({type: "TOGGLE_VISRAAMS"}) },
+ centerAlign: () => {
+ const state = store.getState();
+ store.dispatch({type: "SET_CENTER_ALIGN_OPTION", payload:!state.centerAlignGurbani })
+ },
+ toggleEngTranslation: (e) => {
+ e.preventDefault();
+ const state = store.getState();
+ store.dispatch({type: 'SET_TRANSLATION_LANGUAGES', payload: toggleItemInArray('english', state.translationLanguages)})
+ },
+ togglePunjabiTranslation: (e) => {
+ e.preventDefault();
+ const state = store.getState();
+ store.dispatch({type: 'SET_TRANSLATION_LANGUAGES', payload: toggleItemInArray('punjabi', state.translationLanguages)})
+ },
+ toggleSpanishTranslation: (e) => {
+ e.preventDefault();
+ const state = store.getState();
+ store.dispatch({type: 'SET_TRANSLATION_LANGUAGES', payload: toggleItemInArray('spanish', state.translationLanguages)})
+ },
+ toggleEngTranslit: () => {
+ const state = store.getState();
+ store.dispatch({type: 'SET_TRANSLITERATION_LANGUAGES', payload: toggleItemInArray('english', state.transliterationLanguages)})
+ },
+ toggleShahTranslit: () => {
+ const state = store.getState();
+ store.dispatch({type: 'SET_TRANSLITERATION_LANGUAGES', payload: toggleItemInArray('shahmukhi', state.transliterationLanguages)})
+ },
+ toggleHinTranslit: () => {
+ const state = store.getState();
+ store.dispatch({type: 'SET_TRANSLITERATION_LANGUAGES', payload: toggleItemInArray('hindi', state.transliterationLanguages)})
+ }
+}
+
+// export default Shortcuts;
+export {ViewerShortcutHanders, ViewerShortcuts, GlobalHandlers, GlobalShortcuts}
\ No newline at end of file
diff --git a/src/js/components/Baani.js b/src/js/components/Baani.js
index f4a05c693..6775daff4 100644
--- a/src/js/components/Baani.js
+++ b/src/js/components/Baani.js
@@ -213,7 +213,6 @@ export default class Baani extends React.PureComponent {
}
onClick={() => onPanktiClick(getVerseId(shabad))}
>
- {console.log(shabad)}
{getBaniLine(shabad)}
{getTransliterations(shabad)}
{getTranslations(shabad)}
diff --git a/src/js/components/ShabadContent/ShabadContent.js b/src/js/components/ShabadContent/ShabadContent.js
index d055a7943..df9fddcae 100644
--- a/src/js/components/ShabadContent/ShabadContent.js
+++ b/src/js/components/ShabadContent/ShabadContent.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
+import {GlobalHotKeys} from 'react-hotkeys';
import { clickEvent, ACTIONS, errorEvent } from '@/util/analytics';
import { showToast, copyToClipboard } from '@/util';
@@ -13,6 +14,8 @@ import Baani from '@/components/Baani';
import { TEXTS, SHABAD_CONTENT_CLASSNAME } from '@/constants';
import RelatedShabads from '@/components/RelatedShabads';
import { getShabadId, getSourceId, getAng } from '@/util/api/shabad';
+import { ViewerShortcuts, ViewerShortcutHanders } from '../../Shortcuts';
+
/**
*
@@ -80,6 +83,9 @@ class Shabad extends React.PureComponent {
showFullScreen: PropTypes.bool,
};
+ constructor(props) {
+ super(props);
+ }
render() {
const {
props: {
@@ -109,7 +115,10 @@ class Shabad extends React.PureComponent {
}
return (
-
+
+
+
+
{this.props.hideControls === false && (
+
);
}
diff --git a/src/js/pages/Shabad/index.js b/src/js/pages/Shabad/index.js
index 2c5f0293b..87b8a3e82 100644
--- a/src/js/pages/Shabad/index.js
+++ b/src/js/pages/Shabad/index.js
@@ -8,7 +8,6 @@ import ShabadContent from '../../components/ShabadContent';
import { toShabadURL } from '../../util';
import BreadCrumb from '../../components/Breadcrumb';
import { TEXTS } from '../../constants';
-
const Stub = () => ;
export default class Shabad extends React.PureComponent {
@@ -25,6 +24,7 @@ export default class Shabad extends React.PureComponent {
);
return (
+
{({ data, loading }) =>
loading ? (
@@ -41,6 +41,7 @@ export default class Shabad extends React.PureComponent {
nav={data.navigation}
/>
+
)
}
diff --git a/src/js/util/api/shabad.js b/src/js/util/api/shabad.js
index 2e81bbdab..761a46032 100644
--- a/src/js/util/api/shabad.js
+++ b/src/js/util/api/shabad.js
@@ -24,7 +24,7 @@ export const translationMap = {
};
export const transliterationMap = {
- english: shabad => { console.log(shabad); return shabad.transliteration.en; },
+ english: shabad => shabad.transliteration.en,
hindi: shabad => shabad.transliteration.hi,
shahmukhi: shabad => shabad.transliteration.ur,
IPA: shabad => shabad.transliteration.ipa,
diff --git a/src/scss/_shabad-page.scss b/src/scss/_shabad-page.scss
index 5e07644b8..67eb6a32c 100644
--- a/src/scss/_shabad-page.scss
+++ b/src/scss/_shabad-page.scss
@@ -1,3 +1,7 @@
+div[tabindex="-1"]:focus { // remove focus outline from the HotKeys containder div
+ outline: 0;
+}
+
blockquote {
border: none;
margin: 0 0 0.1rem;