From faed6edee506a75f29332c37f77c71320cc98c57 Mon Sep 17 00:00:00 2001
From: Maxim Stewart <maximstewart1@gmail.com>
Date: Sun, 17 Nov 2019 22:59:05 -0600
Subject: [PATCH] Mutation observer added plus cs cleanup

---
 README.md                    |  5 +++--
 src/scripts/betterYoutube.js | 39 +++++++++++++++++++++++++++---------
 src/styles/betterYoutube.css |  1 +
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 4b6c7f8..2db7f93 100644
--- a/README.md
+++ b/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/
diff --git a/src/scripts/betterYoutube.js b/src/scripts/betterYoutube.js
index 2e3de1b..9eaf931 100644
--- a/src/scripts/betterYoutube.js
+++ b/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 = () => {
diff --git a/src/styles/betterYoutube.css b/src/styles/betterYoutube.css
index 38dd336..9cdfbdb 100644
--- a/src/styles/betterYoutube.css
+++ b/src/styles/betterYoutube.css
@@ -11,6 +11,7 @@
     left: 35%;
     width: 10em;
     text-align: center;
+    color: #fff;
 }
 
 #enhancerMenuIDRef, #slugCopyZone {