initial commit

README.md

@@ -1,2 +1,42 @@
-# ultrawidify
-Firefox extension that allows you to work around some people's inability to properly encode 21:9 videos.
+# Ultrawidify — youtube aspect ratio fixer for firefox
+
+## What does it do?
+
+The technology has been here for a while, but plenty of people don't know how to properly encode a video (despite the fact [youtube has an article that explains aspect ratios](https://support.google.com/youtube/answer/6375112)). Plenty of people surprisingly includes major Holywood studios, such as [Marvel](https://www.youtube.com/watch?v=Ke1Y3P9D0Bc), [Disney](https://www.youtube.com/watch?v=yCOPJi0Urq4), [Dreamworks](https://www.youtube.com/watch?v=oKiYuIsPxYk), [Warner Brothers](https://www.youtube.com/watch?v=VYZ3U1inHA4), [Sony](https://www.youtube.com/watch?v=7BWWWQzTpNU), et cetera. You'd think that's the one thing Holywood studios and people who make [music videos for a living](https://www.youtube.com/watch?v=c6Mx2mxpaCY) would know how to do right, but they don't. This extension is here to fix that.
+
+### TL;DR: it does this:
+
+![Should these black bars be here? No ... but an ultrawide user never forgets.](img-demo/example-httyd2.png)
+
+I'd demo with Sintel but it's properly encoded.
+
+This extension also allows you to zoom in or out of video (similar to how SMPlayer does it).
+
+## Installing
+
+[Just install it from Mozilla's addon page](https://addons.mozilla.org/en/firefox/addon/ultrawidify/). I'm only showing the source here.
+
+## How do I use it?
+
+Here's the list of keybinds:
+
+`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)
+`z` : zoom
+`u` : unzoom
+`r` : reset to default
+
+## What works
+
+More or less everything. Works regardless of whether the video is in fullscreen or not. Works regardless if the youtube video you're watching is embedded on some other page.
+
+## What doesn't
+
+On a very rare occasion, `w` button won't work. So far this behaviour was seen in [two](https://www.youtube.com/watch?v=eRsGyueVLvQ) [videos](https://www.youtube.com/watch?v=RYsPEl-xOv0) out of countless I've tried. In cases like this, use `z` to zoom instead.
+
+## Plans for the future
+
+* Adding custom keybinds
+* Adding a proper settings page
+* Adding buttons for actions in youtube's player
+* Adding an option to force specific aspect ratio

js/jquery.fullscreen.js

@@ -1,123 +0,0 @@
-(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

@@ -10,12 +10,7 @@
   "content_scripts": [
   {
     "matches": ["<all_urls>"],
-    "js": [ "jquery.js", "uw.js" ],
-    "all_frames": true
-  },
-  {
-    "matches": ["*://*.youtube.com/*", "*://youtube.com/*"],
-    "js": [ "jquery.js", "uw.js" ],
+    "js": [ "js/jquery.js", "js/uw.js" ],
     "all_frames": true
   }
   ],