tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add some things we missed in initial implementation of pointer-events toggling

Browse Source
This commit is contained in:
Tamius Han 2022-03-22 01:23:15 +01:00
parent 3423aac49a
commit 7fefe255ea
2 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/csui/PlayerUiBase.vue
View File

@ -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!')
}
}
}

46
src/ext/lib/uwui/UI.js
View File

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