diff --git a/README.md b/README.md index 76433c3..a81ba64 100644 --- a/README.md +++ b/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 -* Actually fixed observer logic. +# Version: 1.5.3 +* Refactored a little +* Readded loader check # Download https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/ diff --git a/src/manifest.json b/src/manifest.json index ac8dde3..f032e6c 100644 --- a/src/manifest.json +++ b/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": { diff --git a/src/scripts/betterYoutube.js b/src/scripts/betterYoutube.js index e84351f..c9b5415 100644 --- a/src/scripts/betterYoutube.js +++ b/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 setupProc and elsewhere. + // Default to false b/c if tag checked it sets this in setupProcess 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; } - ytEnhancerMenu = document.getElementById("enhancerMenuID"); + // 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 = () => { - part = "https://img.youtube.com/vi/"; + const fillUIAndSetupEvents = () => { 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,10 +233,9 @@ const clickDialog = () => { console.log("Clicking dialog confirm to continue playing..."); - document - .querySelector(dialogElementQueryRef) - .querySelector('yt-button-renderer[dialog-confirm]') - .click(); + document.querySelector(dialogElementQueryRef) + .querySelector('yt-button-renderer[dialog-confirm]') + .click(); } const toggleEndlessPlay = () => { @@ -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(); }());