From a2f0617d5acc8d669bc0b748954852219b97b9e4 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 28 Sep 2022 00:38:36 +0200 Subject: [PATCH] start splitting kbmHandler into keyboard and mouse handler --- src/ext/UWContent.ts | 20 +-- src/ext/conf/ExtensionConf.ts | 2 +- .../{KbmHandler.ts => kbm/KeyboardHandler.ts} | 115 ++++++++++++------ src/ext/lib/video-data/PageInfo.ts | 8 +- 4 files changed, 92 insertions(+), 53 deletions(-) rename src/ext/lib/{KbmHandler.ts => kbm/KeyboardHandler.ts} (70%) diff --git a/src/ext/UWContent.ts b/src/ext/UWContent.ts index be0140a..2f0a437 100644 --- a/src/ext/UWContent.ts +++ b/src/ext/UWContent.ts @@ -1,7 +1,7 @@ import Debug from './conf/Debug'; import ExtensionMode from '../common/enums/ExtensionMode.enum'; import Settings from './lib/Settings'; -import KbmHandler from './lib/KbmHandler'; +import KeyboardHandler from '../../../../KeyboardHandler'; import Comms from './lib/comms/Comms'; import CommsClient from './lib/comms/CommsClient'; import PageInfo from './lib/video-data/PageInfo'; @@ -13,7 +13,7 @@ export default class UWContent { pageInfo: PageInfo; comms: CommsClient; settings: Settings; - kbmHandler: KbmHandler; + keyboardHandler: KeyboardHandler; logger: Logger; eventBus: EventBus; @@ -133,17 +133,17 @@ export default class UWContent { this.pageInfo = new PageInfo(this.eventBus, this.settings, this.logger, extensionMode, isSiteDisabled); this.logger.log('info', 'debug', "[uw.js::setup] pageInfo initialized."); - this.logger.log('info', 'debug', "[uw.js::setup] will try to initate KbmHandler."); + this.logger.log('info', 'debug', "[uw.js::setup] will try to initate KeyboardHandler."); // start action handler only if extension is enabled for this site if (!isSiteDisabled) { - if (this.kbmHandler) { - this.kbmHandler.destroy(); + if (this.keyboardHandler) { + this.keyboardHandler.destroy(); } - this.kbmHandler = new KbmHandler(this.eventBus, this.settings, this.logger); - this.kbmHandler.init(); + this.keyboardHandler = new KeyboardHandler(this.eventBus, this.settings, this.logger); + this.keyboardHandler.init(); - this.logger.log('info', 'debug', "[uw.js::setup] KbmHandler initiated."); + this.logger.log('info', 'debug', "[uw.js::setup] KeyboardHandler initiated."); } } catch (e) { @@ -156,8 +156,8 @@ export default class UWContent { if (this.pageInfo) { this.pageInfo.destroy(); } - if (this.kbmHandler) { - this.kbmHandler.destroy(); + if (this.keyboardHandler) { + this.keyboardHandler.destroy(); } } } diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts index fc979ab..ca658c0 100644 --- a/src/ext/conf/ExtensionConf.ts +++ b/src/ext/conf/ExtensionConf.ts @@ -150,7 +150,7 @@ const ExtensionConf: SettingsInterface = { maxLogZoom: 3, announceDebounce: 200 // we wait this long before announcing new zoom }, - kbmHandler: { + keyboardHandler: { enabled: true, keyboardEnabled: true, mouseEnabled: true diff --git a/src/ext/lib/KbmHandler.ts b/src/ext/lib/kbm/KeyboardHandler.ts similarity index 70% rename from src/ext/lib/KbmHandler.ts rename to src/ext/lib/kbm/KeyboardHandler.ts index aeef37b..213200b 100644 --- a/src/ext/lib/KbmHandler.ts +++ b/src/ext/lib/kbm/KeyboardHandler.ts @@ -1,14 +1,14 @@ -import Debug from '../conf/Debug'; -import PlayerData from './video-data/PlayerData'; -import ExtensionMode from '../../common/enums/ExtensionMode.enum'; -import Logger from './Logger'; -import PageInfo from './video-data/PageInfo'; -import Settings from './Settings'; -import VideoData from './video-data/VideoData'; -import EventBus, { EventBusCommand } from './EventBus'; +import Debug from '../../conf/Debug'; +import PlayerData from '../video-data/PlayerData'; +import ExtensionMode from '../../../common/enums/ExtensionMode.enum'; +import Logger from '../Logger'; +import PageInfo from '../video-data/PageInfo'; +import Settings from '../Settings'; +import VideoData from '../video-data/VideoData'; +import EventBus, { EventBusCommand } from '../EventBus'; if(process.env.CHANNEL !== 'stable'){ - console.info("Loading KbmHandler"); + console.info("Loading KeyboardHandler"); } /** @@ -19,20 +19,20 @@ if(process.env.CHANNEL !== 'stable'){ * kbm-disable disables keyboard shortcuts and mouse panning * kbm-set-config sets configuration for this module. */ -class KbmHandler { +class KeyboardHandler { logger: Logger; settings: Settings; eventBus: EventBus; + playerElements: HTMLElement[] = []; + + allowShortcuts: boolean = true; inputs: string[] = ['input', 'select', 'button', 'textarea']; keyboardLocalDisabled: boolean = false; - keyboardEnabled: boolean = false; - mouseEnabled: boolean = false; - mouseMoveActions: any[] = []; keypressActions: any[] = []; @@ -46,6 +46,12 @@ class KbmHandler { 'kbm-set-config': { function: (data: {config: any, temporary?: boolean}) => this.setConfig(data.config, data.temporary), }, + 'uw-enable': { + function: () => this.load() + }, + 'uw-disable': { + function: () => this.disable() + }, } //#region lifecycle @@ -58,7 +64,7 @@ class KbmHandler { } init() { - this.logger.log('info', 'debug', "[KbmHandler::init] starting init"); + this.logger.log('info', 'debug', "[KeyboardHandler::init] starting init"); // build the action list — but only from actions that have shortcuts assigned for (const key in this.settings.active.commands) { @@ -73,9 +79,10 @@ class KbmHandler { } load() { - this.settings.active.kbmHandler.enabled ? this.addListener() : this.removeListener(); - this.keyboardEnabled = this.settings.active.kbmHandler.keyboardEnabled; - this.mouseEnabled = this.settings.active.kbmHandler.mouseEnabled; + if (!this.settings.isEnabledForSite() || this.settings.active.kbmHandler.enabled) { + return; + } + this.addListener(); } destroy() { @@ -88,21 +95,39 @@ class KbmHandler { // way, otherwise we can't remove event listener // https://stackoverflow.com/a/19507086 - document.addEventListener('keyup', this ); + if (this.settings.active.kbmHandler.keyboardEnabled) { + document.addEventListener('keyup', this ); + } } removeListener() { document.removeEventListener('keyup', this); } + + /** + * Adds listeners for mouse events, for all player elements associated with the KeyboardHandler instance. + * @param element + */ + addMouseListeners(element?: HTMLElement) { + if (element) { + this.playerElements.push(element); + + if (this.settings.active.kbmHandler.mouseEnabled) { + element.addEventListener('mousemove', this); + } + } else { + if (this.settings.active.kbmHandler.mouseEnabled) { + for (const playerElement of this.playerElements) { + playerElement.addEventListener('mousemove', this); + } + } + } + } //#endregion - enable() { - this.addListener(); - } - - disable() { - this.removeListener(); - } - + /** + * Current instance needs this method for document.addEventListener('keyup', this) to work + * @param event + */ handleEvent(event) { switch(event.type) { case 'keyup': @@ -115,7 +140,21 @@ class KbmHandler { } /** - * Sets configuration parameter for KbmHandler + * Enables KeyboardHandler + */ + enable() { + this.addListener(); + } + + /** + * Disables KeyboardHandler + */ + disable() { + this.removeListener(); + } + + /** + * Sets configuration parameter for KeyboardHandler * @param config */ setConfig(config, temporary = false) { @@ -146,7 +185,7 @@ class KbmHandler { registerHandleMouse(videoData) { - this.logger.log('info', ['KbmHandler', 'mousemove'], "[KbmHandler::registerHandleMouse] registering handle mouse for videodata:", videoData.id) + this.logger.log('info', ['KeyboardHandler', 'mousemove'], "[KeyboardHandler::registerHandleMouse] registering handle mouse for videodata:", videoData.id) var ths = this; if (videoData.player && videoData.player.element) { @@ -178,7 +217,7 @@ class KbmHandler { const preventAction = this.preventAction(event); this.logger.resume(); // undisable - this.logger.log('info', 'keyboard', "[KbmHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" + + this.logger.log('info', 'keyboard', "[KeyboardHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" + "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1, "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox", "\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text", @@ -268,18 +307,18 @@ class KbmHandler { handleKeyup(event) { if (!this.keyboardEnabled) { - this.logger.log('info', 'keyboard', "%c[KbmHandler::handleKeyup] kbmHandler.keyboardEnabled is set to false. Doing nothing."); + this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] kbmHandler.keyboardEnabled is set to false. Doing nothing."); return; } - this.logger.log('info', 'keyboard', "%c[KbmHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event); + this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event); try { if (this.preventAction(event)) { - this.logger.log('info', 'keyboard', "[KbmHandler::handleKeyup] we are in a text box or something. Doing nothing."); + this.logger.log('info', 'keyboard', "[KeyboardHandler::handleKeyup] we are in a text box or something. Doing nothing."); return; } - this.logger.log('info', 'keyboard', "%c[KbmHandler::handleKeyup] Trying to find and execute action for event. Actions/event: ", "color: #ff0", this.keypressActions, event); + this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] Trying to find and execute action for event. Actions/event: ", "color: #ff0", this.keypressActions, event); const isLatin = this.isLatin(event.key); @@ -289,18 +328,18 @@ class KbmHandler { } } } catch (e) { - this.logger.log('info', 'debug', '[KbmHandler::handleKeyup] Failed to handle keyup!', e); + this.logger.log('info', 'debug', '[KeyboardHandler::handleKeyup] Failed to handle keyup!', e); } } handleMouseMove(event, videoData?: VideoData) { if (!this.mouseEnabled) { - this.logger.log('info', 'keyboard', "%c[KbmHandler::handleKeyup] kbmHandler.keyboardEnabled is set to false. Doing nothing."); + this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] kbmHandler.keyboardEnabled is set to false. Doing nothing."); return; } - this.logger.log('info', 'keyboard', "[KbmHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData); + this.logger.log('info', 'keyboard', "[KeyboardHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData); console.info('mousemove must be migrated!'); // videoData?.panHandler(event); // this.execAction(this.mouseMoveActions, event, videoData) @@ -309,7 +348,7 @@ class KbmHandler { } if(process.env.CHANNEL !== 'stable'){ - console.info("KbmHandler loaded"); + console.info("KeyboardHandler loaded"); } -export default KbmHandler; +export default KeyboardHandler; diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts index 8a4492b..c3c8003 100644 --- a/src/ext/lib/video-data/PageInfo.ts +++ b/src/ext/lib/video-data/PageInfo.ts @@ -64,7 +64,7 @@ class PageInfo { kbmHandlerInitQueue: any[] = []; currentZoomScale: number = 1; - kbmHandler: any; + keyboardHandler: any; //#endregion constructor(eventBus: EventBus, settings: Settings, logger: Logger, extensionMode, readOnly = false){ @@ -125,10 +125,10 @@ class PageInfo { } initMouseActionHandler(videoData) { - if (this.kbmHandler) { - this.kbmHandler.registerHandleMouse(videoData); + if (this.keyboardHandler) { + this.keyboardHandler.registerHandleMouse(videoData); } else { - this.kbmHandlerInitQueue.push(videoData); + this.keyboardHandlerInitQueue.push(videoData); } }