@stream-io/video-client 0.3.20 → 0.3.22

package/dist/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -48,7 +48,6 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-typescript": "^11.1.2",
     "@types/jsonwebtoken": "^9.0.1",
-    "@types/rimraf": "^3.0.2",
     "@types/sdp-transform": "^2.4.6",
     "@types/ua-parser-js": "^0.7.36",
     "@types/ws": "^8.5.4",
@@ -56,7 +55,7 @@
     "dotenv": "^16.3.1",
     "happy-dom": "^11.0.2",
     "prettier": "^2.8.4",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.1",
     "rollup": "^3.28.1",
     "typescript": "^4.9.5",
     "vite": "^4.4.9",

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

@@ -22,6 +22,7 @@ import {
 import { ViewportTracker } from './ViewportTracker';
 import { getLogger } from '../logger';
 import { getSdkInfo } from '../client-details';
+import { isFirefox, isSafari } from './browsers';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -152,6 +153,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 +180,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 +246,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,16 +265,24 @@ 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);
             }
           });
 
+    videoElement.autoplay = true;
+    videoElement.playsInline = true;
+
+    // explicitly marking the element as muted will allow autoplay to work
+    // without prior user interaction:
+    // https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
+    videoElement.muted = true;
+
     const streamSubscription = participant$
       .pipe(
         distinctUntilKeyChanged(
@@ -268,25 +293,22 @@ export class DynascaleManager {
         const source =
           trackType === 'videoTrack' ? p.videoStream : p.screenShareStream;
         if (videoElement.srcObject === source) return;
-        setTimeout(() => {
-          videoElement.srcObject = source ?? null;
-          if (videoElement.srcObject) {
+        videoElement.srcObject = source ?? null;
+        if (isSafari() || isFirefox()) {
+          setTimeout(() => {
+            videoElement.srcObject = source ?? null;
             videoElement.play().catch((e) => {
               this.logger('warn', `Failed to play stream`, e);
             });
-          }
-        }, 0);
+            // we add extra delay until we attempt to force-play
+            // the participant's media stream in Firefox and Safari,
+            // as they seem to have some timing issues
+          }, 25);
+        }
       });
-    videoElement.playsInline = true;
-    videoElement.autoplay = true;
-
-    // explicitly marking the element as muted will allow autoplay to work
-    // without prior user interaction:
-    // https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
-    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,
       );
     });
   });