diff --git a/.github/workflows/pr-jest-tests.yml b/.github/workflows/pr-jest-tests.yml
index 72e8e61148..f412dc0707 100644
--- a/.github/workflows/pr-jest-tests.yml
+++ b/.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
diff --git a/index.html b/index.html
index a65caf2ee8..ade4ea58f6 100644
--- a/index.html
+++ b/index.html
@@ -333,7 +333,9 @@
class="material-icons main">play_circle_filled
- stop
+
+ stop
+
diff --git a/js/__tests__/toolbar.test.js b/js/__tests__/toolbar.test.js
index d9c986e945..65d9fde9ec 100644
--- a/js/__tests__/toolbar.test.js
+++ b/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();
diff --git a/js/activity.js b/js/activity.js
index 36ec729e76..9bc0890c83 100644
--- a/js/activity.js
+++ b/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;
+ }
};
/*
diff --git a/js/toolbar.js b/js/toolbar.js
index f6ac4a2a06..5a3e502a35 100644
--- a/js/toolbar.js
+++ b/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";
diff --git a/planet/js/GlobalTag.js b/planet/js/GlobalTag.js
index 0b0c749d5a..38d08c65f5 100644
--- a/planet/js/GlobalTag.js
+++ b/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 = [