@stream-io/video-react-sdk 1.33.3 → 1.34.0

package/dist/src/components/NoiseCancellation/NoiseCancellationProvider.d.ts

@@ -15,6 +15,10 @@ export type NoiseCancellationAPI = {
      * are supported on this platform and for the current user.
      */
     isSupported: boolean | undefined;
+    /**
+     * Provides information whether Noise Cancellation is initialized and ready.
+     */
+    isReady: boolean;
     /**
      * Provides information whether Noise Cancellation is active or not.
      */

package/dist/src/translations/index.d.ts

@@ -86,6 +86,7 @@ export declare const translations: {
         "Dominant Speaker": string;
         "Poor connection quality": string;
         "Video paused due to insufficient bandwidth": string;
+        "Audio is connecting...": string;
         Participants: string;
         Anonymous: string;
         "No participants found": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.33.3",
+  "version": "1.34.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -45,9 +45,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.44.3",
+    "@stream-io/video-client": "1.44.4",
     "@stream-io/video-filters-web": "0.7.2",
-    "@stream-io/video-react-bindings": "1.13.12",
+    "@stream-io/video-react-bindings": "1.13.13",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -60,8 +60,8 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.7.2",
-    "@stream-io/video-styling": "^1.11.0",
+    "@stream-io/audio-filters-web": "^0.7.3",
+    "@stream-io/video-styling": "^1.12.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",

package/src/components/CallControls/CallControls.tsx

@@ -1,9 +1,6 @@
 import { OwnCapability } from '@stream-io/video-client';
 import { Restricted } from '@stream-io/video-react-bindings';
-import {
-  SpeakingWhileMutedNotification,
-  MicCaptureErrorNotification,
-} from '../Notification';
+import { SpeakingWhileMutedNotification } from '../Notification';
 import { RecordCallButton } from './RecordCallButton';
 import { ReactionsButton } from './ReactionsButton';
 import { ScreenShareButton } from './ScreenShareButton';
@@ -18,11 +15,9 @@ export type CallControlsProps = {
 export const CallControls = ({ onLeave }: CallControlsProps) => (
   <div className="str-video__call-controls">
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
-      <MicCaptureErrorNotification>
-        <SpeakingWhileMutedNotification>
-          <ToggleAudioPublishingButton />
-        </SpeakingWhileMutedNotification>
-      </MicCaptureErrorNotification>
+      <SpeakingWhileMutedNotification>
+        <ToggleAudioPublishingButton />
+      </SpeakingWhileMutedNotification>
     </Restricted>
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <ToggleVideoPublishingButton />

package/src/components/NoiseCancellation/NoiseCancellationProvider.tsx

@@ -30,6 +30,10 @@ export type NoiseCancellationAPI = {
    * are supported on this platform and for the current user.
    */
   isSupported: boolean | undefined;
+  /**
+   * Provides information whether Noise Cancellation is initialized and ready.
+   */
+  isReady: boolean;
   /**
    * Provides information whether Noise Cancellation is active or not.
    */
@@ -105,6 +109,8 @@ export const NoiseCancellationProvider = (
     isSupportedByBrowser && hasCapability && noiseCancellationAllowed;
 
   const [isEnabled, setIsEnabled] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
   const deinit = useRef<Promise<void>>(undefined);
   useEffect(() => {
     if (!call || !isSupported) return;
@@ -112,20 +118,26 @@ export const NoiseCancellationProvider = (
     const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));
     const init = (deinit.current || Promise.resolve())
       .then(() => noiseCancellation.init({ tracer: call.tracer }))
-      .then(() => call.microphone.enableNoiseCancellation(noiseCancellation))
+      .then(() => {
+        setIsReady(true);
+        return call.microphone.enableNoiseCancellation(noiseCancellation);
+      })
       .catch((e) => console.error(`Can't initialize noise cancellation`, e));
 
     return () => {
       deinit.current = init
         .then(() => call.microphone.disableNoiseCancellation())
         .then(() => noiseCancellation.dispose())
-        .then(() => unsubscribe());
+        .then(() => unsubscribe())
+        .catch((e) => console.error("Can't clean up noise cancellation", e))
+        .finally(() => setIsReady(false));
     };
   }, [call, isSupported, noiseCancellation]);
 
   const contextValue = useMemo<NoiseCancellationAPI>(
     () => ({
       isSupported,
+      isReady,
       isEnabled,
       setSuppressionLevel: (level) => {
         if (!noiseCancellation) return;
@@ -148,7 +160,7 @@ export const NoiseCancellationProvider = (
         }
       },
     }),
-    [isEnabled, isSupported, noiseCancellation],
+    [isEnabled, isReady, isSupported, noiseCancellation],
   );
   return (
     <NoiseCancellationContext.Provider value={contextValue}>

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, forwardRef } from 'react';
+import { ComponentType, forwardRef, useEffect, useState } from 'react';
 import { Placement } from '@floating-ui/react';
 import {
   hasAudio,
@@ -6,6 +6,7 @@ import {
   hasScreenShare,
   hasVideo,
   SfuModels,
+  StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
@@ -13,6 +14,7 @@ import clsx from 'clsx';
 import {
   Icon,
   IconButton,
+  LoadingIndicator,
   MenuToggle,
   Notification,
   ToggleMenuButtonProps,
@@ -137,12 +139,20 @@ export const ParticipantDetails = ({
   const isTrackPaused =
     trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
 
+  const isAudioTrackUnmuted = useIsTrackUnmuted(participant);
+  const isAudioConnecting = hasAudioTrack && !isAudioTrackUnmuted;
+
   return (
     <>
       <div className="str-video__participant-details">
-        <span className="str-video__participant-details__name">
+        <div className="str-video__participant-details__name">
           {name || userId}
-
+          {indicatorsVisible && isAudioConnecting && (
+            <LoadingIndicator
+              className="str-video__participant-details__name--audio-connecting"
+              tooltip={t('Audio is connecting...')}
+            />
+          )}
           {indicatorsVisible && !hasAudioTrack && (
             <span className="str-video__participant-details__name--audio-muted" />
           )}
@@ -164,7 +174,7 @@ export const ParticipantDetails = ({
             />
           )}
           {indicatorsVisible && <SpeechIndicator />}
-        </span>
+        </div>
       </div>
       {indicatorsVisible && (
         <Notification
@@ -206,3 +216,33 @@ export const SpeechIndicator = () => {
     </span>
   );
 };
+
+const useIsTrackUnmuted = (participant: StreamVideoParticipant) => {
+  const audioStream = participant.audioStream;
+
+  const [unmuted, setUnmuted] = useState(() => {
+    const track = audioStream?.getAudioTracks()[0];
+    return !!track && !track.muted;
+  });
+
+  useEffect(() => {
+    const track = audioStream?.getAudioTracks()[0];
+    if (!track) return;
+
+    setUnmuted(!track.muted);
+
+    const handler = () => {
+      setUnmuted(!track.muted);
+    };
+
+    track.addEventListener('mute', handler);
+    track.addEventListener('unmute', handler);
+
+    return () => {
+      track.removeEventListener('mute', handler);
+      track.removeEventListener('unmute', handler);
+    };
+  }, [audioStream]);
+
+  return unmuted;
+};

package/src/translations/en.json

@@ -91,6 +91,7 @@
   "Dominant Speaker": "Dominant Speaker",
   "Poor connection quality": "Poor connection quality. Please check your internet connection.",
   "Video paused due to insufficient bandwidth": "Video paused due to insufficient bandwidth",
+  "Audio is connecting...": "Audio is connecting...",
 
   "Participants": "Participants",
   "Anonymous": ", and ({{ count }}) anonymous",