use guacamole kbd

client/src/components/video.vue

@@ -20,8 +20,6 @@
           @mouseup.stop.prevent="onMouseUp"
           @mouseenter.stop.prevent="onMouseEnter"
           @mouseleave.stop.prevent="onMouseLeave"
-          @keydown.stop.prevent="onKeyDown"
-          @keyup.stop.prevent="onKeyUp"
         />
         <div v-if="!playing" class="player-overlay">
           <i @click.stop.prevent="toggle" v-if="playable" class="fas fa-play-circle" />
@@ -142,8 +140,6 @@
   import Emote from './emote.vue'
   import Resolution from './resolution.vue'
 
-  import { mapKeyboardEventToKeySym } from '@/neko/keyboard.ts'
-
   @Component({
     name: 'neko-video',
     components: {
@@ -337,6 +333,31 @@
 
       document.addEventListener('focusin', this.onFocus.bind(this))
       document.addEventListener('focusout', this.onBlur.bind(this))
+
+      var Keyboard = {};
+
+      // @ts-ignore
+      Guacamole.Keyboard.bind(Keyboard, this._overlay)();
+
+      // @ts-ignore
+      Keyboard.onkeydown = (key: number) => {
+        if (!this.focused || !this.hosting || this.locked) {
+          return
+        }
+
+        this.$client.sendData('keydown', { key })
+        this.activeKeys.add(key)
+      };
+
+      // @ts-ignore
+      Keyboard.onkeyup = (key: number) => {
+        if (!this.focused || !this.hosting || this.locked) {
+          return
+        }
+
+        this.$client.sendData('keyup', { key })
+        this.activeKeys.delete(key)
+      };
     }
 
     beforeDestroy() {
@@ -479,26 +500,6 @@
       this.focused = false
     }
 
-    onKeyDown(e: KeyboardEvent) {
-      if (!this.focused || !this.hosting || this.locked) {
-        return
-      }
-
-      let key = mapKeyboardEventToKeySym(e)
-      this.$client.sendData('keydown', { key })
-      this.activeKeys.add(key)
-    }
-
-    onKeyUp(e: KeyboardEvent) {
-      if (!this.focused || !this.hosting || this.locked) {
-        return
-      }
-
-      let key = mapKeyboardEventToKeySym(e)
-      this.$client.sendData('keyup', { key })
-      this.activeKeys.delete(key)
-    }
-
     onResise() {
       let height = 0
       if (!this.fullscreen) {

client/src/neko/keyboard.ts

@@ -1,147 +0,0 @@
-const keyMap: Record<string, number> = {
-  'Backspace': 0xff08,
-  'Tab': 0xFF09,
-  'Enter': 0xFF0D,
-  'ShiftLeft': 0xFFE1,
-  'ShiftRight': 0xFFE2,
-  'ControlLeft': 0xFFE3,
-  'ControlRight': 0xFFE4,
-  'AltLeft': 0xFFE9,
-  'AltRight': 0xFFEA,
-  'MetaLeft': 0xFFEB, // Super key, or Meta key?
-  'MetaRight': 0xFFEC, // Super key, or Meta key?
-  'PrintScreen': 0xFF61,
-  'ContextMenu': 0xFF67,
-  'Pause': 0xFF13,
-  'CapsLock': 0xFFE5,
-  'Escape': 0xFF1B,
-  'Space': 0x0020,
-  'PageUp': 0xFF55,
-  'PageDown': 0xFF56,
-  'End': 0xFF57,
-  'Home': 0xFF50,
-  'ArrowLeft': 0xFF51,
-  'ArrowUp': 0xFF52,
-  'ArrowRight': 0xFF53,
-  'ArrowDown': 0xFF54,
-  'Insert': 0xFF63,
-  'Delete': 0xFFFF,
-  'Digit0': 0x0030,
-  'Digit1': 0x0031,
-  'Digit2': 0x0032,
-  'Digit3': 0x0033,
-  'Digit4': 0x0034,
-  'Digit5': 0x0035,
-  'Digit6': 0x0036,
-  'Digit7': 0x0037,
-  'Digit8': 0x0038,
-  'Digit9': 0x0039,
-  'KeyA': 0x0061,
-  'KeyB': 0x0062,
-  'KeyC': 0x0063,
-  'KeyD': 0x0064,
-  'KeyE': 0x0065,
-  'KeyF': 0x0066,
-  'KeyG': 0x0067,
-  'KeyH': 0x0068,
-  'KeyI': 0x0069,
-  'KeyJ': 0x006a,
-  'KeyK': 0x006b,
-  'KeyL': 0x006c,
-  'KeyM': 0x006d,
-  'KeyN': 0x006e,
-  'KeyO': 0x006f,
-  'KeyP': 0x0070,
-  'KeyQ': 0x0071,
-  'KeyR': 0x0072,
-  'KeyS': 0x0073,
-  'KeyT': 0x0074,
-  'KeyU': 0x0075,
-  'KeyV': 0x0076,
-  'KeyW': 0x0077,
-  'KeyX': 0x0078,
-  'KeyZ': 0x0079,
-  'KeyY': 0x007a,
-  'NumpadEnter': 0XFF8D,
-  'NumpadMultiply': 0xFFAA,
-  'NumpadAdd': 0xFFAB,
-  'NumpadSubtract': 0xFFAD,
-  'NumpadDivide': 0xFFAF,
-  'F1': 0xFFBE,
-  'F2': 0xFFBF,
-  'F3': 0xFFC0,
-  'F4': 0xFFC1,
-  'F5': 0xFFC2,
-  'F6': 0xFFC3,
-  'F7': 0xFFC4,
-  'F8': 0xFFC5,
-  'F9': 0xFFC6,
-  'F10': 0xFFC7,
-  'F11': 0xFFC8,
-  'F12': 0xFFC9,
-  'NumLock': 0xFF7F,
-  'ScrollLock': 0xFF14,
-
-  // l10s causes many problems
-  'Semicolon': 0x003b,
-  'Comma': 0x002c,
-  'Slash': 0x002f,
-  'Period': 0x002e,
-  'Minus': 0x002d,
-  'Backquote': 0x0060,
-  'BracketLeft': 0x005b,
-  'Backslash': 0x005c,
-  'BracketRight': 0x005d,
-  'Quote': 0x0022,
-  'Equal': 0x003d,
-};
-
-// If Num Lock is enabled [Original KeySym, Non-NumPad key (on US kbd)]
-const keyMap_numlock_enabled: Record<string, Array<number>> =  {
-  'Numpad0': [0xFFB0, 0x0030],
-  'Numpad1': [0xFFB1, 0x0031],
-  'Numpad2': [0xFFB2, 0x0032],
-  'Numpad3': [0xFFB3, 0x0033],
-  'Numpad4': [0xFFB4, 0x0034],
-  'Numpad5': [0xFFB5, 0x0035],
-  'Numpad6': [0xFFB6, 0x0036],
-  'Numpad7': [0xFFB7, 0x0037],
-  'Numpad8': [0xFFB8, 0x0038],
-  'Numpad9': [0xFFB9, 0x0039],
-  'NumpadDecimal': [0xFFAE, 0x002c]
-};
-
-// If Num Lock is disabled [Original KeySym, Non-NumPad key (on US kbd)]
-const keyMap_numlock_disabled: Record<string, Array<number>> =  {
-  'Numpad0': [0xFFB0, 0xff63],
-  'Numpad1': [0xFFB1, 0xFF57],
-  'Numpad2': [0xFFB2, 0xFF54],
-  'Numpad3': [0xFFB3, 0xFF56],
-  'Numpad4': [0xFFB4, 0xFF51],
-  'Numpad5': [0xFFB5, 0xff0b],
-  'Numpad6': [0xFFB6, 0xFF53],
-  'Numpad7': [0xFFB7, 0xFF50],
-  'Numpad8': [0xFFB8, 0xFF52],
-  'Numpad9': [0xFFB9, 0xFF55],
-  'NumpadDecimal': [0xFF9F, 0xFFFF],
-};
-
-export function mapKeyboardEventToKeySym(e: KeyboardEvent): number {
-  if (e.code in keyMap) {
-    return keyMap[e.code];
-  }
-
-  //// Handle Num Lock at Server
-  //if (isNumLockActive)) {
-  //  return keyMap_numlock_enabled[e.code][0];
-  //} else {
-  //  return keyMap_numlock_disabled[e.code][0];
-  //}
-
-  // Handle Num Lock at Client
-  if (e.getModifierState('NumLock')) {
-    return keyMap_numlock_enabled[e.code][1];
-  } else {
-    return keyMap_numlock_disabled[e.code][1];
-  }
-}