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

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.34.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.34.2"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -2290,9 +2295,7 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const isTrackPaused = trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
     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 &&
+    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 && pin && (jsx("span", { title: canUnpin ? t('Unpin') : t('Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, 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 })) }))] }));
 };
 const SpeechIndicator = () => {
@@ -3170,7 +3173,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.34.0").split('.');
+const [major, minor, patch] = ("1.34.2").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,