@stream-io/video-client 0.7.9 → 0.7.10

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.7.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.7.9...@stream-io/video-client-0.7.10) (2024-04-30)
+
+
+### Bug Fixes
+
+* **state:** optimized Call State updates ([#1330](https://github.com/GetStream/stream-video-js/issues/1330)) ([e5f9f88](https://github.com/GetStream/stream-video-js/commit/e5f9f882df95761bfecbd6b38832f013b0e7a75e))
+
 ### [0.7.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.7.8...@stream-io/video-client-0.7.9) (2024-04-26)
 
 

package/dist/index.browser.es.js

@@ -6843,6 +6843,7 @@ class CallState {
         this.anonymousParticipantCountSubject = new BehaviorSubject(0);
         this.participantsSubject = new BehaviorSubject([]);
         this.callStatsReportSubject = new BehaviorSubject(undefined);
+        this.logger = getLogger(['CallState']);
         /**
          * A list of comparators that are used to sort the participants.
          *
@@ -7003,21 +7004,22 @@ class CallState {
          * @param participant the participant to update or add.
          */
         this.updateOrAddParticipant = (sessionId, participant) => {
-            if (!this.findParticipantBySessionId(sessionId)) {
-                return this.setParticipants((participants) => [
-                    ...participants,
-                    participant,
-                ]);
-            }
-            return this.setParticipants((participants) => participants.map((p) => {
-                if (p.sessionId === sessionId) {
-                    return {
-                        ...p,
-                        ...participant,
-                    };
-                }
-                return p;
-            }));
+            return this.setParticipants((participants) => {
+                let add = true;
+                const nextParticipants = participants.map((p) => {
+                    if (p.sessionId === sessionId) {
+                        add = false;
+                        return {
+                            ...p,
+                            ...participant,
+                        };
+                    }
+                    return p;
+                });
+                if (add)
+                    nextParticipants.push(participant);
+                return nextParticipants;
+            });
         };
         /**
          * Updates all participants in the current call whose session ID is in the given `sessionIds`.
@@ -7242,7 +7244,6 @@ class CallState {
                 this.setCurrentValue(this.ownCapabilitiesSubject, event.own_capabilities);
             }
         };
-        this.logger = getLogger(['CallState']);
         this.participants$ = this.participantsSubject.asObservable().pipe(
         // maintain stable-sort by mutating the participants stored
         // in the original subject
@@ -7252,30 +7253,52 @@ class CallState {
         this.pinnedParticipants$ = this.participants$.pipe(map$1((participants) => participants.filter((p) => !!p.pin)), shareReplay({ bufferSize: 1, refCount: true }));
         this.dominantSpeaker$ = this.participants$.pipe(map$1((participants) => participants.find((p) => p.isDominantSpeaker)), shareReplay({ bufferSize: 1, refCount: true }));
         this.hasOngoingScreenShare$ = this.participants$.pipe(map$1((participants) => participants.some((p) => p.publishedTracks.includes(TrackType.SCREEN_SHARE))), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
-        this.startedAt$ = this.startedAtSubject.asObservable();
-        this.participantCount$ = this.participantCountSubject.asObservable();
-        this.anonymousParticipantCount$ =
-            this.anonymousParticipantCountSubject.asObservable();
-        this.callStatsReport$ = this.callStatsReportSubject.asObservable();
-        this.members$ = this.membersSubject.asObservable();
-        this.ownCapabilities$ = this.ownCapabilitiesSubject.asObservable();
-        this.callingState$ = this.callingStateSubject.asObservable();
-        this.backstage$ = this.backstageSubject.asObservable();
-        this.blockedUserIds$ = this.blockedUserIdsSubject.asObservable();
+        // dates
         this.createdAt$ = this.createdAtSubject.asObservable();
         this.endedAt$ = this.endedAtSubject.asObservable();
         this.startsAt$ = this.startsAtSubject.asObservable();
+        this.startedAt$ = this.startedAtSubject.asObservable();
         this.updatedAt$ = this.updatedAtSubject.asObservable();
+        this.callStatsReport$ = this.callStatsReportSubject.asObservable();
+        this.members$ = this.membersSubject.asObservable();
+        // complex objects should work as streams of data
         this.createdBy$ = this.createdBySubject.asObservable();
         this.custom$ = this.customSubject.asObservable();
         this.egress$ = this.egressSubject.asObservable();
         this.ingress$ = this.ingressSubject.asObservable();
-        this.recording$ = this.recordingSubject.asObservable();
         this.session$ = this.sessionSubject.asObservable();
         this.settings$ = this.settingsSubject.asObservable();
-        this.transcribing$ = this.transcribingSubject.asObservable();
         this.endedBy$ = this.endedBySubject.asObservable();
         this.thumbnails$ = this.thumbnailsSubject.asObservable();
+        /**
+         * Performs shallow comparison of two arrays.
+         * Expects primitive values: [1, 2, 3] is equal to [2, 1, 3].
+         */
+        const isShallowEqual = (a, b) => {
+            if (a.length !== b.length)
+                return false;
+            for (const item of a)
+                if (!b.includes(item))
+                    return false;
+            for (const item of b)
+                if (!a.includes(item))
+                    return false;
+            return true;
+        };
+        /**
+         * Creates an Observable from the given subject by piping to the
+         * `distinctUntilChanged()` operator.
+         */
+        const duc = (subject, comparator) => subject.asObservable().pipe(distinctUntilChanged(comparator));
+        // primitive values should only emit once the value they hold changes
+        this.anonymousParticipantCount$ = duc(this.anonymousParticipantCountSubject);
+        this.blockedUserIds$ = duc(this.blockedUserIdsSubject, isShallowEqual);
+        this.backstage$ = duc(this.backstageSubject);
+        this.callingState$ = duc(this.callingStateSubject);
+        this.ownCapabilities$ = duc(this.ownCapabilitiesSubject, isShallowEqual);
+        this.participantCount$ = duc(this.participantCountSubject);
+        this.recording$ = duc(this.recordingSubject);
+        this.transcribing$ = duc(this.transcribingSubject);
         this.eventHandlers = {
             // these events are not updating the call state:
             'call.closed_caption': undefined,
@@ -14842,7 +14865,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.7.9" ;
+            const version = "0.7.10" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };