@stream-io/video-client 1.27.3 → 1.27.5

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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
+
+- expose isSupportedBrowser() utility ([#1859](https://github.com/GetStream/stream-video-js/issues/1859)) ([f51a434](https://github.com/GetStream/stream-video-js/commit/f51a4341f57407210ab2e9ba57f41818ddbd7ed9))
+
 ## [1.27.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.2...@stream-io/video-client-1.27.3) (2025-08-07)
 
 ### 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,6 +5636,151 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
+const version = "1.27.5";
+const [major, minor, patch] = version.split('.');
+let sdkInfo = {
+    type: SdkType.PLAIN_JAVASCRIPT,
+    major,
+    minor,
+    patch,
+};
+let osInfo;
+let deviceInfo;
+let webRtcInfo;
+let deviceState = { oneofKind: undefined };
+const setSdkInfo = (info) => {
+    sdkInfo = info;
+};
+const getSdkInfo = () => {
+    return sdkInfo;
+};
+const setOSInfo = (info) => {
+    osInfo = info;
+};
+const setDeviceInfo = (info) => {
+    deviceInfo = info;
+};
+const getWebRTCInfo = () => {
+    return webRtcInfo;
+};
+const setWebRTCInfo = (info) => {
+    webRtcInfo = info;
+};
+const setThermalState = (state) => {
+    if (!osInfo) {
+        deviceState = { oneofKind: undefined };
+        return;
+    }
+    if (osInfo.name === 'android') {
+        const thermalState = AndroidThermalState[state] ||
+            AndroidThermalState.UNSPECIFIED;
+        deviceState = {
+            oneofKind: 'android',
+            android: {
+                thermalState,
+                isPowerSaverMode: deviceState?.oneofKind === 'android' &&
+                    deviceState.android.isPowerSaverMode,
+            },
+        };
+    }
+    if (osInfo.name.toLowerCase() === 'ios') {
+        const thermalState = AppleThermalState[state] ||
+            AppleThermalState.UNSPECIFIED;
+        deviceState = {
+            oneofKind: 'apple',
+            apple: {
+                thermalState,
+                isLowPowerModeEnabled: deviceState?.oneofKind === 'apple' &&
+                    deviceState.apple.isLowPowerModeEnabled,
+            },
+        };
+    }
+};
+const setPowerState = (powerMode) => {
+    if (!osInfo) {
+        deviceState = { oneofKind: undefined };
+        return;
+    }
+    if (osInfo.name === 'android') {
+        deviceState = {
+            oneofKind: 'android',
+            android: {
+                thermalState: deviceState?.oneofKind === 'android'
+                    ? deviceState.android.thermalState
+                    : AndroidThermalState.UNSPECIFIED,
+                isPowerSaverMode: powerMode,
+            },
+        };
+    }
+    if (osInfo.name.toLowerCase() === 'ios') {
+        deviceState = {
+            oneofKind: 'apple',
+            apple: {
+                thermalState: deviceState?.oneofKind === 'apple'
+                    ? deviceState.apple.thermalState
+                    : AppleThermalState.UNSPECIFIED,
+                isLowPowerModeEnabled: powerMode,
+            },
+        };
+    }
+};
+const getDeviceState = () => {
+    return deviceState;
+};
+const getClientDetails = async () => {
+    if (isReactNative()) {
+        // Since RN doesn't support web, sharing browser info is not required
+        return {
+            sdk: sdkInfo,
+            os: osInfo,
+            device: deviceInfo,
+        };
+    }
+    // @ts-expect-error - userAgentData is not yet in the TS types
+    const userAgentDataApi = navigator.userAgentData;
+    let userAgentData;
+    if (userAgentDataApi && userAgentDataApi.getHighEntropyValues) {
+        try {
+            userAgentData = await userAgentDataApi.getHighEntropyValues([
+                'platform',
+                'platformVersion',
+                'fullVersionList',
+            ]);
+        }
+        catch {
+            // Ignore the error
+        }
+    }
+    const userAgent = new UAParser(navigator.userAgent);
+    const { browser, os, device, cpu } = userAgent.getResult();
+    // If userAgentData is available, it means we are in a modern Chromium browser,
+    // and we can use it to get more accurate browser information.
+    // We hook into the fullVersionList to find the browser name and version and
+    // eventually detect exotic browsers like Samsung Internet, AVG Secure Browser, etc.
+    // who by default they identify themselves as "Chromium" in the user agent string.
+    // Eliminates the generic "Chromium" name and "Not)A_Brand" name from the list.
+    // https://wicg.github.io/ua-client-hints/#create-arbitrary-brands-section
+    const uaBrowser = userAgentData?.fullVersionList?.find((v) => !v.brand.includes('Chromium') && !v.brand.match(/[()\-./:;=?_]/g));
+    return {
+        sdk: sdkInfo,
+        browser: {
+            name: uaBrowser?.brand || browser.name || navigator.userAgent,
+            version: uaBrowser?.version || browser.version || '',
+        },
+        os: {
+            name: userAgentData?.platform || os.name || '',
+            version: userAgentData?.platformVersion || os.version || '',
+            architecture: cpu.architecture || '',
+        },
+        device: {
+            name: [device.vendor, device.model, device.type]
+                .filter(Boolean)
+                .join(' '),
+            version: '',
+        },
+    };
+};
+
 /**
  * Checks whether the current browser is Safari.
  */
@@ -5667,12 +5805,34 @@ const isChrome = () => {
         return false;
     return navigator.userAgent?.includes('Chrome');
 };
+/**
+ * Checks whether the current browser is among the list of first-class supported browsers.
+ * This includes Chrome, Edge, Firefox, and Safari.
+ *
+ * Although the Stream Video SDK may work in other browsers, these are the ones we officially support.
+ */
+const isSupportedBrowser = async () => {
+    const { browser } = await getClientDetails();
+    if (!browser)
+        return false; // we aren't running in a browser
+    const name = browser.name.toLowerCase();
+    const [major] = browser.version.split('.');
+    const version = parseInt(major, 10);
+    return ((name.includes('chrome') && version >= 124) ||
+        (name.includes('edge') && version >= 124) ||
+        (name.includes('firefox') && version >= 124) ||
+        (name.includes('safari') && version >= 17) ||
+        (name.includes('webkit') && version >= 605) || // WebView on iOS
+        (name.includes('webview') && version >= 124) // WebView on Android
+    );
+};
 
 var browsers = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isChrome: isChrome,
     isFirefox: isFirefox,
-    isSafari: isSafari
+    isSafari: isSafari,
+    isSupportedBrowser: isSupportedBrowser
 });
 
 /**
@@ -5914,142 +6074,6 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.27.3";
-const [major, minor, patch] = version.split('.');
-let sdkInfo = {
-    type: SdkType.PLAIN_JAVASCRIPT,
-    major,
-    minor,
-    patch,
-};
-let osInfo;
-let deviceInfo;
-let webRtcInfo;
-let deviceState = { oneofKind: undefined };
-const setSdkInfo = (info) => {
-    sdkInfo = info;
-};
-const getSdkInfo = () => {
-    return sdkInfo;
-};
-const setOSInfo = (info) => {
-    osInfo = info;
-};
-const setDeviceInfo = (info) => {
-    deviceInfo = info;
-};
-const getWebRTCInfo = () => {
-    return webRtcInfo;
-};
-const setWebRTCInfo = (info) => {
-    webRtcInfo = info;
-};
-const setThermalState = (state) => {
-    if (!osInfo) {
-        deviceState = { oneofKind: undefined };
-        return;
-    }
-    if (osInfo.name === 'android') {
-        const thermalState = AndroidThermalState[state] ||
-            AndroidThermalState.UNSPECIFIED;
-        deviceState = {
-            oneofKind: 'android',
-            android: {
-                thermalState,
-                isPowerSaverMode: deviceState?.oneofKind === 'android' &&
-                    deviceState.android.isPowerSaverMode,
-            },
-        };
-    }
-    if (osInfo.name.toLowerCase() === 'ios') {
-        const thermalState = AppleThermalState[state] ||
-            AppleThermalState.UNSPECIFIED;
-        deviceState = {
-            oneofKind: 'apple',
-            apple: {
-                thermalState,
-                isLowPowerModeEnabled: deviceState?.oneofKind === 'apple' &&
-                    deviceState.apple.isLowPowerModeEnabled,
-            },
-        };
-    }
-};
-const setPowerState = (powerMode) => {
-    if (!osInfo) {
-        deviceState = { oneofKind: undefined };
-        return;
-    }
-    if (osInfo.name === 'android') {
-        deviceState = {
-            oneofKind: 'android',
-            android: {
-                thermalState: deviceState?.oneofKind === 'android'
-                    ? deviceState.android.thermalState
-                    : AndroidThermalState.UNSPECIFIED,
-                isPowerSaverMode: powerMode,
-            },
-        };
-    }
-    if (osInfo.name.toLowerCase() === 'ios') {
-        deviceState = {
-            oneofKind: 'apple',
-            apple: {
-                thermalState: deviceState?.oneofKind === 'apple'
-                    ? deviceState.apple.thermalState
-                    : AppleThermalState.UNSPECIFIED,
-                isLowPowerModeEnabled: powerMode,
-            },
-        };
-    }
-};
-const getDeviceState = () => {
-    return deviceState;
-};
-const getClientDetails = async () => {
-    if (isReactNative()) {
-        // Since RN doesn't support web, sharing browser info is not required
-        return {
-            sdk: sdkInfo,
-            os: osInfo,
-            device: deviceInfo,
-        };
-    }
-    // @ts-expect-error - userAgentData is not yet in the TS types
-    const userAgentDataApi = navigator.userAgentData;
-    let userAgentData;
-    if (userAgentDataApi && userAgentDataApi.getHighEntropyValues) {
-        try {
-            userAgentData = await userAgentDataApi.getHighEntropyValues([
-                'platform',
-                'platformVersion',
-            ]);
-        }
-        catch {
-            // Ignore the error
-        }
-    }
-    const userAgent = new UAParser(navigator.userAgent);
-    const { browser, os, device, cpu } = userAgent.getResult();
-    return {
-        sdk: sdkInfo,
-        browser: {
-            name: browser.name || navigator.userAgent,
-            version: browser.version || '',
-        },
-        os: {
-            name: userAgentData?.platform || os.name || '',
-            version: userAgentData?.platformVersion || os.version || '',
-            architecture: cpu.architecture || '',
-        },
-        device: {
-            name: [device.vendor, device.model, device.type]
-                .filter(Boolean)
-                .join(' '),
-            version: '',
-        },
-    };
-};
-
 class SfuStatsReporter {
     constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, tracer, unifiedSessionId, }) {
         this.logger = getLogger(['SfuStatsReporter']);
@@ -14514,7 +14538,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.27.3", ...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}`),
@@ -14635,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.
  */
@@ -14703,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
@@ -14720,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.
@@ -14863,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
@@ -14993,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.