keyboard modifier state - client implementation

client/src/components/video.vue

@@ -480,16 +480,33 @@
       if (!this.hosting || this.locked) {
         return
       }
+
       this.onMousePos(e)
     }
 
     onMouseEnter(e: MouseEvent) {
+      if(this.hosting) {
+        this.$accessor.remote.syncKeyboardModifierState({
+          capsLock: e.getModifierState("CapsLock"),
+          numLock: e.getModifierState("NumLock"),
+          scrollLock: e.getModifierState("ScrollLock"),
+        })
+      }
+
       this._overlay.focus()
       this.onFocus()
       this.focused = true
     }
 
     onMouseLeave(e: MouseEvent) {
+      if(this.hosting) {
+        this.$accessor.remote.setKeyboardModifierState({
+          capsLock: e.getModifierState("CapsLock"),
+          numLock: e.getModifierState("NumLock"),
+          scrollLock: e.getModifierState("ScrollLock"),
+        })
+      }
+
       this.focused = false
     }
 

client/src/neko/events.ts

@@ -27,7 +27,7 @@ export const EVENT = {
     REQUESTING: 'control/requesting',
     CLIPBOARD: 'control/clipboard',
     GIVE: 'control/give',
-    KEYBOARD: 'control/keyboard'
+    KEYBOARD: 'control/keyboard',
   },
   CHAT: {
     MESSAGE: 'chat/message',

client/src/neko/messages.ts

@@ -122,7 +122,10 @@ export interface ControlClipboardPayload {
 }
 
 export interface ControlKeyboardPayload {
-  layout: string
+  layout?: string
+  capsLock?: boolean
+  numLock?: boolean
+  scrollLock?: boolean
 }
 
 /*

client/src/store/remote.ts

@@ -3,12 +3,18 @@ import { Member } from '~/neko/types'
 import { EVENT } from '~/neko/events'
 import { accessor } from '~/store'
 
+const keyboardModifierState =
+  (capsLock: boolean, numLock: boolean, scrollLock: boolean) =>
+    Number(capsLock) + 2*Number(numLock) + 4*Number(scrollLock)
+
 export const namespaced = true
 
 export const state = () => ({
   id: '',
   clipboard: '',
   locked: false,
+
+  keyboardModifierState: -1,
 })
 
 export const getters = getterTree(state, {
@@ -36,6 +42,10 @@ export const mutations = mutationTree(state, {
     state.clipboard = clipboard
   },
 
+  setKeyboardModifierState(state, { capsLock, numLock, scrollLock }) {
+    state.keyboardModifierState = keyboardModifierState(capsLock, numLock, scrollLock)
+  },
+
   setLocked(state, locked: boolean) {
     state.locked = locked
   },
@@ -44,6 +54,7 @@ export const mutations = mutationTree(state, {
     state.id = ''
     state.clipboard = ''
     state.locked = false
+    state.keyboardModifierState = -1
   },
 })
 
@@ -140,6 +151,15 @@ export const actions = actionTree(
       }
 
       $client.sendMessage(EVENT.CONTROL.KEYBOARD, { layout: accessor.settings.keyboard_layout })
+    },
+
+    syncKeyboardModifierState({ state, getters }, { capsLock, numLock, scrollLock }) {
+      if (state.keyboardModifierState === keyboardModifierState(capsLock, numLock, scrollLock)) {
+        return ;
+      }
+
+      accessor.remote.setKeyboardModifierState({ capsLock, numLock, scrollLock })
+      $client.sendMessage(EVENT.CONTROL.KEYBOARD, { capsLock, numLock, scrollLock })
     }
   },
 )