@stream-io/video-client 1.11.12 → 1.11.13

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.11.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.11.12...@stream-io/video-client-1.11.13) (2024-12-03)
+
+
+### Bug Fixes
+
+* use worker to prevent timer throttling ([#1557](https://github.com/GetStream/stream-video-js/issues/1557)) ([c11c3ca](https://github.com/GetStream/stream-video-js/commit/c11c3caf455787fe531c83601bad71e7a0a0e9b9))
+
 ## [1.11.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.11.11...@stream-io/video-client-1.11.12) (2024-12-03)
 
 

package/dist/index.browser.es.js

@@ -3297,7 +3297,7 @@ const retryable = async (rpc, signal) => {
     return result;
 };
 
-const version = "1.11.12";
+const version = "1.11.13";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6432,6 +6432,151 @@ const promiseWithResolvers = () => {
     };
 };
 
+const uninitialized = Symbol('uninitialized');
+/**
+ * Lazily creates a value using a provided factory
+ */
+function lazy(factory) {
+    let value = uninitialized;
+    return () => {
+        if (value === uninitialized) {
+            value = factory();
+        }
+        return value;
+    };
+}
+
+const timerWorker = {
+    src: `var timerIdMapping = new Map();
+self.addEventListener('message', function (event) {
+    var request = event.data;
+    switch (request.type) {
+        case 'setTimeout':
+        case 'setInterval':
+            timerIdMapping.set(request.id, (request.type === 'setTimeout' ? setTimeout : setInterval)(function () {
+                tick(request.id);
+                if (request.type === 'setTimeout') {
+                    timerIdMapping.delete(request.id);
+                }
+            }, request.timeout));
+            break;
+        case 'clearTimeout':
+        case 'clearInterval':
+            (request.type === 'clearTimeout' ? clearTimeout : clearInterval)(timerIdMapping.get(request.id));
+            timerIdMapping.delete(request.id);
+            break;
+    }
+});
+function tick(id) {
+    var message = { type: 'tick', id: id };
+    self.postMessage(message);
+}`,
+};
+
+class TimerWorker {
+    constructor() {
+        this.currentTimerId = 1;
+        this.callbacks = new Map();
+        this.fallback = false;
+    }
+    setup({ useTimerWorker = true } = {}) {
+        if (!useTimerWorker) {
+            this.fallback = true;
+            return;
+        }
+        try {
+            const source = timerWorker.src;
+            const blob = new Blob([source], {
+                type: 'application/javascript; charset=utf-8',
+            });
+            const script = URL.createObjectURL(blob);
+            this.worker = new Worker(script, { name: 'str-timer-worker' });
+            this.worker.addEventListener('message', (event) => {
+                const { type, id } = event.data;
+                if (type === 'tick') {
+                    this.callbacks.get(id)?.();
+                }
+            });
+        }
+        catch (err) {
+            getLogger(['timer-worker'])('error', err);
+            this.fallback = true;
+        }
+    }
+    destroy() {
+        this.callbacks.clear();
+        this.worker?.terminate();
+        this.worker = undefined;
+        this.fallback = false;
+    }
+    get ready() {
+        return this.fallback || Boolean(this.worker);
+    }
+    setInterval(callback, timeout) {
+        return this.setTimer('setInterval', callback, timeout);
+    }
+    clearInterval(id) {
+        this.clearTimer('clearInterval', id);
+    }
+    setTimeout(callback, timeout) {
+        return this.setTimer('setTimeout', callback, timeout);
+    }
+    clearTimeout(id) {
+        this.clearTimer('clearTimeout', id);
+    }
+    setTimer(type, callback, timeout) {
+        if (!this.ready) {
+            this.setup();
+        }
+        if (this.fallback) {
+            return (type === 'setTimeout' ? setTimeout : setInterval)(callback, timeout);
+        }
+        const id = this.getTimerId();
+        this.callbacks.set(id, () => {
+            callback();
+            // Timeouts are one-off operations, so no need to keep callback reference
+            // after timer has fired
+            if (type === 'setTimeout') {
+                this.callbacks.delete(id);
+            }
+        });
+        this.sendMessage({ type, id, timeout });
+        return id;
+    }
+    clearTimer(type, id) {
+        if (!id) {
+            return;
+        }
+        if (!this.ready) {
+            this.setup();
+        }
+        if (this.fallback) {
+            (type === 'clearTimeout' ? clearTimeout : clearInterval)(id);
+            return;
+        }
+        this.callbacks.delete(id);
+        this.sendMessage({ type, id });
+    }
+    getTimerId() {
+        return this.currentTimerId++;
+    }
+    sendMessage(message) {
+        if (!this.worker) {
+            throw new Error("Cannot use timer worker before it's set up");
+        }
+        this.worker.postMessage(message);
+    }
+}
+let timerWorkerEnabled = false;
+const enableTimerWorker = () => {
+    timerWorkerEnabled = true;
+};
+const getTimers = lazy(() => {
+    const instance = new TimerWorker();
+    instance.setup({ useTimerWorker: timerWorkerEnabled });
+    return instance;
+});
+
 /**
  * The client used for exchanging information with the SFU.
  */
@@ -6490,7 +6635,7 @@ class StreamSfuClient {
         };
         this.handleWebSocketClose = () => {
             this.signalWs.removeEventListener('close', this.handleWebSocketClose);
-            clearInterval(this.keepAliveInterval);
+            getTimers().clearInterval(this.keepAliveInterval);
             clearTimeout(this.connectionCheckTimeout);
             this.onSignalClose?.();
         };
@@ -6646,8 +6791,9 @@ class StreamSfuClient {
             this.signalWs.send(SfuRequest.toBinary(message));
         };
         this.keepAlive = () => {
-            clearInterval(this.keepAliveInterval);
-            this.keepAliveInterval = setInterval(() => {
+            const timers = getTimers();
+            timers.clearInterval(this.keepAliveInterval);
+            this.keepAliveInterval = timers.setInterval(() => {
                 this.ping().catch((e) => {
                     this.logger('error', 'Error sending healthCheckRequest to SFU', e);
                 });
@@ -8228,20 +8374,6 @@ function canQueryPermissions() {
         !!navigator.permissions?.query);
 }
 
-const uninitialized = Symbol('uninitialized');
-/**
- * Lazily creates a value using a provided factory
- */
-function lazy(factory) {
-    let value = uninitialized;
-    return () => {
-        if (value === uninitialized) {
-            value = factory();
-        }
-        return value;
-    };
-}
-
 /**
  * Returns an Observable that emits the list of available devices
  * that meet the given constraints.
@@ -11790,9 +11922,12 @@ class StableWSConnection {
          * Schedules a next health check ping for websocket.
          */
         this.scheduleNextPing = () => {
+            const timers = getTimers();
+            if (this.healthCheckTimeoutRef) {
+                timers.clearTimeout(this.healthCheckTimeoutRef);
+            }
             // 30 seconds is the recommended interval (messenger uses this)
-            clearTimeout(this.healthCheckTimeoutRef);
-            this.healthCheckTimeoutRef = setTimeout(() => {
+            this.healthCheckTimeoutRef = timers.setTimeout(() => {
                 // send the healthcheck..., server replies with a health check event
                 const data = [{ type: 'health.check', client_id: this.client.clientID }];
                 // try to send on the connection
@@ -11935,8 +12070,12 @@ class StableWSConnection {
         this.isConnecting = false;
         this.isDisconnected = true;
         // start by removing all the listeners
-        clearInterval(this.healthCheckTimeoutRef);
-        clearInterval(this.connectionCheckTimeoutRef);
+        if (this.healthCheckTimeoutRef) {
+            getTimers().clearInterval(this.healthCheckTimeoutRef);
+        }
+        if (this.connectionCheckTimeoutRef) {
+            clearInterval(this.connectionCheckTimeoutRef);
+        }
         removeConnectionEventListeners(this.onlineStatusChanged);
         this.isHealthy = false;
         let isClosedPromise;
@@ -12636,7 +12775,7 @@ class StreamClient {
             return await this.wsConnection.connect(this.defaultWSTimeout);
         };
         this.getUserAgent = () => {
-            const version = "1.11.12";
+            const version = "1.11.13";
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -13047,10 +13186,14 @@ class StreamVideoClient {
         if (typeof apiKeyOrArgs === 'string') {
             logLevel = opts?.logLevel || logLevel;
             logger = opts?.logger || logger;
+            if (opts?.expertimental_enableTimerWorker)
+                enableTimerWorker();
         }
         else {
             logLevel = apiKeyOrArgs.options?.logLevel || logLevel;
             logger = apiKeyOrArgs.options?.logger || logger;
+            if (apiKeyOrArgs.options?.expertimental_enableTimerWorker)
+                enableTimerWorker();
         }
         setLogger(logger, logLevel);
         this.logger = getLogger(['client']);