sound-editor.jsx -- fix weird React timing issue

Author: SharkPool-SP

src/containers/sound-editor.jsx

@@ -522,69 +522,78 @@ class SoundEditor extends React.Component {
             { name: "Cancel", callback: () => audio.close() },
         );
 
-        menu.setAttribute("style", "margin: 0 10px 15px 10px;position: relative;display: flex;justify-content: flex-end;flex-direction: row;height: calc(100% - (3.125em + 2.125em + 16px));align-items: center;");
-        menu.append(pitchDiv, volumeDiv);
-
-        const previewButton = document.createElement("button");
-        previewButton.style = "border-radius: 1000px;padding: 5px;width: 45px;height: 45px;margin-right: 10px;border-style: none;background: #00c3ff;";
-        previewButton.innerHTML = `<img draggable="false" style="max-width: 100%;max-height: 100%" src="${playURI}">`;
-        menu.append(previewButton);
-
-        // preview functionality
-        // create an audio buffer using the selection
-        const properBuffer = audio.createBuffer(1, bufferSelection.samples.length, bufferSelection.sampleRate);
-        properBuffer.getChannelData(0).set(bufferSelection.samples);
-
-        let bufferSource, audioPlaying = false;
-        function play() {
-            bufferSource = audio.createBufferSource();
-            bufferSource.connect(gainNode);
-            bufferSource.buffer = properBuffer;
-            bufferSource.start(0);
-            bufferSource.detune.value = pitchParts[1].value * 10;
-            previewButton.innerHTML = `<img draggable="false" style="max-width: 100%;max-height: 100%" src="${stopURI}">`;
-            audioPlaying = true;
-            bufferSource.onended = () => {
-                previewButton.firstChild.src = playURI;
+        const modalHandler = () => {
+            menu.setAttribute("style", "margin: 0 10px 15px 10px;position: relative;display: flex;justify-content: flex-end;flex-direction: row;height: calc(100% - (3.125em + 2.125em + 16px));align-items: center;");
+            menu.append(pitchDiv, volumeDiv);
+
+            const previewButton = document.createElement("button");
+            previewButton.style = "border-radius: 1000px;padding: 5px;width: 45px;height: 45px;margin-right: 10px;border-style: none;background: #00c3ff;";
+            previewButton.innerHTML = `<img draggable="false" style="max-width: 100%;max-height: 100%" src="${playURI}">`;
+            menu.append(previewButton);
+
+            // preview functionality
+            // create an audio buffer using the selection
+            const properBuffer = audio.createBuffer(1, bufferSelection.samples.length, bufferSelection.sampleRate);
+            properBuffer.getChannelData(0).set(bufferSelection.samples);
+
+            let bufferSource, audioPlaying = false;
+            function play() {
+                bufferSource = audio.createBufferSource();
+                bufferSource.connect(gainNode);
+                bufferSource.buffer = properBuffer;
+                bufferSource.start(0);
+                bufferSource.detune.value = pitchParts[1].value * 10;
+                previewButton.innerHTML = `<img draggable="false" style="max-width: 100%;max-height: 100%" src="${stopURI}">`;
+                audioPlaying = true;
+                bufferSource.onended = () => {
+                    previewButton.firstChild.src = playURI;
+                    audioPlaying = false;
+                }
+            }
+            function stop() {
+                bufferSource.stop();
+                previewButton.firstChild.src = stopURI;
                 audioPlaying = false;
             }
-        }
-        function stop() {
-            bufferSource.stop();
-            previewButton.firstChild.src = stopURI;
-            audioPlaying = false;
-        }
-        previewButton.onclick = () => {
-            if (audioPlaying) stop();
-            else play();
-        }
+            previewButton.onclick = () => {
+                if (audioPlaying) stop();
+                else play();
+            }
 
-        // slider/number updates
-        const pSlider = pitchParts[1];
-        const pNumber = pitchParts[2];
-        pSlider.onchange = (updateValue) => {
-            if (updateValue !== false) pNumber.value = Number(pSlider.value);
-            if (bufferSource) bufferSource.detune.value = pSlider.value * 10;
-        }
-        pSlider.oninput = pSlider.onchange;
-        pNumber.onchange = () => {
-            pSlider.value = pNumber.value;
-            pSlider.onchange(false);
-        };
-        pNumber.oninput = pNumber.onchange;
+            // slider/number updates
+            const pSlider = pitchParts[1];
+            const pNumber = pitchParts[2];
+            pSlider.onchange = (updateValue) => {
+                if (updateValue !== false) pNumber.value = Number(pSlider.value);
+                if (bufferSource) bufferSource.detune.value = pSlider.value * 10;
+            }
+            pSlider.oninput = pSlider.onchange;
+            pNumber.onchange = () => {
+                pSlider.value = pNumber.value;
+                pSlider.onchange(false);
+            };
+            pNumber.oninput = pNumber.onchange;
 
-        const vSlider = volumeParts[1];
-        const vNumber = volumeParts[2];
-        vSlider.onchange = (updateValue) => {
-            gainNode.gain.value = vSlider.value;
-            if (updateValue !== false) vNumber.value = Number(vSlider.value) * 100;
-        }
-        vSlider.oninput = vSlider.onchange;
-        vNumber.onchange = () => {
-            vSlider.value = vNumber.value / 100;
-            vSlider.onchange(false);
+            const vSlider = volumeParts[1];
+            const vNumber = volumeParts[2];
+            vSlider.onchange = (updateValue) => {
+                gainNode.gain.value = vSlider.value;
+                if (updateValue !== false) vNumber.value = Number(vSlider.value) * 100;
+            }
+            vSlider.oninput = vSlider.onchange;
+            vNumber.onchange = () => {
+                vSlider.value = vNumber.value / 100;
+                vSlider.onchange(false);
+            };
+            vNumber.oninput = vNumber.onchange;
         };
-        vNumber.oninput = vNumber.onchange;
+
+        // account for weird react timing issue
+        if (menu) modalHandler();
+        else queueMicrotask(() => {
+          menu = document.querySelector(`div[class="ReactModalPortal"] div[class*="prompt_body_"] div`);
+          modalHandler();
+        });
     }
 
     handleFormatMenu() {
@@ -617,7 +626,7 @@ class SoundEditor extends React.Component {
         ];
         let selectedSampleRate = this.props.sampleRate;
         let selectedForceRate = false;
-        const menu = window.ScratchBlocks.customPrompt(
+        let menu = window.ScratchBlocks.customPrompt(
             "Format Sound", { width: 350, height: "auto" },
             {
                 name: "Apply", callback: () => {
@@ -629,50 +638,59 @@ class SoundEditor extends React.Component {
             { name: "Cancel", callback: () => {} },
         );
 
-        menu.style.marginBottom = "15px";
-        const rateTitle = genTitle("New Sample Rate:");
-
-        const rateSelector = document.createElement("select");
-        rateSelector.style = "border-radius: 5px;text-align: center;margin-left: 10px;width: 50%;";
-        for (const rate of sampleRates) {
-            const option = document.createElement("option");
-            option.value = rate;
-            option.textContent = rate;
-            rateSelector.append(option);
-        }
-        rateSelector.selectedIndex = sampleRates.indexOf(this.props.sampleRate);
-        rateSelector.onchange = () => {
-            selectedSampleRate = rateSelector.value;
+        const modalHandler = () => {
+            menu.style.marginBottom = "15px";
+            const rateTitle = genTitle("New Sample Rate:");
+
+            const rateSelector = document.createElement("select");
+            rateSelector.style = "border-radius: 5px;text-align: center;margin-left: 10px;width: 50%;";
+            for (const rate of sampleRates) {
+                const option = document.createElement("option");
+                option.value = rate;
+                option.textContent = rate;
+                rateSelector.append(option);
+            }
+            rateSelector.selectedIndex = sampleRates.indexOf(this.props.sampleRate);
+            rateSelector.onchange = () => {
+                selectedSampleRate = rateSelector.value;
+            };
+            rateTitle.appendChild(rateSelector);
+
+            const warningDiv = document.createElement("div");
+            warningDiv.style.marginBottom = "15px";
+            const warning = document.createElement("i");
+            warning.textContent = "Choosing a higher sample rate than the current rate will not make the existing audio higher quality";
+            warning.style = "font-size:13px;opacity:0.5;";
+            warningDiv.appendChild(warning);
+
+            const warningDiv2 = warning.cloneNode(true);
+            warningDiv2.textContent = "If 'whole sound' is selected, all added audio will use the new sample rate";
+
+            const applicatorDiv = document.createElement("div");
+            applicatorDiv.append(
+                genCheckableLabel("this selection", "0", true),
+                genCheckableLabel("whole sound", "1", false)
+            );
+            applicatorDiv.addEventListener("click", (e) => {
+                const div = e.target.closest(`div[class="check-outer"]`);
+                if (!div) return;
+
+                for (const checkable of Array.from(div.parentNode.children)) {
+                  checkable.firstChild.checked = false;
+                }
+                div.firstChild.checked = true;
+                selectedForceRate = div.id == "1";
+                e.stopPropagation();
+            });
+            menu.append(rateTitle, warningDiv, genTitle("Apply to:"), applicatorDiv, warningDiv2);
         };
-        rateTitle.appendChild(rateSelector);
-
-        const warningDiv = document.createElement("div");
-        warningDiv.style.marginBottom = "15px";
-        const warning = document.createElement("i");
-        warning.textContent = "Choosing a higher sample rate than the current rate will not make the existing audio higher quality";
-        warning.style = "font-size:13px;opacity:0.5;";
-        warningDiv.appendChild(warning);
-
-        const warningDiv2 = warning.cloneNode(true);
-        warningDiv2.textContent = "If 'whole sound' is selected, all added audio will use the new sample rate";
-
-        const applicatorDiv = document.createElement("div");
-        applicatorDiv.append(
-          genCheckableLabel("this selection", "0", true),
-          genCheckableLabel("whole sound", "1", false)
-        );
-        applicatorDiv.addEventListener("click", (e) => {
-            const div = e.target.closest(`div[class="check-outer"]`);
-            if (!div) return;
 
-            for (const checkable of Array.from(div.parentNode.children)) {
-              checkable.firstChild.checked = false;
-            }
-            div.firstChild.checked = true;
-            selectedForceRate = div.id == "1";
-            e.stopPropagation();
+        // account for weird react timing issue
+        if (menu) modalHandler();
+        else queueMicrotask(() => {
+          menu = document.querySelector(`div[class="ReactModalPortal"] div[class*="prompt_body_"] div`);
+          modalHandler();
         });
-        menu.append(rateTitle, warningDiv, genTitle("Apply to:"), applicatorDiv, warningDiv2);
     }
     render() {
         const { effectTypes } = AudioEffects;