From 5cf9c2931922e5912fee06c0661f5dcf0726c7df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= Date: Mon, 15 Jun 2020 20:45:32 +0200 Subject: [PATCH] use guacamole keyboard as TS module --- client/public/index.html | 1 - client/src/components/video.vue | 35 +++------ .../utils/guacamole-keyboard.js} | 4 +- client/src/utils/guacamole-keyboard.ts | 76 +++++++++++++++++++ 4 files changed, 91 insertions(+), 25 deletions(-) rename client/{public/Keyboard.js => src/utils/guacamole-keyboard.js} (99%) create mode 100644 client/src/utils/guacamole-keyboard.ts diff --git a/client/public/index.html b/client/public/index.html index f187c9b..c410589 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -18,6 +18,5 @@ We're sorry but n.eko doesn't work properly without JavaScript enabled. Please enable it to continue.
- diff --git a/client/src/components/video.vue b/client/src/components/video.vue index 75dceb6..9023498 100644 --- a/client/src/components/video.vue +++ b/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) { diff --git a/client/public/Keyboard.js b/client/src/utils/guacamole-keyboard.js similarity index 99% rename from client/public/Keyboard.js rename to client/src/utils/guacamole-keyboard.js index df90f89..496dddc 100644 --- a/client/public/Keyboard.js +++ b/client/src/utils/guacamole-keyboard.js @@ -1510,4 +1510,6 @@ Guacamole.Keyboard.ModifierState.fromKeyboardEvent = function(e) { return state; -}; \ No newline at end of file +}; + +export default Guacamole.Keyboard; diff --git a/client/src/utils/guacamole-keyboard.ts b/client/src/utils/guacamole-keyboard.ts new file mode 100644 index 0000000..4ee1dfb --- /dev/null +++ b/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; +}