@stream-io/video-client 1.11.11 → 1.11.13

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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)
+
+
+### Bug Fixes
+
+* handle timeout on SFU WS connections ([#1600](https://github.com/GetStream/stream-video-js/issues/1600)) ([5f2db7b](https://github.com/GetStream/stream-video-js/commit/5f2db7bd5cfdf57cdc04d6a6ed752f43e5b06657))
+
 ## [1.11.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.11.10...@stream-io/video-client-1.11.11) (2024-11-29)
 
 

package/dist/index.browser.es.js

@@ -3297,7 +3297,7 @@ const retryable = async (rpc, signal) => {
     return result;
 };
 
-const version = "1.11.11";
+const version = "1.11.13";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6374,6 +6374,32 @@ const createWebSocketSignalChannel = (opts) => {
     return ws;
 };
 
+/**
+ * Saving a long-lived reference to a promise that can reject can be unsafe,
+ * since rejecting the promise causes an unhandled rejection error (even if the
+ * rejection is handled everywhere promise result is expected).
+ *
+ * To avoid that, we add both resolution and rejection handlers to the promise.
+ * That way, the saved promise never rejects. A callback is provided as return
+ * value to build a *new* promise, that resolves and rejects along with
+ * the original promise.
+ * @param promise Promise to wrap, which possibly rejects
+ * @returns Callback to build a new promise, which resolves and rejects along
+ * with the original promise
+ */
+function makeSafePromise(promise) {
+    let isPending = true;
+    const safePromise = promise
+        .then((result) => ({ status: 'resolved', result }), (error) => ({ status: 'rejected', error }))
+        .finally(() => (isPending = false));
+    const unwrapPromise = () => safePromise.then((fulfillment) => {
+        if (fulfillment.status === 'rejected')
+            throw fulfillment.error;
+        return fulfillment.result;
+    });
+    unwrapPromise.checkPending = () => isPending;
+    return unwrapPromise;
+}
 /**
  * Creates a new promise with resolvers.
  *
@@ -6406,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.
  */
@@ -6426,7 +6597,6 @@ class StreamSfuClient {
         this.isLeaving = false;
         this.pingIntervalInMs = 10 * 1000;
         this.unhealthyTimeoutInMs = this.pingIntervalInMs + 5 * 1000;
-        this.restoreWebSocketConcurrencyTag = Symbol('recoverWebSocket');
         /**
          * Promise that resolves when the JoinResponse is received.
          * Rejects after a certain threshold if the response is not received.
@@ -6447,31 +6617,25 @@ class StreamSfuClient {
                 },
             });
             this.signalWs.addEventListener('close', this.handleWebSocketClose);
-            this.signalWs.addEventListener('error', this.restoreWebSocket);
-            this.signalReady = new Promise((resolve) => {
-                const onOpen = () => {
-                    this.signalWs.removeEventListener('open', onOpen);
-                    resolve(this.signalWs);
-                };
-                this.signalWs.addEventListener('open', onOpen);
-            });
+            this.signalReady = makeSafePromise(Promise.race([
+                new Promise((resolve) => {
+                    const onOpen = () => {
+                        this.signalWs.removeEventListener('open', onOpen);
+                        resolve(this.signalWs);
+                    };
+                    this.signalWs.addEventListener('open', onOpen);
+                }),
+                new Promise((resolve, reject) => {
+                    setTimeout(() => reject(new Error('SFU WS connection timed out')), this.joinResponseTimeout);
+                }),
+            ]));
         };
         this.cleanUpWebSocket = () => {
-            this.signalWs.removeEventListener('error', this.restoreWebSocket);
             this.signalWs.removeEventListener('close', this.handleWebSocketClose);
         };
-        this.restoreWebSocket = () => {
-            withoutConcurrency(this.restoreWebSocketConcurrencyTag, async () => {
-                await this.networkAvailableTask?.promise;
-                this.logger('debug', 'Restoring SFU WS connection');
-                this.cleanUpWebSocket();
-                await sleep(500);
-                this.createWebSocket();
-            }).catch((err) => this.logger('debug', `Can't restore WS connection`, err));
-        };
         this.handleWebSocketClose = () => {
             this.signalWs.removeEventListener('close', this.handleWebSocketClose);
-            clearInterval(this.keepAliveInterval);
+            getTimers().clearInterval(this.keepAliveInterval);
             clearTimeout(this.connectionCheckTimeout);
             this.onSignalClose?.();
         };
@@ -6562,7 +6726,7 @@ class StreamSfuClient {
         };
         this.join = async (data) => {
             // wait for the signal web socket to be ready before sending "joinRequest"
-            await this.signalReady;
+            await this.signalReady();
             if (this.joinResponseTask.isResolved || this.joinResponseTask.isRejected) {
                 // we need to lock the RPC requests until we receive a JoinResponse.
                 // that's why we have this primitive lock mechanism.
@@ -6617,7 +6781,7 @@ class StreamSfuClient {
             }));
         };
         this.send = async (message) => {
-            await this.signalReady; // wait for the signal ws to be open
+            await this.signalReady(); // wait for the signal ws to be open
             const msgJson = SfuRequest.toJson(message);
             if (this.signalWs.readyState !== WebSocket.OPEN) {
                 this.logger('debug', 'Signal WS is not open. Skipping message', msgJson);
@@ -6627,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);
                 });
@@ -8209,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.
@@ -9834,6 +9985,7 @@ class Call {
         this.reconnectAttempts = 0;
         this.reconnectStrategy = WebsocketReconnectStrategy.UNSPECIFIED;
         this.fastReconnectDeadlineSeconds = 0;
+        this.disconnectionTimeoutSeconds = 0;
         this.lastOfflineTimestamp = 0;
         // maintain the order of publishing tracks to restore them after a reconnection
         // it shouldn't contain duplicates
@@ -10350,6 +10502,10 @@ class Call {
          */
         this.handleSfuSignalClose = (sfuClient) => {
             this.logger('debug', '[Reconnect] SFU signal connection closed');
+            // SFU WS closed before we finished current join, no need to schedule reconnect
+            // because join operation will fail
+            if (this.state.callingState === CallingState.JOINING)
+                return;
             // normal close, no need to reconnect
             if (sfuClient.isLeaving)
                 return;
@@ -10365,10 +10521,21 @@ class Call {
          * @param strategy the reconnection strategy to use.
          */
         this.reconnect = async (strategy) => {
+            if (this.state.callingState === CallingState.RECONNECTING ||
+                this.state.callingState === CallingState.RECONNECTING_FAILED)
+                return;
             return withoutConcurrency(this.reconnectConcurrencyTag, async () => {
                 this.logger('info', `[Reconnect] Reconnecting with strategy ${WebsocketReconnectStrategy[strategy]}`);
+                let reconnectStartTime = Date.now();
                 this.reconnectStrategy = strategy;
                 do {
+                    if (this.disconnectionTimeoutSeconds > 0 &&
+                        (Date.now() - reconnectStartTime) / 1000 >
+                            this.disconnectionTimeoutSeconds) {
+                        this.logger('warn', '[Reconnect] Stopping reconnection attempts after reaching disconnection timeout');
+                        this.state.setCallingState(CallingState.RECONNECTING_FAILED);
+                        return;
+                    }
                     // we don't increment reconnect attempts for the FAST strategy.
                     if (this.reconnectStrategy !== WebsocketReconnectStrategy.FAST) {
                         this.reconnectAttempts++;
@@ -10468,7 +10635,7 @@ class Call {
             const currentPublisher = this.publisher;
             currentSubscriber?.detachEventHandlers();
             currentPublisher?.detachEventHandlers();
-            const migrationTask = currentSfuClient.enterMigration();
+            const migrationTask = makeSafePromise(currentSfuClient.enterMigration());
             try {
                 const currentSfu = currentSfuClient.edgeName;
                 await this.join({ ...this.joinCallData, migrating_from: currentSfu });
@@ -10484,7 +10651,7 @@ class Call {
                 // Wait for the migration to complete, then close the previous SFU client
                 // and the peer connection instances. In case of failure, the migration
                 // task would throw an error and REJOIN would be attempted.
-                await migrationTask;
+                await migrationTask();
                 // in MIGRATE, we can consider the call as joined only after
                 // `participantMigrationComplete` event is received, signaled by
                 // the `migrationTask`
@@ -11340,6 +11507,14 @@ class Call {
             this.dynascaleManager.setVideoTrackSubscriptionOverrides(enabled ? undefined : { enabled: false });
             this.dynascaleManager.applyTrackSubscriptions();
         };
+        /**
+         * Sets the maximum amount of time a user can remain waiting for a reconnect
+         * after a network disruption
+         * @param timeoutSeconds Timeout in seconds, or 0 to keep reconnecting indefinetely
+         */
+        this.setDisconnectionTimeout = (timeoutSeconds) => {
+            this.disconnectionTimeoutSeconds = timeoutSeconds;
+        };
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -11495,33 +11670,6 @@ class Call {
 
 var https = null;
 
-/**
- * Saving a long-lived reference to a promise that can reject can be unsafe,
- * since rejecting the promise causes an unhandled rejection error (even if the
- * rejection is handled everywhere promise result is expected).
- *
- * To avoid that, we add both resolution and rejection handlers to the promise.
- * That way, the saved promise never rejects. A callback is provided as return
- * value to build a *new* promise, that resolves and rejects along with
- * the original promise.
- * @param promise Promise to wrap, which possibly rejects
- * @returns Callback to build a new promise, which resolves and rejects along
- * with the original promise
- */
-function makeSafePromise(promise) {
-    let isPending = true;
-    const safePromise = promise
-        .then((result) => ({ status: 'resolved', result }), (error) => ({ status: 'rejected', error }))
-        .finally(() => (isPending = false));
-    const unwrapPromise = () => safePromise.then((fulfillment) => {
-        if (fulfillment.status === 'rejected')
-            throw fulfillment.error;
-        return fulfillment.result;
-    });
-    unwrapPromise.checkPending = () => isPending;
-    return unwrapPromise;
-}
-
 /**
  * StableWSConnection - A WS connection that reconnects upon failure.
  * - the browser will sometimes report that you're online or offline
@@ -11774,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
@@ -11919,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;
@@ -12620,7 +12775,7 @@ class StreamClient {
             return await this.wsConnection.connect(this.defaultWSTimeout);
         };
         this.getUserAgent = () => {
-            const version = "1.11.11";
+            const version = "1.11.13";
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -13031,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']);