senza-sdk 4.4.4 → 4.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "senza-sdk",
-    "version": "4.4.4",
+    "version": "4.4.6",
     "main": "./src/api.js",
     "description": "API for Senza application",
     "license": "MIT",
@@ -23,17 +23,18 @@
         "version:output": "echo 'export const version = \"'$npm_package_version'\";' > src/interface/version.js"
     },
     "devDependencies": {
-        "@babel/cli": "^7.13.16",
-        "@babel/core": "7.18.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-        "@babel/preset-env": "^7.14.1",
+        "@babel/cli": "^7.22.0",
+        "@babel/core": "^7.22.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.22.0",
+        "@babel/preset-env": "^7.22.0",
         "@eslint/eslintrc": "^3.3.0",
         "@eslint/js": "^9.22.0",
-        "babel-jest": "^27.5.1",
+        "babel-jest": "^30.2.0",
         "eslint": "^9.22.0",
         "eslint-plugin-jest": "^28.11.0",
         "globals": "^16.0.0",
-        "jest": "^27.5.1",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom" : "^30.2.0",
         "jsdoc-to-markdown": "^7.1.1",
         "webpack": "^5.72.1",
         "webpack-cli": "^5.1.4"

package/src/implementation/api.js

@@ -6,6 +6,7 @@ import { remotePlayer } from "./remotePlayer.js";
 import { deviceManager } from "./deviceManager.js";
 import { displayManager } from "./displayManager.js";
 import { messageManager } from "./messageManager.js";
+import { backgroundRenderControl } from "./backgroundRenderControl.js";
 
 export { remotePlayer };
 export { lifecycle };
@@ -141,6 +142,7 @@ export async function init(interfaceApiVersion, showSequenceFunc, initSequenceFu
         await remotePlayer._init(sessionInfoObj, triggerEvent);
         alarmManager._init();
         messageManager._init();
+        backgroundRenderControl._init();
         await displayManager._init();
         sdkLogger.log("All submodules initialized");
 

package/src/implementation/backgroundRenderControl.js

@@ -0,0 +1,113 @@
+import { lifecycle } from "./lifecycle.js";
+import { sdkLogger } from "./utils.js";
+import { sessionInfo } from "./SessionInfo";
+
+/**
+ * Internal background render control.
+ * Listens to lifecycle state changes and disables animation / video rendering when in background mode.
+ * Specifically it pauses CSS animations and hides video elements to reduce CPU/GPU load
+ *
+ * For remote-gpu deployments this reduces the CPU use in background mode from 6 cores to 0.4 cores.
+ *
+ * Extra CPU can be saved by also overriding requestAnimationFrame and slowing down time.
+ * This has the effect of ensuring the segments are downloaded at a slower pace
+ * - or not at all if you actually pause video, but these may have more complicated state and audio sync issues.
+ * Either way if you slow the decoding speed then we save more CPU by not doing as much SW video decoding,
+ * but the bulk is saved by the hidden video elements.
+ * See comments on https://jira01.engit.synamedia.com/browse/HSDEV-16827 for more about a PoC / spike that did this.
+ *
+ * As it stands, the current implementation that gets us 0.4 cores in background mode for remote-gpu is a good compromise of complexity vs benefit.
+ * It also roughly matches GPU mode background CPU use (maybe slightly better).
+ * GPU mode with this feature enabled (from my testing) saves about 0.15 cores ~0.45 -> ~0.30 cores
+ *
+ * This module uses the following settings:
+ * {
+ *   "ui-streamer": {
+ *     "throttleRenderingInBackground": {
+ *       "enabled": true,            // enable or disable the feature
+ *     }
+ *   }
+ * }
+ */
+class BackgroundRenderControl {
+
+    /** initialised
+     * @type {boolean}
+     * @private
+     * Whether the instance has been initialized.
+     */
+    _initialized = false;
+
+    /**
+     * @type {boolean}
+     * @private
+     * Whether render control is enabled.
+     */
+    _enabled = false;
+
+    /**
+     * @type {boolean}
+     * @private
+     * Whether rendering is currently active.
+     */
+    _active = true;
+
+    /** @type {string|null}
+     * @private
+     * Stores the last known lifecycle state.
+     */
+    _lastState = null;
+
+    /** @type {Function}
+     * @private
+     * Event listener for lifecycle state changes.
+     */
+    _listener = (e) => this._handleStateChange(e.state);
+
+    _init() {
+        if (this._initialized) return;
+        this._enabled = sessionInfo?.sessionInfoObj.settings?.["ui-streamer"]?.throttleRenderingInBackground?.enabled ?? false;
+        sdkLogger.log(`Initializing BackgroundRenderControl: enabled=${this._enabled}`);
+        if (!this._enabled) return;
+        this._lastState = lifecycle.state;
+        lifecycle.addEventListener("onstatechange", this._listener);
+        this._initialized = true;
+    }
+
+    _handleStateChange(state) {
+        if (!this._enabled) return;
+        if (state === this._lastState) return;
+        this._lastState = state;
+        try {
+            if (state === lifecycle.UiState.FOREGROUND) this._onForeground();
+            else if (state === lifecycle.UiState.BACKGROUND) this._onBackground();
+        } catch (err) {
+            sdkLogger.error("BackgroundRenderControl state handling error", err);
+        }
+    }
+
+    _onForeground() {
+        if (this._active) return;
+        sdkLogger.log("BackgroundRenderControl resume rendering");
+        this._active = true;
+        const style = document.getElementById("hs-sdk-bg-render-styles");
+        if (style) style.remove();
+    }
+
+    _onBackground() {
+        if (!this._active) return;
+        sdkLogger.log("BackgroundRenderControl throttle rendering");
+        this._active = false;
+        if (!document.getElementById("hs-sdk-bg-render-styles")) {
+            const style = document.createElement("style");
+            style.id = "hs-sdk-bg-render-styles";
+            style.textContent = `
+            * { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; }
+            canvas, video, img { visibility: hidden !important; }
+            `;
+            document.head.appendChild(style);
+        }
+    }
+}
+
+export const backgroundRenderControl = new BackgroundRenderControl();