@stream-io/video-react-sdk 1.43.3 → 1.44.0

package/dist/embedded.cjs.js

@@ -819,6 +819,28 @@ const MicCaptureErrorNotification = ({ children, text, placement, }) => {
     return (jsxRuntime.jsx(Notification, { message: message, isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
 };
 
+const UNAVAILABLE_ERRORS = ['NotReadableError', 'AbortError'];
+const isCameraUnavailable = (error) => !!error?.name && UNAVAILABLE_ERRORS.includes(error.name);
+/**
+ * Shows when the last attempt to start the camera failed (e.g. the camera is
+ * in use by another app). Reads the error from the camera state, so it shows
+ * failures that happened before it was mounted.
+ *
+ * For error-specific copy, build your own notification on top of
+ * `useCameraState().error`.
+ */
+const CameraUnavailableNotification = ({ children, placement, className, }) => {
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { error } = useCameraState();
+    const { t } = videoReactBindings.useI18n();
+    const [isVisible, setIsVisible] = react.useState(() => isCameraUnavailable(error));
+    react.useEffect(() => {
+        setIsVisible(isCameraUnavailable(error));
+    }, [error]);
+    const message = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "str-video__notification__line str-video__notification__title", children: t('Camera unavailable') }), jsxRuntime.jsx("span", { className: "str-video__notification__line", children: t('Close other apps that might be using your camera and try again.') })] }));
+    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isVisible, placement: placement, className: clsx('str-video__camera-unavailable-notification', className), close: () => setIsVisible(false), children: children }));
+};
+
 const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsxRuntime.jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsxRuntime.jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
 };
@@ -1210,7 +1232,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.43.3"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.44.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1377,16 +1399,16 @@ const ToggleVideoPreviewButton = (props) => {
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.VIDEO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
-    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser video permissions')
-            : isSystemMuted
-                ? t('Camera is paused by your system')
-                : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
-                ? 'preview-video-unmute-button'
-                : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
-                setTooltipDisabled(shown);
-                onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
+    return (jsxRuntime.jsx(CameraUnavailableNotification, { children: jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
+                ? t('Check your browser video permissions')
+                : isSystemMuted
+                    ? t('Camera is paused by your system')
+                    : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+                    ? 'preview-video-unmute-button'
+                    : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                    setTooltipDisabled(shown);
+                    onMenuToggle?.(shown);
+                }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
@@ -1407,26 +1429,26 @@ const ToggleVideoPublishingButton = (props) => {
             await camera.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your video')
-                    : !hasBrowserPermission
-                        ? t('Check your browser video permissions')
-                        : !isPublishingVideoAllowed
-                            ? t('Video publishing is disabled by the system')
-                            : isSystemMuted
-                                ? t('Camera is paused by your system')
-                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
-                        !hasPermission ||
-                        !isPublishingVideoAllowed ||
-                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
-                        setTooltipDisabled(shown);
-                        onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(CameraUnavailableNotification, { children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
+                        ? t('You have no permission to share your video')
+                        : !hasBrowserPermission
+                            ? t('Check your browser video permissions')
+                            : !isPublishingVideoAllowed
+                                ? t('Video publishing is disabled by the system')
+                                : isSystemMuted
+                                    ? t('Camera is paused by your system')
+                                    : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
                             !hasPermission ||
-                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
-                            hasBrowserPermission &&
-                            hasPermission &&
-                            isPublishingVideoAllowed && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
+                            !isPublishingVideoAllowed ||
+                            (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                            setTooltipDisabled(shown);
+                            onMenuToggle?.(shown);
+                        }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                                !hasPermission ||
+                                !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
+                                hasBrowserPermission &&
+                                hasPermission &&
+                                isPublishingVideoAllowed && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }) }));
 };
 
 const EndCallMenu = (props) => {
@@ -2088,6 +2110,8 @@ var en = {
 	"Camera on": "Camera on",
 	"Camera off": "Camera off",
 	"Camera is paused by your system": "Camera is paused by your system",
+	"Camera unavailable": "Camera unavailable",
+	"Close other apps that might be using your camera and try again.": "Close other apps that might be using your camera and try again.",
 	"No camera found": "No camera found",
 	"Video is disabled": "Video is disabled",
 	Pinned: Pinned,