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

package/dist/index.es.js

@@ -828,7 +828,7 @@ const AvatarFallback = ({ className, names, style, }) => {
     return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
 };
 
-const BackgroundFiltersProviderImpl = lazy(() => import('./background-filters-RdXfNf6_.es.js').then((m) => ({
+const BackgroundFiltersProviderImpl = lazy(() => import('./background-filters-g6ozIvlN.es.js').then((m) => ({
     default: m.BackgroundFiltersProvider,
 })));
 /**
@@ -1042,23 +1042,53 @@ const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, tooltipDisable
     return (jsxs(Fragment, { children: [jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipActuallyVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
 };
 
-const RecordEndConfirmation = () => {
+/**
+ * Wraps an event handler, silencing and logging exceptions (excluding the NotAllowedError
+ * DOMException, which is a normal situation handled by the SDK)
+ *
+ * @param props component props, including the onError callback
+ * @param handler event handler to wrap
+ */
+const createCallControlHandler = (props, handler) => {
+    return async () => {
+        try {
+            await handler();
+        }
+        catch (error) {
+            if (props.onError) {
+                props.onError(error);
+                return;
+            }
+            if (!isNotAllowedError(error)) {
+                console.error('Call control handler failed', error);
+            }
+        }
+    };
+};
+function isNotAllowedError(error) {
+    return error instanceof DOMException && error.name === 'NotAllowedError';
+}
+
+const RecordEndConfirmation = (props) => {
     const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
     const { close } = useMenuContext();
-    return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsx(CompositeButton, { variant: "primary", onClick: toggleCallRecording, children: isAwaitingResponse ? jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+    const handleClick = createCallControlHandler(props, toggleCallRecording);
+    return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
 };
 const ToggleEndRecordingMenuButton = forwardRef(function ToggleEndRecordingMenuButton(props, ref) {
     return (jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsx(Icon, { icon: "recording-off" }) }));
 });
-const RecordCallConfirmationButton = ({ caption, }) => {
+const RecordCallConfirmationButton = (props) => {
+    const { caption } = props;
     const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    const handleClick = createCallControlHandler(props, toggleCallRecording);
     if (isCallRecordingInProgress) {
         return (jsx(Restricted, { requiredGrants: [
                 OwnCapability.START_RECORD_CALL,
                 OwnCapability.STOP_RECORD_CALL,
-            ], children: jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsx(RecordEndConfirmation, {}) }) }));
+            ], children: jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsx(RecordEndConfirmation, { onError: props.onError }) }) }));
     }
     const title = isAwaitingResponse
         ? t('Waiting for recording to start...')
@@ -1066,11 +1096,13 @@ const RecordCallConfirmationButton = ({ caption, }) => {
     return (jsx(Restricted, { requiredGrants: [
             OwnCapability.START_RECORD_CALL,
             OwnCapability.STOP_RECORD_CALL,
-        ], children: jsx(WithTooltip, { title: title, children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: "recording-off" })) }) }) }));
+        ], children: jsx(WithTooltip, { title: title, children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: "recording-off" })) }) }) }));
 };
-const RecordCallButton = ({ caption }) => {
+const RecordCallButton = (props) => {
+    const { caption } = props;
     const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    const handleClick = createCallControlHandler(props, toggleCallRecording);
     let title = caption ?? t('Record call');
     if (isAwaitingResponse) {
         title = isCallRecordingInProgress
@@ -1082,7 +1114,7 @@ const RecordCallButton = ({ caption }) => {
             OwnCapability.STOP_RECORD_CALL,
         ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": isCallRecordingInProgress
                 ? 'recording-stop-button'
-                : 'recording-start-button', title: title, onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off' })) }) }));
+                : 'recording-start-button', title: title, onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off' })) }) }));
 };
 
 const defaultEmojiReactionMap = {
@@ -1157,33 +1189,6 @@ const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
             }, children: reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code] }, reaction.emoji_code))) }));
 };
 
-/**
- * Wraps an event handler, silencing and logging exceptions (excluding the NotAllowedError
- * DOMException, which is a normal situation handled by the SDK)
- *
- * @param props component props, including the onError callback
- * @param handler event handler to wrap
- */
-const createCallControlHandler = (props, handler) => {
-    return async () => {
-        try {
-            await handler();
-        }
-        catch (error) {
-            if (props.onError) {
-                props.onError(error);
-                return;
-            }
-            if (!isNotAllowedError(error)) {
-                console.error('Call control handler failed', error);
-            }
-        }
-    };
-};
-function isNotAllowedError(error) {
-    return error instanceof DOMException && error.name === 'NotAllowedError';
-}
-
 const ScreenShareButton = (props) => {
     const { t } = useI18n();
     const { caption, optimisticUpdates } = props;
@@ -1347,7 +1352,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.33.4"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.34.1"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -1582,7 +1587,7 @@ const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
     return (jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: caption ?? t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
 };
 
-const CallControls = ({ onLeave }) => (jsxs("div", { className: "str-video__call-controls", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(MicCaptureErrorNotification, { children: jsx(SpeakingWhileMutedNotification, { children: jsx(ToggleAudioPublishingButton, {}) }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(ToggleVideoPublishingButton, {}) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(ReactionsButton, {}) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(ScreenShareButton, {}) }), jsx(Restricted, { requiredGrants: [
+const CallControls = ({ onLeave }) => (jsxs("div", { className: "str-video__call-controls", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(SpeakingWhileMutedNotification, { children: jsx(ToggleAudioPublishingButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(ToggleVideoPublishingButton, {}) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(ReactionsButton, {}) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(ScreenShareButton, {}) }), jsx(Restricted, { requiredGrants: [
                 OwnCapability.START_RECORD_CALL,
                 OwnCapability.STOP_RECORD_CALL,
             ], children: jsx(RecordCallButton, {}) }), jsx(CancelCallButton, { onLeave: onLeave })] }));
@@ -2288,7 +2293,9 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const hasVideoTrack = hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
     const isTrackPaused = trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
-    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (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 (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (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
                         jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
@@ -2298,6 +2305,29 @@ const SpeechIndicator = () => {
     const { isSpeaking, isDominantSpeaker } = participant;
     return (jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
+const useIsTrackUnmuted = (participant) => {
+    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;
+};
 
 const ParticipantView = forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
@@ -2468,6 +2498,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",
@@ -3144,7 +3175,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.33.4").split('.');
+const [major, minor, patch] = ("1.34.1").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,