From fc4f073e5dda9cecaca09bf5eafb54ca793a8454 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 5 Feb 2018 22:46:38 +0100 Subject: [PATCH] fix for #20 --- js/conf/Debug.js | 4 +-- js/conf/SitesConf.js | 66 ++++++++++++++++++------------------------- js/modules/Resizer.js | 56 ++++++++++++++++++++++++++++++++++-- js/run/GlobalVars.js | 7 ++++- js/uw.js | 25 ++++++++++++++-- manifest.json | 4 +-- 6 files changed, 114 insertions(+), 48 deletions(-) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index a93499c..aa4de47 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -1,6 +1,6 @@ // Set prod to true when releasing -_prod = true; -// _prod = false; +// _prod = true; +_prod = false; Debug = { debug: true, diff --git a/js/conf/SitesConf.js b/js/conf/SitesConf.js index 096b4c3..c808bf6 100644 --- a/js/conf/SitesConf.js +++ b/js/conf/SitesConf.js @@ -89,46 +89,34 @@ var _sc_init = function() { var _sc_SITES = { - "DEFAULT": { - enabled: "global", - type: "nonofficial", - autoAr: { - active: true, - passive: false, - nonfs: false - } - }, - "www.youtube.com" : { - enabled: "global", - type: "official", - autoAr: { - active: true, - passive: false, - nonfs: false, - } - }, "vimeo.com" : { - enabled: "global", - type: "official", - autoAr: { - active: true, - passive: false, - nonfs: true, - playerIdentificationString: "player_area-wrapper js-player_area-wrapper", - playerIdentificationType: "className", - nonfsPlayerMod: function(){ - // hack player to take all the width - $("head").append(''); - - var e = document.getElementsByClassName("player_outro_area")[0]; - e.classList.add("uw_forceFullWidth"); - e.classList.add("uw_forceCenter"); - e = document.getElementsByClassName("player_container")[0]; - e.classList.add("uw_forceFullWidth"); - e.classList.add("uw_forceCenter"); - - $("video")[0].style.display = "inline-block"; - } + extraCss: [], + bannedCss: [], + nonfsPlayerMod: function(){ + // hack player to take all the width + $("head").append(''); + + var e = document.getElementsByClassName("player_outro_area")[0]; + e.classList.add("uw_forceFullWidth"); + e.classList.add("uw_forceCenter"); + e = document.getElementsByClassName("player_container")[0]; + e.classList.add("uw_forceFullWidth"); + e.classList.add("uw_forceCenter"); + + $("video")[0].style.display = "inline-block"; + }, + fsPlayerMod: function(){ + // hack player to take all the width + $("head").append(''); + + var e = document.getElementsByClassName("player_outro_area")[0]; + e.classList.add("uw_forceFullWidth"); + e.classList.add("uw_forceCenter"); + e = document.getElementsByClassName("player_container")[0]; + e.classList.add("uw_forceFullWidth"); + e.classList.add("uw_forceCenter"); + + $("video")[0].style.display = "inline-block"; } } } diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index 4c99fe1..7ddcd45 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -274,12 +274,15 @@ function _res_applyCss(dimensions){ dimensions.position = "position: absolute !important"; dimensions.margin = "margin: 0px !important"; + // save values for left and top to GlobalVars + GlobalVars.currentCss.top = dimensions.top; + GlobalVars.currentCss.left = dimensions.left; + var vid = GlobalVars.video; if(Debug.debug) console.log("[Resizer::_res_applyCss] trying to apply css. Css strings: ", dimensions, "video tag: ", vid); - var styleArrayStr = vid.getAttribute('style'); if (styleArrayStr !== null && styleArrayStr !== undefined){ @@ -332,6 +335,54 @@ function _res_applyCss(dimensions){ _res_setStyleString(vid, styleString); } +var _res_antiCssOverride = function(){ + + // this means we haven't set our CSS yet, or that we changed video. + if(GlobalVars.currentCss.top === null) + return; + + + var styleArrayStr = GlobalVars.video.getAttribute('style'); + + if (styleArrayStr !== null && styleArrayStr !== undefined){ + var styleArray = styleArrayStr.split(";"); + + var stuffChecked = 0; + var stuffToCheck = 2; + + for(var i in styleArray){ + styleArray[i] = styleArray[i].trim(); + + if (styleArray[i].startsWith("top:")){ + if(styleArray[i] != GlobalVars.currentCss.top){ + if(Debug.debug){ + console.log("[Resizer::_res_antiCssOverride] SOMEBODY TOUCHED MA SPAGHETT (our CSS got overriden, restoring our css)"); + } + this.restore(); + return; + } + stuffChecked++; + } + else if(styleArray[i].startsWith("left:")){ + if(styleArray[i] != GlobalVars.currentCss.left){ + if(Debug.debug){ + console.log("[Resizer::_res_antiCssOverride] SOMEBODY TOUCHED MA SPAGHETT (our CSS got overriden, restoring our css)"); + } + this.restore(); + return; + } + stuffChecked++; + } + + if(stuffChecked == stufTToCheck){ + if(Debug.debug){ + console.log("[Resizer::_res_antiCssOverride] My spaghett rests untouched. (nobody overrode our CSS, doing nothing)"); + } + return; + } + } + } +} var _res_restore = function(){ if(Debug.debug){ @@ -362,5 +413,6 @@ var Resizer = { setAr: _res_setAr, legacyAr: _res_legacyAr, reset: _res_reset, - restore: _res_restore + restore: _res_restore, + antiCssOverride: _res_antiCssOverride } diff --git a/js/run/GlobalVars.js b/js/run/GlobalVars.js index bf67950..6d5bbf2 100644 --- a/js/run/GlobalVars.js +++ b/js/run/GlobalVars.js @@ -2,5 +2,10 @@ var GlobalVars = { video: null, player: null, playerDimensions: null, - lastAr: null + lastAr: null, + lastUrl: "", + currentCss: { + top: null, + left: null + } } diff --git a/js/uw.js b/js/uw.js index 735b566..aeebd15 100644 --- a/js/uw.js +++ b/js/uw.js @@ -67,14 +67,23 @@ async function main(){ browser.runtime.onMessage.addListener(receiveMessage); setInterval( ghettoOnChange, 33); + setInterval( ghettoUrlWatcher, 500); + + // ko se na ticevki zamenja video, console.log pravi da ultrawidify spremeni razmerje stranic. preglej element + // in pogled na predvajalnik pravita, da se to ni zgodilo. Iz tega sledi, da nam ticevka povozi css, ki smo ga + // vsilili. To super duper ni kul, zato uvedemo nekaj protiukrepov. + // + // when you change a video on youtube, console.log says that ultrawidify changes aspect ratio. inspect element + // and a look at youtube player, on the other hand, say this didn't happen. It seems that youtube overrides our + // css, and this is super duper uncool. Therefore, extra checks and measures. + setInterval( Resizer.antiCssOverride, 200); + } - // tukaj gledamo, ali se je velikost predvajalnika spremenila. Če se je, ponovno prožimo resizer // here we check (in the most ghetto way) whether player size has changed. If it has, we retrigger resizer. - var _video_recheck_counter = 0; var _video_recheck_period = 60; // on this many retries @@ -124,6 +133,18 @@ function ghettoOnChange(){ +function ghettoUrlWatcher(){ + if (GlobalVars.lastUrl != window.location.href){ + if(Debug.debug){ + console.log("[uw::ghettoUrlWatcher] URL has changed. Trying to retrigger autoAr"); + } + + GlobalVars.video = null; + GlobalVars.lastUrl = window.location.href; + main(); + } +} + diff --git a/manifest.json b/manifest.json index 127c0c0..ad97773 100644 --- a/manifest.json +++ b/manifest.json @@ -1,14 +1,14 @@ { "manifest_version": 2, "name": "Ultrawidify", - "version": "2.1.0", + "version": "2.1.1", "icons": { "32":"res/icons/uw-32.png", "64":"res/icons/uw-64.png" }, - "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.", + "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos. Now with more autodetection.", "content_scripts": [{ "matches": ["*://*/*"],