wip manually mute/unmute track

it makes more sense to have the arrow up as the menu open to the top

src/backend/core/api/__init__.py

@@ -50,6 +50,10 @@ def get_frontend_configuration(request):
             else None,
             "default_country": settings.ROOM_TELEPHONY_DEFAULT_COUNTRY,
         },
+        "livekit": {
+            "url": settings.LIVEKIT_CONFIGURATION["url"],
+            "enable_firefox_proxy_workaround": settings.LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND,
+        },
     }
     frontend_configuration.update(settings.FRONTEND_CONFIGURATION)
     return Response(frontend_configuration)

src/backend/core/services/lobby.py

@@ -212,7 +212,7 @@ class LobbyService:
 
         try:
             utils.notify_participants(
-                room_name=room_id,
+                room_name=str(room_id),
                 notification_data={
                     "type": settings.LOBBY_NOTIFICATION_TYPE,
                 },

src/backend/core/tests/services/test_lobby.py

@@ -442,7 +442,7 @@ def test_enter_success(
         timeout=settings.LOBBY_WAITING_TIMEOUT,
     )
     mock_notify.assert_called_once_with(
-        room_name=room.id, notification_data={"type": "participantWaiting"}
+        room_name=str(room.id), notification_data={"type": "participantWaiting"}
     )
 
 

src/backend/meet/settings.py

@@ -492,6 +492,11 @@ class Base(Configuration):
         ),
         "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
     }
+    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND = values.BooleanValue(
+        environ_name="LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND",
+        environ_prefix=None,
+        default=False,
+    )
     LIVEKIT_VERIFY_SSL = values.BooleanValue(
         True, environ_name="LIVEKIT_VERIFY_SSL", environ_prefix=None
     )

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.29"
+version = "0.1.33"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "0.1.29",
+  "version": "0.1.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.29",
+      "version": "0.1.33",
       "dependencies": {
         "@livekit/components-react": "2.9.13",
         "@livekit/components-styles": "1.1.6",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.29",
+  "version": "0.1.33",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",

src/frontend/public/assets/camera_mic_permission.svg

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
+  <defs>
+    <style>
+      .st0, .st1, .st2, .st3, .st4, .st5 {
+        fill: none;
+      }
+
+      .st6 {
+        fill: #6dd58c;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st9, .st10 {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st10 {
+        stroke-width: 3px;
+      }
+
+      .st6, .st1, .st7, .st8, .st4, .st5, .st10 {
+        stroke: #191c1e;
+      }
+
+      .st11, .st7, .st12, .st9 {
+        fill: #fff;
+      }
+
+      .st11, .st3 {
+        stroke: #000;
+        stroke-miterlimit: 10;
+      }
+
+      .st11, .st3, .st9 {
+        stroke-width: 5px;
+      }
+
+      .st2, .st9 {
+        stroke: #898989;
+      }
+
+      .st8 {
+        fill: #ff8669;
+      }
+
+      .st13 {
+        fill: #e3e3fb;
+      }
+
+      .st14 {
+        fill: #f7f7f7;
+      }
+
+      .st4, .st5 {
+        stroke-width: 4px;
+      }
+
+      .st5 {
+        stroke-linecap: square;
+      }
+
+      .st15 {
+        fill: #ca3632;
+      }
+
+      .st10 {
+        fill: #ffb929;
+      }
+    </style>
+  </defs>
+  <rect class="st12" x=".53" y=".53" width="1078.61" height="1080.36"/>
+  <path class="st12" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st1" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st12" d="M960.08,256.93h-110c-12.94,0-23.43-10.49-23.43-23.43v-71.56c0-12.94-10.48-23.43-23.42-23.44h-266.94c-12.94,0-23.43,10.49-23.43,23.44h0v71.56c0,12.94-10.49,23.43-23.43,23.43H120.5v137.62h839.58"/>
+  <path class="st8" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st10" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st6" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st1" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st7" d="M625.31,322.08h-27.15c-4.35,0-7.88,3.53-7.88,7.88h0v17.19c0,4.35,3.53,7.88,7.88,7.88h27.15c4.35,0,7.88-3.53,7.88-7.88h0v-17.19c0-4.35-3.53-7.88-7.88-7.88h0Z"/>
+  <path class="st12" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <path class="st1" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <g>
+    <ellipse class="st4" cx="707.63" cy="299.5" rx="18.37" ry="18.5"/>
+    <path class="st5" d="M624,299h63"/>
+    <circle class="st4" cx="643.5" cy="339.5" r="18.5"/>
+    <path class="st5" d="M728,339h-63"/>
+  </g>
+  <path class="st14" d="M192.29,138.5h767.79v118.43H120.5v-46.64c0-39.62,32.17-71.79,71.79-71.79h0Z"/>
+  <path class="st0" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st15" d="M382.41,636.74l39.92,39.92,13.47-13.47-188.53-188.53-13.47,13.47,11.35,11.35h-5.58c-5.26,0-9.52,4.26-9.52,9.52v133.31c0,5.26,4.26,9.52,9.52,9.52h133.31c5.26,0,9.52-4.26,9.52-9.52v-5.58h.01ZM363.37,617.69v15.1h-114.27v-114.27h15.1l99.17,99.17h0ZM439.55,633.17c0,2.02-1.19,3.6-2.78,4.33l-16.27-16.27v-75.65l-38.09,26.66v10.9l-19.04-19.04v-45.57h-45.57l-19.04-19.04h74.14c5.26,0,9.52,4.26,9.52,9.52v39.99l49.64-34.75c3.16-2.21,7.49.05,7.49,3.9v115.02h0Z"/>
+  <path class="st15" d="M375.25,866.34l43.58,43.58,12.93-12.93-180.97-180.97-12.93,12.93,51.25,51.25v14.49c0,25.24,20.46,45.7,45.7,45.7,4.41,0,8.67-.62,12.7-1.79l14.17,14.17c-8.17,3.79-17.28,5.9-26.87,5.9-32.23,0-58.9-23.84-63.33-54.84h-18.43c4.21,38.13,34.49,68.4,72.62,72.62v37.06h18.28v-37.06c11.28-1.25,21.87-4.77,31.3-10.11h0ZM330.71,821.81c-11.87-1.78-21.25-11.16-23.03-23.03l23.03,23.03ZM402.21,841.85l-13.18-13.18c4.65-7.4,7.82-15.82,9.11-24.84h18.43c-1.55,14.04-6.64,27.02-14.35,38.03h0ZM375.62,815.27l-14.15-14.15c.5-2.06.76-4.21.76-6.43v-36.56c0-15.14-12.28-27.42-27.42-27.42-11.83,0-21.91,7.49-25.76,17.99l-13.68-13.68c7.94-13.52,22.63-22.59,39.44-22.59,25.24,0,45.7,20.46,45.7,45.7v36.56c0,7.4-1.76,14.39-4.88,20.58h-.01Z"/>
+  <path d="M597.6,312.73c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM602.4,301.55c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM619.98,315.93h25.57v-6.39h-25.57v6.39ZM632.76,344.69c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM637.56,333.51c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM594.41,341.5v6.39h25.57v-6.39h-25.57Z"/>
+  <line class="st2" x1="960.08" y1="394.55" x2="836.91" y2="394.55"/>
+  <path class="st9" d="M527.76,394.55H120.5v-137.62h368.93c12.94,0,23.43-10.49,23.43-23.43v-71.56c0-12.95,10.49-23.44,23.43-23.44h266.94c12.94,0,23.43,10.5,23.42,23.44v71.56c0,2.09.27,4.12.79,6.05,1,3.77,2.92,7.17,5.51,9.94,4.28,4.58,10.37,7.44,17.13,7.44h110"/>
+  <path class="st13" d="M645.52,274.8h314.56v101.2h-314.56c-23.81,0-43.12-22.66-43.12-50.61h0c.01-27.94,19.31-50.59,43.12-50.59h0Z"/>
+  <g>
+    <path class="st13" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71h-181.11c-43.65,0-79.03-35.38-79.03-79.03,0-21.82,8.86-41.56,23.16-55.86,14.3-14.29,34.06-23.13,55.87-23.13h179.74c12.93,23.89,20.27,51.24,20.27,80.31Z"/>
+    <path d="M656.78,350.02v9.98h39.93v-9.98h-39.93ZM724.16,337.54c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.46,17.47,17.46,17.47-7.82,17.47-17.46-7.82-17.47-17.47-17.47ZM724.16,362.49c-4.13,0-7.49-3.35-7.49-7.48s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.36,7.48-7.49,7.48ZM696.71,300.11v9.98h39.93v-9.98h-39.93ZM669.26,287.63c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.47,17.47,17.47,17.47-7.82,17.47-17.47-7.82-17.47-17.47-17.47ZM669.26,312.59c-4.13,0-7.49-3.36-7.49-7.49s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.35,7.49-7.49,7.49Z"/>
+  </g>
+  <line class="st2" x1="813.4" y1="432.85" x2="551.26" y2="432.85"/>
+  <path class="st3" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71-5.35,10.32-11.74,20.02-19.02,28.96-30.98,38.03-78.19,62.32-131.07,62.32s-100.09-24.29-131.07-62.32c-23.7-29.09-37.92-66.22-37.92-106.67,0-93.33,75.66-168.99,168.99-168.99,64.26,0,120.15,35.87,148.72,88.68,12.93,23.89,20.27,51.24,20.27,80.31h0Z"/>
+  <polygon class="st11" points="705.12 406.95 681.79 637.91 746.21 597.51 802.28 751.56 852.2 733.39 796.14 579.34 871.46 568.88 705.12 406.95"/>
+</svg>

src/frontend/src/api/useConfig.ts

@@ -37,6 +37,10 @@ export interface ApiConfig {
     default_country?: string
   }
   manifest_link?: string
+  livekit: {
+    url: string
+    enable_firefox_proxy_workaround: boolean
+  }
 }
 
 const fetchConfig = (): Promise<ApiConfig> => {

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

@@ -1,7 +1,10 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
+import {
+  LiveKitRoom,
+  usePersistentUserChoices,
+} from '@livekit/components-react'
 import {
   DisconnectReason,
   MediaDeviceFailure,
@@ -18,29 +21,38 @@ import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 import { VideoConference } from '../livekit/prefabs/VideoConference'
-import posthog from 'posthog-js'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
 import { navigateTo } from '@/navigation/navigateTo'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
+import { usePostHog } from 'posthog-js/react'
+import { useConfig } from '@/api/useConfig'
+import { isFireFox } from '@/utils/livekit'
 
 export const Conference = ({
   roomId,
-  userConfig,
   initialRoomData,
   mode = 'join',
 }: {
   roomId: string
-  userConfig: LocalUserChoices
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
+  const posthog = usePostHog()
+  const { data: apiConfig } = useConfig()
+
+  const { userChoices: userConfig } = usePersistentUserChoices() as {
+    userChoices: LocalUserChoices
+  }
+
   useEffect(() => {
     posthog.capture('visit-room', { slug: roomId })
-  }, [roomId])
+  }, [roomId, posthog])
   const fetchKey = [keys.room, roomId]
 
+  const [isConnectionWarmedUp, setIsConnectionWarmedUp] = useState(false)
+
   const {
     mutateAsync: createRoom,
     status: createStatus,
@@ -85,12 +97,64 @@ export const Conference = ({
       audioCaptureDefaults: {
         deviceId: userConfig.audioDeviceId ?? undefined,
       },
+      audioOutput: {
+        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+      },
     }
     // do not rely on the userConfig object directly as its reference may change on every render
-  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
+  }, [
+    userConfig.videoDeviceId,
+    userConfig.audioDeviceId,
+    userConfig.audioOutputDeviceId,
+  ])
 
   const room = useMemo(() => new Room(roomOptions), [roomOptions])
 
+  useEffect(() => {
+    /**
+     * Warm up connection to LiveKit server before joining room
+     * This prefetch helps reduce initial connection latency by establishing
+     * an early HTTP connection to the WebRTC signaling server
+     *
+     * It should cache DNS and TLS keys.
+     */
+    const prepareConnection = async () => {
+      if (!apiConfig || isConnectionWarmedUp) return
+      await room.prepareConnection(apiConfig.livekit.url)
+
+      if (isFireFox() && apiConfig.livekit.enable_firefox_proxy_workaround) {
+        try {
+          const wssUrl =
+            apiConfig.livekit.url
+              .replace('https://', 'wss://')
+              .replace(/\/$/, '') + '/rtc'
+
+          /**
+           * FIREFOX + PROXY WORKAROUND:
+           *
+           * Issue: On Firefox behind proxy configurations, WebSocket signaling fails to establish.
+           * Symptom: Client receives HTTP 200 instead of expected 101 (Switching Protocols).
+           * Root Cause: Certificate/security issue where the initial request is considered unsecure.
+           *
+           * Solution: Pre-establish a WebSocket connection to the signaling server, which fails.
+           * This "primes" the connection, allowing subsequent WebSocket establishments to work correctly.
+           *
+           * Note: This issue is reproducible on LiveKit's demo app.
+           * Reference: livekit-examples/meet/issues/466
+           */
+          const ws = new WebSocket(wssUrl)
+          // 401 unauthorized response is expected
+          ws.onerror = () => ws.readyState <= 1 && ws.close()
+        } catch (e) {
+          console.debug('Firefox WebSocket workaround failed.', e)
+        }
+      }
+
+      setIsConnectionWarmedUp(true)
+    }
+    prepareConnection()
+  }, [room, apiConfig, isConnectionWarmedUp])
+
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null
@@ -123,9 +187,9 @@ export const Conference = ({
       <Screen header={false} footer={false}>
         <LiveKitRoom
           room={room}
-          serverUrl={data?.livekit?.url}
+          serverUrl={apiConfig?.livekit.url}
           token={data?.livekit?.token}
-          connect={true}
+          connect={isConnectionWarmedUp}
           audio={userConfig.audioEnabled}
           video={
             userConfig.videoEnabled && {
@@ -138,6 +202,9 @@ export const Conference = ({
           className={css({
             backgroundColor: 'primaryDark.50 !important',
           })}
+          onError={(e) => {
+            posthog.captureException(e)
+          }}
           onDisconnected={(e) => {
             if (e == DisconnectReason.CLIENT_INITIATED) {
               navigateTo('feedback', { duplicateIdentity: false })

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

@@ -1,14 +1,12 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { LocalVideoTrack, Track } from 'livekit-client'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { LocalTrack, Track } from 'livekit-client'
 import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
-import { HStack, VStack } from '@/styled-system/jsx'
+import { VStack } from '@/styled-system/jsx'
 import { Heading } from 'react-aria-components'
 import { RiImageCircleAiFill } from '@remixicon/react'
 import {
@@ -27,7 +25,10 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
-import { LocalUserChoices } from '@/stores/userChoices'
+import { ToggleDeviceJoin } from '@/features/rooms/components/ToggleDeviceJoin'
+import { SelectDeviceJoin } from '@/features/rooms/components/SelectDeviceJoin'
+import { usePreviewTracks } from '@/features/rooms/hooks/usePreviewTracks'
+import { usePermissions } from '@/features/rooms/hooks/usePermissions'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -72,45 +73,23 @@ const Effects = ({
         </Text>
         <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
       </Dialog>
-      <div
-        className={css({
-          position: 'absolute',
-          right: 0,
-          bottom: '0',
-          padding: '1rem',
-          zIndex: '1',
-        })}
+      <Button
+        variant="whiteCircle"
+        onPress={openDialog}
+        tooltip={t('description')}
+        aria-label={t('description')}
       >
-        <Button
-          variant="whiteCircle"
-          onPress={openDialog}
-          tooltip={t('description')}
-          aria-label={t('description')}
-        >
-          <RiImageCircleAiFill size={24} />
-        </Button>
-      </div>
-      <div
-        className={css({
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: '20%',
-          backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
-          borderBottomRadius: '1rem',
-        })}
-      />
+        <RiImageCircleAiFill size={24} />
+      </Button>
     </>
   )
 }
 
 export const Join = ({
-  onSubmit,
+  enterRoom,
   roomId,
 }: {
-  onSubmit: (choices: LocalUserChoices) => void
+  enterRoom: () => void
   roomId: string
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
@@ -120,6 +99,7 @@ export const Join = ({
       audioEnabled,
       videoEnabled,
       audioDeviceId,
+      audioOutputDeviceId,
       videoDeviceId,
       processorSerialized,
       username,
@@ -127,55 +107,43 @@ export const Join = ({
     saveAudioInputEnabled,
     saveVideoInputEnabled,
     saveAudioInputDeviceId,
+    saveAudioOutputDeviceId,
     saveVideoInputDeviceId,
     saveUsername,
     saveProcessorSerialized,
   } = usePersistentUserChoices()
 
-  const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(processorSerialized)
-  )
-
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
-
-  const tracks = usePreviewTracks(
+  // fix - permission issue, when permission not set doesn't refresh
+  const { videoTrack, audioTrack } = usePreviewTracks(
     {
       audio: { deviceId: audioDeviceId },
-      video: { deviceId: videoDeviceId },
+      video: {
+        deviceId: videoDeviceId,
+        processor:
+          BackgroundProcessorFactory.deserializeProcessor(processorSerialized),
+      },
     },
     onError
   )
 
-  const videoTrack = useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Video
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const audioTrack = useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
+  const toggleTrack = (track: LocalTrack | undefined, isEnabled: boolean) => {
+    if (!track) return
+    if (isEnabled) {
+      track?.unmute()
+    } else {
+      track?.mute()
+    }
+  }
 
   const videoEl = useRef(null)
+  const isVideoInitiated = useRef(false)
 
   useEffect(() => {
     const videoElement = videoEl.current as HTMLVideoElement | null
 
     const handleVideoLoaded = () => {
       if (videoElement) {
+        isVideoInitiated.current = true
         videoElement.style.opacity = '1'
       }
     }
@@ -192,25 +160,6 @@ export const Join = ({
     }
   }, [videoTrack, videoEnabled])
 
-  const enterRoom = useCallback(() => {
-    onSubmit({
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      videoDeviceId,
-      username,
-      processorSerialized: processor?.serialize(),
-    })
-  }, [
-    onSubmit,
-    audioEnabled,
-    videoEnabled,
-    audioDeviceId,
-    videoDeviceId,
-    username,
-    processor,
-  ])
-
   // Room data strategy:
   // 1. Initial fetch is performed to check access and get LiveKit configuration
   // 2. Data remains valid for 6 hours to avoid unnecessary refetches
@@ -269,15 +218,28 @@ export const Join = ({
     enterRoom()
   }
 
-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
+  const { isCameraGranted, isMicrophoneGranted } = usePermissions()
+
+  const hintMessage = useMemo(() => {
+    if (!isCameraGranted) {
+      if (!isMicrophoneGranted) {
+        return 'cameraAndMicNotGranted'
+      }
+      return 'cameraNotGranted'
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
+
+    if (!videoEnabled) {
+      return 'cameraDisabled'
+    }
+
+    if (!isVideoInitiated.current) {
+      return 'cameraStarting'
+    }
+
+    if (videoTrack && videoEnabled) {
+      return ''
+    }
+  }, [videoTrack, videoEnabled, isCameraGranted, isMicrophoneGranted])
 
   const renderWaitingState = () => {
     switch (status) {
@@ -330,6 +292,10 @@ export const Join = ({
             submitButtonProps={{
               fullWidth: true,
             }}
+            className={css({
+              width: '100%',
+              maxWidth: '340px',
+            })}
           >
             <VStack marginBottom={1}>
               <H lvl={1} margin="sm" centered>
@@ -361,141 +327,265 @@ export const Join = ({
       <div
         className={css({
           display: 'flex',
-          alignItems: 'flex-start',
           justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          flexDirection: 'column',
           flexGrow: 1,
+          gap: { base: '1rem', sm: '2rem', lg: 0 },
           lg: {
-            alignItems: 'center',
+            flexDirection: 'row',
           },
         })}
       >
         <div
           className={css({
             display: 'flex',
-            height: 'auto',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: '2rem',
-            padding: '0 2rem',
-            flexDirection: 'column',
-            minWidth: 0,
             width: '100%',
+            minWidth: 0,
+            maxWidth: '764px',
             lg: {
-              flexDirection: 'row',
-              width: 'auto',
-              height: '570px',
+              height: '540px',
+              flexGrow: 1,
             },
           })}
         >
           <div
             className={css({
-              width: '100%',
-              lg: {
-                width: '740px',
-              },
+              display: 'inline-flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              minWidth: 0,
+              flexShrink: { base: 0, sm: 1 },
             })}
           >
             <div
               className={css({
                 borderRadius: '1rem',
+                flex: '0 1',
+                minWidth: '320px',
+                margin: {
+                  base: '0.5rem',
+                  sm: '1rem',
+                  lg: '1rem 0.5rem 1rem 1rem',
+                },
                 overflow: 'hidden',
                 position: 'relative',
-                width: '100%',
-                height: 'auto',
-                aspectRatio: 16 / 9,
-                '--tw-shadow':
-                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
-                '--tw-shadow-colored':
-                  '0 10px 15px -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',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
               })}
             >
-              {videoTrack && videoEnabled ? (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video
-                  ref={videoEl}
-                  width="1280"
-                  height="720"
-                  className={css({
-                    display: 'block',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                    opacity: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                    borderRadius: '1rem',
-                  })}
-                  disablePictureInPicture
-                  disableRemotePlayback
-                />
-              ) : (
+              <div
+                className={css({
+                  position: 'relative',
+                  width: '100%',
+                  height: 'fit-content',
+                  aspectRatio: '16 / 9',
+                })}
+              >
                 <div
                   className={css({
+                    backgroundColor: 'black',
+                    position: 'absolute',
+                    boxSizing: 'border-box',
+                    top: 0,
                     width: '100%',
                     height: '100%',
-                    color: 'white',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                    overflow: 'hidden',
                   })}
                 >
-                  <p
+                  <div
+                    aria-label={t(
+                      `videoPreview.${videoEnabled && isCameraGranted ? 'enabled' : 'disabled'}`
+                    )}
+                    role="status"
                     className={css({
-                      fontSize: '24px',
-                      fontWeight: '300',
+                      position: 'absolute',
+                      top: 0,
+                      width: '100%',
                     })}
                   >
-                    {!videoEnabled && t('cameraDisabled')}
-                    {videoEnabled && !videoTrack && t('cameraStarting')}
-                  </p>
+                    <div
+                      className={css({
+                        width: '100%',
+                        height: 'auto',
+                        aspectRatio: '16 / 9',
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: '-2px',
+                        left: '-2px',
+                        pointerEvents: 'none',
+                        transform: 'scale(1.02)',
+                      })}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                      <video
+                        ref={videoEl}
+                        width="1280"
+                        height="720"
+                        style={{
+                          display:
+                            !videoEnabled || !isCameraGranted
+                              ? 'none'
+                              : undefined,
+                        }}
+                        className={css({
+                          position: 'absolute',
+                          transform: 'rotateY(180deg)',
+                          opacity: 0,
+                          height: '100%',
+                          transition: 'opacity 0.3s ease-in-out',
+                          objectFit: 'cover',
+                        })}
+                        disablePictureInPicture
+                        disableRemotePlayback
+                      />
+                    </div>
+                  </div>
+                  <div
+                    role="alert"
+                    className={css({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      height: '100%',
+                      width: '100%',
+                      justifyContent: 'center',
+                      textAlign: 'center',
+                      alignItems: 'center',
+                      padding: '0.24rem',
+                      boxSizing: 'border-box',
+                    })}
+                  >
+                    <p
+                      className={css({
+                        fontWeight: '400',
+                        fontSize: { base: '1rem', sm: '1.25rem', lg: '1.5rem' },
+                        textWrap: 'balance',
+                        color: 'white',
+                      })}
+                    >
+                      {hintMessage && t(hintMessage)}
+                    </p>
+                  </div>
                 </div>
-              )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
+                <div
+                  className={css({
+                    position: 'absolute',
+                    right: '50%',
+                    bottom: '1rem',
+                    zIndex: '1',
+                    display: 'flex',
+                    gap: '1.5rem',
+                    justifyContent: 'center',
+                    marginRight: '-68px',
+                  })}
+                >
+                  <ToggleDeviceJoin
+                    source={Track.Source.Microphone}
+                    initialState={audioEnabled}
+                    track={audioTrack}
+                    onChange={(value) => {
+                      toggleTrack(audioTrack, value)
+                      saveAudioInputEnabled(value)
+                    }}
+                  />
+                  <ToggleDeviceJoin
+                    source={Track.Source.Camera}
+                    initialState={videoEnabled}
+                    track={videoTrack}
+                    onChange={(value) => {
+                      const videoElement =
+                        videoEl.current as HTMLVideoElement | null
+
+                      if (isVideoInitiated.current && !value && videoElement) {
+                        isVideoInitiated.current = false
+                        videoElement.style.opacity = '0'
+                      }
+                      toggleTrack(videoTrack, value)
+                      saveVideoInputEnabled(value)
+                    }}
+                  />
+                </div>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    right: '1rem',
+                    bottom: '1rem',
+                    zIndex: '1',
+                  })}
+                >
+                  <Effects
+                    videoTrack={videoTrack}
+                    onSubmit={(processor) =>
+                      saveProcessorSerialized(processor?.serialize())
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className={css({
+                display: 'none',
+                sm: {
+                  display: 'flex',
+                  justifyContent: 'center',
+                  gap: '2%',
+                  width: '80%',
+                  marginX: 'auto',
+                },
+              })}
+            >
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDeviceJoin
+                  kind="audioinput"
+                  id={audioDeviceId}
+                  onSubmit={saveAudioInputDeviceId}
+                />
+              </div>
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDeviceJoin
+                  kind="audiooutput"
+                  id={audioOutputDeviceId}
+                  onSubmit={saveAudioOutputDeviceId}
+                />
+              </div>
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDeviceJoin
+                  kind="videoinput"
+                  id={videoDeviceId}
+                  onSubmit={saveVideoInputDeviceId}
+                />
+              </div>
             </div>
-            <HStack justify="center" padding={1.5}>
-              <SelectToggleDevice
-                source={Track.Source.Microphone}
-                initialState={audioEnabled}
-                track={audioTrack}
-                initialDeviceId={audioDeviceId}
-                onChange={(enabled) => saveAudioInputEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  saveAudioInputDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-              <SelectToggleDevice
-                source={Track.Source.Camera}
-                initialState={videoEnabled}
-                track={videoTrack}
-                initialDeviceId={videoDeviceId}
-                onChange={(enabled) => saveVideoInputEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  saveVideoInputDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-            </HStack>
-          </div>
-          <div
-            className={css({
-              width: '100%',
-              flexShrink: 0,
-              padding: '0',
-              sm: {
-                width: '448px',
-                padding: '0 3rem 9rem 3rem',
-              },
-            })}
-          >
-            {renderWaitingState()}
           </div>
         </div>
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flex: '0 0 448px',
+            position: 'relative',
+            margin: '1rem 1rem 1rem 0.5rem',
+          })}
+        >
+          {renderWaitingState()}
+        </div>
       </div>
     </Screen>
   )

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

@@ -0,0 +1,90 @@
+import { Dialog, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { useEffect, useMemo } from 'react'
+import { usePermissions } from '../hooks/usePermissions'
+import { useModal } from '../hooks/useModal'
+
+export const PermissionErrorModal = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
+  const permissions = usePermissions()
+  const { isOpen, close } = useModal('permissions')
+
+  useEffect(() => {
+    if (
+      isOpen() &&
+      permissions.isCameraGranted &&
+      permissions.isMicrophoneGranted
+    ) {
+      close()
+    }
+  }, [permissions, isOpen, close])
+
+  // Use to split the translation in half to inject an inline icon
+  const icon_placeholder = 'ICON_PLACEHOLDER'
+  const [openMenuFirstPart, openMenuSecondPart] = t('body.openMenu', {
+    icon_placeholder,
+  }).split(icon_placeholder)
+
+  const permissionLabel = useMemo(() => {
+    if (permissions.isMicrophoneDenied && permissions.isCameraDenied) {
+      return 'cameraAndMicrophone'
+    } else if (permissions.isCameraDenied) {
+      return 'camera'
+    } else if (permissions.isMicrophoneDenied) {
+      return 'microphone'
+    } else {
+      return 'default'
+    }
+  }, [permissions])
+
+  return (
+    <Dialog
+      isOpen={isOpen()}
+      role="dialog"
+      type="flex"
+      title={''}
+      aria-label={t(`heading.${permissionLabel}`, {
+        app_title: `${import.meta.env.VITE_APP_TITLE}`,
+      })}
+      onClose={() => close()}
+    >
+      <HStack>
+        <img
+          src="/assets/camera_mic_permission.svg"
+          alt=""
+          className={css({
+            minWidth: '290px',
+            minHeight: '290px',
+            maxWidth: '290px',
+          })}
+        />
+        <div
+          className={css({
+            maxWidth: '400px',
+          })}
+        >
+          <H lvl={2}>
+            {t(`heading.${permissionLabel}`, {
+              app_title: `${import.meta.env.VITE_APP_TITLE}`,
+            })}
+          </H>
+          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
+            <li>
+              {openMenuFirstPart}
+              <span
+                style={{ display: 'inline-block', verticalAlign: 'middle' }}
+              >
+                <RiEqualizer2Line />
+              </span>
+              {openMenuSecondPart}
+            </li>
+            <li>{t(`body.details.${permissionLabel}`)}</li>
+          </ol>
+        </div>
+      </HStack>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,113 @@
+import {
+  RemixiconComponentType,
+  RiMicLine,
+  RiVideoOnLine,
+  RiVolumeDownLine,
+} from '@remixicon/react'
+import { Select } from '@/primitives/Select.tsx'
+import { useMemo } from 'react'
+import { useMediaDeviceSelect } from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
+import { usePermissions } from '@/features/rooms/hooks/usePermissions'
+
+type DeviceItems = Array<{ value: string; label: string }>
+
+type DeviceConfig = {
+  icon: RemixiconComponentType
+  isGranted: boolean
+}
+
+type SelectDeviceJoinProps = {
+  id?: string
+  onSubmit?: (id: string) => void
+  kind: MediaDeviceKind
+}
+
+export const SelectDeviceJoin = ({ kind, ...props }: SelectDeviceJoinProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { isMicrophoneGranted, isCameraGranted } = usePermissions()
+
+  const config = useMemo<DeviceConfig>(() => {
+    switch (kind) {
+      case 'audioinput':
+        return {
+          icon: RiMicLine,
+          isGranted: isMicrophoneGranted,
+        }
+      case 'audiooutput':
+        return {
+          icon: RiVolumeDownLine,
+          isGranted: isMicrophoneGranted,
+        }
+      case 'videoinput':
+        return {
+          icon: RiVideoOnLine,
+          isGranted: isCameraGranted,
+        }
+    }
+  }, [kind, isMicrophoneGranted, isCameraGranted])
+
+  if (!config.isGranted) {
+    return (
+      <Select
+        aria-label={'selector disabled - permissions are needed'}
+        label=""
+        items={[]}
+        isDisabled={true}
+        iconComponent={config.icon}
+        placeholder={t('selectDevice.permissionNeeded')}
+      />
+    )
+  }
+
+  return <SelectDeviceJoinActive {...props} kind={kind} config={config} />
+}
+
+type SelectDeviceJoinActiveProps = {
+  config: DeviceConfig
+} & SelectDeviceJoinProps
+
+const SelectDeviceJoinActive = ({
+  id,
+  onSubmit,
+  kind,
+  config,
+}: SelectDeviceJoinActiveProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const getDefaultSelectedKey = (items: DeviceItems) => {
+    if (!items || items.length === 0) return
+    const defaultItem =
+      items.find((item) => item.value === 'default') || items[0]
+    return defaultItem.value
+  }
+
+  const {
+    devices: devices,
+    activeDeviceId: activeDeviceId,
+    setActiveMediaDevice: setActiveMediaDevice,
+  } = useMediaDeviceSelect({ kind, requestPermissions: false })
+
+  const items: DeviceItems = devices
+    .filter((d) => !!d.deviceId)
+    .map((d) => ({
+      value: d.deviceId,
+      label: d.label,
+    }))
+
+  return (
+    <Select
+      aria-label={t(`${kind}.choose`)}
+      label=""
+      isDisabled={items.length == 0}
+      items={items}
+      iconComponent={config?.icon}
+      placeholder={t('selectDevice.loading')}
+      defaultSelectedKey={id || activeDeviceId || getDefaultSelectedKey(items)}
+      onSelectionChange={(key) => {
+        onSubmit?.(key as string)
+        setActiveMediaDevice(key as string)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,33 @@
+import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
+import { SelectToggleDeviceProps } from '@/features/rooms/livekit/components/controls/SelectToggleDevice'
+import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice'
+import {
+  SelectToggleSource,
+  ToggleSource,
+} from '@/features/rooms/livekit/types/SelectToggleDevice'
+import { SELECT_TOGGLE_DEVICE_CONFIG } from '@/features/rooms/livekit/config/SelectToggleDevice'
+
+type ToggleDeviceJoinProps<T extends ToggleSource> = UseTrackToggleProps<T> &
+  Pick<SelectToggleDeviceProps<T>, 'track' | 'source' | 'variant'>
+
+export const ToggleDeviceJoin = <T extends ToggleSource>(
+  props: ToggleDeviceJoinProps<T>
+) => {
+  const config = SELECT_TOGGLE_DEVICE_CONFIG[props.source as SelectToggleSource]
+  if (!config) {
+    throw new Error('Invalid source')
+  }
+
+  const trackProps = useTrackToggle(props)
+
+  return (
+    <ToggleDevice
+      {...trackProps}
+      config={config}
+      variant="whiteCircle"
+      toggleButtonProps={{
+        groupPosition: undefined,
+      }}
+    />
+  )
+}

src/frontend/src/features/rooms/hooks/useModal.ts

@@ -0,0 +1,22 @@
+import { useSnapshot } from 'valtio'
+import { ModalsState, modalsStore } from '@/stores/modals'
+
+interface UseModalReturn {
+  isOpen: () => boolean
+  open: () => void
+  close: () => void
+}
+
+export const useModal = (name: keyof ModalsState): UseModalReturn => {
+  const modalsSnap = useSnapshot(modalsStore)
+
+  const isOpen = (): boolean => {
+    return modalsSnap[name] as boolean
+  }
+
+  return {
+    isOpen,
+    open: () => (modalsStore[name] = true),
+    close: () => (modalsStore[name] = false),
+  }
+}

src/frontend/src/features/rooms/hooks/usePermissions.ts

@@ -0,0 +1,66 @@
+import { useEffect } from 'react'
+import { permissionStore } from '@/stores/permissions.ts'
+import { useSnapshot } from 'valtio'
+
+export const usePermissionsSync = () => {
+  useEffect(() => {
+    // fixme - on safari, 'change' event is not trigger
+    // fixme - prevent error on old browsers
+    const checkPermissions = async () => {
+      try {
+        const [cameraPermission, microphonePermission] = await Promise.all([
+          navigator.permissions.query({ name: 'camera' }),
+          navigator.permissions.query({ name: 'microphone' }),
+        ])
+        permissionStore.cameraPermission = cameraPermission.state
+        permissionStore.microphonePermission = microphonePermission.state
+
+        const handleCameraChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionStore.cameraPermission = target.state
+        }
+
+        const handleMicrophoneChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionStore.microphonePermission = target.state
+        }
+
+        if (!cameraPermission.onchange) {
+          cameraPermission.addEventListener('change', handleCameraChange)
+        }
+        if (!microphonePermission.onchange) {
+          microphonePermission.addEventListener(
+            'change',
+            handleMicrophoneChange
+          )
+        }
+
+        return () => {
+          cameraPermission.removeEventListener('change', handleCameraChange)
+          microphonePermission.removeEventListener(
+            'change',
+            handleMicrophoneChange
+          )
+        }
+      } catch (error) {
+        console.error('Error checking permissions:', error)
+      }
+    }
+    checkPermissions()
+  }, [])
+}
+
+export const usePermissions = () => {
+  const permissionSnap = useSnapshot(permissionStore)
+
+  return {
+    cameraPermission: permissionSnap.cameraPermission,
+    microphonePermission: permissionSnap.microphonePermission,
+    isCameraDenied: permissionSnap.cameraPermission == 'denied',
+    isCameraPrompted: permissionSnap.cameraPermission == 'prompt',
+    isCameraGranted: permissionSnap.cameraPermission == 'granted',
+    isMicrophoneDenied: permissionSnap.microphonePermission == 'denied',
+    isMicrophonePrompted: permissionSnap.microphonePermission == 'prompt',
+    isMicrophoneGranted: permissionSnap.microphonePermission == 'granted',
+  }
+}

src/frontend/src/features/rooms/hooks/usePreviewTracks.ts

@@ -0,0 +1,173 @@
+import {
+  AudioCaptureOptions,
+  createLocalTracks,
+  CreateLocalTracksOptions,
+  LocalAudioTrack,
+  LocalTrack,
+  LocalVideoTrack,
+  Mutex,
+  Track,
+  VideoCaptureOptions,
+} from 'livekit-client'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+function roomOptionsStringifyReplacer(key: string, val: unknown) {
+  if (key === 'processor') {
+    return undefined
+  }
+  if (key === 'e2ee' && val) {
+    return 'e2ee-enabled'
+  }
+  return val
+}
+
+export function usePreviewTracks(
+  options: CreateLocalTracksOptions,
+  onError?: (err: Error) => void
+) {
+  const trackLock = useMemo(() => {
+    return new Mutex()
+  }, [])
+
+  const videoTrackLock = useMemo(() => {
+    return new Mutex()
+  }, [])
+
+  const audioTrackLock = useMemo(() => {
+    return new Mutex()
+  }, [])
+
+  const isInitiated = useRef(false)
+
+  const videoTrackRef = useRef<LocalVideoTrack | undefined>()
+  const audioTrackRef = useRef<LocalAudioTrack | undefined>()
+
+  const [videoTrack, setVideoTrack] = useState<LocalVideoTrack | undefined>()
+  const [audioTrack, setAudioTrack] = useState<LocalAudioTrack | undefined>()
+
+  const extractTracks = (tracks: LocalTrack[]) => {
+    const video = tracks.find(
+      (track): track is LocalVideoTrack => track.kind === Track.Kind.Video
+    )
+    const audio = tracks.find(
+      (track): track is LocalAudioTrack => track.kind === Track.Kind.Audio
+    )
+
+    return { video, audio }
+  }
+
+  useEffect(() => {
+    if (isInitiated.current) {
+      return
+    }
+    let needsCleanup = false
+    let localTracks: Array<LocalTrack> = []
+    trackLock.lock().then(async (unlock) => {
+      try {
+        if (options.audio || options.video) {
+          localTracks = await createLocalTracks(options)
+
+          if (needsCleanup) {
+            localTracks.forEach((tr) => tr.stop())
+          } else {
+            const { audio, video } = extractTracks(localTracks)
+            isInitiated.current = true
+            setVideoTrack(video)
+            videoTrackRef.current = video
+            setAudioTrack(audio)
+            audioTrackRef.current = audio
+          }
+        }
+      } catch (e: unknown) {
+        if (onError && e instanceof Error) {
+          onError(e)
+        } else {
+          console.error(e)
+        }
+      } finally {
+        unlock()
+      }
+    })
+
+    return () => {
+      if (isInitiated.current) {
+        return
+      }
+      needsCleanup = true
+      localTracks.forEach((track) => {
+        track.stop()
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(options, roomOptionsStringifyReplacer),
+    onError,
+    trackLock,
+  ])
+
+  const videoOptions = options?.video
+
+  useEffect(() => {
+    if (!isInitiated.current) {
+      return
+    }
+    videoTrackLock.lock().then(async (unlock) => {
+      try {
+        if (!videoOptions) return
+        await videoTrackRef.current?.restartTrack(
+          videoOptions as VideoCaptureOptions
+        )
+      } catch (e: unknown) {
+        if (onError && e instanceof Error) {
+          onError(e)
+        } else {
+          console.error(e)
+        }
+      } finally {
+        unlock()
+      }
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(videoOptions, roomOptionsStringifyReplacer),
+    onError,
+    videoTrackLock,
+  ])
+
+  const audioOptions = options?.audio
+
+  useEffect(() => {
+    if (!isInitiated.current) {
+      return
+    }
+    audioTrackLock.lock().then(async (unlock) => {
+      try {
+        if (!audioOptions) return
+        await audioTrackRef.current?.restartTrack(
+          audioOptions as AudioCaptureOptions
+        )
+      } catch (e: unknown) {
+        if (onError && e instanceof Error) {
+          onError(e)
+        } else {
+          console.error(e)
+        }
+      } finally {
+        unlock()
+      }
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(audioOptions, roomOptionsStringifyReplacer),
+    onError,
+    audioTrackLock,
+  ])
+
+  return {
+    videoTrack,
+    audioTrack,
+  }
+}

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

@@ -5,14 +5,7 @@ import {
   UseTrackToggleProps,
 } from '@livekit/components-react'
 import { Button, Menu, MenuList } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
+import { RiArrowUpSLine } from '@remixicon/react'
 import {
   LocalAudioTrack,
   LocalVideoTrack,
@@ -20,59 +13,19 @@ import {
   VideoCaptureOptions,
 } from 'livekit-client'
 
-import { Shortcut } from '@/features/shortcuts/types'
-
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
+import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { useEffect } from 'react'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../blur'
+import {
+  SelectToggleSource,
+  ToggleSource,
+} from '../../types/SelectToggleDevice'
+import { SELECT_TOGGLE_DEVICE_CONFIG } from '../../config/SelectToggleDevice'
 
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
-
-type SelectToggleDeviceProps<T extends ToggleSource> =
+export type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     track?: LocalAudioTrack | LocalVideoTrack | undefined
     initialDeviceId?: string
@@ -92,7 +45,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   menuVariant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
+  const config = SELECT_TOGGLE_DEVICE_CONFIG[props.source]
   if (!config) {
     throw new Error('Invalid source')
   }
@@ -178,7 +131,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
             square
             variant={trackProps.enabled ? variant : 'error2'}
           >
-            <RiArrowDownSLine />
+            <RiArrowUpSLine />
           </Button>
           <MenuList
             items={devices.map((d) => ({

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

@@ -3,7 +3,6 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { useMemo, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
-import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
@@ -13,6 +12,10 @@ import {
 } from '@livekit/components-react'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { SelectToggleDeviceConfig } from '../../types/SelectToggleDevice'
+import { css } from '@/styled-system/css'
+import { usePermissions } from '@/features/rooms/hooks/usePermissions'
+import { useModal } from '@/features/rooms/hooks/useModal'
 
 export type ToggleDeviceProps = {
   enabled: boolean
@@ -31,6 +34,7 @@ export const ToggleDevice = ({
 }: ToggleDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
+  const { open } = useModal('permissions')
   const { kind, shortcut, iconOn, iconOff, longPress } = config
 
   const [pushToTalk, setPushToTalk] = useState(false)
@@ -46,36 +50,78 @@ export const ToggleDevice = ({
     setPushToTalk(false)
   }
 
+  const permissions = usePermissions()
+
+  const isPermissionDeniedOrPrompted = useMemo(() => {
+    switch (config.kind) {
+      case 'audioinput':
+        return (
+          permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+        )
+      case 'videoinput':
+        return permissions.isCameraDenied || permissions.isCameraPrompted
+    }
+  }, [permissions, config.kind])
+
   useRegisterKeyboardShortcut({ shortcut, handler: toggle })
   useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })
 
+  const isEnabledAndPermitted = enabled && !isPermissionDeniedOrPrompted
+
   const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
+    const label = t(isEnabledAndPermitted ? 'disable' : 'enable', {
       keyPrefix: `join.${kind}`,
     })
     return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [enabled, kind, shortcut, t])
+  }, [isEnabledAndPermitted, kind, shortcut, t])
 
-  const Icon = enabled ? iconOn : iconOff
+  const Icon = isEnabledAndPermitted ? iconOn : iconOff
 
   const context = useMaybeRoomContext()
   if (kind === 'audioinput' && pushToTalk && context) {
     return <ActiveSpeakerWrapper />
   }
 
+  const errorVariant = variant == 'whiteCircle' ? 'errorCircle' : 'error2'
+
   return (
-    <ToggleButton
-      isSelected={!enabled}
-      variant={enabled ? variant : 'error2'}
-      shySelected
-      onPress={() => toggle()}
-      aria-label={toggleLabel}
-      tooltip={toggleLabel}
-      groupPosition="left"
-      {...toggleButtonProps}
+    <div
+      className={css({
+        position: 'relative',
+      })}
     >
-      <Icon />
-    </ToggleButton>
+      <ToggleButton
+        isSelected={!enabled}
+        variant={isEnabledAndPermitted ? variant : errorVariant}
+        shySelected
+        onPress={() => (isPermissionDeniedOrPrompted ? open() : toggle())}
+        aria-label={toggleLabel}
+        tooltip={toggleLabel}
+        groupPosition="left"
+        {...toggleButtonProps}
+      >
+        <Icon />
+      </ToggleButton>
+      {isPermissionDeniedOrPrompted && (
+        <span
+          className={css({
+            position: 'absolute',
+            height: '1.25rem',
+            width: '1.25rem',
+            backgroundColor: 'amber.400',
+            top: variant == 'whiteCircle' ? '-1px' : '-5px',
+            left: variant == 'whiteCircle' ? '-2px' : '-5px',
+            borderRadius: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            fontWeight: 'bold',
+          })}
+        >
+          !
+        </span>
+      )}
+    </div>
   )
 }
 

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -1,5 +1,5 @@
 import { LocalVideoTrack, Track } from 'livekit-client'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   BackgroundProcessorFactory,
@@ -8,16 +8,16 @@ import {
   BackgroundOptions,
 } from '../blur'
 import { css } from '@/styled-system/css'
-import { Text, P, ToggleButton, H } from '@/primitives'
+import { Text, P, ToggleButton, H, Button } from '@/primitives'
 import { styled } from '@/styled-system/jsx'
 import { BlurOn } from '@/components/icons/BlurOn'
 import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
 import { useTrackToggle } from '@livekit/components-react'
-import { Loader } from '@/primitives/Loader'
-import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
 import { RiProhibited2Line } from '@remixicon/react'
 import { FunnyEffects } from './FunnyEffects'
 import { useHasFunnyEffectsAccess } from '../../hooks/useHasFunnyEffectsAccess'
+import { usePermissions } from '@/features/rooms/hooks/usePermissions'
+import { useModal } from '@/features/rooms/hooks/useModal'
 
 enum BlurRadius {
   NONE = 0,
@@ -37,7 +37,7 @@ const Information = styled('div', {
 })
 
 export type EffectsConfigurationProps = {
-  videoTrack: LocalVideoTrack
+  videoTrack?: LocalVideoTrack
   onSubmit?: (processor?: BackgroundProcessorInterface) => void
   layout?: 'vertical' | 'horizontal'
 }
@@ -50,10 +50,20 @@ export const EffectsConfiguration = ({
   const videoRef = useRef<HTMLVideoElement>(null)
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
+
+  const { isCameraGranted } = usePermissions()
+  const { open } = useModal('permissions')
+
   const [processorPending, setProcessorPending] = useState(false)
-  const processorPendingReveal = useSyncAfterDelay(processorPending)
+
   const hasFunnyEffectsAccess = useHasFunnyEffectsAccess()
 
+  // Note: videoTrack.getProcessor() will return undefined during a transition
+  // but our selectedProcessor state maintains the intended value
+  const [selectedProcessor, setSelectedProcessor] = useState(
+    videoTrack?.getProcessor()
+  )
+
   useEffect(() => {
     const videoElement = videoRef.current
     if (!videoElement) return
@@ -63,12 +73,13 @@ export const EffectsConfiguration = ({
 
     return () => {
       if (!videoElement) return
-      videoTrack.detach(videoElement)
+      videoTrack?.detach(videoElement)
     }
   }, [videoTrack, videoTrack?.isMuted])
 
   const clearEffect = async () => {
-    await videoTrack.stopProcessor()
+    await videoTrack?.stopProcessor()
+    setSelectedProcessor(undefined)
     onSubmit?.(undefined)
   }
 
@@ -92,7 +103,6 @@ export const EffectsConfiguration = ({
       await toggle(true, {
         processor: newProcessorTmp,
       })
-      setTimeout(() => setProcessorPending(false))
       return
     }
 
@@ -100,9 +110,10 @@ export const EffectsConfiguration = ({
       await toggle(true)
     }
 
-    const processor = getProcessor()
+    const processor = videoTrack?.getProcessor() as BackgroundProcessorInterface
     try {
       if (isSelected(type, options)) {
+        setSelectedProcessor(undefined)
         // Stop processor.
         await clearEffect()
       } else if (!processor || processor.serialize().type !== type) {
@@ -118,28 +129,27 @@ export const EffectsConfiguration = ({
         if (!BackgroundProcessorFactory.hasModernApiSupport()) {
           await videoTrack.stopProcessor()
         }
+
         await videoTrack.setProcessor(newProcessor)
+        setSelectedProcessor(newProcessor)
         onSubmit?.(newProcessor)
       } else {
         // Update processor.
         processor?.update(options)
         // We want to trigger onSubmit when options changes so the parent component is aware of it.
         onSubmit?.(processor)
+        setSelectedProcessor(processor)
       }
     } catch (error) {
       console.error('Error applying effect:', error)
     } finally {
-      // Without setTimeout the DOM is not refreshing when updating the options.
-      setTimeout(() => setProcessorPending(false))
+      setProcessorPending(false)
     }
   }
 
-  const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundProcessorInterface
-  }
-
   const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
-    const processor = getProcessor()
+    if (!selectedProcessor) return false
+    const processor = selectedProcessor as BackgroundProcessorInterface
     const processorSerialized = processor?.serialize()
     return (
       !!processor &&
@@ -152,6 +162,11 @@ export const EffectsConfiguration = ({
     return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
   }
 
+  const isDisabled = useMemo(
+    () => processorPending || videoTrack?.isMuted || !isCameraGranted,
+    [processorPending, videoTrack, isCameraGranted]
+  )
+
   return (
     <div
       className={css(
@@ -165,7 +180,7 @@ export const EffectsConfiguration = ({
               display: 'flex',
               gap: '1.5rem',
               flexDirection: 'column',
-              md: {
+              lg: {
                 flexDirection: 'row',
                 overflow: 'hidden',
               },
@@ -175,31 +190,65 @@ export const EffectsConfiguration = ({
       <div
         className={css({
           width: '100%',
-          aspectRatio: 16 / 9,
           position: 'relative',
         })}
       >
         {videoTrack && !videoTrack.isMuted ? (
           <video
             ref={videoRef}
-            width="100%"
             muted
+            className={css(
+              layout === 'vertical'
+                ? {
+                    height: '175px',
+                    width: '100%',
+                  }
+                : {
+                    minHeight: '175px',
+                    maxWidth: '600px',
+                    width: '100%',
+                    objectFit: 'cover',
+                    sm: {
+                      aspectRatio: 16 / 9,
+                    },
+                    lg: {
+                      maxWidth: '100%',
+                    },
+                  }
+            )}
             style={{
               transform: 'rotateY(180deg)',
-              [layout === 'vertical' ? 'height' : 'minHeight']: '175px',
               borderRadius: '8px',
             }}
           />
         ) : (
           <div
             style={{
-              width: '100%',
-              height: '100%',
               display: 'flex',
               backgroundColor: 'black',
               justifyContent: 'center',
               flexDirection: 'column',
+              borderRadius: '8px',
             }}
+            className={css(
+              layout === 'vertical'
+                ? {
+                    height: '175px',
+                    width: '100%',
+                  }
+                : {
+                    minHeight: '175px',
+                    maxWidth: '600px',
+                    width: '100%',
+                    objectFit: 'cover',
+                    sm: {
+                      aspectRatio: 16 / 9,
+                    },
+                    lg: {
+                      maxWidth: '100%',
+                    },
+                  }
+            )}
           >
             <P
               style={{
@@ -209,19 +258,23 @@ export const EffectsConfiguration = ({
                 marginBottom: 0,
               }}
             >
-              {t('activateCamera')}
+              {t(isCameraGranted ? 'activateCamera' : 'permissionsCamera')}
             </P>
-          </div>
-        )}
-        {processorPendingReveal && (
-          <div
-            className={css({
-              position: 'absolute',
-              right: '8px',
-              bottom: '8px',
-            })}
-          >
-            <Loader />
+            <Button
+              size="sm"
+              variant="tertiary"
+              onPress={async () => (isCameraGranted ? await toggle() : open())}
+              aria-label={t(
+                isCameraGranted ? 'activateButton' : 'permissionsButton'
+              )}
+              className={css({
+                width: 'fit-content',
+                marginX: 'auto',
+                marginTop: '1rem',
+              })}
+            >
+              {t(isCameraGranted ? 'activateButton' : 'permissionsButton')}
+            </Button>
           </div>
         )}
       </div>
@@ -242,7 +295,7 @@ export const EffectsConfiguration = ({
         {hasFunnyEffectsAccess && (
           <FunnyEffects
             videoTrack={videoTrack}
-            isPending={processorPendingReveal}
+            isPending={processorPending}
             onPending={setProcessorPending}
           />
         )}
@@ -270,8 +323,8 @@ export const EffectsConfiguration = ({
                   onPress={async () => {
                     await clearEffect()
                   }}
-                  isSelected={!getProcessor()}
-                  isDisabled={processorPendingReveal}
+                  isSelected={!selectedProcessor}
+                  isDisabled={isDisabled}
                 >
                   <RiProhibited2Line />
                 </ToggleButton>
@@ -283,7 +336,7 @@ export const EffectsConfiguration = ({
                   tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.LIGHT,
                   })}
-                  isDisabled={processorPendingReveal}
+                  isDisabled={isDisabled}
                   onChange={async () =>
                     await toggleEffect(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
@@ -304,7 +357,7 @@ export const EffectsConfiguration = ({
                   tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.NORMAL,
                   })}
-                  isDisabled={processorPendingReveal}
+                  isDisabled={isDisabled}
                   onChange={async () =>
                     await toggleEffect(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
@@ -352,7 +405,7 @@ export const EffectsConfiguration = ({
                         tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
                           imagePath,
                         })}
-                        isDisabled={processorPendingReveal}
+                        isDisabled={isDisabled}
                         onChange={async () =>
                           await toggleEffect(ProcessorType.VIRTUAL, {
                             imagePath,

src/frontend/src/features/rooms/livekit/components/effects/FunnyEffects.tsx

@@ -7,7 +7,7 @@ import { FaceLandmarksProcessor } from '../blur/FaceLandmarksProcessor'
 import { LocalVideoTrack } from 'livekit-client'
 
 export type FunnyEffectsProps = {
-  videoTrack: LocalVideoTrack
+  videoTrack?: LocalVideoTrack
   isPending?: boolean
   onPending: (value: boolean) => void
 }
@@ -47,12 +47,12 @@ export const FunnyEffects = ({
 
     try {
       if (!newOptions.showGlasses && !newOptions.showFrench) {
-        await videoTrack.stopProcessor()
+        await videoTrack?.stopProcessor()
       } else if (options.showGlasses || options.showFrench) {
         await processor?.update(newOptions)
       } else {
         const newProcessor = new FaceLandmarksProcessor(newOptions)
-        await videoTrack.setProcessor(newProcessor)
+        await videoTrack?.setProcessor(newProcessor)
       }
     } catch (e) {
       console.error('could not update processor', e)

src/frontend/src/features/rooms/livekit/config/SelectToggleDevice.ts

@@ -0,0 +1,33 @@
+import { Track } from 'livekit-client'
+import { SelectToggleDeviceConfigMap } from '../types/SelectToggleDevice'
+
+import {
+  RiMicLine,
+  RiMicOffLine,
+  RiVideoOffLine,
+  RiVideoOnLine,
+} from '@remixicon/react'
+
+export const SELECT_TOGGLE_DEVICE_CONFIG: SelectToggleDeviceConfigMap = {
+  [Track.Source.Microphone]: {
+    kind: 'audioinput',
+    iconOn: RiMicLine,
+    iconOff: RiMicOffLine,
+    shortcut: {
+      key: 'd',
+      ctrlKey: true,
+    },
+    longPress: {
+      key: 'Space',
+    },
+  },
+  [Track.Source.Camera]: {
+    kind: 'videoinput',
+    iconOn: RiVideoOnLine,
+    iconOff: RiVideoOffLine,
+    shortcut: {
+      key: 'e',
+      ctrlKey: true,
+    },
+  },
+}

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

@@ -4,7 +4,7 @@ import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalytics
 import { isMobileBrowser } from '@livekit/components-core'
 
 export const useNoiseReductionAvailable = () => {
-  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.faceLandmarks)
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.noiseReduction)
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
 
   const isMobile = isMobileBrowser()

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

@@ -16,6 +16,9 @@ export function usePersistentUserChoices() {
     saveAudioInputDeviceId: (deviceId: string) => {
       userChoicesStore.audioDeviceId = deviceId
     },
+    saveAudioOutputDeviceId: (deviceId: string) => {
+      userChoicesStore.audioOutputDeviceId = deviceId
+    },
     saveVideoInputDeviceId: (deviceId: string) => {
       userChoicesStore.videoDeviceId = deviceId
     },

src/frontend/src/features/rooms/livekit/types/SelectToggleDevice.ts

@@ -0,0 +1,22 @@
+import { Track } from 'livekit-client'
+import { RemixiconComponentType } from '@remixicon/react'
+import { Shortcut } from '@/features/shortcuts/types'
+
+export type ToggleSource = Exclude<
+  Track.Source,
+  Track.Source.ScreenShareAudio | Track.Source.Unknown
+>
+
+export type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
+
+export type SelectToggleDeviceConfig = {
+  kind: MediaDeviceKind
+  iconOn: RemixiconComponentType
+  iconOff: RemixiconComponentType
+  shortcut?: Shortcut
+  longPress?: Shortcut
+}
+
+export type SelectToggleDeviceConfigMap = {
+  [key in SelectToggleSource]: SelectToggleDeviceConfig
+}

src/frontend/src/features/rooms/routes/Room.tsx

@@ -1,21 +1,27 @@
-import { useEffect, useState } from 'react'
-import { usePersistentUserChoices } from '@livekit/components-react'
+import { ReactNode, useEffect, useState } from 'react'
 import { useLocation, useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
+import { PermissionErrorModal } from '../components/PermissionErrorModal'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 import {
   isRoomValid,
   normalizeRoomId,
 } from '@/features/rooms/utils/isRoomValid'
-import { LocalUserChoices } from '@/stores/userChoices'
+import { usePermissionsSync } from '@/features/rooms/hooks/usePermissions'
+
+const BaseRoom = ({ children }: { children: ReactNode }) => (
+  <UserAware>
+    <PermissionErrorModal />
+    {children}
+  </UserAware>
+)
 
 export const Room = () => {
   const { isLoggedIn } = useUser()
-  const { userChoices: existingUserChoices } = usePersistentUserChoices()
-  const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+  const [hasSubmittedEntry, setHasSubmittedEntry] = useState(false)
 
   const { roomId } = useParams()
   const [location, setLocation] = useLocation()
@@ -24,6 +30,7 @@ export const Room = () => {
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
   useKeyboardShortcuts()
+  usePermissionsSync()
 
   const clearRouterState = () => {
     if (window?.history?.state) {
@@ -48,25 +55,21 @@ export const Room = () => {
     return <ErrorScreen />
   }
 
-  if (!userConfig && !skipJoinScreen) {
+  if (!hasSubmittedEntry && !skipJoinScreen) {
     return (
-      <UserAware>
-        <Join onSubmit={setUserConfig} roomId={roomId} />
-      </UserAware>
+      <BaseRoom>
+        <Join enterRoom={() => setHasSubmittedEntry(true)} roomId={roomId} />
+      </BaseRoom>
     )
   }
 
   return (
-    <UserAware>
+    <BaseRoom>
       <Conference
         initialRoomData={initialRoomData}
         roomId={roomId}
         mode={mode}
-        userConfig={{
-          ...existingUserChoices,
-          ...userConfig,
-        }}
       />
-    </UserAware>
+    </BaseRoom>
   )
 }

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -10,6 +10,10 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
   const { user, isLoggedIn, logout } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
   return (
     <Dialog title={t('dialog.heading')} {...props}>
       <H lvl={2}>{t('account.heading')}</H>
@@ -18,7 +22,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
           <P>
             <Trans
               i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name ?? user?.email }}
+              values={{ user: userDisplay }}
               components={[<Badge />]}
             />
           </P>

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -14,8 +14,8 @@ import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
 import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useRef } from 'react'
+import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -51,8 +51,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   const { t } = useTranslation('settings')
 
   const dialogEl = useRef<HTMLDivElement>(null)
-  const { width } = useSize(dialogEl)
-  const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel
+  const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel
 
   return (
     <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -18,6 +18,10 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
   const room = useRoomContext()
   const { user, isLoggedIn, logout } = useUser()
   const [name, setName] = useState(room?.localParticipant.name ?? '')
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
 
   const handleOnSubmit = () => {
     if (room) room.localParticipant.setName(name)
@@ -37,7 +41,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
         value={name}
         onChange={setName}
         validate={(value) => {
-          return !value ? <p>{'Votre Nom ne peut pas être vide'}</p> : null
+          return !value ? <p>{t('account.nameError')}</p> : null
         }}
       />
       <H lvl={2}>{t('account.authentication')}</H>
@@ -46,7 +50,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
           <P>
             <Trans
               i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name || user?.email }}
+              values={{ user: userDisplay }}
               components={[<Badge />]}
             />
           </P>

src/frontend/src/features/settings/components/tabs/AudioTab.tsx

@@ -1,4 +1,4 @@
-import { DialogProps, Field, H, Switch } from '@/primitives'
+import { DialogProps, Field, H, Switch, Text } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -95,6 +95,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
     userChoices: { noiseReductionEnabled },
     saveAudioInputDeviceId,
     saveNoiseReductionEnabled,
+    saveAudioOutputDeviceId,
   } = usePersistentUserChoices()
 
   const isSpeaking = useIsSpeaking(localParticipant)
@@ -174,7 +175,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
       </RowWrapper>
       {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
         To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
-      {!isSafari() && (
+      {!isSafari() ? (
         <RowWrapper heading={t('audio.speakers.heading')}>
           <Field
             type="select"
@@ -183,9 +184,10 @@ export const AudioTab = ({ id }: AudioTabProps) => {
             defaultSelectedKey={
               activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
             }
-            onSelectionChange={async (key) =>
+            onSelectionChange={async (key) => {
               setActiveMediaDeviceOut(key as string)
-            }
+              saveAudioOutputDeviceId(key as string)
+            }}
             {...disabledProps}
             style={{
               minWidth: 0,
@@ -193,6 +195,13 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           />
           <SoundTester />
         </RowWrapper>
+      ) : (
+        <RowWrapper heading={t('audio.speakers.heading')}>
+          <Text variant="warning" margin="md">
+            {t('audio.speakers.safariWarning')}
+          </Text>
+          <div />
+        </RowWrapper>
       )}
       {noiseReductionAvailable && (
         <RowWrapper heading={t('audio.noiseReduction.heading')} beta>

src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts

@@ -12,6 +12,7 @@ export const useKeyboardShortcuts = () => {
     // Issues might occur. First draft.
     const onKeyDown = (e: KeyboardEvent) => {
       const { key, metaKey, ctrlKey } = e
+      if (!key) return
       const shortcutKey = formatShortcutKey({
         key,
         ctrlKey: ctrlKey || (isMacintosh() && metaKey),

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

@@ -7,7 +7,7 @@ export const initializeSupportSession = (user: ApiUser) => {
   if (!Crisp.isCrispInjected()) return
   const { id, email } = user
   Crisp.setTokenId(`meet-${id}`)
-  Crisp.user.setEmail(email)
+  if (email) Crisp.user.setEmail(email)
 }
 
 export const terminateSupportSession = () => {

src/frontend/src/hooks/useSyncAfterDelay.ts

@@ -1,30 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-/**
- * If value stays truthy for more than waitFor ms, syncValue takes the value of value.
- * @param value
- * @param waitFor
- * @returns
- */
-export function useSyncAfterDelay<T>(value: T, waitFor: number = 300) {
-  const valueRef = useRef(value)
-  const timeoutRef = useRef<NodeJS.Timeout>()
-  const [syncValue, setSyncValue] = useState<T>()
-
-  useEffect(() => {
-    valueRef.current = value
-    if (value) {
-      if (!timeoutRef.current) {
-        timeoutRef.current = setTimeout(() => {
-          setSyncValue(valueRef.current)
-          timeoutRef.current = undefined
-        }, waitFor)
-      }
-    } else {
-      setSyncValue(value)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
-
-  return syncValue
-}

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

@@ -8,6 +8,10 @@
     "back": "Dem Meeting erneut beitreten"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Lädt…",
+      "permissionNeeded": "Genehmigung erforderlich"
+    },
     "videoinput": {
       "choose": "Kamera auswählen",
       "disable": "Kamera deaktivieren",
@@ -21,6 +25,9 @@
       "enable": "Mikrofon aktivieren",
       "label": "Mikrofon"
     },
+    "audiooutput": {
+      "choose": "Lautsprecher auswählen"
+    },
     "effects": {
       "description": "Effekte anwenden",
       "title": "Effekte",
@@ -36,8 +43,14 @@
     "errors": {
       "usernameEmpty": "Ihr Name darf nicht leer sein"
     },
-    "cameraDisabled": "Kamera ist deaktiviert.",
-    "cameraStarting": "Kamera wird gestartet.",
+    "cameraDisabled": "Die Kamera ist deaktiviert",
+    "cameraStarting": "Die Kamera wird gestartet…",
+    "cameraNotGranted": "Möchten Sie, dass andere Sie während der Besprechung sehen können?",
+    "cameraAndMicNotGranted": "Möchten Sie, dass andere Sie während der Besprechung sehen und hören können?",
+    "videoPreview": {
+      "enabled": "Videovorschau aktiviert",
+      "disabled": "Videovorschau deaktiviert"
+    },
     "waiting": {
       "title": "Beitrittsanfrage wird gesendet...",
       "body": "Sie können diesem Anruf beitreten, sobald jemand Sie autorisiert"
@@ -51,6 +64,22 @@
       "body": "Niemand hat auf Ihre Anfrage reagiert"
     }
   },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} hat keine Berechtigung, Ihre Kamera zu verwenden",
+      "microphone": "{{app_title}} hat keine Berechtigung, Ihr Mikrofon zu verwenden",
+      "cameraAndMicrophone": "{{app_title}} hat keine Berechtigung, Ihr Mikrofon und Ihre Kamera zu verwenden",
+      "default": "{{app_title}} hat keine Berechtigung für bestimmte Zugriffe"
+    },
+    "body": {
+      "openMenu": "Klicken Sie auf das Einstellungssymbol {{icon_placeholder}} in der Adressleiste Ihres Browsers",
+      "details": {
+        "camera":  "Zugriff auf die Kamera erlauben",
+        "microphone": "Zugriff auf das Mikrofon erlauben",
+        "cameraAndMicrophone": "Zugriff auf Kamera und Mikrofon erlauben"
+      }
+    }
+  },
   "leaveRoomPrompt": "Dadurch verlassen Sie das Meeting.",
   "shareDialog": {
     "copy": "Meeting-Link kopieren",
@@ -154,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Ihre Kamera ist deaktiviert. Wählen Sie eine Option, um sie zu aktivieren.",
+    "activateCamera": "Kamera ist aus.",
+    "activateButton": "Kamera einschalten",
+    "permissionsCamera": "Bitte erlauben Sie der App den Zugriff auf Ihre Kamera, um fortzufahren.",
+    "permissionsButton": "Kamerazugriff erlauben",
     "notAvailable": "Videoeffekte werden bald in Ihrem Browser verfügbar sein. Wir arbeiten daran! In der Zwischenzeit können Sie Google Chrome für die beste Leistung oder Firefox verwenden :(",
     "heading": "Unschärfe",
     "clear": "Effekt deaktivieren",

src/frontend/src/locales/de/settings.json

@@ -4,7 +4,8 @@
     "heading": "Konto",
     "youAreNotLoggedIn": "Sie sind nicht angemeldet.",
     "nameLabel": "Ihr Name",
-    "authentication": "Authentifizierung"
+    "authentication": "Authentifizierung",
+    "nameError": "Ihr Name darf nicht leer sein"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Lautsprecher",
       "label": "Wählen Sie Ihre Audioausgabe",
       "test": "Testen",
-      "ongoingTest": "Soundtest läuft…"
+      "ongoingTest": "Soundtest läuft…",
+      "safariWarning": "Die Lautsprecherauswahl ist auf Safari aufgrund von Browser-Einschränkungen noch nicht verfügbar."
     },
     "permissionsRequired": "Berechtigungen erforderlich"
   },

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

@@ -8,6 +8,10 @@
     "back": "Rejoin the meeting"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Loading…",
+      "permissionNeeded": "Permission needed"
+    },
     "videoinput": {
       "choose": "Select camera",
       "disable": "Disable camera",
@@ -21,6 +25,9 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
+    "audiooutput": {
+      "choose": "Select speakers"
+    },
     "effects": {
       "description": "Apply effects",
       "title": "Effects",
@@ -36,8 +43,14 @@
     "errors": {
       "usernameEmpty": "Your name cannot be empty"
     },
-    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting.",
+    "cameraDisabled": "The camera is disabled",
+    "cameraStarting": "The camera is starting…",
+    "cameraNotGranted": "Do you want others to be able to see you during the meeting?",
+    "cameraAndMicNotGranted": "Do you want others to be able to see and hear you during the meeting?",
+    "videoPreview": {
+      "enabled": "Video preview enabled",
+      "disabled": "Video preview disabled"
+    },
     "waiting": {
       "title": "Requesting to join...",
       "body": "You will be able to join this call when someone authorizes you"
@@ -51,6 +64,22 @@
       "body": "No one responded to your request"
     }
   },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} is not allowed to use your camera",
+      "microphone": "{{app_title}} is not allowed to use your microphone",
+      "cameraAndMicrophone": "{{app_title}} is not allowed to use your microphone or camera",
+      "default": "{{app_title}} is not allowed to use certain permissions"
+    },
+    "body": {
+      "openMenu": "Click the settings icon {{icon_placeholder}} in your browser's address bar",
+      "details": {
+        "camera":  "Allow access to the camera",
+        "microphone": "Allow access to the microphone",
+        "cameraAndMicrophone": "Allow access to the camera and microphone"
+      }
+    }
+  },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
     "copy": "Copy the meeting link",
@@ -154,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
+    "activateCamera": "Your camera is disabled.",
+    "activateButton": "Turn on camera",
+    "permissionsCamera": "Please allow the app to access your camera to continue.",
+    "permissionsButton": "Allow camera access",
     "notAvailable": "Video effects will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
     "heading": "Blur",
     "clear": "Disable effect",

src/frontend/src/locales/en/settings.json

@@ -4,7 +4,8 @@
     "heading": "Account",
     "youAreNotLoggedIn": "You are not logged in.",
     "nameLabel": "Your Name",
-    "authentication": "Authentication"
+    "authentication": "Authentication",
+    "nameError": "Your name cannot be empty"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Speakers",
       "label": "Select your audio output",
       "test": "Test",
-      "ongoingTest": "Testing sound…"
+      "ongoingTest": "Testing sound…",
+      "safariWarning": "Speaker selection is not available yet on Safari due to browser limitations."
     },
     "permissionsRequired": "Permissions required"
   },

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

@@ -8,6 +8,10 @@
     "back": "Réintégrer la réunion"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Chargement…",
+      "permissionNeeded": "Autorisations nécessaires"
+    },
     "videoinput": {
       "choose": "Choisir la webcam",
       "disable": "Désactiver la webcam",
@@ -21,6 +25,9 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
+    "audiooutput": {
+      "choose": "Choisir le haut parleur"
+    },
     "heading": "Rejoindre la réunion ?",
     "effects": {
       "description": "Effets d'arrière plan",
@@ -36,8 +43,14 @@
     "errors": {
       "usernameEmpty": "Votre nom ne peut pas être vide"
     },
-    "cameraDisabled": "La caméra est désactivée.",
-    "cameraStarting": "La caméra va démarrer.",
+    "cameraDisabled": "La caméra est désactivée",
+    "cameraStarting": "La caméra va démarrer…",
+    "cameraNotGranted": "Souhaitez-vous que les autres puissent vous voir pendant la réunion ?",
+    "cameraAndMicNotGranted": "Souhaitez-vous que les autres puissent vous voir et vous entendre pendant la réunion ?",
+    "videoPreview": {
+      "enabled": "Apercu vidéo activé",
+      "disabled": "Apercu vidéo désactivé"
+    },
     "waiting": {
       "title": "Demande de participation…",
       "body": "Vous pourrez participer à cet appel lorsque quelqu'un vous y autorisera"
@@ -51,6 +64,22 @@
       "body": "Personne n'a répondu à votre demande de participation à l'appel"
     }
   },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} n'est pas autorisé à utiliser votre caméra",
+      "microphone": "{{app_title}} n'est pas autorisé à utiliser votre micro",
+      "cameraAndMicrophone": "{{app_title}} n'est pas autorisé à utiliser votre micro ni votre caméra",
+      "default": "{{app_title}} n'est pas autorisé à utiliser certaines permissions"
+    },
+    "body": {
+      "openMenu": "Cliquez sur l'icône des paramètres {{icon_placeholder}} dans la barre d'adresse de votre navigateur",
+      "details": {
+        "camera":  "Autorisez l'accès à la caméra",
+        "microphone": "Autorisez l'accès au microphone",
+        "cameraAndMicrophone": "Autorisez l'accès à la caméra et au microphone"
+      }
+    }
+  },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
     "copy": "Copier le lien de la réunion",
@@ -154,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Votre caméra est désactivée. Choisissez une option pour l'activer.",
+    "activateCamera": "Caméra désactivée.",
+    "activateButton": "Activer la caméra",
+    "permissionsCamera": "Veuillez autoriser l'application à accéder à votre caméra pour continuer.",
+    "permissionsButton": "Autoriser l'accès à la caméra",
     "notAvailable": "Les effets vidéo seront bientôt disponibles sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour de meilleures performances ou Firefox :(",
     "heading": "Flou",
     "clear": "Désactiver l'effect",

src/frontend/src/locales/fr/settings.json

@@ -4,7 +4,8 @@
     "heading": "Compte",
     "youAreNotLoggedIn": "Vous n'êtes pas connecté.",
     "nameLabel": "Votre Nom",
-    "authentication": "Authentification"
+    "authentication": "Authentification",
+    "nameError": "Votre Nom ne peut pas être vide"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Haut-parleurs",
       "label": "Sélectionner votre sortie audio",
       "test": "Tester",
-      "ongoingTest": "Test du son…"
+      "ongoingTest": "Test du son…",
+      "safariWarning": "La sélection du haut-parleur n'est pas encore disponible sur Safari en raison de limitations du navigateur."
     },
     "permissionsRequired": "Autorisations nécessaires"
   },

src/frontend/src/locales/nl/rooms.json

@@ -8,6 +8,10 @@
     "back": "Sluit weer bij de vergadering aan"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Laden…",
+      "permissionNeeded": "Toestemming vereist"
+    },
     "videoinput": {
       "choose": "Selecteer camera",
       "disable": "Camera uitschakelen",
@@ -21,6 +25,9 @@
       "enable": "Microfoon dempen opheffen",
       "label": "Microfoon"
     },
+    "audiooutput": {
+      "choose": "Selecteer luidsprekers"
+    },
     "effects": {
       "description": "Pas effecten toe",
       "title": "Effecten",
@@ -36,8 +43,14 @@
     "errors": {
       "usernameEmpty": "Uw naam kan niet leeg zijn"
     },
-    "cameraDisabled": "Camera is uitgeschakeld.",
-    "cameraStarting": "Camera wordt ingeschakeld.",
+    "cameraDisabled": "De camera is uitgeschakeld",
+    "cameraStarting": "De camera wordt gestart…",
+    "cameraNotGranted": "Wil je dat anderen je kunnen zien tijdens de vergadering?",
+    "cameraAndMicNotGranted": "Wil je dat anderen je kunnen zien en horen tijdens de vergadering?",
+    "videoPreview": {
+      "enabled": "Videovoorbeeld ingeschakeld",
+      "disabled": "Videovoorbeeld uitgeschakeld"
+    },
     "waiting": {
       "title": "Verzoek tot deelname...",
       "body": "U kunt deelnemen aan dit gesprek wanneer iemand u toestemming geeft"
@@ -51,6 +64,22 @@
       "body": "Niemand heeft gereageerd op uw verzoek om deel te nemen aan het gesprek"
     }
   },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} heeft geen toestemming om je camera te gebruiken",
+      "microphone": "{{app_title}} heeft geen toestemming om je microfoon te gebruiken",
+      "cameraAndMicrophone": "{{app_title}} heeft geen toestemming om je microfoon en camera te gebruiken",
+      "default": "{{app_title}} heeft geen toestemming voor bepaalde rechten"
+    },
+    "body": {
+      "openMenu": "Klik op het instellingenpictogram {{icon_placeholder}} in de adresbalk van je browser",
+      "details": {
+        "camera":  "Sta toegang tot de camera toe",
+        "microphone": "Sta toegang tot de microfoon toe",
+        "cameraAndMicrophone": "Sta toegang tot de camera en microfoon toe"
+      }
+    }
+  },
   "leaveRoomPrompt": "Dat zal u de vergadering doen verlaten.",
   "shareDialog": {
     "copy": "Kopieer de vergaderlink",
@@ -154,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Uw camera is uitgeschakeld. Kies een optie om deze in te schakelen.",
+    "activateCamera": "Camera is uit.",
+    "activateButton": "Camera inschakelen",
+    "permissionsCamera": "Sta de app toe om toegang te krijgen tot je camera om door te gaan.",
+    "permissionsButton": "Toegang tot camera toestaan",
     "notAvailable": "Video-effecten zijn binnenkort beschikbaar in uw browser. We werken eraan! In de tussentijd kunt u Google Chrome gebruiken voor de beste prestaties of Firefox :(",
     "heading": "Vervaging",
     "clear": "Effect uitschakelen",

src/frontend/src/locales/nl/settings.json

@@ -4,7 +4,8 @@
     "heading": "Account",
     "youAreNotLoggedIn": "U bent niet ingelogd.",
     "nameLabel": "Uw naam",
-    "authentication": "Authenticatie"
+    "authentication": "Authenticatie",
+    "nameError": "Uw naam mag niet leeg zijn"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Luidsprekers",
       "label": "Selecteer uw audio-uitvoer",
       "test": "Test",
-      "ongoingTest": "Testgeluid ..."
+      "ongoingTest": "Testgeluid ...",
+      "safariWarning": "Luidsprekerselectie is nog niet beschikbaar op Safari vanwege browserbeperkingen."
     },
     "permissionsRequired": "Machtigingen vereist"
   },

src/frontend/src/primitives/Select.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react'
 import { styled } from '@/styled-system/jsx'
-import { RiArrowDropDownLine } from '@remixicon/react'
+import { RemixiconComponentType, RiArrowDropDownLine } from '@remixicon/react'
 import {
   Button,
   ListBox,
@@ -12,12 +12,14 @@ import {
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { css } from '@/styled-system/css'
 
 const StyledButton = styled(Button, {
   base: {
     width: 'full',
     display: 'flex',
     justifyContent: 'space-between',
+    alignItems: 'center',
     paddingY: 0.125,
     paddingX: 0.25,
     border: '1px solid',
@@ -53,22 +55,40 @@ const StyledSelectValue = styled(SelectValue, {
   },
 })
 
+const StyledIcon = styled('div', {
+  base: {
+    marginRight: '0.35rem',
+    flexShrink: 0,
+  },
+})
+
 export const Select = <T extends string | number>({
   label,
+  iconComponent,
   items,
   errors,
   ...props
 }: Omit<SelectProps<object>, 'items' | 'label' | 'errors'> & {
+  iconComponent?: RemixiconComponentType
   label: ReactNode
   items: Array<{ value: T; label: ReactNode }>
   errors?: ReactNode
 }) => {
+  const IconComponent = iconComponent
   return (
     <RACSelect {...props}>
       {label}
       <StyledButton>
+        {!!IconComponent && (
+          <StyledIcon>
+            <IconComponent size={18} />
+          </StyledIcon>
+        )}
         <StyledSelectValue />
-        <RiArrowDropDownLine aria-hidden="true" />
+        <RiArrowDropDownLine
+          aria-hidden="true"
+          className={css({ flexShrink: 0 })}
+        />
       </StyledButton>
       <StyledPopover>
         <Box size="sm" type="popover" variant="control">

src/frontend/src/primitives/Text.tsx

@@ -53,6 +53,9 @@ export const text = cva({
       note: {
         color: 'default.subtle-text',
       },
+      warning: {
+        color: 'danger.subtle-text',
+      },
       smNote: {
         color: 'default.subtle-text',
         textStyle: 'sm',

src/frontend/src/primitives/buttonRecipe.ts

@@ -228,6 +228,20 @@ export const buttonRecipe = cva({
           color: 'error.200',
         },
       },
+      errorCircle: {
+        width: '56px',
+        height: '56px',
+        borderRadius: '100%',
+        backgroundColor: 'error.500',
+        color: 'white',
+        '&[data-hovered]': {
+          backgroundColor: 'error.600',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'error.700',
+          color: 'error.200',
+        },
+      },
       error2: {
         backgroundColor: 'error.200',
         color: 'error.900',

src/frontend/src/stores/modals.ts

@@ -0,0 +1,9 @@
+import { proxy } from 'valtio'
+
+export type ModalsState = {
+  permissions: boolean
+}
+
+export const modalsStore = proxy<ModalsState>({
+  permissions: false,
+})

src/frontend/src/stores/permissions.ts

@@ -0,0 +1,13 @@
+import { proxy } from 'valtio'
+
+type PermissionState = undefined | 'granted' | 'prompt' | 'denied'
+
+type State = {
+  cameraPermission: PermissionState
+  microphonePermission: PermissionState
+}
+
+export const permissionStore = proxy<State>({
+  cameraPermission: undefined,
+  microphonePermission: undefined,
+})

src/frontend/src/stores/userChoices.ts

@@ -9,11 +9,13 @@ import {
 export type LocalUserChoices = LocalUserChoicesLK & {
   processorSerialized?: ProcessorSerialized
   noiseReductionEnabled?: boolean
+  audioOutputDeviceId?: string
 }
 
 function getUserChoicesState(): LocalUserChoices {
   return {
     noiseReductionEnabled: false,
+    audioOutputDeviceId: 'default',
     ...loadUserChoices(),
   }
 }

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -52,6 +52,7 @@ backend:
     {{- end }}
     {{- end }}
     LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
+    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND: True
     ALLOW_UNREGISTERED_ROOMS: False
     FRONTEND_SILENCE_LIVEKIT_DEBUG: False
     FRONTEND_SUPPORT: "{'id': '58ea6697-8eba-4492-bc59-ad6562585041', 'help_article_transcript': 'https://lasuite.crisp.help/fr/article/visio-transcript-1sjq43x', 'help_article_recording': 'https://lasuite.crisp.help/fr/article/visio-enregistrement-wgc8o0', 'help_article_more_tools': 'https://lasuite.crisp.help/fr/article/visio-tools-bvxj23'}"

src/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.29",
+  "version": "0.1.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "0.1.29",
+      "version": "0.1.33",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.5.4",

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.29",
+  "version": "0.1.33",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {

src/sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sdk",
-  "version": "0.1.29",
+  "version": "0.1.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "0.1.29",
+      "version": "0.1.33",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "0.1.29",
+  "version": "0.1.33",
   "author": "",
   "license": "ISC",
   "description": "",

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "0.1.29"
+version = "0.1.33"
 dependencies = [
     "fastapi[standard]>=0.105.0",
     "uvicorn>=0.24.0",

src/summary/summary/core/analytics.py

@@ -107,12 +107,13 @@ class MetadataManager:
             "retries": 0,
         }
 
-        _required_args_count = 4
+        _required_args_count = 7
         if len(task_args) != _required_args_count:
             logger.error("Invalid number of arguments.")
             return
 
-        filename, email, _, received_at = task_args
+        filename, email, _, received_at, *_ = task_args
+
         initial_metadata = {
             **initial_metadata,
             "filename": filename,

src/summary/summary/core/celery_config.py

@@ -1,8 +1,9 @@
+"""Celery Config."""
 
 # https://github.com/danihodovic/celery-exporter
 # Enable task events for Prometheus monitoring via celery-exporter.
 
-# worker_send_task_events: Sends task lifecycle events (e.g., started, succeeded, failed),
+# worker_send_task_events: Sends task lifecycle events (e.g., started, succeeded),
 # allowing the exporter to track task execution metrics and durations.
 worker_send_task_events = True
 

src/summary/summary/core/celery_worker.py

@@ -37,7 +37,7 @@ celery = Celery(
     broker_connection_retry_on_startup=True,
 )
 
-celery.config_from_object('summary.core.celery_config')
+celery.config_from_object("summary.core.celery_config")
 
 if settings.sentry_dsn and settings.sentry_is_enabled: