@stream-io/video-client 0.3.19 → 0.3.21

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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)
+
+
+### Features
+
+* Update with new API spec ([#1098](https://github.com/GetStream/stream-video-js/issues/1098)) ([ced372c](https://github.com/GetStream/stream-video-js/commit/ced372ca068086375024d59a977014efcadefef2))
+
 ### [0.3.19](https://github.com/GetStream/stream-video-js/compare/client0.3.18...client0.3.19) (2023-09-15)
 
 

package/README.md

@@ -1,7 +1,5 @@
 # @stream-io/video-client
 
-🚧 **WARNING** This package is not yet stable, it is for internal use only. For more information check out our [video product page](https://getstream.io/video/). 🚧
-
 Low-level video client for browser and Node.js integrations.
 
 ## **Quick Links**

package/dist/index.browser.es.js

@@ -8351,6 +8351,8 @@ class CallState {
             'connection.error': undefined,
             'connection.ok': undefined,
             'health.check': undefined,
+            'call.recording_failed': undefined,
+            'call.recording_ready': undefined,
             custom: undefined,
             // events that update call state:
             'call.accepted': (e) => this.updateFromCallResponse(e.call),
@@ -9452,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
@@ -9499,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$
@@ -9508,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$
@@ -9540,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();
@@ -13106,7 +13124,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.19';
+const version = '0.3.21';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;