Implemented zoom

js/conf/ExtensionConf.js

@@ -88,6 +88,11 @@ var ExtensionConf = {
   miscFullscreenSettings: {
     videoFloat: "center"
   },
+  stretch: {
+    initialMode: 0,                     // 0 - no stretch, 1 - conditional, 2 - full
+    conditionalDifferencePercent: 0.05  // black bars less than this wide will trigger stretch
+                                        // if mode is set to '1'. 1.0=100%
+  },
   colors:{
     //     criticalFail: "background: #fa2; color: #000"
   }

js/lib/VideoData.js

@@ -4,7 +4,18 @@ class VideoData {
     this.video = video;
     // todo: add ArDetect instance
     this.arDetector = new ArDetector(video);
-    this.resizer = new Resizer();
+    this.resizer = new Resizer(this);
+
+    // player dimensions need to be in:
+    // this.player.dimensions
+  }
+
+  initAr() {
+    this.arDetector.init();
+  }
+
+  startAr() {
+    this.arDetector.start();
   }
 
   destroy() {

js/modules/ArDetect.js

@@ -10,6 +10,8 @@ class ArDetector {
     // todo: dynamically detect the following two
     this.canFallback = true;
     this.fallbackMode = false;
+
+    this.init();
   }
 
   init(){

js/modules/Resizer.js

@@ -1,116 +1,70 @@
 if(Debug.debug)
   console.log("Loading: Resizer.js");
 
-// restore watchdog. While true, _res_applyCss() tries to re-apply new css until this value becomes false again
+
-// value becomes false when width and height of <video> tag match with what we want to set. Only necessary when
+
-// calling _res_restore() for some weird reason.
+var StretchMode = {
-var _res_restore_wd = false;  
+  NO_STRETCH = 0,
+  CONDITIONAL = 1,
+  FULL = 2
+}
+
 
 class Resizer {
   
-  constructor(videoData, player){
+  constructor(videoData){
-    this.videoData = videoData;
+    this.conf = videoData;
     this.video = videoData.video;
 
-    this.player = player;
+
+    this.scaler = new Scaler();
+    this.stretcher = new Stretcher(); 
+    this.zoom = new Zoom();
+
+    // load up default values
+    this.stretch = {mode: ExtensionConf.stretch.initialMode};
+
+    // restore watchdog. While true, applyCss() tries to re-apply new css until this value becomes false again
+    // value becomes false when width and height of <video> tag match with what we want to set. Only necessary when
+    // calling _res_restore() for some weird reason.
+    this.restore_wd = false;
   }
   
-  setAr(ar){
+  setAr(ar, lastAr){
     if(Debug.debug){
       console.log('[Resizer::setAr] trying to set ar. New ar:', ar)
     }
 
+    if(lastAr) {
+      this.lastAr = lastAr;
+    } else {
       this.lastAr = {type: 'static', ar: ar};
+    }
 
     if (! this.video) {
       console.log("No video detected.")
       this.videoData.destroy();
     }
+
+
+    var dimensions = Scaler.calculateCrop(ar, this.video, this.conf.player.dimensions);
+    var stretchFactors;
+
+    // if we set stretching, we apply stretching
+    if (this.stretch.mode == StretchMode.FULL){
+      stretchFactors = Stretcher.calculateStretch(dimensions);
+    } else if (this.stretch.mode == StretchMode.CONDITIONAL) {
+      stretchFactors = Stretcher.conditionalStretch(dimensions, ExtensionConf.stretch.conditionalDifferencePercent);
     }
 
+    zoom.applyZoom(dimensions);
+
   }
 
 
-var _res_setAr = function(ar){
-  if(Debug.debug)
-    console.log("[Resizer::_res_setAr] trying to set ar. args are: ar->",ar,"; playerDimensions->",GlobalVars.playerDimensions.width, "×", GlobalVars.playerDimensions.height, "| obj:", GlobalVars.playerDimensions);
-
-  GlobalVars.lastAr = {type: "static", ar: ar};
-    
-  var vid = GlobalVars.video;
-  if(vid == null || vid==undefined || vid.videoWidth == 0 || vid.videoHeight == 0){
-    vid =  document.getElementsByTagName("video")[0];
-    GlobalVars.video = vid;
-    
-    if(vid == null || vid==undefined || vid.videoWidth == 0 || vid.videoHeight == 0){
-      if(Debug.debug)
-        console.log("[Resizer::_res_setAr] I lied. Tricked you! You thought there's gonna be a video, didn't you? Never would be.", vid);   // of course that's thorin reference -> https://youtu.be/OY5gGkeQn1c?t=1m20s
-      return;
-    }
-  }
-  
-  if(Debug.debug)
-    console.log("[Resizer::_res_setAr] video:",vid,"width:", vid.videoWidth, "height:", vid.videoHeight);
-  
-  if(! GlobalVars.playerDimensions || GlobalVars.playerDimensions.width === 0 || GlobalVars.playerDimensions.height){
-    GlobalVars.playerDimensions = PlayerDetect.getPlayerDimensions(vid);
-    
-    if(Debug.debug)
-      console.log("[Resizer::_res_setAr] playerDimensions are undefined, trying to determine new ones ... new dimensions:", GlobalVars.playerDimensions.width, "×", GlobalVars.playerDimensions.height, "| obj:", GlobalVars.playerDimensions);
-
-    if(! GlobalVars.playerDimensions || GlobalVars.playerDimensions.width === 0 || GlobalVars.playerDimensions.height === 0){
-      if(Debug.debug)
-        console.log("[Resizer::_res_setAr] failed to get player dimensions. Doing nothing. Here's the object:", GlobalVars.playerDimensions);
-      return;
-    }
 }
 
 
-  // Dejansko razmerje stranic datoteke/<video> značke
-  // Actual aspect ratio of the file/<video> tag
-  var fileAr = vid.videoWidth / vid.videoHeight;
-  var playerAr = GlobalVars.playerDimensions.width / GlobalVars.playerDimensions.height;
-
-  if(ar == "default" || !ar)
-    ar = fileAr;
-
-  
-  if(Debug.debug)
-    console.log("[Resizer::_res_setAr] ar is " ,ar, ", file ar is", fileAr, ", playerDimensions are ", GlobalVars.playerDimensions.width, "×", GlobalVars.playerDimensions.height, "| obj:", GlobalVars.playerDimensions);
-  
-  var videoDimensions = {
-    width: 0,
-    height: 0
-  }
-  
-  if(Debug.debug){
-    console.log("[Resizer::_res_setAr] Player dimensions?", GlobalVars.playerDimensions.width, "×", GlobalVars.playerDimensions.height, "| obj:", GlobalVars.playerDimensions);
-  }
-  
-  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(GlobalVars.playerDimensions.height * ar, GlobalVars.playerDimensions.width);
-      videoDimensions.height = videoDimensions.width * (1/fileAr);
-  }
-  else{
-      videoDimensions.height = Math.min(GlobalVars.playerDimensions.width * (1/ar), GlobalVars.playerDimensions.height);
-      videoDimensions.width = videoDimensions.height * fileAr;
-  }
-  
-  if(Debug.debug){
-    console.log("[Resizer::_res_setAr] Video dimensions: ", videoDimensions.width, "×", videoDimensions.height, "(obj:", videoDimensions, "); playerDimensions:",GlobalVars.playerDimensions.width, "×", GlobalVars.playerDimensions.height, "(obj:", GlobalVars.playerDimensions, ")");
-  }
-  
-  var cssValues = _res_computeOffsets(videoDimensions, GlobalVars.playerDimensions);
-  
-  if(Debug.debug){
-    console.log("[Resizer::_res_setAr] Offsets for css are: ",cssValues);
-  }
-  
-  _res_applyCss(cssValues);
-}
 
 var _res_computeOffsets = function(vidDim, playerDim){
 

js/modules/Scaler.js

@@ -60,7 +60,7 @@ class Scaler {
     // if 'ar' is string, we'll handle that in legacy wrapper
     var ar = 0;
     if(isNaN(mode)){
-      ar = this.modeToAr(ar);
+      ar = this.modeToAr(mode);
     } else {
       ar = mode;
     }

js/modules/Zoom.js

@@ -7,6 +7,40 @@ class Zoom {
 
   // functions
   constructor() {
+    this.scale = 1;
+    this.scaleStep = 1.2;
+    this.minScale = 0.5;  // not accurate, actually slightly less
+    this.maxScale = 8;    // not accurate, actually slightly more
+  }
 
+  reset(){
+    this.scale = 1;
+  }
+
+  zoomIn(){
+    if(this.scale >= this.maxScale)
+      return;
+    this.scale *= this.scaleStep;
+  }
+
+  zoomOut(){
+    if(this.scale <= this.minScale)
+      return;
+    this.scale *= (1/this.scaleStep);
+  }
+
+  setZoom(scale){
+    if(scale < this.minScale) {
+      this.scale = this.minScale;
+    } else if (scale > this.maxScale) {
+      this.scale = this.maxScale;
+    } else {
+      this.scale = scale;
+    }
+  }
+
+  applyZoom(videoDimensions){
+    videoDimensions.width *= this.scale;
+    videoDimensions.height *= this.scale;
   }
 }

manifest.json

@@ -26,12 +26,20 @@
     "js/conf/SitesConf.js",
     "js/conf/Status.js",
 
+    "js/lib/EdgeDetect.js",
+    "js/lib/GuardLine.js",
+    
     "js/lib/PlayerDetect.js",
     
     "js/modules/PageInfo.js",
     "js/modules/DebugCanvas.js",
     "js/modules/ArDetect.js",
+    "js/modules/Zoom.js", 
+    "js/modules/Scaler.js",
+    "js/modules/Stretcher.js",
+
     "js/modules/Resizer.js",    
+    "js/lib/VideoData.js",
 
     "js/conf/Keybinds.js",