@stream-io/video-client 1.7.4 → 1.8.0

package/dist/index.cjs.js

@@ -3041,7 +3041,7 @@ const retryable = async (rpc, signal) => {
     return result;
 };
 
-const version = "1.7.4";
+const version = "1.8.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -4312,6 +4312,34 @@ class CallState {
                 return p;
             }));
         };
+        /**
+         * Update track subscription configuration for one or more participants.
+         * 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 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.updateParticipantTracks = (trackType, changes) => {
+            return this.updateParticipants(Object.entries(changes).reduce((acc, [sessionId, change]) => {
+                if (change.dimension) {
+                    change.dimension.height = Math.ceil(change.dimension.height);
+                    change.dimension.width = Math.ceil(change.dimension.width);
+                }
+                const prop = trackType === 'videoTrack'
+                    ? 'videoDimension'
+                    : trackType === 'screenShareTrack'
+                        ? 'screenShareDimension'
+                        : undefined;
+                if (prop) {
+                    acc[sessionId] = {
+                        [prop]: change.dimension,
+                    };
+                }
+                return acc;
+            }, {}));
+        };
         /**
          * Updates the call state with the data received from the server.
          *
@@ -7092,6 +7120,7 @@ const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: exports.VisibilityState.UNKNOWN,
     screenShareTrack: exports.VisibilityState.UNKNOWN,
 };
+const globalOverrideKey = Symbol('globalOverrideKey');
 /**
  * A manager class that handles dynascale related tasks like:
  *
@@ -7108,12 +7137,64 @@ class DynascaleManager {
      *
      * @param call the call to manage.
      */
-    constructor(call) {
+    constructor(callState, speaker) {
         /**
          * The viewport tracker instance.
          */
         this.viewportTracker = new ViewportTracker();
         this.logger = getLogger(['DynascaleManager']);
+        this.pendingSubscriptionsUpdate = null;
+        this.videoTrackSubscriptionOverridesSubject = new rxjs.BehaviorSubject({});
+        this.videoTrackSubscriptionOverrides$ = this.videoTrackSubscriptionOverridesSubject.asObservable();
+        this.incomingVideoSettings$ = this.videoTrackSubscriptionOverrides$.pipe(rxjs.map((overrides) => {
+            const { [globalOverrideKey]: globalSettings, ...participants } = overrides;
+            return {
+                enabled: globalSettings?.enabled !== false,
+                preferredResolution: globalSettings?.enabled
+                    ? globalSettings.dimension
+                    : undefined,
+                participants: Object.fromEntries(Object.entries(participants).map(([sessionId, participantOverride]) => [
+                    sessionId,
+                    {
+                        enabled: participantOverride?.enabled !== false,
+                        preferredResolution: participantOverride?.enabled
+                            ? participantOverride.dimension
+                            : undefined,
+                    },
+                ])),
+                isParticipantVideoEnabled: (sessionId) => overrides[sessionId]?.enabled ??
+                    overrides[globalOverrideKey]?.enabled ??
+                    true,
+            };
+        }), rxjs.shareReplay(1));
+        this.setVideoTrackSubscriptionOverrides = (override, sessionIds) => {
+            if (!sessionIds) {
+                return setCurrentValue(this.videoTrackSubscriptionOverridesSubject, override ? { [globalOverrideKey]: override } : {});
+            }
+            return setCurrentValue(this.videoTrackSubscriptionOverridesSubject, (overrides) => ({
+                ...overrides,
+                ...Object.fromEntries(sessionIds.map((id) => [id, override])),
+            }));
+        };
+        this.applyTrackSubscriptions = (debounceType = exports.DebounceType.SLOW) => {
+            if (this.pendingSubscriptionsUpdate) {
+                clearTimeout(this.pendingSubscriptionsUpdate);
+            }
+            const updateSubscriptions = () => {
+                this.pendingSubscriptionsUpdate = null;
+                this.sfuClient
+                    ?.updateSubscriptions(this.trackSubscriptions)
+                    .catch((err) => {
+                    this.logger('debug', `Failed to update track subscriptions`, err);
+                });
+            };
+            if (debounceType) {
+                this.pendingSubscriptionsUpdate = setTimeout(updateSubscriptions, debounceType);
+            }
+            else {
+                updateSubscriptions();
+            }
+        };
         /**
          * Will begin tracking the given element for visibility changes within the
          * configured viewport element (`call.setViewport`).
@@ -7125,7 +7206,7 @@ class DynascaleManager {
          */
         this.trackElementVisibility = (element, sessionId, trackType) => {
             const cleanup = this.viewportTracker.observe(element, (entry) => {
-                this.call.state.updateParticipant(sessionId, (participant) => {
+                this.callState.updateParticipant(sessionId, (participant) => {
                     const previousVisibilityState = participant.viewportVisibilityState ??
                         DEFAULT_VIEWPORT_VISIBILITY_STATE;
                     // observer triggers when the element is "moved" to be a fullscreen element
@@ -7147,7 +7228,7 @@ class DynascaleManager {
                 // 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) => {
+                this.callState.updateParticipant(sessionId, (participant) => {
                     const previousVisibilityState = participant.viewportVisibilityState ??
                         DEFAULT_VIEWPORT_VISIBILITY_STATE;
                     return {
@@ -7184,7 +7265,7 @@ class DynascaleManager {
          * @param trackType the kind of video.
          */
         this.bindVideoElement = (videoElement, sessionId, trackType) => {
-            const boundParticipant = this.call.state.findParticipantBySessionId(sessionId);
+            const boundParticipant = this.callState.findParticipantBySessionId(sessionId);
             if (!boundParticipant)
                 return;
             const requestTrackWithDimensions = (debounceType, dimension) => {
@@ -7196,9 +7277,12 @@ class DynascaleManager {
                     this.logger('debug', `Ignoring 0x0 dimension`, boundParticipant);
                     dimension = undefined;
                 }
-                this.call.updateSubscriptionsPartial(trackType, { [sessionId]: { dimension } }, debounceType);
+                this.callState.updateParticipantTracks(trackType, {
+                    [sessionId]: { dimension },
+                });
+                this.applyTrackSubscriptions(debounceType);
             };
-            const participant$ = this.call.state.participants$.pipe(rxjs.map((participants) => participants.find((participant) => participant.sessionId === sessionId)), rxjs.takeWhile((participant) => !!participant), rxjs.distinctUntilChanged(), rxjs.shareReplay({ bufferSize: 1, refCount: true }));
+            const participant$ = this.callState.participants$.pipe(rxjs.map((participants) => participants.find((participant) => participant.sessionId === sessionId)), rxjs.takeWhile((participant) => !!participant), rxjs.distinctUntilChanged(), rxjs.shareReplay({ bufferSize: 1, refCount: true }));
             /**
              * 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
@@ -7313,10 +7397,10 @@ class DynascaleManager {
          * @returns a cleanup function that will unbind the audio element.
          */
         this.bindAudioElement = (audioElement, sessionId, trackType) => {
-            const participant = this.call.state.findParticipantBySessionId(sessionId);
+            const participant = this.callState.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(), rxjs.shareReplay({ bufferSize: 1, refCount: true }));
+            const participant$ = this.callState.participants$.pipe(rxjs.map((participants) => participants.find((p) => p.sessionId === sessionId)), rxjs.takeWhile((p) => !!p), rxjs.distinctUntilChanged(), rxjs.shareReplay({ bufferSize: 1, refCount: true }));
             const updateMediaStreamSubscription = participant$
                 .pipe(rxjs.distinctUntilKeyChanged(trackType === 'screenShareAudioTrack'
                 ? 'screenShareAudioStream'
@@ -7336,7 +7420,7 @@ class DynascaleManager {
                         // audio output device shall be set after the audio element is played
                         // otherwise, the browser will not pick it up, and will always
                         // play audio through the system's default device
-                        const { selectedDevice } = this.call.speaker.state;
+                        const { selectedDevice } = this.speaker.state;
                         if (selectedDevice && 'setSinkId' in audioElement) {
                             audioElement.setSinkId(selectedDevice);
                         }
@@ -7345,13 +7429,13 @@ class DynascaleManager {
             });
             const sinkIdSubscription = !('setSinkId' in audioElement)
                 ? null
-                : this.call.speaker.state.selectedDevice$.subscribe((deviceId) => {
+                : this.speaker.state.selectedDevice$.subscribe((deviceId) => {
                     if (deviceId) {
                         audioElement.setSinkId(deviceId);
                     }
                 });
             const volumeSubscription = rxjs.combineLatest([
-                this.call.speaker.state.volume$,
+                this.speaker.state.volume$,
                 participant$.pipe(rxjs.distinctUntilKeyChanged('audioVolume')),
             ]).subscribe(([volume, p]) => {
                 audioElement.volume = p.audioVolume ?? volume;
@@ -7363,7 +7447,50 @@ class DynascaleManager {
                 updateMediaStreamSubscription.unsubscribe();
             };
         };
-        this.call = call;
+        this.callState = callState;
+        this.speaker = speaker;
+    }
+    setSfuClient(sfuClient) {
+        this.sfuClient = sfuClient;
+    }
+    get trackSubscriptions() {
+        const subscriptions = [];
+        for (const p of this.callState.remoteParticipants) {
+            // 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.
+            if (p.videoDimension && hasVideo(p)) {
+                const override = this.videoTrackSubscriptionOverrides[p.sessionId] ??
+                    this.videoTrackSubscriptionOverrides[globalOverrideKey];
+                if (override?.enabled !== false) {
+                    subscriptions.push({
+                        userId: p.userId,
+                        sessionId: p.sessionId,
+                        trackType: TrackType.VIDEO,
+                        dimension: override?.dimension ?? p.videoDimension,
+                    });
+                }
+            }
+            if (p.screenShareDimension && hasScreenShare(p)) {
+                subscriptions.push({
+                    userId: p.userId,
+                    sessionId: p.sessionId,
+                    trackType: TrackType.SCREEN_SHARE,
+                    dimension: p.screenShareDimension,
+                });
+            }
+            if (hasScreenShareAudio(p)) {
+                subscriptions.push({
+                    userId: p.userId,
+                    sessionId: p.sessionId,
+                    trackType: TrackType.SCREEN_SHARE_AUDIO,
+                });
+            }
+        }
+        return subscriptions;
+    }
+    get videoTrackSubscriptionOverrides() {
+        return getCurrentValue(this.videoTrackSubscriptionOverrides$);
     }
 }
 
@@ -9182,10 +9309,6 @@ class Call {
          * The state of this call.
          */
         this.state = new CallState();
-        /**
-         * The DynascaleManager instance.
-         */
-        this.dynascaleManager = new DynascaleManager(this);
         /**
          * The permissions context of this call.
          */
@@ -9195,7 +9318,6 @@ class Call {
          * @private
          */
         this.dispatcher = new Dispatcher();
-        this.trackSubscriptionsSubject = new rxjs.BehaviorSubject({ type: exports.DebounceType.MEDIUM, data: [] });
         this.sfuClientTag = 0;
         this.reconnectConcurrencyTag = Symbol('reconnectConcurrencyTag');
         this.reconnectAttempts = 0;
@@ -9336,6 +9458,7 @@ class Call {
                 this.publisher = undefined;
                 await this.sfuClient?.leaveAndClose(reason);
                 this.sfuClient = undefined;
+                this.dynascaleManager.setSfuClient(undefined);
                 this.state.setCallingState(exports.CallingState.LEFT);
                 // Call all leave call hooks, e.g. to clean up global event handlers
                 this.leaveCallHooks.forEach((hook) => hook());
@@ -9498,6 +9621,7 @@ class Call {
                 })
                 : previousSfuClient;
             this.sfuClient = sfuClient;
+            this.dynascaleManager.setSfuClient(sfuClient);
             const clientDetails = getClientDetails();
             // we don't need to send JoinRequest if we are re-using an existing healthy SFU client
             if (previousSfuClient !== sfuClient) {
@@ -9570,11 +9694,10 @@ class Call {
             const strategy = this.reconnectStrategy;
             const performingRejoin = strategy === WebsocketReconnectStrategy.REJOIN;
             const announcedTracks = this.publisher?.getAnnouncedTracks() || [];
-            const subscribedTracks = getCurrentValue(this.trackSubscriptionsSubject);
             return {
                 strategy,
                 announcedTracks,
-                subscriptions: subscribedTracks.data || [],
+                subscriptions: this.dynascaleManager.trackSubscriptions,
                 reconnectAttempt: this.reconnectAttempts,
                 fromSfuId: migratingFromSfuId || '',
                 previousSessionId: performingRejoin ? previousSessionId || '' : '',
@@ -9944,7 +10067,7 @@ class Call {
             const { remoteParticipants } = this.state;
             if (remoteParticipants.length <= 0)
                 return;
-            this.updateSubscriptions(remoteParticipants, exports.DebounceType.FAST);
+            this.dynascaleManager.applyTrackSubscriptions(undefined);
         };
         /**
          * Starts publishing the given video stream to the call.
@@ -10067,71 +10190,6 @@ class Call {
                 this.logger('warn', 'Failed to notify stop of noise cancellation', err);
             });
         };
-        /**
-         * Update track subscription configuration for one or more participants.
-         * 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 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 = (trackType, changes, type = exports.DebounceType.SLOW) => {
-            const participants = this.state.updateParticipants(Object.entries(changes).reduce((acc, [sessionId, change]) => {
-                if (change.dimension) {
-                    change.dimension.height = Math.ceil(change.dimension.height);
-                    change.dimension.width = Math.ceil(change.dimension.width);
-                }
-                const prop = trackType === 'videoTrack'
-                    ? 'videoDimension'
-                    : trackType === 'screenShareTrack'
-                        ? 'screenShareDimension'
-                        : undefined;
-                if (prop) {
-                    acc[sessionId] = {
-                        [prop]: change.dimension,
-                    };
-                }
-                return acc;
-            }, {}));
-            this.updateSubscriptions(participants, type);
-        };
-        this.updateSubscriptions = (participants, type = exports.DebounceType.SLOW) => {
-            const subscriptions = [];
-            for (const p of participants) {
-                // we don't want to subscribe to our own tracks
-                if (p.isLocalParticipant)
-                    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.
-                if (p.videoDimension && hasVideo(p)) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.VIDEO,
-                        dimension: p.videoDimension,
-                    });
-                }
-                if (p.screenShareDimension && hasScreenShare(p)) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.SCREEN_SHARE,
-                        dimension: p.screenShareDimension,
-                    });
-                }
-                if (hasScreenShareAudio(p)) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.SCREEN_SHARE_AUDIO,
-                    });
-                }
-            }
-            // schedule update
-            this.trackSubscriptionsSubject.next({ type, data: subscriptions });
-        };
         /**
          * Will enhance the reported stats with additional participant-specific information (`callStatsReport$` state [store variable](./StreamVideoClient.md/#readonlystatestore)).
          * This is usually helpful when detailed stats for a specific participant are needed.
@@ -10711,6 +10769,33 @@ class Call {
                 imageElement.removeEventListener('error', handleError);
             };
         };
+        /**
+         * Specify preference for incoming video resolution. The preference will
+         * be matched as close as possible, but actual resolution will depend
+         * on the video source quality and client network conditions. Will enable
+         * incoming video, if previously disabled.
+         *
+         * @param resolution preferred resolution, or `undefined` to clear preference
+         * @param sessionIds optionally specify session ids of the participants this
+         * preference has effect on. Affects all participants by default.
+         */
+        this.setPreferredIncomingVideoResolution = (resolution, sessionIds) => {
+            this.dynascaleManager.setVideoTrackSubscriptionOverrides(resolution
+                ? {
+                    enabled: true,
+                    dimension: resolution,
+                }
+                : undefined, sessionIds);
+            this.dynascaleManager.applyTrackSubscriptions();
+        };
+        /**
+         * Enables or disables incoming video from all remote call participants,
+         * and removes any preference for preferred resolution.
+         */
+        this.setIncomingVideoEnabled = (enabled) => {
+            this.dynascaleManager.setVideoTrackSubscriptionOverrides(enabled ? undefined : { enabled: false });
+            this.dynascaleManager.applyTrackSubscriptions();
+        };
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -10732,6 +10817,7 @@ class Call {
         this.microphone = new MicrophoneManager(this);
         this.speaker = new SpeakerManager(this);
         this.screenShare = new ScreenShareManager(this);
+        this.dynascaleManager = new DynascaleManager(this.state, this.speaker);
     }
     async setup() {
         await withoutConcurrency(this.joinLeaveConcurrencyTag, async () => {
@@ -10744,9 +10830,6 @@ class Call {
             this.leaveCallHooks.add(registerEventHandlers(this, this.dispatcher));
             this.registerEffects();
             this.registerReconnectHandlers();
-            this.leaveCallHooks.add(createSubscription(this.trackSubscriptionsSubject.pipe(rxjs.debounce((v) => rxjs.timer(v.type)), rxjs.map((v) => v.data)), (subscriptions) => this.sfuClient?.updateSubscriptions(subscriptions).catch((err) => {
-                this.logger('debug', `Failed to update track subscriptions`, err);
-            })));
             if (this.state.callingState === exports.CallingState.LEFT) {
                 this.state.setCallingState(exports.CallingState.IDLE);
             }
@@ -12392,7 +12475,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "1.7.4";
+            const version = "1.8.0";
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };