Move 'Esc' and 'CmdOrCtrl+D' from global to local shortcuts

antonio-ramadas · Feb 19, 2019 · 0acf5c4 · 0acf5c4
1 parent 5109d92
commit 0acf5c4
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,8 @@
         "electron-store": "^2.0.0",
         "fuse.js": "^3.3.0",
         "menubar": "^5.2.3",
+        "mousetrap": "^1.6.2",
+        "mousetrap-global-bind": "^1.1.0",
         "spotify-authentication": "0.3.0",
         "spotify-context-history": "^0.3.1",
         "spotify-web-api-node": "^4.0.0"

diff --git a/public/electron.js b/public/electron.js
@@ -87,7 +87,7 @@ function setGlobalShortcuts() {
         return;
     }
 
-    let gs = globalShortcut.register('CommandOrControl+M', () => {
+    const gs = globalShortcut.register('CommandOrControl+M', () => {
         if (mb.window.isVisible()) {
             hideWindow();
         } else {
@@ -98,25 +98,6 @@ function setGlobalShortcuts() {
     if (!gs) {
         console.warn('Registration of the global shortcut to show/hide the window has failed.');
     }
-
-    gs = globalShortcut.register('Esc', () => {
-        if (mb.window.isVisible()) {
-            hideWindow();
-        }
-    });
-
-    if (!gs) {
-        console.warn('Registration of the global shortcut to hide the window has failed.');
-    }
-
-    gs = globalShortcut.register('CommandOrControl+D', () => {
-        darkMode.toggleUser();
-        sendToFrontEndTheDarkModeState();
-    });
-
-    if (!gs) {
-        console.warn('Registration of the global shortcut to toggle dark mode has failed.');
-    }
 }
 
 function setSystemListeners() {
@@ -159,6 +140,17 @@ function setIpc() {
             .catch(() => console.error(`Failed to play: ${arg}`));
     });
 
+    ipcMain.on('hide-window', () => {
+        if (mb.window.isVisible()) {
+            hideWindow();
+        }
+    });
+
+    ipcMain.on('toggle-dark-mode-state', () => {
+        darkMode.toggleUser();
+        sendToFrontEndTheDarkModeState();
+    });
+
     ipcMain.on('get-dark-mode-state', () => sendToFrontEndTheDarkModeState());
 
     sendToFrontEndTheDarkModeState();

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react'; // eslint-disable-line import/no-extraneous-dependencies
 import Fuse from 'fuse.js';
+import Mousetrap from 'mousetrap';
+import globalBind from 'mousetrap-global-bind';
 import './App.css';
 import AlbumComponent from './AlbumComponent';
 import { getClassNameTheme } from './Util';
@@ -25,26 +27,41 @@ class App extends Component {
         this.searchInputRef = React.createRef();
     }
 
-    handleKeyDown(event) {
-        const stateObj = this.state;
+    static handleKeyDown(event) {
+        if (['Tab', 'ArrowUp', 'ArrowDown'].indexOf(event.key) > -1) {
+            event.preventDefault();
+        }
+    }
 
-        if (event.key === 'Tab') {
-            const currentSelected = stateObj.currentSelected + (event.shiftKey ? -1 : 1);
+    bindKeyListeners() {
+        const move = (direction) => {
+            const stateObj = this.state;
 
-            this.updateSelection(currentSelected, stateObj.search.results.length - 1);
+            const newPosition = stateObj.currentSelected + direction;
+
+            this.updateSelection(newPosition, stateObj.search.results.length - 1);
+        };
+
+        const moveUp = () => move(-1);
+        const moveDown = () => move(1);
+
+        Mousetrap.bindGlobal('mod+d', () => ipcRenderer.send('toggle-dark-mode-state'));
+
+        Mousetrap.bindGlobal('esc', () => ipcRenderer.send('hide-window'));
+
+        Mousetrap.bindGlobal('tab', () => moveDown());
+        Mousetrap.bindGlobal('shift+tab', () => moveUp());
+
+        Mousetrap.bindGlobal('up', () => moveUp());
+        Mousetrap.bindGlobal('down', () => moveDown());
+
+        Mousetrap.bindGlobal('enter', () => {
+            const stateObj = this.state;
 
-            event.preventDefault();
-        } else if (event.key === 'Enter') {
             if (stateObj.currentSelected < stateObj.search.results.length) {
                 App.play(stateObj.search.results[stateObj.currentSelected].context.uri);
             }
-        } else if (event.key === 'ArrowUp') {
-            this.updateSelection(stateObj.currentSelected - 1, stateObj.search.results.length - 1);
-            event.preventDefault();
-        } else if (event.key === 'ArrowDown') {
-            this.updateSelection(stateObj.currentSelected + 1, stateObj.search.results.length - 1);
-            event.preventDefault();
-        }
+        });
     }
 
     updateSelection(newCurrentSelection, maxSize) {
@@ -115,6 +132,8 @@ class App extends Component {
             ipcRenderer.send('get-dark-mode-state');
         }
 
+        this.bindKeyListeners();
+
         this.searchInputRef.current.focus();
     }
 
@@ -124,6 +143,8 @@ class App extends Component {
             ipcRenderer.removeAllListeners('dark-mode-state');
             // No need to update to not listening, because the state will be lost
         }
+
+        Mousetrap.unbind(['mod+d', 'esc', 'tab', 'shift+tab', 'up', 'down']);
     }
 
     static play(uri) {
@@ -172,7 +193,7 @@ class App extends Component {
                         placeholder="What do you want to hear?"
                         autoFocus={true}
                         onChange={() => this.search()}
-                        onKeyDown={event => this.handleKeyDown(event)}
+                        onKeyDown={event => App.handleKeyDown(event)}
                         ref={this.searchInputRef}
                     />
                     <button