Added buttons to youtube player. Added changelogs and quick GUI tutorial to README.MD. Made manifest.json a bit less agressive with matching (<all_urls> -> youtube).

README.md

@@ -24,15 +24,17 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay
 
 ### Permanent install
 
-Download the extension from Mozilla's addon page.
+[v0.9.7 — 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.
 
-[Experimental version](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. **NOTE: AUTOUPDATING ISN'T IMPLEMENTED YET. You will have to update manually.** (tfw no https)
-
-[Regular version](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) — more stable and with AMO's approval. No experimental features either. **NOTE: AMO still hasn't approved this version. You won't be able to install it until they do.**
+[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.
 
 ## How do I use it?
 
-Here's the list of keybinds:
+This is the interface (**NOTE: AMO version doesn't have buttons yet!**):
+
+![If you know me and came looking for the obligatory "it's a wyvern, not a dragon" comment ... well, you just found it.](img-demo/interface-explained.jpg)
+
+And that's the keybinds for the actions displayed:
 
 * `w` : fit to width (will crop top and bottom if video is taller than the display)
 * `e` : fit to height (will crop left and right if video is wider than the display)
@@ -67,5 +69,20 @@ Keybind `a` just doesn't work at all, so no 16:10.
 
 * Adding custom keybinds
 * Adding a proper settings page
-* Adding buttons for actions in youtube's player
+* ~~Adding buttons for actions in youtube's player~~ (kinda done, forcing aspect ratio still not in GUI)
 * ~~Adding an option to force specific aspect ratio~~ (now it's "experimental")
+
+## Changelog
+
+###v0.9.1
+
+* First version on GitHub (and on AMO) with basic features (zoom, fit to width, fit to height)
+
+###v0.9.6
+
+* Added experimental feature that tries to force an aspect ratio
+
+###v0.9.7
+
+* Added GUI/buttons on the player.
+* Script now only loads on youtube pages (iframes included) (before, this script would run on any page)

js/uw.js

@@ -12,13 +12,23 @@ var debugmsg = true;
 var ctlbar_classnames = ["ytp-chrome-controls"];
 var serviceArray = [".video-stream" ]; //Youtube 
 
+var buttons = [];
+
+$("<style>")
+  .prop("type", "text/css")
+  .html("\
+    .uw-button{\
+      display: inline-block;\
+      height: 100% !important; \
+      background-size: contain; \
+      background-repeat: no-repeat;\
+      background-position: center center;\
+    }")
+  .appendTo("head");
+    
 $(document).ready(function() {
-  console.log("==========================================================================================");
-  //   console.log("uw::document.ready | document is ready");
- 
-  
-  // To bo naš dinamičen css
-  // this will be our dynamic css sheet
+  if(debugmsg)
+    console.log("==========================================================================================");
   
   $(document).keypress(function (event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
     switch (event.key){
@@ -52,6 +62,7 @@ $(document).ready(function() {
   });
   
   document.addEventListener("mozfullscreenchange", function( event ) {
+    onFullScreenChange();
     inFullScreen = ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
     inFullScreen ? onFullscreenOn() : onFullscreenOff();
   });
@@ -65,33 +76,60 @@ $(document).ready(function() {
 
 function addCtlButtons(provider_id){
   
-  return;
+  // 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
+  //
+  //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");
   
-  var ctl_class;
   var button_panel;
-  var buttons = [];
+  
+  // If we're on youtube:
   if(provider_id == 0){
-    ctl_class = document.getElementsByClassName("ytp-chrome-controls")[0];
     
-    button_panel = document.createElement('div');
-    ctl_class.appendChild(button_panel);
-    
-    for( var i = 0; i <  5; i++){
+    var rctl = document.getElementsByClassName("ytp-right-controls")[0];
+
+    for( var i = 4; i >= 0; i--){
       buttons[i] = document.createElement('div');
-      buttons[i].innerHTML = "test button " + i;
-      buttons[i].addEventListener("click", function(){ changeCSS("fitw") }, false);
-      button_panel.appendChild(buttons[i]);
+      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].className += " uw-button";
+      $(rctl).prepend(buttons[i]);
     }
     
   }
+
+  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");
 }
 
+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--){
+    buttons[i].style.width = (button_width * 0.75) + "px";
+    buttons[i].style.marginLeft = (button_width * 0.3) + "px";
+  }
+  
+  
+}
+
 function onFullscreenOn(){
   
 // TODO: show buttons
@@ -458,3 +496,7 @@ function inIframe(){
     return true;
   }
 }
+
+function imageToUrl(img){
+  return chrome.extension.getURL(img);
+}

manifest.json

@@ -2,14 +2,14 @@
   
   "manifest_version": 2,
   "name": "Ultrawidify",
-  "version": "0.9.7",
+  "version": "0.9.8",
   
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
   
   
   "content_scripts": [
   {
-    "matches": ["<all_urls>"],
+    "matches": ["*://*.youtube.com/*", "*://youtube.com/*", "*://youtu.be/*"],
     "js": [ "js/jquery.js", "js/uw.js" ],
     "all_frames": true
   }