use guacamole keyboard as TS module

client/public/index.html

@@ -18,6 +18,5 @@
       <strong>We're sorry but n.eko doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="neko"></div>
-    <script type="text/javascript" src="/Keyboard.js"></script>
   </body>
 </html>

client/src/components/video.vue

@@ -140,6 +140,8 @@
   import Emote from './emote.vue'
   import Resolution from './resolution.vue'
 
+  import GuacamoleKeyboard from '~/utils/guacamole-keyboard.ts'
+
   @Component({
     name: 'neko-video',
     components: {
@@ -156,6 +158,7 @@
     @Ref('video') readonly _video!: HTMLVideoElement
     @Ref('resolution') readonly _resolution!: any
 
+    private keyboard = GuacamoleKeyboard()
     private observer = new ResizeObserver(this.onResise.bind(this))
     private focused = false
     private fullscreen = false
@@ -333,37 +336,23 @@
       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) => {
+      /* Initialize Guacamole Keyboard */
+      this.keyboard.onkeydown = (key: number) => {
         if (!this.focused || !this.hosting || this.locked) {
-          return
+          return false
         }
 
         this.$client.sendData('keydown', { key })
-      };
-
-      // @ts-ignore
-      Keyboard.onkeyup = (key: number) => {
+        return true
+      }
+      this.keyboard.onkeyup = (key: number) => {
         if (!this.focused || !this.hosting || this.locked) {
           return
         }
 
         this.$client.sendData('keyup', { key })
-      };
-
-      // @ts-ignore
-      this.kbdReset = () => {
-        // @ts-ignore
-        Keyboard.reset();
       }
-
-      //Keyboard.release(keysym);
-      //Keyboard.type(str);
+      this.keyboard.listenTo(this._overlay)
     }
 
     beforeDestroy() {
@@ -371,6 +360,7 @@
       this.$accessor.video.setPlayable(false)
       document.removeEventListener('focusin', this.onFocus.bind(this))
       document.removeEventListener('focusout', this.onBlur.bind(this))
+      /* Guacamole Keyboard does not provide destroy functions */
     }
 
     play() {
@@ -438,8 +428,7 @@
         return
       }
 
-      // @ts-ignore
-      this.kbdReset();
+      this.keyboard.reset()
     }
 
     onMousePos(e: MouseEvent) {

client/src/utils/guacamole-keyboard.js

@@ -1511,3 +1511,5 @@ Guacamole.Keyboard.ModifierState.fromKeyboardEvent = function(e) {
     return state;
     
 };
+
+export default Guacamole.Keyboard;

client/src/utils/guacamole-keyboard.ts

@@ -0,0 +1,76 @@
+import GuacamoleKeyboard from './guacamole-keyboard.js'
+
+export interface GuacamoleKeyboardInterface {
+  /**
+   * Fired whenever the user presses a key with the element associated
+   * with this Guacamole.Keyboard in focus.
+   * 
+   * @event
+   * @param {Number} keysym The keysym of the key being pressed.
+   * @return {Boolean} true if the key event should be allowed through to the
+   *                   browser, false otherwise.
+   */
+  onkeydown?: (keysym: number) => boolean;
+
+  /**
+   * Fired whenever the user releases a key with the element associated
+   * with this Guacamole.Keyboard in focus.
+   * 
+   * @event
+   * @param {Number} keysym The keysym of the key being released.
+   */
+  onkeyup?: (keysym: number) => void;
+
+  /**
+   * Marks a key as pressed, firing the keydown event if registered. Key
+   * repeat for the pressed key will start after a delay if that key is
+   * not a modifier. The return value of this function depends on the
+   * return value of the keydown event handler, if any.
+   * 
+   * @param {Number} keysym The keysym of the key to press.
+   * @return {Boolean} true if event should NOT be canceled, false otherwise.
+   */
+  press: (keysym: number) => boolean;
+
+  /**
+   * Marks a key as released, firing the keyup event if registered.
+   * 
+   * @param {Number} keysym The keysym of the key to release.
+   */
+  release: (keysym: number) => void;
+  
+  /**
+   * Presses and releases the keys necessary to type the given string of
+   * text.
+   *
+   * @param {String} str
+   *     The string to type.
+   */
+  type: (str: string) => void;
+
+  /**
+   * Resets the state of this keyboard, releasing all keys, and firing keyup
+   * events for each released key.
+   */
+  reset: () => void;
+  
+  /**
+   * Attaches event listeners to the given Element, automatically translating
+   * received key, input, and composition events into simple keydown/keyup
+   * events signalled through this Guacamole.Keyboard's onkeydown and
+   * onkeyup handlers.
+   *
+   * @param {Element|Document} element
+   *     The Element to attach event listeners to for the sake of handling
+   *     key or input events.
+   */
+  listenTo: (element: Element | Document) => void;
+}
+
+export default function(element?: Element): GuacamoleKeyboardInterface {
+  var Keyboard = {};
+
+  GuacamoleKeyboard.bind(Keyboard, element)();
+
+  return Keyboard as GuacamoleKeyboardInterface;
+}