feat(frontend/settings): add customisable hotkeys (#548)

app/frontend/src/App.js

@@ -1,6 +1,5 @@
 import React, { PureComponent, lazy, Suspense } from 'react'
 import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
-import { configure } from 'react-hotkeys'
 import { hot } from 'react-hot-loader/root'
 import classNames from 'classnames'
 
@@ -39,32 +38,22 @@ class App extends PureComponent {
     [ Presenter, PRESENTER_URL ],
   ]
 
-  constructor( props ) {
-    super( props )
-
-    // Configure react-hotkeys
-    configure( {
-      ignoreTags: [],
-      ignoreKeymapAndHandlerChangesByDefault: false,
-    } )
-
-    this.state = {
-      connected: false,
-      connectedAt: null,
-      status: null,
-      banis: [],
-      bani: null,
-      lineId: null,
-      mainLineId: null,
-      nextLineId: null,
-      viewedLines: {},
-      transitionHistory: {},
-      latestLines: {},
-      shabad: null,
-      recommendedSources: {},
-      writers: {},
-      settings: loadSettings(),
-    }
+  state = {
+    connected: false,
+    connectedAt: null,
+    status: null,
+    banis: [],
+    bani: null,
+    lineId: null,
+    mainLineId: null,
+    nextLineId: null,
+    viewedLines: {},
+    transitionHistory: {},
+    latestLines: {},
+    shabad: null,
+    recommendedSources: {},
+    writers: {},
+    settings: loadSettings(),
   }
 
   componentDidMount() {

app/frontend/src/Controller/Navigator.js

@@ -5,7 +5,6 @@ import { Redirect, useLocation } from 'react-router-dom'
 import { string, func, bool } from 'prop-types'
 import classNames from 'classnames'
 import { invert } from 'lodash'
-import { GlobalHotKeys } from 'react-hotkeys'
 import { stripVishraams } from 'gurmukhi-utils'
 
 import List from '@material-ui/core/List'
@@ -28,6 +27,7 @@ import { LINE_HOTKEYS } from '../lib/keyMap'
 import { ContentContext, HistoryContext } from '../lib/contexts'
 import { useCurrentLines } from '../lib/hooks'
 
+import GlobalHotKeys from '../shared/GlobalHotKeys'
 import { withNavigationHotkeys } from '../shared/NavigationHotkeys'
 import NavigatorHotKeys from '../shared/NavigatorHotkeys'
 

app/frontend/src/Presenter/index.js

@@ -1,7 +1,6 @@
 import React, { lazy, Suspense, useState, useContext, useRef } from 'react'
 import { useMount } from 'react-use'
 import { hot } from 'react-hot-loader/root'
-import { GlobalHotKeys } from 'react-hotkeys'
 import { Route, useHistory, useLocation } from 'react-router-dom'
 import IdleTimer from 'react-idle-timer'
 import queryString from 'qs'
@@ -14,7 +13,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 import controller from '../lib/controller'
-import { getUrlState, mapPlatformKeys } from '../lib/utils'
+import { getUrlState } from '../lib/utils'
 import { toggleFullscreen } from '../lib/electron-utils'
 import {
   CONTROLLER_URL,
@@ -30,9 +29,12 @@ import {
 } from '../lib/consts'
 import { GLOBAL_SHORTCUTS } from '../lib/keyMap'
 import { SettingsContext } from '../lib/contexts'
+import { useCurrentLines } from '../lib/hooks'
+import { OPTIONS } from '../lib/options'
 
 import ThemeLoader from '../shared/ThemeLoader'
 import Loader from '../shared/Loader'
+import GlobalHotKeys from '../shared/GlobalHotKeys'
 import NavigatorHotKeys from '../shared/NavigatorHotkeys'
 import { withErrorFallback } from '../shared/ErrorFallback'
 import CopyHotkeys from '../shared/CopyHotkeys'
@@ -67,8 +69,17 @@ const Presenter = () => {
   const onIdle = () => setIdle( true )
   const onActive = () => setIdle( false )
 
+  const lines = useCurrentLines()
+
   const isControllerOpen = pathname.includes( CONTROLLER_URL )
 
+  const { local: localSettings } = useContext( SettingsContext )
+  const {
+    theme: { themeName },
+    layout: { controllerZoom: zoom },
+    hotkeys,
+  } = localSettings
+
   /**
    * Sets the query string parameters, retaining any currently present.
    * @param params The query string parameters.
@@ -100,6 +111,12 @@ const Presenter = () => {
     search: queryString.stringify( { [ STATES.controllerOnly ]: true } ),
   } )
 
+  const { controllerZoom } = OPTIONS
+  const setZoom = controllerZoom => controller.setSettings( { layout: { controllerZoom } } )
+  const zoomInController = () => setZoom( Math.min( controllerZoom.max, zoom + 0.1 ) )
+  const zoomOutController = () => setZoom( Math.max( controllerZoom.min, zoom - 0.1 ) )
+  const zoomResetController = () => setZoom( 1 )
+
   /**
    * Toggles the given query string parameter.
    * @param query The query string parameter to toggle.
@@ -135,13 +152,16 @@ const Presenter = () => {
 
   // Global Hotkey Handlers
   const hotkeyHandlers = preventDefault( {
+    [ GLOBAL_SHORTCUTS.zoomInController.name ]: zoomInController,
+    [ GLOBAL_SHORTCUTS.zoomOutController.name ]: zoomOutController,
+    [ GLOBAL_SHORTCUTS.zoomResetController.name ]: zoomResetController,
     [ GLOBAL_SHORTCUTS.toggleController.name ]: toggleController,
     [ GLOBAL_SHORTCUTS.newController.name ]: () => controller.openWindow( `${CONTROLLER_URL}?${STATES.controllerOnly}=true`, { alwaysOnTop: true } ),
     [ GLOBAL_SHORTCUTS.settings.name ]: () => controller.openWindow( SETTINGS_URL ),
     [ GLOBAL_SHORTCUTS.search.name ]: () => go( SEARCH_URL ),
     [ GLOBAL_SHORTCUTS.history.name ]: () => go( HISTORY_URL ),
     [ GLOBAL_SHORTCUTS.bookmarks.name ]: () => go( BOOKMARKS_URL ),
-    [ GLOBAL_SHORTCUTS.navigator.name ]: () => go( NAVIGATOR_URL ),
+    [ GLOBAL_SHORTCUTS.navigator.name ]: () => lines.length && go( NAVIGATOR_URL ),
     [ GLOBAL_SHORTCUTS.clearDisplay.name ]: controller.clear,
     [ GLOBAL_SHORTCUTS.toggleFullscreenController.name ]: toggleFullscreenController,
     [ GLOBAL_SHORTCUTS.toggleFullscreen.name ]: toggleFullscreen,
@@ -152,9 +172,6 @@ const Presenter = () => {
     if ( isMobile ) setFullscreenController()
   } )
 
-  const { local: localSettings } = useContext( SettingsContext )
-  const { theme: { themeName }, hotkeys } = localSettings
-
   // Required for mouse shortcuts
   const presenterRef = useRef( null )
 
@@ -172,15 +189,15 @@ const Presenter = () => {
         />
       )}
 
-      <GlobalHotKeys keyMap={mapPlatformKeys( hotkeys )} handlers={hotkeyHandlers}>
+      <GlobalHotKeys keyMap={hotkeys} handlers={hotkeyHandlers}>
         <NavigatorHotKeys active={!isControllerOpen} mouseTargetRef={presenterRef}>
           <CopyHotkeys>
 
             <Suspense fallback={<Loader />}>
-              {!controllerOnly && <Display settings={localSettings} />}
+              {!( isControllerOpen && controllerOnly ) && <Display settings={localSettings} />}
             </Suspense>
 
-            <div className={classNames( 'controller-container', { fullscreen: controllerOnly } )}>
+            <div className={classNames( 'controller-container', { fullscreen: controllerOnly } )} style={{ zoom }}>
               <IconButton className="expand-icon" onClick={toggleController}>
                 <FontAwesomeIcon icon={faPlus} />
               </IconButton>