diff --git a/src/ext/conf/Debug.js b/src/ext/conf/Debug.js index e91e20a..c3f5be7 100644 --- a/src/ext/conf/Debug.js +++ b/src/ext/conf/Debug.js @@ -8,7 +8,7 @@ var Debug = { debug: true, // debug: false, // keyboard: true, - // debugResizer: true, + resizer: true, // debugArDetect: true, // scaler: true, // debugStorage: false, @@ -18,7 +18,7 @@ var Debug = { // showArDetectCanvas: true, // flushStoredSettings: true, // flushStoredSettings: false, - // playerDetectDebug: true, + playerDetect: true, // periodic: true, // videoRescan: true, // mousemove: true, diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js index 10c8c7c..48a2d3e 100644 --- a/src/ext/conf/ExtensionConf.js +++ b/src/ext/conf/ExtensionConf.js @@ -936,9 +936,9 @@ var ExtensionConf = { player: { manual: true, useRelativeAncestor: true, - querySelectors: '', + // querySelectors: '', videoAncestor: 1, - additionalCss: '', + // additionalCss: '', } } // videoElement: { // extra stuff for video tag diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js index 520f1b2..cfc7f83 100644 --- a/src/ext/lib/ar-detect/ArDetector.js +++ b/src/ext/lib/ar-detect/ArDetector.js @@ -572,8 +572,8 @@ class ArDetector { // this means canvas needs to be resized, so we'll just re-run setup with all those new parameters this.stop(); - var newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight); - var newCanvasHeight = window.innerHeight; + let newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight); + let newCanvasHeight = window.innerHeight; if (this.conf.resizer.videoAlignment === VideoAlignment.Center) { this.canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5); diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js index 8ce595f..44c32fb 100644 --- a/src/ext/lib/video-data/PlayerData.js +++ b/src/ext/lib/video-data/PlayerData.js @@ -233,7 +233,7 @@ class PlayerData { return false; } - getPlayer() { + getPlayer(isFullScreen) { const host = window.location.host; let element = this.video.parentNode; @@ -322,28 +322,28 @@ class PlayerData { element = element.parentNode; } - return element; + + + return playerCandidateNode; } getPlayerDimensions(){ - let element = this.getPlayer(); + const isFullScreen = PlayerData.isFullScreen(); + + const element = this.getPlayer(isFullScreen); if(! element ){ if(Debug.debug) { - console.log("[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element) - } - if(this.element) { - const ths = this; + console.log("[PlayerDetect::getPlayerDimensions] element is not valid, doing nothing.", element) } this.element = undefined; this.dimensions = undefined; return; } - var isFullScreen = PlayerData.isFullScreen(); - if (isFullScreen && playerCandidateNode == element) { + if (isFullScreen) { this.dimensions = { width: window.innerWidth, height: window.innerHeight, @@ -356,7 +356,7 @@ class PlayerData { } else { this.dimensions = { width: element.offsetWidth, - height: element.offsetWidth, + height: element.offsetHeight, fullscreen: isFullScreen }; if(this.element != element) { @@ -376,7 +376,7 @@ class PlayerData { // return true; // } - if(this.dimensions && this.dimensions.fullscreen){ + if (this.dimensions && this.dimensions.fullscreen){ if(! PlayerData.isFullScreen()){ console.log("[PlayerDetect] player size changed. reason: exited fullscreen"); } @@ -387,7 +387,7 @@ class PlayerData { if ( this.element && ( this.dimensions.width != this.element.offsetWidth || this.dimensions.height != this.element.offsetHeight ) - ){ + ) { console.log("[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.element.offsetWidth, this.element.offsetHeight); } } diff --git a/src/ext/lib/video-transform/CssHandler.js b/src/ext/lib/video-transform/CssHandler.js new file mode 100644 index 0000000..ec04fe1 --- /dev/null +++ b/src/ext/lib/video-transform/CssHandler.js @@ -0,0 +1,58 @@ +import Debug from '../../conf/Debug'; + +class CssHandler { + static buildStyleArray(existingStyleString, extraStyleString) { + if (existingStyleString) { + const styleArray = existingStyleString.split(";"); + + if (extraStyleString) { + const extraCss = extraStyleString.split(';'); + let dup = false; + + for (const ecss of extraCss) { + for (let i in styleArray) { + if (ecss.split(':')[0].trim() === styleArray[i].split(':')[0].trim()) { + dup = true; + styleArray[i] = ecss; + } + if (dup) { + dup = false; + continue; + } + styleArray.push(ecss); + } + } + } + + for (var i in styleArray) { + styleArray[i] = styleArray[i].trim(); + // some sites do 'top: 50%; left: 50%; transform: ' to center videos. + // we dont wanna, because we already center videos on our own + if (styleArray[i].startsWith("transform:") || + styleArray[i].startsWith("top:") || + styleArray[i].startsWith("left:") || + styleArray[i].startsWith("right:") || + styleArray[i].startsWith("bottom:") ){ + delete styleArray[i]; + } + } + return styleArray; + } + + return []; + } + + static buildStyleString(styleArray) { + let styleString = ''; + + for(var i in styleArray) { + if(styleArray[i]) { + styleString += styleArray[i] + "; "; + } + } + + return styleString; + } +} + +export default CssHandler; \ No newline at end of file diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js index 033f25a..f3fed98 100644 --- a/src/ext/lib/video-transform/Resizer.js +++ b/src/ext/lib/video-transform/Resizer.js @@ -30,6 +30,7 @@ class Resizer { this.correctedVideoDimensions = {}; this.currentCss = {}; this.currentStyleString = ""; + this.currentPlayerStyleString = ""; this.currentCssValidFor = {}; // restore watchdog. While true, applyCss() tries to re-apply new css until this value becomes false again @@ -96,7 +97,7 @@ class Resizer { if (! this.conf.player.dimensions) { ratioOut = screen.width / screen.height; } else { - if (Debug.debug && Debug.debugResizer) { + if (Debug.debug && Debug.resizer) { console.log(`[Resizer::calculateRatioForLegacyOptions] Player dimensions:`, this.conf.player.dimensions.width ,'x', this.conf.player.dimensions.height,'aspect ratio:', this.conf.player.dimensions.width / this.conf.player.dimensions.height) } ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height; @@ -194,7 +195,7 @@ class Resizer { // I'm not sure whether they do. Check that. ar = this.calculateRatioForLegacyOptions(ar); if (! ar) { - if (Debug.debug && Debug.debugResizer) { + if (Debug.debug && Debug.resizer) { console.log(`[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`); } return; @@ -525,6 +526,59 @@ class Resizer { return translate; } + buildStyleArray(existingStyleString, extraStyleString) { + if (existingStyleString) { + const styleArray = existingStyleString.split(";"); + + if (extraStyleString) { + const extraCss = extraStyleString.split(';'); + let dup = false; + + for (const ecss of extraCss) { + for (let i in styleArray) { + if (ecss.split(':')[0].trim() === styleArray[i].split(':')[0].trim()) { + dup = true; + styleArray[i] = ecss; + } + if (dup) { + dup = false; + continue; + } + styleArray.push(ecss); + } + } + } + + for (var i in styleArray) { + styleArray[i] = styleArray[i].trim(); + // some sites do 'top: 50%; left: 50%; transform: ' to center videos. + // we dont wanna, because we already center videos on our own + if (styleArray[i].startsWith("transform:") || + styleArray[i].startsWith("top:") || + styleArray[i].startsWith("left:") || + styleArray[i].startsWith("right:") || + styleArray[i].startsWith("bottom:") ){ + delete styleArray[i]; + } + } + return styleArray; + } + + return []; + } + + buildStyleString(styleArray) { + let styleString = ''; + + for(var i in styleArray) { + if(styleArray[i]) { + styleString += styleArray[i] + "; "; + } + } + + return styleString; + } + applyCss(stretchFactors, translate){ // apply extra CSS here. In case of duplicated properties, extraCss overrides // default styleString @@ -537,6 +591,10 @@ class Resizer { this.conf.destroy(); return; } + + if (Debug.debug && Debug.resizer) { + console.log("[Resizer::applyCss] will apply css.", {stretchFactors, translate}); + } // save stuff for quick tests (before we turn numbers into css values): this.currentVideoSettings = { @@ -545,78 +603,54 @@ class Resizer { // videoHeight: dimensions.height } - var styleArrayStr = this.video.getAttribute('style'); - - - if (styleArrayStr) { - var styleArray = styleArrayStr.split(";"); - - try { - const extraCss = this.settings.active.sites[window.location.host].DOM.video.additionalCss.split(';'); - let dup = false; - - for (const ecss of extraCss) { - for (let i in styleString) { - if (ecss.split(':')[0].trim() === styleString[i].split(':')[0].trim()) { - dup = true; - styleString[i] = ecss; - } - if (dup) { - dup = false; - continue; - } - styleString.push(ecss); - } - } - } catch (e) { - // do nothing. We just want to catch cases where things like that aren't defined - // for the current video - } - - for (var i in styleArray) { - styleArray[i] = styleArray[i].trim(); - - // some sites do 'top: 50%; left: 50%; transform: ' to center videos. - // we dont wanna, because we already center videos on our own - if (styleArray[i].startsWith("transform:") || - styleArray[i].startsWith("top:") || - styleArray[i].startsWith("left:") || - styleArray[i].startsWith("right:") || - styleArray[i].startsWith("bottom:") ){ - delete styleArray[i]; - } - } - }else { - var styleArray = []; + const styleArrayString = this.video.getAttribute('style'); + let extraStyleString; + try { + extraStyleString = this.settings.active.sites[window.location.host].DOM.video.additionalCss; + } catch (e) { + // 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) + // 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"); } + const styleString = this.buildStyleString(styleArray); + + // see if we have any extra css for the player element: + let playerStyleString; + try { + playerStyleString = this.settings.active.sites[window.location.host].DOM.player.additionalCss; + if (playerStyleString) { + const playerStyleArrayString = this.player.eleemnt.getAttribute('style'); + const playerStyleArray = this.buildStyleArray(playerStyleString, playerStyleString); + playerStyleString = this.buildStyleString(playerStyleArray); + } + } catch (e) { + // do nothing. It's ok if there's no special settings for the player element + } // build style string back - var styleString = ""; - for(var i in styleArray) { - if(styleArray[i]) { - styleString += styleArray[i] + "; "; - } - } - - this.setStyleString(styleString); + this.setStyleString(styleString, playerStyleString); } - setStyleString (styleString, count = 0) { + setStyleString (styleString, playerStyleString) { this.video.setAttribute("style", styleString); + this.currentStyleString = styleString; + + if (playerStyleString) { + this.player.element.setAttribute('style', styleString); + this.currentPlayerStyleString = playerStyleString; + } - this.currentStyleString = this.video.getAttribute('style'); this.currentCssValidFor = this.conf.player.dimensions; - if(this.restore_wd){ - - if(! this.video){ + if (this.restore_wd) { + if (!this.video){ if(Debug.debug) console.log("[Resizer::_res_setStyleString] Video element went missing, nothing to do here.") return; @@ -659,8 +693,8 @@ class Resizer { // } // this means video went missing. videoData will be re-initialized when the next video is found - if(! this.video){ - if(Debug.debug && Debug.debugResizer) { + if (!this.video){ + if(Debug.debug && Debug.resizer) { console.log("[Resizer::cssCheck] no video detecting, issuing destroy command"); } this.conf.destroy(); @@ -668,23 +702,35 @@ class Resizer { } if(this.destroyed) { - if(Debug.debug && Debug.debugResizer) { + if(Debug.debug && Debug.resizer) { console.log("[Resizer::cssCheck] destroyed flag is set, we shouldnt be running"); } this.stopCssWatcher(); return; } - var styleString = this.video.getAttribute('style'); + let cssValid = true; // first, a quick test: - // if (this.currentVideoSettings.validFor == this.conf.player.dimensions ){ - if (this.currentStyleString !== styleString){ - if(Debug.debug && Debug.debugResizer) { + cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width; + cssValid &= this.currentVideoSettings.validFor.height === this.conf.player.dimensions.height; + + if (cssValid) { + const styleString = this.video.getAttribute('style'); + cssValid &= this.currentStyleString === styleString; + } + if (cssValid && this.currentPlayerStyleString) { // only check for changes to player element if we applied them before + const playerStyleString = this.player.element.getAttribute('style'); + cssValid &= this.currentPlayerStyleString === playerStyleString; + } + if (!cssValid){ + if(Debug.debug && Debug.resizer) { console.log(`%c[Resizer::cssCheck] something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'}); } this.restore(); this.scheduleCssWatcher(10); + + return; } if (this.cssWatcherIncreasedFrequencyCounter > 0) { --this.cssWatcherIncreasedFrequencyCounter;