use guacamole keyboard as TS module

This commit is contained in:
Miroslav Šedivý 2020-06-15 20:45:32 +02:00
parent 8a56f238ad
commit 5cf9c29319
4 changed files with 91 additions and 25 deletions

View File

@ -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>

View File

@ -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) {

View File

@ -1510,4 +1510,6 @@ Guacamole.Keyboard.ModifierState.fromKeyboardEvent = function(e) {
return state;
};
};
export default Guacamole.Keyboard;

View File

@ -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;
}