@stream-io/video-client 0.3.20 → 0.3.22

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.22](https://github.com/GetStream/stream-video-js/compare/client0.3.21...client0.3.22) (2023-09-25)
+
+
+### Bug Fixes
+
+* Add extra delay before attempting to play video in Safari and Firefox ([#1106](https://github.com/GetStream/stream-video-js/issues/1106)) ([5b4a589](https://github.com/GetStream/stream-video-js/commit/5b4a58918240a7b63807726609d6d54b92cfe1d2))
+
+### [0.3.21](https://github.com/GetStream/stream-video-js/compare/client0.3.20...client0.3.21) (2023-09-20)
+
+
+### Bug Fixes
+
+* unmount video element when there is no video track or participant is invisible ([#1096](https://github.com/GetStream/stream-video-js/issues/1096)) ([bd01835](https://github.com/GetStream/stream-video-js/commit/bd01835f4e93c981ca2e5a7e4e09142ea4e326cf)), closes [#1094](https://github.com/GetStream/stream-video-js/issues/1094)
+
 ### [0.3.20](https://github.com/GetStream/stream-video-js/compare/client0.3.19...client0.3.20) (2023-09-19)
 
 

package/dist/index.browser.es.js

@@ -9366,6 +9366,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: VisibilityState.UNKNOWN,
     screenShareTrack: VisibilityState.UNKNOWN,
@@ -9454,9 +9488,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(map$2((participants) => participants.find((participant) => participant.sessionId === sessionId)), takeWhile((participant) => !!participant), distinctUntilChanged$1(), 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
@@ -9501,6 +9549,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$
@@ -9510,39 +9560,43 @@ 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(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(DebounceType.IMMEDIATE, undefined);
+                requestTrackWithDimensions(DebounceType.FAST, undefined);
                 viewportVisibilityStateSubscription === null || viewportVisibilityStateSubscription === void 0 ? void 0 : viewportVisibilityStateSubscription.unsubscribe();
                 publishedTracksSubscription === null || publishedTracksSubscription === void 0 ? void 0 : publishedTracksSubscription.unsubscribe();
                 streamSubscription.unsubscribe();
@@ -13108,7 +13162,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/`;
@@ -14088,39 +14142,5 @@ 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
-});
-
 export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, MicrophoneManagerState, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
 //# sourceMappingURL=index.browser.es.js.map