✨(front) revamp join screen

We want this screen to have a better ux, the join button was invisible on
some small screen sizes, also we want to align the style of this screen with
the ui of the video conference previously made.

src/backend/pyproject.toml

@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.6",
+    "boto3==1.36.2",
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
@@ -83,7 +83,7 @@ dev = [
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.6",
-    "ruff==0.9.3",
+    "ruff==0.9.2",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/package-lock.json

@@ -8,7 +8,7 @@
       "name": "meet",
       "version": "0.1.12",
       "dependencies": {
-        "@livekit/components-react": "2.8.1",
+        "@livekit/components-react": "2.8.0",
         "@livekit/components-styles": "1.1.4",
         "@livekit/track-processors": "0.3.3",
         "@pandacss/preset-panda": "0.51.1",
@@ -17,25 +17,25 @@
         "@tanstack/react-query": "5.64.2",
         "crisp-sdk-web": "1.0.25",
         "hoofd": "1.7.3",
-        "i18next": "24.2.2",
+        "i18next": "24.2.1",
         "i18next-browser-languagedetector": "8.0.2",
         "i18next-parser": "9.1.0",
         "i18next-resources-to-backend": "1.2.1",
         "livekit-client": "2.8.1",
-        "posthog-js": "1.210.2",
+        "posthog-js": "1.207.0",
         "react": "18.3.1",
         "react-aria-components": "1.6.0",
         "react-dom": "18.3.1",
         "react-i18next": "15.1.1",
         "use-sound": "4.0.3",
-        "valtio": "2.1.3",
-        "wouter": "3.4.0"
+        "valtio": "2.1.2",
+        "wouter": "3.3.5"
       },
       "devDependencies": {
         "@pandacss/dev": "0.51.1",
         "@tanstack/eslint-plugin-query": "5.64.2",
         "@tanstack/react-query-devtools": "5.64.2",
-        "@types/node": "22.10.10",
+        "@types/node": "22.10.7",
         "@types/react": "18.3.12",
         "@types/react-dom": "18.3.1",
         "@typescript-eslint/eslint-plugin": "8.21.0",
@@ -49,7 +49,7 @@
         "postcss": "8.5.1",
         "prettier": "3.4.2",
         "typescript": "5.7.3",
-        "vite": "6.0.11",
+        "vite": "6.0.10",
         "vite-tsconfig-paths": "5.1.4"
       }
     },
@@ -436,7 +436,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1241,9 +1240,9 @@
       }
     },
     "node_modules/@livekit/components-react": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.8.1.tgz",
-      "integrity": "sha512-XpuDu7iDMcN4pkV8CYNzHf9hLNdYOeEtbmCr7Zesy6Au3BxUl4aS1Ajmg0b75Rx7zTlkyCJt9Lm4VrEqbJCI6Q==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.8.0.tgz",
+      "integrity": "sha512-Zgt2zv+j2gWJad0mcTDR8cS6KQNXYfAeOL9Si5Lb2Q2k3iPUJinPDMqubM6btnduhkPjy+EF4kA8bNAY0xu4Ig==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/components-core": "0.12.1",
@@ -3880,9 +3879,9 @@
       "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
     },
     "node_modules/@types/node": {
-      "version": "22.10.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
-      "integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
+      "version": "22.10.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz",
+      "integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6396,9 +6395,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "24.2.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
-      "integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==",
+      "version": "24.2.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.1.tgz",
+      "integrity": "sha512-Q2wC1TjWcSikn1VAJg13UGIjc+okpFxQTxjVAymOnSA3RpttBQNMPf2ovcgoFVsV4QNxTfNZMAxorXZXsk4fBA==",
       "funding": [
         {
           "type": "individual",
@@ -8445,9 +8444,9 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.210.2",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.210.2.tgz",
-      "integrity": "sha512-rIbn/h9ur7uA0PS4dClOr9w6txLfHS94yh9yafA5VM2eXToM951XtMYtIQ6bi6wFzpvpFvTQFeYLQ/9/xZ59AQ==",
+      "version": "1.207.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.207.0.tgz",
+      "integrity": "sha512-Sx+xamhg1/iKGAtUNh3uAUtAAza4j/yBhxcfUxfqR++WrZdw0V6nmh7LSfVNl7+QVl2qmiPSoZA7z+5ojaWDDQ==",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.38.1",
@@ -8504,10 +8503,9 @@
       }
     },
     "node_modules/proxy-compare": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
-      "integrity": "sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q==",
-      "license": "MIT"
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.0.tgz",
+      "integrity": "sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w=="
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -9793,12 +9791,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/valtio": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.3.tgz",
-      "integrity": "sha512-q+dVczY5zf7kO39JPVq2qR0VXMeEpF1t+P1njHU7hAhwgtyVa/p38YmgyHZq2IQYwnkNrkvh412k4sfDmcIJ2g==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.2.tgz",
+      "integrity": "sha512-fhekN5Rq7dvHULHHBlJeXHrQDl0Jj9GXfNavCm3gkD06crGchaG1nf/J7gSlfZU2wPcRdVS5jBKWHtE2NNz97A==",
       "license": "MIT",
       "dependencies": {
-        "proxy-compare": "^3.0.1"
+        "proxy-compare": "^3.0.0"
       },
       "engines": {
         "node": ">=12.20.0"
@@ -9892,9 +9890,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
-      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.10.tgz",
+      "integrity": "sha512-MEszunEcMo6pFsfXN1GhCFQqnE25tWRH0MA4f0Q7uanACi4y1Us+ZGpTMnITwCTnYzB2b9cpmnelTlxgTBmaBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10584,10 +10582,9 @@
       }
     },
     "node_modules/wouter": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.4.0.tgz",
-      "integrity": "sha512-Qx4L+EnYk7AF+pNU9TM+lQtkceL5Qm+oDZU9720DUx+/7K6v7fnlHnRLI78KjEbCqdGFeroW5P0M1t8WYSloQA==",
-      "license": "Unlicense",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.3.5.tgz",
+      "integrity": "sha512-bx3fLQAMn+EhYbBdY3W1gw9ZfO/uchudxYMwOIBzF3HVgqNEEIT199vEoh7FLTC0Vz5+rpMO6NdFsOkGX1QQCw==",
       "dependencies": {
         "mitt": "^3.0.1",
         "regexparam": "^3.0.0",

src/frontend/package.json

@@ -13,7 +13,7 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.8.1",
+    "@livekit/components-react": "2.8.0",
     "@livekit/components-styles": "1.1.4",
     "@livekit/track-processors": "0.3.3",
     "@pandacss/preset-panda": "0.51.1",
@@ -22,25 +22,25 @@
     "@tanstack/react-query": "5.64.2",
     "crisp-sdk-web": "1.0.25",
     "hoofd": "1.7.3",
-    "i18next": "24.2.2",
+    "i18next": "24.2.1",
     "i18next-browser-languagedetector": "8.0.2",
     "i18next-parser": "9.1.0",
     "i18next-resources-to-backend": "1.2.1",
     "livekit-client": "2.8.1",
-    "posthog-js": "1.210.2",
+    "posthog-js": "1.207.0",
     "react": "18.3.1",
     "react-aria-components": "1.6.0",
     "react-dom": "18.3.1",
     "react-i18next": "15.1.1",
     "use-sound": "4.0.3",
-    "valtio": "2.1.3",
-    "wouter": "3.4.0"
+    "valtio": "2.1.2",
+    "wouter": "3.3.5"
   },
   "devDependencies": {
     "@pandacss/dev": "0.51.1",
     "@tanstack/eslint-plugin-query": "5.64.2",
     "@tanstack/react-query-devtools": "5.64.2",
-    "@types/node": "22.10.10",
+    "@types/node": "22.10.7",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "8.21.0",
@@ -54,7 +54,7 @@
     "postcss": "8.5.1",
     "prettier": "3.4.2",
     "typescript": "5.7.3",
-    "vite": "6.0.11",
+    "vite": "6.0.10",
     "vite-tsconfig-paths": "5.1.4"
   }
 }

src/frontend/src/features/rooms/components/Join.tsx

@@ -1,18 +1,25 @@
 import { useTranslation } from 'react-i18next'
 import {
+  ParticipantPlaceholder,
   usePersistentUserChoices,
   usePreviewTracks,
   type LocalUserChoices,
 } from '@livekit/components-react'
 import { css } from '@/styled-system/css'
+import { log } from '@livekit/components-core'
+import { defaultUserChoices } from '@livekit/components-core'
 import { Screen } from '@/layout/Screen'
-import { useMemo, useEffect, useRef, useState } from 'react'
-import { LocalVideoTrack, Track } from 'livekit-client'
+import { useUser } from '@/features/auth'
+import React from 'react'
+import {
+  facingModeFromLocalTrack,
+  LocalVideoTrack,
+  Track,
+} from 'livekit-client'
 import { H } from '@/primitives/H'
 import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
-import { Form } from '@/primitives'
-import { HStack, VStack } from '@/styled-system/jsx'
+import { Button } from '@/primitives'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -21,47 +28,92 @@ export const Join = ({
 }: {
   onSubmit: (choices: LocalUserChoices) => void
 }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms')
+  const { user } = useUser()
+  const defaults: Partial<LocalUserChoices> = { username: user?.full_name }
+  const persistUserChoices = true
+  const joinLabel = t('join.joinLabel')
+  const userLabel = t('join.usernameLabel')
+
+  const [userChoices, setUserChoices] = React.useState(defaultUserChoices)
+
+  // TODO: Remove and pipe `defaults` object directly into `usePersistentUserChoices` once we fully switch from type `LocalUserChoices` to `UserChoices`.
+  const partialDefaults: Partial<LocalUserChoices> = {
+    ...(defaults.audioDeviceId !== undefined && {
+      audioDeviceId: defaults.audioDeviceId,
+    }),
+    ...(defaults.videoDeviceId !== undefined && {
+      videoDeviceId: defaults.videoDeviceId,
+    }),
+    ...(defaults.audioEnabled !== undefined && {
+      audioEnabled: defaults.audioEnabled,
+    }),
+    ...(defaults.videoEnabled !== undefined && {
+      videoEnabled: defaults.videoEnabled,
+    }),
+    ...(defaults.username !== undefined && { username: defaults.username }),
+  }
 
   const {
     userChoices: initialUserChoices,
     saveAudioInputDeviceId,
+    saveAudioInputEnabled,
     saveVideoInputDeviceId,
+    saveVideoInputEnabled,
     saveUsername,
-  } = usePersistentUserChoices({})
+  } = usePersistentUserChoices({
+    defaults: partialDefaults,
+    preventSave: !persistUserChoices,
+    preventLoad: !persistUserChoices,
+  })
 
-  const [audioDeviceId, setAudioDeviceId] = useState<string>(
+  // Initialize device settings
+  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(
+    initialUserChoices.audioEnabled
+  )
+  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(
+    initialUserChoices.videoEnabled
+  )
+  const [audioDeviceId, setAudioDeviceId] = React.useState<string>(
     initialUserChoices.audioDeviceId
   )
-  const [videoDeviceId, setVideoDeviceId] = useState<string>(
+  const [videoDeviceId, setVideoDeviceId] = React.useState<string>(
     initialUserChoices.videoDeviceId
   )
-  const [username, setUsername] = useState<string>(initialUserChoices.username)
+  const [username, setUsername] = React.useState(initialUserChoices.username)
 
-  useEffect(() => {
+  // Save user choices to persistent storage.
+  React.useEffect(() => {
+    saveAudioInputEnabled(audioEnabled)
+  }, [audioEnabled, saveAudioInputEnabled])
+  React.useEffect(() => {
+    saveVideoInputEnabled(videoEnabled)
+  }, [videoEnabled, saveVideoInputEnabled])
+  React.useEffect(() => {
     saveAudioInputDeviceId(audioDeviceId)
   }, [audioDeviceId, saveAudioInputDeviceId])
-
-  useEffect(() => {
+  React.useEffect(() => {
     saveVideoInputDeviceId(videoDeviceId)
   }, [videoDeviceId, saveVideoInputDeviceId])
-
-  useEffect(() => {
+  React.useEffect(() => {
     saveUsername(username)
   }, [username, saveUsername])
 
-  const [audioEnabled, setAudioEnabled] = useState(true)
-  const [videoEnabled, setVideoEnabled] = useState(true)
-
   const tracks = usePreviewTracks(
     {
-      audio: { deviceId: initialUserChoices.audioDeviceId },
-      video: { deviceId: initialUserChoices.videoDeviceId },
+      audio: audioEnabled
+        ? { deviceId: initialUserChoices.audioDeviceId }
+        : false,
+      video: videoEnabled
+        ? { deviceId: initialUserChoices.videoDeviceId }
+        : false,
     },
     onError
   )
 
-  const videoTrack = useMemo(
+  const videoEl = React.useRef(null)
+
+  const videoTrack = React.useMemo(
     () =>
       tracks?.filter(
         (track) => track.kind === Track.Kind.Video
@@ -69,7 +121,7 @@ export const Join = ({
     [tracks]
   )
 
-  const audioTrack = useMemo(
+  const audioTrack = React.useMemo(
     () =>
       tracks?.filter(
         (track) => track.kind === Track.Kind.Audio
@@ -77,37 +129,59 @@ export const Join = ({
     [tracks]
   )
 
-  const videoEl = useRef(null)
-
-  useEffect(() => {
-    const videoElement = videoEl.current as HTMLVideoElement | null
-
-    const handleVideoLoaded = () => {
-      if (videoElement) {
-        videoElement.style.opacity = '1'
-      }
+  const facingMode = React.useMemo(() => {
+    if (videoTrack) {
+      const { facingMode } = facingModeFromLocalTrack(videoTrack)
+      return facingMode
+    } else {
+      return 'undefined'
     }
+  }, [videoTrack])
 
-    if (videoElement && videoTrack && videoEnabled) {
+  React.useEffect(() => {
+    if (videoEl.current && videoTrack) {
       videoTrack.unmute()
-      videoTrack.attach(videoElement)
-      videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
+      videoTrack.attach(videoEl.current)
     }
 
     return () => {
       videoTrack?.detach()
-      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
     }
-  }, [videoTrack, videoEnabled])
+  }, [videoTrack])
+
+  const [isValid, setIsValid] = React.useState<boolean>()
+
+  const handleValidation = React.useCallback((values: LocalUserChoices) => {
+    return values.username !== ''
+  }, [])
+
+  React.useEffect(() => {
+    const newUserChoices = {
+      username,
+      videoEnabled,
+      videoDeviceId,
+      audioEnabled,
+      audioDeviceId,
+    }
+    setUserChoices(newUserChoices)
+    setIsValid(handleValidation(newUserChoices))
+  }, [
+    username,
+    videoEnabled,
+    handleValidation,
+    audioEnabled,
+    audioDeviceId,
+    videoDeviceId,
+  ])
 
   function handleSubmit() {
-    onSubmit({
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      videoDeviceId,
-      username,
-    })
+    if (handleValidation(userChoices)) {
+      if (typeof onSubmit === 'function') {
+        onSubmit(userChoices)
+      }
+    } else {
+      log.warn('Validation failed with: ', userChoices)
+    }
   }
 
   return (
@@ -158,60 +232,67 @@ export const Join = ({
                 height: 'auto',
                 aspectRatio: 16 / 9,
                 '--tw-shadow':
-                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
+                  '0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a',
                 '--tw-shadow-colored':
-                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
+                  '0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
                 boxShadow:
                   'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
-                backgroundColor: 'black',
               })}
             >
-              {videoTrack && videoEnabled ? (
+              {videoTrack && (
                 // eslint-disable-next-line jsx-a11y/media-has-caption
                 <video
                   ref={videoEl}
                   width="1280"
                   height="720"
+                  data-lk-facing-mode={facingMode}
                   className={css({
                     display: 'block',
-                    width: '102%',
-                    height: '102%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                    opacity: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                  })}
-                />
-              ) : (
-                <div
-                  className={css({
                     width: '100%',
                     height: '100%',
-                    color: 'white',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                    objectFit: 'cover',
+                    transform: 'rotateY(180deg)',
+                  })}
+                />
+              )}
+              {(!videoTrack || !videoEnabled) && (
+                <div
+                  id="container"
+                  className={css({
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: '#000',
+                    display: 'grid',
+                    placeItems: 'center',
                   })}
                 >
-                  <p
+                  <ParticipantPlaceholder
                     className={css({
-                      fontSize: '24px',
-                      fontWeight: '300',
+                      maxWidth: '100%',
+                      height: '70%',
                     })}
-                  >
-                    {!videoEnabled && t('cameraDisabled')}
-                    {videoEnabled && !videoTrack && t('cameraStarting')}
-                  </p>
+                  />
                 </div>
               )}
+              <div className="lk-button-group-container"></div>
             </div>
-
-            <HStack justify="center" padding={1.5}>
+            <div
+              className={css({
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                padding: '1.5rem',
+                gap: '1rem',
+              })}
+            >
               <SelectToggleDevice
                 source={Track.Source.Microphone}
                 initialState={audioEnabled}
                 track={audioTrack}
-                initialDeviceId={initialUserChoices.audioDeviceId}
+                initialDeviceId={audioDeviceId}
                 onChange={(enabled) => setAudioEnabled(enabled)}
                 onDeviceError={(error) => console.error(error)}
                 onActiveDeviceChange={(deviceId) =>
@@ -223,16 +304,19 @@ export const Join = ({
                 source={Track.Source.Camera}
                 initialState={videoEnabled}
                 track={videoTrack}
-                initialDeviceId={initialUserChoices.videoDeviceId}
-                onChange={(enabled) => setVideoEnabled(enabled)}
+                initialDeviceId={videoDeviceId}
+                onChange={(enabled) => {
+                  setVideoEnabled(enabled)
+                }}
                 onDeviceError={(error) => console.error(error)}
                 onActiveDeviceChange={(deviceId) =>
                   setVideoDeviceId(deviceId ?? '')
                 }
                 variant="tertiary"
               />
-            </HStack>
+            </div>
           </div>
+
           <div
             className={css({
               width: '100%',
@@ -244,35 +328,48 @@ export const Join = ({
               },
             })}
           >
-            <Form
-              onSubmit={handleSubmit}
-              submitLabel={t('joinLabel')}
-              submitButtonProps={{
-                fullWidth: true,
-              }}
+            <form
+              className={css({
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '1rem',
+              })}
             >
-              <VStack marginBottom={1}>
-                <H lvl={1} margin={false}>
-                  {t('heading')}
-                </H>
-                <Field
-                  type="text"
-                  onChange={setUsername}
-                  label={t('usernameLabel')}
-                  aria-label={t('usernameLabel')}
-                  defaultValue={initialUserChoices?.username}
-                  validate={(value) => !value && t('errors.usernameEmpty')}
-                  wrapperProps={{
-                    noMargin: true,
-                    fullWidth: true,
-                  }}
-                  labelProps={{
-                    center: true,
-                  }}
-                  maxLength={50}
-                />
-              </VStack>
-            </Form>
+              <H lvl={1} className={css({ marginBottom: 0 })}>
+                {t('join.heading')}
+              </H>
+              <Field
+                type="text"
+                label={userLabel}
+                defaultValue={username}
+                onChange={(value) => setUsername(value)}
+                validate={(value) => {
+                  return !value ? <p>{t('join.errors.usernameEmpty')}</p> : null
+                }}
+                className={css({
+                  width: '100%',
+                })}
+                wrapperProps={{
+                  noMargin: true,
+                  fullWidth: true,
+                }}
+                labelProps={{
+                  center: true,
+                }}
+                maxLength={50}
+              />
+              <Button
+                type="submit"
+                variant={'primary'}
+                onPress={handleSubmit}
+                isDisabled={!isValid}
+                fullWidth
+              >
+                {joinLabel}
+              </Button>
+            </form>
           </div>
         </div>
       </div>

src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx

@@ -1,20 +0,0 @@
-import { RiImageCircleAiFill } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-
-export const EffectsMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
-
-  return (
-    <MenuItem
-      onAction={() => toggleEffects()}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiImageCircleAiFill size={20} />
-      {t('effects')}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx

@@ -1,20 +0,0 @@
-import { RiMegaphoneLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { GRIST_FORM } from '@/utils/constants'
-
-export const FeedbackMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-
-  return (
-    <MenuItem
-      href={GRIST_FORM}
-      target="_blank"
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiMegaphoneLine size={20} />
-      {t('feedback')}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx

@@ -1,34 +0,0 @@
-import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useFullScreen } from '../../../hooks/useFullScreen'
-
-export const FullScreenMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
-    useFullScreen()
-
-  if (!isFullscreenAvailable) {
-    return null
-  }
-
-  return (
-    <MenuItem
-      onAction={() => toggleFullScreen()}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      {isCurrentlyFullscreen ? (
-        <>
-          <RiFullscreenExitLine size={20} />
-          {t('fullscreen.exit')}
-        </>
-      ) : (
-        <>
-          <RiFullscreenLine size={20} />
-          {t('fullscreen.enter')}
-        </>
-      )}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -1,12 +1,21 @@
-import { Menu as RACMenu, MenuSection } from 'react-aria-components'
+import {
+  RiAccountBoxLine,
+  RiMegaphoneLine,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
 import { Separator } from '@/primitives/Separator'
-import { FullScreenMenuItem } from './FullScreenMenuItem'
-import { SettingsMenuItem } from './SettingsMenuItem'
-import { FeedbackMenuItem } from './FeedbackMenuItem'
-import { EffectsMenuItem } from './EffectsMenuItem'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { useSettingsDialog } from '../SettingsDialogContext'
+import { GRIST_FORM } from '@/utils/constants'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
   return (
     <RACMenu
       style={{
@@ -15,13 +24,31 @@ export const OptionsMenuItems = () => {
       }}
     >
       <MenuSection>
-        <FullScreenMenuItem />
-        <EffectsMenuItem />
+        <MenuItem
+          onAction={() => toggleEffects()}
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+        >
+          <RiAccountBoxLine size={20} />
+          {t('effects')}
+        </MenuItem>
       </MenuSection>
       <Separator />
       <MenuSection>
-        <FeedbackMenuItem />
-        <SettingsMenuItem />
+        <MenuItem
+          href={GRIST_FORM}
+          target="_blank"
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+        >
+          <RiMegaphoneLine size={20} />
+          {t('feedback')}
+        </MenuItem>
+        <MenuItem
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+          onAction={() => setDialogOpen(true)}
+        >
+          <RiSettings3Line size={20} />
+          {t('settings')}
+        </MenuItem>
       </MenuSection>
     </RACMenu>
   )

src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx

@@ -1,20 +0,0 @@
-import { RiSettings3Line } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSettingsDialog } from '../SettingsDialogContext'
-
-export const SettingsMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { setDialogOpen } = useSettingsDialog()
-
-  return (
-    <MenuItem
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => setDialogOpen(true)}
-    >
-      <RiSettings3Line size={20} />
-      {t('settings')}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

@@ -4,14 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'
 
 export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-
-  const [isOpened, setIsOpened] = useState(() => {
-    return window?.$crisp?.is?.('chat:opened') || false
-  })
+  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
 
   useEffect(() => {
     if (!Crisp) {
@@ -30,12 +26,6 @@ export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
     }
   }, [])
 
-  const isSupportEnabled = useIsSupportEnabled()
-
-  if (!isSupportEnabled) {
-    return
-  }
-
   return (
     <ToggleButton
       square

src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx

@@ -7,7 +7,7 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 export const TranscriptToggle = ({
-  variant = 'primaryTextDark',
+  variant = 'primaryDark',
   onPress,
   ...props
 }: ToggleButtonProps) => {

src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts

@@ -1,68 +0,0 @@
-// We use vendor prefix properties
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-import { useState } from 'react'
-
-export function useFullScreen() {
-  const getIsFullscreen = () => {
-    return !!(
-      document.fullscreenElement ||
-      document.webkitFullscreenElement ||
-      document.mozFullScreenElement ||
-      document.msFullscreenElement
-    )
-  }
-
-  const [isFullscreenAvailable] = useState(
-    () =>
-      document.fullscreenEnabled ||
-      document.webkitFullscreenEnabled ||
-      document.mozFullScreenEnabled ||
-      document.msFullscreenEnabled
-  )
-
-  const enterFullscreen = async () => {
-    try {
-      const docEl = document.documentElement
-      if (docEl.requestFullscreen) {
-        await docEl.requestFullscreen()
-      } else if (docEl.webkitRequestFullscreen) {
-        await docEl.webkitRequestFullscreen()
-      } else if (docEl.msRequestFullscreen) {
-        await docEl.msRequestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error entering fullscreen:', error)
-    }
-  }
-
-  const exitFullscreen = async () => {
-    try {
-      if (document.exitFullscreen) {
-        await document.exitFullscreen()
-      } else if (document.webkitExitFullscreen) {
-        await document.webkitExitFullscreen()
-      } else if (document.msExitFullscreen) {
-        await document.msExitFullscreen()
-      }
-    } catch (error) {
-      console.error('Error exiting fullscreen:', error)
-    }
-  }
-
-  const toggleFullScreen = async () => {
-    const isCurrentlyFullscreen = getIsFullscreen()
-    if (isCurrentlyFullscreen) {
-      await exitFullscreen()
-    } else {
-      await enterFullscreen()
-    }
-  }
-
-  return {
-    isCurrentlyFullscreen: getIsFullscreen(),
-    isFullscreenAvailable,
-    toggleFullScreen,
-  }
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -8,8 +8,10 @@ import { HandToggle } from '../../components/controls/HandToggle'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
-import { MoreOptions } from './MoreOptions'
-import { useRef } from 'react'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
 
 export function DesktopControlBar({
   onDeviceError,
@@ -19,11 +21,9 @@ export function DesktopControlBar({
   saveVideoInputDeviceId,
 }: ControlBarAuxProps) {
   const browserSupportsScreenSharing = supportsScreenSharing()
-  const desktopControlBarEl = useRef<HTMLDivElement>(null)
   return (
     <>
       <div
-        ref={desktopControlBarEl}
         className={css({
           width: '100vw',
           display: 'flex',
@@ -87,7 +87,21 @@ export function DesktopControlBar({
           <LeaveButton />
           <StartMediaButton />
         </div>
-        <MoreOptions parentElement={desktopControlBarEl} />
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            paddingRight: '0.25rem',
+          })}
+        >
+          <ChatToggle />
+          <ParticipantsToggle />
+          <TranscriptToggle />
+          <SupportToggle />
+        </div>
       </div>
     </>
   )

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -1,87 +0,0 @@
-import { css } from '@/styled-system/css'
-import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-import { useSize } from '../../hooks/useResizeObserver'
-import { useState, RefObject } from 'react'
-import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
-import { Button } from '@/primitives'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-
-const CONTROL_BAR_BREAKPOINT = 750
-
-const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
-  <>
-    <ChatToggle onPress={onPress} />
-    <ParticipantsToggle onPress={onPress} />
-    <TranscriptToggle onPress={onPress} />
-    <SupportToggle onPress={onPress} />
-  </>
-)
-
-export const LateralMenu = () => {
-  const { t } = useTranslation('rooms')
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handlePress = () => setIsOpen(!isOpen)
-  const handleClose = () => setIsOpen(false)
-
-  return (
-    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
-      <Button
-        square
-        variant="secondaryDark"
-        aria-label={t('controls.moreOptions')}
-        tooltip={t('controls.moreOptions')}
-        onPress={handlePress}
-      >
-        {isOpen ? <RiArrowDownSLine /> : <RiArrowUpSLine />}
-      </Button>
-      <Popover>
-        <Dialog
-          className={css({
-            width: '65px',
-            backgroundColor: 'primaryDark.50',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            borderRadius: '4px',
-            paddingTop: '10px',
-            gap: '0.5rem',
-          })}
-        >
-          <NavigationControls onPress={handleClose} />
-        </Dialog>
-      </Popover>
-    </DialogTrigger>
-  )
-}
-
-export const MoreOptions = ({
-  parentElement,
-}: {
-  parentElement: RefObject<HTMLDivElement>
-}) => {
-  const { width: parentWidth } = useSize(parentElement)
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        justifyContent: 'flex-end',
-        flex: '1 1 33%',
-        alignItems: 'center',
-        gap: '0.5rem',
-        paddingRight: '0.25rem',
-      })}
-    >
-      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
-        <NavigationControls />
-      ) : (
-        <LateralMenu />
-      )}
-    </div>
-  )
-}

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { Crisp } from 'crisp-sdk-web'
 import { ApiUser } from '@/features/auth/api/ApiUser'
-import { useConfig } from '@/api/useConfig'
 
 export const initializeSupportSession = (user: ApiUser) => {
   if (!Crisp.isCrispInjected()) return
@@ -30,8 +29,3 @@ export const useSupport = ({ id }: useSupportProps) => {
 
   return null
 }
-
-export const useIsSupportEnabled = () => {
-  const { data } = useConfig()
-  return !!data?.support?.id
-}

src/frontend/src/locales/de/rooms.json

@@ -27,9 +27,7 @@
     "usernameLabel": "",
     "errors": {
       "usernameEmpty": ""
-    },
-    "cameraDisabled": "",
-    "cameraStarting": ""
+    }
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
@@ -80,8 +78,7 @@
       "open": "",
       "closed": ""
     },
-    "support": "",
-    "moreOptions": ""
+    "support": ""
   },
   "options": {
     "buttonLabel": "",
@@ -90,11 +87,7 @@
       "settings": "",
       "username": "",
       "effects": "",
-      "switchCamera": "",
-      "fullscreen": {
-        "enter": "",
-        "exit": ""
-      }
+      "switchCamera": ""
     }
   },
   "effects": {

src/frontend/src/locales/en/rooms.json

@@ -27,9 +27,7 @@
     "usernameLabel": "Your name",
     "errors": {
       "usernameEmpty": "Your name cannot be empty"
-    },
-    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting."
+    }
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
@@ -79,8 +77,7 @@
       "open": "Hide AI assistant",
       "closed": "Show AI assistant"
     },
-    "support": "Support",
-    "moreOptions": "More options"
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "More Options",
@@ -89,11 +86,7 @@
       "settings": "Settings",
       "username": "Update Your Name",
       "effects": "Apply effects",
-      "switchCamera": "Switch camera",
-      "fullscreen": {
-        "enter": "Fullscreen",
-        "exit": "Exit fullscreen mode"
-      }
+      "switchCamera": "Switch camera"
     }
   },
   "effects": {

src/frontend/src/locales/fr/rooms.json

@@ -27,9 +27,7 @@
     "usernameLabel": "Votre nom",
     "errors": {
       "usernameEmpty": "Votre nom ne peut pas être vide"
-    },
-    "cameraDisabled": "La caméra est désactivée.",
-    "cameraStarting": "La caméra va démarrer."
+    }
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
@@ -79,8 +77,7 @@
       "open": "Masquer l'assistant IA",
       "closed": "Afficher l'assistant IA"
     },
-    "support": "Support",
-    "moreOptions": "Plus d'options"
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "Plus d'options",
@@ -89,11 +86,7 @@
       "settings": "Paramètres",
       "username": "Choisir votre nom",
       "effects": "Appliquer des effets",
-      "switchCamera": "Changer de caméra",
-      "fullscreen": {
-        "enter": "Plein écran",
-        "exit": "Quitter le mode plein écran"
-      }
+      "switchCamera": "Changer de caméra"
     }
   },
   "effects": {

src/frontend/src/primitives/Form.tsx

@@ -3,7 +3,6 @@ import { Form as RACForm, type FormProps } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { HStack } from '@/styled-system/jsx'
 import { Button, useCloseDialog } from '@/primitives'
-import { ButtonProps } from '@/primitives/Button'
 
 /**
  * From wrapper that exposes form data on submit and adds submit/cancel buttons
@@ -14,7 +13,6 @@ import { ButtonProps } from '@/primitives/Button'
 export const Form = ({
   onSubmit,
   submitLabel,
-  submitButtonProps,
   withCancelButton = true,
   onCancelButtonPress,
   children,
@@ -27,7 +25,6 @@ export const Form = ({
     event: FormEvent<HTMLFormElement>
   ) => void
   submitLabel: string
-  submitButtonProps?: ButtonProps
   withCancelButton?: boolean
   onCancelButtonPress?: () => void
 }) => {
@@ -50,7 +47,7 @@ export const Form = ({
     >
       {children}
       <HStack gap="gutter">
-        <Button type="submit" variant="primary" {...submitButtonProps}>
+        <Button type="submit" variant="primary">
           {submitLabel}
         </Button>
         {!!onCancel && (

src/frontend/src/primitives/H.tsx

@@ -1,12 +1,10 @@
-import { Text, TextProps } from './Text'
+import { Text } from './Text'
 
 export const H = ({
   children,
   lvl,
   ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & {
-  lvl: 1 | 2 | 3
-} & TextProps) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { lvl: 1 | 2 | 3 }) => {
   const tag = `h${lvl}` as const
   return (
     <Text as={tag} variant={tag} {...props}>

src/frontend/src/primitives/buttonRecipe.ts

@@ -109,21 +109,6 @@ export const buttonRecipe = cva({
           color: 'primaryDark.100 !important',
         },
       },
-      secondaryDark: {
-        backgroundColor: 'primaryDark.50',
-        color: 'white',
-        '&[data-pressed]': {
-          backgroundColor: 'primaryDark.200',
-        },
-        '&[data-hovered]': {
-          backgroundColor: 'primaryDark.100',
-          color: 'white',
-        },
-        '&[data-selected]': {
-          backgroundColor: 'primaryDark.700 !important',
-          color: 'primaryDark.100 !important',
-        },
-      },
       primaryTextDark: {
         backgroundColor: 'transparent',
         color: 'white',

src/frontend/vite.config.ts

@@ -10,7 +10,6 @@ export default defineConfig(({ mode }) => {
     server: {
       port: parseInt(env.VITE_PORT) || 3000,
       host: env.VITE_HOST || 'localhost',
-      allowedHosts: ['.nip.io'],
     },
   }
 })

src/mail/package.json

@@ -14,7 +14,7 @@
     "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
   },
   "volta": {
-    "node": "22.13.1"
+    "node": "22.13.0"
   },
   "repository": "https://github.com/numerique-gouv/meet",
   "author": "DINUM",

src/summary/pyproject.toml

@@ -10,14 +10,14 @@ dependencies = [
     "celery==5.4.0",
     "redis==5.2.1",
     "minio==7.2.15",
-    "openai==1.60.2",
+    "openai==1.59.8",
     "requests==2.32.3",
     "sentry-sdk[fastapi, celery]==2.20.0",
 ]
 
 [project.optional-dependencies]
 dev = [
-    "ruff==0.9.3",
+    "ruff==0.9.2",
 ]
 
 [build-system]