Allow custom room names #315
Conversation
Following numerous user requests, add support for personalized room names alongside our existing generated IDs. This pattern, inherited from Jitsi Meet, allows teams to create memorable, persistent meeting spaces like "daily-standup" or "teamalpha" instead of relying only on auto-generated IDs. Note: This change introduces a permanent update to room URL patterns. Once custom room links are shared, we will need to maintain support for both formats to avoid breaking existing shared URLs.
Display a "personalized" link modal, inspired by Whereby. The UX and the UI are still cumberstome, however it's fully functional and accessible. It's a "okay" v0, allowing users creating their custom link. Thus we can study this feature traction, and decide whether or not prioritize this feature in the UX.
@manuhabitela create a well-documented modal for users trying to join a meeting. Update it with the last room's link format introduced.
Make the validation rules more maintainable and reusable across the codebase. Particularly useful when these values need to be referenced in multiple validation contexts. The personalize room's link modal needs a step-by-step validation.
lebaudantoine
force-pushed
the
allow-custom-room-names
branch
from
e44e52c to
69457a0
Compare
|
Discussed IRL with Arnaud: with should at least enforce 10char, and at first enables this feature with a feature flag, to only our top users, and gather early feedback. |
|
Submit button should be disabled if there are errors 
|
|
Broader remark: I think using API response error names such as "error: NameExists", is much more easier to use on the frontend side instead of a message. Using error name makes it easier to make conditions, find translations on the frontend side. 
|
| "heading": "Votre lien personnalisé", | ||
| "label": "Votre lien personnalisé", | ||
| "submit": "Créer", | ||
| "placeholder": "standupbizdev", |
There was a problem hiding this comment.
WDYT about French placeholder?
There was a problem hiding this comment.
I felt bizdev was kinda french, but would you prefer, "equipecom" or smth else?
There was a problem hiding this comment.
Maybe like "Réunion Hebdo" or smth?
| ) | ||
| .catch((e) => { | ||
| const msg = | ||
| e.statusCode === 400 |
There was a problem hiding this comment.
Related to my comment about error names: what if there are multiple possible errors with the same http code?
Not to fix now ofc
| const [serverErrors, setServerErrors] = useState<Array<string>>([]) | ||
|
|
||
| const onSubmit = (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault() |
There was a problem hiding this comment.
I may have overlooked something in the React Aria documentation, but this is the approach I found to prevent a HTML form from being submitted and navigating to a URL suffixed with a question mark.
| const validationErrors = [] | ||
| if (roomSlug.length < 5) { | ||
| validationErrors.push(t('errors.validation.length')) | ||
| } | ||
| if (!roomSlug.match(/^[a-z0-9]+$/)) { | ||
| validationErrors.push(t('errors.validation.spaceOrSpecialCharacter')) | ||
| } |
There was a problem hiding this comment.
I like how simple this approach is were most of devs wants to use libraries to validate their forms :)
| const errors = [...validationErrors, ...serverErrors] | ||
|
|
||
| return ( | ||
| <Dialog isOpen={!!isOpen} {...dialogProps} title={t('heading')}> |
There was a problem hiding this comment.
Broader subject (out of scope): on mobile I tend to think having a full screen modal with its content being aligned on top is more UX. Mobile user are more used to panes-like navigation.
There was a problem hiding this comment.
Agree, we have a poor mobile UX.
| onAction={() => { | ||
| setIsPersonalizeModalOpen(true) | ||
| }} | ||
| data-attr="create-option-personalize" |
There was a problem hiding this comment.
It's used by Posthog to scrap event data!
In fact, it is, the form is disabled if it's invalid. But indeed the style is needed. |
I think it's the default Django error formats inherited from Joanie. Broader refactoring, to be honest. |
Purpose
Inspired by Jitsi's user-friendly approach, adds support for custom room names (e.g., 'team-standup', 'daily-meeting') in addition to the existing system-generated IDs (e.g., 'abc-defg-hij').
/!\ Breaking change: This introduces a permanent update to room URL patterns. Since both formats (system-generated and custom) will be shareable links, we must maintain backwards compatibility to avoid breaking existing URLs.
Proposal
Proposed UX. The UI is quite poor, will enhance it in the next iterations!
Enregistrement.de.l.ecran.2025-01-21.a.21.05.28.mov