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

package/dist/index.cjs.js

@@ -1347,7 +1347,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.33.3"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.34.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1582,7 +1582,7 @@ const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
     return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: caption ?? t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
 };
 
-const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(ToggleVideoPublishingButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(ReactionsButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(ScreenShareButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
+const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(ToggleVideoPublishingButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(ReactionsButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(ScreenShareButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
                 videoClient.OwnCapability.START_RECORD_CALL,
                 videoClient.OwnCapability.STOP_RECORD_CALL,
             ], children: jsxRuntime.jsx(RecordCallButton, {}) }), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
@@ -2024,6 +2024,7 @@ const NoiseCancellationProvider = (props) => {
     }, [noiseCancellation]);
     const isSupported = isSupportedByBrowser && hasCapability && noiseCancellationAllowed;
     const [isEnabled, setIsEnabled] = react.useState(false);
+    const [isReady, setIsReady] = react.useState(false);
     const deinit = react.useRef(undefined);
     react.useEffect(() => {
         if (!call || !isSupported)
@@ -2032,17 +2033,23 @@ const NoiseCancellationProvider = (props) => {
         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 = react.useMemo(() => ({
         isSupported,
+        isReady,
         isEnabled,
         setSuppressionLevel: (level) => {
             if (!noiseCancellation)
@@ -2066,7 +2073,7 @@ const NoiseCancellationProvider = (props) => {
                 });
             }
         },
-    }), [isEnabled, isSupported, noiseCancellation]);
+    }), [isEnabled, isReady, isSupported, noiseCancellation]);
     return (jsxRuntime.jsx(NoiseCancellationContext.Provider, { value: contextValue, children: children }));
 };
 
@@ -2281,7 +2288,9 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const hasVideoTrack = videoClient.hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
     const isTrackPaused = trackType !== 'none' ? videoClient.hasPausedTrack(participant, trackType) : false;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && canUnpin && (
+    const isAudioTrackUnmuted = useIsTrackUnmuted(participant);
+    const isAudioConnecting = hasAudioTrack && !isAudioTrackUnmuted;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && canUnpin && (
                         // TODO: remove this monstrosity once we have a proper design
                         jsxRuntime.jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
@@ -2291,6 +2300,29 @@ const SpeechIndicator = () => {
     const { isSpeaking, isDominantSpeaker } = participant;
     return (jsxRuntime.jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
+const useIsTrackUnmuted = (participant) => {
+    const audioStream = participant.audioStream;
+    const [unmuted, setUnmuted] = react.useState(() => {
+        const track = audioStream?.getAudioTracks()[0];
+        return !!track && !track.muted;
+    });
+    react.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;
+};
 
 const ParticipantView = react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
@@ -2461,6 +2493,7 @@ var en = {
 	"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: Anonymous,
 	"No participants found": "No participants found",
@@ -3137,7 +3170,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.33.3").split('.');
+const [major, minor, patch] = ("1.34.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,