update script.js

Author: masaabu

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)
     })