tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Manually assigning players sorta works, but is bugged

Browse Source
This commit is contained in:
Tamius Han 2019-06-12 23:55:15 +02:00
parent 26610f2e00
commit afefed7f34
6 changed files with 188 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ext/conf/Debug.js
View File

@ -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,

4
src/ext/conf/ExtensionConf.js
View File

@ -936,9 +936,9 @@ var ExtensionConf = {
player: {
manual: true,
useRelativeAncestor: true,
querySelectors: '',
// querySelectors: '',
videoAncestor: 1,
additionalCss: '',
// additionalCss: '',
}
}
// videoElement: { // extra stuff for video tag

4
src/ext/lib/ar-detect/ArDetector.js
View File

@ -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);

24
src/ext/lib/video-data/PlayerData.js
View File

@ -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);
}
}

58
src/ext/lib/video-transform/CssHandler.js Normal file
View File

@ -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: <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;

178
src/ext/lib/video-transform/Resizer.js
View File

@ -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] <rid:${this.resizerId}> 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: <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] <rid:"+this.resizerId+"> 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: <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] <rid:"+this.resizerId+"> 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] <rid:"+this.resizerId+"> 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] <rid:"+this.resizerId+"> 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] <rid:${this.resizerId}> 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;