initial commit

js/jquery.fullscreen.js

@@ -0,0 +1,123 @@
+(function($, window, documentElement, height, width) {
+    
+    // browser detection code courtesy of quirksmode, http://www.quirksmode.org/js/detect.html
+    // slightly simplified, as well as minor changes for readability purposes
+
+    var BrowserDetect = {
+        init: function () {
+            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
+            this.version = this.searchVersion(navigator.userAgent)
+                || this.searchVersion(navigator.appVersion)
+                || "an unknown version";
+            this.OS = this.searchString(this.dataOS) || "an unknown OS";
+        },
+
+        searchString: function (data) {
+            for (var i=0;i<data.length;i++)    {
+                var dataString = data[i].string;
+                var dataProp = data[i].prop;
+                this.versionSearchString = data[i].versionSearch || data[i].identity;
+                if (dataString) {
+                    if (dataString.indexOf(data[i].subString) != -1)
+                        return data[i].identity;
+                }
+                else if (dataProp)
+                    return data[i].identity;
+            }
+        },
+
+        searchVersion: function (dataString) {
+            var index = dataString.indexOf(this.versionSearchString);
+            if (index == -1) return;
+            return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
+        },
+
+        dataBrowser: [
+            { string: navigator.userAgent, subString: "Chrome",  identity: "Chrome"                            },
+            { string: navigator.vendor,    subString: "Apple",   identity: "Safari",  versionSearch: "Version" },
+            { prop: window.opera,                                identity: "Opera",   versionSearch: "Version" },
+            { string: navigator.userAgent, subString: "Firefox", identity: "Firefox"                           },
+            { string: navigator.userAgent, subString: "MSIE",    identity: "Explorer", versionSearch: "MSIE"   }
+        ],
+
+        dataOS : [
+            { string: navigator.platform,  subString: "Win",    identity: "Windows"     },
+            { string: navigator.platform,  subString: "Mac",    identity: "Mac"         },
+            { string: navigator.platform,  subString: "Linux",  identity: "Linux"       }
+        ]
+
+    };
+
+    BrowserDetect.init();
+    // Browser name: BrowserDetect.browser
+    // Browser version: BrowserDetect.version
+    // OS name: BrowserDetect.OS
+    
+    // here are major browsers' keyboard mapping for triggering fullscreen on/off
+    var keys = {
+        "MSIE": {
+            "Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               }
+        },
+        "Firefox": {
+            "Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               },
+            "Linux":   { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               },
+            "Mac":     { ctrlKey: false, altKey: false, metaKey: true,  shiftKey: true,  which:  70, string: "&#x21E7;&#x2318;F", alt: "Shift+Command+F"   }
+        },
+        "Chrome": {
+            "Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               },
+            "Linux":   { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               },
+            "Mac":     { ctrlKey: false, altKey: false, metaKey: true,  shiftKey: true,  which:  70, string: "&#x21E7;&#x2318;F", alt: "Shift+Command+F"   }
+        },
+        "Safari": { // still missing Safari on Windows... help!
+            "Mac":     { ctrlKey: true,  altKey: false, metaKey: false, shiftKey: true,  which:  70, string: "^&#x2318;F",        alt: "Control+Command+F" }
+        },
+        "Opera": {
+            "Windows": { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               },
+            "Linux":   { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, which: 122, string: "F11",               alt: "F11"               },
+            "Mac":     { ctrlKey: false, altKey: false, metaKey: true,  shiftKey: true,  which:  70, string: "&#x21E7;&#x2318;F", alt: "Shift+Command+F"   }
+        },
+
+    };
+
+    var 
+        isFullScreen = function() {
+            return (documentElement.clientHeight == height && documentElement.clientWidth == width) ||
+                window.fullScreen ||
+                (window.outerHeight == height && window.outerWidth == width) ||
+                (BrowserDetect.browser == "Safari" && window.outerHeight == (height - 40) && window.outerWidth == width)
+            ;
+        }
+        ,$window = $(window)
+    ;
+    
+    var thisKeys = keys[BrowserDetect.browser][BrowserDetect.OS];
+    var shortcut = { shortcut: thisKeys.string, longform: thisKeys.alt };
+
+    $window
+        .data('fullscreen-state', isFullScreen())
+        .data('fullscreen-key',   shortcut)
+        .resize(function() {
+            var fullscreenState = isFullScreen();
+            
+            if ($window.data('fullscreen-state') && !fullscreenState) {
+                $window
+                    .data('fullscreen-state', fullscreenState)
+                    .trigger('fullscreen-toggle', [false])
+                    .trigger('fullscreen-off')
+                ;
+            }
+            else if (!$window.data('fullscreen-state') && fullscreenState) {
+                $window
+                    .data('fullscreen-state', fullscreenState)
+                    .trigger('fullscreen-toggle', [true])
+                    .trigger('fullscreen-on')
+                ;
+            }
+        })
+        .keydown(function(e) {
+            if (thisKeys && e.ctrlKey == thisKeys.ctrlKey && e.altKey == thisKeys.altKey && e.metaKey == thisKeys.metaKey && e.shiftKey == thisKeys.shiftKey && e.which == thisKeys.which)
+                $window.trigger('fullscreen-key', [thisKeys.string, thisKeys.alt]);
+        })
+    ;
+
+})(jQuery, this, document.documentElement, screen.height, screen.width);

manifest.json

@@ -0,0 +1,34 @@
+{
+  
+  "manifest_version": 2,
+  "name": "Ultrawidify",
+  "version": "0.9.1",
+  
+  "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>"],
+    "js": [ "jquery.js", "uw.js" ],
+    "all_frames": true
+  },
+  {
+    "matches": ["*://*.youtube.com/*", "*://youtube.com/*"],
+    "js": [ "jquery.js", "uw.js" ],
+    "all_frames": true
+  }
+  ],
+  
+  "permissions": [
+    "tabs", "activeTab", "*://*.youtube.com/*", "*://youtube.com/*"
+  ],
+  
+  "web_accessible_resources": [
+    "img/zoom.png",
+    "img/uzoom.png",
+    "img/fitw.png",
+    "img/fith.png",
+    "img/reset.png"
+  ]
+}

uw.js

@@ -0,0 +1,434 @@
+var extraClassAdded = false;
+var inFullScreen = false;
+
+var cssmod = "";
+var zoomStep = 0.05;
+
+var originalcss;
+
+$(document).ready(function() {
+  //   console.log("uw::document.ready | document is ready");
+  var serviceArray = [".video-stream" ]; //Youtube 
+  
+  // To bo naš dinamičen css
+  // this will be our dynamic css sheet
+  
+  $(document).keypress(function (event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
+    switch (event.key){
+      case 'w':
+        changeCSS("fitw");
+        break;
+      case 'e':
+        changeCSS("fith");
+        break;
+      case 'r':
+        changeCSS("reset");
+        break;
+      case 'z':
+        changeCSS("zoom");
+        break;
+      case 'u':
+        changeCSS("unzoom");
+    }
+  });
+  //   console.log("uw::document.ready | loaded shortcuts");
+  
+  document.addEventListener("mozfullscreenchange", function( event ) {
+    inFullScreen = ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
+    inFullScreen ? onFullscreenOn() : onFullscreenOff();
+  });
+  
+//   $("<style>")
+//   .prop("type", "text/css")
+//   .html(".neueVideo{ display: block !important; margin: 0px auto !important; position: relative !important; transform: none !important; left: 0px !important; }").appendTo("head");
+//   
+  //   console.log("uw::document.ready | created new CSS class");
+});
+
+function onFullscreenOn(){
+  
+// TODO: show buttons
+//   var button_row = document.getElementsByClassName("ytp-right-controls")[0];
+//   
+//   console.log("uw:: Full screen is now on");
+//   var t = document.createTextNode("but");
+//   
+//   var b_fitw = document.createElement('button');
+//   
+//   b_fitw.appendChild(t);
+//   
+//   
+// //   b_fitw.id = "uw_b_fitw";
+//   b_fitw.className = "ytp_button";
+//   b_fitw.onclick = function() { changeCSS("fitw"); };
+// //   b_fitw.appendChild("<img src='img/fitw.png' height='100%' />");
+//   
+//   button_row.appendChild(b_fitw);
+//   
+//   //   var b_fith = document.createElement('button');
+//   
+//   console.log("uw:: added buttons");
+}
+function onFullscreenOff(){
+  //TODO: hide buttons
+}
+
+function changeCSS(what_do){
+  
+  // Če nismo na Youtube, bodo youtube videi v <iframe> elementu — zato najprej pogledamo, če
+  // je element s fokusom iframe
+  
+  if(inIframe()){
+    
+    var player = document.getElementById("player");
+    changeCSS_nofs(what_do, player);
+    
+    // to verjetno pomeni, da nismo na Youtube, zato zaključimo kar tukaj.
+    // 
+    // if we're controlling video in an iframe, that probably means we aren't on youtube
+    // so we finish here.
+    return;
+  }
+  
+  // Velikost videa spreminjamo samo, če smo v celozaslonskem načinu ALI če NE pišemo komentarja
+  // Videa ne spreminjamo tudi, če uporabljamo vrstico za iskanje.
+  // 
+  // We only change video size when we're in full screen OR if we are NOT writing a comment.
+  // We also leave video alone if we're using the search bar
+  
+  var player = document.getElementById("movie_player");  
+  if(inFullScreen || (
+    (document.activeElement.getAttribute("role") != "textbox") &&
+    (document.activeElement.getAttribute("type") != "text")
+    ))
+    changeCSS_nofs(what_do, player);
+  
+  
+  
+}
+
+function changeCSS_nofs(what_do, player){
+  
+  var w;
+  var h;
+  var top;
+  var left;
+  
+//     var player = $('[id*="player"]');
+//   var player = document.getElementById("movie_player");
+  /*
+  if (player = null){
+    console.log("uw::Player is null. retrying...");
+    player = $('[id*="player"]');
+  }*/
+  
+  var vs = document.getElementsByClassName("video-stream")[0];
+  var vidwid = vs.scrollWidth;
+  var vidhei = vs.scrollHeight;
+  var ar = vidwid/vidhei;
+    
+  if(what_do == "reset"){
+//     $(".video-stream").removeClass("neueVideo");    
+    extraClassAdded = false;
+    
+    // popraviti je treba še širino, višino in top
+    // we need to fix width, height and top
+    
+    var vidwid = document.getElementsByClassName("video-stream")[0].scrollWidth;
+    var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
+    var vidaspect = vidwid / vidhei;
+    var scraspect = player.clientWidth / player.clientHeight;
+    
+    if( vidaspect > scraspect ){  // Video je širši od okna | video is wider than window
+      w = player.clientWidth;
+      h = player.clientWidth / vidwid * vidhei;
+      
+      top = (player.clientHeight - h) / 2;
+      left = 0;
+    }
+    else{
+      h = player.clientHeight;
+      w = player.clientHeight / vidhei * vidwid;
+      
+      top = 0;   //itak zasedemo 100% višine
+      left = (player.clientWidth - w) / 2;
+    }
+    
+    top = top + "px";
+    left = left + "px";
+    w = w + "px";
+    h = h + "px";
+    
+    $("video").css({"width": w,"height": h,"top": top, "left":left});
+    return;
+  }
+  
+  if(what_do == "fitw"){
+    // Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati,
+    // za kakšen faktor se poviša višina. To potrebujemo, da se pravilno izračuna offset.
+    // 
+    //        100vw = window.innerWidth
+    //    [1] window.innerWidth / videoWidth = x
+    // 
+    // Če pomnožimo videoHeight z x, dobimo novo višino videa. Nova višina videa je lahko večja ali manjša
+    // kot višina ekrana. Če je višina videa manjša kot višina ekrana, bo top pozitiven, drugače negativen:
+    // 
+    //    [2] nvideoh = x * videoWidth
+    //    [3] top = (window.innerHeight - nvideoh) / 2
+    //
+    // Z 2 delimo, ker hočemo video vertikalno poravnati.
+    
+    w = player.clientWidth;
+    h = player.clientWidth / vidwid * vidhei;
+    
+    top = (player.clientHeight - h) / 2;
+    left = 0;            // Ker zavzamemo vso širino | cos we take up all the width
+  }
+  
+  if(what_do == "fith"){
+    h = player.clientHeight;
+    w = player.clientHeight / vidhei * vidwid;
+    
+    top = 0;   //itak zasedemo 100% višine
+    left = (player.clientWidth - w) / 2;
+  }
+  
+  if(what_do == "zoom"){    
+    // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
+    // We do this so zoom and unzoom steps change video sizes for the same amount
+    
+    h = vidhei + (player.clientHeight * zoomStep);
+    w = vidwid + (player.clientHeight * zoomStep * ar);
+    /* Zakaj računamo širino na tak način?
+    // 
+    // Predstavljajte si, da imamo 2100:900 video v 1600:900 škatli, zoomStep = 0.1. Če bi širino računali po formuli:
+    // 
+    //     širina = širina_videa + (širina zaslona * zoomStep)
+    //     
+    // Potem bi bila nova velikost videa 2260 x 990. Razmerje stranic: 2.28 (moglo bi biti 2.33 — video je popačen).
+    // Zaradi tega novo širino rajši povečamo za razliko_v_višini * razmerje_stranic
+    // 
+    //     2100 + (900 * 0.1 * (2100/900)) =
+    //                 2100 + (90 * 2.333) = 2310
+    //
+    // Razmerje stranic (2310x990) je tako 2.333 — tako, kot bi moglo biti.
+    // 
+    // 
+    // ============================================================================================================
+    // 
+    // Why did we calculate width this way?
+    // 
+    // Imagine we have a 2100x900 video in a 1600:900 container, zoomStep = 0.1. If we calculated width using this:
+    //
+    //     width = video_width + (container_width * zoomStep)
+    //     
+    // then the new size would be 2260 x 990. This gives us an aspect ratio of 2.28 instead of 2.33 (which is what it
+    // should be). Because of that we rather increase the width by delta_height * aspect_ratio:
+    //
+    //     2100 + (900 * 0.1 * (2100/900)) =
+    //                 2100 + (90 * 2.333) = 2310 
+    //
+    // This gives us the correct aspect ratio and prevents video deformations.
+    */
+    
+    top = (player.clientHeight - h)/2
+    left = (player.clientWidth - w) / 2;
+    
+    if (h > player.clientHeight * 4){
+      console.log("okay mate you took this shit way too far now. I'm not doing shit");
+      return;
+    }
+  }
+  
+  if(what_do == "unzoom"){
+    // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
+    // We do this so zoom and unzoom steps change video sizes for the same amount
+    h = vidhei - (player.clientHeight * zoomStep);
+    w = vidwid - (player.clientHeight * zoomStep * ar);
+    
+    top = (player.clientHeight - h)/2
+    left = (player.clientWidth - w) / 2;
+    
+    if (h < player.clientHeight * 0.25){
+      console.log("don't you think this is small enough already? You don't need to resize the video all the way down to the size smaller than your penis.");
+      console.log("(if you're a woman, substitute 'penis' with whatever the female equivalent is.)");
+      return;
+    }
+  }
+    
+  top = top + "px";
+  left = left + "px";
+  w = w + "px";
+  h = h + "px";
+  
+  $("video").css({"width": w,"height": h,"top": top, "left": left});
+}
+
+function inIframe () {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
+// // Ta funkcija spreminja CSS v 'full screen' načinu. Is youtube-specific.
+// // Včasih smo v fullscreen uporabljali to, zdaj uporabljamo changeCSS_nofs
+// // ker je ta napisana za bolj splošen primer (in dela tudi na fullscreen).
+// // 
+// // This function modifies CSS in full screen. So far works on youtube.
+// // We don't use it anymore because changeCSS_nofs also works on fullscreen.
+// function changeCSS_fs(what_do){
+//   
+//   var w;
+//   var h;
+//   var top;
+//   
+//   // Če hočemo povrniti nastavitve na privzeto, samo pobrišemo naš css
+//   // if we want to restore the default player we just clear our css
+//   if(what_do == "reset"){
+//     $(".video-stream").removeClass("neueVideo");    
+//     extraClassAdded = false;
+//     
+//     // popraviti je treba še širino, višino in top
+//     // we need to fix width, height and top
+//     
+//     var vidwid = document.getElementsByClassName("video-stream")[0].scrollWidth;
+//     var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
+//     var vidaspect = vidwid / vidhei;
+//     var scraspect = window.innerWidth / window.innerHeight;
+//     
+//     if( vidaspect > scraspect ){  // Video je širši od okna | video is wider than window
+//       w = "100vw";
+//       h = "auto";
+//       // Razlaga tegale je spodaj | this line of code is explained below
+//       top = (window.innerHeight - ((window.innerWidth / vidwid) * vidhei)) / 2;
+//       top = top + "px";
+//       $("video").css({"width": w,"height": h,"top": top});
+//     }
+//     else{
+//       w = "auto";
+//       h = "100vh";
+//       top = "0px";
+//       $("video").css({"width": w,"height": h,"top": top});
+//     }
+//     
+//     console.log("uw::changeCSS | reseting to default view");
+//     return;
+//   }
+//   
+//   if (!extraClassAdded){
+//     $(".video-stream").addClass("neueVideo");
+//     extraClassAdded = true;
+//   }
+//   
+//   
+//   
+//   if(what_do == "fitw"){
+//     // Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati,
+//     // za kakšen faktor se poviša višina. To potrebujemo, da se pravilno izračuna offset.
+//     // 
+//     //        100vw = window.innerWidth
+//     //    [1] window.innerWidth / videoWidth = x
+//     // 
+//     // Če pomnožimo videoHeight z x, dobimo novo višino videa. Nova višina videa je lahko večja ali manjša
+//     // kot višina ekrana. Če je višina videa manjša kot višina ekrana, bo top pozitiven, drugače negativen:
+//     // 
+//     //    [2] nvideoh = x * videoWidth
+//     //    [3] top = (window.innerHeight - nvideoh) / 2
+//     //
+//     // Z 2 delimo, ker hočemo video vertikalno poravnati.
+//     
+//     w = "100vw";
+//     h = "auto";
+//     
+//     var vidwid = document.getElementsByClassName("video-stream")[0].scrollWidth;
+//     var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
+//     
+//     //    Glej zgornji komentar za pomen [1][2][3] | see above comment for meaning of [1][2][3]
+//     //
+//     //    ___________________________[3]____________________________________
+//     //    |                     __________________[2]__________________    |
+//     //    |                     |____________[1]_____________         |    |
+//     top = (window.innerHeight - ((window.innerWidth / vidwid) * vidhei)) / 2;
+//     
+//     top = top + "px";
+//     console.log("uw::changeCSS | will try fit to width and center");
+//   }
+//   
+//   if(what_do == "fith"){
+//     top = "0";   //itak zasedemo 100% višine
+//     w = "auto";
+//     h = "100vh";
+//     
+//     console.log("uw::changeCSS | will try fit to height");
+//   }
+//   
+//   if(what_do == "zoom"){    
+//     var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
+//     
+//     w = "auto";
+//     
+//     // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
+//     // We do this so zoom and unzoom steps change video sizes for the same amount
+//     h = vidhei + (window.innerHeight * zoomStep);
+//     
+//     top = (window.innerHeight - h)/2
+//     
+//     if (h > window.innerHeight * 4){
+//       console.log("okay mate you took this shit way too far now. I'm not doing shit");
+//       return;
+//     }
+//     console.log("uw::changeCSS | zooming in");
+//     
+//     h = h + "px";
+//     top = top + "px";
+//   }
+//   
+//   if(what_do == "unzoom"){
+//     var vidhei = document.getElementsByClassName("video-stream")[0].scrollHeight;
+//     
+//     w = "auto";
+//     
+//     // Video povečujemo na tak način, da sta zoom in unzoom povečata oz. zmanjšata video za enak korak
+//     // We do this so zoom and unzoom steps change video sizes for the same amount
+//     h = vidhei - (window.innerHeight * zoomStep);
+//     
+//     top = (window.innerHeight - h)/2
+//     
+//     if (h < window.innerHeight * 0.25){
+//       console.log("don't you think this is small enough already? You don't need to resize the video to the size smaller than your penis.");
+//       console.log("(if you're a woman, just substitute 'penis' with whatever the female equivalent is)");
+//       return;
+//     }
+//     console.log("uw::changeCSS | unzooming");
+//     
+//     h = h + "px";
+//     top = top + "px";
+//   }
+//   
+//   $("video").css({"width": w,"height": h,"top": top});
+//   
+//   console.log("uw::changeCSS | applying css");
+// }
+
+
+
+
+// console.log("uw | finished loading");
+
+
+
+
+
+
+// var fitwbutton = document.createElement('button');
+// 
+// fitwbutton.appendChild(t);
+// fitwbutton.onclick = function(){ changeCSS("fitw"); };
+// console.log("testing!3");
+// document.getElementsByClassName("ytp-right-controls")[0].appendChild(fitwbutton);
+/*
+console.log("testing4!");
+document.body.appendChild('cssmod');
+console.log("testing 4.1");*/