From 5479b7ee9572f2218c2df77dfc756e1e9e48477f Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sat, 25 Jan 2025 20:51:22 +0100 Subject: [PATCH 1/4] Fix the iframe problem --- src/ext/lib/uwui/UI.js | 46 +++++++++++++++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index 25a6c52..93533d3 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -4,15 +4,6 @@ if (process.env.CHANNEL !== 'stable'){ console.info("Loading: UI"); } -// When this was first coded in summer of 2024, websites using color-scheme other than 'normal' -// displayed a black square over the video instead of a transparent iframe that we expect. -// StackOverflow said that this was a workaround for the issue, and it worked just fine. However, -// 6 months later, this fix is no longer working. Using csui-overlay-normal even on dark mode websites -// appears to give us a transparent iframe, as we require. -// Twitter is an example of a site using this color-scheme=dark property, so any changes to this code -// should be tested on this video: -// https://x.com/TheKhelIndia/status/1874019989357027511?mx=2 -// As of 1. 1. 2025, 'light' and 'dark' are commented out in order to force 'csui-overlay-normal' everywhere. const csuiVersions = { 'normal': 'csui', // csui-overlay-normal.html, maps to csui.html // 'light': 'csui-light', // csui-overlay-light.html, maps to csui-light.html @@ -48,6 +39,12 @@ class UI { this.iframeErrorCount = 0; this.iframeConfirmed = false; this.iframeRejected = false; + + // TODO: at some point, UI should be different for global popup and in-player UI + this.csuiScheme = this.getCsuiScheme(); + const csuiVersion = this.getCsuiVersion(this.csuiScheme.contentScheme); + this.uiURI = chrome.runtime.getURL(`/csui/${csuiVersion}.html`); + this.extensionBase = chrome.runtime.getURL('').replace(/\/$/, ""); } async init() { @@ -55,6 +52,30 @@ class UI { this.initMessaging(); } + + /** + * Returns color scheme we need to use. + * + * contentScheme is used to select the correct HTML template. + * iframeScheme gets applied to the iframe as style + * @returns {contentScheme: string, iframeScheme: string} + */ + getCsuiScheme() { + return { + contentScheme: window.getComputedStyle( document.body ,null).getPropertyValue('color-scheme'), + iframeScheme: document.documentElement.style.colorScheme || document.body.style.colorScheme || undefined + }; + } + + /** + * Returns correct template for given preferredScheme parameter + * @param {*} preferredScheme + * @returns + */ + getCsuiVersion(preferredScheme) { + return csuiVersions[preferredScheme] ?? csuiVersions.normal; + } + initIframes() { const random = Math.round(Math.random() * 69420); const uwid = `uw-ultrawidify-${this.interfaceId}-root-${random}` @@ -98,6 +119,12 @@ class UI { iframe.style.opacity = 0; iframe.style.backgroundColor = 'transparent !important'; + // If colorScheme is defined via CSS on the HTML or BODY elements, then we need to also + // put a matching style to the iframe itself. Using the correct UI template is not enough. + if (this.csuiScheme.iframeScheme) { + iframe.style.colorScheme = this.csuiScheme.iframeScheme; + } + /* 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. @@ -107,7 +134,6 @@ class UI { * that iframe also needs to run its own instance of onMouseMove. */ - // set uiIframe for handleMessage this.uiIframe = iframe; From 5da8073235f0a68d837777e8634b5b410a261c2b Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sat, 25 Jan 2025 21:08:09 +0100 Subject: [PATCH 2/4] fix conflict --- src/ext/lib/uwui/UI.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index 93533d3..d29e368 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -6,8 +6,8 @@ if (process.env.CHANNEL !== 'stable'){ const csuiVersions = { 'normal': 'csui', // csui-overlay-normal.html, maps to csui.html - // 'light': 'csui-light', // csui-overlay-light.html, maps to csui-light.html - // 'dark': 'csui-dark' // csui-overlay-dark.html, maps to csui-dark.html + 'light': 'csui-light', // csui-overlay-light.html, maps to csui-light.html + 'dark': 'csui-dark' // csui-overlay-dark.html, maps to csui-dark.html }; const MAX_IFRAME_ERROR_COUNT = 5; @@ -22,12 +22,6 @@ class UI { this.lastProbeResponseTs = null; this.isGlobal = uiConfig.isGlobal ?? false; - // TODO: at some point, UI should be different for global popup and in-player UI - const preferredScheme = window.getComputedStyle( document.body ,null).getPropertyValue('color-scheme'); - const csuiVersion = csuiVersions[preferredScheme] ?? csuiVersions.normal; - - this.uiURI = chrome.runtime.getURL(`/csui/${csuiVersion}.html`); - this.extensionBase = chrome.runtime.getURL('').replace(/\/$/, ""); this.eventBus = uiConfig.eventBus; this.disablePointerEvents = false; From 244e8227e7197e5330f83e5a4aaa6de3fac602b4 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sat, 25 Jan 2025 21:17:20 +0100 Subject: [PATCH 3/4] Settings: make setProp() functional --- src/ext/lib/Settings.ts | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts index c212ca8..62be451 100644 --- a/src/ext/lib/Settings.ts +++ b/src/ext/lib/Settings.ts @@ -323,8 +323,38 @@ class Settings { this.active = activeSettings; } - async setProp(prop, value) { - this.active[prop] = value; + /** + * Sets value of a prop at given path. + * @param propPath path to property we want to set. If prop path does not exist, + * this function will recursively create it. It is assumed that uninitialized properties + * are objects. + * @param value + */ + async setProp(propPath: string | string[], value: any, options?: {forceReload?: boolean}, currentPath?: any) { + if (!Array.isArray(propPath)) { + propPath = propPath.split('.'); + } + + if (!currentPath) { + currentPath = this.active; + } + + const currentProp = propPath.shift(); + + if (propPath.length) { + if (!currentPath[currentProp]) { + currentPath[currentProp] = {}; + } + this.setProp(propPath, value, options, currentPath[currentProp]); + } else { + currentPath[currentProp] = value; + + if (options?.forceReload) { + this.save(); + } else { + this.saveWithoutReload(); + } + } } async save(options?) { From 0bfe84d73d8756911a82b449d982cba9063841b1 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 22 Jan 2025 11:26:25 +0100 Subject: [PATCH 4/4] fix saving settings --- src/ext/lib/Settings.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts index 62be451..128cbb5 100644 --- a/src/ext/lib/Settings.ts +++ b/src/ext/lib/Settings.ts @@ -345,14 +345,14 @@ class Settings { if (!currentPath[currentProp]) { currentPath[currentProp] = {}; } - this.setProp(propPath, value, options, currentPath[currentProp]); + return this.setProp(propPath, value, options, currentPath[currentProp]); } else { currentPath[currentProp] = value; if (options?.forceReload) { - this.save(); + return this.save(); } else { - this.saveWithoutReload(); + return this.saveWithoutReload(); } } }