[UI/UX] Stop Button Appears Only During Active Playback #5778

index.html

@@ -949,39 +949,43 @@
             window.addEventListener("resize", togglePlayOnlyMode);
         });
 
-    (function () {
-        function setAppHeight() {
-            const vh = window.innerHeight * 0.01;
-            document.documentElement.style.setProperty('--vh', `${vh}px`);
-        }
-
-        window.addEventListener('resize', setAppHeight);
-        document.addEventListener('fullscreenchange', setAppHeight);
-        setAppHeight();
-    })();
-
-(function () {
-  function resizeCanvasesToScreen() {
-    const canvases = document.querySelectorAll("canvas");
-    const width = window.innerWidth;
-    const height = window.innerHeight;
+    </script>
 
-    canvases.forEach(c => {
-      c.width = width;
-      c.height = height;
-      c.style.width = "100%";
-      c.style.height = "100%";
-    });
-  }
+    <script>
+        // Canvas and viewport height management
+        (function () {
+            function setAppHeight() {
+                const vh = window.innerHeight * 0.01;
+                document.documentElement.style.setProperty('--vh', `${vh}px`);
+            }
 
-  window.addEventListener("resize", resizeCanvasesToScreen);
-  document.addEventListener("fullscreenchange", resizeCanvasesToScreen);
+            window.addEventListener('resize', setAppHeight);
+            document.addEventListener('fullscreenchange', setAppHeight);
+            setAppHeight();
+        })();
+
+        (function () {
+          function resizeCanvasesToScreen() {
+            const canvases = document.querySelectorAll("canvas");
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+
+            canvases.forEach(c => {
+              c.width = width;
+              c.height = height;
+              c.height = height;
+              c.style.width = "100%";
+              c.style.height = "100%";
+            });
+          }
 
-  setTimeout(resizeCanvasesToScreen, 150);
-})();
+          window.addEventListener("resize", resizeCanvasesToScreen);
+          document.addEventListener("fullscreenchange", resizeCanvasesToScreen);
 
-</script>
+          setTimeout(resizeCanvasesToScreen, 150);
+        })();
 
+    </script>
 
 </body>
 

js/activity.js

@@ -1692,6 +1692,7 @@ class Activity {
                 }
 
                 this.logo.runLogoCommands(null, env);
+                document.getElementById("stop").style.display = "inline-block";
             } else {
                 if (currentDelay !== 0) {
                     // Keep playing at full speed.
@@ -2144,6 +2145,7 @@ class Activity {
             }
 
             this.logo.doStopTurtles();
+            document.getElementById("stop").style.display = "none";
 
             const widgetTitle = document.getElementsByClassName("wftTitle");
             for (let i = 0; i < widgetTitle.length; i++) {
@@ -7306,6 +7308,11 @@ class Activity {
          * Inits everything. The main function.
          */
         this.init = async () => {
+            // Hide stop button on startup
+            const stopBtn = document.getElementById("stop");
+            if (stopBtn) {
+                stopBtn.style.display = "none";
+            }
             this._clientWidth = document.body.clientWidth;
             this._clientHeight = document.body.clientHeight;
             this._innerWidth = window.innerWidth;

js/turtle-singer.js

@@ -242,6 +242,11 @@ class Singer {
             }
         });
         this.activeVoices.clear();
+
+        const stopBtn = document.getElementById("stop");
+        if (stopBtn) {
+            stopBtn.style.display = "none";
+        }
     }
 
     // ========= Class variables ==============================================
@@ -2152,6 +2157,10 @@ class Singer {
                     }
 
                     if (notes.length > 0) {
+                        const stopBtn = document.getElementById("stop");
+                        if (stopBtn) {
+                            stopBtn.style.display = "inline-block";
+                        }
                         const len = notes[0].length;
                         if (typeof notes[0] === "number") {
                             tur.singer.currentOctave = frequencyToPitch(notes[0])[1];