From faed6edee506a75f29332c37f77c71320cc98c57 Mon Sep 17 00:00:00 2001 From: Maxim Stewart 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 {