Fixing issues; bumped to 1.6.3

README.md

@@ -12,8 +12,8 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
   * It shows volume level as you scroll.
   * It lets Unix, Linux, and MacOS systems have the ability to download the video using native app calls.
 
-# Version: 1.5.7
-* Added injection script to default to 1080p playback
+# Version: 1.6.1
+* Fixing click dead zones; changesd dl icon.
 
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/

src/inject.js

@@ -6,7 +6,7 @@ const prefs = {
   hd: true,
   once: false,
   higher: true,
-  quality: "hd1080",
+  quality: ["hd1080"],
   log: false,
   highFramerate: true
 };
@@ -47,10 +47,10 @@ script.textContent = `
               //  ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'auto']
               const qualities = player.getAvailableQualityLevels();
               const q = player.getPlaybackQuality();
-              if ((q.startsWith('h') && prefs.quality.startsWith('h')) && prefs.hd === 'true') {
-                  console.log("Quality matches requested resolution...");
-                  return;
-              }
+              // if ((q.startsWith('h') && prefs.quality.startsWith('h')) && prefs.hd === 'true') {
+              //     console.log("Quality matches requested resolution...");
+              //     return;
+              // }
 
               const compare = (q1, q2) => {
                   if (q2 === 'auto') {

src/manifest.json

@@ -1,10 +1,10 @@
 {
   "manifest_version": 2,
   "name": "Better Youtube +",
-  "version": "1.5.7",
+  "version": "1.6.3",
   "description": "Enhancements for Youtube to have a better experience.",
 
-  "applications": {
+  "browser_specific_settings": {
     "gecko": {
       "id": "betterYoutube@itdominator.com"
     }

src/scripts/betterYoutube.js

@@ -1,11 +1,20 @@
 (function() {
     const menuTemplate = `
-    <div class="ytMenuStyle" id="enhancerMenuID" style="display: block;">
+    <ul class="ytMenuStyle" id="enhancerMenuID" style="display: block;">
+        <li>
             <div id="ytThumbnailBttn" class="imageStyle" title="Video Thumbnails..."></div>
+        </li>
+        <li>
             <div id="ytLoopBttn" class="imageStyle" title="Start Loop..."/></div>
+        </li>
+        <li>
             <div id="ytFloatBttn" class="imageStyle" title="Float Video Container"/></div>
+        </li>
+        <li>
             <div id="ytDownloadBttn" class="imageStyle" title="Download Video..."/></div>
-    </div>
+        </li>
+
+    </ul>
     `
     const slugTemplate = `
     <div id="enhancerMenuID2">
@@ -22,15 +31,23 @@
     </div>
     `
     const thumbnailTemplate = `
-    <div id="ytThumbMenuID" class="ytThumbMenuStyle" style="display: none;">
+    <ul id="ytThumbMenuID" class="ytThumbMenuStyle" style="display: none;">
+        <li>
             <a id="ytAMaxDefaultImgID" target="_blank" href=""><img id="ytMaxDefaultImgID" class="thumbImageStyle" src="" title="Max Resolution Default"/></a>
+        </li>
+        <li>
             <a id="ytAHqDefaultImgID"  target="_blank" href=""><img id="ytHqDefaultImgID" class="thumbImageStyle" src="" title="High Quality Default"/></a>
+        </li>
+        <li>
             <a id="ytAMedDefaultImgID" target="_blank" href=""><img id="ytMqDefaultImgID" class="thumbImageStyle" src="" title="Medium Quality Default"></a>
+        </li>
+        <li>
             <a id="ytASdDefaultImgID"  target="_blank" href=""><img id="ytSdDefaultImgID" class="thumbImageStyle" src="" title="Standard Quality Default"/></a>
-    </div>
+        </li>
+    </ul>
     `
     const popedContainerTemplate = `
-    <div id="draggable" style="display:none; block; top: 114px; left: 408px;">
+    <div id="ytDraggable" style="display:none; bottom: 0px; right: 0px;">
         <iframe id="popIframe" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0" src="" />
         </iframe>
@@ -78,14 +95,28 @@
                 count++;
             }
         }
-    }, 500); // check every 500ms
+    }, 500);
 
     const setupProcess = () => {
         loadUI();
-        setupVariables();
+        setupVariables().then(() => {
+            let tid = -1;
+
+            function timer() {
+                // Video Controler
+                video  = document.getElementsByTagName("video")[0];
+
+                if (video) {
+                    clearInterval(tid);
+
                     fillUIAndSetupEvents();
                     setupObservers();
                 }
+            }
+
+            tid = setInterval(timer, 1000);
+        });
+    }
 
     const loadUI = () => {
         // Look to add saving image from video elm.
@@ -115,7 +146,7 @@
         }
     }
 
-    const setupVariables = () => {
+    const setupVariables = async () => {
         ytEnhancerMenu2  = document.getElementById("enhancerMenuID2");
         ytThumbnailBttn  = document.getElementById("ytThumbnailBttn");
         ytLoopBttn       = document.getElementById("ytLoopBttn");
@@ -137,13 +168,10 @@
         ytMqDefaultImg   = document.getElementById("ytMqDefaultImgID");
         ytSdDefaultImg   = document.getElementById("ytSdDefaultImgID");
 
-        poppedContainer  = document.getElementById("draggable");
+        poppedContainer  = document.getElementById("ytDraggable");
         ytIfrm           = document.getElementById("popIframe");
         slugInputTag     = document.getElementById("slugCopyZone");
 
-        // Video Controler
-        video  = document.getElementsByTagName("video")[0];  // Actual video object (I think...)
-
         // Container of actual player (Used for floating window)
         containerOfPlyrWndow = document.getElementById("player-container");
         part   = "https://img.youtube.com/vi/";
@@ -205,7 +233,10 @@
                 controlsShowHideToggle(mutation.target);
             } else if (mutation.type === 'childList') {
                 if (this.isEndlessWatch) {
-                    let elm = document.querySelector(dialogElementQueryRef).parentElement;
+                    let target = document.querySelector(dialogElementQueryRef);
+                    if (!target) continue
+
+                    let elm = target.parentElement;
                     elmDisplayState = elm.style.display;
                     if (elmDisplayState !== 'none' && modalHasBeenClosed == false) {
                         modalHasBeenClosed = true;
@@ -220,7 +251,7 @@
     };
 
     const controlsShowHideToggle = (elm) => {
-        attrib = elm.getAttribute('masthead-hidden_');
+        attrib = elm.getAttribute('masthead-hidden');
         if (attrib == null) { // if out of fullscreen
             ytEnhancerMenu.style.display  = "block";
             ytEnhancerMenu2.style.display = "block";
@@ -281,7 +312,7 @@
             clearInterval(ytVideoIntervalLoop);
             loopingInterval   = false;
             ytLoopBttn.title  = "Start Loop...";
-            let ipath = browser.extension.getURL("/icons/loopFalse.png");
+            let ipath = browser.runtime.getURL("/icons/loopFalse.png");
             setbuttonImage(ytLoopBttn, ipath);
             return ;
         }
@@ -291,13 +322,13 @@
                 console.log("Setting default loop marker...");
                 video.loop        = true;
                 ytLoopBttn.title  = "Stop Loop...";
-                let ipath = browser.extension.getURL("/icons/loopTrue.png");
+                let ipath = browser.runtime.getURL("/icons/loopTrue.png");
                 setbuttonImage(ytLoopBttn, ipath);
             } else {
                 console.log("Unsetting default loop marker...");
                 video.loop        = false;
                 ytLoopBttn.title  = "Start Loop...";
-                let ipath = browser.extension.getURL("/icons/loopFalse.png");
+                let ipath = browser.runtime.getURL("/icons/loopFalse.png");
                 setbuttonImage(ytLoopBttn, ipath);
             }
             return ;
@@ -338,7 +369,7 @@
 
             // Setup interval check for 1 sec and compare value of current pos to end
             ytLoopBttn.title = "Stop Loop...";
-            let ipath = browser.extension.getURL("/icons/loopTrue.png");
+            let ipath = browser.runtime.getURL("/icons/loopTrue.png");
             setbuttonImage(ytLoopBttn, ipath);
             loopingInterval  = true;
 
@@ -448,6 +479,7 @@
             if(e.preventDefault)  e.preventDefault();
             e.cancelBubble = true;
             e.returnValue  = false;
+
             return false;
         }
     }
@@ -458,6 +490,6 @@
     }
 
     const setbuttonImage = (elm, path) => {
-        elm.style.backgroundImage = "url('" + browser.extension.getURL(path); + "')";
+        elm.style.backgroundImage = "url('" + browser.runtime.getURL(path); + "')";
     }
 }());

src/styles/betterYoutube.css

@@ -25,8 +25,8 @@ yt-formatted-string > a:hover {
     color: #ffffff;
 }
 
-#enhancerMenuID, #enhancerMenuID2 {
-    z-index: 5;
+#enhancerMenuID, #enhancerMenuID2, #ytThumbMenuID {
+    z-index: 9999;
 }
 
 #volumeContainerID {
@@ -36,7 +36,7 @@ yt-formatted-string > a:hover {
     text-align: center;
 }
 
-#draggable {
+#ytDraggable {
     z-index: 9999;
     position: fixed;
     right: 0px;
@@ -66,7 +66,6 @@ yt-formatted-string > a:hover {
 .ytMenuStyle {
     top: 40%;
     width: 42px;
-    overflow: hidden;
 }
 
 .ytThumbMenuStyle {
@@ -74,6 +73,15 @@ yt-formatted-string > a:hover {
     bottom: 20px;
 }
 
+.ytThumbMenuStyle > ul,
+.ytThumbMenuStyle > li {
+    list-style: none;
+}
+
+.ytThumbMenuStyle > li {
+    float: left;
+}
+
 .imageStyle {
     width: 42px;
     height: 42px;