Refactored a lil, added load check

README.md

@@ -11,8 +11,9 @@ 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.2
+# Version: 1.5.3
-* Actually fixed observer logic.
+* Refactored a little
+* Readded loader check
 
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Better Youtube +",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Enhancements for Youtube to have a better experience.",
 
   "applications": {

src/scripts/betterYoutube.js

@@ -44,10 +44,10 @@
     let mainContentArea, playerWindow, containerOfPlyrWndow, video;         // Youtube Player container
     let videoTimeLength, videoTimeCurent, ytRangeStart, ytRangeEnd,
                 slugInputTag, endlessPlayTag, ytVideoIntervalLoop;
+
     let	poppedContainer, videoSlug, volumeLbl, part;
     let modalHasBeenClosed = false;
-    let loopingInterval    = false;
+    // Default to false b/c if tag checked it sets this in setupProcess and elsewhere.
-    // Default to false b/c if tag checked it sets this in setupProc and elsewhere.
     let isEndlessWatch     = false;
     let shouldHideVol      = true;
     let OSName             = "";
@@ -63,7 +63,31 @@
     const observerConfig2 = { childList: true, subtree: true };
 
 
-    const preSetupProc = () => {
+    // Start init
+    let existCondition = setInterval(function() {
+        if (document.getElementById("masthead-container")) {
+            clearInterval(existCondition);
+            setupProcess();
+            count = 0;
+        } else {
+            if (count == 12) {  // ~ 6 sec through half sec loops
+                count = 0;
+                clearInterval(existCondition);
+                setupProcess();
+            } else {
+                count++;
+            }
+        }
+    }, 500); // check every 500ms
+
+    const setupProcess = () => {
+        loadUI();
+        setupVariables();
+        fillUIAndSetupEvents();
+        setupObservers();
+    }
+
+    const loadUI = () => {
         // Look to add saving image from video elm.
         // path = "/html/body/ytd-app/div/ytd-page-manager/ytd-watch-flexy/div[4]/div[1]/div/div[1]/div/div/div/ytd-player/div/div/div[1]/video"
         // elm = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
@@ -78,12 +102,20 @@
             document.body.insertAdjacentHTML( 'beforeend', menuTemplate );
             document.body.insertAdjacentHTML( 'beforeend', thumbnailTemplate );
             document.body.insertAdjacentHTML( 'beforeend', popedContainerTemplate );
-            controlsWereLoaded = false;
+            controlsAreLoaded = false;
         } else {
-            controlsWereLoaded = true;
+            controlsAreLoaded = true;
         }
 
+        // Remove download button if system doesn't support youtube-dl functionality
         ytEnhancerMenu = document.getElementById("enhancerMenuID");
+        if (!OSName.includes("MacOS") && !OSName.includes("UNIX") && !OSName.includes("Linux")) {
+            console.log("System does not support downloader...");
+            ytEnhancerMenu.removeChild(ytDownloadBttn);
+        }
+    }
+
+    const setupVariables = () => {
         ytEnhancerMenu2  = document.getElementById("enhancerMenuID2");
         ytThumbnailBttn  = document.getElementById("ytThumbnailBttn");
         ytLoopBttn       = document.getElementById("ytLoopBttn");
@@ -113,10 +145,11 @@
         video = document.getElementsByTagName("video")[0];
         // Container of actual player (Used for floating window)
         containerOfPlyrWndow = document.getElementById("player-container");
+
+        part = "https://img.youtube.com/vi/";
     }
 
-    const setupProc = () => {
+    const fillUIAndSetupEvents = () => {
-        part               = "https://img.youtube.com/vi/";
         slugInputTag.value = video.baseURI.slice(32, 32+11);
         ytRangeStart.value = "0:00";
 
@@ -127,7 +160,7 @@
         }, 2000);
 
         // Only setting these up if we need to load controls' info
-        if (!controlsWereLoaded) {
+        if (!controlsAreLoaded) {
             setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOff.png");
             setbuttonImage(ytLoopBttn,      "/icons/loopFalse.png");
             setbuttonImage(ytFloatBttn,     "/icons/floatPlayer.png");
@@ -135,21 +168,17 @@
 
             // Set onclick actions
             ytThumbnailBttn.addEventListener("click", showThumbImageVew);
-            ytLoopBttn.addEventListener("click", setLoop);
+            ytLoopBttn.addEventListener("click", setVideoLoopState);
             ytFloatBttn.addEventListener("click", toggleFloat);
             endlessPlayTag.addEventListener("click", toggleEndlessPlay);
             ytDownloadBttn.addEventListener("click", downloadVideo);
             video.addEventListener("wheel", manageVolume);
             // Dragable window for floating video event setup
             dragVideo(poppedContainer);
-
-            // Remove download button if system doesn't support youtube-dl functionality
-            if (!OSName.includes("MacOS") && !OSName.includes("UNIX") && !OSName.includes("Linux")) {
-                console.log("System does not support downloader...");
-                ytEnhancerMenu.removeChild(ytDownloadBttn);
         }
     }
 
+    const setupObservers = () => {
         // ----  Hide controls if fullscreen using obsever  ----
         // Observer target for fullscreen action...
         let targetNode = document.getElementsByTagName('ytd-app')[0];
@@ -174,7 +203,7 @@
     const mutationCallback = (mutationsList, observer) => {
         for(let mutation of mutationsList) {
             if (mutation.type === 'attributes') {
-                controlManager(mutation.target);
+                controlsShowHideToggle(mutation.target);
             } else if (mutation.type === 'childList') {
                 if (this.isEndlessWatch) {
                     let elm = document.querySelector(dialogElementQueryRef).parentElement;
@@ -191,7 +220,7 @@
         }
     };
 
-    const controlManager = (elm) => {
+    const controlsShowHideToggle = (elm) => {
         attrib = elm.getAttribute('masthead-hidden_');
         if (attrib == null) { // if out of fullscreen
             ytEnhancerMenu.style.display  = "block";
@@ -204,8 +233,7 @@
 
     const clickDialog = () => {
         console.log("Clicking dialog confirm to continue playing...");
-        document
+        document.querySelector(dialogElementQueryRef)
-          .querySelector(dialogElementQueryRef)
                 .querySelector('yt-button-renderer[dialog-confirm]')
                 .click();
     }
@@ -245,7 +273,7 @@
         return;
     }
 
-    const setLoop = (e) => {
+    const setVideoLoopState = (e) => {
         let start = ytRangeStart.value.trim();
         let end   = ytRangeEnd.value.trim();
 
@@ -432,8 +460,4 @@
     const setbuttonImage = (elm, path) => {
         elm.style.backgroundImage = "url('" + browser.extension.getURL(path); + "')";
     }
-
-    // Start init
-    preSetupProc();
-    setupProc();
 }());