Correcting loading degredation issues from prior fixes

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.6.1
+# Version: 1.6.4
-* Fixing click dead zones; changesd dl icon.
+* Fixing the prior fix causing load degredation
 
 # 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.6.3",
+  "version": "1.6.4",
   "description": "Enhancements for Youtube to have a better experience.",
 
   "browser_specific_settings": {
@@ -17,7 +17,7 @@
   ],
 
   "content_scripts": [{
-      "matches": ["*://www.youtube.com/*"],
+      "matches": ["https://www.youtube.com/watch=?v=*"],
       "js": ["inject.js"],
       "run_at": "document_start",
       "all_frames": true

src/scripts/betterYoutube.js

@@ -68,34 +68,40 @@
     let isEndlessWatch     = false;
     let shouldHideVol      = true;
     let OSName             = "";
-    let count              = 0;
 
     // confirm dialog elm
-    const isYoutubeMusic      = window.location.hostname === 'music.youtube.com';
+    let dialogElementQueryRef = 'yt-confirm-dialog-renderer';
-    let dialogElementQueryRef = isYoutubeMusic ? 'ytmusic-you-there-renderer' : 'yt-confirm-dialog-renderer';
 
     // Options for the observer (which mutations to observe)
-    let observer, observer2;
+    let fullscreenObserver, endlessPlayObserver;
     const observerConfig  = { attributes: true };
     const observerConfig2 = { childList: true, subtree: true };
 
 
     // Start init
-    let existCondition = setInterval(function() {
+    // YouTube is a SPA — watch for page changes
-        if (document.getElementById("masthead-container")) {
+    const loadObserver = new MutationObserver(() => {
-            clearInterval(existCondition);
+        checkPageLoad();
+    });
+
+    loadObserver.observe(document.body, { childList: true, subtree: true });
+
+    function isYouTubePageLoaded() {
+        const videoPlayer = document.querySelector('video');
+        const titleElement = document.querySelector('#title h1');
+
+        return videoPlayer && titleElement && titleElement.textContent.trim().length > 0;
+    }
+    
+    function checkPageLoad() {
+        if (isYouTubePageLoaded()) {
+            console.log("YouTube page fully loaded.");
+            loadObserver.disconnect();
             setupProcess();
-            count = 0;
         } else {
-            if (count == 12) {  // ~ 6 sec through half sec loops
+            console.log("Waiting for YouTube content...");
-                count = 0;
-                clearInterval(existCondition);
-                setupProcess();
-            } else {
-                count++;
-            }
         }
-    }, 500);
+    }
 
     const setupProcess = () => {
         loadUI();
@@ -210,18 +216,18 @@
         // Observer target for fullscreen action...
         let targetNode = document.getElementsByTagName('ytd-app')[0];
         // Create an observer instance linked to the callback function
-        observer = new MutationObserver(mutationCallback);
+        fullscreenObserver = new MutationObserver(mutationCallback);
         // Start observing the target node for configured mutations
-        observer.observe(targetNode, observerConfig);
+        fullscreenObserver.observe(targetNode, observerConfig);
 
         // ----  Endless play obsever  ----
         // Create an observer instance linked to the callback function
-        observer2 = new MutationObserver(mutationCallback);
+        endlessPlayObserver = new MutationObserver(mutationCallback);
         // Start observing the target node for configured mutations
         if (endlessPlayTag.checked == true) {
             this.isEndlessWatch = true;
             console.log("Endless play checked. Starting observer...");
-            observer2.observe(document, observerConfig2);
+            endlessPlayObserver.observe(document, observerConfig2);
         }
     }
 
@@ -273,12 +279,12 @@
             endlessPlayTag.setAttribute("checked", false);
             this.isEndlessWatch = false;
             console.log("Stopping endless play...");
-            observer2.disconnect();
+            endlessPlayObserver.disconnect();
         } else {
             endlessPlayTag.setAttribute("checked", true);
             this.isEndlessWatch = true;
             console.log("Starting endless play...");
-            observer2.observe(confirmDialogElement, observerConfig2);
+            endlessPlayObserver.observe(document, observerConfig2);
         }
     }