@stream-io/video-client 0.0.1-alpha.88 → 0.0.1-alpha.89

package/dist/index.browser.es.js

@@ -4680,7 +4680,7 @@ const watchChangePublishQuality = (dispatcher, call) => {
         });
     });
 };
-const watchConnectionQualityChanged = (dispatcher, store) => {
+const watchConnectionQualityChanged = (dispatcher, state) => {
     return dispatcher.on('connectionQualityChanged', (e) => {
         if (e.eventPayload.oneofKind !== 'connectionQualityChanged')
             return;
@@ -4688,7 +4688,7 @@ const watchConnectionQualityChanged = (dispatcher, store) => {
         const { connectionQualityUpdates } = connectionQualityChanged;
         if (!connectionQualityUpdates)
             return;
-        store.updateParticipants(connectionQualityUpdates.reduce((patches, update) => {
+        state.updateParticipants(connectionQualityUpdates.reduce((patches, update) => {
             const { sessionId, connectionQuality } = update;
             patches[sessionId] = {
                 connectionQuality,
@@ -4701,15 +4701,15 @@ const watchConnectionQualityChanged = (dispatcher, store) => {
 /**
  * An event responder which handles the `participantJoined` event.
  */
-const watchParticipantJoined = (dispatcher, store) => {
+const watchParticipantJoined = (dispatcher, state) => {
     return dispatcher.on('participantJoined', (e) => {
         if (e.eventPayload.oneofKind !== 'participantJoined')
             return;
         const { participant } = e.eventPayload.participantJoined;
         if (!participant)
             return;
-        store.setCurrentValue(store.participantsSubject, (currentParticipants) => [
-            ...currentParticipants,
+        state.setParticipants((participants) => [
+            ...participants,
             Object.assign(Object.assign({}, participant), { viewportVisibilityState: VisibilityState.UNKNOWN }),
         ]);
     });
@@ -4717,7 +4717,7 @@ const watchParticipantJoined = (dispatcher, store) => {
 /**
  * An event responder which handles the `participantLeft` event.
  */
-const watchParticipantLeft = (dispatcher, store) => {
+const watchParticipantLeft = (dispatcher, state) => {
     return dispatcher.on('participantLeft', (e) => {
         if (e.eventPayload.oneofKind !== 'participantLeft')
             return;
@@ -4730,19 +4730,19 @@ const watchParticipantLeft = (dispatcher, store) => {
         //   console.warn('Received participantLeft notification for a unknown call');
         //   return;
         // }
-        store.setCurrentValue(store.participantsSubject, (participants) => participants.filter((p) => p.sessionId !== participant.sessionId));
+        state.setParticipants((participants) => participants.filter((p) => p.sessionId !== participant.sessionId));
     });
 };
 /**
  * An event responder which handles the `trackPublished` event.
  * The SFU will send this event when a participant publishes a track.
  */
-const watchTrackPublished = (dispatcher, store) => {
+const watchTrackPublished = (dispatcher, state) => {
     return dispatcher.on('trackPublished', (e) => {
         if (e.eventPayload.oneofKind !== 'trackPublished')
             return;
         const { trackPublished: { type, sessionId }, } = e.eventPayload;
-        store.updateParticipant(sessionId, (p) => ({
+        state.updateParticipant(sessionId, (p) => ({
             publishedTracks: [...p.publishedTracks, type].filter(unique),
         }));
     });
@@ -4751,12 +4751,12 @@ const watchTrackPublished = (dispatcher, store) => {
  * An event responder which handles the `trackUnpublished` event.
  * The SFU will send this event when a participant unpublishes a track.
  */
-const watchTrackUnpublished = (dispatcher, store) => {
+const watchTrackUnpublished = (dispatcher, state) => {
     return dispatcher.on('trackUnpublished', (e) => {
         if (e.eventPayload.oneofKind !== 'trackUnpublished')
             return;
         const { trackUnpublished: { type, sessionId }, } = e.eventPayload;
-        store.updateParticipant(sessionId, (p) => ({
+        state.updateParticipant(sessionId, (p) => ({
             publishedTracks: p.publishedTracks.filter((t) => t !== type),
         }));
     });
@@ -4766,15 +4766,15 @@ const unique = (v, i, arr) => arr.indexOf(v) === i;
 /**
  * Watches for `dominantSpeakerChanged` events.
  */
-const watchDominantSpeakerChanged = (dispatcher, store) => {
+const watchDominantSpeakerChanged = (dispatcher, state) => {
     return dispatcher.on('dominantSpeakerChanged', (e) => {
+        var _a;
         if (e.eventPayload.oneofKind !== 'dominantSpeakerChanged')
             return;
         const { dominantSpeakerChanged: { sessionId }, } = e.eventPayload;
-        const dominantSpeaker = store.getCurrentValue(store.dominantSpeaker$);
-        if (sessionId === (dominantSpeaker === null || dominantSpeaker === void 0 ? void 0 : dominantSpeaker.sessionId))
+        if (sessionId === ((_a = state.dominantSpeaker) === null || _a === void 0 ? void 0 : _a.sessionId))
             return;
-        store.setCurrentValue(store.participantsSubject, (participants) => participants.map((participant) => {
+        state.setParticipants((participants) => participants.map((participant) => {
             // mark the new dominant speaker
             if (participant.sessionId === sessionId) {
                 return Object.assign(Object.assign({}, participant), { isDominantSpeaker: true });
@@ -4790,12 +4790,12 @@ const watchDominantSpeakerChanged = (dispatcher, store) => {
 /**
  * Watches for `audioLevelChanged` events.
  */
-const watchAudioLevelChanged = (dispatcher, store) => {
+const watchAudioLevelChanged = (dispatcher, state) => {
     return dispatcher.on('audioLevelChanged', (e) => {
         if (e.eventPayload.oneofKind !== 'audioLevelChanged')
             return;
         const { audioLevels } = e.eventPayload.audioLevelChanged;
-        store.updateParticipants(audioLevels.reduce((patches, current) => {
+        state.updateParticipants(audioLevels.reduce((patches, current) => {
             patches[current.sessionId] = {
                 audioLevel: current.level,
                 isSpeaking: current.isSpeaking,
@@ -4900,14 +4900,13 @@ const getCurrentValue = (observable$) => {
  * @return the updated value.
  */
 const setCurrentValue = (subject, update) => {
-    const currentValue = getCurrentValue(subject);
     const next = 
     // TypeScript needs more context to infer the type of update
     typeof update === 'function' && update instanceof Function
-        ? update(currentValue)
+        ? update(getCurrentValue(subject))
         : update;
     subject.next(next);
-    return getCurrentValue(subject);
+    return next;
 };
 
 var rxUtils = /*#__PURE__*/Object.freeze({
@@ -4953,13 +4952,41 @@ class StreamVideoWriteableStateStore {
          * @return the updated value.
          */
         this.setCurrentValue = setCurrentValue;
+        /**
+         * Sets the currently connected user.
+         *
+         * @internal
+         * @param user the user to set as connected.
+         */
+        this.setConnectedUser = (user) => {
+            return this.setCurrentValue(this.connectedUserSubject, user);
+        };
+        /**
+         * Sets the list of objects describing all created calls that
+         * have not been yet accepted, rejected nor cancelled.
+         *
+         * @internal
+         * @param calls the calls to set as pending.
+         */
+        this.setPendingCalls = (calls) => {
+            return this.setCurrentValue(this.pendingCallsSubject, calls);
+        };
+        /**
+         * Sets a call controller instance.
+         *
+         * @internal
+         * @param call the call instance.
+         */
+        this.setActiveCall = (call) => {
+            return this.setCurrentValue(this.activeCallSubject, call);
+        };
         this.incomingCalls$ = this.pendingCallsSubject.pipe(combineLatestWith(this.connectedUserSubject), map$1(([pendingCalls, connectedUser]) => pendingCalls.filter((call) => {
-            const meta = call.state.getCurrentValue(call.state.metadata$);
-            return (meta === null || meta === void 0 ? void 0 : meta.created_by.id) !== (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id);
+            var _a;
+            return ((_a = call.state.metadata) === null || _a === void 0 ? void 0 : _a.created_by.id) !== (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id);
         })));
         this.outgoingCalls$ = this.pendingCallsSubject.pipe(combineLatestWith(this.connectedUserSubject), map$1(([pendingCalls, connectedUser]) => pendingCalls.filter((call) => {
-            const meta = call.state.getCurrentValue(call.state.metadata$);
-            return (meta === null || meta === void 0 ? void 0 : meta.created_by.id) === (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id);
+            var _a;
+            return ((_a = call.state.metadata) === null || _a === void 0 ? void 0 : _a.created_by.id) === (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id);
         })));
         this.activeCallSubject.subscribe((activeCall) => {
             if (activeCall) {
@@ -4969,6 +4996,52 @@ class StreamVideoWriteableStateStore {
             }
         });
     }
+    /**
+     * The currently connected user.
+     */
+    get connectedUser() {
+        return this.getCurrentValue(this.connectedUserSubject);
+    }
+    /**
+     * A list of objects describing all created calls that
+     * have not been yet accepted, rejected nor cancelled.
+     */
+    get pendingCalls() {
+        return this.getCurrentValue(this.pendingCallsSubject);
+    }
+    /**
+     * A list of objects describing incoming calls.
+     */
+    get incomingCalls() {
+        return this.getCurrentValue(this.incomingCalls$);
+    }
+    /**
+     * A list of objects describing calls initiated by the current user.
+     */
+    get outgoingCalls() {
+        return this.getCurrentValue(this.outgoingCalls$);
+    }
+    /**
+     * A notification describing accepted call.
+     */
+    get acceptedCall() {
+        return this.getCurrentValue(this.acceptedCallSubject);
+    }
+    /**
+     * Sets a notification describing accepted call.
+     *
+     * @internal
+     * @param call the call event.
+     */
+    setAcceptedCall(call) {
+        return this.setCurrentValue(this.acceptedCallSubject, call);
+    }
+    /**
+     * A call controller instance.
+     */
+    get activeCall() {
+        return this.getCurrentValue(this.activeCallSubject);
+    }
 }
 /**
  * A reactive store that exposes state variables in a reactive manner.
@@ -4977,6 +5050,13 @@ class StreamVideoWriteableStateStore {
  */
 class StreamVideoReadOnlyStateStore {
     constructor(store) {
+        /**
+         * This method allows you the get the current value of a state variable.
+         *
+         * @param observable the observable to get the current value of.
+         * @returns the current value of the observable.
+         */
+        this.getCurrentValue = getCurrentValue;
         // convert and expose subjects as observables
         this.connectedUser$ = store.connectedUserSubject.asObservable();
         this.pendingCalls$ = store.pendingCallsSubject.asObservable();
@@ -4985,8 +5065,43 @@ class StreamVideoReadOnlyStateStore {
         // re-expose observables
         this.incomingCalls$ = store.incomingCalls$;
         this.outgoingCalls$ = store.outgoingCalls$;
-        // re-expose methods
-        this.getCurrentValue = store.getCurrentValue;
+    }
+    /**
+     * The current user connected over WS to the backend.
+     */
+    get connectedUser() {
+        return getCurrentValue(this.connectedUser$);
+    }
+    /**
+     * A list of objects describing all created calls that
+     * have not been yet accepted, rejected nor cancelled.
+     */
+    get pendingCalls() {
+        return getCurrentValue(this.pendingCalls$);
+    }
+    /**
+     * A list of objects describing incoming calls.
+     */
+    get incomingCalls() {
+        return getCurrentValue(this.incomingCalls$);
+    }
+    /**
+     * A list of objects describing calls initiated by the current user.
+     */
+    get outgoingCalls() {
+        return getCurrentValue(this.outgoingCalls$);
+    }
+    /**
+     * The call data describing an incoming call accepted by the current user.
+     */
+    get acceptedCall() {
+        return getCurrentValue(this.acceptedCall$);
+    }
+    /**
+     * The currenlty active call.
+     */
+    get activeCall() {
+        return getCurrentValue(this.activeCall$);
     }
 }
 
@@ -5317,6 +5432,79 @@ class CallState {
          * @return the updated value.
          */
         this.setCurrentValue = setCurrentValue;
+        /**
+         * Sets the list of participants in the current call.
+         *
+         * @internal
+         *
+         * @param participants the list of participants.
+         */
+        this.setParticipants = (participants) => {
+            return this.setCurrentValue(this.participantsSubject, participants);
+        };
+        /**
+         * Sets the calling state.
+         *
+         * @internal
+         * @param state the new calling state.
+         */
+        this.setCallingState = (state) => {
+            return this.setCurrentValue(this.callingStateSubject, state);
+        };
+        /**
+         * Sets the list of call recordings.
+         *
+         * @internal
+         * @param recordings the list of call recordings.
+         */
+        this.setCallRecordingsList = (recordings) => {
+            return this.setCurrentValue(this.callRecordingListSubject, recordings);
+        };
+        /**
+         * Sets whether a call recording is in progress.
+         *
+         * @param inProgress whether a call recording is in progress.
+         */
+        this.setCallRecordingInProgress = (inProgress) => {
+            return this.setCurrentValue(this.callRecordingInProgressSubject, inProgress);
+        };
+        /**
+         * Sets the last call permission request.
+         *
+         * @internal
+         * @param request the last call permission request.
+         */
+        this.setCallPermissionRequest = (request) => {
+            return this.setCurrentValue(this.callPermissionRequestSubject, request);
+        };
+        /**
+         * Sets the call stats report.
+         *
+         * @internal
+         * @param report the report to set.
+         */
+        this.setCallStatsReport = (report) => {
+            return this.setCurrentValue(this.callStatsReportSubject, report);
+        };
+        /**
+         * Sets the metadata of the current call.
+         *
+         * @internal
+         *
+         * @param metadata the metadata to set.
+         */
+        this.setMetadata = (metadata) => {
+            return this.setCurrentValue(this.metadataSubject, metadata);
+        };
+        /**
+         * Sets the members of the current call.
+         *
+         * @internal
+         * @param members the members to set.
+         */
+        this.setMembers = (members) => {
+            this.setCurrentValue(this.membersSubject, members);
+        };
         /**
          * Will try to find the participant with the given sessionId in the active call.
          *
@@ -5324,8 +5512,7 @@ class CallState {
          * @returns the participant with the given sessionId or undefined if not found.
          */
         this.findParticipantBySessionId = (sessionId) => {
-            const participants = this.getCurrentValue(this.participantsSubject);
-            return participants.find((p) => p.sessionId === sessionId);
+            return this.participants.find((p) => p.sessionId === sessionId);
         };
         /**
          * Updates a participant in the active call identified by the given `sessionId`.
@@ -5345,7 +5532,7 @@ class CallState {
             }
             const thePatch = typeof patch === 'function' ? patch(participant) : patch;
             const updatedParticipant = Object.assign(Object.assign({}, participant), thePatch);
-            return this.setCurrentValue(this.participantsSubject, (participants) => participants.map((p) => p.sessionId === sessionId ? updatedParticipant : p));
+            return this.setParticipants((participants) => participants.map((p) => p.sessionId === sessionId ? updatedParticipant : p));
         };
         /**
          * Updates all participants in the active call whose session ID is in the given `sessionIds`.
@@ -5357,10 +5544,9 @@ class CallState {
          * @returns all participants, with all patch applied.
          */
         this.updateParticipants = (patch) => {
-            if (Object.keys(patch).length === 0) {
+            if (Object.keys(patch).length === 0)
                 return;
-            }
-            return this.setCurrentValue(this.participantsSubject, (participants) => participants.map((p) => {
+            return this.setParticipants((participants) => participants.map((p) => {
                 const thePatch = patch[p.sessionId];
                 if (thePatch) {
                     return Object.assign(Object.assign({}, p), thePatch);
@@ -5384,16 +5570,87 @@ class CallState {
             this.callPermissionRequestSubject.asObservable();
         this.callRecordingList$ = this.callRecordingListSubject.asObservable();
         this.metadata$ = this.metadataSubject.asObservable();
-        // FIXME OL: is the shape of this observable ok? Shall we expose the whole MemberResponse instead?
-        this.members$ = this.membersSubject.pipe(map$1((members) => {
-            return members.reduce((acc, member) => {
-                const user = member.user;
-                acc[user.id] = user;
-                return acc;
-            }, {});
-        }));
+        this.members$ = this.membersSubject.asObservable();
         this.callingState$ = this.callingStateSubject.asObservable();
     }
+    /**
+     * The list of participants in the current call.
+     */
+    get participants() {
+        return this.getCurrentValue(this.participants$);
+    }
+    /**
+     * The local participant in the current call.
+     */
+    get localParticipant() {
+        return this.getCurrentValue(this.localParticipant$);
+    }
+    /**
+     * The list of remote participants in the current call.
+     */
+    get remoteParticipants() {
+        return this.getCurrentValue(this.remoteParticipants$);
+    }
+    /**
+     * The dominant speaker in the current call.
+     */
+    get dominantSpeaker() {
+        return this.getCurrentValue(this.dominantSpeaker$);
+    }
+    /**
+     * The list of pinned participants in the current call.
+     */
+    get pinnedParticipants() {
+        return this.getCurrentValue(this.pinnedParticipants$);
+    }
+    /**
+     * Tell if there is an ongoing screen share in this call.
+     */
+    get hasOngoingScreenShare() {
+        return this.getCurrentValue(this.hasOngoingScreenShare$);
+    }
+    /**
+     * The calling state.
+     */
+    get callingState() {
+        return this.getCurrentValue(this.callingState$);
+    }
+    /**
+     * The list of call recordings.
+     */
+    get callRecordingsList() {
+        return this.getCurrentValue(this.callRecordingList$);
+    }
+    /**
+     * Tells whether a call recording is in progress.
+     */
+    get callRecordingInProgress() {
+        return this.getCurrentValue(this.callRecordingInProgress$);
+    }
+    /**
+     * The last call permission request.
+     */
+    get callPermissionRequest() {
+        return this.getCurrentValue(this.callPermissionRequest$);
+    }
+    /**
+     * The call stats report.
+     */
+    get callStatsReport() {
+        return this.getCurrentValue(this.callStatsReport$);
+    }
+    /**
+     * The metadata of the current call.
+     */
+    get metadata() {
+        return this.getCurrentValue(this.metadata$);
+    }
+    /**
+     * The members of the current call.
+     */
+    get members() {
+        return this.getCurrentValue(this.members$);
+    }
 }
 
 const trackTypeToParticipantStreamKey = (trackType) => {
@@ -5497,7 +5754,7 @@ const toRtcConfiguration = (config) => {
 /**
  * Creates a new StatsReporter instance that collects metrics about the ongoing call and reports them to the state store
  */
-const createStatsReporter = ({ subscriber, publisher, store, edgeName, pollingIntervalInMs = 2000, }) => {
+const createStatsReporter = ({ subscriber, publisher, state, edgeName, pollingIntervalInMs = 2000, }) => {
     const getRawStatsForTrack = (kind, selector) => __awaiter(void 0, void 0, void 0, function* () {
         if (kind === 'subscriber' && subscriber) {
             return subscriber.getStats(selector);
@@ -5538,11 +5795,10 @@ const createStatsReporter = ({ subscriber, publisher, store, edgeName, pollingIn
      */
     const run = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
-        const participants = store.getCurrentValue(store.participantsSubject);
         const participantStats = {};
         const sessionIds = new Set(sessionIdsToTrack);
         if (sessionIds.size > 0) {
-            for (let participant of participants) {
+            for (let participant of state.participants) {
                 if (!sessionIds.has(participant.sessionId))
                     continue;
                 const kind = participant.isLoggedInUser ? 'publisher' : 'subscriber';
@@ -5581,7 +5837,7 @@ const createStatsReporter = ({ subscriber, publisher, store, edgeName, pollingIn
             getRawStatsForTrack('subscriber'),
             getRawStatsForTrack('publisher'),
         ]);
-        const statsReport = {
+        state.setCallStatsReport({
             datacenter: edgeName || 'N/A',
             publisherStats,
             subscriberStats,
@@ -5589,8 +5845,7 @@ const createStatsReporter = ({ subscriber, publisher, store, edgeName, pollingIn
             publisherRawStats,
             participants: participantStats,
             timestamp: Date.now(),
-        };
-        store.setCurrentValue(store.callStatsReportSubject, statsReport);
+        });
     });
     let timeoutId;
     if (pollingIntervalInMs > 0) {
@@ -5948,7 +6203,7 @@ class Call {
          */
         this.leave = () => {
             var _a, _b, _c, _d;
-            if (this.state.getCurrentValue(this.state.callingState$) === CallingState.LEFT) {
+            if (this.state.callingState === CallingState.LEFT) {
                 throw new Error('Cannot leave call that has already been left.');
             }
             (_a = this.statsReporter) === null || _a === void 0 ? void 0 : _a.stop();
@@ -5962,8 +6217,8 @@ class Call {
             this.dispatcher.offAll();
             // Call all leave call hooks, e.g. to clean up global event handlers
             this.leaveCallHooks.forEach((hook) => hook());
-            this.clientStore.setCurrentValue(this.clientStore.activeCallSubject, undefined);
-            this.state.setCurrentValue(this.state.callingStateSubject, CallingState.LEFT);
+            this.clientStore.setActiveCall(undefined);
+            this.state.setCallingState(CallingState.LEFT);
         };
         this.waitForJoinResponse = (timeout = 5000) => new Promise((resolve, reject) => {
             const unsubscribe = this.on('joinResponse', (event) => {
@@ -5985,8 +6240,8 @@ class Call {
          */
         this.watch = (data) => __awaiter(this, void 0, void 0, function* () {
             const response = yield watch(this.streamClient, this.type, this.id, data);
-            this.state.setCurrentValue(this.state.metadataSubject, response.call);
-            this.state.setCurrentValue(this.state.membersSubject, response.members);
+            this.state.setMetadata(response.call);
+            this.state.setMembers(response.members);
             return response;
         });
         /**
@@ -5996,15 +6251,15 @@ class Call {
          */
         this.join = (data) => __awaiter(this, void 0, void 0, function* () {
             var _a;
-            if ([CallingState.JOINED, CallingState.JOINING].includes(this.state.getCurrentValue(this.state.callingState$))) {
+            if ([CallingState.JOINED, CallingState.JOINING].includes(this.state.callingState)) {
                 throw new Error(`Illegal State: Already joined.`);
             }
-            this.state.setCurrentValue(this.state.callingStateSubject, CallingState.JOINING);
+            this.state.setCallingState(CallingState.JOINING);
             const call = yield join(this.streamClient, this.type, this.id, data);
-            this.state.setCurrentValue(this.state.metadataSubject, call.metadata);
-            this.state.setCurrentValue(this.state.membersSubject, call.members);
+            this.state.setMetadata(call.metadata);
+            this.state.setMembers(call.members);
             // FIXME OL: convert to a derived state
-            this.state.setCurrentValue(this.state.callRecordingInProgressSubject, call.metadata.recording);
+            this.state.setCallRecordingInProgress(call.metadata.recording);
             // FIXME OL: remove once cascading is implemented
             let sfuUrl = call.sfuServer.url;
             if (typeof window !== 'undefined' &&
@@ -6022,10 +6277,10 @@ class Call {
                 var _b, _c, _d;
                 console.log(`Rejoining call ${this.cid} (${this.reconnectAttempts})...`);
                 this.reconnectAttempts++;
-                this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING);
+                this.state.setCallingState(CallingState.RECONNECTING);
                 // take a snapshot of the current "local participant" state
                 // we'll need it for restoring the previous publishing state later
-                const localParticipant = this.state.getCurrentValue(this.state.localParticipant$);
+                const localParticipant = this.state.localParticipant;
                 (_b = this.subscriber) === null || _b === void 0 ? void 0 : _b.close();
                 (_c = this.publisher) === null || _c === void 0 ? void 0 : _c.stopPublishing({ stopTracks: false });
                 (_d = this.statsReporter) === null || _d === void 0 ? void 0 : _d.stop();
@@ -6056,12 +6311,12 @@ class Call {
                     if (this.reconnectAttempts < this.maxReconnectAttempts) {
                         rejoin().catch(() => {
                             console.log(`Rejoin failed for ${this.reconnectAttempts} times. Giving up.`);
-                            this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING_FAILED);
+                            this.state.setCallingState(CallingState.RECONNECTING_FAILED);
                         });
                     }
                     else {
                         console.log('Reconnect attempts exceeded. Giving up...');
-                        this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING_FAILED);
+                        this.state.setCallingState(CallingState.RECONNECTING_FAILED);
                     }
                 });
             });
@@ -6071,16 +6326,15 @@ class Call {
                 const handleOnOffline = () => {
                     window.removeEventListener('offline', handleOnOffline);
                     console.log('Join: Going offline...');
-                    this.state.setCurrentValue(this.state.callingStateSubject, CallingState.OFFLINE);
+                    this.state.setCallingState(CallingState.OFFLINE);
                 };
                 const handleOnOnline = () => {
                     window.removeEventListener('online', handleOnOnline);
-                    if (this.state.getCurrentValue(this.state.callingState$) ===
-                        CallingState.OFFLINE) {
+                    if (this.state.callingState === CallingState.OFFLINE) {
                         console.log('Join: Going online...');
                         rejoin().catch(() => {
                             console.log(`Rejoin failed for ${this.reconnectAttempts} times. Giving up.`);
-                            this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING_FAILED);
+                            this.state.setCallingState(CallingState.RECONNECTING_FAILED);
                         });
                     }
                 };
@@ -6115,7 +6369,7 @@ class Call {
             this.statsReporter = createStatsReporter({
                 subscriber: this.subscriber,
                 publisher: this.publisher,
-                store: this.state,
+                state: this.state,
                 edgeName: call.sfuServer.edge_name,
             });
             try {
@@ -6135,12 +6389,12 @@ class Call {
                 const ownCapabilities = {
                     ownCapabilities: call.metadata.own_capabilities,
                 };
-                this.state.setCurrentValue(this.state.participantsSubject, currentParticipants.map((participant) => (Object.assign(Object.assign(Object.assign({}, participant), { isLoggedInUser: participant.sessionId === sfuClient.sessionId, viewportVisibilityState: VisibilityState.UNKNOWN }), (participant.sessionId === sfuClient.sessionId
+                this.state.setParticipants(currentParticipants.map((participant) => (Object.assign(Object.assign(Object.assign({}, participant), { isLoggedInUser: participant.sessionId === sfuClient.sessionId, viewportVisibilityState: VisibilityState.UNKNOWN }), (participant.sessionId === sfuClient.sessionId
                     ? ownCapabilities
                     : {})))));
-                this.clientStore.setCurrentValue(this.clientStore.activeCallSubject, this);
+                this.clientStore.setActiveCall(this);
                 this.reconnectAttempts = 0; // reset the reconnect attempts counter
-                this.state.setCurrentValue(this.state.callingStateSubject, CallingState.JOINED);
+                this.state.setCallingState(CallingState.JOINED);
                 console.log(`Joined call ${this.cid}`);
             }
             catch (err) {
@@ -6151,7 +6405,7 @@ class Call {
                 }
                 else {
                     console.log(`Rejoin failed for ${this.reconnectAttempts} times. Giving up.`);
-                    this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING_FAILED);
+                    this.state.setCallingState(CallingState.RECONNECTING_FAILED);
                     throw new Error('Join failed');
                 }
             }
@@ -6468,9 +6722,7 @@ class Call {
             // example: `e3f6aaf8-b03d-4911-be36-83f47d37a76a:TRACK_TYPE_VIDEO`
             const [trackId, trackType] = primaryStream.id.split(':');
             console.log(`Got remote ${trackType} track:`, e.track);
-            const participantToUpdate = this.state
-                .getCurrentValue(this.state.participantsSubject)
-                .find((p) => p.trackLookupPrefix === trackId);
+            const participantToUpdate = this.state.participants.find((p) => p.trackLookupPrefix === trackId);
             if (!participantToUpdate) {
                 console.error('Received track for unknown participant', trackId, e);
                 return;
@@ -6540,18 +6792,20 @@ class Call {
         };
         this.get = () => __awaiter(this, void 0, void 0, function* () {
             const response = yield this.streamClient.get(this.streamClientBasePath);
-            this.state.setCurrentValue(this.state.metadataSubject, response.call);
-            this.state.setCurrentValue(this.state.membersSubject, response.members);
+            this.state.setMetadata(response.call);
+            this.state.setMembers(response.members);
             return response;
         });
         this.getOrCreate = (data) => __awaiter(this, void 0, void 0, function* () {
             const response = yield this.streamClient.post(this.streamClientBasePath, data);
-            this.state.setCurrentValue(this.state.metadataSubject, response.call);
-            this.state.setCurrentValue(this.state.membersSubject, response.members);
-            const currentPendingCalls = this.clientStore.getCurrentValue(this.clientStore.pendingCallsSubject);
-            const callAlreadyRegistered = currentPendingCalls.find((pendingCall) => pendingCall.id === this.id);
+            this.state.setMetadata(response.call);
+            this.state.setMembers(response.members);
+            const callAlreadyRegistered = this.clientStore.pendingCalls.find((pendingCall) => pendingCall.id === this.id);
             if (!callAlreadyRegistered) {
-                this.clientStore.setCurrentValue(this.clientStore.pendingCallsSubject, (pendingCalls) => [...pendingCalls, this]);
+                this.clientStore.setPendingCalls((pendingCalls) => [
+                    ...pendingCalls,
+                    this,
+                ]);
             }
             return response;
         });
@@ -6629,17 +6883,16 @@ class Call {
          * @returns
          */
         this.accept = () => __awaiter(this, void 0, void 0, function* () {
-            const callToAccept = this.clientStore
-                .getCurrentValue(this.clientStore.pendingCallsSubject)
-                .find((c) => c.id === this.id && c.type === this.type);
+            // FIXME OL: this method should be merged with the join method.
+            const callToAccept = this.clientStore.pendingCalls.find((c) => c.id === this.id && c.type === this.type);
             if (callToAccept) {
                 yield this.streamClient.post(`${this.streamClientBasePath}/event`, {
                     type: 'call.accepted',
                 });
                 // remove the accepted call from the "pending calls" list.
-                this.clientStore.setCurrentValue(this.clientStore.pendingCallsSubject, (pendingCalls) => pendingCalls.filter((c) => c !== callToAccept));
+                this.clientStore.setPendingCalls((pendingCalls) => pendingCalls.filter((c) => c !== callToAccept));
                 yield this.join();
-                this.clientStore.setCurrentValue(this.clientStore.activeCallSubject, callToAccept);
+                this.clientStore.setActiveCall(callToAccept);
             }
         });
         /**
@@ -6648,7 +6901,7 @@ class Call {
          * @returns
          */
         this.reject = () => __awaiter(this, void 0, void 0, function* () {
-            this.clientStore.setCurrentValue(this.clientStore.pendingCallsSubject, (pendingCalls) => pendingCalls.filter((incomingCall) => incomingCall.id !== this.id));
+            this.clientStore.setPendingCalls((pendingCalls) => pendingCalls.filter((c) => c.cid !== this.cid));
             yield this.streamClient.post(`${this.streamClientBasePath}/event`, {
                 type: 'call.rejected',
             });
@@ -6662,18 +6915,19 @@ class Call {
          */
         this.cancel = () => __awaiter(this, void 0, void 0, function* () {
             console.log('call cancelled');
+            // FIXME OL: this method should be merged with the leave method.
             const store = this.clientStore;
-            const activeCall = store.getCurrentValue(store.activeCallSubject);
-            const leavingActiveCall = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.id) === this.id && activeCall.type === this.type;
+            const activeCall = store.activeCall;
+            const leavingActiveCall = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.cid) === this.cid;
             if (leavingActiveCall) {
                 activeCall.leave();
             }
             else {
-                store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.id !== this.id));
+                store.setPendingCalls((pendingCalls) => pendingCalls.filter((c) => c.cid !== this.cid));
             }
             if (activeCall) {
                 const state = activeCall.state;
-                const remoteParticipants = state.getCurrentValue(state.remoteParticipants$);
+                const remoteParticipants = state.remoteParticipants;
                 if (!remoteParticipants.length && !leavingActiveCall) {
                     yield this.endCall();
                 }
@@ -6687,7 +6941,7 @@ class Call {
             // FIXME: this is a temporary setting to take call ID as session ID
             const sessionId = this.id;
             const response = yield this.streamClient.get(`${this.streamClientBasePath}/${sessionId}/recordings`);
-            this.state.setCurrentValue(this.state.callRecordingListSubject, response.recordings);
+            this.state.setCallRecordingsList(response.recordings);
             return response;
         });
         this.getEdgeServer = (data) => {
@@ -6704,8 +6958,8 @@ class Call {
         this.streamClientBasePath = `/call/${this.type}/${this.id}`;
         const callTypeConfig = CallTypes.get(type);
         this.state = new CallState(sortParticipantsBy || callTypeConfig.options.sortParticipantsBy);
-        this.state.metadataSubject.next(metadata);
-        this.state.membersSubject.next(members || []);
+        this.state.setMetadata(metadata);
+        this.state.setMembers(members || []);
         registerEventHandlers(this, this.state, this.dispatcher);
         this.trackSubscriptionsSubject
             .pipe(debounceTime(UPDATE_SUBSCRIPTIONS_DEBOUNCE_DURATION))
@@ -6728,7 +6982,7 @@ class Call {
         }
     }
     get data() {
-        return this.state.getCurrentValue(this.state.metadata$);
+        return this.state.metadata;
     }
 }
 
@@ -6747,12 +7001,12 @@ const watchCallCreated = (store, streamClient) => {
             console.warn("Can't find call in CallCreatedEvent");
             return;
         }
-        const currentUser = store.getCurrentValue(store.connectedUserSubject);
+        const currentUser = store.connectedUser;
         if ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) === call.created_by.id) {
             console.warn('Received CallCreatedEvent sent by the current user');
             return;
         }
-        store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) => [
+        store.setPendingCalls((pendingCalls) => [
             ...pendingCalls,
             new Call({
                 streamClient,
@@ -6780,17 +7034,13 @@ const watchCallAccepted = (store) => {
             console.warn("Can't find call_cid in CallAcceptedEvent");
             return;
         }
-        const acceptedIncomingCall = store
-            .getCurrentValue(store.incomingCalls$)
-            .find((incomingCall) => incomingCall.cid === call_cid);
+        const acceptedIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
         if (acceptedIncomingCall) {
             console.warn('Received CallAcceptedEvent for an incoming call');
             return;
         }
-        const acceptedOutgoingCall = store
-            .getCurrentValue(store.outgoingCalls$)
-            .find((outgoingCall) => outgoingCall.cid === call_cid);
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const acceptedOutgoingCall = store.outgoingCalls.find((outgoingCall) => outgoingCall.cid === call_cid);
+        const activeCall = store.activeCall;
         // FIXME OL: we should revisit this logic, it is hard to follow
         const acceptedActiveCall = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.cid) !== undefined && activeCall.cid === call_cid
             ? activeCall
@@ -6803,7 +7053,7 @@ const watchCallAccepted = (store) => {
         if (call_cid === (acceptedActiveCall === null || acceptedActiveCall === void 0 ? void 0 : acceptedActiveCall.cid)) {
             return;
         }
-        store.setCurrentValue(store.acceptedCallSubject, event);
+        store.setAcceptedCall(event);
     };
 };
 /**
@@ -6821,17 +7071,13 @@ const watchCallRejected = (store) => {
             console.warn("Can't find call_cid in CallRejectedEvent");
             return;
         }
-        const rejectedIncomingCall = store
-            .getCurrentValue(store.incomingCalls$)
-            .find((incomingCall) => incomingCall.cid === call_cid);
+        const rejectedIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
         if (rejectedIncomingCall) {
             console.warn('Received CallRejectedEvent for an incoming call');
             return;
         }
-        const rejectedOutgoingCall = store
-            .getCurrentValue(store.outgoingCalls$)
-            .find((outgoingCall) => outgoingCall.cid === call_cid);
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const rejectedOutgoingCall = store.outgoingCalls.find((outgoingCall) => outgoingCall.cid === call_cid);
+        const activeCall = store.activeCall;
         const rejectedActiveCall = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.cid) !== undefined && activeCall.cid === call_cid
             ? activeCall
             : undefined;
@@ -6839,7 +7085,7 @@ const watchCallRejected = (store) => {
             console.warn(`CallRejectedEvent received for a non-existent outgoing call (CID: ${call_cid}`);
             return;
         }
-        store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
+        store.setPendingCalls((pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
     };
 };
 /**
@@ -6857,10 +7103,8 @@ const watchCallCancelled = (store) => {
             console.log("Can't find call in CallEndedEvent");
             return;
         }
-        const cancelledIncomingCall = store
-            .getCurrentValue(store.incomingCalls$)
-            .find((incomingCall) => incomingCall.cid === call_cid);
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const cancelledIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
+        const activeCall = store.activeCall;
         const cancelledActiveCall = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.cid) !== undefined && activeCall.cid === call_cid
             ? activeCall
             : undefined;
@@ -6868,7 +7112,7 @@ const watchCallCancelled = (store) => {
             console.warn(`CallEndedEvent received for a non-existent incoming call (CID: ${call_cid}`);
             return;
         }
-        store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
+        store.setPendingCalls((pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
     };
 };
 
@@ -6881,7 +7125,7 @@ const watchCallPermissionRequest = (store) => {
         if (event.type !== 'call.permission_request') {
             return;
         }
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const activeCall = store.activeCall;
         if (!activeCall) {
             console.warn(`Ignoring "call.permission_request" as there is no active call`, event);
             return;
@@ -6891,12 +7135,12 @@ const watchCallPermissionRequest = (store) => {
             return;
         }
         const state = activeCall.state;
-        const localParticipant = state.getCurrentValue(state.localParticipant$);
+        const localParticipant = state.localParticipant;
         if (!(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.ownCapabilities.includes('update-call-permissions'))) {
             console.warn(`Ignoring "call.permission_request" as the user doesn't have permission to handle it`);
             return;
         }
-        state.setCurrentValue(state.callPermissionRequestSubject, event);
+        state.setCallPermissionRequest(event);
     };
 };
 /**
@@ -6908,7 +7152,7 @@ const watchCallPermissionsUpdated = (store) => {
         if (event.type !== 'call.permissions_updated') {
             return;
         }
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const activeCall = store.activeCall;
         if (!activeCall) {
             console.warn(`Ignoring "call.permissions_updated" as there is no active call`, event);
             return;
@@ -6918,7 +7162,7 @@ const watchCallPermissionsUpdated = (store) => {
             return;
         }
         const state = activeCall.state;
-        const localParticipant = state.getCurrentValue(state.localParticipant$);
+        const localParticipant = state.localParticipant;
         if (event.user.id === (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.userId)) {
             state.updateParticipant(localParticipant.sessionId, {
                 ownCapabilities: event.own_capabilities,
@@ -6939,14 +7183,14 @@ const watchNewReactions = (store) => {
             return;
         }
         const { call_cid, reaction } = event;
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const activeCall = store.activeCall;
         if (!activeCall || activeCall.cid !== call_cid) {
             console.warn('Received CallReactionEvent for an inactive or unknown call');
             return;
         }
         const state = activeCall.state;
-        state.setCurrentValue(state.participantsSubject, (participants) => {
-            const { user, custom, type, emoji_code } = reaction;
+        const { user, custom, type, emoji_code } = reaction;
+        state.setParticipants((participants) => {
             return participants.map((p) => {
                 // skip if the reaction is not for this participant
                 if (p.userId !== user.id)
@@ -6974,13 +7218,13 @@ const watchCallRecordingStarted = (store) => {
             return;
         }
         const { call_cid } = event;
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const activeCall = store.activeCall;
         if (!activeCall || activeCall.cid !== call_cid) {
             console.warn('Received CallRecordingStartedEvent for a non-active call');
             return;
         }
         const state = activeCall.state;
-        state.setCurrentValue(state.callRecordingInProgressSubject, true);
+        state.setCallRecordingInProgress(true);
     };
 };
 /**
@@ -6992,13 +7236,13 @@ const watchCallRecordingStopped = (store) => {
             return;
         }
         const { call_cid } = event;
-        const activeCall = store.getCurrentValue(store.activeCallSubject);
+        const activeCall = store.activeCall;
         if (!activeCall || activeCall.cid !== call_cid) {
             console.warn('Received CallRecordingStoppedEvent for a non-active call');
             return;
         }
         const state = activeCall.state;
-        state.setCurrentValue(state.callRecordingInProgressSubject, false);
+        state.setCallRecordingInProgress(false);
     };
 };
 
@@ -7008,21 +7252,21 @@ const watchCallRecordingStopped = (store) => {
  * `event.user_id` to the list
  */
 const watchBlockedUser = (store) => (event) => {
+    var _a;
     if (event.type !== 'call.blocked_user') {
         return;
     }
-    const activeCall = store.getCurrentValue(store.activeCallSubject);
+    const activeCall = store.activeCall;
     if (!activeCall || activeCall.cid !== event.call_cid) {
         console.warn(`Received "call.blocked_user" for an inactive or unknown call`, event);
         return;
     }
     const state = activeCall.state;
-    const localParticipant = state.getCurrentValue(state.localParticipant$);
     // FIXME: end call
-    if ((localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.userId) === event.user.id) {
+    if (((_a = state.localParticipant) === null || _a === void 0 ? void 0 : _a.userId) === event.user.id) {
         activeCall.leave();
     }
-    state.setCurrentValue(state.metadataSubject, (metadata) => (Object.assign(Object.assign({}, metadata), { blocked_user_ids: [...metadata.blocked_user_ids, event.user.id] })));
+    state.setMetadata((metadata) => (Object.assign(Object.assign({}, metadata), { blocked_user_ids: [...metadata.blocked_user_ids, event.user.id] })));
 };
 /**
  * Event handler that watches for `call.unblocked_user` events,
@@ -7033,13 +7277,13 @@ const watchUnblockedUser = (store) => (event) => {
     if (event.type !== 'call.unblocked_user') {
         return;
     }
-    const activeCall = store.getCurrentValue(store.activeCallSubject);
+    const activeCall = store.activeCall;
     if (!activeCall || activeCall.cid !== event.call_cid) {
         console.warn(`Received "call.unblocked_user" for an inactive or unknown call`, event);
         return;
     }
     const state = activeCall.state;
-    state.setCurrentValue(state.metadataSubject, (metadata) => {
+    state.setMetadata((metadata) => {
         const blocked_user_ids = metadata.blocked_user_ids.filter((userId) => event.user.id !== userId);
         return Object.assign(Object.assign({}, metadata), { blocked_user_ids });
     });
@@ -7057,7 +7301,7 @@ class CallDropScheduler {
                     const newIncomingCall = CallDropScheduler.getLatestCall(currentCalls, prevCalls);
                     if (!newIncomingCall)
                         return;
-                    const activeCall = this.store.getCurrentValue(this.store.activeCallSubject);
+                    const activeCall = this.store.activeCall;
                     if (activeCall) {
                         yield newIncomingCall.reject();
                     }
@@ -7072,7 +7316,7 @@ class CallDropScheduler {
                     const newIncomingCall = CallDropScheduler.getLatestCall(currentCalls, prevCalls);
                     if (!newIncomingCall)
                         return;
-                    const activeCall = this.store.getCurrentValue(this.store.activeCallSubject);
+                    const activeCall = this.store.activeCall;
                     const incomingCallRejectedImmediately = activeCall && this.callConfig.autoRejectWhenInCall;
                     if (incomingCallRejectedImmediately)
                         return;
@@ -7123,8 +7367,6 @@ class CallDropScheduler {
         };
         /**
          * Schedules automatic call rejection.
-         * @param {string} callId
-         * @param {string} callType
          */
         this.scheduleReject = (call) => {
             const timeout = this.callConfig.autoRejectTimeoutInMs;
@@ -8783,7 +9025,7 @@ class StreamClient {
     }
     getUserAgent() {
         return (this.userAgent ||
-            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.1-alpha.87"}`);
+            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.1-alpha.88"}`);
     }
     setUserAgent(userAgent) {
         this.userAgent = userAgent;
@@ -8855,7 +9097,7 @@ class StreamVideoClient {
             this.on('call.recording_started', watchCallRecordingStarted(this.writeableStateStore));
             this.on('call.recording_stopped', watchCallRecordingStopped(this.writeableStateStore));
             this.on('call.reaction_new', watchNewReactions(this.writeableStateStore));
-            this.writeableStateStore.setCurrentValue(this.writeableStateStore.connectedUserSubject, user);
+            this.writeableStateStore.setConnectedUser(user);
         });
         /**
          * Disconnects the currently connected user from the client.
@@ -8869,7 +9111,7 @@ class StreamVideoClient {
             var _a;
             yield this.streamClient.disconnectUser(timeout);
             (_a = this.callDropScheduler) === null || _a === void 0 ? void 0 : _a.cleanUp();
-            this.writeableStateStore.setCurrentValue(this.writeableStateStore.connectedUserSubject, undefined);
+            this.writeableStateStore.setConnectedUser(undefined);
         });
         /**
          * You can subscribe to WebSocket events provided by the API.