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

js/modules/PageInfo.js

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

js/modules/Resizer.js

@@ -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)
+      // if(Debug.debug)
-        console.log("[Resizer.js] STARTING CSS WATCHER")
+        // console.log("[Resizer.js] STARTING CSS WATCHER")
   
-      this.cssWatcherTimeout = setInterval(this.cssWatcher, 200, this);
+      // this.cssWatcherTimeout = setInterval(this.cssWatcher, 200, this);
     }
   }
 

js/modules/Scaler.js

@@ -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,
+      xFactor: 1,
-      height: 0,
+      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){
+    // if(Debug.debug){
-      console.log("[Scaler::calculateCrop] Player dimensions?", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
+    //   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.xFactor = Math.min(ar, playerAr) / fileAr;
-        videoDimensions.height = videoDimensions.width * (1/fileAr);
+        videoDimensions.yFactor = videoDimensions.xFactor;
     }
-    else{
+    else {
-        videoDimensions.height = Math.min(this.conf.player.dimensions.width / ar, this.conf.player.dimensions.height);
+        videoDimensions.xFactor = fileAr / Math.max(ar, player);
-        videoDimensions.width = videoDimensions.height * fileAr;
+        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;

js/modules/Stretcher.js

@@ -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) {
+    if (! actualAr){
-      stretch.x = videoDimensions.width / videoDimensions.actualWidth;
+      actualAr = playerAr;
-    }
-    if (videoDimensions.actualHeight < videoDimensions.height){
-      stretch.y = videoDimensions.height / videoDimensions.actualHeight;
     }
 
-    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;
   }
 }