@stream-io/video-client 1.27.4 → 1.27.5

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.27.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.4...@stream-io/video-client-1.27.5) (2025-08-15)
+
+### Bug Fixes
+
+- synchronize ring events ([#1888](https://github.com/GetStream/stream-video-js/issues/1888)) ([0951e6d](https://github.com/GetStream/stream-video-js/commit/0951e6d4c825806937d6bdc548df9f186c531466))
+
 ## [1.27.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.3...@stream-io/video-client-1.27.4) (2025-08-13)
 
 ### Bug Fixes

package/dist/index.browser.es.js

@@ -4300,13 +4300,6 @@ class StreamVideoWriteableStateStore {
  */
 class StreamVideoReadOnlyStateStore {
     constructor(store) {
-        /**
-         * This method allows you the get the current value of a state variable.
-         *
-         * @param observable the observable to get the current value of.
-         * @returns the current value of the observable.
-         */
-        this.getCurrentValue = getCurrentValue;
         // convert and expose subjects as observables
         this.connectedUser$ = store.connectedUserSubject.asObservable();
         this.calls$ = store.callsSubject.asObservable();
@@ -5643,7 +5636,7 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
-const version = "1.27.4";
+const version = "1.27.5";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -14545,7 +14538,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.27.4", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.27.5", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -14666,6 +14659,13 @@ class StreamClient {
 const getInstanceKey = (apiKey, user) => {
     return `${apiKey}/${user.id}`;
 };
+/**
+ * Returns a concurrency tag for call initialization.
+ * @internal
+ *
+ * @param cid the call cid.
+ */
+const getCallInitConcurrencyTag = (cid) => `call.init-${cid}`;
 /**
  * Utility function to get the client app identifier.
  */
@@ -14734,7 +14734,7 @@ class StreamVideoClient {
         this.registerEffects = () => {
             if (this.effectsRegistered)
                 return;
-            this.eventHandlersToUnregister.push(this.on('connection.changed', (event) => {
+            this.eventHandlersToUnregister.push(this.on('call.created', (event) => this.initCallFromEvent(event)), this.on('call.ring', (event) => this.initCallFromEvent(event)), this.on('connection.changed', (event) => {
                 if (!event.online)
                     return;
                 const callsToReWatch = this.writeableStateStore.calls
@@ -14751,50 +14751,52 @@ class StreamVideoClient {
                     this.logger('error', 'Failed to re-watch calls', err);
                 });
             }));
-            this.eventHandlersToUnregister.push(this.on('call.created', (event) => {
-                const { call, members } = event;
-                if (this.state.connectedUser?.id === call.created_by.id) {
-                    this.logger('warn', 'Received `call.created` sent by the current user');
-                    return;
-                }
-                this.logger('info', `New call created and registered: ${call.cid}`);
-                const newCall = new Call({
-                    streamClient: this.streamClient,
-                    type: call.type,
-                    id: call.id,
-                    members,
-                    clientStore: this.writeableStateStore,
-                });
-                newCall.state.updateFromCallResponse(call);
-                this.writeableStateStore.registerCall(newCall);
-            }));
-            this.eventHandlersToUnregister.push(this.on('call.ring', async (event) => {
-                const { call, members } = event;
-                if (this.state.connectedUser?.id === call.created_by.id) {
-                    this.logger('debug', 'Received `call.ring` sent by the current user so ignoring the event');
-                    return;
-                }
-                // if `call.created` was received before `call.ring`.
-                // the client already has the call instance and we just need to update the state
-                const theCall = this.writeableStateStore.findCall(call.type, call.id);
-                if (theCall) {
-                    await theCall.updateFromRingingEvent(event);
-                }
-                else {
-                    // if client doesn't have the call instance, create the instance and fetch the latest state
-                    // Note: related - we also have onRingingCall method to handle this case from push notifications
-                    const newCallInstance = new Call({
+            this.effectsRegistered = true;
+        };
+        /**
+         * Initializes a call from a call created or ringing event.
+         * @param e the event.
+         */
+        this.initCallFromEvent = async (e) => {
+            if (this.state.connectedUser?.id === e.call.created_by.id) {
+                this.logger('debug', `Ignoring ${e.type} event sent by the current user`);
+                return;
+            }
+            try {
+                const concurrencyTag = getCallInitConcurrencyTag(e.call_cid);
+                await withoutConcurrency(concurrencyTag, async () => {
+                    const ringing = e.type === 'call.ring';
+                    let call = this.writeableStateStore.findCall(e.call.type, e.call.id);
+                    if (call) {
+                        if (ringing) {
+                            await call.updateFromRingingEvent(e);
+                        }
+                        else {
+                            call.state.updateFromCallResponse(e.call);
+                        }
+                        return;
+                    }
+                    call = new Call({
                         streamClient: this.streamClient,
-                        type: call.type,
-                        id: call.id,
-                        members,
+                        type: e.call.type,
+                        id: e.call.id,
+                        members: e.members,
                         clientStore: this.writeableStateStore,
-                        ringing: true,
+                        ringing,
                     });
-                    await newCallInstance.get();
-                }
-            }));
-            this.effectsRegistered = true;
+                    call.state.updateFromCallResponse(e.call);
+                    if (ringing) {
+                        await call.get();
+                    }
+                    else {
+                        this.writeableStateStore.registerCall(call);
+                        this.logger('info', `New call created and registered: ${call.cid}`);
+                    }
+                });
+            }
+            catch (err) {
+                this.logger('error', `Failed to init call from event ${e.type}`, err);
+            }
         };
         /**
          * Connects the given user to the client.
@@ -14894,6 +14896,7 @@ class StreamVideoClient {
          *
          * @param type the type of the call.
          * @param id the id of the call.
+         * @param options additional options for call creation.
          */
         this.call = (type, id, options = {}) => {
             const call = options.reuseInstance
@@ -15024,22 +15027,24 @@ class StreamVideoClient {
          * @returns
          */
         this.onRingingCall = async (call_cid) => {
-            // if we find the call and is already ringing, we don't need to create a new call
-            // as client would have received the call.ring state because the app had WS alive when receiving push notifications
-            let call = this.state.calls.find((c) => c.cid === call_cid && c.ringing);
-            if (!call) {
-                // if not it means that WS is not alive when receiving the push notifications and we need to fetch the call
-                const [callType, callId] = call_cid.split(':');
-                call = new Call({
-                    streamClient: this.streamClient,
-                    type: callType,
-                    id: callId,
-                    clientStore: this.writeableStateStore,
-                    ringing: true,
-                });
-                await call.get();
-            }
-            return call;
+            return withoutConcurrency(getCallInitConcurrencyTag(call_cid), async () => {
+                // if we find the call and is already ringing, we don't need to create a new call
+                // as client would have received the call.ring state because the app had WS alive when receiving push notifications
+                let call = this.state.calls.find((c) => c.cid === call_cid && c.ringing);
+                if (!call) {
+                    // if not it means that WS is not alive when receiving the push notifications and we need to fetch the call
+                    const [callType, callId] = call_cid.split(':');
+                    call = new Call({
+                        streamClient: this.streamClient,
+                        type: callType,
+                        id: callId,
+                        clientStore: this.writeableStateStore,
+                        ringing: true,
+                    });
+                    await call.get();
+                }
+                return call;
+            });
         };
         /**
          * Connects the given anonymous user to the client.