@stream-io/video-client 0.3.20 → 0.3.22

package/dist/index.cjs.js

@@ -9389,6 +9389,40 @@ class ViewportTracker {
     }
 }
 
+/**
+ * Checks whether the current browser is Safari.
+ */
+const isSafari = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
+};
+/**
+ * Checks whether the current browser is Firefox.
+ */
+const isFirefox = () => {
+    var _a;
+    if (typeof navigator === 'undefined')
+        return false;
+    return (_a = navigator.userAgent) === null || _a === void 0 ? void 0 : _a.includes('Firefox');
+};
+/**
+ * Checks whether the current browser is Google Chrome.
+ */
+const isChrome = () => {
+    var _a;
+    if (typeof navigator === 'undefined')
+        return false;
+    return (_a = navigator.userAgent) === null || _a === void 0 ? void 0 : _a.includes('Chrome');
+};
+
+var browsers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isChrome: isChrome,
+    isFirefox: isFirefox,
+    isSafari: isSafari
+});
+
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: exports.VisibilityState.UNKNOWN,
     screenShareTrack: exports.VisibilityState.UNKNOWN,
@@ -9477,9 +9511,23 @@ class DynascaleManager {
             if (!boundParticipant)
                 return;
             const requestTrackWithDimensions = (debounceType, dimension) => {
+                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 } }, debounceType);
             };
             const participant$ = this.call.state.participants$.pipe(rxjs.map((participants) => participants.find((participant) => participant.sessionId === sessionId)), rxjs.takeWhile((participant) => !!participant), rxjs.distinctUntilChanged(), rxjs.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;
             const viewportVisibilityStateSubscription = boundParticipant.isLocalParticipant
@@ -9524,6 +9572,8 @@ class DynascaleManager {
                     lastDimensions = currentDimensions;
                 });
             resizeObserver === null || resizeObserver === void 0 ? void 0 : 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$
@@ -9533,39 +9583,43 @@ class DynascaleManager {
                     .subscribe((isPublishing) => {
                     if (isPublishing) {
                         // the participant just started to publish a track
-                        requestTrackWithDimensions(exports.DebounceType.IMMEDIATE, {
+                        requestTrackWithDimensions(exports.DebounceType.FAST, {
                             width: videoElement.clientWidth,
                             height: videoElement.clientHeight,
                         });
                     }
                     else {
                         // the participant just stopped publishing a track
-                        requestTrackWithDimensions(exports.DebounceType.IMMEDIATE, undefined);
+                        requestTrackWithDimensions(exports.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(rxjs.distinctUntilKeyChanged(trackType === 'videoTrack' ? 'videoStream' : 'screenShareStream'))
                 .subscribe((p) => {
                 const source = trackType === 'videoTrack' ? p.videoStream : p.screenShareStream;
                 if (videoElement.srcObject === source)
                     return;
-                setTimeout(() => {
-                    videoElement.srcObject = source !== null && source !== void 0 ? source : null;
-                    if (videoElement.srcObject) {
+                videoElement.srcObject = source !== null && source !== void 0 ? source : null;
+                if (isSafari() || isFirefox()) {
+                    setTimeout(() => {
+                        videoElement.srcObject = source !== null && source !== void 0 ? 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(exports.DebounceType.IMMEDIATE, undefined);
+                requestTrackWithDimensions(exports.DebounceType.FAST, undefined);
                 viewportVisibilityStateSubscription === null || viewportVisibilityStateSubscription === void 0 ? void 0 : viewportVisibilityStateSubscription.unsubscribe();
                 publishedTracksSubscription === null || publishedTracksSubscription === void 0 ? void 0 : publishedTracksSubscription.unsubscribe();
                 streamSubscription.unsubscribe();
@@ -13132,7 +13186,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.20';
+const version = '0.3.22';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
@@ -14112,40 +14166,6 @@ class StreamVideoServerClient extends StreamVideoClient {
     }
 }
 
-/**
- * Checks whether the current browser is Safari.
- */
-const isSafari = () => {
-    if (typeof navigator === 'undefined')
-        return false;
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
-};
-/**
- * Checks whether the current browser is Firefox.
- */
-const isFirefox = () => {
-    var _a;
-    if (typeof navigator === 'undefined')
-        return false;
-    return (_a = navigator.userAgent) === null || _a === void 0 ? void 0 : _a.includes('Firefox');
-};
-/**
- * Checks whether the current browser is Google Chrome.
- */
-const isChrome = () => {
-    var _a;
-    if (typeof navigator === 'undefined')
-        return false;
-    return (_a = navigator.userAgent) === null || _a === void 0 ? void 0 : _a.includes('Chrome');
-};
-
-var browsers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    isChrome: isChrome,
-    isFirefox: isFirefox,
-    isSafari: isSafari
-});
-
 Object.defineProperty(exports, 'AxiosError', {
     enumerable: true,
     get: function () { return axios.AxiosError; }