Add keyboard shortcuts

package-lock.json

@@ -5804,6 +5804,11 @@
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
       "dev": true
     },
+    "hotkeys-js": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.7.6.tgz",
+      "integrity": "sha512-X5d16trjp79o+OaCn7syXu0cs+TkLYlK/teE5FhpD1Cj9ROcEIhfIQ7Mhrk761ynF3NQLbLn5xRojP2UuSqDAw=="
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -8920,11 +8925,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10000,6 +10000,14 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "react-hotkeys-hook": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-2.1.3.tgz",
+      "integrity": "sha512-p4cH9n4c8Ac3kkNIf6a/97sLEJq+nnhP7fpT0bHhTwByZhBDU3j5hluu00FomxE3hMzJWk4knYG5ZuUM/qVJPw==",
+      "requires": {
+        "hotkeys-js": "3.7.6"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -23,10 +23,10 @@
     "koa-static": "^5.0.0",
     "koa-views": "^6.3.0",
     "lodash": "^4.17.15",
-    "mousetrap": "^1.6.5",
     "node-fetch": "^2.6.0",
     "node-simple-cert": "0.0.1",
     "preact": "^10.4.4",
+    "react-hotkeys-hook": "^2.1.3",
     "reconnecting-websocket": "^4.4.0",
     "styled-components": "^5.1.1",
     "svg-loaders-react": "^2.2.1",

src/browser/overlay.js

@@ -3,7 +3,7 @@ import { h, Fragment, render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { State } from 'xstate'
 import styled from 'styled-components'
-import Mousetrap from 'mousetrap'
+import { useHotkeys } from 'react-hotkeys-hook'
 import { TailSpin } from 'svg-loaders-react'
 
 import '../index.css'
@@ -16,10 +16,6 @@ import TwitchIcon from '../static/twitch.svg'
 import YouTubeIcon from '../static/youtube.svg'
 import SoundIcon from '../static/volume-up-solid.svg'
 
-Mousetrap.bind('ctrl+shift+i', () => {
-  ipcRenderer.send('devtools-overlay')
-})
-
 function Overlay({ views, streams, customStreams }) {
   const activeViews = views
     .map(({ state, context }) => State.from(state, context))
@@ -75,6 +71,10 @@ function App() {
     })
   }, [])
 
+  useHotkeys('ctrl+shift+i', () => {
+    ipcRenderer.send('devtools-overlay')
+  })
+
   const { views, streams, customStreams } = state
   return (
     <Overlay views={views} streams={streams} customStreams={customStreams} />

src/constants.js

@@ -1,5 +1,5 @@
 export const WIDTH = 1920
 export const HEIGHT = 1080
-export const GRID_COUNT = 3
+export const GRID_COUNT = 3 // Note: if greater than 3, keyboard shortcuts may need reworking
 export const SPACE_WIDTH = Math.floor(WIDTH / GRID_COUNT)
 export const SPACE_HEIGHT = Math.floor(HEIGHT / GRID_COUNT)

src/web/control.js

@@ -4,6 +4,7 @@ import { h, Fragment, render } from 'preact'
 import { useEffect, useState, useCallback, useRef } from 'preact/hooks'
 import { State } from 'xstate'
 import styled, { css } from 'styled-components'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import '../index.css'
 import { GRID_COUNT } from '../constants'
@@ -166,6 +167,27 @@ function App({ wsEndpoint }) {
     )
   })
 
+  // Set up keyboard shortcuts.
+  // Note: if GRID_COUNT > 3, there will not be keys for view indices > 9.
+  for (const idx of range(GRID_COUNT * GRID_COUNT)) {
+    useHotkeys(
+      `alt+${idx + 1}`,
+      () => {
+        const isListening = stateIdxMap.get(idx)?.isListening ?? false
+        handleSetListening(idx, !isListening)
+      },
+      [stateIdxMap],
+    )
+    useHotkeys(
+      `alt+shift+${idx + 1}`,
+      () => {
+        const isBlurred = stateIdxMap.get(idx)?.isBlurred ?? false
+        handleSetBlurred(idx, !isBlurred)
+      },
+      [stateIdxMap],
+    )
+  }
+
   return (
     <div>
       <h1>Stream Wall</h1>