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

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.4",
+  "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"
@@ -61,7 +61,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/audio-filters-web": "^0.7.3",
-    "@stream-io/video-styling": "^1.11.0",
+    "@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/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",