@stream-io/video-client 0.3.9 → 0.3.11

package/dist/index.browser.es.js

@@ -4,7 +4,7 @@ import { ServiceType, stackIntercept } from '@protobuf-ts/runtime-rpc';
 import axios, { AxiosHeaders } from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport } from '@protobuf-ts/twirp-transport';
-import { ReplaySubject, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, Observable, debounceTime, concatMap, from, shareReplay, merge, map as map$2, combineLatest, filter, pairwise, takeWhile, tap, debounce, timer } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, map as map$2, takeWhile, distinctUntilChanged as distinctUntilChanged$1, distinctUntilKeyChanged, Observable, debounceTime, concatMap, from, shareReplay, merge, combineLatest, filter, pairwise, tap, debounce, timer } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import { UAParser } from 'ua-parser-js';
 import WebSocket from 'isomorphic-ws';
@@ -5711,7 +5711,7 @@ var VisibilityState;
 })(VisibilityState || (VisibilityState = {}));
 var DebounceType;
 (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";
@@ -6100,10 +6100,10 @@ const getPreferredCodecs = (kind, preferredCodec, codecToRemove) => {
     cap.codecs.forEach((c) => {
         const codec = c.mimeType.toLowerCase();
         logger === null || logger === void 0 ? void 0 : logger('debug', `Found supported codec: ${codec}`);
-        const shouldRemoveCodec = codecToRemove && codec === `${kind}/${codecToRemove}`;
+        const shouldRemoveCodec = codecToRemove && codec === `${kind}/${codecToRemove.toLowerCase()}`;
         if (shouldRemoveCodec)
             return;
-        const matchesCodec = codec === `${kind}/${preferredCodec}`;
+        const matchesCodec = codec === `${kind}/${preferredCodec.toLowerCase()}`;
         if (!matchesCodec) {
             unmatched.push(c);
             return;
@@ -7586,10 +7586,20 @@ const retryable = (rpc, logger) => __awaiter(void 0, void 0, void 0, function* (
  */
 const getCurrentValue = (observable$) => {
     let value;
+    let err = undefined;
     observable$
         .pipe(take(1))
-        .subscribe((v) => (value = v))
+        .subscribe({
+        next: (v) => {
+            value = v;
+        },
+        error: (e) => {
+            err = e;
+        },
+    })
         .unsubscribe();
+    if (err)
+        throw err;
     return value;
 };
 /**
@@ -7948,8 +7958,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 === VisibilityState.INVISIBLE ||
-    b.viewportVisibilityState === VisibilityState.INVISIBLE);
+const ifInvisibleBy = conditional((a, b) => {
+    var _a, _b;
+    return ((_a = a.viewportVisibilityState) === null || _a === void 0 ? void 0 : _a.videoTrack) === VisibilityState.INVISIBLE ||
+        ((_b = b.viewportVisibilityState) === null || _b === void 0 ? void 0 : _b.videoTrack) === VisibilityState.INVISIBLE;
+});
 /**
  * The default sorting preset.
  */
@@ -8826,7 +8839,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: VisibilityState.UNKNOWN,
+            viewportVisibilityState: {
+                videoTrack: VisibilityState.UNKNOWN,
+                screenShareTrack: VisibilityState.UNKNOWN,
+            },
         }));
     };
 };
@@ -9383,6 +9399,234 @@ class ViewportTracker {
     }
 }
 
+const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
+    videoTrack: VisibilityState.UNKNOWN,
+    screenShareTrack: 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
+                        ? VisibilityState.VISIBLE
+                        : 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]: 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(map$2((participants) => participants.find((participant) => participant.sessionId === sessionId)), takeWhile((participant) => !!participant), distinctUntilChanged$1());
+            // keep copy for resize observer handler
+            let viewportVisibilityState;
+            const viewportVisibilityStateSubscription = boundParticipant.isLocalParticipant
+                ? null
+                : participant$
+                    .pipe(map$2((p) => { var _a; return (_a = p.viewportVisibilityState) === null || _a === void 0 ? void 0 : _a[trackType]; }), distinctUntilChanged$1())
+                    .subscribe((nextViewportVisibilityState) => {
+                    // skip initial trigger
+                    if (!viewportVisibilityState) {
+                        viewportVisibilityState =
+                            nextViewportVisibilityState !== null && nextViewportVisibilityState !== void 0 ? nextViewportVisibilityState : VisibilityState.UNKNOWN;
+                        return;
+                    }
+                    viewportVisibilityState =
+                        nextViewportVisibilityState !== null && nextViewportVisibilityState !== void 0 ? nextViewportVisibilityState : VisibilityState.UNKNOWN;
+                    if (nextViewportVisibilityState === VisibilityState.INVISIBLE) {
+                        return requestTrackWithDimensions(DebounceType.MEDIUM, undefined);
+                    }
+                    requestTrackWithDimensions(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 === VisibilityState.INVISIBLE) {
+                        return;
+                    }
+                    requestTrackWithDimensions(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(distinctUntilKeyChanged('publishedTracks'), map$2((p) => p.publishedTracks.includes(trackType === 'videoTrack'
+                    ? TrackType.VIDEO
+                    : TrackType.SCREEN_SHARE)), distinctUntilChanged$1())
+                    .subscribe((isPublishing) => {
+                    if (isPublishing) {
+                        // the participant just started to publish a track
+                        requestTrackWithDimensions(DebounceType.IMMEDIATE, {
+                            width: videoElement.clientWidth,
+                            height: videoElement.clientHeight,
+                        });
+                    }
+                    else {
+                        // the participant just stopped publishing a track
+                        requestTrackWithDimensions(DebounceType.IMMEDIATE, undefined);
+                    }
+                });
+            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.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(map$2((participants) => participants.find((p) => p.sessionId === sessionId)), takeWhile((p) => !!p), distinctUntilChanged$1());
+            const updateMediaStreamSubscription = participant$
+                .pipe(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.
@@ -9522,127 +9766,6 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
-class InputMediaDeviceManagerState {
-    constructor(disableMode = 'stop-tracks') {
-        this.disableMode = disableMode;
-        this.statusSubject = new BehaviorSubject(undefined);
-        this.mediaStreamSubject = new BehaviorSubject(undefined);
-        this.selectedDeviceSubject = new 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(distinctUntilChanged$1());
-        this.status$ = this.statusSubject
-            .asObservable()
-            .pipe(distinctUntilChanged$1());
-    }
-    /**
-     * 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 BehaviorSubject(undefined);
-        this.direction$ = this.directionSubject
-            .asObservable()
-            .pipe(distinctUntilChanged$1());
-    }
-    /**
-     * 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 Observable((subscriber) => {
         navigator.mediaDevices
@@ -10038,6 +10161,127 @@ class InputMediaDeviceManager {
     }
 }
 
+class InputMediaDeviceManagerState {
+    constructor(disableMode = 'stop-tracks') {
+        this.disableMode = disableMode;
+        this.statusSubject = new BehaviorSubject(undefined);
+        this.mediaStreamSubject = new BehaviorSubject(undefined);
+        this.selectedDeviceSubject = new 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(distinctUntilChanged$1());
+        this.status$ = this.statusSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+    }
+    /**
+     * 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 BehaviorSubject(undefined);
+        this.direction$ = this.directionSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+    }
+    /**
+     * 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());
@@ -10173,14 +10417,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.
          */
@@ -10198,7 +10442,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.
@@ -10504,7 +10748,7 @@ class Call {
                 unsubscribeOfflineEvent();
                 this.state.setCallingState(CallingState.OFFLINE);
             });
-            this.leaveCallHooks.push(() => {
+            this.leaveCallHooks.add(() => {
                 unsubscribeOnlineEvent();
                 unsubscribeOfflineEvent();
             });
@@ -10581,7 +10825,10 @@ class Call {
                     return currentParticipants.map((p) => {
                         const participant = Object.assign(p, {
                             isLocalParticipant: p.sessionId === sfuClient.sessionId,
-                            viewportVisibilityState: VisibilityState.UNKNOWN,
+                            viewportVisibilityState: {
+                                videoTrack: VisibilityState.UNKNOWN,
+                                screenShareTrack: VisibilityState.UNKNOWN,
+                            },
                         });
                         // We need to preserve the local state of the participant
                         // (e.g. videoDimension, visibilityState, pinnedAt, etc.)
@@ -10738,11 +10985,19 @@ 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 = DebounceType.SLOW) => {
+        this.updateSubscriptionsPartial = (trackType, changes, type = 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]) => {
                 var _a, _b;
                 if ((_a = change.dimension) === null || _a === void 0 ? void 0 : _a.height) {
@@ -10751,9 +11006,9 @@ class Call {
                 if ((_b = change.dimension) === null || _b === void 0 ? void 0 : _b.width) {
                     change.dimension.width = Math.ceil(change.dimension.width);
                 }
-                const prop = kind === 'video'
+                const prop = trackType === 'videoTrack'
                     ? 'videoDimension'
-                    : kind === 'screen'
+                    : trackType === 'screenShareTrack'
                         ? 'screenShareDimension'
                         : undefined;
                 if (prop) {
@@ -10769,10 +11024,10 @@ class Call {
         };
         this.updateSubscriptions = (participants, type = 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.
@@ -10793,7 +11048,7 @@ class Call {
                         dimension: p.screenShareDimension,
                     });
                 }
-            });
+            }
             // schedule update
             this.trackSubscriptionsSubject.next({ type, data: subscriptions });
         };
@@ -11182,7 +11437,7 @@ class Call {
                 this.dropTimeout = setTimeout(() => this.leave(), timeoutMs);
             }), takeWhile(() => !!this.clientStore.calls.find((call) => call.cid === this.cid)))
                 .subscribe();
-            this.leaveCallHooks.push(() => {
+            this.leaveCallHooks.add(() => {
                 !subscription.closed && subscription.unsubscribe();
             });
         };
@@ -11209,6 +11464,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}`;
@@ -11230,20 +11548,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(debounce((v) => timer(v.type)), map$2((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(debounce((v) => timer(v.type)), map$2((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.
@@ -11264,7 +11583,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)
@@ -11274,7 +11594,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)
@@ -11285,7 +11606,8 @@ class Call {
                 clearTimeout(this.dropTimeout);
                 this.dropTimeout = undefined;
             }
-        }), 
+        }));
+        this.leaveCallHooks.add(
         // "ringing" mode effects and event handlers
         createSubscription(this.ringingSubject, (isRinging) => {
             if (!isRinging)
@@ -11294,7 +11616,7 @@ class Call {
             if (this.state.callingState === CallingState.IDLE) {
                 this.state.setCallingState(CallingState.RINGING);
             }
-            this.leaveCallHooks.push(registerRingingCallEventHandlers(this));
+            this.leaveCallHooks.add(registerRingingCallEventHandlers(this));
         }));
     }
     on(eventName, fn) {
@@ -12520,7 +12842,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.9';
+const version = '0.3.11';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
@@ -13580,5 +13902,5 @@ var browsers = /*#__PURE__*/Object.freeze({
     isSafari: isSafari
 });
 
-export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, MicrophoneManagerState, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, 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 };
+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, 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