@stream-io/video-client 1.11.12 → 1.11.13

package/dist/src/coordinator/connection/connection.d.ts

@@ -23,7 +23,7 @@ export declare class StableWSConnection {
     private connectionOpenSafe?;
     consecutiveFailures: number;
     pingInterval: number;
-    healthCheckTimeoutRef?: NodeJS.Timeout;
+    healthCheckTimeoutRef?: number;
     isConnecting: boolean;
     isDisconnected: boolean;
     isHealthy: boolean;

package/dist/src/coordinator/connection/types.d.ts

@@ -119,6 +119,11 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
      * In Node.js environment, you can use the `ws` package.
      */
     WebSocketImpl?: typeof WebSocket;
+    /**
+     * Create Web Worker to initiate timer events like health checks. Can possibly prevent
+     * timer throttling issues in inactive browser tabs.
+     */
+    expertimental_enableTimerWorker?: boolean;
 };
 export type TokenProvider = () => Promise<string>;
 export type TokenOrProvider = null | string | TokenProvider | undefined;

package/dist/src/timers/index.d.ts

@@ -0,0 +1,22 @@
+declare class TimerWorker {
+    private currentTimerId;
+    private callbacks;
+    private worker;
+    private fallback;
+    setup({ useTimerWorker }?: {
+        useTimerWorker?: boolean;
+    }): void;
+    destroy(): void;
+    get ready(): boolean;
+    setInterval(callback: () => void, timeout: number): number;
+    clearInterval(id?: number): void;
+    setTimeout(callback: () => void, timeout: number): number;
+    clearTimeout(id?: number): void;
+    private setTimer;
+    private clearTimer;
+    private getTimerId;
+    private sendMessage;
+}
+export declare const enableTimerWorker: () => void;
+export declare const getTimers: () => TimerWorker;
+export {};

package/dist/src/timers/types.d.ts

@@ -0,0 +1,12 @@
+export type TimerWorkerRequest = {
+    type: 'setInterval' | 'setTimeout';
+    id: number;
+    timeout: number;
+} | {
+    type: 'clearInterval' | 'clearTimeout';
+    id: number;
+};
+export type TimerWorkerEvent = {
+    type: 'tick';
+    id: number;
+};

package/dist/src/timers/worker.build.d.ts

@@ -0,0 +1,3 @@
+export declare const timerWorker: {
+    src: string;
+};

package/dist/src/timers/worker.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.11.12",
+  "version": "1.11.13",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -11,12 +11,13 @@
   "scripts": {
     "clean": "rimraf dist",
     "start": "rollup -w -c",
-    "build": "yarn clean && rollup -c",
+    "build": "yarn clean && ./generate-timer-worker.sh && rollup -c",
     "test": "vitest",
     "clean:docs": "rimraf generated-docs",
     "test-ci": "vitest --coverage",
     "generate:open-api": "./generate-openapi.sh protocol",
-    "generate:open-api:dev": "./generate-openapi.sh chat"
+    "generate:open-api:dev": "./generate-openapi.sh chat",
+    "generate:timer-worker": "./generate-timer-worker.sh"
   },
   "files": [
     "dist",

package/src/StreamSfuClient.ts

@@ -35,6 +35,7 @@ import {
   makeSafePromise,
   SafePromise,
 } from './helpers/promise';
+import { getTimers } from './timers';
 
 export type StreamSfuClientConstructor = {
   /**
@@ -111,7 +112,7 @@ export class StreamSfuClient {
   isLeaving = false;
 
   private readonly rpc: SignalServerClient;
-  private keepAliveInterval?: NodeJS.Timeout;
+  private keepAliveInterval?: number;
   private connectionCheckTimeout?: NodeJS.Timeout;
   private migrateAwayTimeout?: NodeJS.Timeout;
   private pingIntervalInMs = 10 * 1000;
@@ -262,7 +263,7 @@ export class StreamSfuClient {
 
   private handleWebSocketClose = () => {
     this.signalWs.removeEventListener('close', this.handleWebSocketClose);
-    clearInterval(this.keepAliveInterval);
+    getTimers().clearInterval(this.keepAliveInterval);
     clearTimeout(this.connectionCheckTimeout);
     this.onSignalClose?.();
   };
@@ -488,8 +489,9 @@ export class StreamSfuClient {
   };
 
   private 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);
       });

package/src/StreamVideoClient.ts

@@ -31,6 +31,7 @@ import { getLogger, logToConsole, setLogger } from './logger';
 import { getSdkInfo } from './client-details';
 import { SdkType } from './gen/video/sfu/models/models';
 import { withoutConcurrency } from './helpers/concurrency';
+import { enableTimerWorker } from './timers';
 
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
@@ -86,9 +87,12 @@ export 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);

package/src/coordinator/connection/connection.ts

@@ -15,6 +15,7 @@ import type {
   WSAuthMessage,
 } from '../../gen/coordinator';
 import { makeSafePromise, type SafePromise } from '../../helpers/promise';
+import { getTimers } from '../../timers';
 
 /**
  * StableWSConnection - A WS connection that reconnects upon failure.
@@ -39,7 +40,7 @@ export class StableWSConnection {
   private connectionOpenSafe?: SafePromise<ConnectedEvent>;
   consecutiveFailures: number;
   pingInterval: number;
-  healthCheckTimeoutRef?: NodeJS.Timeout;
+  healthCheckTimeoutRef?: number;
   isConnecting: boolean;
   isDisconnected: boolean;
   isHealthy: boolean;
@@ -224,8 +225,12 @@ export class StableWSConnection {
     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);
 
@@ -689,9 +694,13 @@ export class StableWSConnection {
    * Schedules a next health check ping for websocket.
    */
   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

package/src/coordinator/connection/types.ts

@@ -146,6 +146,12 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
    * In Node.js environment, you can use the `ws` package.
    */
   WebSocketImpl?: typeof WebSocket;
+
+  /**
+   * Create Web Worker to initiate timer events like health checks. Can possibly prevent
+   * timer throttling issues in inactive browser tabs.
+   */
+  expertimental_enableTimerWorker?: boolean;
 };
 
 export type TokenProvider = () => Promise<string>;

package/src/timers/index.ts

@@ -0,0 +1,137 @@
+import { lazy } from '../helpers/lazy';
+import { getLogger } from '../logger';
+import { TimerWorkerEvent, TimerWorkerRequest } from './types';
+import { timerWorker } from './worker.build';
+
+class TimerWorker {
+  private currentTimerId = 1;
+  private callbacks = new Map<number, () => void>();
+  private worker: Worker | undefined;
+  private fallback = false;
+
+  setup({ useTimerWorker = true }: { useTimerWorker?: boolean } = {}): void {
+    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 as TimerWorkerEvent;
+        if (type === 'tick') {
+          this.callbacks.get(id)?.();
+        }
+      });
+    } catch (err: any) {
+      getLogger(['timer-worker'])('error', err);
+      this.fallback = true;
+    }
+  }
+
+  destroy(): void {
+    this.callbacks.clear();
+    this.worker?.terminate();
+    this.worker = undefined;
+    this.fallback = false;
+  }
+
+  get ready() {
+    return this.fallback || Boolean(this.worker);
+  }
+
+  setInterval(callback: () => void, timeout: number): number {
+    return this.setTimer('setInterval', callback, timeout);
+  }
+
+  clearInterval(id?: number): void {
+    this.clearTimer('clearInterval', id);
+  }
+
+  setTimeout(callback: () => void, timeout: number): number {
+    return this.setTimer('setTimeout', callback, timeout);
+  }
+
+  clearTimeout(id?: number): void {
+    this.clearTimer('clearTimeout', id);
+  }
+
+  private setTimer(
+    type: 'setTimeout' | 'setInterval',
+    callback: () => void,
+    timeout: number,
+  ) {
+    if (!this.ready) {
+      this.setup();
+    }
+
+    if (this.fallback) {
+      return (type === 'setTimeout' ? setTimeout : setInterval)(
+        callback,
+        timeout,
+      ) as unknown as number;
+    }
+
+    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;
+  }
+
+  private clearTimer(type: 'clearTimeout' | 'clearInterval', id?: number) {
+    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 });
+  }
+
+  private getTimerId() {
+    return this.currentTimerId++;
+  }
+
+  private sendMessage(message: TimerWorkerRequest) {
+    if (!this.worker) {
+      throw new Error("Cannot use timer worker before it's set up");
+    }
+
+    this.worker.postMessage(message);
+  }
+}
+
+let timerWorkerEnabled = false;
+
+export const enableTimerWorker = () => {
+  timerWorkerEnabled = true;
+};
+
+export const getTimers = lazy(() => {
+  const instance = new TimerWorker();
+  instance.setup({ useTimerWorker: timerWorkerEnabled });
+  return instance;
+});

package/src/timers/types.ts

@@ -0,0 +1,15 @@
+export type TimerWorkerRequest =
+  | {
+      type: 'setInterval' | 'setTimeout';
+      id: number;
+      timeout: number;
+    }
+  | {
+      type: 'clearInterval' | 'clearTimeout';
+      id: number;
+    };
+
+export type TimerWorkerEvent = {
+  type: 'tick';
+  id: number;
+};

package/src/timers/worker.build.ts

@@ -0,0 +1,26 @@
+export 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);
+}`,
+};

package/src/timers/worker.ts

@@ -0,0 +1,40 @@
+/* eslint-disable */
+
+import type { TimerWorkerEvent, TimerWorkerRequest } from './types';
+
+const timerIdMapping = new Map<number, NodeJS.Timeout>();
+
+self.addEventListener('message', (event: MessageEvent) => {
+  const request = event.data as TimerWorkerRequest;
+
+  switch (request.type) {
+    case 'setTimeout':
+    case 'setInterval':
+      timerIdMapping.set(
+        request.id,
+        (request.type === 'setTimeout' ? setTimeout : setInterval)(() => {
+          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: number) {
+  const message: TimerWorkerEvent = { type: 'tick', id };
+  self.postMessage(message);
+}
+
+/* eslint-enable */