Extension UI can now be hidden.

js/uw.js

@@ -134,10 +134,10 @@ var UW_UI_BUTTONS = {
 
 var UW_UI_BANLIST = {
   youtube: {
-    autoar: true
+    autoar: "all"
   },
   netflix: {
-    settings: true
+    settings: "all"
   }
 }
 
@@ -232,6 +232,7 @@ function init(force_reload){
   if(debugmsg)
     console.log("uw::init | starting init");
   
+  
   var el;
   for (key in UW_UI_BUTTONS){
     el = UW_UI_BUTTONS[key];
@@ -243,37 +244,43 @@ function init(force_reload){
     }
   }
   
-  var marker = document.getElementById("uw_save_site");
+//   var marker = document.getElementById("uw_save_site");
   
   if(debugmsg)
     console.log("uw | %cpage_url: "+page_url,"color: #99F");
   
   
   /* Fun fact — če reloadamo razširitev v about:debugging, window.location vrne "javascript:". Fak
-  // Fun fact — if we reload the extension from about:debugging, window.location returns "javascript:" (which
+   * // Fun fact — ivar previousElements = document.getElementsByClassName("uw_element");
+   i *f(previousElements){
+   while (previousElements.length > 0){
+     previousElements[0].parentNode.removeChild(previousElements[0]);
+}
+}f we reload the extension from about:debugging, window.location returns "javascript:" (which
   // obviously isn't the page we're on. Fak.
   */
-  if(page_url.indexOf("javascript:") != -1){
+//   if(page_url.indexOf("javascript:") != -1){
-    if(marker){
+//     if(marker){
-      if(debugmsg){
+//       if(debugmsg){
-        console.log("uw::init | %csomething went wrong, page_url is not properly defined. Trying to get URL from a marker","color: #000; background-color: #F00", "marker value:",marker.textContent);
+//         console.log("uw::init | %csomething went wrong, page_url is not properly defined. Trying to get URL from a marker","color: #000; background-color: #F00", "marker value:",marker.textContent);
-      }
+//       }
-      page_url = marker.textContent;
+//       page_url = marker.textContent;
-    }
+//     }
-    else
+//     else
-      console.log("uw::init | %csomething went wrong, page_url is not properly defined. Marker wasn't found either.r","color: #000; background-color: #F00");
+//       console.log("uw::init | %csomething went wrong, page_url is not properly defined. Marker wasn't found either.r","color: #000; background-color: #F00");
-  }
+//   }
-  else{
+//   else{
-    if(!marker && page_url.indexOf("javascript:") == -1){
+//     if(!marker && page_url.indexOf("javascript:") == -1){
-      var marker = document.createElement('div');
+//       var marker = document.createElement('div');
-      marker.id = "uw_save_site";
+//       marker.id = "uw_save_site";
-      marker.textContent = page_url;
+//       marker.textContent = page_url;
-    }
+//     }
-    else{
+//     else{
-      if(page_url.indexOf("javascript:") == -1)
+//       if(page_url.indexOf("javascript:") == -1)
-        marker.textContent = page_url;
+//         marker.textContent = page_url;
-    }
+//     }
-  }
+//   }
+  
   
   
   
@@ -306,8 +313,7 @@ function init(force_reload){
     
 //     tmp.id = "uw_buttons_go_after_this";
     
-    if(force_reload)
+    
-      ui_anchor.parentNode.remove(ui_anchor);
     
 //     ui_anchor = document.getElementsByClassName("uw-button-row")[0];
     
@@ -373,6 +379,9 @@ function init(force_reload){
 // mutually exclusive definitions, we can get some problems with CSS not working the way it should. People who
 // aren't Tam generally don't see the benefit as they won't reload the extension — let alone reload the extension
 // after messing with CSS.
+var ui_anchor = document.getElementById("uw_ui_anchor");
+//   if(force_reload && ui_anchor)
+//     ui_anchor.parentNode.remove(ui_anchor);uf
 var uwcss = document.getElementsByClassName("uw_css");
 while(uwcss && uwcss.length > 0)
   uwcss[0].parentNode.removeChild(uwcss[0]);
@@ -474,7 +483,7 @@ browser.storage.onChanged.addListener(function(){
   if(debugmsg){
     console.log("uw::<storage change> |%c calling extSetup from storage.onChanged","color:#99f");
   }
-  extSetup();
+  extSetup(true);
 });
 
 //END keybind-related stuff
@@ -505,7 +514,7 @@ function extsetup_comms(){
       
       // Velikost gumbov posodobimo v vsakem primeru
       // We update the button size in any case
-      updateCtlButtonSize();
+      updateUICSS();
       
       if(debugmsg)
         console.log("uw::onMessage | message number:",num_of_msg," »» everything is done. Buttons: ", document.getElementsByClassName("uw-button"));
@@ -544,8 +553,8 @@ function periodic() {
       console.log("uw::periodic | no buttons detected. Readding.");
     
     init();
-    addCtlButtons(0);
+    buildUInative();
-    updateCtlButtonSize();
+    updateUICSS();
   }
   var w = window.innerWidth;
   var h = window.innerHeight;
@@ -559,7 +568,7 @@ function periodic() {
       changeCSS(last_whatdo.type, last_whatdo.what_do);
     }
       
-    updateCtlButtonSize();
+    updateUICSS();
   }
   var controls = document.getElementsByClassName("player-controls-wrapper")[0];
   if(controls){
@@ -575,7 +584,7 @@ function periodic() {
         console.log("uw::periodic | toggled visibility");
       netflix_cltbar_visibility = ind;
       if(ind == -1)
-        updateCtlButtonSize();
+        updateUICSS();
     }
   }
     
@@ -620,7 +629,7 @@ $(document).ready(function() {
 
 //BEGIN EXTENSION SETUP
 
-function extSetup(){
+function extSetup(force_reload){
   if(debugmsg)
     console.log("==============================================================================================");
   
@@ -628,6 +637,11 @@ function extSetup(){
   
 //   SITE = "";
   
+  if(force_reload){
+    ui_anchor.parentNode.removeChild(ui_anchor);
+    ui_anchor = null;
+  }
+  
   if(debugmsg){
     console.log("uw::extSetup | our current location is:", last_location, "(page_url says",page_url,")");
     console.log("uw::extSetup | initiating extension");
@@ -648,31 +662,45 @@ function extSetup(){
   //extsetup_stage2 gets called in loadFromStorage, on siterules
 }
 
-var extsetup_stage2_state = 0;
+
-var EXTSETUP_STAGE2_REQUIRED_STATE = 3;
+var EXTSETUP_STAGES = {
-function extsetup_stage2(op){
+  site: false,
-  
+  uiban: false,
+  uimode: false,
+}
+
+function stagetracker(op){
   if(op == "clear"){
     if(debugmsg)
-      console.log("uw::extsetup (stage 2) | %cclearing progress (state)","color: #fff");
+      console.log("uw::stagetracker | %cclearing progress (state)","color: #fff");
-    extsetup_stage2_state = 0;
+    for(key in EXTSETUP_STAGES)
+      EXTSETUP_STAGES[key] = false;
     return;
   }
-  if(op == "site"){
+  EXTSETUP_STAGES[op] = true;
-    if(debugmsg)
+
-      console.log("uw::extsetup (stage 2) | %cSITE stage complete","color: #fff");
+  var all_done = true;  
-    extsetup_stage2_state |= 1;
+  var unfinished_stages = "";
-  }
+    
-  if(op == "uiban"){
+  for(key in EXTSETUP_STAGES){
-    if(debugmsg)
+    all_done &= EXTSETUP_STAGES[key];
-      console.log("uw::extsetup (stage 2) | %cuiban stage completed. Setting progress","color: #fff");
+    if(debugmsg && ! EXTSETUP_STAGES[key]){
-    extsetup_stage2_state |= 2;
+      unfinished_stages += "<" + key + "> ";
+    }
   }
   
-  if(extsetup_stage2_state != EXTSETUP_STAGE2_REQUIRED_STATE){
+  if(debugmsg)
+    console.log("uw::stagetracker | added stage",op, all_done ? " | all stages finished" : (" | missing stages: " + unfinished_stages));
+
+  return all_done;  
+}
+
+function extsetup_stage2(op){
+  
+  if(! stagetracker(op) ){
     if(debugmsg)
-      console.log("uw::extsetup (stage 2) | %cSome stages are still uncompleted, doing nothing.","color: #fff");
+      console.log("uw::extSetup (stage 2) | %cSome stages are still uncompleted, doing nothing.","color: #fff");
-    return;
+    return false;
   }
   
   // SITE se nastavi v funkciji loadFromStorage. Če ni nastavljen, potem nismo na znani/podprti strani
@@ -705,44 +733,35 @@ function extsetup_stage2(op){
     console.log("======================================[ setup finished ]======================================\n\n\n\n\n");
 }
 
+
+function getopt(prop, callback){
+  if(usebrowser == "chrome")
+    browser.storage.local.get(prop, callback);
+  else
+    browser.storage.local.get(prop).then(function(prop){callback(prop[0])});
+}
+
 function loadFromStorage(){
   if(debugmsg || debugmsg_autoar)
     console.log("uw::loadFromStorage | loading stuff from storage.");
   
   extsetup_stage2("clear");
   
-  if(usebrowser == "chrome"){
+  getopt("ultrawidify_uiban", function(data){
-    browser.storage.local.get("ultrawidify_uiban", function(data){
+    extsetup_uiban(data);
-      extsetup_uiban(data);
+    extsetup_stage2("uiban");
-      extsetup_stage2("uiban");
+  });
-    });
+  getopt("ultrawidify_siterules", function(data){ 
-    browser.storage.local.get("ultrawidify_siterules", function(data){ 
+    extsetup_siterules(data); 
-      extsetup_siterules(data); 
+    extsetup_stage2("site");
-      extsetup_stage2("site") 
+  });
-    });
+  getopt("ultrawidify_ui", function(data){
-    browser.storage.local.get("ultrawidify_autoar", function(data){ extsetup_autoar(data) });
+    extsetup_ui_mode(data);
-    browser.storage.local.get("ultrawidify_keybinds", function(data){ extsetup_keybinds(data) });
+    extsetup_stage2("uimode"); 
-  }
+  });
-  else{
+  getopt("ultrawidify_autoar", function(data){ extsetup_autoar(data) });
-    var ask4uiban = browser.storage.local.get("ultrawidify_uiban").then(function(obj){
+  getopt("ultrawidify_keybinds", function(data){ extsetup_keybinds(data) });
-      extsetup_uiban(obj);
+  
-      console.log("uiban finished");
-      extsetup_stage2("uiban");
-    });
-    browser.storage.local.get("ultrawidify_siterules").then(function(obj){
-      if(extsetup_siterules(obj))
-        extsetup_stage2("site"); 
-    });
-    browser.storage.local.get("ultrawidify_autoar").then(function(opt){
-      if(debugmsg || debugmsg_autoar)
-        console.log("uw::loadFromStorage | setting up autoar. opt:",opt)
-      extsetup_autoar(opt);
-      if(debugmsg || debugmsg_autoar)
-        console.log("autoar_enabled:",autoar_enabled);
-    });
-    var ask4keybinds = browser.storage.local.get("ultrawidify_keybinds").then(extsetup_keybinds);
-
-  }
 }
 
 function keydownSetup(){
@@ -826,10 +845,10 @@ function extsetup_siterules(opt){
   if(debugmsg)
     console.log("%cuw::extsetup_siterules | setting up site rules settings","color: #88f;");
   
-  if(usebrowser == "chrome")
+//   if(usebrowser == "chrome")
     var obj = opt;
-  else
+//   else
-    var obj = opt[0];
+//     var obj = opt[0];
   
   if(obj.ultrawidify_siterules === undefined){
     if(debugmsg)
@@ -874,10 +893,10 @@ function extsetup_autoar(opt){
   if(debugmsg)
     console.log("%cuw::extsetup_autoar | setting up autoar settings","color: #88f;");
   
-  if(usebrowser == "chrome")
+//   if(usebrowser == "chrome")
     var obj = opt;
-  else
+//   else
-    var obj = opt[0];
+//     var obj = opt[0];
   
   //Naslov resetiramo v vsakem primeru
   //We always reset the title
@@ -904,10 +923,10 @@ function extsetup_uiban(opt){
   if(debugmsg)
     console.log("%cuw::extsetup_uiban | setting uiban","color: #88f;");
   
-  if(usebrowser == "chrome")
+//   if(usebrowser == "chrome")
     var obj = opt;
-  else
+//   else
-    var obj = opt[0];
+//     var obj = opt[0];
   
   console.log("uiban is here");
   
@@ -920,14 +939,23 @@ function extsetup_uiban(opt){
     UW_UI_BANLIST = obj.ultrawidify_uiban;
 }
 
+function extsetup_ui_mode(opt){  
+  if(opt.ultrawidify_ui === undefined)
+    UW_UI_MODE = "all";
+  else
+    UW_UI_MODE = opt.ultrawidify_ui;
+  
+  console.log("uw::extsetup_ui_mode | ui mode:",UW_UI_MODE);
+}
+
 function extsetup_keybinds(res){
   if(debugmsg)
     console.log("%cuw::extsetup_keybinds | setting up autoar settings","color: #88f;");
   
-  if(usebrowser == "chrome")
+//   if(usebrowser == "chrome")
     var obj = res;
-  else
+//   else
-    var obj = res[0];
+//     var obj = res[0];
   
   if(typeof uw_keybinds_storage_set === "undefined" && (jQuery.isEmptyObject(obj) || jQuery.isEmptyObject(obj.ultrawidify_keybinds)) ){
     if(debugmsg)
@@ -981,11 +1009,12 @@ function check4player(recursion_depth){
 }
 
 function mkanchor(){
+  ui_anchor = document.createElement("div");
+  ui_anchor.className = "uw_ui_anchor";
+  ui_anchor.id = "uw_ui_anchor";
+  
   // Youtube
-  if(page_url.indexOf("youtube") != -1 || page_url.indexOf("youtu.be") != 1){
+  if(SITE == "youtube"){
-    ui_anchor = document.createElement("div");
-    ui_anchor.className = "uw_ui_anchor";
-    ui_anchor.id = "uw_ui_anchor";
     $(document.getElementsByClassName("ytp-right-controls")[0]).prepend(ui_anchor);
   }
   
@@ -996,44 +1025,69 @@ function buildUInative(){
    * 
    */
   
+  
   if(ui_anchor)
     return;
   
   if(!ui_anchor)
     mkanchor();
   
-  
+  if(UW_UI_MODE == "none"){
+    if(debugmsg || debugmsg_ui)
+      console.log("uw::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built.");
+    return;
+  }
+  if(UW_UI_MODE == "compact"){
+    if(debugmsg || debugmsg_ui)
+      console.log("uw::buildUInative | usersettings say UI should be compact if possible. Checking if possible.");
+    
+    if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){
+      if(debugmsg || debugmsg_ui)
+        console.log("uw::buildUInative | compact ui is not possible on this site. Reverting to full.");
+      UW_UI_MODE == "all";
+    }
+  }
   
   if(debugmsg || debugmsg_ui )
     console.log("uw::buildUInative | starting to build UI");
   
   var el;
-  for(key in UW_UI_BUTTONS){
+  
-    el = UW_UI_BUTTONS[key];
+  if(UW_UI_MODE == "compact"){       // no need for loop if all we add is the 'settings' buton
-    
+    el = UW_UI_BUTTONS.settings;
-    if(UW_UI_BANLIST[SITE][key]){
+    uiel = mkbutton(el);
-      if(debugmsg)
+    uiel.appendChild(mksubmenu(el));
-        console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
-      
-      continue;
-    }
-    
-    if(!el.native_bar)
-      continue;
-    
-    var uiel; //ui element
-    
-    if(el.button){
-      uiel = mkbutton(el);
-    }
-    
-    if(!uiel)
-      continue;
-    
     ui_anchor.appendChild(uiel);
-    
+  }
-    if(el.has_submenu){
+  else{
-      uiel.appendChild(mksubmenu(el));
+    for(key in UW_UI_BUTTONS){
+      
+      el = UW_UI_BUTTONS[key];
+      
+      if(UW_UI_BANLIST[SITE][key]){
+        if(debugmsg)
+          console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing.");
+        
+        continue;
+      }
+      
+      if(!el.native_bar)
+        continue;
+      
+      var uiel; //ui element
+      
+      if(el.button){
+        uiel = mkbutton(el);
+      }
+      
+      if(!uiel)
+        continue;
+      
+      ui_anchor.appendChild(uiel);
+      
+      if(el.has_submenu){
+        uiel.appendChild(mksubmenu(el));
+      }
     }
   }
   
@@ -2175,11 +2229,8 @@ function showMenu(id, sizes){
   if(sizes){
     console.log("uw::showMenu",sizes);
     var player_leftmost = sizes.player.left;
-    console.log("showMenu | asasdassssssssssssssssssssssssssssssss");
-    
     var parent_leftmost = sizes.parent.left;
     var player_rightmost = sizes.player.left + sizes.player.width;
-    console.log("showMenu | asas421das");
     var parent_rightmost = sizes.parent.left + sizes.parent.width;
     
     if(debugmsg){
@@ -2196,7 +2247,8 @@ function showMenu(id, sizes){
       div.style.left = (- div.getBoundingClientRect().width ) + "px";
     }
     else{
-      alert("this wasn't defined yet. pls do this. ctrl+f rivianpoint");
+      if(debugmsg)
+        alert("this wasn't defined yet. pls do this. ctrl+f rivianpoint");
       div.style.left = sizes.parent.width + "px";
     }
   }

res/settings.html

@@ -59,9 +59,15 @@
     .center{
       margin: 0 auto;
     }
+    .basecolor: {
+      color: #ddd !important;
+    }
     .red{
       color: #ff3a00;
     }
+    .disabled: {
+      opacity: 0.69;
+    }
     .left{
       text-align: left;
     }
@@ -117,7 +123,7 @@
       width: 17.5em;
     }
     .uw_options_line{
-      margin-top: 0.25em;
+      margin-top: 0.75em;
       font-size: 1.1em;
       width: 80%;
       margin-left: 5%;
@@ -125,11 +131,20 @@
     .uw_options_option{
       margin-left: 5%;
     }
-    .uw_options_desc{
+    .uw_suboption{
+      margin-left: 5em;
+      margin-top: 0.75em;
+      font-size: 0.85em;
+    }
+    .uw_options_desc, .uw_suboption_desc{
       margin-top: 0.33em;
       font-size: 0.69em;
       color: #aaa;
     }
+    .uw_suboption_desc{
+      margin-left: 5em;
+    }
+    
     .buttonbar{
 /*       width: 100%; */
       padding-left: 20em;
@@ -172,7 +187,16 @@
          <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 class="uw_options_line">
+          <div class="uw_options_option"><input type="checkbox" id="enable_ui"> Show UI in the player bar</div>
+          <div class="uw_options_desc">If this option is enabled, the extension will add some extra buttons to the player bar. If this option is disabled, setting video fit and aspect ratio is only possible via keyboard shortcuts.</div>
+          <div class="uw_suboption_line" id="compact_ui_suboption">
+            <div class="uw_suboption"><input type="checkbox" id="enable_ui_compact"> If possible, use compact UI</div>
+            <div class="uw_suboption_desc">With this option enabled, only 'more settings' button is enabled. Note that this option doesn't work on every site.</div>
+          </div>
          </div>
+         
        </div>
     </div>
     
@@ -281,8 +305,13 @@
       <div class="content left">
         <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>So you want to help?</h2>
+        <p>There's a lot of sites where you can stream videos. A lot of these sites keep failing to handle aspect ratios correctly, which means it would be great if this extension worked elsewhere. Unfortunately, a lot of these sites require me to pony up some money (ayy lmao) OR just flat out block anyone who's not from the US (or their small selection of approved regions). Some sites even do both.</p>
+        <p>This means I'd need some help. There's two ways. One of them is to use 'inspect element' option of your browser to pick up IDs (or classnames) of certain elements. More detail here(TODO: add a link to quick tutorial).</p>
+        <p>The second one is, well. I won't shy away from donations either. <small>Bonus respect for dank amounts!</small></p>
+        <p>Needless to say, I'll be happy and thankful regardless of the way you contribute.</p>
         <h2>Plans for the future</h2>
-        <p><strike>Netflix support, probably.</strike> we did it lol</p>
+        <p>Support for more sizes. More flexible/customizable UI. Maybe (but absolutely no promises here) a bit more advanced autodetection.</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

@@ -138,6 +138,23 @@ function saveAutoar(){
   setopt({ultrawidify_autoar: document.querySelector("#enable_autoar").checked});
 }
 
+function saveUI(){
+  var show_ui = document.querySelector("#enable_ui");
+  var ui_compact = document.querySelector("#enable_ui_compact");
+  var optionLine = document.getElementById("compact_ui_suboption");
+  
+  if(show_ui.checked){
+    ui_compact.disabled = false;
+    optionLine.classList.remove("hide");
+    setopt({ultrawidify_ui: ui_compact.checked ? "compact" : "all" });
+  }
+  else{
+    ui_compact.disabled = true;
+    optionLine.classList.add("hide");
+    setopt({ultrawidify_ui: "none"});
+  }
+}
+
 // setopt in getopt. Shranita oz. dobita stvari iz skladišča
 // setopt, getopt. They set/get stuff from the storage
 
@@ -190,11 +207,37 @@ function gotopts(opts){
   }
 }
 
+function gotar(opts){
+  
+}
+
+function gotui(opts){
+  var show_ui = document.querySelector("#enable_ui");
+  var ui_compact = document.querySelector("#enable_ui_compact");
+  var optionLine = document.getElementById("compact_ui_suboption");
+  
+  if(opts.ultrawidify_ui == "all"){
+    show_ui.checked = true;
+    ui_compact.checked = false;
+    optionLine.classList.remove("hide");
+  }
+  else if(opts.ultrawidify_ui == "compact"){
+    show_ui.checked = true;
+    ui_compact.checked = true;
+    optionLine.classList.remove("hide");
+  }
+  else if(opts.ultrawidify_ui == "none"){
+    show_ui.checked = false;
+    ui_compact.checked = false;
+    optionLine.classList.add("hide");
+  }
+}
+
 function loadopts(){
-  if(usebrowser == "chrome")
+  
-    getopt("ultrawidify_keybinds", gotopts);
+  getopt("ultrawidify_keybinds", gotopts);
-  else
+//   getopt("ultrawidify_autoar", gotar)
-    browser.storage.local.get("ultrawidify_keybinds").then(gotopts, printerr);
+  getopt("ultrawidify_ui", gotui);
 }
 
 
@@ -210,4 +253,6 @@ document.querySelector("#kb_save").addEventListener("click", saveopts);
 document.querySelector("#kb_cancel").addEventListener("click",loadopts);
 
 document.querySelector("#enable_autoar").addEventListener("click",saveAutoar);
+document.querySelector("#enable_ui").addEventListener("click", saveUI);
+document.querySelector("#enable_ui_compact").addEventListener("click", saveUI);
 getopt("ultrawidify_autoar",function(obj){document.querySelector("#enable_autoar").checked = obj.ultrawidify_autoar});