diff --git a/features/project-miniplayer/script.js b/features/project-miniplayer/script.js index 36c0df84..83ae03f7 100644 --- a/features/project-miniplayer/script.js +++ b/features/project-miniplayer/script.js @@ -1,11 +1,38 @@ export default async function ({ feature, console }) { + let observerEnabled = false; + const miniplayerElement = document.createElement('div'); miniplayerElement.className = 'ste-project-miniplayer'; document.body.appendChild(miniplayerElement); - await ScratchTools.waitForElement("div.guiPlayer") - const guiPlayer = document.getElementsByClassName("guiPlayer")[0] - const projectHeader = document.querySelector('.description-block'); - const title = projectHeader.closest('.flex-row.project-notes'); + + await ScratchTools.waitForElements("div.guiPlayer", function(element) { + if (observerEnabled === false) createObserver(element) + }); + function createObserver(guiPlayer) { + const projectHeader = document.querySelector('.description-block'); + const title = projectHeader.closest('.flex-row.project-notes'); + + const callback = (entries, observer) => { + const editorPlayer = document.querySelector(".gui_stage-and-target-wrapper_Qg4hA .stage-wrapper_stage-wrapper_odn2t"); + entries.forEach(entry => { + if (entry.isIntersecting) { + miniplayerElement.style.display = 'none'; + title.insertAdjacentElement('beforebegin', guiPlayer); + } else if (editorPlayer) { + miniplayerElement.style.display = 'none'; + observerObject.disconnect() + observerEnabled = false; + } else { + miniplayerElement.style.display = 'block'; + miniplayerElement.appendChild(guiPlayer); + } + }); + }; + const observerObject = new IntersectionObserver(callback); + const targetArea = document.querySelector("div.preview .inner .project-notes") + observerObject.observe(targetArea); + observerEnabled = true; + } function updateSetting (key, value) { switch (key) { @@ -49,24 +76,6 @@ export default async function ({ feature, console }) { updateSetting('position-bottom', await feature.settings.get("position-bottom")); updateSetting('opacity', await feature.settings.get("opacity")); - const observerOptions = { - root: document - }; - const callback = (entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - miniplayerElement.style.display = 'none'; - title.insertAdjacentElement('beforebegin', guiPlayer); - } else { - miniplayerElement.style.display = 'block'; - miniplayerElement.appendChild(guiPlayer); - } - }); - }; - const observerObject = new IntersectionObserver(callback, observerOptions); - const targetArea = document.querySelector("div.preview .inner .project-notes") - observerObject.observe(targetArea); - feature.settings.addEventListener("changed", function({ key, value }) { updateSetting(key, value) })