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

Cropping video now uses scale() and translate()

Browse Source
This commit is contained in:
Tamius Han 2018-05-25 21:37:09 +02:00
parent f5035b933d
commit e2d43fb46d
1 changed files with 38 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
js/modules/Resizer.js
View File

@ -82,7 +82,7 @@ class Resizer {
return; return;
} }
if(this.stretch.mode === StretchMode.CONDITIONAL){ if(this.stretch.mode === StretchMode.CONDITIONAL){
this.stretcher.applyConditionalStretch(stretchFactors, ar); this.stretcher.applyConditionalStretch(stretchFactors, ar);
} }
} else if (this.stretch.mode === StretchMode.HYBRID) { } else if (this.stretch.mode === StretchMode.HYBRID) {
var stretchFactors = this.stretcher.calculateStretch(ar); var stretchFactors = this.stretcher.calculateStretch(ar);
@ -91,8 +91,8 @@ class Resizer {
this.zoom.applyZoom(stretchFactors); this.zoom.applyZoom(stretchFactors);
//TODO: correct these two //TODO: correct these two
var cssOffsets = this.computeOffsets(stretchFactors); var translate = this.computeOffsets(stretchFactors);
this.applyCss(cssOffsets, stretchFactors); this.applyCss(stretchFactors, translate);
// if(! this.destroyed) // if(! this.destroyed)
// this.startCssWatcher(); // this.startCssWatcher();
@ -185,43 +185,31 @@ class Resizer {
// mostly internal stuff // mostly internal stuff
computeOffsets(videoDimensions){ computeOffsets(stretchFactors){
if(Debug.debug) if(Debug.debug)
console.log("[Resizer::_res_computeOffsets] video will be aligned to ", ExtensionConf.miscFullscreenSettings.videoFloat); console.log("[Resizer::_res_computeOffsets] video will be aligned to ", ExtensionConf.miscFullscreenSettings.videoFloat);
var offsets = { var actualWidth = this.conf.video.offsetWidth * stretchFactors.xFactor;
width: videoDimensions.width, var actualHeight = this.conf.video.offsetHeight * stretchFactors.yFactor;
height: videoDimensions.height,
left: 0, var translate = {x: 0, y: 0};
top: ((this.conf.player.dimensions.height - videoDimensions.height) / 2)
}
if(this.pan){ if(this.pan){
var defaultOffset = (this.conf.player.dimensions.height - videoDimensions.height) / 2; // todo: calculate translate
offsets.top = defaultOffset + (defualtOffset * this.pan.relativeOffsetY);
defaultOffset = (this.conf.player.dimensions.width - videoDimensions.width ) / 2;
offsets.left = defaultOffset + (defaultOffset * this.pan.relativeOffsetX);
} else { } else {
if( ExtensionConf.miscFullscreenSettings.videoFloat == "center" ){ if( ExtensionConf.miscFullscreenSettings.videoFloat == "left" ){
offsets.left = (this.conf.player.dimensions.width - videoDimensions.width ) / 2; translate.x = (this.conf.player.dimensions.width - actualWidth ) * -0.5;
} }
else if( ExtensionConf.miscFullscreenSettings.videoFloat == "right" ){ else if( ExtensionConf.miscFullscreenSettings.videoFloat == "right" ){
offsets.left = (this.conf.player.dimensions.height - videoDimensions.height); translate.x = (this.conf.player.dimensions.width - actualWidth ) * 0.5;
} }
} }
this.correctedVideoDimensions.width = parseInt(offsets.width); return translate;
this.correctedVideoDimensions.height= parseInt(offsets.height);
this.correctedVideoDimensions.left = parseInt(offsets.left);
this.correctedVideoDimensions.top = parseInt(offsets.top);
return offsets;
} }
applyCss(dimensions, stretchFactors){ applyCss(stretchFactors, translate){
if (! this.video ){ if (! this.video ){
if(Debug.debug) if(Debug.debug)
@ -233,76 +221,21 @@ class Resizer {
// save stuff for quick tests (before we turn numbers into css values): // save stuff for quick tests (before we turn numbers into css values):
this.currentVideoSettings = { this.currentVideoSettings = {
validFor: this.conf.player.dimensions, validFor: this.conf.player.dimensions,
videoWidth: dimensions.width, // videoWidth: dimensions.width,
videoHeight: dimensions.height // videoHeight: dimensions.height
} }
if(Debug.debug)
console.log("[Resizer::_res_applyCss] Starting to apply css. this is what we're getting in:", dimensions);
if(dimensions.top !== undefined)
dimensions.top = "top: " + Math.round(dimensions.top) + "px !important";
if(dimensions.left !== undefined)
dimensions.left = "left: " + Math.round(dimensions.left) + "px !important";
if(dimensions.width !== undefined)
dimensions.width = "width: " + Math.round(dimensions.width) + "px !important";
if(dimensions.height !== undefined)
dimensions.height = "height: " + Math.round(dimensions.height) + "px !important";
// misc.
dimensions.position = "position: absolute !important";
dimensions.margin = "margin: 0px !important";
// save values for left and top to
this.currentCss.top = dimensions.top;
this.currentCss.left = dimensions.left;
if(Debug.debug)
console.log("[Resizer::_res_applyCss] trying to apply css. Css strings: ", dimensions, "video tag: ", this.video);
var styleArrayStr = this.video.getAttribute('style'); var styleArrayStr = this.video.getAttribute('style');
if (styleArrayStr !== null && styleArrayStr !== undefined){ if (styleArrayStr) {
var styleArray = styleArrayStr.split(";"); var styleArray = styleArrayStr.split(";");
for(var i in styleArray){ for(var i in styleArray){
styleArray[i] = styleArray[i].trim(); styleArray[i] = styleArray[i].trim();
if (styleArray[i].startsWith("top:")){ if (styleArray[i].startsWith("transform:")){
styleArray[i] = dimensions.top; delete styleArray[i];
delete dimensions.top;
}
else if(styleArray[i].startsWith("left:")){
styleArray[i] = dimensions.left;
delete dimensions.left;
}
else if(styleArray[i].startsWith("width:")){
styleArray[i] = dimensions.width;
delete dimensions.width;
}
else if(styleArray[i].startsWith("height:")){
styleArray[i] = dimensions.height;
delete dimensions.height;
}
else if(styleArray[i].startsWith("position:")){
styleArray[i] = dimensions.position;
delete dimensions.position;
}
else if(styleArray[i].startsWith("margin:")){
styleArray[i] = dimensions.margin;
delete dimensions.margin;
}
else if(styleArray[i].startsWith("transform:")){
if(stretchFactors){
styleArray[i] = `scale(${stretchFactors.x}, ${stretchFactors.y}`;
stretchFactors = undefined;
}
} }
} }
} }
@ -311,17 +244,15 @@ class Resizer {
} }
// add remaining elements // add remaining elements
for(var key in dimensions)
styleArray.push( dimensions[key] );
if(stretchFactors){ if(stretchFactors){
styleArray.push(`scale(${stretchFactors.x}, ${stretchFactors.y}`); styleArray.push(`transform: scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor}) translate(${translate.x}px, ${translate.y}px)`);
} }
// build style string back // build style string back
var styleString = ""; var styleString = "";
for(var i in styleArray) for(var i in styleArray)
if(styleArray[i] !== undefined && styleArray[i] !== "") if(styleArray[i])
styleString += styleArray[i] + "; "; styleString += styleArray[i] + "; ";
this.setStyleString(styleString); this.setStyleString(styleString);
@ -335,30 +266,30 @@ class Resizer {
if(this.restore_wd){ if(this.restore_wd){
if(this.video == undefined || this.video == null){ if(! this.video){
if(Debug.debug) if(Debug.debug)
console.log("[Resizer::_res_setStyleString] Video element went missing, nothing to do here.") console.log("[Resizer::_res_setStyleString] Video element went missing, nothing to do here.")
return; return;
} }
if( // if(
styleString.indexOf("width: " + this.video.style.width) == -1 || // styleString.indexOf("width: " + this.video.style.width) == -1 ||
styleString.indexOf("height: " + this.video.style.height) == -1) { // styleString.indexOf("height: " + this.video.style.height) == -1) {
// css ni nastavljen? // // css ni nastavljen?
// css not set? // // css not set?
if(Debug.debug) // if(Debug.debug)
console.log("[Resizer::_res_setStyleString] Style string not set ???"); // console.log("[Resizer::_res_setStyleString] Style string not set ???");
if(count < ExtensionConf.resizer.setStyleString.maxRetries){ // if(count < ExtensionConf.resizer.setStyleString.maxRetries){
setTimeout( this.setStyleString, ExtensionConf.resizer.setStyleString.retryTimeout, count + 1); // setTimeout( this.setStyleString, ExtensionConf.resizer.setStyleString.retryTimeout, count + 1);
} // }
else if(Debug.debug){ // else if(Debug.debug){
console.log("[Resizer::_res_setStyleString] we give up. css string won't be set"); // console.log("[Resizer::_res_setStyleString] we give up. css string won't be set");
} // }
} // }
else{ // else{
this.restore_wd = false; this.restore_wd = false;
} // }
} }
else{ else{
if(Debug.debug) if(Debug.debug)