@stream-io/video-client 0.3.8 → 0.3.10

package/dist/index.cjs.js

@@ -5734,7 +5734,7 @@ exports.VisibilityState = void 0;
 })(exports.VisibilityState || (exports.VisibilityState = {}));
 exports.DebounceType = void 0;
 (function (DebounceType) {
-    DebounceType[DebounceType["IMMEDIATE"] = 0] = "IMMEDIATE";
+    DebounceType[DebounceType["IMMEDIATE"] = 20] = "IMMEDIATE";
     DebounceType[DebounceType["FAST"] = 100] = "FAST";
     DebounceType[DebounceType["MEDIUM"] = 600] = "MEDIUM";
     DebounceType[DebounceType["SLOW"] = 1200] = "SLOW";
@@ -7609,10 +7609,20 @@ const retryable = (rpc, logger) => __awaiter(void 0, void 0, void 0, function* (
  */
 const getCurrentValue = (observable$) => {
     let value;
+    let err = undefined;
     observable$
         .pipe(operators.take(1))
-        .subscribe((v) => (value = v))
+        .subscribe({
+        next: (v) => {
+            value = v;
+        },
+        error: (e) => {
+            err = e;
+        },
+    })
         .unsubscribe();
+    if (err)
+        throw err;
     return value;
 };
 /**
@@ -7971,8 +7981,11 @@ const hasAudio = (p) => p.publishedTracks.includes(TrackType.AUDIO);
 // a comparator decorator which applies the decorated comparator only if the
 // participant is invisible.
 // This ensures stable sorting when all participants are visible.
-const ifInvisibleBy = conditional((a, b) => a.viewportVisibilityState === exports.VisibilityState.INVISIBLE ||
-    b.viewportVisibilityState === exports.VisibilityState.INVISIBLE);
+const ifInvisibleBy = conditional((a, b) => {
+    var _a, _b;
+    return ((_a = a.viewportVisibilityState) === null || _a === void 0 ? void 0 : _a.videoTrack) === exports.VisibilityState.INVISIBLE ||
+        ((_b = b.viewportVisibilityState) === null || _b === void 0 ? void 0 : _b.videoTrack) === exports.VisibilityState.INVISIBLE;
+});
 /**
  * The default sorting preset.
  */
@@ -8849,7 +8862,10 @@ const watchParticipantJoined = (state) => {
         // response and then follow up with a `participantJoined` event for
         // already announced participants.
         state.updateOrAddParticipant(participant.sessionId, Object.assign(participant, {
-            viewportVisibilityState: exports.VisibilityState.UNKNOWN,
+            viewportVisibilityState: {
+                videoTrack: exports.VisibilityState.UNKNOWN,
+                screenShareTrack: exports.VisibilityState.UNKNOWN,
+            },
         }));
     };
 };
@@ -9406,6 +9422,234 @@ class ViewportTracker {
     }
 }
 
+const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
+    videoTrack: exports.VisibilityState.UNKNOWN,
+    screenShareTrack: exports.VisibilityState.UNKNOWN,
+};
+/**
+ * A manager class that handles dynascale related tasks like:
+ *
+ * - binding video elements to session ids
+ * - binding audio elements to session ids
+ * - tracking element visibility
+ * - updating subscriptions based on viewport visibility
+ * - updating subscriptions based on video element dimensions
+ * - updating subscriptions based on published tracks
+ */
+class DynascaleManager {
+    /**
+     * Creates a new DynascaleManager instance.
+     *
+     * @param call the call to manage.
+     */
+    constructor(call) {
+        /**
+         * The viewport tracker instance.
+         */
+        this.viewportTracker = new ViewportTracker();
+        this.logger = getLogger(['DynascaleManager']);
+        /**
+         * Will begin tracking the given element for visibility changes within the
+         * configured viewport element (`call.setViewport`).
+         *
+         * @param element the element to track.
+         * @param sessionId the session id.
+         * @param trackType the kind of video.
+         * @returns Untrack.
+         */
+        this.trackElementVisibility = (element, sessionId, trackType) => {
+            const cleanup = this.viewportTracker.observe(element, (entry) => {
+                this.call.state.updateParticipant(sessionId, (participant) => {
+                    var _a;
+                    const previousVisibilityState = (_a = participant.viewportVisibilityState) !== null && _a !== void 0 ? _a : DEFAULT_VIEWPORT_VISIBILITY_STATE;
+                    // observer triggers when the element is "moved" to be a fullscreen element
+                    // keep it VISIBLE if that happens to prevent fullscreen with placeholder
+                    const isVisible = entry.isIntersecting || document.fullscreenElement === element
+                        ? exports.VisibilityState.VISIBLE
+                        : exports.VisibilityState.INVISIBLE;
+                    return Object.assign(Object.assign({}, participant), { viewportVisibilityState: Object.assign(Object.assign({}, previousVisibilityState), { [trackType]: isVisible }) });
+                });
+            });
+            return () => {
+                cleanup();
+                // reset visibility state to UNKNOWN upon cleanup
+                // so that the layouts that are not actively observed
+                // can still function normally (runtime layout switching)
+                this.call.state.updateParticipant(sessionId, (participant) => {
+                    var _a;
+                    const previousVisibilityState = (_a = participant.viewportVisibilityState) !== null && _a !== void 0 ? _a : DEFAULT_VIEWPORT_VISIBILITY_STATE;
+                    return Object.assign(Object.assign({}, participant), { viewportVisibilityState: Object.assign(Object.assign({}, previousVisibilityState), { [trackType]: exports.VisibilityState.UNKNOWN }) });
+                });
+            };
+        };
+        /**
+         * Sets the viewport element to track bound video elements for visibility.
+         *
+         * @param element the viewport element.
+         */
+        this.setViewport = (element) => {
+            return this.viewportTracker.setViewport(element);
+        };
+        /**
+         * Binds a DOM <video> element to the given session id.
+         * This method will make sure that the video element will play
+         * the correct video stream for the given session id.
+         *
+         * Under the hood, it would also keep track of the video element dimensions
+         * and update the subscription accordingly in order to optimize the bandwidth.
+         *
+         * If a "viewport" is configured, the video element will be automatically
+         * tracked for visibility and the subscription will be updated accordingly.
+         *
+         * @param videoElement the video element to bind to.
+         * @param sessionId the session id.
+         * @param trackType the kind of video.
+         */
+        this.bindVideoElement = (videoElement, sessionId, trackType) => {
+            const boundParticipant = this.call.state.findParticipantBySessionId(sessionId);
+            if (!boundParticipant)
+                return;
+            const requestTrackWithDimensions = (debounceType, dimension) => {
+                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());
+            // keep copy for resize observer handler
+            let viewportVisibilityState;
+            const viewportVisibilityStateSubscription = boundParticipant.isLocalParticipant
+                ? null
+                : participant$
+                    .pipe(rxjs.map((p) => { var _a; return (_a = p.viewportVisibilityState) === null || _a === void 0 ? void 0 : _a[trackType]; }), rxjs.distinctUntilChanged())
+                    .subscribe((nextViewportVisibilityState) => {
+                    // skip initial trigger
+                    if (!viewportVisibilityState) {
+                        viewportVisibilityState =
+                            nextViewportVisibilityState !== null && nextViewportVisibilityState !== void 0 ? nextViewportVisibilityState : exports.VisibilityState.UNKNOWN;
+                        return;
+                    }
+                    viewportVisibilityState =
+                        nextViewportVisibilityState !== null && nextViewportVisibilityState !== void 0 ? nextViewportVisibilityState : exports.VisibilityState.UNKNOWN;
+                    if (nextViewportVisibilityState === exports.VisibilityState.INVISIBLE) {
+                        return requestTrackWithDimensions(exports.DebounceType.MEDIUM, undefined);
+                    }
+                    requestTrackWithDimensions(exports.DebounceType.MEDIUM, {
+                        width: videoElement.clientWidth,
+                        height: videoElement.clientHeight,
+                    });
+                });
+            let lastDimensions;
+            const resizeObserver = boundParticipant.isLocalParticipant
+                ? null
+                : new ResizeObserver(() => {
+                    const currentDimensions = `${videoElement.clientWidth},${videoElement.clientHeight}`;
+                    // skip initial trigger
+                    if (!lastDimensions) {
+                        lastDimensions = currentDimensions;
+                        return;
+                    }
+                    if (lastDimensions === currentDimensions ||
+                        viewportVisibilityState === exports.VisibilityState.INVISIBLE) {
+                        return;
+                    }
+                    requestTrackWithDimensions(exports.DebounceType.SLOW, {
+                        width: videoElement.clientWidth,
+                        height: videoElement.clientHeight,
+                    });
+                    lastDimensions = currentDimensions;
+                });
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(videoElement);
+            const publishedTracksSubscription = boundParticipant.isLocalParticipant
+                ? null
+                : participant$
+                    .pipe(rxjs.distinctUntilKeyChanged('publishedTracks'), rxjs.map((p) => p.publishedTracks.includes(trackType === 'videoTrack'
+                    ? TrackType.VIDEO
+                    : TrackType.SCREEN_SHARE)), rxjs.distinctUntilChanged())
+                    .subscribe((isPublishing) => {
+                    if (isPublishing) {
+                        // the participant just started to publish a track
+                        requestTrackWithDimensions(exports.DebounceType.IMMEDIATE, {
+                            width: videoElement.clientWidth,
+                            height: videoElement.clientHeight,
+                        });
+                    }
+                    else {
+                        // the participant just stopped publishing a track
+                        requestTrackWithDimensions(exports.DebounceType.IMMEDIATE, undefined);
+                    }
+                });
+            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.play().catch((e) => {
+                            this.logger('warn', `Failed to play stream`, e);
+                        });
+                    }
+                }, 0);
+            });
+            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 () => {
+                viewportVisibilityStateSubscription === null || viewportVisibilityStateSubscription === void 0 ? void 0 : viewportVisibilityStateSubscription.unsubscribe();
+                publishedTracksSubscription === null || publishedTracksSubscription === void 0 ? void 0 : publishedTracksSubscription.unsubscribe();
+                streamSubscription.unsubscribe();
+                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            };
+        };
+        /**
+         * Binds a DOM <audio> element to the given session id.
+         *
+         * This method will make sure that the audio element will
+         * play the correct audio stream for the given session id.
+         *
+         * @param audioElement the audio element to bind to.
+         * @param sessionId the session id.
+         * @returns a cleanup function that will unbind the audio element.
+         */
+        this.bindAudioElement = (audioElement, sessionId) => {
+            const participant = this.call.state.findParticipantBySessionId(sessionId);
+            if (!participant || participant.isLocalParticipant)
+                return;
+            const participant$ = this.call.state.participants$.pipe(rxjs.map((participants) => participants.find((p) => p.sessionId === sessionId)), rxjs.takeWhile((p) => !!p), rxjs.distinctUntilChanged());
+            const updateMediaStreamSubscription = participant$
+                .pipe(rxjs.distinctUntilKeyChanged('audioStream'))
+                .subscribe((p) => {
+                const source = p.audioStream;
+                if (audioElement.srcObject === source)
+                    return;
+                setTimeout(() => {
+                    audioElement.srcObject = source !== null && source !== void 0 ? source : null;
+                    if (audioElement.srcObject) {
+                        audioElement.play().catch((e) => {
+                            this.logger('warn', `Failed to play stream`, e);
+                        });
+                    }
+                });
+            });
+            const sinkIdSubscription = this.call.state.localParticipant$.subscribe((p) => {
+                if (p && p.audioOutputDeviceId && 'setSinkId' in audioElement) {
+                    // @ts-expect-error setSinkId is not yet in the lib
+                    audioElement.setSinkId(p.audioOutputDeviceId);
+                }
+            });
+            audioElement.autoplay = true;
+            return () => {
+                sinkIdSubscription.unsubscribe();
+                updateMediaStreamSubscription.unsubscribe();
+            };
+        };
+        this.call = call;
+    }
+}
+
 /**
  * Stores the permissions for the current user and exposes
  * a few helper methods which make it easier to work with permissions.
@@ -9545,127 +9789,6 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
-class InputMediaDeviceManagerState {
-    constructor(disableMode = 'stop-tracks') {
-        this.disableMode = disableMode;
-        this.statusSubject = new rxjs.BehaviorSubject(undefined);
-        this.mediaStreamSubject = new rxjs.BehaviorSubject(undefined);
-        this.selectedDeviceSubject = new rxjs.BehaviorSubject(undefined);
-        /**
-         * Gets the current value of an observable, or undefined if the observable has
-         * not emitted a value yet.
-         *
-         * @param observable$ the observable to get the value from.
-         */
-        this.getCurrentValue = getCurrentValue;
-        /**
-         * Updates the value of the provided Subject.
-         * An `update` can either be a new value or a function which takes
-         * the current value and returns a new value.
-         *
-         * @internal
-         *
-         * @param subject the subject to update.
-         * @param update the update to apply to the subject.
-         * @return the updated value.
-         */
-        this.setCurrentValue = setCurrentValue;
-        this.mediaStream$ = this.mediaStreamSubject.asObservable();
-        this.selectedDevice$ = this.selectedDeviceSubject
-            .asObservable()
-            .pipe(rxjs.distinctUntilChanged());
-        this.status$ = this.statusSubject
-            .asObservable()
-            .pipe(rxjs.distinctUntilChanged());
-    }
-    /**
-     * The device status
-     */
-    get status() {
-        return this.getCurrentValue(this.status$);
-    }
-    /**
-     * The currently selected device
-     */
-    get selectedDevice() {
-        return this.getCurrentValue(this.selectedDevice$);
-    }
-    /**
-     * The current media stream, or `undefined` if the device is currently disabled.
-     */
-    get mediaStream() {
-        return this.getCurrentValue(this.mediaStream$);
-    }
-    /**
-     * @internal
-     * @param status
-     */
-    setStatus(status) {
-        this.setCurrentValue(this.statusSubject, status);
-    }
-    /**
-     * @internal
-     * @param stream
-     */
-    setMediaStream(stream) {
-        this.setCurrentValue(this.mediaStreamSubject, stream);
-        if (stream) {
-            this.setDevice(this.getDeviceIdFromStream(stream));
-        }
-    }
-    /**
-     * @internal
-     * @param stream
-     */
-    setDevice(deviceId) {
-        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
-    }
-}
-
-class CameraManagerState extends InputMediaDeviceManagerState {
-    constructor() {
-        super('stop-tracks');
-        this.directionSubject = new rxjs.BehaviorSubject(undefined);
-        this.direction$ = this.directionSubject
-            .asObservable()
-            .pipe(rxjs.distinctUntilChanged());
-    }
-    /**
-     * The preferred camera direction
-     * front - means the camera facing the user
-     * back - means the camera facing the environment
-     */
-    get direction() {
-        return this.getCurrentValue(this.direction$);
-    }
-    /**
-     * @internal
-     */
-    setDirection(direction) {
-        this.setCurrentValue(this.directionSubject, direction);
-    }
-    /**
-     * @internal
-     */
-    setMediaStream(stream) {
-        var _a;
-        super.setMediaStream(stream);
-        if (stream) {
-            // RN getSettings() doesn't return facingMode, so we don't verify camera direction
-            const direction = isReactNative()
-                ? this.direction
-                : ((_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().facingMode) === 'environment'
-                    ? 'back'
-                    : 'front';
-            this.setDirection(direction);
-        }
-    }
-    getDeviceIdFromStream(stream) {
-        var _a;
-        return (_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
-    }
-}
-
 const getDevices = (constraints) => {
     return new rxjs.Observable((subscriber) => {
         navigator.mediaDevices
@@ -10061,6 +10184,127 @@ class InputMediaDeviceManager {
     }
 }
 
+class InputMediaDeviceManagerState {
+    constructor(disableMode = 'stop-tracks') {
+        this.disableMode = disableMode;
+        this.statusSubject = new rxjs.BehaviorSubject(undefined);
+        this.mediaStreamSubject = new rxjs.BehaviorSubject(undefined);
+        this.selectedDeviceSubject = new rxjs.BehaviorSubject(undefined);
+        /**
+         * Gets the current value of an observable, or undefined if the observable has
+         * not emitted a value yet.
+         *
+         * @param observable$ the observable to get the value from.
+         */
+        this.getCurrentValue = getCurrentValue;
+        /**
+         * Updates the value of the provided Subject.
+         * An `update` can either be a new value or a function which takes
+         * the current value and returns a new value.
+         *
+         * @internal
+         *
+         * @param subject the subject to update.
+         * @param update the update to apply to the subject.
+         * @return the updated value.
+         */
+        this.setCurrentValue = setCurrentValue;
+        this.mediaStream$ = this.mediaStreamSubject.asObservable();
+        this.selectedDevice$ = this.selectedDeviceSubject
+            .asObservable()
+            .pipe(rxjs.distinctUntilChanged());
+        this.status$ = this.statusSubject
+            .asObservable()
+            .pipe(rxjs.distinctUntilChanged());
+    }
+    /**
+     * The device status
+     */
+    get status() {
+        return this.getCurrentValue(this.status$);
+    }
+    /**
+     * The currently selected device
+     */
+    get selectedDevice() {
+        return this.getCurrentValue(this.selectedDevice$);
+    }
+    /**
+     * The current media stream, or `undefined` if the device is currently disabled.
+     */
+    get mediaStream() {
+        return this.getCurrentValue(this.mediaStream$);
+    }
+    /**
+     * @internal
+     * @param status
+     */
+    setStatus(status) {
+        this.setCurrentValue(this.statusSubject, status);
+    }
+    /**
+     * @internal
+     * @param stream
+     */
+    setMediaStream(stream) {
+        this.setCurrentValue(this.mediaStreamSubject, stream);
+        if (stream) {
+            this.setDevice(this.getDeviceIdFromStream(stream));
+        }
+    }
+    /**
+     * @internal
+     * @param stream
+     */
+    setDevice(deviceId) {
+        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+    }
+}
+
+class CameraManagerState extends InputMediaDeviceManagerState {
+    constructor() {
+        super('stop-tracks');
+        this.directionSubject = new rxjs.BehaviorSubject(undefined);
+        this.direction$ = this.directionSubject
+            .asObservable()
+            .pipe(rxjs.distinctUntilChanged());
+    }
+    /**
+     * The preferred camera direction
+     * front - means the camera facing the user
+     * back - means the camera facing the environment
+     */
+    get direction() {
+        return this.getCurrentValue(this.direction$);
+    }
+    /**
+     * @internal
+     */
+    setDirection(direction) {
+        this.setCurrentValue(this.directionSubject, direction);
+    }
+    /**
+     * @internal
+     */
+    setMediaStream(stream) {
+        var _a;
+        super.setMediaStream(stream);
+        if (stream) {
+            // RN getSettings() doesn't return facingMode, so we don't verify camera direction
+            const direction = isReactNative()
+                ? this.direction
+                : ((_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().facingMode) === 'environment'
+                    ? 'back'
+                    : 'front';
+            this.setDirection(direction);
+        }
+    }
+    getDeviceIdFromStream(stream) {
+        var _a;
+        return (_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
+    }
+}
+
 class CameraManager extends InputMediaDeviceManager {
     constructor(call) {
         super(call, new CameraManagerState());
@@ -10196,14 +10440,14 @@ class Call {
      * method to construct a `Call` instance.
      */
     constructor({ type, id, streamClient, members, ownCapabilities, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
-        /**
-         * ViewportTracker instance
-         */
-        this.viewportTracker = new ViewportTracker();
         /**
          * The state of this call.
          */
         this.state = new CallState();
+        /**
+         * The DynascaleManager instance.
+         */
+        this.dynascaleManager = new DynascaleManager(this);
         /**
          * The permissions context of this call.
          */
@@ -10221,7 +10465,7 @@ class Call {
          * A typical use case is to clean up some global event handlers.
          * @private
          */
-        this.leaveCallHooks = [];
+        this.leaveCallHooks = new Set();
         this.streamClientEventHandlers = new Map();
         /**
          * Leave the call and stop the media streams that were published by the call.
@@ -10527,7 +10771,7 @@ class Call {
                 unsubscribeOfflineEvent();
                 this.state.setCallingState(exports.CallingState.OFFLINE);
             });
-            this.leaveCallHooks.push(() => {
+            this.leaveCallHooks.add(() => {
                 unsubscribeOnlineEvent();
                 unsubscribeOfflineEvent();
             });
@@ -10604,7 +10848,10 @@ class Call {
                     return currentParticipants.map((p) => {
                         const participant = Object.assign(p, {
                             isLocalParticipant: p.sessionId === sfuClient.sessionId,
-                            viewportVisibilityState: exports.VisibilityState.UNKNOWN,
+                            viewportVisibilityState: {
+                                videoTrack: exports.VisibilityState.UNKNOWN,
+                                screenShareTrack: exports.VisibilityState.UNKNOWN,
+                            },
                         });
                         // We need to preserve the local state of the participant
                         // (e.g. videoDimension, visibilityState, pinnedAt, etc.)
@@ -10761,15 +11008,30 @@ class Call {
          * You have to create a subscription for each participant for all the different kinds of tracks you want to receive.
          * You can only subscribe for tracks after the participant started publishing the given kind of track.
          *
-         * @param kind the kind of subscription to update.
+         * @param trackType the kind of subscription to update.
          * @param changes the list of subscription changes to do.
          * @param type the debounce type to use for the update.
          */
-        this.updateSubscriptionsPartial = (kind, changes, type = exports.DebounceType.SLOW) => {
+        this.updateSubscriptionsPartial = (trackType, changes, type = exports.DebounceType.SLOW) => {
+            if (trackType === 'video') {
+                this.logger('warn', `updateSubscriptionsPartial: ${trackType} is deprecated. Please switch to 'videoTrack'`);
+                trackType = 'videoTrack';
+            }
+            else if (trackType === 'screen') {
+                this.logger('warn', `updateSubscriptionsPartial: ${trackType} is deprecated. Please switch to 'screenShareTrack'`);
+                trackType = 'screenShareTrack';
+            }
             const participants = this.state.updateParticipants(Object.entries(changes).reduce((acc, [sessionId, change]) => {
-                const prop = kind === 'video'
+                var _a, _b;
+                if ((_a = change.dimension) === null || _a === void 0 ? void 0 : _a.height) {
+                    change.dimension.height = Math.ceil(change.dimension.height);
+                }
+                if ((_b = change.dimension) === null || _b === void 0 ? void 0 : _b.width) {
+                    change.dimension.width = Math.ceil(change.dimension.width);
+                }
+                const prop = trackType === 'videoTrack'
                     ? 'videoDimension'
-                    : kind === 'screen'
+                    : trackType === 'screenShareTrack'
                         ? 'screenShareDimension'
                         : undefined;
                 if (prop) {
@@ -10785,10 +11047,10 @@ class Call {
         };
         this.updateSubscriptions = (participants, type = exports.DebounceType.SLOW) => {
             const subscriptions = [];
-            participants.forEach((p) => {
+            for (const p of participants) {
                 // we don't want to subscribe to our own tracks
                 if (p.isLocalParticipant)
-                    return;
+                    continue;
                 // NOTE: audio tracks don't have to be requested explicitly
                 // as the SFU will implicitly subscribe us to all of them,
                 // once they become available.
@@ -10809,7 +11071,7 @@ class Call {
                         dimension: p.screenShareDimension,
                     });
                 }
-            });
+            }
             // schedule update
             this.trackSubscriptionsSubject.next({ type, data: subscriptions });
         };
@@ -11198,7 +11460,7 @@ class Call {
                 this.dropTimeout = setTimeout(() => this.leave(), timeoutMs);
             }), rxjs.takeWhile(() => !!this.clientStore.calls.find((call) => call.cid === this.cid)))
                 .subscribe();
-            this.leaveCallHooks.push(() => {
+            this.leaveCallHooks.add(() => {
                 !subscription.closed && subscription.unsubscribe();
             });
         };
@@ -11225,6 +11487,69 @@ class Call {
         this.sendCustomEvent = (payload) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/event`, { custom: payload });
         });
+        /**
+         * Will begin tracking the given element for visibility changes within the
+         * configured viewport element (`call.setViewport`).
+         *
+         * @param element the element to track.
+         * @param sessionId the session id.
+         * @param trackType the video mode.
+         */
+        this.trackElementVisibility = (element, sessionId, trackType) => {
+            return this.dynascaleManager.trackElementVisibility(element, sessionId, trackType);
+        };
+        /**
+         * Sets the viewport element to track bound video elements for visibility.
+         *
+         * @param element the viewport element.
+         */
+        this.setViewport = (element) => {
+            return this.dynascaleManager.setViewport(element);
+        };
+        /**
+         * Binds a DOM <video> element to the given session id.
+         * This method will make sure that the video element will play
+         * the correct video stream for the given session id.
+         *
+         * Under the hood, it would also keep track of the video element dimensions
+         * and update the subscription accordingly in order to optimize the bandwidth.
+         *
+         * If a "viewport" is configured, the video element will be automatically
+         * tracked for visibility and the subscription will be updated accordingly.
+         *
+         * @param videoElement the video element to bind to.
+         * @param sessionId the session id.
+         * @param trackType the kind of video.
+         */
+        this.bindVideoElement = (videoElement, sessionId, trackType) => {
+            const unbind = this.dynascaleManager.bindVideoElement(videoElement, sessionId, trackType);
+            if (!unbind)
+                return;
+            this.leaveCallHooks.add(unbind);
+            return () => {
+                this.leaveCallHooks.delete(unbind);
+                unbind();
+            };
+        };
+        /**
+         * Binds a DOM <audio> element to the given session id.
+         *
+         * This method will make sure that the audio element will
+         * play the correct audio stream for the given session id.
+         *
+         * @param audioElement the audio element to bind to.
+         * @param sessionId the session id.
+         */
+        this.bindAudioElement = (audioElement, sessionId) => {
+            const unbind = this.dynascaleManager.bindAudioElement(audioElement, sessionId);
+            if (!unbind)
+                return;
+            this.leaveCallHooks.add(unbind);
+            return () => {
+                this.leaveCallHooks.delete(unbind);
+                unbind();
+            };
+        };
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -11246,20 +11571,21 @@ class Call {
             // update state with the latest event data
             this.state.updateFromEvent(event);
         });
-        this.leaveCallHooks.push(registerEventHandlers(this, this.state, this.dispatcher));
+        this.leaveCallHooks.add(registerEventHandlers(this, this.state, this.dispatcher));
         this.registerEffects();
-        this.leaveCallHooks.push(createSubscription(this.trackSubscriptionsSubject.pipe(rxjs.debounce((v) => rxjs.timer(v.type)), rxjs.map((v) => v.data)), (subscriptions) => { var _a; return (_a = this.sfuClient) === null || _a === void 0 ? void 0 : _a.updateSubscriptions(subscriptions); }));
+        this.leaveCallHooks.add(createSubscription(this.trackSubscriptionsSubject.pipe(rxjs.debounce((v) => rxjs.timer(v.type)), rxjs.map((v) => v.data)), (subscriptions) => { var _a; return (_a = this.sfuClient) === null || _a === void 0 ? void 0 : _a.updateSubscriptions(subscriptions); }));
         this.camera = new CameraManager(this);
         this.microphone = new MicrophoneManager(this);
     }
     registerEffects() {
-        this.leaveCallHooks.push(
+        this.leaveCallHooks.add(
         // handles updating the permissions context when the settings change.
         createSubscription(this.state.settings$, (settings) => {
             if (!settings)
                 return;
             this.permissionsContext.setCallSettings(settings);
-        }), 
+        }));
+        this.leaveCallHooks.add(
         // handle the case when the user permissions are modified.
         createSubscription(this.state.ownCapabilities$, (ownCapabilities) => {
             // update the permission context.
@@ -11280,7 +11606,8 @@ class Call {
                     });
                 }
             }
-        }), 
+        }));
+        this.leaveCallHooks.add(
         // handles the case when the user is blocked by the call owner.
         createSubscription(this.state.blockedUserIds$, (blockedUserIds) => __awaiter(this, void 0, void 0, function* () {
             if (!blockedUserIds)
@@ -11290,7 +11617,8 @@ class Call {
                 this.logger('info', 'Leaving call because of being blocked');
                 yield this.leave();
             }
-        })), 
+        })));
+        this.leaveCallHooks.add(
         // watch for auto drop cancellation
         createSubscription(this.state.callingState$, (callingState) => {
             if (!this.ringing)
@@ -11301,7 +11629,8 @@ class Call {
                 clearTimeout(this.dropTimeout);
                 this.dropTimeout = undefined;
             }
-        }), 
+        }));
+        this.leaveCallHooks.add(
         // "ringing" mode effects and event handlers
         createSubscription(this.ringingSubject, (isRinging) => {
             if (!isRinging)
@@ -11310,7 +11639,7 @@ class Call {
             if (this.state.callingState === exports.CallingState.IDLE) {
                 this.state.setCallingState(exports.CallingState.RINGING);
             }
-            this.leaveCallHooks.push(registerRingingCallEventHandlers(this));
+            this.leaveCallHooks.add(registerRingingCallEventHandlers(this));
         }));
     }
     on(eventName, fn) {
@@ -12537,7 +12866,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.8';
+const version = '0.3.10';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
@@ -13611,6 +13940,7 @@ exports.CallTypes = CallTypes;
 exports.CameraManager = CameraManager;
 exports.CameraManagerState = CameraManagerState;
 exports.CreateDeviceRequestPushProviderEnum = CreateDeviceRequestPushProviderEnum;
+exports.DynascaleManager = DynascaleManager;
 exports.ErrorFromResponse = ErrorFromResponse;
 exports.InputMediaDeviceManager = InputMediaDeviceManager;
 exports.InputMediaDeviceManagerState = InputMediaDeviceManagerState;