Vimeo has a non-fs autodetect.

js/conf/SitesConf.js

@@ -0,0 +1,209 @@
+// functions here. load from storage happens later down the line
+var _sc_nonfsAutoar = function() {
+  var hostname = window.location.hostname;
+  
+  if( _sc_SITES[hostname] === undefined)
+    return _sc_SITES["DEFAULT"].autoAr.nonfs;
+  
+  return _sc_SITES[hostname].autoAr.nonfs;
+}
+
+var _sc_getPlayerTag = function(){
+  var hostname = window.location.hostname;
+  
+  if( _sc_SITES[hostname] === undefined)
+    return undefined;
+  
+  if( _sc_SITES[hostname].autoAr.playerIdentificationType === undefined)
+    return undefined;
+  
+  
+  if( _sc_SITES[hostname].autoAr.playerIdentificationType == "id")
+    return document.getElementById(_sc_SITES[hostname].autoAr.playerIdentificationString);
+  
+  if( _sc_SITES[hostname].autoAr.playerIdentificationType == "className")
+    return document.getElementsByClassName(_sc_SITES[hostname].autoAr.playerIdentificationString)[0];
+  
+  return undefined;
+}
+
+// popravi vse, kar je narobe z ne-celozaslonskim predvajalnikom (če je funkcija definirana)
+// fix everything that's wrong with the non-fs player, if the function is defined
+var _sc_prepareNonfsPlayer = function(){
+  var hostname = window.location.hostname;
+  
+  if( _sc_SITES[hostname] === undefined)
+    return;
+  
+  if( _sc_SITES[hostname].autoAr.nonfsPlayerMod === undefined )
+    return;
+  
+  _sc_SITES[hostname].autoAr.nonfsPlayerMod();
+}
+
+
+// Privzete nastavitve. Kasneje jih zamenjamo s tistimi v localStorage (če obstajajo)
+// this is the default config. We replace it with the ones in localStorage (if they exist)
+
+/* Konfiguracija za posamezno stran: 
+ * Config for a given page
+ * 
+ * <location.hostname>: {
+ *    enabled: bool,        // ali to stran omogočimo? Legacy, se bo odstranilo | do we do stuff on this page?
+ *    type: string,
+ *    autoAr: {             // konfiguracija za samodejno zaznavanje razmerja stranic | conf for aspect ratio autodetection
+ *      active: bool           // aktivno zaznavanje — zaznavamo letterbox na sliki | active detection: scan the image
+ *      passive: bool          // pasivno zaznavanje — za ar vprašamo imdb in ostale | passive detection: query imdb for aspect ratio
+ *      nonfs: bool            // zaznavanje razmerja stranic izven celozaslonskega načina | detect ar if not in fullscreen?
+ *      playerIdentificationString: string   
+ *      playerIdentificationType: string     // "className" | "id"
+ *      nonfsExtra: function   // non-fs hacks are generally site-specific, which means we need to write site-specific code 
+ *    }
+ * }
+ * 
+ */
+
+
+var _sc_SITES = {
+  "DEFAULT": {
+    enabled: true,
+    type: "nonofficial",
+    autoAr: {
+      active: true,
+      passive: false,
+      nonfs: false
+    }
+  },
+  "www.youtube.com" : {
+    enabled: true,
+    type: "official",
+    autoAr: {
+      active: true,
+      passive: false,
+      nonfs: false,
+    }
+  },
+  "vimeo.com" : {
+    enabled: true,
+    type: "official",
+    autoAr: {
+      active: true,
+      passive: false,
+      nonfs: true,
+      playerIdentificationString: "player_area-wrapper js-player_area-wrapper",
+      playerIdentificationType: "className",
+      nonfsPlayerMod: function(){
+        // hack player to take all the width
+        $("head").append('<style type="text/css">.uw_forceFullWidth {width: 100% !important} .uw_forceCenter{text-align: center;}</style>');
+        
+        var e = document.getElementsByClassName("player_outro_area")[0];
+        e.classList.add("uw_forceFullWidth");
+        e.classList.add("uw_forceCenter");
+        e = document.getElementsByClassName("player_container")[0];
+        e.classList.add("uw_forceFullWidth");
+        e.classList.add("uw_forceCenter");
+        
+        $("video")[0].style.display = "inline-block";
+      }
+    }
+  }
+}
+
+var UW_SITES = {
+  youtube: {
+    enabled: true,
+    type: "official",
+    urlRules: ["youtu"],
+    player: {
+      name: "movie_player",
+      isClass: false,
+    },
+    iframe: {
+      name: "player",
+      isClass: false
+    },
+    ui: {
+      uiMode: "native",
+      uiconf: {
+        sampleButton: {
+          class: "ytp-button ytp-settings-button",
+          index: 0,
+          buttonSizeBase: "x",
+        },
+        uiParent: {
+          name: "ytp-right-controls",
+          isClass: true,
+          insertStrat: "prepend",
+        },
+        uiOffset: {
+          offsetBy: "10vh",
+          offsetType: "css"
+        }
+      }
+    },
+    autoar_imdb:{
+      enabled: false
+    }
+  },
+  netflix: {
+    enabled: true,
+    type: "official",
+    urlRules: ["netflix"],
+    player: {
+      name: "placeholder",
+      isClass: true,
+    },
+    ui: {
+      uiMode: "native",
+      uiconf: {
+        sampleButton: {
+          class: "ytp-button ytp-settings-button",
+          index: 0,
+          buttonSizeBase: "x",
+        },
+        uiParent: {
+          name: "player-controls-wrapper",
+          isClass: true,
+          insertStrat: "append"
+        },
+        uiOffset: {
+          offsetBy: "0px",
+          offsetType: "css"
+        }
+      }
+    },
+    autoar_imdb:{
+      enabled: true,
+      title: "player-status-main-title",
+      isClass: true
+    }
+  },
+  dummy: {
+    type: "add new site",
+    urlRules: [""],
+    player: {
+      name: "",
+      isClass: false,
+    },
+    sampleButton: {
+      class: "ytp-button ytp-settings-button",
+      index: 0,
+      buttonSizeBase: "x",
+    },
+    uiParent: {
+      name: "",
+      isClass: false,
+      insertStrat: "prepend",
+    },
+    autoar_imdb:{
+      enabled: false
+    }
+  }
+} 
+
+
+var SitesConf = {
+  nonfsArDetectEnabled: _sc_nonfsAutoar,
+  getPlayerTag: _sc_getPlayerTag,
+  prepareNonfsPlayer: _sc_prepareNonfsPlayer
+}

js/conf/sitesconf.js

@@ -1,91 +0,0 @@
-var UW_SITES = {
-  youtube: {
-    enabled: true,
-    type: "official",
-    urlRules: ["youtu"],
-    player: {
-      name: "movie_player",
-      isClass: false,
-    },
-    iframe: {
-      name: "player",
-      isClass: false
-    },
-    ui: {
-      uiMode: "native",
-      uiconf: {
-        sampleButton: {
-          class: "ytp-button ytp-settings-button",
-          index: 0,
-          buttonSizeBase: "x",
-        },
-        uiParent: {
-          name: "ytp-right-controls",
-          isClass: true,
-          insertStrat: "prepend",
-        },
-        uiOffset: {
-          offsetBy: "10vh",
-          offsetType: "css"
-        }
-      }
-    },
-    autoar_imdb:{
-      enabled: false
-    }
-  },
-  netflix: {
-    enabled: true,
-    type: "official",
-    urlRules: ["netflix"],
-    player: {
-      name: "placeholder",
-      isClass: true,
-    },
-    ui: {
-      uiMode: "native",
-      uiconf: {
-        sampleButton: {
-          class: "ytp-button ytp-settings-button",
-          index: 0,
-          buttonSizeBase: "x",
-        },
-        uiParent: {
-          name: "player-controls-wrapper",
-          isClass: true,
-          insertStrat: "append"
-        },
-        uiOffset: {
-          offsetBy: "0px",
-          offsetType: "css"
-        }
-      }
-    },
-    autoar_imdb:{
-      enabled: true,
-      title: "player-status-main-title",
-      isClass: true
-    }
-  },
-  dummy: {
-    type: "add new site",
-    urlRules: [""],
-    player: {
-      name: "",
-      isClass: false,
-    },
-    sampleButton: {
-      class: "ytp-button ytp-settings-button",
-      index: 0,
-      buttonSizeBase: "x",
-    },
-    uiParent: {
-      name: "",
-      isClass: false,
-      insertStrat: "prepend",
-    },
-    autoar_imdb:{
-      enabled: false
-    }
-  }
-} 

js/lib/FullScreenDetect.js

@@ -6,6 +6,5 @@ var _fsd_isFullScreen = function(){
 }
 
 var FullScreenDetect = {
-  isFullScreen: _fsd_isFullScreen,
+  isFullScreen: _fsd_isFullScreen
-  inFullScreen: _fsd_isFullScreen
 }

js/modules/ArDetect.js

@@ -1,6 +1,10 @@
 if(Debug.debug)
   console.log("Loading: ArDetect");
 
+
+
+
+
 // global-ish variables
 var _ard_oldAr;
 var _ard_currentAr;
@@ -24,31 +28,44 @@ var _arSetup = function(){
     return;
   }
   
+  // imamo video, pa tudi problem. Ta problem bo verjetno kmalu popravljen, zato setup začnemo hitreje kot prej
+  // we have a video, but also a problem. This problem will prolly be fixed very soon, so setup is called with
+  // less delay than before
+  if(vid.videoWidth == 0){
+    setTimeout(_arSetup, 100);
+    return;
+  }
+  
   var canvas = document.createElement("canvas");
   canvas.style.position = "absolute";
   
   //todo: change those values to push canvas off-screen
   
-   
-  canvas.style.top = "1080px";
-  canvas.style.zIndex = 10000;
   
-//   var test = document.getElementsByClassName("content style-scope ytd-video-secondary-info-renderer")[0]
+  if(Debug.debug){
+    canvas.style.left = "200px";
+    canvas.style.top = "780px";
+    canvas.style.zIndex = 10000;
+  }
+  else{
+    canvas.style.left = "-20000px";
+    canvas.style.top = "-1080px";
+    canvas.style.zIndex = -10000;
+  }
+  canvas.id = "uw_ArDetect_canvas";
+  
   var test = document.getElementsByTagName("body")[0];
   test.appendChild(canvas);
   
-  console.log("test: ", test, "vid: ", vid, "canvas: ", canvas);
-  
-//       vid.append(canvas);
   var context = canvas.getContext("2d");
   
-  
   // do setup once
   // tho we could do it for every frame
   var canvasScaleFactor =  1280 / vid.videoWidth;
   var canvasWidth = vid.videoWidth * canvasScaleFactor;
   var canvasHeight = vid.videoHeight * canvasScaleFactor;
   
+  console.log("canvasScaleFactor, vid.videoWidth: ", canvasScaleFactor, vid.videoWidth);
   
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
@@ -82,7 +99,7 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
   
   
   var trueAr = width / trueHeight;
-  
+  ArDetect.detectedAr = trueAr;
   
   // poglejmo, če se je razmerje stranic spremenilo
   // check if aspect ratio is changed:
@@ -104,6 +121,15 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
     _ard_oldAr = trueAr;
     Resizer.setAr_fs(trueAr);
   }
+  else{
+    // če nismo v fullscreen, potem preverimo, ali naša stran dovoljuje ne-fs?
+    // first, we'll check if our site allows for non-fs autoar detection
+    if( SitesConf.nonfsArDetectEnabled() ){
+      _ard_oldAr = trueAr;
+      Resizer.setAr_nonfs(trueAr);
+    }
+  }
+  
   
 }
 
@@ -142,8 +168,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     // should also check bottom
   }
 
-  console.log("11");
-  
   if(!isLetter){
     // tudi če ne zaznamo letterboxa, še vedno poženemo processAr. Lahko, da smo v preteklosti popravili letterbox, to pa moramo
     // sedaj razveljaviti
@@ -172,8 +196,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   var cl_col = [];
   var cu_col = [];
   
-  console.log("22");
-  
   // if (pixel is black) 
   for(var i in cols){
     
@@ -285,7 +307,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     
   }
 
-  console.log("33");
   
   
   if(blackPoints > (blackPointsMax >> 1)){
@@ -295,8 +316,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     return;
   }
 
-  console.log("color_uppermost:",color_uppermost,"color_lowermost:",color_lowermost);
-  
   if( color_lowermost == 8 || color_uppermost == 0){
     // zakaj smo potem sploh tukaj?
     // why exactly are we here again?
@@ -306,7 +325,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     return;
   }
   
-  console.log("44");
   
   
   // pa poglejmo, kje se končajo črne letvice na vrhu in na dnu videa.
@@ -336,8 +354,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     endPixelTop.push(tmpEndPixel);
   }
   
-  console.log("777");
-  
   for(var i in cl_col){
     var tmpEndPixel = _ard_sampleLines[color_lowermost] >> 2;
     var j = _ard_sampleLines[color_lowermost];
@@ -356,8 +372,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
     endPixelBottom.push(tmpEndPixel);
   }
   
-  console.log("888");
-  
   // dobi najvišji in najnižji piksel
   var bottomPixel = 0;
   var topPixel = 222222;
@@ -382,8 +396,6 @@ var _ard_vdraw = function (vid, context, w, h, conf){
   
   isLetter = (letterDiff < h * Settings.arDetect.allowedMisaligned);
   
-  console.log("pixels top: ", topPixel, "pixels bottom:", (h-bottomPixel), " (", bottomPixel,") — difference: ",letterDiff,"max allowed difference:", (h * Settings.arDetect.allowedMisaligned), "(",h,Settings.arDetect.allowedMisaligned,"), isLetter:",isLetter, "\n\n all candidates (top):", endPixelTop, "(bottom):",endPixelBottom);
-  
   if(isLetter)
     _ard_processAr(vid, w, h, topPixel);
   
@@ -391,11 +403,9 @@ var _ard_vdraw = function (vid, context, w, h, conf){
 }
 
 
-
-
-
 var ArDetect = {
   arSetup: _arSetup,
   vdraw: _ard_vdraw,
+  detectedAr: 1,
   arChangedCallback: function() {}
 }

js/modules/Resizer.js

@@ -330,7 +330,7 @@ var _res_setBestFit = function(ar){
   console.log("uw::setBestFit | css applied");
 }
 
-var _res_setArFs = function(ar){
+var _res_setAr = function(ar, playerDimensions){
   var vid = $("video")[0];
   
   // Dejansko razmerje stranic datoteke/<video> značke
@@ -346,24 +346,30 @@ var _res_setArFs = function(ar){
     height: 0
   }
   
-  var playerDimensions = {
+  if(Debug.debug){
-    width: screen.width,
+    console.log("[Resizer::_res_setArFs] Player dimensions?",playerDimensions);
-    height: screen.height
+  }
+  
+  if(playerDimensions === undefined){
+    playerDimensions = {
+      width: screen.width,
+      height: screen.height
+    }
   }
   
   if( fileAr < ar ){
     // imamo letterbox zgoraj in spodaj -> spremenimo velikost videa (ampak nikoli na več, kot je širina zaslona)
     // letterbox -> change video size (but never to wider than monitor width)
-    videoDimensions.width = Math.min(screen.height * ar, screen.width);
+    videoDimensions.width = Math.min(playerDimensions.height * ar, playerDimensions.width);
     videoDimensions.height = videoDimensions.width * (1/fileAr);
   }
   else{
-    videoDimensions.height = Math.min(screen.width * (1/ar), screen.height);
+    videoDimensions.height = Math.min(playerDimensions.width * (1/ar), playerDimensions.height);
     videoDimensions.width = videoDimensions.height * fileAr;
   }
   
   if(Debug.debug){
-    console.log("[Resizer::_res_setArFs] Video dimensions: ",videoDimensions);
+    console.log("[Resizer::_res_setArFs] Video dimensions: ",videoDimensions, "playerDimensions:",playerDimensions);
   }
   
   var cssValues = _res_computeOffsets(videoDimensions, playerDimensions);
@@ -394,6 +400,22 @@ var _res_computeOffsets = function(vidDim, playerDim){
   return offsets;
 }
 
+var _res_setAr_nonfs = function(ar){
+  var player = SitesConf.getPlayerTag();
+  
+  SitesConf.prepareNonfsPlayer();
+  
+  if(! player)
+    player = $("video")[0].parentNode;
+  
+  var playerDimensions = {
+    width: player.offsetWidth,
+    height: player.offsetHeight
+  }
+  
+  _res_setAr(ar, playerDimensions);
+}
+
 
 function resetCSS(video, player){
   if(debugmsg)
@@ -573,5 +595,6 @@ function _res_applyCss(dimensions){
 }
 
 var Resizer = {
-  setAr_fs: _res_setArFs  
+  setAr_fs: _res_setAr,
+  setAr_nonfs: _res_setAr_nonfs
 }

manifest.json

@@ -19,6 +19,7 @@
       
       "js/conf/Debug.js",
       "js/conf/Settings.js",
+      "js/conf/SitesConf.js",
       
       "js/lib/FullScreenDetect.js",
       

test/TEST_VIDEOS.md

@@ -0,0 +1,7 @@
+#List of test/sample videos
+
+A quick list of videos where letterbox is encoded in the file.
+
+##Vimeo:
+
+https://vimeo.com/channels/staffpicks/169599296