@stream-io/video-client 0.0.2-alpha.2 → 0.0.2-alpha.21

package/dist/index.cjs.js

@@ -5737,14 +5737,13 @@ class Publisher {
         };
         this.updateVideoPublishQuality = (enabledRids) => __awaiter(this, void 0, void 0, function* () {
             var _a;
-            console.log('Updating publish quality, qualities requested by SFU:', enabledRids);
+            console.log('Update publish quality, requested rids by SFU:', enabledRids);
             const videoSender = (_a = this.transceiverRegistry[TrackType.VIDEO]) === null || _a === void 0 ? void 0 : _a.sender;
             if (!videoSender)
                 return;
             const params = videoSender.getParameters();
             let changed = false;
             params.encodings.forEach((enc) => {
-                console.log(enc.rid, enc.active);
                 // flip 'active' flag only when necessary
                 const shouldEnable = enabledRids.includes(enc.rid);
                 if (shouldEnable !== enc.active) {
@@ -5757,6 +5756,10 @@ class Publisher {
                     console.warn('No suitable video encoding quality found');
                 }
                 yield videoSender.setParameters(params);
+                console.log(`Update publish quality, enabled rids: ${params.encodings
+                    .filter((e) => e.active)
+                    .map((e) => e.rid)
+                    .join(', ')}`);
             }
         });
         this.getCodecPreferences = (trackType, preferredCodec) => {
@@ -6619,6 +6622,12 @@ class CallState {
          * @internal
          */
         this.membersSubject = new rxjs.BehaviorSubject([]);
+        /**
+         * The list of capabilities of the current user.
+         *
+         * @private
+         */
+        this.ownCapabilitiesSubject = new rxjs.BehaviorSubject([]);
         /**
          * The calling state.
          *
@@ -6801,6 +6810,15 @@ class CallState {
         this.setMembers = (members) => {
             this.setCurrentValue(this.membersSubject, members);
         };
+        /**
+         * Sets the own capabilities.
+         *
+         * @internal
+         * @param capabilities the capabilities to set.
+         */
+        this.setOwnCapabilities = (capabilities) => {
+            return this.setCurrentValue(this.ownCapabilitiesSubject, capabilities);
+        };
         /**
          * Will try to find the participant with the given sessionId in the current call.
          *
@@ -6890,6 +6908,7 @@ class CallState {
         this.callRecordingList$ = this.callRecordingListSubject.asObservable();
         this.metadata$ = this.metadataSubject.asObservable();
         this.members$ = this.membersSubject.asObservable();
+        this.ownCapabilities$ = this.ownCapabilitiesSubject.asObservable();
         this.callingState$ = this.callingStateSubject.asObservable();
     }
     /**
@@ -6985,6 +7004,12 @@ class CallState {
     get members() {
         return this.getCurrentValue(this.members$);
     }
+    /**
+     * The capabilities of the current user for the current call.
+     */
+    get ownCapabilities() {
+        return this.getCurrentValue(this.ownCapabilities$);
+    }
 }
 
 class StreamVideoWriteableStateStore {
@@ -7048,6 +7073,15 @@ class StreamVideoWriteableStateStore {
         this.unregisterCall = (call) => {
             return this.setCalls((calls) => calls.filter((c) => c !== call));
         };
+        /**
+         * Finds a {@link Call} object in the list of {@link Call} objects created/tracked by this client.
+         *
+         * @param type the type of call to find.
+         * @param id the id of the call to find.
+         */
+        this.findCall = (type, id) => {
+            return this.calls.find((c) => c.type === type && c.id === id);
+        };
         this.connectedUserSubject.subscribe((user) => __awaiter(this, void 0, void 0, function* () {
             // leave all calls when the user disconnects.
             if (!user) {
@@ -7167,16 +7201,39 @@ const watchCallAccepted = (call) => {
  * Once the event is received, the call is left.
  */
 const watchCallRejected = (call) => {
-    let totalRejections = 0;
     return function onCallRejected(event) {
         return __awaiter(this, void 0, void 0, function* () {
             if (event.type !== 'call.rejected')
                 return;
-            totalRejections++;
-            const { state } = call;
-            if (totalRejections >= state.members.length &&
-                state.callingState === exports.CallingState.RINGING) {
-                yield call.leave();
+            // We want to discard the event if it's from the current user
+            if (event.user.id === call.currentUserId)
+                return;
+            const { call: eventCall } = event;
+            const { session: callSession } = eventCall;
+            if (!callSession) {
+                console.log('No call session provided. Ignoring call.rejected event.');
+                return;
+            }
+            const rejectedBy = callSession.rejected_by;
+            const { members, callingState } = call.state;
+            if (callingState !== exports.CallingState.RINGING) {
+                console.log('Call is not in ringing mode (it is either accepted or rejected already). Ignoring call.rejected event.');
+                return;
+            }
+            if (call.isCreatedByMe) {
+                const everyoneElseRejected = members
+                    .filter((m) => m.user_id !== call.currentUserId)
+                    .every((m) => rejectedBy[m.user_id]);
+                if (everyoneElseRejected) {
+                    console.log('everyone rejected, leaving the call');
+                    yield call.leave();
+                }
+            }
+            else {
+                if (rejectedBy[eventCall.created_by.id]) {
+                    console.log('call creator rejected, leaving call');
+                    yield call.leave();
+                }
             }
         });
     };
@@ -7217,7 +7274,10 @@ const watchCallPermissionRequest = (state) => {
     return function onCallPermissionRequest(event) {
         if (event.type !== 'call.permission_request')
             return;
-        state.setCallPermissionRequest(event);
+        const { localParticipant } = state;
+        if (event.user.id !== (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.userId)) {
+            state.setCallPermissionRequest(event);
+        }
     };
 };
 /**
@@ -7229,7 +7289,7 @@ const watchCallPermissionsUpdated = (state) => {
             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 })));
+            state.setOwnCapabilities(event.own_capabilities);
         }
     };
 };
@@ -7240,7 +7300,6 @@ const watchCallPermissionsUpdated = (state) => {
  */
 const watchCallGrantsUpdated = (state) => {
     return function onCallGrantsUpdated(event) {
-        var _a;
         if (event.eventPayload.oneofKind !== 'callGrantsUpdated')
             return;
         const { currentGrants } = event.eventPayload.callGrantsUpdated;
@@ -7251,15 +7310,13 @@ const watchCallGrantsUpdated = (state) => {
                 [OwnCapability.SEND_VIDEO]: canPublishVideo,
                 [OwnCapability.SCREENSHARE]: canScreenshare,
             };
-            const nextCapabilities = (((_a = state.metadata) === null || _a === void 0 ? void 0 : _a.own_capabilities) || []).filter((capability) => update[capability] !== false);
+            const nextCapabilities = state.ownCapabilities.filter((capability) => update[capability] !== false);
             Object.entries(update).forEach(([capability, value]) => {
                 if (value && !nextCapabilities.includes(capability)) {
                     nextCapabilities.push(capability);
                 }
             });
-            state.setMetadata((metadata) => {
-                return Object.assign(Object.assign({}, metadata), { own_capabilities: nextCapabilities });
-            });
+            state.setOwnCapabilities(nextCapabilities);
         }
     };
 };
@@ -7552,10 +7609,7 @@ const watchCallSessionStarted = (state) => {
     return function onCallSessionStarted(event) {
         if (event.type !== 'call.session_started')
             return;
-        const { call } = event;
-        state.setMetadata((metadata) => (Object.assign(Object.assign({}, call), { 
-            // FIXME OL: temporary, until the backend sends the own_capabilities
-            own_capabilities: (metadata === null || metadata === void 0 ? void 0 : metadata.own_capabilities) || [] })));
+        state.setMetadata(event.call);
     };
 };
 /**
@@ -7567,10 +7621,7 @@ const watchCallSessionEnded = (state) => {
     return function onCallSessionEnded(event) {
         if (event.type !== 'call.session_ended')
             return;
-        const { call } = event;
-        state.setMetadata((metadata) => (Object.assign(Object.assign({}, call), { 
-            // FIXME OL: temporary, until the backend sends the own_capabilities
-            own_capabilities: (metadata === null || metadata === void 0 ? void 0 : metadata.own_capabilities) || [] })));
+        state.setMetadata(event.call);
     };
 };
 /**
@@ -7647,6 +7698,13 @@ const watchUnblockedUser = (state) => (event) => {
     });
 };
 
+/**
+ * Registers the default event handlers for a call during its lifecycle.
+ *
+ * @param call the call to register event handlers for.
+ * @param state the call state.
+ * @param dispatcher the dispatcher.
+ */
 const registerEventHandlers = (call, state, dispatcher) => {
     const coordinatorEvents = {
         'call.blocked_user': watchBlockedUser(state),
@@ -7669,8 +7727,6 @@ const registerEventHandlers = (call, state, dispatcher) => {
         'call.session_participant_left': watchCallSessionParticipantLeft(state),
         'call.unblocked_user': watchUnblockedUser(state),
         'call.updated': watchCallUpdated(state),
-        'call.notification': (event) => console.log(`Received ${event.type} event`, event),
-        'call.ring': (event) => console.log(`Received ${event.type} event`, event),
     };
     const eventHandlers = [
         watchChangePublishQuality(dispatcher, call),
@@ -7696,6 +7752,11 @@ const registerEventHandlers = (call, state, dispatcher) => {
         eventHandlers.forEach((unsubscribe) => unsubscribe());
     };
 };
+/**
+ * Registers event handlers for a call that is of ringing type.
+ *
+ * @param call the call to register event handlers for.
+ */
 const registerRingingCallEventHandlers = (call) => {
     const coordinatorRingEvents = {
         'call.accepted': watchCallAccepted(call),
@@ -7722,13 +7783,14 @@ const registerRingingCallEventHandlers = (call) => {
 const join = (httpClient, type, id, data) => __awaiter(void 0, void 0, void 0, function* () {
     yield httpClient.connectionIdPromise;
     const joinCallResponse = yield doJoin(httpClient, type, id, data);
-    const { call, credentials, members } = joinCallResponse;
+    const { call, credentials, members, own_capabilities } = joinCallResponse;
     return {
         connectionConfig: toRtcConfiguration(credentials.ice_servers),
         sfuServer: credentials.server,
         token: credentials.token,
         metadata: call,
         members,
+        ownCapabilities: own_capabilities,
     };
 });
 const doJoin = (httpClient, type, id, data) => __awaiter(void 0, void 0, void 0, function* () {
@@ -7745,9 +7807,12 @@ const doJoin = (httpClient, type, id, data) => __awaiter(void 0, void 0, void 0,
 });
 const getLocationHint = () => __awaiter(void 0, void 0, void 0, function* () {
     const hintURL = `https://hint.stream-io-video.com/`;
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), 1000);
     try {
         const response = yield fetch(hintURL, {
             method: 'HEAD',
+            signal: abortController.signal,
         });
         const awsPop = response.headers.get('x-amz-cf-pop') || 'ERR';
         return awsPop.substring(0, 3); // AMS1-P2 -> AMS
@@ -7756,6 +7821,9 @@ const getLocationHint = () => __awaiter(void 0, void 0, void 0, function* () {
         console.error(`Failed to get location hint from ${hintURL}`, e);
         return 'ERR';
     }
+    finally {
+        clearTimeout(timeoutId);
+    }
 });
 const toRtcConfiguration = (config) => {
     if (!config || config.length === 0)
@@ -8258,7 +8326,7 @@ class Call {
      * Use the [`StreamVideoClient.call`](./StreamVideoClient.md/#call)
      * method to construct a `Call` instance.
      */
-    constructor({ type, id, streamClient, metadata, members, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
+    constructor({ type, id, streamClient, metadata, members, ownCapabilities, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
         /**
          * ViewportTracker instance
          */
@@ -8302,13 +8370,11 @@ class Call {
                 if (this.isCreatedByMe && !hasOtherParticipants) {
                     // Signals other users that I have cancelled my call to them
                     // before they accepted it.
-                    // Causes the `call.ended` event to be emitted to all the call members.
-                    yield this.endCall();
+                    yield this.reject();
                 }
                 else if (reject && callingState === exports.CallingState.RINGING) {
                     // Signals other users that I have rejected the incoming call.
-                    // Causes the `call.rejected` event to be emitted to all the call members.
-                    yield this.sendEvent({ type: 'call.rejected' });
+                    yield this.reject();
                 }
             }
             (_a = this.statsReporter) === null || _a === void 0 ? void 0 : _a.stop();
@@ -8340,11 +8406,19 @@ class Call {
         });
         /**
          * Loads the information about the call.
+         *
+         * @param params.ring if set to true, a `call.ring` event will be sent to the call members.
+         * @param params.notify if set to true, a `call.notification` event will be sent to the call members.
+         * @param params.members_limit the members limit.
          */
         this.get = (params) => __awaiter(this, void 0, void 0, function* () {
             const response = yield this.streamClient.get(this.streamClientBasePath, params);
+            if ((params === null || params === void 0 ? void 0 : params.ring) && !this.ringing) {
+                this.ringingSubject.next(true);
+            }
             this.state.setMetadata(response.call);
             this.state.setMembers(response.members);
+            this.state.setOwnCapabilities(response.own_capabilities);
             if (this.streamClient._hasConnectionID()) {
                 this.watching = true;
                 this.clientStore.registerCall(this);
@@ -8358,20 +8432,52 @@ class Call {
          */
         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.ringing) {
+                this.ringingSubject.next(true);
+            }
             this.state.setMetadata(response.call);
             this.state.setMembers(response.members);
+            this.state.setOwnCapabilities(response.own_capabilities);
             if (this.streamClient._hasConnectionID()) {
                 this.watching = true;
                 this.clientStore.registerCall(this);
             }
             return response;
         });
+        /**
+         * A shortcut for {@link Call.get} with `ring` parameter set to `true`.
+         * Will send a `call.ring` event to the call members.
+         */
         this.ring = () => __awaiter(this, void 0, void 0, function* () {
             return yield this.get({ ring: true });
         });
+        /**
+         * A shortcut for {@link Call.get} with `notify` parameter set to `true`.
+         * Will send a `call.notification` event to the call members.
+         */
         this.notify = () => __awaiter(this, void 0, void 0, function* () {
             return yield this.get({ notify: true });
         });
+        /**
+         * Marks the incoming call as accepted.
+         *
+         * This method should be used only for "ringing" call flows.
+         * {@link Call.join} invokes this method automatically for you when joining a call.
+         * Unless you are implementing a custom "ringing" flow, you should not use this method.
+         */
+        this.accept = () => __awaiter(this, void 0, void 0, function* () {
+            return this.streamClient.post(`${this.streamClientBasePath}/accept`);
+        });
+        /**
+         * Marks the incoming call as rejected.
+         *
+         * This method should be used only for "ringing" call flows.
+         * {@link Call.leave} invokes this method automatically for you when you leave or reject this call.
+         * Unless you are implementing a custom "ringing" flow, you should not use this method.
+         */
+        this.reject = () => __awaiter(this, void 0, void 0, function* () {
+            return this.streamClient.post(`${this.streamClientBasePath}/reject`);
+        });
         /**
          * Will start to watch for call related WebSocket events and initiate a call session with the server.
          *
@@ -8384,6 +8490,13 @@ class Call {
             }
             const previousCallingState = this.state.callingState;
             this.state.setCallingState(exports.CallingState.JOINING);
+            if ((data === null || data === void 0 ? void 0 : data.ring) && !this.ringing) {
+                this.ringingSubject.next(true);
+            }
+            if (this.ringing && !this.isCreatedByMe) {
+                // signals other users that I have accepted the incoming call.
+                yield this.accept();
+            }
             let sfuServer;
             let sfuToken;
             let connectionConfig;
@@ -8391,6 +8504,7 @@ class Call {
                 const call = yield join(this.streamClient, this.type, this.id, data);
                 this.state.setMetadata(call.metadata);
                 this.state.setMembers(call.members);
+                this.state.setOwnCapabilities(call.ownCapabilities);
                 connectionConfig = call.connectionConfig;
                 sfuServer = call.sfuServer;
                 sfuToken = call.token;
@@ -8580,15 +8694,6 @@ class Call {
                 }
             }
         });
-        /**
-         * Will update the call members.
-         *
-         * @param data the request data.
-         */
-        this.updateCallMembers = (data) => __awaiter(this, void 0, void 0, function* () {
-            // FIXME: OL: implement kick-users
-            return this.streamClient.post(`${this.streamClientBasePath}/members`, data);
-        });
         /**
          * Starts publishing the given video stream to the call.
          * The stream will be stopped if the user changes an input device, or if the user leaves the call.
@@ -9041,7 +9146,12 @@ class Call {
          * @param updates the updates to apply to the call.
          */
         this.update = (updates) => __awaiter(this, void 0, void 0, function* () {
-            return this.streamClient.patch(`${this.streamClientBasePath}`, updates);
+            const response = yield this.streamClient.patch(`${this.streamClientBasePath}`, updates);
+            const { call, members, own_capabilities } = response;
+            this.state.setMetadata(call);
+            this.state.setMembers(members);
+            this.state.setOwnCapabilities(own_capabilities);
+            return response;
         });
         /**
          * Ends the call. Once the call is ended, it cannot be re-joined.
@@ -9068,7 +9178,17 @@ class Call {
         this.queryMembers = (request) => {
             return this.streamClient.post('/call/members', Object.assign(Object.assign({}, request), { id: this.id, type: this.type }));
         };
+        /**
+         * Will update the call members.
+         *
+         * @param data the request data.
+         */
+        this.updateCallMembers = (data) => __awaiter(this, void 0, void 0, function* () {
+            return this.streamClient.post(`${this.streamClientBasePath}/members`, data);
+        });
         this.scheduleAutoDrop = () => {
+            if (this.dropTimeout)
+                clearTimeout(this.dropTimeout);
             const subscription = this.state.metadata$
                 .pipe(rxjs.pairwise(), rxjs.tap(([prevMeta, currentMeta]) => {
                 if (!(currentMeta && this.clientStore.connectedUser))
@@ -9080,8 +9200,8 @@ class Call {
                         currentMeta.settings.ring.auto_cancel_timeout_ms,
                     ]
                     : [
-                        prevMeta === null || prevMeta === void 0 ? void 0 : prevMeta.settings.ring.auto_reject_timeout_ms,
-                        currentMeta.settings.ring.auto_reject_timeout_ms,
+                        prevMeta === null || prevMeta === void 0 ? void 0 : prevMeta.settings.ring.incoming_call_timeout_ms,
+                        currentMeta.settings.ring.incoming_call_timeout_ms,
                     ];
                 if (typeof timeoutMs === 'undefined' || timeoutMs === prevTimeoutMs)
                     return;
@@ -9095,25 +9215,23 @@ class Call {
             });
         };
         /**
-         * Performs HTTP request to retrieve the list of recordings for the current call
-         * Updates the call state with provided array of CallRecording objects
+         * Retrieves the list of recordings for the current call or call session.
+         * Updates the call state with the returned array of CallRecording objects.
+         *
+         * If `callSessionId` is provided, it will return the recordings for that call session.
+         * Otherwise, all recordings for the current call will be returned.
+         *
+         * @param callSessionId the call session id to retrieve recordings for.
          */
-        this.queryRecordings = () => __awaiter(this, void 0, void 0, function* () {
-            // 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.queryRecordings = (callSessionId) => __awaiter(this, void 0, void 0, function* () {
+            let endpoint = this.streamClientBasePath;
+            if (callSessionId) {
+                endpoint = `${endpoint}/${callSessionId}`;
+            }
+            const response = yield this.streamClient.get(`${endpoint}/recordings`);
             this.state.setCallRecordingsList(response.recordings);
             return response;
         });
-        /**
-         * Returns a list of Edge Serves for current call.
-         *
-         * @deprecated merged with `call.join`.
-         * @param data the data.
-         */
-        this.getEdgeServer = (data) => {
-            return this.streamClient.post(`${this.streamClientBasePath}/get_edge_server`, data);
-        };
         /**
          * Sends an event to all call participants.
          *
@@ -9122,12 +9240,6 @@ class Call {
         this.sendEvent = (event) => __awaiter(this, void 0, void 0, function* () {
             return this.streamClient.post(`${this.streamClientBasePath}/event`, event);
         });
-        this.accept = () => __awaiter(this, void 0, void 0, function* () {
-            return this.streamClient.post(`${this.streamClientBasePath}/accept`);
-        });
-        this.reject = () => __awaiter(this, void 0, void 0, function* () {
-            return this.streamClient.post(`${this.streamClientBasePath}/reject`);
-        });
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -9143,6 +9255,7 @@ class Call {
         }
         this.state.setMetadata(metadata);
         this.state.setMembers(members || []);
+        this.state.setOwnCapabilities(ownCapabilities || []);
         this.state.setCallingState(ringing ? exports.CallingState.RINGING : exports.CallingState.IDLE);
         this.leaveCallHooks.push(registerEventHandlers(this, this.state, this.dispatcher));
         this.registerEffects();
@@ -9154,23 +9267,13 @@ class Call {
         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) => __awaiter(this, void 0, void 0, function* () {
-            if (!metadata)
-                return;
-            const currentUserId = this.currentUserId;
-            if (currentUserId &&
-                metadata.blocked_user_ids.includes(currentUserId)) {
-                yield this.leave();
-            }
-        })), 
-        // handle the case when the user permissions are revoked.
-        createSubscription(this.state.metadata$, (metadata) => {
-            if (!metadata)
-                return;
+        // handle the case when the user permissions are modified.
+        createSubscription(this.state.ownCapabilities$, (ownCapabilities) => {
+            // update the permission context.
+            this.permissionsContext.setPermissions(ownCapabilities);
+            // check if the user still has publishing permissions and stop publishing if not.
             const permissionToTrackType = {
                 [OwnCapability.SEND_AUDIO]: TrackType.AUDIO,
                 [OwnCapability.SEND_VIDEO]: TrackType.VIDEO,
@@ -9185,6 +9288,16 @@ class Call {
                 }
             });
         }), 
+        // handles the case when the user is blocked by the call owner.
+        createSubscription(this.state.metadata$, (metadata) => __awaiter(this, void 0, void 0, function* () {
+            if (!metadata)
+                return;
+            const currentUserId = this.currentUserId;
+            if (currentUserId &&
+                metadata.blocked_user_ids.includes(currentUserId)) {
+                yield this.leave();
+            }
+        })), 
         // watch for auto drop cancellation
         createSubscription(this.state.callingState$, (callingState) => {
             if (!this.ringing)
@@ -10875,7 +10988,7 @@ class StreamClient {
     }
     getUserAgent() {
         return (this.userAgent ||
-            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.2-alpha.1"}`);
+            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.2-alpha.20"}`);
     }
     setUserAgent(userAgent) {
         this.userAgent = userAgent;
@@ -10921,6 +11034,7 @@ class StreamVideoClient {
      * @param opts the options for the client.
      */
     constructor(apiKey, opts) {
+        this.eventHandlersToUnregister = [];
         /**
          * Connects the given user to the client.
          * Only one user can connect at a time, if you want to change users, call `disconnectUser` before connecting a new user.
@@ -10933,8 +11047,8 @@ class StreamVideoClient {
             const connectUserResponse = yield this.streamClient.connectUser(
             // @ts-expect-error
             user, tokenOrProvider);
-            // FIXME OL: unregister the event listeners.
-            this.on('connection.changed', (e) => {
+            this.writeableStateStore.setConnectedUser(user);
+            this.eventHandlersToUnregister.push(this.on('connection.changed', (e) => {
                 const event = e;
                 if (event.online) {
                     const callsToReWatch = this.writeableStateStore.calls
@@ -10952,9 +11066,8 @@ class StreamVideoClient {
                         });
                     }
                 }
-            });
-            // FIXME: OL: unregister the event listeners.
-            this.on('call.created', (event) => {
+            }));
+            this.eventHandlersToUnregister.push(this.on('call.created', (event) => {
                 if (event.type !== 'call.created')
                     return;
                 const { call, members } = event;
@@ -10968,11 +11081,36 @@ class StreamVideoClient {
                     id: call.id,
                     metadata: call,
                     members,
-                    ringing: false,
                     clientStore: this.writeableStateStore,
                 }));
-            });
-            this.writeableStateStore.setConnectedUser(user);
+            }));
+            this.eventHandlersToUnregister.push(this.on('call.ring', (event) => __awaiter(this, void 0, void 0, function* () {
+                if (event.type !== 'call.ring')
+                    return;
+                const { call, members } = event;
+                if (user.id === call.created_by.id) {
+                    console.warn('Received `call.ring` sent by the current user');
+                    return;
+                }
+                // The call might already be tracked by the client,
+                // if `call.created` was received before `call.ring`.
+                // In that case, we just reuse the already tracked call.
+                let theCall = this.writeableStateStore.findCall(call.type, call.id);
+                if (!theCall) {
+                    // otherwise, we create a new call
+                    theCall = new Call({
+                        streamClient: this.streamClient,
+                        type: call.type,
+                        id: call.id,
+                        members,
+                        clientStore: this.writeableStateStore,
+                        ringing: true,
+                    });
+                }
+                // we fetch the latest metadata for the call from the server
+                yield theCall.get({ ring: true });
+                this.writeableStateStore.registerCall(theCall);
+            })));
             return connectUserResponse;
         });
         /**
@@ -10995,6 +11133,8 @@ class StreamVideoClient {
          */
         this.disconnectUser = (timeout) => __awaiter(this, void 0, void 0, function* () {
             yield this.streamClient.disconnectUser(timeout);
+            this.eventHandlersToUnregister.forEach((unregister) => unregister());
+            this.eventHandlersToUnregister = [];
             this.writeableStateStore.setConnectedUser(undefined);
         });
         /**
@@ -11056,6 +11196,7 @@ class StreamVideoClient {
                     type: c.call.type,
                     metadata: c.call,
                     members: c.members,
+                    ownCapabilities: c.own_capabilities,
                     watching: data.watch,
                     clientStore: this.writeableStateStore,
                 });
@@ -11405,7 +11546,7 @@ const createSoundDetector = (audioStream, onSoundDetectedStateChanged, options =
         const percentage = averagedDataValue > audioLevelThreshold
             ? 100
             : Math.round((averagedDataValue / audioLevelThreshold) * 100);
-        onSoundDetectedStateChanged(isSoundDetected, percentage);
+        onSoundDetectedStateChanged({ isSoundDetected, audioLevel: percentage });
     }, detectionFrequencyInMs);
     return function stop() {
         return __awaiter(this, void 0, void 0, function* () {