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

Stretcher.js instanced, can calculate aspect ratio factors from aspect ratios alone

Browse Source
This commit is contained in:
Tamius Han 2018-05-24 22:49:32 +02:00
parent 7d89f41e40
commit 547ef7ad7b
4 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/modules/PageInfo.js
View File

@ -201,7 +201,7 @@ class PageInfo {
}
}
setZoom(step){
zoomStep(step){
for(var vd of this.videos){
vd.zoomStep(step);
}

18
js/modules/Resizer.js
View File

@ -66,11 +66,11 @@ class Resizer {
this.videoData.destroy();
}
var dimensions = this.scaler.calculateCrop(ar);
var zoomFactors = this.scaler.calculateCrop(ar);
if(! dimensions || dimensions.error){
if(! zoomFactors || zoomFactors.error){
if(Debug.debug){
console.log("[Resizer::setAr] failed to set AR due to problem with calculating crop. Error:", (dimensions ? dimensions.error : dimensions));
console.log("[Resizer::setAr] failed to set AR due to problem with calculating crop. Error:", (zoomFactors ? zoomFactors.error : zoomFactors));
}
if(dimensions.error === 'no_video'){
this.conf.destroy();
@ -82,11 +82,11 @@ class Resizer {
// if we set stretching, we apply stretching
if (this.stretch.mode == StretchMode.FULL){
stretchFactors = Stretcher.calculateStretch(dimensions);
this.stretcher.calculateStretch(ar);
} else if (this.stretch.mode == StretchMode.CONDITIONAL) {
stretchFactors = Stretcher.conditionalStretch(dimensions, ExtensionConf.stretch.conditionalDifferencePercent);
this.stretcher.conditionalStretch(zoomFactors, ar);
}
this.zoom.applyZoom(dimensions);
// this.zoom.applyZoom(dimensions);
var cssOffsets = this.computeOffsets(dimensions);
this.applyCss(cssOffsets, stretchFactors);
@ -121,10 +121,10 @@ class Resizer {
startCssWatcher(){
// this.haltCssWatcher = false;
if(!this.cssWatcherTimeout){
if(Debug.debug)
console.log("[Resizer.js] STARTING CSS WATCHER")
// if(Debug.debug)
// console.log("[Resizer.js] STARTING CSS WATCHER")
this.cssWatcherTimeout = setInterval(this.cssWatcher, 200, this);
// this.cssWatcherTimeout = setInterval(this.cssWatcher, 200, this);
}
}

37
js/modules/Scaler.js
View File

@ -110,45 +110,30 @@ class Scaler {
console.log("[Scaler::calculateCrop] ar is " ,ar, ", file ar is", fileAr, ", this.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
var videoDimensions = {
width: 0,
height: 0,
xFactor: 1,
yFactor: 1,
actualWidth: 0, // width of the video (excluding pillarbox) when <video> tag height is equal to width
actualHeight: 0, // height of the video (excluding letterbox) when <video> tag height is equal to height
}
if(Debug.debug){
console.log("[Scaler::calculateCrop] Player dimensions?", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
}
// if(Debug.debug){
// console.log("[Scaler::calculateCrop] Player dimensions?", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
// }
if( fileAr < ar ){
// imamo letterbox zgoraj in spodaj -> spremenimo velikost videa (a nikoli širše od ekrana)
// letterbox -> change video size (but never to wider than monitor width)
videoDimensions.width = Math.min(this.conf.player.dimensions.height * ar, this.conf.player.dimensions.width);
videoDimensions.height = videoDimensions.width * (1/fileAr);
videoDimensions.xFactor = Math.min(ar, playerAr) / fileAr;
videoDimensions.yFactor = videoDimensions.xFactor;
}
else{
videoDimensions.height = Math.min(this.conf.player.dimensions.width / ar, this.conf.player.dimensions.height);
videoDimensions.width = videoDimensions.height * fileAr;
else {
videoDimensions.xFactor = fileAr / Math.max(ar, player);
videoDimensions.yFactor = videoDimensions.xFactor;
}
// izračunamo, kako visok/širok je video (brez črnih obrob). Če se željeno razmerje stranic
// ne ujema z razmerjem stranic predvajalnika, potem bomo še vedno videli črno obrobo bodisi
// zgoraj in spodaj, bodisi levo in desno. Zato v videoDimensions vključimo tudi dejansko
// velikost videa, da lahko Stretcher.js izračuna faktorje raztegovanja.
// Če je razmerje stranic predvajalnika širše kot želeno razmerje stranic, potem bosta `height`
// in `actualHeight` enaka, `actualWidth` pa bo izračunan na podlagi višine (in obratno).
if (ar > playerAr){
videoDimensions.actualHeight = videoDimensions.height;
videoDimensions.actualWidth = videoDimensions.height * ar;
} else {
videoDimensions.actualWidth = videoDimensions.width;
videoDimensions.actualHeight = videoDimensions.width / ar;
}
if(Debug.debug){
console.log("[Scaler::calculateCrop] Video dimensions: ", videoDimensions.width, "×", videoDimensions.height, "(obj:", videoDimensions, "); this.conf.player.dimensions:",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "(obj:", this.conf.player.dimensions, ")");
console.log("[Scaler::calculateCrop] Crop factor calculated — ", videoDimensions.xFactor);
}
return videoDimensions;

38
js/modules/Stretcher.js
View File

@ -13,7 +13,7 @@ class Stretcher {
this.conf = videoData;
}
static conditionalStretch(videoDimensions, maxDifferencePercent){
applyConditionalStretch(stretchFactors, actualAr){
// samo razširjamo, nikoli krčimo
// only stretch, no shrink
@ -37,19 +37,39 @@ class Stretcher {
}
}
static calculateStretch(videoDimensions) {
calculateStretch(actualAr) {
// naj ponovim: samo razširjamo, nikoli krčimo
// let me reiterate: only stretch, no shrink
var stretch = {x: 1, y: 1};
var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
var videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
if (videoDimensions.actualWidth < videoDimensions.width) {
stretch.x = videoDimensions.width / videoDimensions.actualWidth;
}
if (videoDimensions.actualHeight < videoDimensions.height){
stretch.y = videoDimensions.height / videoDimensions.actualHeight;
if (! actualAr){
actualAr = playerAr;
}
return stretch;
var stretchFactors = {
xFactor: 1,
yFactor: 1
};
if (actualAr > videoAr) {
if(videoAr > playerAr) {
stretchFactors.xFactor = playerAr / videoAr;
stretchFactors.yFactor = actualAr / videoAr;
} else {
stretchFactors.xFactor = 1;
stretchFactors.yFactor = actualAr / videoAr;
}
} else {
if (videoAr > playerAr) {
stretchFactors.xFactor = videoAr / actualAr;
stretchFactors.yFactor = playerAr / actualAr;
} else {
stretchFactors.xFactor = playerAr / actualAr;
stretchFactors.yFactor = 1;
}
}
return stretchFactors;
}
}