@stream-io/video-client 0.3.20 → 0.3.21

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [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

@@ -9454,9 +9454,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 +9515,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,14 +9526,14 @@ 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);
                     }
                 });
             const streamSubscription = participant$
@@ -9542,7 +9558,7 @@ class DynascaleManager {
             // 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 +13124,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.20';
+const version = '0.3.21';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;