From 0bb7cabd3e103ef639f9941016bb61d23e4089e7 Mon Sep 17 00:00:00 2001 From: goodtube4u Date: Fri, 13 Jun 2025 12:19:47 +1000 Subject: [PATCH] Loading issue fix --- beta/goodtube-embed.user.js | 133 +++++++++++++++++++++--------------- beta/test.user.js | 5 +- goodtube.user.js | 133 +++++++++++++++++++++--------------- 3 files changed, 155 insertions(+), 116 deletions(-) diff --git a/beta/goodtube-embed.user.js b/beta/goodtube-embed.user.js index f4dd344..f0406ac 100644 --- a/beta/goodtube-embed.user.js +++ b/beta/goodtube-embed.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name GoodTube // @namespace http://tampermonkey.net/ -// @version 2.005 +// @version 2.009 // @description Removes 100% of Youtube ads. // @author GoodTube // @updateURL https://github.com/goodtube4u/goodtube/raw/refs/heads/main/goodtube.user.js @@ -421,7 +421,7 @@ /* Desktop */ #goodTube_playerWrapper { border-radius: 12px; - background: #ffffff; + background: #000000; position: absolute; top: 0; left: 0; @@ -481,11 +481,6 @@ goodTube_playerWrapper = document.querySelector('#goodTube_playerWrapper'); goodTube_player = goodTube_playerWrapper.querySelector('iframe'); - // Expose when the proxy iframe has loaded - goodTube_player.addEventListener('load', function () { - goodTube_proxyIframeLoaded = true; - }); - // Setup player dynamic positioning and sizing goodTube_player_positionAndSize(); @@ -1195,10 +1190,10 @@ /* Load GoodTube -------------------------------------------------- */ // Init our player (after DOM is loaded) - document.addEventListener("DOMContentLoaded", goodTube_player_init); + document.addEventListener('DOMContentLoaded', goodTube_player_init); - // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger. - if (document.readyState === "interactive" || document.readyState === "complete") { + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === 'interactive' || document.readyState === 'complete') { goodTube_player_init(); } @@ -1214,7 +1209,12 @@ window.addEventListener('message', goodTube_receiveMessage); // Init the menu - document.addEventListener("DOMContentLoaded", goodTube_menu); + document.addEventListener('DOMContentLoaded', goodTube_menu); + + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === 'interactive' || document.readyState === 'complete') { + goodTube_menu(); + } } // Listen for messages from the iframe @@ -1224,8 +1224,13 @@ return; } - // Goodtube player has loaded - else if (event.data === 'goodTube_loaded') { + // Proxy iframe has loaded + else if (event.data === 'goodTube_proxyIframe_loaded') { + goodTube_proxyIframeLoaded = true; + } + + // Player iframe has loaded + else if (event.data === 'goodTube_playerIframe_loaded') { goodTube_player.style.display = 'block'; } @@ -1911,6 +1916,16 @@ // Listen for messages from the parent window window.addEventListener('message', goodTube_iframe_receiveMessage); + + // Let the parent frame know it's loaded + document.addEventListener('DOMContentLoaded', () => { + window.top.postMessage('goodTube_playerIframe_loaded', '*'); + }); + + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === 'interactive' || document.readyState === 'complete') { + window.top.postMessage('goodTube_playerIframe_loaded', '*'); + } } // Actions @@ -2483,54 +2498,64 @@ ------------------------------------------------------------------------------------------ */ // Init function goodTube_proxyIframe_init() { + // Wait for the DOM to load + document.addEventListener("DOMContentLoaded", goodTube_proxyIframe_initLoaded); + + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === "interactive" || document.readyState === "complete") { + goodTube_proxyIframe_initLoaded(); + } + } + + function goodTube_proxyIframe_initLoaded() { + // Hide the DOM elements from the proxy page + let elements = document.querySelectorAll('body > *'); + elements.forEach(element => { + element.style.display = 'none'; + element.style.opacity = '0'; + element.style.visibility = 'hidden'; + }); + // Remove scrolling document.body.style.overflow = 'hidden'; - // Wait for the DOM to load - document.addEventListener("DOMContentLoaded", () => { - // Hide the DOM elements from the proxy page - let elements = document.querySelectorAll('body > *'); - elements.forEach(element => { - element.style.display = 'none'; - element.style.opacity = '0'; - element.style.visibility = 'hidden'; - }); + // Change the background colour + document.body.style.background = '#000000'; - // Change the background colour - document.body.style.background = '#000000'; + // Create a youtube iframe + let youtubeIframe = document.createElement('div'); - // Create a youtube iframe - let youtubeIframe = document.createElement('div'); + // Add the youtube iframe to the page + document.body.appendChild(youtubeIframe); - // Add the youtube iframe to the page - document.body.appendChild(youtubeIframe); + // Update the content of the youtube iframe + youtubeIframe.innerHTML = ` + + `; - // Update the content of the youtube iframe - youtubeIframe.innerHTML = ` - - `; + // Style the youtube iframe + youtubeIframe.style.position = 'fixed'; + youtubeIframe.style.top = '0'; + youtubeIframe.style.bottom = '0'; + youtubeIframe.style.right = '0'; + youtubeIframe.style.left = '0'; + youtubeIframe.style.zIndex = '99999'; - // Style the youtube iframe - youtubeIframe.style.position = 'fixed'; - youtubeIframe.style.top = '0'; - youtubeIframe.style.bottom = '0'; - youtubeIframe.style.right = '0'; - youtubeIframe.style.left = '0'; - youtubeIframe.style.zIndex = '99999'; + // Listen for messages from the parent window + window.addEventListener('message', goodTube_proxyIframe_receiveMessage); - // Listen for messages from the parent window - window.addEventListener('message', goodTube_proxyIframe_receiveMessage); - }); + // Let the parent frame know it's loaded + window.top.postMessage('goodTube_proxyIframe_loaded', '*'); } // Receive a message from the parent window @@ -2547,10 +2572,6 @@ if (youtubeIframe) { // Change the source of the youtube iframe if (event.data.indexOf('goodTube_src_') !== -1) { - youtubeIframe.addEventListener('load', () => { - window.top.postMessage('goodTube_loaded', '*'); - }); - youtubeIframe.src = event.data.replace('goodTube_src_', ''); } // Pass all other messages down to the youtube iframe diff --git a/beta/test.user.js b/beta/test.user.js index fa01911..f0406ac 100644 --- a/beta/test.user.js +++ b/beta/test.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name GoodTube // @namespace http://tampermonkey.net/ -// @version 2.005 +// @version 2.009 // @description Removes 100% of Youtube ads. // @author GoodTube // @updateURL https://github.com/goodtube4u/goodtube/raw/refs/heads/main/goodtube.user.js @@ -589,7 +589,6 @@ if (goodTube_mobile) { mobileText = 'true'; } - console.log('sending load message'); goodTube_player.contentWindow.postMessage('goodTube_src_https://www.youtube.com/embed/' + goodTube_getParams['v'] + '?autoplay=1&mobile=' + mobileText + '&goodTube_autoplay=' + goodTube_autoplay, '*'); } // If we are in picture in picture mode @@ -1227,13 +1226,11 @@ // Proxy iframe has loaded else if (event.data === 'goodTube_proxyIframe_loaded') { - console.log('proxy iframe loaded'); goodTube_proxyIframeLoaded = true; } // Player iframe has loaded else if (event.data === 'goodTube_playerIframe_loaded') { - console.log('palyer iframe loaded - showing it'); goodTube_player.style.display = 'block'; } diff --git a/goodtube.user.js b/goodtube.user.js index f4dd344..f0406ac 100644 --- a/goodtube.user.js +++ b/goodtube.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name GoodTube // @namespace http://tampermonkey.net/ -// @version 2.005 +// @version 2.009 // @description Removes 100% of Youtube ads. // @author GoodTube // @updateURL https://github.com/goodtube4u/goodtube/raw/refs/heads/main/goodtube.user.js @@ -421,7 +421,7 @@ /* Desktop */ #goodTube_playerWrapper { border-radius: 12px; - background: #ffffff; + background: #000000; position: absolute; top: 0; left: 0; @@ -481,11 +481,6 @@ goodTube_playerWrapper = document.querySelector('#goodTube_playerWrapper'); goodTube_player = goodTube_playerWrapper.querySelector('iframe'); - // Expose when the proxy iframe has loaded - goodTube_player.addEventListener('load', function () { - goodTube_proxyIframeLoaded = true; - }); - // Setup player dynamic positioning and sizing goodTube_player_positionAndSize(); @@ -1195,10 +1190,10 @@ /* Load GoodTube -------------------------------------------------- */ // Init our player (after DOM is loaded) - document.addEventListener("DOMContentLoaded", goodTube_player_init); + document.addEventListener('DOMContentLoaded', goodTube_player_init); - // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger. - if (document.readyState === "interactive" || document.readyState === "complete") { + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === 'interactive' || document.readyState === 'complete') { goodTube_player_init(); } @@ -1214,7 +1209,12 @@ window.addEventListener('message', goodTube_receiveMessage); // Init the menu - document.addEventListener("DOMContentLoaded", goodTube_menu); + document.addEventListener('DOMContentLoaded', goodTube_menu); + + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === 'interactive' || document.readyState === 'complete') { + goodTube_menu(); + } } // Listen for messages from the iframe @@ -1224,8 +1224,13 @@ return; } - // Goodtube player has loaded - else if (event.data === 'goodTube_loaded') { + // Proxy iframe has loaded + else if (event.data === 'goodTube_proxyIframe_loaded') { + goodTube_proxyIframeLoaded = true; + } + + // Player iframe has loaded + else if (event.data === 'goodTube_playerIframe_loaded') { goodTube_player.style.display = 'block'; } @@ -1911,6 +1916,16 @@ // Listen for messages from the parent window window.addEventListener('message', goodTube_iframe_receiveMessage); + + // Let the parent frame know it's loaded + document.addEventListener('DOMContentLoaded', () => { + window.top.postMessage('goodTube_playerIframe_loaded', '*'); + }); + + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === 'interactive' || document.readyState === 'complete') { + window.top.postMessage('goodTube_playerIframe_loaded', '*'); + } } // Actions @@ -2483,54 +2498,64 @@ ------------------------------------------------------------------------------------------ */ // Init function goodTube_proxyIframe_init() { + // Wait for the DOM to load + document.addEventListener("DOMContentLoaded", goodTube_proxyIframe_initLoaded); + + // Also check if the DOM is already loaded, as if it is, the above event listener will not trigger + if (document.readyState === "interactive" || document.readyState === "complete") { + goodTube_proxyIframe_initLoaded(); + } + } + + function goodTube_proxyIframe_initLoaded() { + // Hide the DOM elements from the proxy page + let elements = document.querySelectorAll('body > *'); + elements.forEach(element => { + element.style.display = 'none'; + element.style.opacity = '0'; + element.style.visibility = 'hidden'; + }); + // Remove scrolling document.body.style.overflow = 'hidden'; - // Wait for the DOM to load - document.addEventListener("DOMContentLoaded", () => { - // Hide the DOM elements from the proxy page - let elements = document.querySelectorAll('body > *'); - elements.forEach(element => { - element.style.display = 'none'; - element.style.opacity = '0'; - element.style.visibility = 'hidden'; - }); + // Change the background colour + document.body.style.background = '#000000'; - // Change the background colour - document.body.style.background = '#000000'; + // Create a youtube iframe + let youtubeIframe = document.createElement('div'); - // Create a youtube iframe - let youtubeIframe = document.createElement('div'); + // Add the youtube iframe to the page + document.body.appendChild(youtubeIframe); - // Add the youtube iframe to the page - document.body.appendChild(youtubeIframe); + // Update the content of the youtube iframe + youtubeIframe.innerHTML = ` + + `; - // Update the content of the youtube iframe - youtubeIframe.innerHTML = ` - - `; + // Style the youtube iframe + youtubeIframe.style.position = 'fixed'; + youtubeIframe.style.top = '0'; + youtubeIframe.style.bottom = '0'; + youtubeIframe.style.right = '0'; + youtubeIframe.style.left = '0'; + youtubeIframe.style.zIndex = '99999'; - // Style the youtube iframe - youtubeIframe.style.position = 'fixed'; - youtubeIframe.style.top = '0'; - youtubeIframe.style.bottom = '0'; - youtubeIframe.style.right = '0'; - youtubeIframe.style.left = '0'; - youtubeIframe.style.zIndex = '99999'; + // Listen for messages from the parent window + window.addEventListener('message', goodTube_proxyIframe_receiveMessage); - // Listen for messages from the parent window - window.addEventListener('message', goodTube_proxyIframe_receiveMessage); - }); + // Let the parent frame know it's loaded + window.top.postMessage('goodTube_proxyIframe_loaded', '*'); } // Receive a message from the parent window @@ -2547,10 +2572,6 @@ if (youtubeIframe) { // Change the source of the youtube iframe if (event.data.indexOf('goodTube_src_') !== -1) { - youtubeIframe.addEventListener('load', () => { - window.top.postMessage('goodTube_loaded', '*'); - }); - youtubeIframe.src = event.data.replace('goodTube_src_', ''); } // Pass all other messages down to the youtube iframe