@stream-io/video-client 0.0.2-alpha.7 → 0.0.2-alpha.8

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.2-alpha.8](https://github.com/GetStream/stream-video-js/compare/client0.0.2-alpha.7...client0.0.2-alpha.8) (2023-05-30)
+
+
+### Features
+
+* integrate the new call ring flow ([#562](https://github.com/GetStream/stream-video-js/issues/562)) ([c407961](https://github.com/GetStream/stream-video-js/commit/c4079614cb962e098215c0061690d59c35882cd8))
+
+
+
 ## [0.0.2-alpha.7](https://github.com/GetStream/stream-video-js/compare/client0.0.2-alpha.6...client0.0.2-alpha.7) (2023-05-30)
 
 

package/dist/index.browser.es.js

@@ -7044,6 +7044,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) {
@@ -7163,16 +7172,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 === 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 !== 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();
+                }
             }
         });
     };
@@ -7643,6 +7675,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),
@@ -7665,8 +7704,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),
@@ -7692,6 +7729,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),
@@ -8298,13 +8340,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 === 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();
@@ -8336,9 +8376,16 @@ 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);
             if (this.streamClient._hasConnectionID()) {
@@ -8354,6 +8401,9 @@ 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);
             if (this.streamClient._hasConnectionID()) {
@@ -8362,12 +8412,40 @@ class Call {
             }
             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.
          *
@@ -8380,6 +8458,13 @@ class Call {
             }
             const previousCallingState = this.state.callingState;
             this.state.setCallingState(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;
@@ -8576,14 +8661,6 @@ class Call {
                 }
             }
         });
-        /**
-         * 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);
-        });
         /**
          * 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.
@@ -9063,7 +9140,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(pairwise(), tap(([prevMeta, currentMeta]) => {
                 if (!(currentMeta && this.clientStore.connectedUser))
@@ -9075,8 +9162,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;
@@ -9124,12 +9211,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}`;
@@ -10876,7 +10957,7 @@ class StreamClient {
     }
     getUserAgent() {
         return (this.userAgent ||
-            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.2-alpha.6"}`);
+            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.2-alpha.7"}`);
     }
     setUserAgent(userAgent) {
         this.userAgent = userAgent;
@@ -10922,6 +11003,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.
@@ -10934,8 +11016,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
@@ -10953,9 +11035,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;
@@ -10969,11 +11050,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;
         });
         /**
@@ -10996,6 +11102,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);
         });
         /**