diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx index f3ab8910..1c26b2c7 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx @@ -3,6 +3,7 @@ import { RiFeedbackLine, RiQuestionLine, RiSettings3Line, + RiUser5Line, } from '@remixicon/react' import { useState } from 'react' import { styled } from '@/styled-system/jsx' @@ -10,8 +11,10 @@ import { Menu as RACMenu, MenuItem as RACMenuItem, Popover as RACPopover, + Separator as RACSeparator, } from 'react-aria-components' import { SettingsDialog } from '@/features/settings' +import { UsernameDialog } from '../../dialogs/UsernameDialog' // Styled components to be refactored const StyledMenu = styled(RACMenu, { @@ -60,13 +63,28 @@ const StyledPopover = styled(RACPopover, { }, }) +const StyledSeparator = styled(RACSeparator, { + base: { + height: '1px', + background: '#9ca3af', + margin: '2px 4px', + }, +}) + +type DialogState = 'username' | 'settings' | null + export const OptionsMenu = () => { const { t } = useTranslation('rooms') - const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false) + const [dialogOpen, setDialogOpen] = useState(null) return ( <> + setDialogOpen('username')}> + + {t('options.items.username')} + + { {t('options.items.feedbacks')} - setIsSettingsDialogOpen(true)}> + setDialogOpen('settings')}> {t('options.items.settings')} + !v && setDialogOpen(null)} + /> setIsSettingsDialogOpen(v)} + isOpen={dialogOpen === 'settings'} + onOpenChange={(v) => !v && setDialogOpen(null)} /> ) diff --git a/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx b/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx new file mode 100644 index 00000000..718fb035 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx @@ -0,0 +1,38 @@ +import { useTranslation } from 'react-i18next' +import { Field, Form, Dialog, DialogProps } from '@/primitives' +import { useRoomContext } from '@livekit/components-react' + +export type UsernameDialogProps = Pick + +export const UsernameDialog = (props: UsernameDialogProps) => { + const { t } = useTranslation('rooms') + + const ctx = useRoomContext() + return ( + +
{ + ctx.localParticipant.setName(data.username as string) + const { onOpenChange } = props + if (onOpenChange) { + onOpenChange(false) + } + }} + submitLabel={t('options.username.submitLabel')} + > + { + return !value ? ( +

{t('options.username.validationError')}

+ ) : null + }} + /> + +
+ ) +} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 2822472d..72747f21 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -36,7 +36,15 @@ "items": { "feedbacks": "", "support": "", - "settings": "" + "settings": "", + "username": "" + }, + "username": { + "heading": "", + "label": "", + "description": "", + "validationError": "", + "submitLabel": "" } } } diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index c5fdc06b..3391b7dd 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -36,7 +36,15 @@ "items": { "feedbacks": "Give us feedbacks", "support": "Get Help on Tchap", - "settings": "Settings" + "settings": "Settings", + "username": "Update Your Name" + }, + "username": { + "heading": "Update Your Name", + "label": "Your Name", + "description": "All other participants will see this name.", + "validationError": "Name cannot be empty.", + "submitLabel": "Save" } } } diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index b7746682..bf30d9dc 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -36,7 +36,15 @@ "items": { "feedbacks": "Partager votre avis", "support": "Obtenir de l'aide sur Tchap", - "settings": "Paramètres" + "settings": "Paramètres", + "username": "Choisir votre nom" + }, + "username": { + "heading": "Choisir votre nom", + "label": "Votre Nom", + "description": "Tous les autres participants verront ce nom.", + "validationError": "Le nom ne peut pas être vide.", + "submitLabel": "Enregistrer" } } }