@stream-io/video-client 0.0.1-alpha.91 → 0.0.1-alpha.93

package/dist/index.browser.es.js

@@ -12,93 +12,93 @@ import { fromByteArray } from 'base64-js';
  * @export
  */
 const DeviceFieldsRequestPushProviderEnum = {
-    firebase: 'firebase',
-    apn: 'apn',
-    huawei: 'huawei',
-    xiaomi: 'xiaomi',
+    FIREBASE: 'firebase',
+    APN: 'apn',
+    HUAWEI: 'huawei',
+    XIAOMI: 'xiaomi',
 };
 /**
  * All possibility of string to use
  * @export
  */
 const OwnCapability = {
-    block_users: 'block-users',
-    create_call: 'create-call',
-    create_reaction: 'create-reaction',
-    end_call: 'end-call',
-    join_backstage: 'join-backstage',
-    join_call: 'join-call',
-    join_ended_call: 'join-ended-call',
-    mute_users: 'mute-users',
-    read_call: 'read-call',
-    remove_call_member: 'remove-call-member',
-    screenshare: 'screenshare',
-    send_audio: 'send-audio',
-    send_video: 'send-video',
-    start_broadcast_call: 'start-broadcast-call',
-    start_record_call: 'start-record-call',
-    start_transcription_call: 'start-transcription-call',
-    stop_broadcast_call: 'stop-broadcast-call',
-    stop_record_call: 'stop-record-call',
-    stop_transcription_call: 'stop-transcription-call',
-    update_call: 'update-call',
-    update_call_member: 'update-call-member',
-    update_call_permissions: 'update-call-permissions',
-    update_call_settings: 'update-call-settings',
+    BLOCK_USERS: 'block-users',
+    CREATE_CALL: 'create-call',
+    CREATE_REACTION: 'create-reaction',
+    END_CALL: 'end-call',
+    JOIN_BACKSTAGE: 'join-backstage',
+    JOIN_CALL: 'join-call',
+    JOIN_ENDED_CALL: 'join-ended-call',
+    MUTE_USERS: 'mute-users',
+    READ_CALL: 'read-call',
+    REMOVE_CALL_MEMBER: 'remove-call-member',
+    SCREENSHARE: 'screenshare',
+    SEND_AUDIO: 'send-audio',
+    SEND_VIDEO: 'send-video',
+    START_BROADCAST_CALL: 'start-broadcast-call',
+    START_RECORD_CALL: 'start-record-call',
+    START_TRANSCRIPTION_CALL: 'start-transcription-call',
+    STOP_BROADCAST_CALL: 'stop-broadcast-call',
+    STOP_RECORD_CALL: 'stop-record-call',
+    STOP_TRANSCRIPTION_CALL: 'stop-transcription-call',
+    UPDATE_CALL: 'update-call',
+    UPDATE_CALL_MEMBER: 'update-call-member',
+    UPDATE_CALL_PERMISSIONS: 'update-call-permissions',
+    UPDATE_CALL_SETTINGS: 'update-call-settings',
 };
 /**
  * @export
  */
 const RecordSettingsModeEnum = {
-    available: 'available',
-    disabled: 'disabled',
-    auto_on: 'auto-on',
+    AVAILABLE: 'available',
+    DISABLED: 'disabled',
+    AUTO_ON: 'auto-on',
 };
 /**
  * @export
  */
 const RecordSettingsQualityEnum = {
-    audio_only: 'audio-only',
-    _360p: '360p',
-    _480p: '480p',
-    _720p: '720p',
-    _1080p: '1080p',
-    _1440p: '1440p',
+    AUDIO_ONLY: 'audio-only',
+    _360P: '360p',
+    _480P: '480p',
+    _720P: '720p',
+    _1080P: '1080p',
+    _1440P: '1440p',
 };
 /**
  * @export
  */
 const RecordSettingsRequestModeEnum = {
-    available: 'available',
-    disabled: 'disabled',
-    auto_on: 'auto-on',
+    AVAILABLE: 'available',
+    DISABLED: 'disabled',
+    AUTO_ON: 'auto-on',
 };
 /**
  * @export
  */
 const RecordSettingsRequestQualityEnum = {
-    audio_only: 'audio-only',
-    _360p: '360p',
-    _480p: '480p',
-    _720p: '720p',
-    _1080p: '1080p',
-    _1440p: '1440p',
+    AUDIO_ONLY: 'audio-only',
+    _360P: '360p',
+    _480P: '480p',
+    _720P: '720p',
+    _1080P: '1080p',
+    _1440P: '1440p',
 };
 /**
  * @export
  */
 const TranscriptionSettingsModeEnum = {
-    available: 'available',
-    disabled: 'disabled',
-    auto_on: 'auto-on',
+    AVAILABLE: 'available',
+    DISABLED: 'disabled',
+    AUTO_ON: 'auto-on',
 };
 /**
  * @export
  */
 const TranscriptionSettingsRequestModeEnum = {
-    available: 'available',
-    disabled: 'disabled',
-    auto_on: 'auto-on',
+    AVAILABLE: 'available',
+    DISABLED: 'disabled',
+    AUTO_ON: 'auto-on',
 };
 
 class ErrorFromResponse extends Error {
@@ -4653,6 +4653,127 @@ class Publisher {
     }
 }
 
+/**
+ * Event handler that watched the delivery of CallAcceptedEvent
+ * Updates the state store and notifies its subscribers that
+ * the given user will be joining the call.
+ */
+const watchCallAccepted = (store) => {
+    return function onCallAccepted(event) {
+        if (event.type !== 'call.accepted')
+            return;
+        const { call_cid } = event;
+        const acceptedIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
+        if (acceptedIncomingCall) {
+            console.warn('Received CallAcceptedEvent for an incoming call');
+            return;
+        }
+        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
+            : undefined;
+        if (!acceptedOutgoingCall && !acceptedActiveCall) {
+            console.warn(`CallAcceptedEvent received for a non-existent outgoing call (CID: ${call_cid}`);
+            return;
+        }
+        // once in active call, it is unnecessary to keep track of accepted call events
+        if (call_cid === (acceptedActiveCall === null || acceptedActiveCall === void 0 ? void 0 : acceptedActiveCall.cid)) {
+            return;
+        }
+        // do not set a new accepted call while in an active call? It would lead to joining a new active call.
+        // todo: solve the situation of 2nd outgoing call being accepted in the UI SDK
+        store.setAcceptedCall(event);
+    };
+};
+/**
+ * Event handler that watches delivery of CallRejected Websocket event.
+ * Updates the state store and notifies its subscribers that
+ * the given user will not be joining the call.
+ */
+const watchCallRejected = (store) => {
+    return function onCallRejected(event) {
+        if (event.type !== 'call.rejected')
+            return;
+        const { call_cid } = event;
+        const rejectedIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
+        if (rejectedIncomingCall) {
+            console.warn('Received CallRejectedEvent for an incoming call');
+            return;
+        }
+        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;
+        if (!rejectedOutgoingCall && !rejectedActiveCall) {
+            console.warn(`CallRejectedEvent received for a non-existent outgoing call (CID: ${call_cid}`);
+            return;
+        }
+        // FIXME: we should remove the call from pending once every callee has rejected, but for now we support only 1:1 ring calls
+        store.setPendingCalls((pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
+    };
+};
+/**
+ * Event handler that watches the delivery of CallEndedEvent
+ * Updates the state store and notifies its subscribers that
+ * the call is now considered terminated.
+ */
+const watchCallCancelled = (store) => {
+    return function onCallCancelled(event) {
+        if (event.type !== 'call.ended')
+            return;
+        const { call_cid } = event;
+        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;
+        if (!cancelledIncomingCall && !cancelledActiveCall) {
+            console.warn(`CallEndedEvent received for a non-existent incoming call (CID: ${call_cid}`);
+            return;
+        }
+        store.setPendingCalls((pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
+    };
+};
+/**
+ * An event handler which listens to `call.updated` events
+ * and updates the given call state accordingly.
+ */
+const watchCallUpdated = (state) => {
+    return function onCallUpdated(event) {
+        if (event.type !== 'call.updated')
+            return;
+        state.setMetadata(event.call);
+    };
+};
+
+/**
+ * Event handler that watches for `call.permission_request` events
+ * Updates the state store using the `callPermissionRequest$` stream
+ */
+const watchCallPermissionRequest = (state) => {
+    return function onCallPermissionRequest(event) {
+        if (event.type !== 'call.permission_request')
+            return;
+        state.setCallPermissionRequest(event);
+    };
+};
+/**
+ * Event handler that watches for `call.permissions_updated` events
+ */
+const watchCallPermissionsUpdated = (state) => {
+    return function onCallPermissionsUpdated(event) {
+        if (event.type !== 'call.permissions_updated')
+            return;
+        const { localParticipant } = state;
+        if (event.user.id === (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.userId)) {
+            state.setMetadata((metadata) => (Object.assign(Object.assign({}, metadata), { own_capabilities: event.own_capabilities })));
+        }
+    };
+};
+
 /**
  * An event responder which handles the `changePublishQuality` event.
  */
@@ -4750,6 +4871,57 @@ const watchTrackUnpublished = (dispatcher, state) => {
 };
 const unique = (v, i, arr) => arr.indexOf(v) === i;
 
+/**
+ * Watches the delivery of CallReactionEvent.
+ *
+ * @param state the state store to update.
+ */
+const watchNewReactions = (state) => {
+    return function onNewReactions(event) {
+        if (event.type !== 'call.reaction_new')
+            return;
+        const { reaction } = event;
+        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)
+                    return p;
+                // skip if the reaction is not for this session
+                if (custom.sessionId && p.sessionId !== custom.sessionId)
+                    return p;
+                // update the participant with the new reaction
+                return Object.assign(Object.assign({}, p), { reaction: {
+                        type,
+                        emoji_code,
+                        custom,
+                    } });
+            });
+        });
+    };
+};
+
+/**
+ * Watches for `call.recording_started` events.
+ */
+const watchCallRecordingStarted = (state) => {
+    return function onCallRecordingStarted(event) {
+        if (event.type !== 'call.recording_started')
+            return;
+        state.setCallRecordingInProgress(true);
+    };
+};
+/**
+ * Watches for `call.recording_stopped` events.
+ */
+const watchCallRecordingStopped = (state) => {
+    return function onCallRecordingStopped(event) {
+        if (event.type !== 'call.recording_stopped')
+            return;
+        state.setCallRecordingInProgress(false);
+    };
+};
+
 /**
  * Watches for `dominantSpeakerChanged` events.
  */
@@ -4792,15 +4964,52 @@ const watchAudioLevelChanged = (dispatcher, state) => {
     });
 };
 
-const registerEventHandlers = (call, store, dispatcher) => {
-    watchChangePublishQuality(dispatcher, call);
-    watchConnectionQualityChanged(dispatcher, store);
-    watchParticipantJoined(dispatcher, store);
-    watchParticipantLeft(dispatcher, store);
-    watchTrackPublished(dispatcher, store);
-    watchTrackUnpublished(dispatcher, store);
-    watchAudioLevelChanged(dispatcher, store);
-    watchDominantSpeakerChanged(dispatcher, store);
+/**
+ * Event handler that watches for `call.blocked_user` events,
+ * updates the call store `blocked_user_ids` property by adding
+ * `event.user_id` to the list
+ */
+const watchBlockedUser = (state) => (event) => {
+    if (event.type !== 'call.blocked_user')
+        return;
+    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,
+ * updates the call store `blocked_user_ids` property by
+ * removing `event.user_id` from the list
+ */
+const watchUnblockedUser = (state) => (event) => {
+    if (event.type !== 'call.unblocked_user')
+        return;
+    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 });
+    });
+};
+
+const registerEventHandlers = (call, state, dispatcher) => {
+    const eventHandlers = [
+        watchChangePublishQuality(dispatcher, call),
+        watchConnectionQualityChanged(dispatcher, state),
+        watchParticipantJoined(dispatcher, state),
+        watchParticipantLeft(dispatcher, state),
+        watchTrackPublished(dispatcher, state),
+        watchTrackUnpublished(dispatcher, state),
+        watchAudioLevelChanged(dispatcher, state),
+        watchDominantSpeakerChanged(dispatcher, state),
+        call.on('call.updated', watchCallUpdated(state)),
+        call.on('call.blocked_user', watchBlockedUser(state)),
+        call.on('call.unblocked_user', watchUnblockedUser(state)),
+        call.on('call.reaction_new', watchNewReactions(state)),
+        call.on('call.recording_started', watchCallRecordingStarted(state)),
+        call.on('call.recording_stopped', watchCallRecordingStopped(state)),
+        call.on('call.permission_request', watchCallPermissionRequest(state)),
+        call.on('call.permissions_updated', watchCallPermissionsUpdated(state)),
+    ];
+    return () => {
+        eventHandlers.forEach((unsubscribe) => unsubscribe());
+    };
 };
 
 const sfuEventKinds = {
@@ -4895,9 +5104,22 @@ const setCurrentValue = (subject, update) => {
     subject.next(next);
     return next;
 };
+/**
+ * Creates a subscription and returns a function to unsubscribe.
+ *
+ * @param observable the observable to subscribe to.
+ * @param handler the handler to call when the observable emits a value.
+ */
+const createSubscription = (observable, handler) => {
+    const subscription = observable.subscribe(handler);
+    return () => {
+        subscription.unsubscribe();
+    };
+};
 
 var rxUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    createSubscription: createSubscription,
     getCurrentValue: getCurrentValue,
     setCurrentValue: setCurrentValue
 });
@@ -6052,6 +6274,65 @@ class ViewportTracker {
     }
 }
 
+/**
+ * Stores the permissions for the current user and exposes
+ * a few helper methods which make it easier to work with permissions.
+ *
+ * This is an internal class meant to be used in combination with
+ * a {@link Call} instance.
+ *
+ * @internal
+ */
+class PermissionsContext {
+    constructor() {
+        this.permissions = [];
+        /**
+         * Sets the permissions for the current user.
+         *
+         * @param permissions the permissions to set.
+         */
+        this.setPermissions = (permissions) => {
+            this.permissions = permissions;
+        };
+        /**
+         * Sets the settings for the bound call.
+         * @param settings
+         */
+        this.setCallSettings = (settings) => {
+            this.settings = settings;
+        };
+        /**
+         * Checks if the current user has a specific permission.
+         *
+         * @param permission the permission to check for.
+         */
+        this.hasPermission = (permission) => {
+            return this.permissions.includes(permission);
+        };
+        /**
+         * Checks if the current user can request a specific permission
+         * within the call.
+         *
+         * @param permission the permission to check for.
+         */
+        this.canRequest = (permission) => {
+            if (!this.settings)
+                return false;
+            const { audio, video, screensharing } = this.settings;
+            switch (permission) {
+                case OwnCapability.SEND_AUDIO:
+                    return audio.access_request_enabled;
+                case OwnCapability.SEND_VIDEO:
+                    return video.access_request_enabled;
+                case OwnCapability.SCREENSHARE:
+                    return screensharing.access_request_enabled;
+                default:
+                    return false;
+            }
+        };
+    }
+}
+
 /**
  * Represents a call type.
  */
@@ -6162,6 +6443,10 @@ class Call {
          * ViewportTracker instance
          */
         this.viewportTracker = new ViewportTracker();
+        /**
+         * The permissions context of this call.
+         */
+        this.permissionsContext = new PermissionsContext();
         /**
          * The event dispatcher instance dedicated to this Call instance.
          * @private
@@ -6176,15 +6461,7 @@ class Call {
          * @private
          */
         this.leaveCallHooks = [];
-        /**
-         * Remove subscription for WebSocket events that were created by the `on` method.
-         * @param eventName
-         * @param fn
-         * @returns
-         */
-        this.off = (eventName, fn) => {
-            return this.dispatcher.off(eventName, fn);
-        };
+        this.streamClientEventHandlers = new Map();
         /**
          * Leave the call and stop the media streams that were published by the call.
          */
@@ -6245,6 +6522,7 @@ class Call {
             const call = yield join(this.streamClient, this.type, this.id, data);
             this.state.setMetadata(call.metadata);
             this.state.setMembers(call.members);
+            // TODO OL: do we need to handle JOIN_CALL permission here?
             // FIXME OL: convert to a derived state
             this.state.setCallRecordingInProgress(call.metadata.recording);
             // FIXME OL: remove once cascading is implemented
@@ -6373,12 +6651,7 @@ class Call {
                 // fails to respond in time
                 const { callState } = yield this.waitForJoinResponse();
                 const currentParticipants = (callState === null || callState === void 0 ? void 0 : callState.participants) || [];
-                const ownCapabilities = {
-                    ownCapabilities: call.metadata.own_capabilities,
-                };
-                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.state.setParticipants(currentParticipants.map((participant) => (Object.assign(Object.assign({}, participant), { isLoggedInUser: participant.sessionId === sfuClient.sessionId, viewportVisibilityState: VisibilityState.UNKNOWN }))));
                 this.clientStore.setActiveCall(this);
                 this.reconnectAttempts = 0; // reset the reconnect attempts counter
                 this.state.setCallingState(CallingState.JOINED);
@@ -6397,8 +6670,13 @@ class Call {
                 }
             }
         });
+        /**
+         * Will update the call members.
+         *
+         * @param data the request data.
+         */
         this.updateCallMembers = (data) => __awaiter(this, void 0, void 0, function* () {
-            return yield this.streamClient.post(`${this.streamClientBasePath}/members`, data);
+            return this.streamClient.post(`${this.streamClientBasePath}/members`, data);
         });
         /**
          * Starts publishing the given video stream to the call.
@@ -6751,38 +7029,72 @@ class Call {
                     .subscribe(() => resolve());
             });
         };
+        /**
+         * Sends a reaction to the other call participants.
+         *
+         * @param reaction the reaction to send.
+         */
         this.sendReaction = (reaction) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/reaction`, reaction);
         });
+        /**
+         * Blocks the user with the given `userId`.
+         *
+         * @param userId the id of the user to block.
+         */
         this.blockUser = (userId) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/block`, {
                 user_id: userId,
             });
         });
+        /**
+         * Unblocks the user with the given `userId`.
+         *
+         * @param userId the id of the user to unblock.
+         */
         this.unblockUser = (userId) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/unblock`, {
                 user_id: userId,
             });
         });
-        this.muteUser = (userId, type, sessionId) => {
+        /**
+         * Mutes the user with the given `userId`.
+         *
+         * @param userId the id of the user to mute.
+         * @param type the type of the mute operation.
+         */
+        this.muteUser = (userId, type) => {
+            // FIXME OL: handle muting self.
             return this.streamClient.post(`${this.streamClientBasePath}/mute_users`, {
-                user_ids: [userId],
+                user_ids: Array.isArray(userId) ? userId : [userId],
                 [type]: true,
-                // session_ids: [sessionId],
             });
         };
+        /**
+         * Will mute all users in the call.
+         *
+         * @param type the type of the mute operation.
+         */
         this.muteAllUsers = (type) => {
             return this.streamClient.post(`${this.streamClientBasePath}/mute_users`, {
                 mute_all_users: true,
                 [type]: true,
             });
         };
+        /**
+         * Loads the information about the call.
+         */
         this.get = () => __awaiter(this, void 0, void 0, function* () {
             const response = yield this.streamClient.get(this.streamClientBasePath);
             this.state.setMetadata(response.call);
             this.state.setMembers(response.members);
             return response;
         });
+        /**
+         * Loads the information about the call and creates it if it doesn't exist.
+         *
+         * @param data the data to create the call with.
+         */
         this.getOrCreate = (data) => __awaiter(this, void 0, void 0, function* () {
             const response = yield this.streamClient.post(this.streamClientBasePath, data);
             if ((data === null || data === void 0 ? void 0 : data.ring) && !this.dropTimeout) {
@@ -6804,28 +7116,23 @@ class Call {
          * Starts recording the call
          */
         this.startRecording = () => __awaiter(this, void 0, void 0, function* () {
-            try {
-                return yield this.streamClient.post(`${this.streamClientBasePath}/start_recording`, {});
-            }
-            catch (error) {
-                console.log(`Failed to start recording`, error);
-            }
+            return this.streamClient.post(`${this.streamClientBasePath}/start_recording`, {});
         });
         /**
          * Stops recording the call
          */
         this.stopRecording = () => __awaiter(this, void 0, void 0, function* () {
-            try {
-                return yield this.streamClient.post(`${this.streamClientBasePath}/stop_recording`, {});
-            }
-            catch (error) {
-                console.log(`Failed to stop recording`, error);
-            }
+            return this.streamClient.post(`${this.streamClientBasePath}/stop_recording`, {});
         });
         /**
          * Sends a `call.permission_request` event to all users connected to the call. The call settings object contains infomration about which permissions can be requested during a call (for example a user might be allowed to request permission to publish audio, but not video).
          */
         this.requestPermissions = (data) => __awaiter(this, void 0, void 0, function* () {
+            const { permissions } = data;
+            const canRequestPermissions = permissions.every((permission) => this.permissionsContext.canRequest(permission));
+            if (!canRequestPermissions) {
+                throw new Error(`You are not allowed to request permissions: ${permissions.join(', ')}`);
+            }
             return this.streamClient.post(`${this.streamClientBasePath}/request_permission`, data);
         });
         /**
@@ -6841,12 +7148,24 @@ class Call {
         this.updateUserPermissions = (data) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/user_permissions`, data);
         });
+        /**
+         * Starts the livestreaming of the call.
+         */
         this.goLive = () => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/go_live`, {});
         });
+        /**
+         * Stops the livestreaming of the call.
+         */
         this.stopLive = () => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/stop_live`, {});
         });
+        /**
+         * Updates the call settings or custom data.
+         *
+         * @param custom the custom data to update.
+         * @param settings the call settings to update.
+         */
         this.update = (custom, settings) => __awaiter(this, void 0, void 0, function* () {
             const payload = {
                 custom: custom,
@@ -6854,6 +7173,9 @@ class Call {
             };
             return this.streamClient.patch(`${this.streamClientBasePath}`, payload);
         });
+        /**
+         * Ends the call. Once the call is ended, it cannot be re-joined.
+         */
         this.endCall = () => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/mark_ended`);
         });
@@ -6976,9 +7298,19 @@ class Call {
             this.state.setCallRecordingsList(response.recordings);
             return response;
         });
+        /**
+         * Returns a list of Edge Serves for current call.
+         *
+         * @param data the data.
+         */
         this.getEdgeServer = (data) => {
             return this.streamClient.post(`${this.streamClientBasePath}/get_edge_server`, data);
         };
+        /**
+         * Sends an event to all call participants.
+         *
+         * @param event the event to send.
+         */
         this.sendEvent = (event) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/event`, event);
         });
@@ -6996,13 +7328,29 @@ class Call {
         }
         this.state.setMetadata(metadata);
         this.state.setMembers(members || []);
-        registerEventHandlers(this, this.state, this.dispatcher);
-        this.trackSubscriptionsSubject
-            .pipe(debounceTime(UPDATE_SUBSCRIPTIONS_DEBOUNCE_DURATION))
-            .subscribe((subscriptions) => {
-            var _a;
-            (_a = this.sfuClient) === null || _a === void 0 ? void 0 : _a.updateSubscriptions(subscriptions);
-        });
+        this.leaveCallHooks.push(registerEventHandlers(this, this.state, this.dispatcher));
+        this.registerEffects();
+        this.leaveCallHooks.push(createSubscription(this.trackSubscriptionsSubject.pipe(debounceTime(UPDATE_SUBSCRIPTIONS_DEBOUNCE_DURATION)), (subscriptions) => { var _a; return (_a = this.sfuClient) === null || _a === void 0 ? void 0 : _a.updateSubscriptions(subscriptions); }));
+    }
+    registerEffects() {
+        this.leaveCallHooks.push(
+        // handles updating the permissions context when the metadata changes.
+        createSubscription(this.state.metadata$, (metadata) => {
+            if (!metadata)
+                return;
+            this.permissionsContext.setPermissions(metadata.own_capabilities);
+            this.permissionsContext.setCallSettings(metadata.settings);
+        }), 
+        // handles the case when the user is blocked by the call owner.
+        createSubscription(this.state.metadata$, (metadata) => {
+            if (!metadata)
+                return;
+            const connectedUser = this.clientStore.connectedUser;
+            if (connectedUser &&
+                metadata.blocked_user_ids.includes(connectedUser.id)) {
+                this.leave();
+            }
+        }));
     }
     on(eventName, fn) {
         if (isSfuEvent(eventName)) {
@@ -7014,320 +7362,25 @@ class Call {
                     fn(event);
                 }
             };
+            this.streamClientEventHandlers.set(fn, eventHandler);
             return this.streamClient.on(eventName, eventHandler);
         }
     }
-    get data() {
-        return this.state.metadata;
-    }
-}
-
-/**
- * Event handler that watches the delivery of CallCreated Websocket event
- * Updates the state store and notifies its subscribers that
- * a new pending call has been initiated.
- */
-const watchCallCreated = (store, streamClient) => {
-    return function onCallCreated(event) {
-        if (event.type !== 'call.created') {
-            return;
-        }
-        const { call, members, ringing } = event;
-        if (!call) {
-            console.warn("Can't find call in CallCreatedEvent");
-            return;
-        }
-        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.setPendingCalls((pendingCalls) => [
-            ...pendingCalls,
-            new Call({
-                streamClient,
-                type: call.type,
-                id: call.id,
-                metadata: call,
-                members,
-                ringing,
-                clientStore: store,
-            }),
-        ]);
-    };
-};
-/**
- * Event handler that watched the delivery of CallAcceptedEvent
- * Updates the state store and notifies its subscribers that
- * the given user will be joining the call.
- */
-const watchCallAccepted = (store) => {
-    return function onCallAccepted(event) {
-        if (event.type !== 'call.accepted') {
-            return;
-        }
-        const { call_cid } = event;
-        if (!call_cid) {
-            console.warn("Can't find call_cid in CallAcceptedEvent");
-            return;
-        }
-        const acceptedIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
-        if (acceptedIncomingCall) {
-            console.warn('Received CallAcceptedEvent for an incoming call');
-            return;
-        }
-        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
-            : undefined;
-        if (!acceptedOutgoingCall && !acceptedActiveCall) {
-            console.warn(`CallAcceptedEvent received for a non-existent outgoing call (CID: ${call_cid}`);
-            return;
-        }
-        // once in active call, it is unnecessary to keep track of accepted call events
-        if (call_cid === (acceptedActiveCall === null || acceptedActiveCall === void 0 ? void 0 : acceptedActiveCall.cid)) {
-            return;
-        }
-        // do not set a new accepted call while in an active call? It would lead to joining a new active call.
-        // todo: solve the situation of 2nd outgoing call being accepted in the UI SDK
-        store.setAcceptedCall(event);
-    };
-};
-/**
- * Event handler that watches delivery of CallRejected Websocket event.
- * Updates the state store and notifies its subscribers that
- * the given user will not be joining the call.
- */
-const watchCallRejected = (store) => {
-    return function onCallRejected(event) {
-        if (event.type !== 'call.rejected') {
-            return;
-        }
-        const { call_cid } = event;
-        if (!call_cid) {
-            console.warn("Can't find call_cid in CallRejectedEvent");
-            return;
-        }
-        const rejectedIncomingCall = store.incomingCalls.find((incomingCall) => incomingCall.cid === call_cid);
-        if (rejectedIncomingCall) {
-            console.warn('Received CallRejectedEvent for an incoming call');
-            return;
-        }
-        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;
-        if (!rejectedOutgoingCall && !rejectedActiveCall) {
-            console.warn(`CallRejectedEvent received for a non-existent outgoing call (CID: ${call_cid}`);
-            return;
-        }
-        // FIXME: we should remove the call from pending once every callee has rejected, but for now we support only 1:1 ring calls
-        store.setPendingCalls((pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
-    };
-};
-/**
- * Event handler that watches the delivery of CallEndedEvent
- * Updates the state store and notifies its subscribers that
- * the call is now considered terminated.
- */
-const watchCallCancelled = (store) => {
-    return function onCallCancelled(event) {
-        if (event.type !== 'call.ended') {
-            return;
-        }
-        const { call_cid } = event;
-        if (!call_cid) {
-            console.log("Can't find call in CallEndedEvent");
-            return;
-        }
-        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;
-        if (!cancelledIncomingCall && !cancelledActiveCall) {
-            console.warn(`CallEndedEvent received for a non-existent incoming call (CID: ${call_cid}`);
-            return;
-        }
-        store.setPendingCalls((pendingCalls) => pendingCalls.filter((pendingCall) => pendingCall.cid !== call_cid));
-    };
-};
-
-/**
- * Event handler that watches for `call.permission_request` events
- * Updates the state store using the `callPermissionRequest$` stream
- */
-const watchCallPermissionRequest = (store) => {
-    return function onCallPermissionRequest(event) {
-        if (event.type !== 'call.permission_request') {
-            return;
-        }
-        const activeCall = store.activeCall;
-        if (!activeCall) {
-            console.warn(`Ignoring "call.permission_request" as there is no active call`, event);
-            return;
-        }
-        if (activeCall.cid !== event.call_cid) {
-            console.warn(`Ignoring "call.permission_request" as it doesn't belong to the active call`, event);
-            return;
-        }
-        const state = activeCall.state;
-        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.setCallPermissionRequest(event);
-    };
-};
-/**
- * Event handler that watches for `call.permissions_updated` events
- * It will update the `localParticipant$` or `remoteParticipants$` based on whose permissions were changed.
- */
-const watchCallPermissionsUpdated = (store) => {
-    return function onCallPermissionsUpdated(event) {
-        if (event.type !== 'call.permissions_updated') {
-            return;
-        }
-        const activeCall = store.activeCall;
-        if (!activeCall) {
-            console.warn(`Ignoring "call.permissions_updated" as there is no active call`, event);
-            return;
-        }
-        if (activeCall.cid !== event.call_cid) {
-            console.warn(`Ignoring "call.permissions_updated" as it doesn't belong to the active call`, event);
-            return;
-        }
-        const state = activeCall.state;
-        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,
-            });
-        }
-        // TODO: update remote participant once SFU includes that info in the participant data model
-    };
-};
-
-/**
- * Watches the delivery of CallReactionEvent.
- *
- * @param store the state store to update.
- */
-const watchNewReactions = (store) => {
-    return function onNewReactions(event) {
-        if (event.type !== 'call.reaction_new') {
-            return;
-        }
-        const { call_cid, reaction } = event;
-        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;
-        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)
-                    return p;
-                // skip if the reaction is not for this session
-                if (custom.sessionId && p.sessionId !== custom.sessionId)
-                    return p;
-                // update the participant with the new reaction
-                return Object.assign(Object.assign({}, p), { reaction: {
-                        type,
-                        emoji_code,
-                        custom,
-                    } });
-            });
-        });
-    };
-};
-
-/**
- * Watches for `call.recording_started` events.
- */
-const watchCallRecordingStarted = (store) => {
-    return function onCallRecordingStarted(event) {
-        if (event.type !== 'call.recording_started') {
-            return;
-        }
-        const { call_cid } = event;
-        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.setCallRecordingInProgress(true);
-    };
-};
-/**
- * Watches for `call.recording_stopped` events.
- */
-const watchCallRecordingStopped = (store) => {
-    return function onCallRecordingStopped(event) {
-        if (event.type !== 'call.recording_stopped') {
-            return;
+    off(eventName, fn) {
+        if (isSfuEvent(eventName)) {
+            return this.dispatcher.off(eventName, fn);
         }
-        const { call_cid } = event;
-        const activeCall = store.activeCall;
-        if (!activeCall || activeCall.cid !== call_cid) {
-            console.warn('Received CallRecordingStoppedEvent for a non-active call');
-            return;
+        else {
+            const registeredEventHandler = this.streamClientEventHandlers.get(fn);
+            if (registeredEventHandler) {
+                return this.streamClient.off(eventName, registeredEventHandler);
+            }
         }
-        const state = activeCall.state;
-        state.setCallRecordingInProgress(false);
-    };
-};
-
-/**
- * Event handler that watches for `call.blocked_user` events,
- * updates the call store `blocked_user_ids` property by adding
- * `event.user_id` to the list
- */
-const watchBlockedUser = (store) => (event) => {
-    var _a;
-    if (event.type !== 'call.blocked_user') {
-        return;
-    }
-    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;
-    // FIXME: end call
-    if (((_a = state.localParticipant) === null || _a === void 0 ? void 0 : _a.userId) === event.user.id) {
-        activeCall.leave();
-    }
-    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,
- * updates the call store `blocked_user_ids` property by
- * removing `event.user_id` from the list
- */
-const watchUnblockedUser = (store) => (event) => {
-    if (event.type !== 'call.unblocked_user') {
-        return;
     }
-    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;
+    get data() {
+        return this.state.metadata;
     }
-    const state = activeCall.state;
-    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 });
-    });
-};
+}
 
 var https = null;
 
@@ -8943,7 +8996,7 @@ class StreamClient {
     }
     getUserAgent() {
         return (this.userAgent ||
-            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.1-alpha.90"}`);
+            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.1-alpha.92"}`);
     }
     setUserAgent(userAgent) {
         this.userAgent = userAgent;
@@ -9003,17 +9056,31 @@ class StreamVideoClient {
             yield this.streamClient.connectUser(
             // @ts-expect-error
             user, tokenOrProvider);
-            this.on('call.created', watchCallCreated(this.writeableStateStore, this.streamClient));
+            // FIXME: OL: unregister the event listeners.
+            this.on('call.created', (event) => {
+                if (event.type !== 'call.created')
+                    return;
+                const { call, members, ringing } = event;
+                if (user.id === call.created_by.id) {
+                    console.warn('Received CallCreatedEvent sent by the current user');
+                    return;
+                }
+                this.writeableStateStore.setPendingCalls((pendingCalls) => [
+                    ...pendingCalls,
+                    new Call({
+                        streamClient: this.streamClient,
+                        type: call.type,
+                        id: call.id,
+                        metadata: call,
+                        members,
+                        ringing,
+                        clientStore: this.writeableStateStore,
+                    }),
+                ]);
+            });
             this.on('call.accepted', watchCallAccepted(this.writeableStateStore));
             this.on('call.rejected', watchCallRejected(this.writeableStateStore));
             this.on('call.ended', watchCallCancelled(this.writeableStateStore));
-            this.on('call.permission_request', watchCallPermissionRequest(this.writeableStateStore));
-            this.on('call.permissions_updated', watchCallPermissionsUpdated(this.writeableStateStore));
-            this.on('call.blocked_user', watchBlockedUser(this.writeableStateStore));
-            this.on('call.unblocked_user', watchUnblockedUser(this.writeableStateStore));
-            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.setConnectedUser(user);
         });
         /**