Fix/stop button visibility

.github/workflows/pr-jest-tests.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22.x'
 
       - name: Install Dependencies
         run: npm install

index.html

@@ -333,7 +333,9 @@
                                         class="material-icons main">play_circle_filled</i></a>
                             </li>
                             <li>
-                                <a id="stop" class="left tooltipped"><i class="material-icons main">stop</i></a>
+                                <a id="stop" class="left tooltipped" style="display: none;">
+                                    <i class="material-icons main">stop</i>
+                                </a>
                             </li>
                             <li style="display: flex; align-items: center;">
                                 <a id="record" class="left tooltipped" data-position="bottom" data-tooltip="Record"></a>

js/__tests__/toolbar.test.js

@@ -283,7 +283,7 @@ describe("Toolbar Class", () => {
     });
 
     test("renderStopIcon sets onclick and updates stop button behavior", () => {
-        const stopIcon = { onclick: null, style: { color: "" } };
+        const stopIcon = { onclick: null, style: { color: "", display: "" } };
         const recordButton = { className: "recording" };
 
         global.docById.mockImplementation(id =>
@@ -297,6 +297,8 @@ describe("Toolbar Class", () => {
         const mockOnClick = jest.fn();
         toolbar.renderStopIcon(mockOnClick);
 
+        expect(stopIcon.style.display).toBe("none");
+
         stopIcon.onclick();
 
         expect(mockOnClick).toHaveBeenCalled();

js/activity.js

@@ -4599,14 +4599,24 @@ class Activity {
          * When turtle stops running restore stop button to normal state
          */
         this.onStopTurtle = () => {
-            // TODO: plugin support
+            const stopButton = document.getElementById("stop");
+            if (stopButton) {
+                stopButton.style.color = "white";
+                stopButton.style.display = "none";
+            }
         };
 
         /*
          * When turtle starts running change stop button to running state
          */
         this.onRunTurtle = () => {
-            // TODO: plugin support
+            const stopButton = document.getElementById("stop");
+            if (stopButton) {
+                stopButton.style.display = "inline-block";
+                stopButton.style.color = this.toolbar
+                    ? this.toolbar.stopIconColorWhenPlaying
+                    : window.platformColor.stopIconcolor;
+            }
         };
 
         /*

js/toolbar.js

@@ -448,6 +448,8 @@ class Toolbar {
     renderStopIcon(onclick) {
         const stopIcon = docById("stop");
         const recordButton = docById("record");
+        stopIcon.style.display = "none";
+        stopIcon.style.color = "white";
         stopIcon.onclick = () => {
             onclick(this.activity);
             stopIcon.style.color = "white";

planet/js/GlobalTag.js

@@ -12,13 +12,26 @@
 /*
    global
 
-   _, toTitleCase
+   _
 */
 /*
    exported
 
    GlobalTag
 */
+
+/**
+ * Converts the first character of a string to uppercase.
+ * Defined locally because GlobalTag.js runs inside the Planet iframe
+ * and does not have access to the toTitleCase exported by js/utils/utils.js.
+ * @param {string} str - The string to convert.
+ * @returns {string|undefined} The converted string or undefined if input is not a string.
+ */
+const toTitleCase = (str) => {
+    if (typeof str !== "string") return;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
 class GlobalTag {
     /* 
      this.tagNames = [