Netflix autoAR: polished, working and in settings. Ready to submit to AMO.

js/uw-bg.js

@@ -1,5 +1,5 @@
 debugmsg = false;
-debugmsg_imdb = true;
+debugmsg_imdb = false;
 url_changed = false;
 if(debugmsg){
   console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");

js/uw.js

@@ -1,7 +1,7 @@
 var debugmsg = false;
 var debugmsg_click = false;
-var debugmsg_message = true;
+var debugmsg_message = false;
-debugmsg_autoar = true;
+debugmsg_autoar = false;
 var debugmsg_periodic = false;
 if(debugmsg || debugmsg_click || debugmsg_message){
   console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ");
@@ -243,16 +243,34 @@ var DEFAULT_KEYBINDINGS = {
   8: {
     action: "char",
     targetAR: (4/3),
+    key: "c",
+    modifiers: []
+  },
+  9: {
+    action: "autoar",
     key: "a",
     modifiers: []
   }
 };
 
 var last_location = "";
+
+var autoar_enabled = true;
+
+browser.storage.local.get("ultrawidify_autoar").then(function(opt){
+  if(!opt.ultrawidify_autoar){
+    browser.storage.local.set({ultrawidify_autoar: true});
+  }
+  else 
+    this.autoar_enabled = opt.ultrawidify_autoar;
+  if(!this.autoar_enabled)
+    var last_whatdo = {type: "reset", what_do:"reset"};
+});
+
 var KEYBINDS = {};
 var ask4keybinds = browser.storage.local.get("ultrawidify_keybinds");
 ask4keybinds.then( (res) => {
-  if(res.length == 1 && jQuery.isEmptyObject(res[0])){
+  if(/*res.length == 1 &&*/ (jQuery.isEmptyObject(res[0]) || jQuery.isEmptyObject(res[0].ultrawidify_keybinds)) ){
     if(debugmsg)
       console.log("uw::<init keybinds> | No keybindings found. Loading default keybinds as keybinds");
     
@@ -260,7 +278,18 @@ ask4keybinds.then( (res) => {
     KEYBINDS = DEFAULT_KEYBINDINGS;
   }
   else{
-    KEYBINDS = res[0].ultrawidify_keybinds;
+    if(Object.keys(res[0].ultrawidify_keybinds).length == Object.keys(DEFAULT_KEYBINDINGS).length)
+      KEYBINDS = res[0].ultrawidify_keybinds;
+    else{
+      KEYBINDS = res[0].ultrawidify_keybinds;
+      
+      // remap 4:3 keybind from 'a' to 'c', but only if the keybind wasn't changed
+      var old_keybinds = Object.keys(res[0].ultrawidify_keybinds);
+      if(KEYBINDS[old_keybinds-1].key == "a" && KEYBINDS[old_keybinds-1].modifiers == []){
+        KEYBINDS[old_keybinds-1].key == "c";
+      }
+      KEYBINDS[old_keybinds] = {action: "autoar", key: "a", modifiers: []};
+    }
   }
 //   console.log("res. ", res[0].ultrawidify_keybinds);
 });
@@ -364,7 +393,7 @@ function periodic() {
     }
   }
 
-  if(page_url.indexOf("netflix.com") != -1){
+  if(page_url.indexOf("netflix.com") != -1 && autoar_enabled){
     //Netflix-specific stuff
     var qntitle = document.querySelector(".player-status-main-title");
     var ntitle = "";
@@ -499,6 +528,10 @@ function keydownSetup(){
             changeCSS("char", KEYBINDS[i].targetAR);
             return;
           }
+          if(KEYBINDS[i].action == "autoar"){
+            manual_autoar();
+            return;
+          }
           changeCSS("anything goes", KEYBINDS[i].action);
           return;
         }
@@ -964,6 +997,29 @@ function onFullscreenOff(){
 
 }
 
+function manual_autoar(){
+  if(page_url.indexOf("netflix.com") != -1){
+    var ntitle = document.querySelector(".player-status-main-title");
+    
+    //querySelector lahko vrne null, zato moramo preveriti, kaj smo dobili — drugače se .textContent pritožuje.
+    //querySelector can return null, in which case .textContent will complain.
+    if(!ntitle)
+      return;
+    
+    var title = ntitle.textContent;
+    
+    char_got_ar = false;
+    last_whatdo = {type: "autoar", what_do:"autoar"};
+    
+    var sending = browser.runtime.sendMessage({
+      type: "gibAspectRatio",
+      title: title
+    });
+    sending.then( function(){}, function(err1, err2){console.log("uw::periodic: there was an error while sending a message", err1, err2)} );
+  }
+  
+}
+
 function changeCSS(type, what_do){
   if(debugmsg)
     console.log("uw::changeCSS | starting function");

res/settings.html

@@ -59,6 +59,9 @@
     .center{
       margin: 0 auto;
     }
+    .red{
+      color: #ff3a00;
+    }
     .left{
       text-align: left;
     }
@@ -106,12 +109,26 @@
     }
     .uw_shortcuts_line{
       padding-top: 0.25em;
-      padding-left: 10em;
+      padding-left: 5em;
     }
     .uw_shortcuts_label{
       display: inline-block;
       color: #fff;
-      width: 7.5em;
+      width: 17.5em;
+    }
+    .uw_options_line{
+      margin-top: 0.25em;
+      font-size: 1.1em;
+      width: 80%;
+      margin-left: 5%;
+    }
+    .uw_options_option{
+      margin-left: 5%;
+    }
+    .uw_options_desc{
+      margin-top: 0.33em;
+      font-size: 0.69em;
+      color: #aaa;
     }
     .buttonbar{
 /*       width: 100%; */
@@ -144,12 +161,22 @@
       </div>
       <div class="tabline center">
         <div class="content left">
-          <div id="tab_shortcuts" class="block tab tab-selected">Shortcuts</div>
+          <div id="tab_general_settings" class="block tab tab-selected">General settings</div>
+          <div id="tab_shortcuts" class="block tab">Shortcuts</div>
           <div id="tab_about" class="block tab">About</div>
         </div>
       </div>
     </header>
-    <div id="uw_shortcuts">
+    <div id="general_settings">
+       <div class="content left">
+         <div class="uw_options_line">
+          <div class="uw_options_option"><input type="checkbox" id='enable_autoar'> Enable automatic aspect ratio detection</div>
+          <div class="uw_options_desc">This option uses 3rd party websites to determine aspect ratio. It may not work all the time or even properly. It only works with Netflix. <span class="red">This option is <b>NOT</b> available on Youtube.</span></div>
+         </div>
+       </div>
+    </div>
+    
+    <div id="uw_shortcuts" class="hide">
       <div class="content left"> 
         <form>
         <!-- BEGIN FORM -->
@@ -233,6 +260,15 @@
             <input type='checkbox' id='ar43_alt'   > Alt +
             <input type='text'     id='ar43_letter' maxlength='1' class='shortcut_input'>
           </div>
+          
+          <!-- try autoar -->
+          <div class="uw_shortcuts_line">
+            <div class="uw_shortcuts_label">Autodetect aspect ratio (Netflix only)</div>
+            <input type='checkbox' id='autoar_ctrl'  > Ctrl + 
+            <input type='checkbox' id='autoar_shift' > Shift + 
+            <input type='checkbox' id='autoar_alt'   > Alt +
+            <input type='text'     id='autoar_letter' maxlength='1' class='shortcut_input'>
+          </div>
         <!-- END FORM -->
         </form>
         <div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div>
@@ -243,10 +279,10 @@
   
     <div id="about" class="hide">
       <div class="content left">
-        <h2>Ultrawidify - an aspect ratio fixer for youtube</h2>
+        <h2>Ultrawidify - an aspect ratio fixer for youtube <small>(and netflix)</small></h2>
         <p>Created by Tamius Han (me). If something is broken, you can shout at me on <a href="https://github.com/xternal7/ultrawidify">github</a> (shout nicely, though. Open an issue or bug report or something). If you're curious to see the source code, <a href="https://github.com/xternal7/ultrawidify">github's here</a>. If you're looking at this page because you're bored and want to be bored some more, <a href="http://tamius.net">my website's here</a>.</p>
         <h2>Plans for the future</h2>
-        <p>Netflix support, probably.</p>
+        <p><strike>Netflix support, probably.</strike> we did it lol</p>
         <h2>Acknowledgements</h2>
         <p>This extension uses font <a href="https://fonts.google.com/specimen/Oxygen">Oxygen</a>.</p>
         <p>Special thanks to CD Project Red (The Witcher 2), Anet (Guild Wars 2), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p>

res/settings.js

@@ -1,22 +1,38 @@
 function showAbout(){
-  document.getElementById("uw_shortcuts").classList.add("hide");
+  clearPage();
-  document.getElementById("about").classList.remove("hide");
   
-  document.getElementById("tab_shortcuts").classList.remove("tab-selected");
+  document.getElementById("about").classList.remove("hide");
   document.getElementById("tab_about").classList.add("tab-selected");
 }
 function showShortcuts(){
-  document.getElementById("uw_shortcuts").classList.remove("hide");
+  clearPage();
-  document.getElementById("about").classList.add("hide");
   
+  document.getElementById("uw_shortcuts").classList.remove("hide");
   document.getElementById("tab_shortcuts").classList.add("tab-selected");
+}
+function showGeneralSettings(){
+  clearPage();
+  
+  document.getElementById("general_settings").classList.remove("hide");
+  document.getElementById("tab_general_settings").classList.add("tab-selected");
+}
+
+function clearPage(){
+  // Hide you sections
+  document.getElementById("uw_shortcuts").classList.add("hide");
+  document.getElementById("about").classList.add("hide");
+  document.getElementById("general_settings").classList.add("hide");
+  
+  // Hide you tabs
+  document.getElementById("tab_shortcuts").classList.remove("tab-selected");
   document.getElementById("tab_about").classList.remove("tab-selected");
+  document.getElementById("tab_general_settings").classList.remove("tab-selected");
   
 }
 
 function saveopts(){
   
-  var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"];
+  var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
   var new_keybinds = {};
 
   // Preberemo naš obrazec in iz njega naredimo nov objekt z bližnjicami.
@@ -98,6 +114,21 @@ function saveopts(){
   
 }
 
+function saveAutoar(){
+  console.log("saving autoar. is checked?", document.querySelector("#enable_autoar").checked)
+  setopt({ultrawidify_autoar: document.querySelector("#enable_autoar").checked});
+}
+
+// setopt in getopt. Shranita oz. dobita stvari iz skladišča
+// setopt, getopt. They set/get stuff from the storage
+
+function setopt(item){
+  browser.storage.local.set(item);
+}
+function getopt(prop, callback){
+  browser.storage.local.get(prop).then(callback);
+}
+
 function compareModifiers(a,b){
   //NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj
   //      dobro, saj 'ctrl' vedno pride pred 'alt' in 'alt' vedno pride pred 'shift' (če se sploh pojavijo).
@@ -121,7 +152,7 @@ function printerr(err){
 function gotopts(opts){
   var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];});
 
-  var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"];
+  var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
   for(var i = 0; i < actions.length; i++){
     document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
     document.querySelector("#" + actions[i] + "_letter").value = KEYBINDS[i].key;
@@ -141,10 +172,17 @@ function loadopts(){
   ask4keybinds.then(gotopts, printerr);
 }
 
+
+// page init
+
 document.addEventListener("DOMContentLoaded", loadopts);
 
 document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts);
 document.querySelector("#tab_about").addEventListener("click", showAbout);
+document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings);
 
 document.querySelector("#kb_save").addEventListener("click", saveopts);
 document.querySelector("#kb_cancel").addEventListener("click",loadopts);
+
+document.querySelector("#enable_autoar").addEventListener("click",saveAutoar);
+getopt("ultrawidify_autoar",function(obj){console.log("obj:",obj);document.querySelector("#enable_autoar").checked = obj.ultrawidify_autoar});