@selfcommunity/react-ui 0.10.5-alpha.11 → 0.10.5-alpha.13

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

@@ -140,7 +140,7 @@ function LiveStreamRoom(inProps) {
                         _msg = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: _error, defaultMessage: _error, values: {
                                 link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ style: { color: '#FFF' }, to: error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
                                         scLiveStream.event
-                                        ? scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, scLiveStream.event)
+                                        ? 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 &&
@@ -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/esm/components/LiveStreamRoom/LiveStreamRoom.js

@@ -138,7 +138,7 @@ export default function LiveStreamRoom(inProps) {
                         _msg = (_jsx(FormattedMessage, { id: _error, defaultMessage: _error, values: {
                                 link: (...chunks) => (_jsx(Link, Object.assign({ style: { color: '#FFF' }, to: error.response.data.errors[0].code === SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
                                         scLiveStream.event
-                                        ? scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, scLiveStream.event)
+                                        ? scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scLiveStream.event)
                                         : '/' }, { children: chunks })))
                             } }));
                         if (error.response.data.errors[0].code !== SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM &&
@@ -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}`] })] }))] }))] })));
 }