@stream-io/video-client 0.3.20 → 0.3.21

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.20";
+export declare const version = "0.3.21";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/__tests__/server-side/call.test.ts

@@ -120,9 +120,9 @@ describe('call API', () => {
       response = await call.update({
         settings_override: {
           recording: {
-            mode: RecordSettingsRequestModeEnum.AVAILABLE,
             audio_only: false,
             quality: RecordSettingsRequestQualityEnum._1080P,
+            mode: RecordSettingsRequestModeEnum.AUTO_ON,
           },
         },
       });

package/src/helpers/DynascaleManager.ts

@@ -152,6 +152,14 @@ export class DynascaleManager {
       debounceType: DebounceType,
       dimension: VideoDimension | undefined,
     ) => {
+      if (dimension && (dimension.width === 0 || dimension.height === 0)) {
+        // ignore 0x0 dimensions. this can happen when the video element
+        // is not visible (e.g., has display: none).
+        // we treat this as "unsubscription" as we don't want to keep
+        // consuming bandwidth for a video that is not visible on the screen.
+        this.logger('debug', `Ignoring 0x0 dimension`, boundParticipant);
+        dimension = undefined;
+      }
       this.call.updateSubscriptionsPartial(
         trackType,
         { [sessionId]: { dimension } },
@@ -171,6 +179,12 @@ export class DynascaleManager {
       shareReplay(1),
     );
 
+    /**
+     * Since the video elements are now being removed from the DOM (React SDK) upon
+     * visibility change, this subscription is not in use an stays here only for the
+     * plain JS integrations where integrators might choose not to remove the video
+     * elements from the DOM.
+     */
     // keep copy for resize observer handler
     let viewportVisibilityState: VisibilityState | undefined;
     const viewportVisibilityStateSubscription =
@@ -231,6 +245,8 @@ export class DynascaleManager {
         });
     resizeObserver?.observe(videoElement);
 
+    // element renders and gets bound - track subscription gets
+    // triggered first other ones get skipped on initial subscriptions
     const publishedTracksSubscription = boundParticipant.isLocalParticipant
       ? null
       : participant$
@@ -248,13 +264,13 @@ export class DynascaleManager {
           .subscribe((isPublishing) => {
             if (isPublishing) {
               // the participant just started to publish a track
-              requestTrackWithDimensions(DebounceType.IMMEDIATE, {
+              requestTrackWithDimensions(DebounceType.FAST, {
                 width: videoElement.clientWidth,
                 height: videoElement.clientHeight,
               });
             } else {
               // the participant just stopped publishing a track
-              requestTrackWithDimensions(DebounceType.IMMEDIATE, undefined);
+              requestTrackWithDimensions(DebounceType.FAST, undefined);
             }
           });
 
@@ -286,7 +302,7 @@ export class DynascaleManager {
     videoElement.muted = true;
 
     return () => {
-      requestTrackWithDimensions(DebounceType.IMMEDIATE, undefined);
+      requestTrackWithDimensions(DebounceType.FAST, undefined);
       viewportVisibilityStateSubscription?.unsubscribe();
       publishedTracksSubscription?.unsubscribe();
       streamSubscription.unsubscribe();

package/src/helpers/__tests__/DynascaleManager.test.ts

@@ -4,7 +4,7 @@
 
 import '../../rtc/__tests__/mocks/webrtc.mocks';
 
-import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { DynascaleManager } from '../DynascaleManager';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
@@ -195,7 +195,7 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
 
       call.state.updateParticipant('session-id', {
@@ -212,7 +212,7 @@ describe('DynascaleManager', () => {
             },
           },
         },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
 
       call.state.updateParticipant('session-id', {
@@ -222,7 +222,7 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
 
       cleanup?.();
@@ -230,7 +230,7 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
     });
 
@@ -271,7 +271,7 @@ describe('DynascaleManager', () => {
             },
           },
         },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
       expect(play).toHaveBeenCalled();
       expect(videoElement.srcObject).toBe(mediaStream);
@@ -281,7 +281,7 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
     });
 
@@ -308,7 +308,7 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
 
       call.state.updateParticipant('session-id', {
@@ -369,7 +369,7 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
     });
 
@@ -417,7 +417,7 @@ describe('DynascaleManager', () => {
             },
           },
         },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
       );
 
       // @ts-ignore simulate resize
@@ -439,7 +439,47 @@ describe('DynascaleManager', () => {
       expect(updateSubscription).toHaveBeenCalledWith(
         'videoTrack',
         { 'session-id': { dimension: undefined } },
-        DebounceType.IMMEDIATE,
+        DebounceType.FAST,
+      );
+    });
+
+    it('video: should unsubscribe when element dimensions are zero', () => {
+      // @ts-ignore
+      call.state.updateOrAddParticipant('session-id', {
+        userId: 'user-id',
+        sessionId: 'session-id',
+        publishedTracks: [TrackType.VIDEO],
+        viewportVisibilityState: {
+          videoTrack: VisibilityState.VISIBLE,
+          screenShareTrack: VisibilityState.UNKNOWN,
+        },
+      });
+
+      let updateSubscription = vi.spyOn(call, 'updateSubscriptionsPartial');
+
+      // @ts-ignore simulate resize
+      videoElement.clientHeight = 0;
+      // @ts-ignore simulate resize
+      videoElement.clientWidth = 0;
+
+      const cleanup = dynascaleManager.bindVideoElement(
+        videoElement,
+        'session-id',
+        'videoTrack',
+      );
+
+      expect(updateSubscription).toHaveBeenCalledWith(
+        'videoTrack',
+        { 'session-id': { dimension: undefined } },
+        DebounceType.FAST,
+      );
+
+      cleanup?.();
+
+      expect(updateSubscription).toHaveBeenLastCalledWith(
+        'videoTrack',
+        { 'session-id': { dimension: undefined } },
+        DebounceType.FAST,
       );
     });
   });