Added 'settings menu' — at the moment, the only option in there is to force aspect ratio. (More thorough README.MD changes are coming soon)

README.md

@@ -8,7 +8,7 @@ The technology has been here for a while, but plenty of people don't know how to
 
 ![Demo](img-demo/example-httyd2.png "Should these black bars be here? No [...] But an ultrawide user never forgets.")
 
-I'd demo with [Sintel](https://www.youtube.com/watch?v=eRsGyueVLvQ) but they encoded the video without the black bars. Thanks, Blender Foundation. 
+I'd demo with [Sintel](https://www.youtube.com/watch?v=eRsGyueVLvQ) but they encoded the video without the black bars. ~~Thanks, Blender Foundation.~~ Actually they're not off the hook.
 
 This extension also allows you to zoom in or out of video (similar to how SMPlayer does it).
 
@@ -24,7 +24,7 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay
 
 ### Permanent install
 
-[v0.9.8 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change.
+[v0.9.9 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change.
 
 [v0.9.1 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) — more stable and with AMO's approval. No experimental features either.
 
@@ -90,3 +90,7 @@ Keybind `a` just doesn't work at all, so no 16:10.
 
 * Added GUI/buttons on the player.
 * Script now only loads on youtube pages (iframes included) (before, this script would run on any page)
+
+###v0.9.9
+
+* The aspect ratio thingy is now also in GUI

js/uw.js

@@ -20,9 +20,30 @@ $("<style>")
     .uw-button{\
       display: inline-block;\
       height: 100% !important; \
-      background-size: contain; \
+      background-size: 75% 75%; \
       background-repeat: no-repeat;\
       background-position: center center;\
+    }\
+    .uw-button:hover{\
+      background-color: rgba(192,0,0,0.66);\
+    }\
+    .uw-setmenu{\
+      display: none;\
+      position: absolute;\
+      background-color: rgba(0,0,0,0.66);\
+      right: 0px;\
+    }\
+    .uw-setmenu-item{\
+      font-family: \"Oxygen\";\
+      color: #ffffff !important;\
+      width: 90%;\
+      padding-left: 10%;\
+    }\
+    .uw-setmenu-item:hover{\
+      background-color: rgba(192,0,0,0.66);\
+    }\
+    .show{\
+      display: block;\
     }")
   .appendTo("head");
     
@@ -33,31 +54,31 @@ $(document).ready(function() {
   $(document).keypress(function (event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
     switch (event.key){
       case 'w':
-        changeCSS("fitw");
+        changeCSS("fit","fitw");
         break;
       case 'e':
-        changeCSS("fith");
+        changeCSS("fit","fith");
         break;
       case 'r':
-        changeCSS("reset");
+        changeCSS("reset","reset");
         break;
       case 'z':
-        changeCSS("zoom");
+        changeCSS("fit","zoom");
         break;
       case 'u':
-        changeCSS("unzoom");
+        changeCSS("fit","unzoom");
         break;
       case 'd':
-        changeCSS(0);
+        changeCSS("char", (21/9));
         break;
       case 's':
-        changeCSS(1);
+        changeCSS("char", (16/9));
         break;
       case 'a':
-        changeCSS(2);
+        changeCSS("char", (16/10));
         break;
       case 'x':
-        changeCSS(3);
+        changeCSS("char", (4/3));
     }
   });
   
@@ -79,13 +100,8 @@ function addCtlButtons(provider_id){
   // Gumb za nastavitve je bolj kot ne vselej prisoten, zato širino tega gumba uporabimo kot širino naših gumbov
   // Settings button is more or less always there, so we use its width as width of our buttons
   var button_width = document.getElementsByClassName("ytp-button ytp-settings-button")[0].scrollWidth;
-  //NOTE: jQuery tu serje da je tole zgoraj nekaj undefined, ampak skript dela pravilno. Zaenkrat nas jQuery problemi
+    
-  //zato ne bojo brigal pol kurca
+  var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom", "settings" ];
-  //
-  //NOTE: jQuery sometimes shits a word salat in the console and the above line seems to be the problem. Since
-  //everything works just fine, we pretty much ignore that
-  
-  var button_def = [ "fitw", "fith", "reset", "zoom", "uzoom" ];
   
   if(debugmsg)
     console.log("uw::addCtlButtons | trying to add buttons");
@@ -97,22 +113,100 @@ function addCtlButtons(provider_id){
     
     var rctl = document.getElementsByClassName("ytp-right-controls")[0];
 
-    for( var i = 4; i >= 0; i--){
+    for( var i = 5; i >= 0; i--){
       buttons[i] = document.createElement('div');
       buttons[i].style.backgroundImage = 'url(' + imageToUrl("/img/ytplayer-icons/" + button_def[i] + ".png") + ')';
       buttons[i].style.width = (button_width * 0.75) + "px";
-      buttons[i].style.marginLeft = (button_width * 0.3) + "px";
+//       buttons[i].style.marginLeft = (button_width * 0.3) + "px";
+      buttons[i].style.paddingLeft = (button_width *0.15 ) + "px";
+      buttons[i].style.paddingRight = (button_width * 0.15) + "px";
       buttons[i].className += " uw-button";
       $(rctl).prepend(buttons[i]);
     }
     
+    buttons[0].onclick = function() { changeCSS("fit",   "fitw")   };
+    buttons[1].onclick = function() { changeCSS("fit",   "fith")   };
+    buttons[2].onclick = function() { changeCSS("reset", "reset")  };
+    buttons[3].onclick = function() { changeCSS("fit",   "zoom")   };
+    buttons[4].onclick = function() { changeCSS("fit",   "unzoom") };
+    
+    // Knof za nastavitve ima še vgnezden meni, ki ga dodamo tu (privzeto je ta meni skrit)
+    // Settings button contains a menu that's nested in the element. By default, that menu is
+    // hidden.
+    buttons[5].onclick = function() { showMenu("uw-smenu") };
+    buttons[5].id = "uw-settings-button";
+    
+    var settings_menu = document.createElement("div");
+    var smenu_settings = document.createElement("div");
+    var smenu_ar = document.createElement("div");
+    var smenu_ar_menu = document.createElement("div");
+    var smenu_reset = document.createElement("div");
+    
+    var smenu_ar_options = [];
+
+    buttons[5].appendChild(settings_menu);
+    settings_menu.appendChild(smenu_settings);
+    settings_menu.appendChild(smenu_ar);
+    settings_menu.appendChild(smenu_reset);
+    
+    for(var i = 0; i < 4; i++){
+      smenu_ar_options[i] = document.createElement("div");
+      smenu_ar_options[i].className = "uw-setmenu-item";
+      smenu_ar_menu.appendChild(smenu_ar_options[i]);
+    }
+    
+    settings_menu.id = "uw-smenu";
+    settings_menu.className = "uw-setmenu";
+    smenu_settings.id = "uw-smenu_settings";
+    smenu_settings.className = "uw-setmenu-item";
+    smenu_ar.id = "uw-smenu_ar";
+    smenu_ar.className = "uw-setmenu-item";
+//     smenu_reset.id = "uw-smenu_reset;
+//     smenu_reset.className = "uw-setmenu-item";
+    
+    
+    smenu_ar_menu.id = "uw-armenu";
+    smenu_ar_menu.className = "uw-setmenu";
+    
+    // Stvari, ki se spreminjajo, se določijo tukaj
+    // Things that can change are defined here
+    
+    settings_menu.style.bottom = (button_width * 1.5) + "px";
+    settings_menu.style.width = (button_width * 7.5) + "px";
+    settings_menu.style.fontSize = (button_width * 0.50) + "px";
+    smenu_ar_menu.style.right = (button_width * 7.5) + "px";
+    smenu_ar_menu.style.width = (button_width * 2.5) + "px";
+    smenu_ar_menu.style.bottom = "0px";
+    
+    // Tukaj se določa notranji HTML knofov
+    // Inner HTML of elements is defined here
+    smenu_ar.innerHTML = "Force aspect ratio";
+    smenu_ar.appendChild(smenu_ar_menu);
+    
+    smenu_ar_options[0].innerHTML = "4:3";
+    smenu_ar_options[1].innerHTML = "16:10";    
+    smenu_ar_options[2].innerHTML = "16:9";
+    smenu_ar_options[3].innerHTML = "21:9";
+    
+    // Pritisneš gumb, nekej zakon se more narest.
+    //                              — Bioware
+    //                                ( https://www.youtube.com/watch?v=hMcVZQI6ybw | [NVZD] )
+    //                        
+    // Press the button, something awesome has to happen.
+    //                              — Bioware
+    //                                ( https://www.youtube.com/watch?v=hMcVZQI6ybw | [NSFW] )
+    
+    $(smenu_ar).on("mouseenter", function(){showMenu("uw-armenu")});
+    $(smenu_ar).on("mouseleave", function(){showMenu("uw-armenu")});
+    
+    smenu_ar_options[0].onclick = function() { changeCSS("char", ( 4/3 )) };
+    smenu_ar_options[1].onclick = function() { changeCSS("char", (16/10)) };
+    smenu_ar_options[2].onclick = function() { changeCSS("char", (16/9 )) };
+    smenu_ar_options[3].onclick = function() { changeCSS("char", (21/9 )) };
+    
   }
 
-  buttons[0].onclick = function() { changeCSS("fitw")   };
+  
-  buttons[1].onclick = function() { changeCSS("fith")   };
-  buttons[2].onclick = function() { changeCSS("reset")  };
-  buttons[3].onclick = function() { changeCSS("zoom")   };
-  buttons[4].onclick = function() { changeCSS("unzoom") };
   
   if(debugmsg)
     console.log("uw::addCtlButtons | buttons added");
@@ -124,11 +218,14 @@ function onFullScreenChange(){
   // Popravimo velikost gumbov
   // Let's fix the button size:
   var button_width = document.getElementsByClassName("ytp-button ytp-settings-button")[0].scrollWidth;
-  for( var i = 4; i >= 0; i--){
+  for( var i = 5; i >= 0; i--){
     buttons[i].style.width = (button_width * 0.75) + "px";
-    buttons[i].style.marginLeft = (button_width * 0.3) + "px";
+    buttons[i].style.paddingLeft = (button_width *0.15 ) + "px";
+    buttons[i].style.paddingRight = (button_width * 0.15) + "px";
   }
   
+  document.getElementById("uw-smenu").style.bottom = (button_width * 1.5) + "px";
+  
   
 }
 
@@ -145,8 +242,9 @@ function onFullscreenOff(){
 
 }
 
-function changeCSS(what_do){
+function changeCSS(type, what_do){
-  
+  hideMenu("uw-armenu");
+  hideMenu("uw-smenu");
   
   var e_video = document.getElementsByClassName("video-stream")[0];
   var video = { "width": e_video.scrollWidth, "height": e_video.scrollHeight }
@@ -172,15 +270,9 @@ function changeCSS(what_do){
   //  Handling actions happens below this line
   // -----------------------------------------------------------------------------------------
   
-  if (what_do >= 0 && what_do < 5){   
+  if (type == "char"){
-    if( what_do == 0)
+    // char = CHange Aspect Ratio
-      set_video_ar((2560/1080), video, player);
+    char(what_do, video, player);
-    if(what_do == 1)
-      set_video_ar((1920/1080), video, player);
-    if(what_do == 2)
-      set_video_ar((16/10), video, player);
-    if(what_do == 3)
-      set_video_ar((4/3), video, player);
     return;
   }
   
@@ -208,17 +300,61 @@ function changeCSS(what_do){
   
 }
 
+
+function char(new_ar, video, player){
+  
+  // Kot vhodni argument dobimo razmerje stranic. Problem je, ker pri nekaterih ločljivostih lahko razmerje stranic
+  // videa/našega zaslona minimalno odstopa od idealnega razmerja — npr 2560x1080 ni natanko 21:9, 1920x1080 ni 
+  // natanko 16:9. Zato ob podanem razmerju stranic izračunamo dejansko razmerje stranic.
+  // 
+  // The aspect ratio we get as an argument is an ideal aspect ratio. Some (most) resolutions' aspect ratios differ
+  // from that ideal aspect ratio (by a minimal amount) — e.g. 2560x1080 isn't exactly 21:9, 1920x1080 isn't exactly
+  // 16:9. What is more, both 3440x1440 and 2560x1080 are considered "21:9", but their aspect ratios are slightly 
+  // different. This has the potential to result in annoying black bars, so we correct the aspect ratio we're given
+  // to something that's slightly more correct.
+  
+  var ar;
+  var res_219 = [ [2560,1080], [3440,1440] ];
+  var res_169 = [ [1920,1080], [1280,720], [1366,768] ];
+  
+  if(new_ar == (21/9)){
+    for (var i = 0; i < res_219.length; i++){
+      if( player.height == res_219[i][1]){
+        ar = res_219[i][0]/res_219[i][1];
+        set_video_ar( ar, video, player);
+        return;
+      }
+    }
+  }
+  else if(new_ar == (16/9)){
+    for (var i = 0; i < res_169.length; i++){
+      if( player.height == res_169[i][1]){
+        ar = res_169[i][0]/res_169[i][1];
+        set_video_ar( ar, video, player);
+        return;
+      }
+    }
+  }
+  
+  set_video_ar(new_ar, video, player);
+}
+
 /* Tukaj povemo, kakšno razmerje stranic ima video.
 // Kaj to pomeni: 
 //    Mi rečemo, da ima video razmerje stranic 16:9. Dejanski video
 //    ima razmerje 4:3. To pomeni, da ima video zgoraj in spodaj črno
 //    obrobo, ki je nočemo, zato video povečamo toliko, da se ta obroba odreže.
+//    
+//    OBROB TUKAJ NE DODAJAMO.
 // 
 // With this function, we specify the aspect ratio of the video. 
 // What does this mean?
 //    If we specify that the aspect ratio of a video is 16:9 when video is
 //    actually 4:3, that means the video has black bars above and below.
 //    We zoom the video just enough for the black lines to disappear.
+//    
+//    WE DO NOT ADD ANY BLACK BORDERS. If we get to a scenario when we'd have to add 
+//    black borders, we do nothing instead.
 */
 function set_video_ar(aspect_ratio, video, player){
   var video_ar = video.width / video.height;
@@ -226,6 +362,7 @@ function set_video_ar(aspect_ratio, video, player){
   
   if(debugmsg)
     console.log("uw::set_video_ar | aspect ratio: " + aspect_ratio + "; video_ar: " + video_ar + "; display_ar: " + display_ar);
+    console.log("uw::set_video_ar | player dimensions: " + player.width + "x" + player.height + "; video dimensions: " + video.width + "x" + video.height);
   
   if( aspect_ratio*1.1 > video_ar && video_ar > aspect_ratio*0.9 ){
     // Ta hack nas reši problema, ki ga predstavlja spodnji if stavek — če se legit 21:9 videu na 16:9 monitorju
@@ -242,34 +379,6 @@ function set_video_ar(aspect_ratio, video, player){
     return;
   }
   
-  if( display_ar*1.1 < aspect_ratio && aspect_ratio > 1){
-    /* Ker tukaj video obrežemo tako, da ga povečamo, dokler neželjen del videa gleda čez rob prikazovalnika,
-    // tako obrezovanje ne bo delovalo, če hočemo nastaviti razmerje stranic na nekaj širšega, kot je naš zaslon.
-    // Če je temu tako, ne naredimo ničesar. 
-    // 
-    // display_ar*1.1 — zato, da imamo nekaj meje, če se razmerje stranic zaslona ne ujema popolnoma natančno z
-    // razmerjem stranic, ki smo ga dobili kot argument.
-    // 
-    // && aspect_ratio > 1 zato, če se zgodi, da se kdaj odločimo podpirati ultraozke zaslone (9/16, itd).
-    // 
-    // -----------------------------------------------------------------------------------------------------------
-    // 
-    // Because we crop the video by enlarging it until the unwanted parts of it are over the edges of the display,
-    // this function obviously won't work if we want to set our aspect ratio to something that's wider than the
-    // aspect ratio of our display. In such cases we do nothing at all. 
-    // 
-    // display_ar*1.1 — some tolerance for cases where display aspect ratio and the aspect ratio we get as an
-    // argument differ by a slim margin. (see: 1920x1080 isn't exactly 16:9. 2560x1080 is slightly wider than
-    // 21:9)
-    // 
-    // && aspect_ratio > 1 is here in case we decide to support ultrathin monitors (9/16, etc).
-    */
-    if( debugmsg)
-      console.log("uw::set_video_ar | ar is wider than our monitor. not doing a thing");
-    return;
-  }
-  
-  
   //Širina, višina, top, left za nov video
   //Width, height, top and left for the new video
   var nv = { "w":0, "h":0, "top":0, "left":0 }; 
@@ -315,6 +424,9 @@ function set_video_ar(aspect_ratio, video, player){
     nv.left = (player.width - nv.w)/2;
   }
   
+  if(nv.w > (player.width * 1.1) && nv.h > (player.height * 1.1))
+    return;
+  
   applyCSS(nv);
 }
 
@@ -440,9 +552,9 @@ function changeCSS_nofs(what_do, video, player){
     left = (player.width - w) / 2;
     
     if (h > player.height * 4){
-      console.log("But this is bigger than some rooms, this is bigger than some people's flats!");
+      console.log("But this video is ... I mean, it's fucking huge. This is bigger than some rooms, this is bigger than some people's flats!");
       // Insert obligatory omnishambles & coffee machine quote here
-      console.log("(No really, mate, you took this way too far already)");
+      console.log("(No really, mate, you took this way too far already. Can't let you do that, Dave.)");
       return;
     }
   }
@@ -489,3 +601,13 @@ function inIframe(){
 function imageToUrl(img){
   return chrome.extension.getURL(img);
 }
+
+function showMenu(id){
+  if(debugmsg)
+    console.log("uw::showMenu | toggling menu with id " + id);
+  document.getElementById(id).classList.toggle("show");
+}
+
+function hideMenu(id){
+  document.getElementById(id).classList.remove("show");
+}

manifest.json

@@ -1,8 +1,8 @@
 {
   
   "manifest_version": 2,
-  "name": "Ultrawidify",
+  "name": "Ultrawidify-git",
-  "version": "0.9.8",
+  "version": "0.9.9",
   
   "icons": {
     "32":"icons/uw-32.png",
@@ -29,7 +29,8 @@
     "img/ytplayer-icons/uzoom.png",
     "img/ytplayer-icons/fitw.png",
     "img/ytplayer-icons/fith.png",
-    "img/ytplayer-icons/reset.png"
+    "img/ytplayer-icons/reset.png",
+    "img/ytplayer-icons/settings.png"
   ],
   "applications": {
     "gecko": {