diff --git a/src/ext/lib/comms/CommsServer.js b/src/ext/lib/comms/CommsServer.js index 22246d4..51a982a 100644 --- a/src/ext/lib/comms/CommsServer.js +++ b/src/ext/lib/comms/CommsServer.js @@ -224,6 +224,9 @@ class CommsServer { this.server.removeCss(message.cssString, sender); return; } + if (message.cmd === 'replace-css') { + this.server.replaceCss(message.oldCssString, message.newCssString, sender); + } if (message.forwardToContentScript) { if (Debug.debug && Debug.comms) { diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js index da2b678..fc2726c 100644 --- a/src/ext/lib/video-data/PageInfo.js +++ b/src/ext/lib/video-data/PageInfo.js @@ -55,6 +55,14 @@ class PageInfo { }); } + replaceCss(oldCssString, newCssString) { + this.comms.sendMessage({ + cmd: 'replace-css', + newCssString, + oldCssString + }); + } + destroy() { if(Debug.debug || Debug.init){ console.log("[PageInfo::destroy] destroying all videos!") diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js index 0961616..cc07cc5 100644 --- a/src/ext/lib/video-transform/Resizer.js +++ b/src/ext/lib/video-transform/Resizer.js @@ -77,6 +77,10 @@ class Resizer { ejectCss(css) { this.conf.pageInfo.ejectCss(css); } + + replaceCss(oldCss, newCss) { + this.conf.pageInfo.replaceCss(oldCss, newCss); + } prepareCss(css) { return `.${this.userCssClassName} {${css}}`; @@ -639,20 +643,21 @@ class Resizer { } setStyleString (styleString) { - // this.video.setAttribute("style", styleString); + this.currentCssValidFor = this.conf.player.dimensions; + const newCssString = this.prepareCss(styleString); - // remove old CSS - if (this.userCss) { - this.ejectCss(this.userCss); + // inject new CSS or replace existing one + if (!this.userCss) { + this.injectCss(newCssString); + this.userCss = newCssString; + } else { + this.replaceCss(this.userCss, newCssString); + this.userCss = newCssString; } - // this.currentStyleString = styleString; - this.currentCssValidFor = this.conf.player.dimensions; - this.userCss = this.prepareCss(styleString); - - // inject new CSS - this.injectCss(this.userCss); - this.video.classList.add(this.userCssClassName); + // browser checks and ignores duplicate classes, so no point in checking whether we've already + // added the extra class ourselves on top of that. Twice the work, but not much benefit + this.video.classList.add(this.userCssClassName); if (this.restore_wd) { if (!this.video){ diff --git a/src/ext/uw-bg.js b/src/ext/uw-bg.js index e15f237..85e389b 100644 --- a/src/ext/uw-bg.js +++ b/src/ext/uw-bg.js @@ -58,7 +58,7 @@ class UWServer { console.log("[uwbg::injectCss] Injecting CSS:", css, sender); } if (BrowserDetect.firefox || BrowserDetect.edge) { - await browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); + browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); } else if (BrowserDetect.chrome) { chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); } @@ -68,7 +68,7 @@ class UWServer { } } } - removetCss(css, sender) { + async removeCss(css, sender) { if (BrowserDetect.firefox || BrowserDetect.edge) { browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); } else if (BrowserDetect.chrome) { @@ -76,6 +76,11 @@ class UWServer { } } + async replaceCss(oldCss, newCss, sender) { + this.injectCss(newCss, sender); + this.removeCss(oldCss, sender); + } + scheduleGc(timeout) { if (this._gctimeout) { return;