Popup: moved stretching settings to a new tab

js/conf/Settings.js

@@ -132,28 +132,18 @@ canStartExtension = function(site) {
     site = window.location.hostname;
   }
   
-  console.log("CAN WE START THIS EXTENSION ON SITE", site,
+  // console.log("CAN WE START THIS EXTENSION ON SITE", site,
-              "?\n\nExtensionConf.sites[site]=",ExtensionConf.sites[site],
+  //             "?\n\nExtensionConf.sites[site]=",ExtensionConf.sites[site],
-              "\nExtension mode?", ExtensionConf.extensionMode
+  //             "\nExtension mode?", ExtensionConf.extensionMode
-            );
+  //           );
 
   if (ExtensionConf.sites[site] === undefined) {
     return ExtensionConf.extensionMode === "blacklist"; // site not defined, this does default option
   }
 
-  if (ExtensionConf.extensionMode === "blacklist") {
-    console.log("Extension mode is 'blacklist', returning true unless disabled. Ret:", ExtensionConf.sites[site].status !== "disabled");
-  } else if (ExtensionConf.arDetect.mode === "whitelist" ) {
-    console.log("Extension mode set to 'whitelist, returning true only if enabled", ExtensionConf.sites[site].status === "enabled");
-  } else {
-    console.log("Extension is not even enabled globally");
-    return false;
-  }
-
-
   if (ExtensionConf.extensionMode === "blacklist") {
     return ExtensionConf.sites[site].status !== "disabled";
-  } else if (ExtensionConf.arDetect.mode === "whitelist" ) {
+  } else if (ExtensionConf.extensionMode === "whitelist" ) {
     return ExtensionConf.sites[site].status === "enabled";
   } else {
     return false;

js/lib/Comms.js

@@ -229,6 +229,10 @@ class CommsServer {
       port.postMessage({cmd: "set-config", conf: ExtensionConf, site: this.server.currentSite})
     } else if (message.cmd === 'set-stretch') {
       this.sendToActive(message);
+    } else if (message.cmd === 'set-stretch-default') {
+      ExtensionConf.stretch.initialMode = message.mode;
+      Settings.save(ExtensionConf);
+      this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
     } else if (message.cmd === 'set-ar') {
       this.sendToActive(message);
     } else if (message.cmd === 'autoar-start') {
@@ -236,10 +240,7 @@ class CommsServer {
     } else if (message.cmd === "autoar-enable") {   // LEGACY - can be removed prolly?
       ExtensionConf.arDetect.mode = "blacklist";
       Settings.save(ExtensionConf);
-      this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
+      this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
-      if(Debug.debug){
-        console.log("[uw-bg] autoar set to enabled (blacklist). evidenz:", ExtensionConf);
-      }
     } else if (message.cmd === "autoar-disable") {  // LEGACY - can be removed prolly?
       ExtensionConf.arDetect.mode = "disabled";
       if(message.reason){
@@ -249,9 +250,6 @@ class CommsServer {
       }
       Settings.save(ExtensionConf);
       this.sendToAll({cmd: 'reload-settings', newConf: ExtensionConf});
-      if(Debug.debug){
-        console.log("[uw-bg] autoar set to disabled. evidenz:", ExtensionConf);
-      }
     } else if (message.cmd === "autoar-set-interval") {
       if(Debug.debug)
         console.log("[uw-bg] trying to set new interval for autoAr. New interval is",message.timeout,"ms");

res/popup/js/popup.js

@@ -5,20 +5,22 @@ document.getElementById("uw-version").textContent = browser.runtime.getManifest(
 
 var Menu = {};
 // Menu.noVideo    = document.getElementById("no-videos-display");
-Menu.general    = document.getElementById("extension-mode");
+Menu.general         = document.getElementById("extension-mode");
-Menu.thisSite   = document.getElementById("settings-for-current-site");
+Menu.thisSite        = document.getElementById("settings-for-current-site");
-Menu.arSettings = document.getElementById("aspect-ratio-settings");
+Menu.arSettings      = document.getElementById("aspect-ratio-settings");
-Menu.autoAr     = document.getElementById("autoar-basic-settings");
+Menu.autoAr          = document.getElementById("autoar-basic-settings");
-Menu.cssHacks   = document.getElementById("css-hacks-settings");
+Menu.cssHacks        = document.getElementById("css-hacks-settings");
-Menu.about      = document.getElementById("panel-about");
+Menu.about           = document.getElementById("panel-about");
+Menu.stretchSettings = document.getElementById("stretch-settings")
 
 var MenuTab = {};
-MenuTab.general    = document.getElementById("_menu_general");
+MenuTab.general         = document.getElementById("_menu_general");
-MenuTab.thisSite   = document.getElementById("_menu_this_site");
+MenuTab.thisSite        = document.getElementById("_menu_this_site");
-MenuTab.arSettings = document.getElementById("_menu_aspectratio");
+MenuTab.arSettings      = document.getElementById("_menu_aspectratio");
-MenuTab.cssHacks   = document.getElementById("_menu_hacks");
+MenuTab.cssHacks        = document.getElementById("_menu_hacks");
-MenuTab.about      = document.getElementById("_menu_about");
+MenuTab.about           = document.getElementById("_menu_about");
-MenuTab.autoAr     = document.getElementById("_menu_autoar");
+MenuTab.autoAr          = document.getElementById("_menu_autoar");
+MenuTab.stretchSettings = document.getElementById("_menu_stretch");
 
 var ExtPanel = {};
 ExtPanel.globalOptions = {};
@@ -47,6 +49,13 @@ ArPanel.alignment.center = document.getElementById("_align_center");
 ArPanel.alignment.right  = document.getElementById("_align_right");
 ArPanel.autoar = {};
 
+var StretchPanel = {};
+StretchPanel.global = {};
+StretchPanel.global.none        = document.getElementById("_stretch_global_none");
+StretchPanel.global.basic       = document.getElementById("_stretch_global_basic");
+StretchPanel.global.hybrid      = document.getElementById("_stretch_global_hybrid");
+StretchPanel.global.conditional = document.getElementById("_stretch_global_conditional");
+
 
 var selectedMenu = "arSettings";
 var hasVideos = false;
@@ -94,6 +103,9 @@ function loadConfig(extensionConf, site){
 
   // ----------------------
   //#region extension-basics - SET BASIC EXTENSION OPTIONS
+  if(Debug.debug)
+    console.log("EXT: site is:", site, "|extensionConf for this site: ", (site && extensionConf.sites[site]) ? extensionConf.sites[site] : "default site")
+
 
   for(var button in ExtPanel.globalOptions) {
     ExtPanel.globalOptions[button].classList.remove("selected");
@@ -104,7 +116,7 @@ function loadConfig(extensionConf, site){
 
   ExtPanel.globalOptions[extensionConf.extensionMode].classList.add("selected");
   if(site && extensionConf.sites[site]) {
-    ExtPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected");
+    ExtPanel.siteOptions[extensionConf.sites[site].status].classList.add("selected");
   } else {
     ExtPanel.siteOptions.default.classList.add("selected");
   }
@@ -113,7 +125,7 @@ function loadConfig(extensionConf, site){
   // ------------
   //#region autoar - SET AUTOAR OPTIONS
   // if(Debug.debug)
-  //   console.log("Autodetect mode?", extensionConf.arDetect.mode, "| site & site options:", site, ",", (site && extensionConf.sites[site]) ? extensionConf.sites[site].arStatus : "fucky wucky?" );
+    // console.log("Autodetect mode?", extensionConf.arDetect.mode, "| site & site options:", site, ",", (site && extensionConf.sites[site]) ? extensionConf.sites[site].arStatus : "fucky wucky?" );
   // document.getElementById("_autoAr_disabled_reason").textContent = extensionConf.arDetect.DisabledReason;
   document.getElementById("_input_autoAr_timer").value = extensionConf.arDetect.timer_playing;
 
@@ -125,6 +137,7 @@ function loadConfig(extensionConf, site){
     AutoArPanel.siteOptions[button].classList.remove("selected");
   }
 
+
   AutoArPanel.globalOptions[extensionConf.arDetect.mode].classList.add("selected");
   if(site && extensionConf.sites[site]) {
     AutoArPanel.siteOptions[extensionConf.sites[site].arStatus].classList.add("selected");
@@ -141,6 +154,21 @@ function loadConfig(extensionConf, site){
     ArPanel.alignment[extensionConf.miscFullscreenSettings.videoFloat].classList.add("selected");
   }
   
+  //#region - SET STRETCH
+  for (var button in StretchPanel.global) {
+    StretchPanel.global[button].classList.remove("selected");
+  }
+  if (extensionConf.stretch.initialMode === 0) {
+    StretchPanel.global.none.classList.add("selected");
+  } else if (extensionConf.stretch.initialMode === 1) {
+    StretchPanel.global.basic.classList.add("selected");
+  } else if (extensionConf.stretch.initialMode === 2) {
+    StretchPanel.global.hybrid.classList.add("selected");
+  } else if (extensionConf.stretch.initialMode === 3) {
+    StretchPanel.global.conditional.classList.add("selected");
+  }
+  //#endregion
+
   // process keyboard shortcuts:
   if(extensionConf.keyboard.shortcuts){
     for(var key in extensionConf.keyboard.shortcuts){
@@ -315,6 +343,9 @@ document.addEventListener("click", (e) => {
       else if(e.target.classList.contains("_menu_aspectratio")){
         openMenu("arSettings");
       }
+      else if(e.target.classList.contains("_menu_stretch")){
+        openMenu("stretchSettings");
+      }
       else if(e.target.classList.contains("_menu_hacks")){
         openMenu("cssHacks");
       }
@@ -395,6 +426,20 @@ document.addEventListener("click", (e) => {
       }
     }
     if(e.target.classList.contains("_stretch")){
+      if (e.target.classList.contains("_ar_stretch_global")) {
+        command.cmd = "set-stretch-default"
+        if (e.target.classList.contains("_none")) {
+          command.mode = 0;
+        } else if (e.target.classList.contains("_basic")) {
+          command.mode = 1;
+        } else if (e.target.classList.contains("_hybrid")) {
+          command.mode = 2;
+        } else if (e.target.classList.contains("_conditional")) {
+          command.mode = 3;
+        }
+        return command;
+      }
+
       if(e.target.classList.contains("_ar_stretch_none")) {
         command.cmd = "set-stretch";
         command.mode = "NO_STRETCH";

res/popup/popup.html

@@ -17,7 +17,9 @@
       font-family: "overpass";
       font-size: 1em;
     }
-    
+    strike {
+      opacity: 0.5;
+    }
     a {
       color: #af7f37;
     }
@@ -178,7 +180,10 @@
         Automatic aspect ratio detection (auto-ar)
       </div>
       <div id="_menu_aspectratio" class="menu-item selected _menu_aspectratio">
-        Letterbox removal and alignment
+        Crop settings
+      </div>
+      <div id="_menu_stretch" class="menu-item _menu_stretch">
+        Stretc settings
       </div>
       <div id="_menu_csshacks" class="menu-item disabled hidden _menu_hacks">
         CSS hacks for this site
@@ -253,8 +258,8 @@
       </div>
       
       <div id="aspect-ratio-settings" class="suboption hidden">
-        
+        <div id="no-videos-warning"></div>
-        <div id="no-videos-warning" class="warning">No videos were detected on this page. The buttons may not work at all. Check that this site is not blacklisted and reload the page.</div>
+        <!-- <div id="no-videos-warning" class="warning">No videos were detected on this page. The buttons may not work at all. Check that this site is not blacklisted and reload the page.</div> -->
         <div class="row">
           <span class="label">Cropping mode</span>
           <div class="button-row">
@@ -264,13 +269,6 @@
             <a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker"></span></a>
             <a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker"></span></a>
           </div>
-          <span class="label">Stretching mode<br><small>Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
-          <div class="button-row">
-            <a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
-            <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
-            <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
-            <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
-          </div>
         </div>
         <!--<div class="row">
           <span class="label">Automatic aspect ratio autodetection:</span>
@@ -291,6 +289,28 @@
         </div>
       </div>
       
+      <div id="stretch-settings" class="suboption hidden">
+        <p class="warning">
+          Stretching video is currently experimental and has <strike>been tested even less rigorously than the rest of this addon</strike> not been tested thoroughly. If you notice any bugs, please consider reporting via github or email.
+        </p>
+        
+        <span class="label">Default stretching mode<br><small>Stretching is independent of crop mode. Crop gets applied before stretching.</small></span>
+        <div class="button-row">
+          <a id="_stretch_global_none"        class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
+          <a id="_stretch_global_basic"       class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
+          <a id="_stretch_global_hybrid"      class="button _stretch _ar_stretch_global _hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
+          <a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
+        </div>
+        
+        <span class="label">Stretching mode for this video<br><small>Temporarily overrides default stretching mode.</small></span>
+        <div class="button-row">
+          <a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
+          <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>            
+          <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_changeAr_sw_key" class="smallcaps small darker"></span></a>
+          <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_changeAr_sh_key" class="smallcaps small darker"></span></a>
+        </div>
+      </div>
+
       <div id="css-hacks-settings" class="suboption hidden">
         <p>If zoomed in video doesn't align properly, try enabling or disabling certain CSS rules below:</p>
       </div>