Performance Improvement: Oscilloscope Throttling (#5741)

* chore(i18n): auto-update JSON files from updated PO files

* perf: refactor oscilloscope loop to prevent double-scheduling and sync with global idle state

* perf: sync activity event handlers with master and maintain idle throttling

* Apply Prettier formatting to satisfy CI

* chore: remove unrelated workflow and locale changes from PR

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: vanshika2720

js/activity.js

@@ -2983,6 +2983,60 @@ class Activity {
             }
         };
 
+        /**
+         * Initialize an idle watcher that throttles the application's framerate
+         * when the application is inactive and no music is playing.
+         * This significantly reduces CPU usage and improves battery life.
+         */
+        this._initIdleWatcher = () => {
+            const IDLE_THRESHOLD = 5000; // 5 seconds
+            const ACTIVE_FPS = 60;
+            const IDLE_FPS = 1;
+
+            let lastActivity = Date.now();
+            this.isAppIdle = false;
+
+            // Wake up function - restores full framerate
+            const resetIdleTimer = () => {
+                lastActivity = Date.now();
+                if (this.isAppIdle) {
+                    this.isAppIdle = false;
+                    createjs.Ticker.framerate = ACTIVE_FPS;
+                    // Force immediate redraw for responsiveness
+                    if (this.stage) this.stage.update();
+                }
+            };
+
+            // Track user activity
+            window.addEventListener("mousemove", resetIdleTimer);
+            window.addEventListener("mousedown", resetIdleTimer);
+            window.addEventListener("keydown", resetIdleTimer);
+            window.addEventListener("touchstart", resetIdleTimer);
+            window.addEventListener("wheel", resetIdleTimer);
+
+            // Periodic check for idle state
+            setInterval(() => {
+                // Check if music/code is playing
+                const isMusicPlaying = this.logo?._alreadyRunning || false;
+
+                if (!isMusicPlaying && Date.now() - lastActivity > IDLE_THRESHOLD) {
+                    if (!this.isAppIdle) {
+                        this.isAppIdle = true;
+                        createjs.Ticker.framerate = IDLE_FPS;
+                        console.log("⚡ Idle mode: Throttling to 1 FPS to save battery");
+                    }
+                } else if (this.isAppIdle && isMusicPlaying) {
+                    // Music started playing - wake up immediately
+                    resetIdleTimer();
+                }
+            }, 1000);
+
+            // Expose activity instance for external checks
+            if (typeof window !== "undefined") {
+                window.activity = this;
+            }
+        };
+
         /**
          * Renders an error message with appropriate artwork.
          * @param {string} name - The name specifying the SVG to be rendered.

js/widgets/oscilloscope.js

@@ -47,8 +47,13 @@ class Oscilloscope {
         // RAF lifecycle control
         this._running = false;
         this._rafId = null;
+        this._timeoutId = null;
+        this._isIdle = false;
         this.draw = this.draw.bind(this);
 
+        this._handleVisibilityChange = this._handleVisibilityChange.bind(this);
+        document.addEventListener("visibilitychange", this._handleVisibilityChange);
+
         this.pitchAnalysers = {};
         this._canvasState = {};
         this.drawVisualIDs = {};
@@ -109,6 +114,11 @@ class Oscilloscope {
             this._rafId = null;
         }
 
+        if (this._timeoutId !== null) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = null;
+        }
+
         // Backward compatibility: if any per-turtle RAF ids were stored, cancel them too.
         for (const id of Object.values(this.drawVisualIDs || {})) {
             if (id !== null && id !== undefined) {
@@ -123,9 +133,55 @@ class Oscilloscope {
         this.draw();
     }
 
+    _throttle() {
+        if (!this._running) return;
+
+        // Cancel any active RAF
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+
+        // Enter idle mode
+        this._isIdle = true;
+
+        // Start timeout scheduler if not already running
+        if (this._timeoutId === null) {
+            this._timeoutId = setTimeout(this.draw, 1000);
+        }
+    }
+
+    _wakeUp() {
+        if (!this._running) return;
+
+        // Cancel any active timeout
+        if (this._timeoutId !== null) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = null;
+        }
+
+        // Exit idle mode
+        this._isIdle = false;
+
+        // Restart RAF scheduler if not already running
+        if (this._rafId === null) {
+            this.draw();
+        }
+    }
+
+    _handleVisibilityChange() {
+        if (document.visibilityState === "visible") {
+            this._wakeUp();
+        } else {
+            this._throttle();
+        }
+    }
+
     close() {
         this._stopAnimation();
 
+        document.removeEventListener("visibilitychange", this._handleVisibilityChange);
+
         this.drawVisualIDs = {};
         this._canvasState = {};
         this.pitchAnalysers = {};
@@ -214,9 +270,22 @@ class Oscilloscope {
     draw() {
         if (!this._running) return;
 
+        // Render the current frame
         this._renderFrame();
 
-        this._rafId = requestAnimationFrame(this.draw);
+        // Schedule next frame based on idle state
+        if (
+            this._isIdle ||
+            (this.activity && this.activity.isAppIdle) ||
+            document.visibilityState === "hidden" ||
+            this.widgetWindow._rolled
+        ) {
+            // Use setTimeout for idle mode (1 FPS)
+            this._timeoutId = setTimeout(this.draw, 1000);
+        } else {
+            // Use RAF for active mode (~60 FPS)
+            this._rafId = requestAnimationFrame(this.draw);
+        }
     }
 
     /* ---------------- Resize ---------------- */