diff --git a/package-lock.json b/package-lock.json
index b2cdfee..e1845c5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 7344cf1..cd1eff5 100644
--- a/package.json
+++ b/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",
diff --git a/src/browser/overlay.js b/src/browser/overlay.js
index 80e538e..1525b72 100644
--- a/src/browser/overlay.js
+++ b/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 (