Stretch mode buttons work

js/lib/Comms.js

@@ -28,7 +28,7 @@ class CommsClient {
       this.hasSettings = true;
       ExtensionConf = message.conf;
     } else if (message.cmd === "set-stretch") {
-
+      this.pageInfo.setStretchMode(StretchMode[message.mode]);
     } else if (message.cmd === "autoar-enable") {
       if (message.enabled !== false) {
         this.pageInfo.initArDetection();
@@ -215,6 +215,9 @@ class CommsServer {
     if (message.cmd === 'get-config') {
       port.postMessage({cmd: "set-config", conf: ExtensionConf})
     }
+    if (message.cmd === 'set-stretch') {
+      this.sendToActive(message);
+    }
     if (message.cmd === 'set-ar') {
       this.sendToActive(message);
     }

js/modules/PageInfo.js

@@ -206,8 +206,10 @@ class PageInfo {
   }
   
   setStretchMode(sm){
+    // TODO: find a way to only change aspect ratio for one video
+    
     for(var vd of this.videos){
-      vd.setStretchMode(ar)
+      vd.setStretchMode(sm)
     }
   }
 

js/modules/Resizer.js

@@ -8,7 +8,6 @@ var StretchMode = {
   CONDITIONAL: 3
 }
 
-
 class Resizer {
   
   constructor(videoData){
@@ -108,6 +107,7 @@ class Resizer {
 
   setStretchMode(stretchMode){
     this.stretch.mode = stretchMode;
+    this.restore();
   }
 
   setPan(relativeMousePosX, relativeMousePosY){

js/modules/Stretcher.js

@@ -38,8 +38,8 @@ class Stretcher {
     var minW = this.conf.player.dimensions.width * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
     var maxW = this.conf.player.dimensions.width * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
 
-    var minX = this.conf.player.dimensions.height * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
+    var minH = this.conf.player.dimensions.height * (1 - ExtensionConf.stretch.conditionalDifferencePercent);
-    var maxX = this.conf.player.dimensions.height * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
+    var maxH = this.conf.player.dimensions.height * (1 + ExtensionConf.stretch.conditionalDifferencePercent);
 
     if (actualWidth >= minW && actualWidth <= maxW) {
       stretchFactors.xFactor *= this.conf.player.dimensions.width / actualWidth;
@@ -50,9 +50,6 @@ class Stretcher {
   }
 
   calculateStretch(actualAr) {
-    // naj ponovim: samo razširjamo, nikoli krčimo
-    // let me reiterate: only stretch, no shrink
-
     var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
     var videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
 
@@ -67,17 +64,29 @@ class Stretcher {
 
     if (actualAr > videoAr) {
       if(videoAr > playerAr) {
-        stretchFactors.xFactor = playerAr / videoAr;
+        if(Debug.debug){
+          console.log("[Stretcher.js::calculateStretch] stretching strategy 1")
+        }
+        stretchFactors.xFactor = playerAr / videoAr; // is this 1 then?
         stretchFactors.yFactor = actualAr / videoAr;
       } else {
-        stretchFactors.xFactor = 1;
+        if(Debug.debug){
+          console.log("[Stretcher.js::calculateStretch] stretching strategy 2")
+        }
+        stretchFactors.xFactor = playerAr / videoAr;
         stretchFactors.yFactor = actualAr / videoAr;
       }
     } else {
       if (videoAr > playerAr) {
+        if(Debug.debug){
+          console.log("[Stretcher.js::calculateStretch] stretching strategy 3")
+        }
         stretchFactors.xFactor = videoAr / actualAr;
         stretchFactors.yFactor = playerAr / actualAr;
       } else {
+        if(Debug.debug){
+          console.log("[Stretcher.js::calculateStretch] stretching strategy 4")
+        }
         stretchFactors.xFactor = playerAr / actualAr;
         stretchFactors.yFactor = 1;
       }

res/popup/js/popup.js

@@ -274,7 +274,7 @@ document.addEventListener("click", (e) => {
     if(e.target.classList.contains("_changeAr")){
       if(e.target.classList.contains("_ar_auto")){
         command.cmd = "autoar-enable";
-        command.enable = true;
+        command.enabled = true;
         return command;
       }
       if(e.target.classList.contains("_ar_reset")){
@@ -313,7 +313,22 @@ document.addEventListener("click", (e) => {
         return command;
       }
     }
-    
+    if(e.target.classList.contains("_stretch")){
+      if(e.target.classList.contains("_ar_stretch_none")) {
+        command.cmd = "set-stretch";
+        command.mode = "NO_STRETCH";
+      } else if(e.target.classList.contains("_ar_stretch_basic")) {
+        command.cmd = "set-stretch";
+        command.mode = "BASIC";
+      } else if(e.target.classList.contains("_ar_stretch_hybrid")) {
+        command.cmd = "set-stretch";
+        command.mode = "HYBRID";
+      } else if(e.target.classList.contains("_ar_stretch_conditional")) {
+        command.cmd = "set-stretch";
+        command.mode = "CONDITIONAL";
+      }
+      return command;
+    }
     if(e.target.classList.contains("_autoAr")){
       // var command = {};
       // if(e.target.classList.contains("_autoar_temp-disable")){

res/popup/popup.html

@@ -250,10 +250,10 @@
           </div>
           <span class="label">Stretching mode<br><small>Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
           <div class="button-row">
-            <a class="button _changeAr _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
+            <a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
-            <a class="button _changeAr _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
+            <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
-            <a class="button _changeAr _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
+            <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
-            <a class="button _changeAr _ar_stretch_conditional w24">Conditional<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
+            <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
           </div>
         </div>
         <!--<div class="row">