Mutation observer added plus cs cleanup

README.md

@@ -9,8 +9,9 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
   * It allows for quick access to the YouTube video slug.
   * It lets Unix, Linux, and MacOS systems the ability to download the video using native app calls.
 
-# Version: 1.4.0
-Updating for Firefox AMO
+# Version: 1.4.3
+* Added mutation observation for (un)fullscreen action.
+* Cleaned up some log cruft and fixed CSS...
 
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/

src/scripts/betterYoutube.js

@@ -13,6 +13,10 @@
     let count = 0;
     let OSName = "";
 
+    // Options for the observer (which mutations to observe)
+    const config = { attributes: true };
+
+
     const preSetupProc = () => {
         if (navigator.appVersion.indexOf("Win")!=-1) OSName = "Windows";
         if (navigator.appVersion.indexOf("Mac")!=-1) OSName = "MacOS";
@@ -117,7 +121,14 @@
         ytFloatBttn.addEventListener("click", toggleFloat);
         ytDownloadBttn.addEventListener("click", downloadVideo);
         video.addEventListener("wheel", manageVolume);
-        video.addEventListener("dblclick", controlManager);
+
+        // Observer target for fullscreen action...
+        targetNode = document.getElementsByTagName('ytd-app')[0];
+
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(mutationcallback);
+        // Start observing the target node for configured mutations
+        observer.observe(targetNode, config);
 
         // Dragable window for floating video
         dragVideo(poppedContainer);
@@ -161,16 +172,24 @@
     }
 
     // Functions
-    const controlManager = () => {
-        setTimeout(function () {
-            if (window.innerHeight !== screen.height) {
-                ytEnhancerMenu.style.display = "block";
-                slugInputTag.style.display = "block";
-            } else {
-                ytEnhancerMenu.style.display = "none";
-                slugInputTag.style.display = "none";
+    // Callback function to execute when mutations are observed
+    const mutationcallback = (mutationsList, observer) => {
+        for(let mutation of mutationsList) {
+            if (mutation.type === 'attributes') {
+                controlManager(mutation.target);
             }
-        }, 200);
+        }
+    };
+
+    const controlManager = (elm) => {
+        attrib = elm.getAttribute('masthead-hidden_');
+        if (attrib == null) { // if out of fullscreen
+            ytEnhancerMenu.style.display = "block";
+            slugInputTag.style.display = "block";
+        } else {  // if fullscreen
+            ytEnhancerMenu.style.display = "none";
+            slugInputTag.style.display = "none";
+        }
     }
 
     const downloadVideo = () => {

src/styles/betterYoutube.css

@@ -11,6 +11,7 @@
     left: 35%;
     width: 10em;
     text-align: center;
+    color: #fff;
 }
 
 #enhancerMenuIDRef, #slugCopyZone {