@stream-io/video-client 1.12.3 → 1.12.4

package/dist/src/Call.d.ts

@@ -540,6 +540,10 @@ export declare class Call {
      * Applicable only for ringing calls.
      */
     private scheduleAutoDrop;
+    /**
+     * Cancels a scheduled auto-drop timeout.
+     */
+    private cancelAutoDrop;
     /**
      * Retrieves the list of recordings for the current call or call session.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -13,7 +13,7 @@
     "start": "rollup -w -c",
     "build": "yarn clean && rollup -c",
     "test": "vitest",
-    "test-ci": "vitest --coverage",
+    "test-ci": "vitest run --coverage",
     "generate:open-api": "./generate-openapi.sh protocol",
     "generate:open-api:dev": "./generate-openapi.sh chat",
     "generate:timer-worker": "./generate-timer-worker.sh"
@@ -45,7 +45,7 @@
     "@stream-io/node-sdk": "^0.4.3",
     "@types/sdp-transform": "^2.4.7",
     "@types/ua-parser-js": "^0.7.37",
-    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "dotenv": "^16.3.1",
     "happy-dom": "^11.0.2",
     "prettier": "^3.3.2",
@@ -53,7 +53,7 @@
     "rollup": "^4.22.0",
     "typescript": "^5.5.2",
     "vite": "^5.4.6",
-    "vitest": "^2.1.4",
+    "vitest": "^2.1.8",
     "vitest-mock-extended": "^2.0.2"
   }
 }

package/src/Call.ts

@@ -342,16 +342,18 @@ export class Call {
     );
 
     this.leaveCallHooks.add(
-      // watch for auto drop cancellation
-      createSubscription(this.state.callingState$, (callingState) => {
+      // cancel auto-drop when call is
+      createSubscription(this.state.session$, (session) => {
         if (!this.ringing) return;
-        if (
-          callingState === CallingState.JOINED ||
-          callingState === CallingState.JOINING ||
-          callingState === CallingState.LEFT
-        ) {
-          clearTimeout(this.dropTimeout);
-          this.dropTimeout = undefined;
+
+        const receiverId = this.clientStore.connectedUser?.id;
+        if (!receiverId) return;
+
+        const isAcceptedByMe = Boolean(session?.accepted_by[receiverId]);
+        const isRejectedByMe = Boolean(session?.rejected_by[receiverId]);
+
+        if (isAcceptedByMe || isRejectedByMe) {
+          this.cancelAutoDrop();
         }
       }),
     );
@@ -2004,28 +2006,36 @@ export class Call {
    * Applicable only for ringing calls.
    */
   private scheduleAutoDrop = () => {
-    clearTimeout(this.dropTimeout);
-    this.leaveCallHooks.add(
-      createSubscription(this.state.settings$, (settings) => {
-        if (!settings) return;
-        // ignore if the call is not ringing
-        if (this.state.callingState !== CallingState.RINGING) return;
-
-        const timeoutInMs = this.isCreatedByMe
-          ? settings.ring.auto_cancel_timeout_ms
-          : settings.ring.incoming_call_timeout_ms;
-
-        // 0 means no auto-drop
-        if (timeoutInMs <= 0) return;
+    this.cancelAutoDrop();
+
+    const settings = this.state.settings;
+    if (!settings) return;
+    // ignore if the call is not ringing
+    if (this.state.callingState !== CallingState.RINGING) return;
+
+    const timeoutInMs = this.isCreatedByMe
+      ? settings.ring.auto_cancel_timeout_ms
+      : settings.ring.incoming_call_timeout_ms;
+
+    // 0 means no auto-drop
+    if (timeoutInMs <= 0) return;
+
+    this.dropTimeout = setTimeout(() => {
+      // the call might have stopped ringing by this point,
+      // e.g. it was already accepted and joined
+      if (this.state.callingState !== CallingState.RINGING) return;
+      this.leave({ reject: true, reason: 'timeout' }).catch((err) => {
+        this.logger('error', 'Failed to drop call', err);
+      });
+    }, timeoutInMs);
+  };
 
-        clearTimeout(this.dropTimeout);
-        this.dropTimeout = setTimeout(() => {
-          this.leave({ reject: true, reason: 'timeout' }).catch((err) => {
-            this.logger('error', 'Failed to drop call', err);
-          });
-        }, timeoutInMs);
-      }),
-    );
+  /**
+   * Cancels a scheduled auto-drop timeout.
+   */
+  private cancelAutoDrop = () => {
+    clearTimeout(this.dropTimeout);
+    this.dropTimeout = undefined;
   };
 
   /**

package/src/helpers/DynascaleManager.ts

@@ -371,11 +371,14 @@ export class DynascaleManager {
               });
             });
 
-    let lastDimensions: string | undefined;
+    let lastDimensions: VideoDimension | undefined;
     const resizeObserver = boundParticipant.isLocalParticipant
       ? null
       : new ResizeObserver(() => {
-          const currentDimensions = `${videoElement.clientWidth},${videoElement.clientHeight}`;
+          const currentDimensions = {
+            width: videoElement.clientWidth,
+            height: videoElement.clientHeight,
+          };
 
           // skip initial trigger
           if (!lastDimensions) {
@@ -384,13 +387,24 @@ export class DynascaleManager {
           }
 
           if (
-            lastDimensions === currentDimensions ||
+            (lastDimensions.width === currentDimensions.width &&
+              lastDimensions.height === currentDimensions.height) ||
             viewportVisibilityState === VisibilityState.INVISIBLE
           ) {
             return;
           }
 
-          requestTrackWithDimensions(DebounceType.SLOW, {
+          const relativeDelta = Math.max(
+            currentDimensions.width / lastDimensions.width,
+            currentDimensions.height / lastDimensions.height,
+          );
+          // Low quality video in an upscaled video element is very noticable.
+          // We try to upscale faster, and downscale slower. We also update debounce
+          // more if the size change is not significant, gurading against fast-firing
+          // resize events.
+          const debounceType =
+            relativeDelta > 1.2 ? DebounceType.IMMEDIATE : DebounceType.MEDIUM;
+          requestTrackWithDimensions(debounceType, {
             width: videoElement.clientWidth,
             height: videoElement.clientHeight,
           });
@@ -413,7 +427,7 @@ export class DynascaleManager {
           .subscribe((isPublishing) => {
             if (isPublishing) {
               // the participant just started to publish a track
-              requestTrackWithDimensions(DebounceType.FAST, {
+              requestTrackWithDimensions(DebounceType.IMMEDIATE, {
                 width: videoElement.clientWidth,
                 height: videoElement.clientHeight,
               });