✨(front) revamp pre join screen

[NathanVss]

Purpose

The previous prejoin screenshot was misleading for some screen size, for small screen the join button was invisible + we want to align with the most up to date styles we use.

Proposal

Resizing

Mon.film.1.mp4

On small desktop screens

Before

Todo

• Delete TextFieldWrapper, voir implications
• Gestion des tracks
• Devices are disabled by default
• Utilisation ToggleDevice en dehors d'une Room
• Camera disabled blanc
• disabled button

[lebaudantoine]

wow, nice job, already x10 times better.
I would break the row into column slightly before, at this moment.

[lebaudantoine]

Also, nit-picking comments incoming:

Given and family names are rarely longer than 20–25 characters. Could we reduce the input size (label n°1 in my drawing), particularly when the screen width starts to shrink? This adjustment would help maintain the initial proportions between the left and right columns, which are visually perfect and very satisfying.

(do you like having the input's max size visually displayed?)

Really nit-picking here, but I love the (almost) visual alignment between the title and the CTA (label n°2 in my drawing). I’m not sure if it was intentional, but the button’s smaller width compared to the input makes the input feel like it’s floating on a cloud.

[NathanVss]

Also, nit-picking comments incoming:

Given and family names are rarely longer than 20–25 characters. Could we reduce the input size (label n°1 in my drawing), particularly when the screen width starts to shrink? This adjustment would help maintain the initial proportions between the left and right columns, which are visually perfect and very satisfying.

(do you like having the input's max size visually displayed?)

Really nit-picking here, but I love the (almost) visual alignment between the title and the CTA (label n°2 in my drawing). I’m not sure if it was intentional, but the button’s smaller width compared to the input makes the input feel like it’s floating on a cloud.

Here are three propositions that we coud discuss:

1

2

3

My personal order of preference: 2 3 1

[lebaudantoine]

Enhancement: Display an explicit message when camera is disabled instead of an avatar?

[lebaudantoine]

When I open the camera selector, even if my camera is opened, I have no option selected.

[lebaudantoine]

Bug: I type my name, then type enter. It submits a form, I navigate to the same URL with ? appended at the end.

[lebaudantoine]

error message should be internationalized

[lebaudantoine]

Enhancement: I would suggest limiting the field to 50/60 chars, I just entered the room with a 200 char name, it feels weird.

[lebaudantoine]

Question: is that field still pre-filled with username given by ProConnect if no previous one was persisted in local storage?

[lebaudantoine]

Introducing Marianne caused several text elements in the app to appear excessively small. Let's address this to enhance accessibility.

[lebaudantoine]

Nit-picking: with Marianne, the heading title is bigger, and doesn't fit on two lines properly.

[lebaudantoine]

Question: Should we align left this element?

[lebaudantoine]

This transition feels glitchy. Also when I long press the Camera toggle button, only the shadow are shown for ~1s. let's show you IRL

Enregistrement.de.l.ecran.2025-01-18.a.22.21.04.mov

Enregistrement.de.l.ecran.2025-01-18.a.22.28.11.mov

[lebaudantoine]

Camera is reverse, and switch back in the right orientation when entering the room

[lebaudantoine]

Did a product-oriented review. Will review the code

[NathanVss]

Question: is that field still pre-filled with username given by ProConnect if no previous one was persisted in local storage?

It is based on "user?.full_name" as before, so it is supposed to be pre-set

[NathanVss]

Question: Should we align left this element?

We already said that we go for option 2 ( with text centered )

[lebaudantoine]

LGTM, I would remove the debug code tbh !