From 7fefe255ea3774d1582491d4965d73ba55418497 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 22 Mar 2022 01:23:15 +0100 Subject: [PATCH] Add some things we missed in initial implementation of pointer-events toggling --- src/csui/PlayerUiBase.vue | 58 +++++++++++++++++++++++---------------- src/ext/lib/uwui/UI.js | 46 ++++++++++++++----------------- 2 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/csui/PlayerUiBase.vue b/src/csui/PlayerUiBase.vue index 807d58b..488d493 100644 --- a/src/csui/PlayerUiBase.vue +++ b/src/csui/PlayerUiBase.vue @@ -135,8 +135,8 @@ export default { // NOTE: chromium doesn't allow us to access window.parent.location // meaning we will have to correct this value from our uwui-probe // messages ... which is a bummer. - // site: window.location.hostname, site: null, + origin: '*', // will be set appropriately once the first uwui-probe event is received lastProbeTs: null, uiVisible: true, @@ -185,30 +185,35 @@ export default { }, async created() { - try { - this.logger = new Logger(); - await this.logger.init({ - allowLogging: true, - }); + this.logger = new Logger(); + await this.logger.init({ + allowLogging: true, + }); - this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger}); - await this.settings.init(); - this.settingsInitialized = true; + this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger}); + await this.settings.init(); + this.settingsInitialized = true; - console.log("settings inited") + console.log("settings inited") - // set up communication with client script - window.addEventListener('message', event => { - console.log('[iframe] received event:', event) - try { - this.handleMessage(event); - } catch (e) { - console.error('could not handle message:', e) + // set up communication with client script + window.addEventListener('message', event => { + this.handleMessage(event); + }); + + /** + * Setup the "companion" onMouseMove handler to the one in the content script. + * We can handle events with the same function we use to handle events from + * the content script. + */ + document.addEventListener('mousemove', (event) => { + this.handleProbe({ + coords: { + x: event.clientX, + y: event.clientY } - }); - } catch (e) { - console.error('Failed to initiate ultrawidify player ui.', e); - } + }, this.origin); + }); }, methods: { @@ -226,8 +231,8 @@ export default { */ handleMessage(event) { if (event.data.action === 'uwui-probe') { - if (event.data.cmd === 'uwui-probe') { if (!this.site) { + this.origin = event.origin; this.site = event.origin.split('//')[1]; } this.handleProbe(event.data, event.origin); @@ -241,7 +246,7 @@ export default { */ handleProbe(eventData, origin) { if (eventData.ts < this.lastProbeTs) { - return; // i dont know if events can arrive out-of-order. Prolly not. We still check. + return; // i don't know if events can arrive out-of-order. Prolly not. We still check. } this.lastProbeTs = eventData.ts; @@ -269,12 +274,17 @@ export default { window.parent.postMessage( { - cmd: 'uwui-clickable', + action: 'uwui-clickable', clickable: isClickable, ts: +new Date() }, origin ); + }, + + selectTab(tab) { + console.log('selected tab:', tab); + console.warn('NOTE: tab selection is not syet inplemented!') } } } diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index bf35c81..1b978c1 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -13,7 +13,7 @@ class UI { this.uiURI = browser.runtime.getURL('/csui/csui.html'); this.extensionBase = browser.runtime.getURL('').replace(/\/$/, ""); - console.log('init init'); + this.eventBus = uiConfig.eventBus; this.init(); } @@ -51,41 +51,33 @@ class UI { iframe.style.border = 0; iframe.style.pointerEvents = 'none'; - // so we have a problem: we want iframe to be clickthrough everywhere except - // on our actual overlay. There's no nice way of doing that, so we need some - // extra javascript to deal with this + /* so we have a problem: we want iframe to be clickthrough everywhere except + * on our actual overlay. There's no nice way of doing that, so we need some + * extra javascript to deal with this. + * + * There's a second problem: while iframe is in clickable mode, onMouseMove + * will not work (as all events will be hijacked by the iframe). This means + * that iframe also needs to run its own instance of onMouseMove. + */ + iframe.onload = function() { - - function onMouseMove(event) { - let coords; - if (event.currentTarget === document) { - coords = { - x: event.pageX - iframe.offsetLeft, - y: event.pageY - iframe.offsetTop - } - } else { - coords = { - x: event.clientX, - y: event.clientY - } - } - + document.addEventListener('mousemove', (event) => { + const coords = { + x: event.pageX - iframe.offsetLeft, + y: event.pageY - iframe.offsetTop + }; // ask the iframe to check whether there's a clickable element iframe.contentWindow.postMessage( { - cmd: 'uwui-probe', + action: 'uwui-probe', coords, ts: +new Date() // this should be accurate enough for our purposes }, uiURI ); - - // iframe.style.pointerEvents = isClickable ? 'auto' : 'none'; - } - - document.addEventListener('mousemove', onMouseMove, true); + }, true); } rootDiv.appendChild(iframe); @@ -97,6 +89,7 @@ class UI { this.uiIframe = iframe; } + /** * Handles events received from the iframe. * @param {*} event @@ -105,12 +98,13 @@ class UI { console.log('[main] received event:', event.origin, this.uiURI, this.extensionBase, event) if (event.origin === this.extensionBase) { if (event.data.action === 'uwui-clickable') { - if (event.data.cmd === 'uwui-clickable') { if (event.data.ts < this.lastProbeResponseTs) { return; } this.lastProbeResponseTs = event.data.ts; this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none'; + } else { + this.eventBus.send(event.data.action, event.data.arguments); } } }