From 68b3589e7785325f5a95e602c099940bffd6baac Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Fri, 23 Aug 2019 02:25:48 +0200 Subject: [PATCH] Twitching issue was fixed but performance is shite --- src/ext/conf/Debug.js | 6 +-- src/ext/lib/comms/CommsServer.js | 2 +- src/ext/lib/video-data/PageInfo.js | 14 ++++++ src/ext/lib/video-data/VideoData.js | 5 +- src/ext/lib/video-transform/Resizer.js | 68 ++++++++++++++------------ src/ext/uw-bg.js | 2 +- src/popup/panels/WhatsNewPanel.vue | 12 ++--- 7 files changed, 62 insertions(+), 47 deletions(-) diff --git a/src/ext/conf/Debug.js b/src/ext/conf/Debug.js index 2c6cb5d..9c3e9bf 100644 --- a/src/ext/conf/Debug.js +++ b/src/ext/conf/Debug.js @@ -1,6 +1,6 @@ // Set prod to true when releasing -const _prod = true; -// const _prod = false; +// const _prod = true; +const _prod = false; var Debug = { // performanceMetrics: true, // should not be affected by debug.debug in order to allow benchmarking of the impact logging in console has @@ -19,7 +19,7 @@ var Debug = { // flushStoredSettings: false, // playerDetect: true, // periodic: true, - // videoRescan: true, + // // videoRescan: true, // mousemove: true, // arDetect: { // edgeDetect: true diff --git a/src/ext/lib/comms/CommsServer.js b/src/ext/lib/comms/CommsServer.js index b8f44d0..22246d4 100644 --- a/src/ext/lib/comms/CommsServer.js +++ b/src/ext/lib/comms/CommsServer.js @@ -220,7 +220,7 @@ class CommsServer { this.server.injectCss(message.cssString, sender); return; } - if (message.cmd === 'remove-css') { + if (message.cmd === 'remove-css' || message.cmd === 'eject-css') { this.server.removeCss(message.cssString, sender); return; } diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js index 5aeac23..da2b678 100644 --- a/src/ext/lib/video-data/PageInfo.js +++ b/src/ext/lib/video-data/PageInfo.js @@ -41,6 +41,20 @@ class PageInfo { this.currentZoomScale = 1; } + injectCss(cssString) { + this.comms.sendMessage({ + cmd: 'inject-css', + cssString: cssString + }); + } + + ejectCss(cssString) { + this.comms.sendMessage({ + cmd: 'eject-css', + cssString: cssString + }); + } + destroy() { if(Debug.debug || Debug.init){ console.log("[PageInfo::destroy] destroying all videos!") diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js index f738985..3f7b34c 100644 --- a/src/ext/lib/video-data/VideoData.js +++ b/src/ext/lib/video-data/VideoData.js @@ -13,6 +13,8 @@ class VideoData { this.pageInfo = pageInfo; this.extensionMode = pageInfo.extensionMode; + this.vdid = (Math.random()*100).toFixed(); + this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`; // POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji) // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last) @@ -30,12 +32,13 @@ class VideoData { this.resizer.reset(); - this.vdid = (Math.random()*100).toFixed(); if (Debug.init) { console.log("[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode); } this.pageInfo.initMouseActionHandler(this); + + this.video.classList.add(this.userCssClassName); } firstTimeArdInit(){ diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js index 33977a3..0961616 100644 --- a/src/ext/lib/video-transform/Resizer.js +++ b/src/ext/lib/video-transform/Resizer.js @@ -55,6 +55,9 @@ class Resizer { } else { this.canPan = false; } + + this.userCss = ''; + this.userCssClassName = videoData.userCssClassName; } start(){ @@ -67,6 +70,18 @@ class Resizer { this.stopCssWatcher(); } + injectCss(css) { + this.conf.pageInfo.injectCss(css); + } + + ejectCss(css) { + this.conf.pageInfo.ejectCss(css); + } + + prepareCss(css) { + return `.${this.userCssClassName} {${css}}`; + } + destroy(){ if(Debug.debug || Debug.init){ console.log(`[Resizer::destroy] received destroy command.`); @@ -211,7 +226,7 @@ class Resizer { if (! this.video) { // console.log("No video detected.") - this.videoData.destroy(); + this.conf.destroy(); } if (this.extensionMode === ExtensionMode.Enabled || PlayerData.isFullScreen()) { @@ -572,7 +587,7 @@ class Resizer { for(var i in styleArray) { if(styleArray[i]) { - styleString += styleArray[i] + "; "; + styleString += styleArray[i] + " !important; "; } } @@ -593,7 +608,7 @@ class Resizer { } if (Debug.debug && Debug.resizer) { - console.log("[Resizer::applyCss] will apply css.", {stretchFactors, translate}); + console.log("[Resizer::applyCss] will apply css.", {stretchFactors, translate, video: this.video}); } // save stuff for quick tests (before we turn numbers into css values): @@ -603,7 +618,6 @@ class Resizer { // videoHeight: dimensions.height } - const styleArrayString = this.video.getAttribute('style'); let extraStyleString; try { extraStyleString = this.settings.active.sites[window.location.host].DOM.video.additionalCss; @@ -611,51 +625,42 @@ class Resizer { // do nothing. It's ok if no special settings are defined for this site, we'll just do defaults } - const styleArray = this.buildStyleArray(styleArrayString, extraStyleString) + const styleArray = this.buildStyleArray('', extraStyleString) // add remaining elements - if (stretchFactors) { styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`); - styleArray.push("top: 0px; left: 0px; bottom: 0px; right: 0px"); + styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px"); } - const styleString = this.buildStyleString(styleArray); + const styleString = `${this.buildStyleString(styleArray)}${extraStyleString || ''}`; // string returned by buildStyleString() should end with ; anyway // build style string back this.setStyleString(styleString); } setStyleString (styleString) { - this.video.setAttribute("style", styleString); - this.currentStyleString = styleString; + // this.video.setAttribute("style", styleString); + // remove old CSS + if (this.userCss) { + this.ejectCss(this.userCss); + } + + // 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); + if (this.restore_wd) { if (!this.video){ if(Debug.debug) console.log("[Resizer::_res_setStyleString] Video element went missing, nothing to do here.") return; } - - // if( - // styleString.indexOf("width: " + this.video.style.width) == -1 || - // styleString.indexOf("height: " + this.video.style.height) == -1) { - // // css ni nastavljen? - // // css not set? - // if(Debug.debug) - // console.log("[Resizer::_res_setStyleString] Style string not set ???"); - - // if(count < settings.active.resizer.setStyleString.maxRetries){ - // setTimeout( this.setStyleString, settings.active.resizer.setStyleString.retryTimeout, count + 1); - // } - // else if(Debug.debug){ - // console.log("[Resizer::_res_setStyleString] we give up. css string won't be set"); - // } - // } - // else{ - this.restore_wd = false; - // } + this.restore_wd = false; } else{ if(Debug.debug) @@ -697,8 +702,7 @@ class Resizer { cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width; if (cssValid) { - const styleString = this.video.getAttribute('style'); - cssValid &= this.currentStyleString === styleString; + cssValid &= this.video.classList.contains(this.userCssClassName); } if (cssValid && this.currentPlayerStyleString) { // only check for changes to player element if we applied them before const playerStyleString = this.player.element.getAttribute('style'); diff --git a/src/ext/uw-bg.js b/src/ext/uw-bg.js index a05ddd0..e15f237 100644 --- a/src/ext/uw-bg.js +++ b/src/ext/uw-bg.js @@ -70,7 +70,7 @@ class UWServer { } removetCss(css, sender) { if (BrowserDetect.firefox || BrowserDetect.edge) { - browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId}); + browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); } else if (BrowserDetect.chrome) { chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); } diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue index 4f62e9d..d513822 100644 --- a/src/popup/panels/WhatsNewPanel.vue +++ b/src/popup/panels/WhatsNewPanel.vue @@ -2,17 +2,11 @@

What's new

Full changelog for older versions is available here.

-

4.2.2

+

4.2.3

    -
  • Fixed alignment issues for reddit on videos from v.reddit
    • -
  • Some people reported issues with inconsistent video alignment on youtube. While I've not been able to make that bug happen to me, - (which means I haven't been able to fix it either), reports describe behaviour similar to what was going on with Iridium. Examining - the Iridium issue revealed an issue that could be potentially blamed for this behaviour. That issue was fixed. Since I've never been able to make this problem - happen to me, I'm not being able to verify whether that issue is gone. If you're still experiencing issues with inconsistent video alignment, - please contact me via github, reddit or email. See 'Report a problem' tab for more details.
    • +
  • Fixed twitchy behaviour on Twitch, Facebook and Twatter.
- - +

As you can tell, I don't leave reddit and youtube much. To be fair, the twitching issue was intermittent on twitch.