fix keyboard shortcut for tab switching

Author: zenoxs

package.json

@@ -17,6 +17,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
+    "@hfelix/electron-localshortcut": "^4.0.1",
     "@octokit/rest": "^19.0.3",
     "argon2": "^0.28.7",
     "axios": "^0.27.2",
@@ -33,6 +34,7 @@
     "js-beautify": "^1.14.3",
     "mobx": "^6.6.0",
     "mobx-state-tree": "^5.1.5",
+    "native-keymap": "^3.3.0",
     "object-hash": "^3.0.0",
     "rxjs": "^7.5.5",
     "typesafe-i18n": "^5.5.2",

packages/main/index.ts

@@ -4,11 +4,15 @@ import { Application } from './application'
 import { setupRootStore } from './store'
 import { setupTitlebar } from 'custom-electron-titlebar/main'
 import { logger } from './logger'
+import { electronLocalshortcut } from '@hfelix/electron-localshortcut'
+import { getCurrentKeyboardLayout, getKeyMap } from 'native-keymap'
 
 app.commandLine.appendSwitch('disable-site-isolation-trials')
 app.commandLine.appendSwitch('disable-renderer-backgrounding')
 app.commandLine.appendSwitch('disable-background-timer-throttling')
 
+electronLocalshortcut.setKeyboardLayout(getCurrentKeyboardLayout(), getKeyMap())
+
 // Disable GPU Acceleration for Windows 7
 if (release().startsWith('6.1')) app.disableHardwareAcceleration()
 

packages/main/windows/game-window.ts

@@ -6,6 +6,8 @@ import { EventEmitter } from 'stream'
 import TypedEmitter from 'typed-emitter'
 import { generateUserArgent } from '../utils'
 import { logger } from '../logger'
+import { observe } from 'mobx'
+import { electronLocalshortcut } from '@hfelix/electron-localshortcut'
 
 type GameWindowEvents = {
   close: (event: Event) => void
@@ -16,6 +18,7 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
   private readonly _teamWindow?: GameTeamWindow
   private readonly _team?: GameTeam
   private _isMuted = false
+  private readonly _shortcutStoreDisposer: () => void
 
   get id() {
     return this._win.webContents.id!
@@ -102,6 +105,19 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
       }
     })
 
+    this._shortcutStoreDisposer = observe(
+      this._store.hotkeyStore.window.tabs,
+      () => {
+        electronLocalshortcut.unregisterAll(this._win)
+        this._store.hotkeyStore.window.tabs.forEach((tab, index) => {
+          electronLocalshortcut.register(this._win, tab, () => {
+            this._win.webContents.send(IPCEvents.SELECT_TAB, index)
+          })
+        })
+      },
+      true
+    )
+
     if (app.isPackaged) {
       this._win.loadFile(join(__dirname, '../renderer/index.html'))
     } else {
@@ -131,6 +147,8 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
 
   private _close(event: Event) {
     this._win.removeAllListeners()
+    electronLocalshortcut.unregisterAll(this._win)
+    this._shortcutStoreDisposer()
     this.emit('close', event)
   }
 

packages/preload/index.ts

@@ -78,6 +78,17 @@ const subscribeToNewTab = (callback: () => void): (() => void) => {
   }
 }
 
+const subscribeToSelectTab = (callback: (tabIndex: number) => void): (() => void) => {
+  const listener = (e: IpcRendererEvent, tabIndex: number) => {
+    callback(tabIndex)
+  }
+  ipcRenderer.on(IPCEvents.SELECT_TAB, listener)
+
+  return () => {
+    ipcRenderer.removeListener(IPCEvents.SELECT_TAB, listener)
+  }
+}
+
 const subscribeToNextTab = (callback: () => void): (() => void) => {
   const listener = () => {
     callback()
@@ -260,6 +271,7 @@ const lindoApi: LindoAPI = {
   forwardPatchToMain,
   subscribeToIPCPatch,
   subscribeToNewTab,
+  subscribeToSelectTab,
   subscribeToNextTab,
   subscribeToPrevTab,
   subscribeToCloseTab,

packages/renderer/src/screens/main-screen/tab-manager/TabManager.tsx

@@ -1,8 +1,5 @@
-import { useConst } from '@/hooks'
 import { useStores } from '@/store'
-import { reaction } from 'mobx'
 import React, { useEffect } from 'react'
-import { Shortcuts } from 'shortcuts'
 export interface TabManagerProps {
   children: React.ReactNode
 }
@@ -11,8 +8,7 @@ export interface TabManagerProps {
  * Manage hotkeys and action for game tabs
  **/
 export const TabManager = ({ children }: TabManagerProps) => {
-  const { gameStore, hotkeyStore } = useStores()
-  const shortcuts = useConst(new Shortcuts())
+  const { gameStore } = useStores()
 
   useEffect(
     () =>
@@ -46,26 +42,11 @@ export const TabManager = ({ children }: TabManagerProps) => {
     []
   )
 
-  useEffect(() => {
-    const setTabHotKeys = () => {
-      shortcuts.reset()
-      shortcuts.add(
-        hotkeyStore.window.tabs.map((tab, index) => ({
-          shortcut: tab,
-          handler: () => {
-            gameStore.selectGameIndex(index)
-          }
-        }))
-      )
-    }
-    setTabHotKeys()
-    return reaction(
-      () => hotkeyStore.window.tabs,
-      () => {
-        setTabHotKeys()
-      }
-    )
-  }, [hotkeyStore.window.tabs])
+  useEffect(() =>
+    window.lindoAPI.subscribeToSelectTab((tabIndex: number) => {
+      gameStore.selectGameIndex(tabIndex)
+    })
+  )
 
   return <>{children}</>
 }

packages/renderer/src/store/game-store/game-store.ts

@@ -51,6 +51,7 @@ export const GameStoreModel = types
     selectGameIndex(index: number) {
       if (self.gamesOrder[index]) {
         self.selectedGame = self.gamesOrder[index]
+        self.selectedGame.setHasNotification(false)
       }
     }
   }))

packages/shared/constants/index.ts

@@ -11,6 +11,7 @@ export enum IPCEvents {
   APP_READY_TO_SHOW = 'APP_READY_TO_SHOW',
   FETCH_GAME_CONTEXT = 'FETCH_GAME_CONTEXT',
   NEW_TAB = 'NEW_TAB',
+  SELECT_TAB = 'SELECT_TAB',
   CLOSE_TAB = 'CLOSE_TAB',
   PREV_TAB = 'PREV_TAB',
   NEXT_TAB = 'NEXT_TAB',

packages/shared/types/lindo-api.ts

@@ -25,6 +25,7 @@ export interface LindoAPI {
   resetStore: () => void
   // hotkeys
   subscribeToNewTab: (callback: () => void) => () => void
+  subscribeToSelectTab: (callback: (tabIndex: number) => void) => () => void
   subscribeToNextTab: (callback: () => void) => () => void
   subscribeToPrevTab: (callback: () => void) => () => void
   subscribeToCloseTab: (callback: () => void) => () => void

yarn.lock

@@ -485,6 +485,13 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@hfelix/electron-localshortcut@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@hfelix/electron-localshortcut/-/electron-localshortcut-4.0.1.tgz#6ef31284c11e1388f2dab88ed8e71ed86b974c5d"
+  integrity sha512-tfmRcokNSGuMaOH67/acYQjtUHKGwsKrLrzYn14LD2lw4N69rdD2qH4f9trJLj7P2yyx90Ll9jP8jr1Jq7B6jA==
+  dependencies:
+    debug "^4.3.3"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@@ -2245,7 +2252,7 @@ [email protected], debug@^2.6.8, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4593,6 +4600,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+native-keymap@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/native-keymap/-/native-keymap-3.3.0.tgz#927ca6afcf4ebd986b5dc1bddfab4270e750915d"
+  integrity sha512-nvhI1Cdr+ywhpqqGdM+JM8EjMYA1s6SW8EqhWNKtffHU07JcTKDhd8N3o0TLSFn8y2YuRFoOwfAIzdTU6TVhDA==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"