@selfcommunity/react-ui 0.10.5-alpha.12 → 0.10.5-alpha.14

package/lib/cjs/components/CreateEventWidget/CreateEventWidget.js

@@ -46,10 +46,10 @@ function CreateEventWidget(inProps) {
         react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const onlyStaffEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences]);
+    const onlyStaffEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     (0, react_1.useEffect)(() => {
         setLoading(false);
     }, []);

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -87,6 +87,6 @@ function CreateLiveStreamButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "photo_camera" }) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
 }
 exports.default = CreateLiveStreamButton;

package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js

@@ -143,8 +143,8 @@ function LiveStreamRoom(inProps) {
                                         ? scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scLiveStream.event)
                                         : '/' }, { children: chunks })))
                             } }));
-                        if (error.response.data.errors[0].code !== types_1.SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM &&
-                            error.response.data.errors[0].code !== types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPANTS_LIMIT_REACHED) {
+                        if (error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM ||
+                            error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPANTS_LIMIT_REACHED) {
                             setError(_msg);
                         }
                         else {
@@ -178,7 +178,21 @@ function LiveStreamRoom(inProps) {
     /**
      * Handle PreJoin Error
      */
-    const handlePreJoinError = (0, react_1.useCallback)((e) => console.error(e), []);
+    const handlePreJoinError = (0, react_1.useCallback)((e) => {
+        console.error(e);
+        if (e.message !== 'NotAllowedError: Permission denied') {
+            enqueueSnackbar(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }), { variant: 'error', autoHideDuration: 5000 });
+        }
+        else if (e.message !== 'NotFoundError: Requested device not found') {
+            enqueueSnackbar(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }), { variant: 'error', autoHideDuration: 5000 });
+        }
+    }, []);
     /**
      * User must be authenticated
      */

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js

@@ -75,6 +75,8 @@ function LiveStreamVideoConference(inProps) {
     // STATE
     const [liveActive, setLiveActive] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
     // PREFERENCES
     const preferences = (0, react_1.useMemo)(() => {
         const _preferences = {};
@@ -107,8 +109,24 @@ function LiveStreamVideoConference(inProps) {
      */
     const handleError = (0, react_1.useCallback)((error) => {
         console.error(error);
-        if (error.message !== 'Client initiated disconnect') {
-            setError(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+        if (error.message === 'Permission denied') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }));
+        }
+        else if (error.message === 'Requested device not found') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }));
+        }
+        else {
+            console.log(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect'
+            }));
         }
         setLiveActive(false);
     }, []);

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts

@@ -30,7 +30,10 @@ export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     persistUserChoices?: boolean;
 }
 /** @alpha */
-export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): LocalTrack<Track.Kind>[];
+export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): {
+    tracks: LocalTrack<Track.Kind>[];
+    error: boolean;
+};
 /** @public */
 export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(enabled: boolean, deviceId: string, kind: 'videoinput' | 'audioinput'): {
     selectedDevice: MediaDeviceInfo;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js

@@ -16,6 +16,7 @@ const LiveStreamProvider_1 = require("./LiveStreamProvider");
 /** @alpha */
 function usePreviewTracks(options, onError) {
     const [tracks, setTracks] = React.useState();
+    const [error, setError] = React.useState(false);
     const trackLock = React.useMemo(() => new livekit_client_1.Mutex(), []);
     React.useEffect(() => {
         let needsCleanup = false;
@@ -30,6 +31,7 @@ function usePreviewTracks(options, onError) {
                     else {
                         setTracks(localTracks);
                     }
+                    setError(false);
                 }
             }
             catch (e) {
@@ -39,6 +41,7 @@ function usePreviewTracks(options, onError) {
                 else {
                     components_core_1.log.error(e);
                 }
+                setError(true);
             }
             finally {
                 unlock();
@@ -49,9 +52,10 @@ function usePreviewTracks(options, onError) {
             localTracks.forEach((track) => {
                 track.stop();
             });
+            setError(false);
         };
     }, [JSON.stringify(options), onError, trackLock]);
-    return tracks;
+    return { tracks, error };
 }
 exports.usePreviewTracks = usePreviewTracks;
 /** @public */
@@ -190,7 +194,7 @@ function PreJoin(_a) {
             saveUsername(scUserContext.user.username);
         }
     }, [username, saveUsername, scUserContext.user]);
-    const tracks = usePreviewTracks({
+    const { tracks, error } = usePreviewTracks({
         audio: audioEnabled ? { deviceId: initialUserChoices.audioDeviceId } : false,
         video: videoEnabled ? { deviceId: initialUserChoices.videoDeviceId } : false
     }, onError);
@@ -221,7 +225,9 @@ function PreJoin(_a) {
             return onValidate(values);
         }
         else {
-            return values.username !== '';
+            return Boolean(values.username !== '' &&
+                ((values.audioEnabled && values.audioDeviceId) || !values.audioEnabled) &&
+                ((values.videoEnabled && values.videoDeviceId) || !values.videoEnabled));
         }
     }, [onValidate]);
     (0, react_1.useEffect)(() => {
@@ -246,6 +252,6 @@ function PreJoin(_a) {
             components_core_1.log.warn('Validation failed with: ', userChoices);
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), (0, jsx_runtime_1.jsx)("form", Object.assign({ className: "lk-username-container" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid }, { children: joinLabel })) })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), (0, jsx_runtime_1.jsx)("form", Object.assign({ className: "lk-username-container" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
 }
 exports.PreJoin = PreJoin;

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -38,7 +38,7 @@ function NavigationMenuDrawer(inProps) {
     });
     const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
     const scUserContext = (0, react_core_1.useSCUser)();
-    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_livestream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [canCreateLiveStream && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))] })) })) }))] })));
 }
 exports.default = NavigationMenuDrawer;

package/lib/esm/components/CreateEventWidget/CreateEventWidget.js

@@ -44,10 +44,10 @@ export default function CreateEventWidget(inProps) {
         SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences]);
+    const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     useEffect(() => {
         setLoading(false);
     }, []);

package/lib/esm/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -85,5 +85,5 @@ export default function CreateLiveStreamButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "photo_camera" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
 }

package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js

@@ -141,8 +141,8 @@ export default function LiveStreamRoom(inProps) {
                                         ? scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scLiveStream.event)
                                         : '/' }, { children: chunks })))
                             } }));
-                        if (error.response.data.errors[0].code !== SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM &&
-                            error.response.data.errors[0].code !== SCLiveStreamConnectionDetailsErrorType.PARTICIPANTS_LIMIT_REACHED) {
+                        if (error.response.data.errors[0].code === SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM ||
+                            error.response.data.errors[0].code === SCLiveStreamConnectionDetailsErrorType.PARTICIPANTS_LIMIT_REACHED) {
                             setError(_msg);
                         }
                         else {
@@ -176,7 +176,21 @@ export default function LiveStreamRoom(inProps) {
     /**
      * Handle PreJoin Error
      */
-    const handlePreJoinError = useCallback((e) => console.error(e), []);
+    const handlePreJoinError = useCallback((e) => {
+        console.error(e);
+        if (e.message !== 'NotAllowedError: Permission denied') {
+            enqueueSnackbar(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }), { variant: 'error', autoHideDuration: 5000 });
+        }
+        else if (e.message !== 'NotFoundError: Requested device not found') {
+            enqueueSnackbar(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }), { variant: 'error', autoHideDuration: 5000 });
+        }
+    }, []);
     /**
      * User must be authenticated
      */

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js

@@ -11,7 +11,7 @@ import { ConnectionState, formatChatMessageLinks, LayoutContextProvider, LiveKit
 import { useCallback, useMemo, useState } from 'react';
 import { defaultUserChoices } from '@livekit/components-core';
 import { defaultVideoOptions } from '../constants';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { VideoConference } from './VideoConference';
 import { useLiveStream } from './LiveStreamProvider';
 import DialogContent from '@mui/material/DialogContent';
@@ -73,6 +73,8 @@ export default function LiveStreamVideoConference(inProps) {
     // STATE
     const [liveActive, setLiveActive] = useState(true);
     const [error, setError] = useState(null);
+    // INTL
+    const intl = useIntl();
     // PREFERENCES
     const preferences = useMemo(() => {
         const _preferences = {};
@@ -105,8 +107,24 @@ export default function LiveStreamVideoConference(inProps) {
      */
     const handleError = useCallback((error) => {
         console.error(error);
-        if (error.message !== 'Client initiated disconnect') {
-            setError(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+        if (error.message === 'Permission denied') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }));
+        }
+        else if (error.message === 'Requested device not found') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }));
+        }
+        else {
+            console.log(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect'
+            }));
         }
         setLiveActive(false);
     }, []);

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts

@@ -30,7 +30,10 @@ export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     persistUserChoices?: boolean;
 }
 /** @alpha */
-export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): LocalTrack<Track.Kind>[];
+export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): {
+    tracks: LocalTrack<Track.Kind>[];
+    error: boolean;
+};
 /** @public */
 export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(enabled: boolean, deviceId: string, kind: 'videoinput' | 'audioinput'): {
     selectedDevice: MediaDeviceInfo;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js

@@ -13,6 +13,7 @@ import { useLiveStream } from './LiveStreamProvider';
 /** @alpha */
 export function usePreviewTracks(options, onError) {
     const [tracks, setTracks] = React.useState();
+    const [error, setError] = React.useState(false);
     const trackLock = React.useMemo(() => new Mutex(), []);
     React.useEffect(() => {
         let needsCleanup = false;
@@ -27,6 +28,7 @@ export function usePreviewTracks(options, onError) {
                     else {
                         setTracks(localTracks);
                     }
+                    setError(false);
                 }
             }
             catch (e) {
@@ -36,6 +38,7 @@ export function usePreviewTracks(options, onError) {
                 else {
                     log.error(e);
                 }
+                setError(true);
             }
             finally {
                 unlock();
@@ -46,9 +49,10 @@ export function usePreviewTracks(options, onError) {
             localTracks.forEach((track) => {
                 track.stop();
             });
+            setError(false);
         };
     }, [JSON.stringify(options), onError, trackLock]);
-    return tracks;
+    return { tracks, error };
 }
 /** @public */
 export function usePreviewDevice(enabled, deviceId, kind) {
@@ -185,7 +189,7 @@ export function PreJoin(_a) {
             saveUsername(scUserContext.user.username);
         }
     }, [username, saveUsername, scUserContext.user]);
-    const tracks = usePreviewTracks({
+    const { tracks, error } = usePreviewTracks({
         audio: audioEnabled ? { deviceId: initialUserChoices.audioDeviceId } : false,
         video: videoEnabled ? { deviceId: initialUserChoices.videoDeviceId } : false
     }, onError);
@@ -216,7 +220,9 @@ export function PreJoin(_a) {
             return onValidate(values);
         }
         else {
-            return values.username !== '';
+            return Boolean(values.username !== '' &&
+                ((values.audioEnabled && values.audioDeviceId) || !values.audioEnabled) &&
+                ((values.videoEnabled && values.videoDeviceId) || !values.videoEnabled));
         }
     }, [onValidate]);
     useEffect(() => {
@@ -241,5 +247,5 @@ export function PreJoin(_a) {
             log.warn('Validation failed with: ', userChoices);
         }
     }
-    return (_jsxs("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [_jsxs("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && _jsx("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && (_jsx("div", Object.assign({ className: "lk-camera-off-note" }, { children: _jsx(ParticipantTileAvatar, { user: scUserContext.user }) })))] })), _jsxs("div", Object.assign({ className: "lk-button-group-container" }, { children: [_jsxs("div", Object.assign({ className: "lk-button-group audio" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), _jsxs("div", Object.assign({ className: "lk-button-group video" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), _jsx("form", Object.assign({ className: "lk-username-container" }, { children: _jsx("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid }, { children: joinLabel })) })), debug && (_jsxs(_Fragment, { children: [_jsx("strong", { children: "User Choices:" }), _jsxs("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [_jsxs("li", { children: ["Username: ", `${userChoices.username}`] }), _jsxs("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), _jsxs("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), _jsxs("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), _jsxs("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
+    return (_jsxs("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [_jsxs("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && _jsx("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && (_jsx("div", Object.assign({ className: "lk-camera-off-note" }, { children: _jsx(ParticipantTileAvatar, { user: scUserContext.user }) })))] })), _jsxs("div", Object.assign({ className: "lk-button-group-container" }, { children: [_jsxs("div", Object.assign({ className: "lk-button-group audio" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), _jsxs("div", Object.assign({ className: "lk-button-group video" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), _jsx("form", Object.assign({ className: "lk-username-container" }, { children: _jsx("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && (_jsxs(_Fragment, { children: [_jsx("strong", { children: "User Choices:" }), _jsxs("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [_jsxs("li", { children: ["Username: ", `${userChoices.username}`] }), _jsxs("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), _jsxs("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), _jsxs("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), _jsxs("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
 }

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -36,6 +36,6 @@ export default function NavigationMenuDrawer(inProps) {
     });
     const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
     const scUserContext = useSCUser();
-    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_livestream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : (_jsxs(_Fragment, { children: [canCreateLiveStream && _jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))] })) })) }))] })));
 }