From 37eea16a500d9a9f85ae05538c481827a9af2ede Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Wed, 7 Aug 2024 11:36:07 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20allow=20local=20participa?= =?UTF-8?q?nt=20to=20update=20her=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The user name is initially set by the backend when generating the LiveKit access token. By default, if the frontend has not provided a username, the backend uses the user's email address. This approach isn't ideal, as some users prefer using their first name. This update allows local participant to change their username in real-time during a session. However, these changes are not yet persisted for future meetings. This persistence feature will be added in upcoming commits. --- .../controls/Options/OptionsMenu.tsx | 30 +++++++++++++-- .../components/dialogs/UsernameDialog.tsx | 38 +++++++++++++++++++ src/frontend/src/locales/de/rooms.json | 10 ++++- src/frontend/src/locales/en/rooms.json | 10 ++++- src/frontend/src/locales/fr/rooms.json | 10 ++++- 5 files changed, 91 insertions(+), 7 deletions(-) create mode 100644 src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx 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" } } }