🚨(frontend) remove redundant undefined type or optional specifier

Fix TypeScript warning by removing either 'undefined' type annotation or '?' optional specifier where both were redundantly specified.
🚨(frontend) fix unnecessary destructuring rename in devices assignment
2025-08-11 18:48:27 +02:00 · 2025-08-11 18:48:27 +02:00 · 2025-08-11 18:48:27 +02:00 · 2025-08-11 18:48:27 +02:00 · 2025-08-11 18:48:27 +02:00 · 2025-08-11 18:44:58 +02:00
21 changed files with 1342 additions and 215 deletions
@@ -17,6 +17,7 @@
        "@tanstack/react-query": "5.81.5",
        "@timephy/rnnoise-wasm": "1.0.0",
        "crisp-sdk-web": "1.0.25",
+        "derive-valtio": "0.2.0",
        "hoofd": "1.7.3",
        "humanize-duration": "3.33.0",
        "i18next": "25.3.1",
@@ -5294,6 +5295,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/derive-valtio": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/derive-valtio/-/derive-valtio-0.2.0.tgz",
+      "integrity": "sha512-6slhaFHtfaL3t5dLYaQt6s4G2xZymhu0Ktdl7OMeVk8+46RgR8ft6FL0Tr4F31W+yPH03nJe1SSP4JFy2hSMRA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "valtio": ">=2.0.0-rc.0"
+      }
+    },
    "node_modules/detect-libc": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -22,6 +22,7 @@
    "@tanstack/react-query": "5.81.5",
    "@timephy/rnnoise-wasm": "1.0.0",
    "crisp-sdk-web": "1.0.25",
+    "derive-valtio": "0.2.0",
    "hoofd": "1.7.3",
    "humanize-duration": "3.33.0",
    "i18next": "25.3.1",
@@ -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>
@@ -5,10 +5,9 @@ import { Screen } from '@/layout/Screen'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { LocalVideoTrack, 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,6 +26,11 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
+import { useSnapshot } from 'valtio'
+import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
+import { ToggleDevice } from './join/ToggleDevice'
+import { SelectDevice } from './join/SelectDevice'
+import { useResolveDefaultDeviceId } from '../livekit/hooks/useResolveDefaultDevice'

 const onError = (e: Error) => console.error('ERROR', e)

@@ -71,36 +75,14 @@ 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>
    </>
  )
 }
@@ -159,13 +141,20 @@ export const Join = ({
    [tracks]
  )

+  // LiveKit by default populates device choices with "default" value.
+  // Instead, use the current device id used by the preview track as a default
+  useResolveDefaultDeviceId(audioDeviceId, audioTrack, saveAudioInputDeviceId)
+  useResolveDefaultDeviceId(videoDeviceId, videoTrack, saveVideoInputDeviceId)
+
  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'
      }
    }
@@ -178,7 +167,11 @@ export const Join = ({

    return () => {
      videoTrack?.detach()
-      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
+      if (videoElement) {
+        videoElement.removeEventListener('loadedmetadata', handleVideoLoaded)
+        videoElement.style.opacity = '0'
+      }
+      isVideoInitiated.current = false
    }
  }, [videoTrack, videoEnabled])

@@ -240,6 +233,49 @@ export const Join = ({
    enterRoom()
  }

+  const permissions = useSnapshot(permissionsStore)
+
+  const isCameraDeniedOrPrompted =
+    permissions.isCameraDenied || permissions.isCameraPrompted
+
+  const isMicrophoneDeniedOrPrompted =
+    permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+
+  const hintMessage = useMemo(() => {
+    if (isCameraDeniedOrPrompted) {
+      return isMicrophoneDeniedOrPrompted
+        ? 'cameraAndMicNotGranted'
+        : 'cameraNotGranted'
+    }
+    if (!videoEnabled) {
+      return 'cameraDisabled'
+    }
+    if (!isVideoInitiated.current) {
+      return 'cameraStarting'
+    }
+    if (videoTrack && videoEnabled) {
+      return ''
+    }
+  }, [
+    videoTrack,
+    videoEnabled,
+    isCameraDeniedOrPrompted,
+    isMicrophoneDeniedOrPrompted,
+  ])
+
+  const permissionsButtonLabel = useMemo(() => {
+    if (!isMicrophoneDeniedOrPrompted && !isCameraDeniedOrPrompted) {
+      return null
+    }
+    if (isCameraDeniedOrPrompted && isMicrophoneDeniedOrPrompted) {
+      return 'cameraAndMicNotGranted'
+    }
+    if (isCameraDeniedOrPrompted && !isMicrophoneDeniedOrPrompted) {
+      return 'cameraNotGranted'
+    }
+    return null
+  }, [isMicrophoneDeniedOrPrompted, isCameraDeniedOrPrompted])
+
  const renderWaitingState = () => {
    switch (status) {
      case ApiLobbyStatus.TIMEOUT:
@@ -300,6 +336,7 @@ export const Join = ({
                type="text"
                onChange={saveUsername}
                label={t('usernameLabel')}
+                aria-label={t('usernameLabel')}
                defaultValue={username}
                validate={(value) => !value && t('errors.usernameEmpty')}
                wrapperProps={{
@@ -322,146 +359,272 @@ 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: 'absolute',
+                  top: 0,
+                  height: '5rem',
+                  width: '100%',
+                  backgroundImage:
+                    'linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%)',
+                  zIndex: 1,
+                })}
+              />
+              <div
+                className={css({
+                  position: 'absolute',
+                  bottom: 0,
+                  height: '5rem',
+                  width: '100%',
+                  backgroundImage:
+                    'linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%)',
+                  zIndex: 1,
+                })}
+              />
+              <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 ? '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 || isCameraDeniedOrPrompted
+                              ? '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',
+                      gap: '1rem',
+                    })}
+                  >
+                    <p
+                      className={css({
+                        fontWeight: '400',
+                        fontSize: { base: '1rem', sm: '1.25rem', lg: '1.5rem' },
+                        textWrap: 'balance',
+                        color: 'white',
+                      })}
+                    >
+                      {hintMessage && t(hintMessage)}
+                    </p>
+                    {isCameraDeniedOrPrompted && (
+                      <Button
+                        size="sm"
+                        variant="tertiary"
+                        onPress={openPermissionsDialog}
+                      >
+                        {t(`permissionsButton.${permissionsButtonLabel}`)}
+                      </Button>
+                    )}
+                  </div>
                </div>
-              )}
-              <Effects
-                videoTrack={videoTrack}
-                onSubmit={(processor) =>
-                  saveProcessorSerialized(processor?.serialize())
-                }
-              />
+                <div
+                  className={css({
+                    position: 'absolute',
+                    bottom: '1rem',
+                    zIndex: '1',
+                    display: 'flex',
+                    gap: '1rem',
+                    justifyContent: 'center',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                  })}
+                >
+                  <ToggleDevice
+                    source={Track.Source.Microphone}
+                    initialState={audioEnabled}
+                    track={audioTrack}
+                    onChange={(enabled) => saveAudioInputEnabled(enabled)}
+                    onDeviceError={(error) => console.error(error)}
+                  />
+                  <ToggleDevice
+                    source={Track.Source.Camera}
+                    initialState={videoEnabled}
+                    track={videoTrack}
+                    onChange={(enabled) => saveVideoInputEnabled(enabled)}
+                    onDeviceError={(error) => console.error(error)}
+                  />
+                </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: 'flex',
+                justifyContent: 'center',
+                gap: '2%',
+                width: '80%',
+                marginX: 'auto',
+              })}
+            >
+              <div
+                className={css({
+                  width: '50%',
+                })}
+              >
+                <SelectDevice
+                  kind="audioinput"
+                  id={audioDeviceId}
+                  onSubmit={saveAudioInputDeviceId}
+                />
+              </div>
+              <div
+                className={css({
+                  width: '50%',
+                })}
+              >
+                <SelectDevice
+                  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>
  )
@@ -0,0 +1,112 @@
+import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
+import { css } from '@/styled-system/css'
+import { Dialog, H } from '@/primitives'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { useEffect, useMemo } from 'react'
+import { useSnapshot } from 'valtio'
+import { closePermissionsDialog, permissionsStore } from '@/stores/permissions'
+import { useTranslation } from 'react-i18next'
+import { injectIconIntoTranslation } from '@/utils/translation'
+import { isSafari } from '@/utils/livekit'
+
+/**
+ * Singleton component - ensures permissions sync runs only once across the app.
+ * WARNING: This component should only be instantiated once in the interface.
+ * Multiple instances may cause unexpected behavior or performance issues.
+ */
+export const Permissions = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
+
+  useWatchPermissions()
+
+  const permissions = useSnapshot(permissionsStore)
+
+  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])
+
+  const [descriptionBeforeIcon, descriptionAfterIcon] =
+    injectIconIntoTranslation(t('body.openMenu.others'))
+
+  useEffect(() => {
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isCameraGranted &&
+      permissions.isMicrophoneGranted
+    ) {
+      closePermissionsDialog()
+    }
+  }, [permissions])
+
+  const appTitle = `${import.meta.env.VITE_APP_TITLE}`
+
+  return (
+    <Dialog
+      isOpen={permissions.isPermissionDialogOpen}
+      role="dialog"
+      type="flex"
+      title=""
+      aria-label={t(`heading.${permissionLabel}`, {
+        appTitle,
+      })}
+      onClose={closePermissionsDialog}
+    >
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        <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}`, {
+              appTitle,
+            })}
+          </H>
+          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
+            <li>
+              {isSafari() ? (
+                t('body.openMenu.safari', {
+                  appDomain: window.origin.replace('https://', ''),
+                })
+              ) : (
+                <>
+                  {descriptionBeforeIcon}
+                  <span
+                    style={{ display: 'inline-block', verticalAlign: 'middle' }}
+                  >
+                    <RiEqualizer2Line />
+                  </span>
+                  {descriptionAfterIcon}
+                </>
+              )}
+            </li>
+            <li>{t(`body.details.${permissionLabel}`)}</li>
+          </ol>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
@@ -0,0 +1,115 @@
+import {
+  RemixiconComponentType,
+  RiMicLine,
+  RiVideoOnLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useMediaDeviceSelect } from '@livekit/components-react'
+import { useMemo } from 'react'
+import { Select } from '@/primitives/Select'
+import { useSnapshot } from 'valtio'
+import { permissionsStore } from '@/stores/permissions'
+
+type DeviceItems = Array<{ value: string; label: string }>
+
+type DeviceConfig = {
+  icon: RemixiconComponentType
+}
+
+type SelectDeviceProps = {
+  id?: string
+  onSubmit?: (id: string) => void
+  kind: MediaDeviceKind
+}
+
+type SelectDevicePermissionsProps = SelectDeviceProps & {
+  config: DeviceConfig
+}
+
+const SelectDevicePermissions = ({
+  id,
+  kind,
+  config,
+  onSubmit,
+}: SelectDevicePermissionsProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const { devices, activeDeviceId, setActiveMediaDevice } =
+    useMediaDeviceSelect({ kind: kind, requestPermissions: true })
+
+  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')}
+      selectedKey={id || activeDeviceId}
+      onSelectionChange={(key) => {
+        onSubmit?.(key as string)
+        setActiveMediaDevice(key as string)
+      }}
+    />
+  )
+}
+
+export const SelectDevice = ({ id, onSubmit, kind }: SelectDeviceProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const permissions = useSnapshot(permissionsStore)
+
+  const config = useMemo<DeviceConfig | undefined>(() => {
+    switch (kind) {
+      case 'audioinput':
+        return {
+          icon: RiMicLine,
+        }
+      case 'videoinput':
+        return {
+          icon: RiVideoOnLine,
+        }
+    }
+  }, [kind])
+
+  const isPermissionDeniedOrPrompted = useMemo(() => {
+    if (kind == 'audioinput') {
+      return permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+    }
+    if (kind == 'videoinput') {
+      return permissions.isCameraDenied || permissions.isCameraPrompted
+    }
+    return false
+  }, [kind, permissions])
+
+  if (!config) return null
+
+  if (isPermissionDeniedOrPrompted || permissions.isLoading) {
+    return (
+      <Select
+        aria-label={t(`${kind}.permissionsNeeded`)}
+        label=""
+        isDisabled={true}
+        items={[]}
+        iconComponent={config?.icon}
+        placeholder={t('selectDevice.permissionsNeeded')}
+      />
+    )
+  }
+
+  return (
+    <SelectDevicePermissions
+      id={id}
+      onSubmit={onSubmit}
+      kind={kind}
+      config={config}
+    />
+  )
+}
@@ -0,0 +1,78 @@
+import { UseTrackToggleProps } from '@livekit/components-react'
+import { ToggleDevice as BaseToggleDevice } from '../../livekit/components/controls/ToggleDevice'
+import {
+  TOGGLE_DEVICE_CONFIG,
+  ToggleSource,
+} from '../../livekit/config/ToggleDeviceConfig'
+import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { useCallback, useMemo, useState } from 'react'
+import { useSnapshot } from 'valtio'
+import { permissionsStore } from '@/stores/permissions'
+
+type ToggleDeviceProps<T extends ToggleSource> = UseTrackToggleProps<T> & {
+  track?: LocalAudioTrack | LocalVideoTrack
+  source: ToggleSource
+  variant?: NonNullable<ButtonRecipeProps>['variant']
+}
+
+export const ToggleDevice = <T extends ToggleSource>({
+  track,
+  onChange,
+  ...props
+}: ToggleDeviceProps<T>) => {
+  const config = TOGGLE_DEVICE_CONFIG[props.source]
+
+  if (!config) {
+    throw new Error('Invalid source')
+  }
+
+  const [isTrackEnabled, setIsTrackEnabled] = useState(
+    props.initialState ?? false
+  )
+
+  const permissions = useSnapshot(permissionsStore)
+
+  const isPermissionDeniedOrPrompted = useMemo(() => {
+    if (config.kind == 'audioinput') {
+      return permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+    }
+    if (config.kind == 'videoinput') {
+      return permissions.isCameraDenied || permissions.isCameraPrompted
+    }
+  }, [config, permissions])
+
+  const toggle = useCallback(async () => {
+    if (!track) {
+      console.error('Track is undefined.')
+      return
+    }
+    try {
+      if (isTrackEnabled) {
+        await track.mute()
+        setIsTrackEnabled(false)
+        onChange?.(false, true)
+      } else {
+        await track.unmute()
+        setIsTrackEnabled(true)
+        onChange?.(true, true)
+      }
+    } catch (error) {
+      console.error('Failed to toggle track:', error)
+    }
+  }, [track, onChange, isTrackEnabled])
+
+  return (
+    <BaseToggleDevice
+      enabled={isTrackEnabled}
+      isPermissionDeniedOrPrompted={isPermissionDeniedOrPrompted}
+      toggle={toggle}
+      config={config}
+      variant="whiteCircle"
+      errorVariant="errorCircle"
+      toggleButtonProps={{
+        groupPosition: undefined,
+      }}
+    />
+  )
+}
@@ -0,0 +1,160 @@
+import { useEffect } from 'react'
+import { permissionsStore } from '@/stores/permissions'
+import { isSafari } from '@/utils/livekit'
+
+const POLLING_TIME = 500
+
+export const useWatchPermissions = () => {
+  useEffect(() => {
+    let cleanup: (() => void) | undefined
+    let intervalId: NodeJS.Timeout | undefined
+    let isCancelled = false
+
+    const checkPermissions = async () => {
+      try {
+        if (!navigator.permissions) {
+          if (!isCancelled) {
+            permissionsStore.cameraPermission = 'unavailable'
+            permissionsStore.microphonePermission = 'unavailable'
+          }
+          return
+        }
+
+        const [cameraPermission, microphonePermission] = await Promise.all([
+          navigator.permissions.query({ name: 'camera' }),
+          navigator.permissions.query({ name: 'microphone' }),
+        ])
+
+        if (isCancelled) return
+
+        /**
+         * Safari Permission API Limitation Workaround
+         *
+         * Safari has a known issue where permission change events are not reliably fired
+         * when users interact with permission prompts. This is documented in Apple's forums:
+         * https://developer.apple.com/forums/thread/757353
+         *
+         * The problem:
+         * - When permissions are in 'prompt' state, Safari may not trigger 'change' events
+         * - Users can grant/deny permissions through system prompts, but our listeners won't detect it
+         * - This leaves the UI in an inconsistent state showing outdated permission status
+         *
+         * The solution:
+         * - Manually poll the Permissions API every 500ms when either permission is in 'prompt' state
+         * - Continue polling until both permissions are no longer in 'prompt' state
+         * - This ensures we catch permission changes even when Safari fails to fire events
+         *
+         * This polling is Safari-specific and only activates when needed to minimize performance impact.
+         */
+        if (
+          isSafari() &&
+          (cameraPermission.state === 'prompt' ||
+            microphonePermission.state === 'prompt')
+        ) {
+          // Start polling every 1 second if either permission is in 'prompt' state
+          if (!intervalId) {
+            intervalId = setInterval(async () => {
+              try {
+                const [updatedCamera, updatedMicrophone] = await Promise.all([
+                  navigator.permissions.query({ name: 'camera' }),
+                  navigator.permissions.query({ name: 'microphone' }),
+                ])
+
+                if (isCancelled) return
+
+                const cameraChanged =
+                  permissionsStore.cameraPermission !== updatedCamera.state
+                const microphoneChanged =
+                  permissionsStore.microphonePermission !==
+                  updatedMicrophone.state
+
+                if (cameraChanged) {
+                  permissionsStore.cameraPermission = updatedCamera.state
+                }
+
+                if (microphoneChanged) {
+                  permissionsStore.microphonePermission =
+                    updatedMicrophone.state
+                }
+
+                if (
+                  updatedCamera.state !== 'prompt' &&
+                  updatedMicrophone.state !== 'prompt'
+                ) {
+                  if (intervalId) {
+                    clearInterval(intervalId)
+                    intervalId = undefined
+                  }
+                }
+              } catch (error) {
+                if (!isCancelled) {
+                  console.error('Error polling permissions:', error)
+                }
+              }
+            }, POLLING_TIME)
+          }
+        }
+
+        permissionsStore.cameraPermission = cameraPermission.state
+        permissionsStore.microphonePermission = microphonePermission.state
+
+        const handleCameraChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionsStore.cameraPermission = target.state
+
+          if (
+            intervalId &&
+            target.state !== 'prompt' &&
+            microphonePermission.state !== 'prompt'
+          ) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+
+        const handleMicrophoneChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionsStore.microphonePermission = target.state
+
+          if (
+            intervalId &&
+            target.state !== 'prompt' &&
+            microphonePermission.state !== 'prompt'
+          ) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+
+        cameraPermission.addEventListener('change', handleCameraChange)
+        microphonePermission.addEventListener('change', handleMicrophoneChange)
+
+        cleanup = () => {
+          cameraPermission.removeEventListener('change', handleCameraChange)
+          microphonePermission.removeEventListener(
+            'change',
+            handleMicrophoneChange
+          )
+          if (intervalId) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          console.error('Error checking permissions:', error)
+        }
+      } finally {
+        if (!isCancelled) {
+          permissionsStore.isLoading = false
+        }
+      }
+    }
+    checkPermissions()
+
+    return () => {
+      isCancelled = true
+      cleanup?.()
+    }
+  }, [])
+}
@@ -0,0 +1,47 @@
+import { Button } from '@/primitives'
+import { RiErrorWarningFill } from '@remixicon/react'
+import { openPermissionsDialog } from '@/stores/permissions'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+
+export const PermissionNeededButton = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'permissionsButton' })
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        bottom: 'auto',
+        left: '-.55rem',
+        top: '-.55rem',
+        zIndex: 1,
+      })}
+    >
+      <Button
+        aria-label={t('ariaLabel')}
+        tooltip={t('tooltip')}
+        onPress={openPermissionsDialog}
+        variant="permission"
+      >
+        <div
+          className={css({
+            position: 'relative',
+            zIndex: 2,
+          })}
+        >
+          <RiErrorWarningFill size={28} />
+        </div>
+        <div
+          className={css({
+            width: '18px',
+            height: '18px',
+            position: 'absolute',
+            top: '4px',
+            left: '4px',
+            backgroundColor: 'black',
+            borderRadius: '100%',
+          })}
+        />
+      </Button>
+    </div>
+  )
+}
@@ -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,64 +13,25 @@ import {
  VideoCaptureOptions,
 } from 'livekit-client'

-import { Shortcut } from '@/features/shortcuts/types'
-
 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../blur'
-
-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,
-    },
-  },
-}
+import { useSnapshot } from 'valtio'
+import { permissionsStore } from '@/stores/permissions'
+import {
+  TOGGLE_DEVICE_CONFIG,
+  ToggleSource,
+} from '../../config/ToggleDeviceConfig'

 type SelectToggleDeviceProps<T extends ToggleSource> =
  UseTrackToggleProps<T> & {
-    track?: LocalAudioTrack | LocalVideoTrack | undefined
+    track?: LocalAudioTrack | LocalVideoTrack
    initialDeviceId?: string
    onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
+    source: ToggleSource
    variant?: NonNullable<ButtonRecipeProps>['variant']
    menuVariant?: 'dark' | 'light'
    hideMenu?: boolean
@@ -92,7 +46,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
  menuVariant = 'light',
  ...props
 }: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
+  const config = TOGGLE_DEVICE_CONFIG[props.source]
  if (!config) {
    throw new Error('Invalid source')
  }
@@ -101,6 +55,18 @@ export const SelectToggleDevice = <T extends ToggleSource>({

  const { userChoices } = usePersistentUserChoices()

+  const permissions = useSnapshot(permissionsStore)
+  const isPermissionDeniedOrPrompted = useMemo(() => {
+    switch (config.kind) {
+      case 'audioinput':
+        return (
+          permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+        )
+      case 'videoinput':
+        return permissions.isCameraDenied || permissions.isCameraPrompted
+    }
+  }, [permissions, config.kind])
+
  const toggle = () => {
    if (props.source === Track.Source.Camera) {
      /**
@@ -161,6 +127,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
        config={config}
        variant={variant}
        toggle={toggle}
+        isPermissionDeniedOrPrompted={isPermissionDeniedOrPrompted}
        toggleButtonProps={{
          ...(hideMenu
            ? {
@@ -172,13 +139,18 @@ export const SelectToggleDevice = <T extends ToggleSource>({
      {!hideMenu && (
        <Menu variant={menuVariant}>
          <Button
+            isDisabled={isPermissionDeniedOrPrompted}
            tooltip={selectLabel}
            aria-label={selectLabel}
            groupPosition="right"
            square
-            variant={trackProps.enabled ? variant : 'error2'}
+            variant={
+              trackProps.enabled && !isPermissionDeniedOrPrompted
+                ? variant
+                : 'error2'
+            }
          >
-            <RiArrowDownSLine />
+            <RiArrowUpSLine />
          </Button>
          <MenuList
            items={devices.map((d) => ({
@@ -3,7 +3,7 @@ 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 { PermissionNeededButton } from './PermissionNeededButton'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
@@ -13,12 +13,16 @@ import {
 } from '@livekit/components-react'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { openPermissionsDialog } from '@/stores/permissions'
+import { ToggleDeviceConfig } from '../../config/ToggleDeviceConfig'

 export type ToggleDeviceProps = {
  enabled: boolean
+  isPermissionDeniedOrPrompted?: boolean
  toggle: () => void
-  config: SelectToggleDeviceConfig
+  config: ToggleDeviceConfig
  variant?: NonNullable<ButtonRecipeProps>['variant']
+  errorVariant?: NonNullable<ButtonRecipeProps>['variant']
  toggleButtonProps?: Partial<ToggleButtonProps>
 }

@@ -27,7 +31,9 @@ export const ToggleDevice = ({
  enabled,
  toggle,
  variant = 'primaryDark',
+  errorVariant = 'error2',
  toggleButtonProps,
+  isPermissionDeniedOrPrompted,
 }: ToggleDeviceProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })

@@ -56,7 +62,7 @@ export const ToggleDevice = ({
    return shortcut ? appendShortcutLabel(label, shortcut) : label
  }, [enabled, kind, shortcut, t])

-  const Icon = enabled ? iconOn : iconOff
+  const Icon = enabled && !isPermissionDeniedOrPrompted ? iconOn : iconOff

  const context = useMaybeRoomContext()
  if (kind === 'audioinput' && pushToTalk && context) {
@@ -64,18 +70,29 @@ export const ToggleDevice = ({
  }

  return (
-    <ToggleButton
-      isSelected={!enabled}
-      variant={enabled ? variant : 'error2'}
-      shySelected
-      onPress={() => toggle()}
-      aria-label={toggleLabel}
-      tooltip={toggleLabel}
-      groupPosition="left"
-      {...toggleButtonProps}
-    >
-      <Icon />
-    </ToggleButton>
+    <div style={{ position: 'relative' }}>
+      {isPermissionDeniedOrPrompted && <PermissionNeededButton />}
+      <ToggleButton
+        isSelected={!enabled}
+        variant={
+          enabled && !isPermissionDeniedOrPrompted ? variant : errorVariant
+        }
+        shySelected
+        onPress={() =>
+          isPermissionDeniedOrPrompted ? openPermissionsDialog() : toggle()
+        }
+        aria-label={toggleLabel}
+        tooltip={
+          isPermissionDeniedOrPrompted
+            ? t('tooltip', { keyPrefix: 'permissionsButton' })
+            : toggleLabel
+        }
+        groupPosition="left"
+        {...toggleButtonProps}
+      >
+        <Icon />
+      </ToggleButton>
+    </div>
  )
 }

@@ -0,0 +1,52 @@
+import { Track } from 'livekit-client'
+import {
+  RemixiconComponentType,
+  RiMicLine,
+  RiMicOffLine,
+  RiVideoOffLine,
+  RiVideoOnLine,
+} from '@remixicon/react'
+import { Shortcut } from '@/features/shortcuts/types'
+
+export type ToggleSource = Exclude<
+  Track.Source,
+  | Track.Source.ScreenShareAudio
+  | Track.Source.Unknown
+  | Track.Source.ScreenShare
+>
+
+export type ToggleDeviceConfig = {
+  kind: MediaDeviceKind
+  iconOn: RemixiconComponentType
+  iconOff: RemixiconComponentType
+  shortcut?: Shortcut
+  longPress?: Shortcut
+}
+
+type ToggleDeviceConfigMap = {
+  [key in ToggleSource]: ToggleDeviceConfig
+}
+
+export const TOGGLE_DEVICE_CONFIG = {
+  [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,
+    },
+  },
+} as const satisfies ToggleDeviceConfigMap
@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+
+export const useResolveDefaultDeviceId = <
+  T extends { getDeviceId(): Promise<string | undefined> },
+>(
+  currentId: string,
+  track: T | undefined,
+  save: (id: string) => void
+) => {
+  useEffect(() => {
+    if (currentId !== 'default' || !track) return
+    const resolveDefaultDeviceId = async () => {
+      const actualDeviceId = await track.getDeviceId()
+      if (actualDeviceId && actualDeviceId !== 'default') save(actualDeviceId)
+    }
+    resolveDefaultDeviceId()
+  }, [currentId, track, save])
+}
@@ -1,15 +1,25 @@
-import { useEffect, useState } from '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 { Permissions } from '../components/Permissions'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 import {
  isRoomValid,
  normalizeRoomId,
 } from '@/features/rooms/utils/isRoomValid'

+const BaseRoom = ({ children }: { children: ReactNode }) => {
+  return (
+    <UserAware>
+      <Permissions />
+      {children}
+    </UserAware>
+  )
+}
+
 export const Room = () => {
  const { isLoggedIn } = useUser()
  const [hasSubmittedEntry, setHasSubmittedEntry] = useState(false)
@@ -47,19 +57,19 @@ export const Room = () => {

  if (!hasSubmittedEntry && !skipJoinScreen) {
    return (
-      <UserAware>
+      <BaseRoom>
        <Join enterRoom={() => setHasSubmittedEntry(true)} roomId={roomId} />
-      </UserAware>
+      </BaseRoom>
    )
  }

  return (
-    <UserAware>
+    <BaseRoom>
      <Conference
        initialRoomData={initialRoomData}
        roomId={roomId}
        mode={mode}
      />
-    </UserAware>
+    </BaseRoom>
  )
 }
@@ -8,8 +8,13 @@
    "back": "Dem Meeting erneut beitreten"
  },
  "join": {
+    "selectDevice": {
+      "loading": "Laden…",
+      "permissionsNeeded": "Genehmigung erforderlich"
+    },
    "videoinput": {
      "choose": "Kamera auswählen",
+      "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich",
      "disable": "Kamera deaktivieren",
      "enable": "Kamera aktivieren",
      "label": "Kamera",
@@ -17,6 +22,7 @@
    },
    "audioinput": {
      "choose": "Mikrofon auswählen",
+      "permissionsNeeded": "Mikrofon auswählen - genehmigung erforderlich",
      "disable": "Mikrofon deaktivieren",
      "enable": "Mikrofon aktivieren",
      "label": "Mikrofon"
@@ -37,7 +43,17 @@
      "usernameEmpty": "Ihr Name darf nicht leer sein"
    },
    "cameraDisabled": "Kamera ist deaktiviert.",
-    "cameraStarting": "Kamera wird gestartet.",
+    "cameraStarting": "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?",
+    "permissionsButton": {
+      "cameraAndMicNotGranted": "Zugriff auf Kamera und Mikrofon erlauben",
+      "cameraNotGranted": "Zugriff auf Kamera erlauben"
+    },
+    "videoPreview": {
+      "enabled": "Videovorschau aktiviert",
+      "disabled": "Videovorschau deaktiviert"
+    },
    "waiting": {
      "title": "Beitrittsanfrage wird gesendet...",
      "body": "Sie können diesem Anruf beitreten, sobald jemand Sie autorisiert"
@@ -77,6 +93,30 @@
    },
    "close": "OK"
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera": "{{appTitle}} darf Ihre Kamera nicht verwenden",
+      "microphone": "{{appTitle}} darf Ihr Mikrofon nicht verwenden",
+      "cameraAndMicrophone": "{{appTitle}} darf weder Ihr Mikrofon noch Ihre Kamera verwenden",
+      "default": "{{appTitle}} hat keine Berechtigung für bestimmte Zugriffe"
+    },
+    "body": {
+      "openMenu": {
+        "others": "Klicken Sie auf das Einstellungen-Symbol ICON_PLACEHOLDER in der Adressleiste Ihres Browsers",
+        "safari": "Klicken Sie auf das Menü 'Safari' und öffnen Sie 'Einstellungen für {{appDomain}}'."
+      },
+      "details": {
+        "camera": "Zugriff auf die Kamera erlauben",
+        "microphone": "Zugriff auf das Mikrofon erlauben",
+        "cameraAndMicrophone": "Zugriff auf Kamera und Mikrofon erlauben",
+        "default": "Aktivieren Sie die erforderlichen Berechtigungen."
+      }
+    }
+  },
+  "permissionsButton": {
+    "tooltip": "Mehr Infos",
+    "ariaLabel": "Berechtigungsproblem. Mehr Infos anzeigen"
+  },
  "error": {
    "createRoom": {
      "heading": "Authentifizierung erforderlich",
@@ -8,8 +8,13 @@
    "back": "Rejoin the meeting"
  },
  "join": {
+    "selectDevice": {
+      "loading": "Loading…",
+      "permissionsNeeded": "Permission needed"
+    },
    "videoinput": {
      "choose": "Select camera",
+      "permissionsNeeded": "Select camera - permission needed",
      "disable": "Disable camera",
      "enable": "Enable camera",
      "label": "Camera",
@@ -17,6 +22,7 @@
    },
    "audioinput": {
      "choose": "Select microphone",
+      "permissionsNeeded": "Select microphone - permission needed",
      "disable": "Disable microphone",
      "enable": "Enable microphone",
      "label": "Microphone"
@@ -37,7 +43,17 @@
      "usernameEmpty": "Your name cannot be empty"
    },
    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting.",
+    "cameraStarting": "Camera is starting…",
+    "cameraNotGranted": "Would you like others to be able to see you during the meeting?",
+    "cameraAndMicNotGranted": "Would you like others to be able to see and hear you during the meeting?",
+    "permissionsButton": {
+      "cameraAndMicNotGranted": "Allow access to camera and microphone",
+      "cameraNotGranted": "Allow access to camera"
+    },
+    "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"
@@ -77,6 +93,30 @@
    },
    "close": "OK"
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera": "{{appTitle}} is not allowed to use your camera",
+      "microphone": "{{appTitle}} is not allowed to use your microphone",
+      "cameraAndMicrophone": "{{appTitle}} is not allowed to use your microphone or camera",
+      "default": "{{appTitle}} is not allowed to use certain permissions"
+    },
+    "body": {
+      "openMenu": {
+        "others": "Click on the settings icon ICON_PLACEHOLDER in your browser’s address bar",
+        "safari": "Click the 'Safari' menu, and open 'Settings for {{appDomain}}'."
+      },
+      "details": {
+        "camera": "Allow access to the camera",
+        "microphone": "Allow access to the microphone",
+        "cameraAndMicrophone": "Allow access to the camera and microphone",
+        "default": "Enable the necessary permissions."
+      }
+    }
+  },
+  "permissionsButton": {
+    "tooltip": "More info",
+    "ariaLabel": "Permissions issue. Show more info"
+  },
  "error": {
    "createRoom": {
      "heading": "Authentication Required",
@@ -8,8 +8,13 @@
    "back": "Réintégrer la réunion"
  },
  "join": {
+    "selectDevice": {
+      "loading": "Chargement…",
+      "permissionsNeeded": "Autorisations nécessaires"
+    },
    "videoinput": {
      "choose": "Choisir la webcam",
+      "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
      "disable": "Désactiver la webcam",
      "enable": "Activer la webcam",
      "label": "Webcam",
@@ -17,6 +22,7 @@
    },
    "audioinput": {
      "choose": "Choisir le micro",
+      "permissionsNeeded": "Choisir le micro - autorisations nécessaires",
      "disable": "Désactiver le micro",
      "enable": "Activer le micro",
      "label": "Microphone"
@@ -37,7 +43,17 @@
      "usernameEmpty": "Votre nom ne peut pas être vide"
    },
    "cameraDisabled": "La caméra est désactivée.",
-    "cameraStarting": "La caméra va démarrer.",
+    "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é"
+    },
+    "permissionsButton": {
+      "cameraAndMicNotGranted": "Autorisez l'accès à la caméra et au micro",
+      "cameraNotGranted": "Autorisez l'accès à la caméra"
+    },
    "waiting": {
      "title": "Demande de participation…",
      "body": "Vous pourrez participer à cet appel lorsque quelqu'un vous y autorisera"
@@ -77,6 +93,30 @@
    },
    "close": "OK"
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera": "{{appTitle}} n'est pas autorisé à utiliser votre caméra",
+      "microphone": "{{appTitle}} n'est pas autorisé à utiliser votre micro",
+      "cameraAndMicrophone": "{{appTitle}} n'est pas autorisé à utiliser votre micro ni votre caméra",
+      "default": "{{appTitle}} n'est pas autorisé à utiliser certaines fonctionnalités nécessaires."
+    },
+    "body": {
+      "openMenu": {
+        "others": "Cliquez sur l'icône des paramètres ICON_PLACEHOLDER dans la barre d'adresse de votre navigateur",
+        "safari": "Cliquez sur le menu \"Safari\", et ouvrez \"Paramètres pour {{appDomain}}\"."
+      },
+      "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",
+        "default": "Activez les autorisations nécessaires."
+      }
+    }
+  },
+  "permissionsButton": {
+    "tooltip": "Plus d'infos",
+    "ariaLabel": "Problème de permissions. Afficher plus d'infos"
+  },
  "error": {
    "createRoom": {
      "heading": "Authentification requise",
@@ -8,8 +8,13 @@
    "back": "Sluit weer bij de vergadering aan"
  },
  "join": {
+    "selectDevice": {
+      "loading": "Bezig met laden…",
+      "permissionNeeded": "Toestemming vereist"
+    },
    "videoinput": {
      "choose": "Selecteer camera",
+      "permissionNeeded": "Selecteer camera - Toestemming vereist",
      "disable": "Camera uitschakelen",
      "enable": "Camera inschakelen",
      "label": "Camera",
@@ -17,6 +22,7 @@
    },
    "audioinput": {
      "choose": "Selecteer microfoon",
+      "permissionNeeded": "Selecteer microfoon - Toestemming vereist",
      "disable": "Microfoon dempen",
      "enable": "Microfoon dempen opheffen",
      "label": "Microfoon"
@@ -37,7 +43,17 @@
      "usernameEmpty": "Uw naam kan niet leeg zijn"
    },
    "cameraDisabled": "Camera is uitgeschakeld.",
-    "cameraStarting": "Camera wordt ingeschakeld.",
+    "cameraStarting": "Camera wordt ingeschakeld…",
+    "cameraNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien?",
+    "cameraAndMicNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien en horen?",
+    "permissionsButton": {
+      "cameraAndMicNotGranted": "Toegang tot camera en microfoon toestaan",
+      "cameraNotGranted": "Toegang tot camera toestaan"
+    },
+    "videoPreview": {
+      "enabled": "Videovoorbeeld ingeschakeld",
+      "disabled": "Videovoorbeeld uitgeschakeld"
+    },
    "waiting": {
      "title": "Verzoek tot deelname...",
      "body": "U kunt deelnemen aan dit gesprek wanneer iemand u toestemming geeft"
@@ -77,6 +93,30 @@
    },
    "close": "OK"
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera": "{{appTitle}} mag uw camera niet gebruiken",
+      "microphone": "{{appTitle}} mag uw microfoon niet gebruiken",
+      "cameraAndMicrophone": "{{appTitle}} mag uw microfoon en camera niet gebruiken",
+      "default": "{{appTitle}} heeft geen toestemming voor bepaalde rechten"
+    },
+    "body": {
+      "openMenu": {
+        "others": "Klik op het instellingenpictogram ICON_PLACEHOLDER in de adresbalk van uw browser",
+        "safari": "Klik op het menu 'Safari' en open 'Instellingen voor {{appDomain}}'."
+      },
+      "details": {
+        "camera": "Toegang tot de camera toestaan",
+        "microphone": "Toegang tot de microfoon toestaan",
+        "cameraAndMicrophone": "Toegang tot camera en microfoon toestaan",
+        "default": "Schakel de vereiste machtigingen in."
+      }
+    }
+  },
+  "permissionsButton": {
+    "tooltip": "Meer info",
+    "ariaLabel": "Probleem met machtigingen. Meer info weergeven"
+  },
  "error": {
    "createRoom": {
      "heading": "Verificatie vereist",
@@ -251,6 +251,20 @@ export const buttonRecipe = cva({
          color: 'error.300',
        },
      },
+      errorCircle: {
+        backgroundColor: 'error.500',
+        width: '56px',
+        height: '56px',
+        borderRadius: '100%',
+        color: 'white',
+        '&[data-hovered]': {
+          backgroundColor: 'error.600',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'error.700',
+          color: 'error.200',
+        },
+      },
      // @TODO: better handling of colors… this is a mess
      success: {
        colorPalette: 'success',
@@ -270,6 +284,20 @@ export const buttonRecipe = cva({
          color: 'primary !important',
        },
      },
+      permission: {
+        position: 'relative',
+        // background: 'None !important',
+        borderRadius: '100%',
+        // border: 'none !important',
+        color: 'amber.500',
+        width: 'fit-content',
+        height: 'fit-content',
+        padding: '0 !important',
+        margin: '0 !important',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
    },
    invisible: {
      true: {
@@ -0,0 +1,61 @@
+import { proxy } from 'valtio'
+import { derive } from 'derive-valtio'
+
+type PermissionState =
+  | undefined
+  | 'granted'
+  | 'prompt'
+  | 'denied'
+  | 'unavailable'
+
+type BaseState = {
+  cameraPermission: PermissionState
+  microphonePermission: PermissionState
+  isLoading: boolean
+  isPermissionDialogOpen: boolean
+}
+
+type DerivedState = {
+  isCameraGranted: boolean
+  isMicrophoneGranted: boolean
+  isCameraDenied: boolean
+  isMicrophoneDenied: boolean
+  isCameraPrompted: boolean
+  isMicrophonePrompted: boolean
+}
+
+type State = BaseState & DerivedState
+
+export const permissionsStore = proxy<BaseState>({
+  cameraPermission: undefined,
+  microphonePermission: undefined,
+  isLoading: true,
+  isPermissionDialogOpen: false,
+}) as State
+
+derive(
+  {
+    isCameraGranted: (get) =>
+      get(permissionsStore).cameraPermission == 'granted',
+    isMicrophoneGranted: (get) =>
+      get(permissionsStore).microphonePermission == 'granted',
+    isCameraDenied: (get) => get(permissionsStore).cameraPermission == 'denied',
+    isMicrophoneDenied: (get) =>
+      get(permissionsStore).microphonePermission == 'denied',
+    isCameraPrompted: (get) =>
+      get(permissionsStore).cameraPermission == 'prompt',
+    isMicrophonePrompted: (get) =>
+      get(permissionsStore).microphonePermission == 'prompt',
+  },
+  {
+    proxy: permissionsStore,
+  }
+)
+
+export const openPermissionsDialog = () => {
+  permissionsStore.isPermissionDialogOpen = true
+}
+
+export const closePermissionsDialog = () => {
+  permissionsStore.isPermissionDialogOpen = false
+}
@@ -0,0 +1,14 @@
+/**
+ * FRAGILE: Splits translated text on placeholder to inject icons inline.
+ *
+ * Fragile because:
+ * - Relies on exact string matching - typos break it silently
+ * - Translators may accidentally modify/remove placeholders
+ * - No validation or error handling
+ */
+export const injectIconIntoTranslation = (
+  translation: string,
+  placeholder: string = 'ICON_PLACEHOLDER'
+) => {
+  return translation.split(placeholder)
+}
Author	SHA1	Message	Date
lebaudantoine	80fdf3faf2	🚨(frontend) remove redundant undefined type or optional specifier Fix TypeScript warning by removing either 'undefined' type annotation or '?' optional specifier where both were redundantly specified.	2025-08-11 18:48:27 +02:00
lebaudantoine	8d2df4001a	🚨(frontend) fix unnecessary destructuring rename in devices assignment Remove unnecessary renaming in destructuring assignment where variable was renamed to the same name, violating TypeScript rule S6650.	2025-08-11 18:48:27 +02:00
lebaudantoine	d610c0dff3	💄(frontend) add symmetric shadows for white button contrast enhancement Add symmetric shadows at top and bottom of white circle buttons to ensure sufficient visual contrast against varying background colors. Improves button visibility and accessibility by providing consistent visual definition regardless of background context.	2025-08-11 18:48:27 +02:00
lebaudantoine	bad054fa8c	♻️(frontend) refactor device select for controlled behavior Major refactor of device select component with several key improvements: * Set permission=true for Firefox compatibility - without this flag, device list returns empty on Firefox * Implement controlled component pattern for active device selection, ensuring sync with preview track state * Remove default device handling as controlled behavior eliminates need * Render selectors only after permissions granted to prevent double permission prompts (separate for mic/camera) Ensures usePreviewTrack handles initial permission request, then selectors allow specific device choice once access is granted.	2025-08-11 18:48:27 +02:00
lebaudantoine	3b398ca3fd	🐛(frontend) fix default device ID mismatch with actual preview track Update default device IDs when preview track starts to match the actual device being used. LiveKit returns 'default' string which may not exist in device list, causing ID mismatch. Prevents misleading situation where default device ID doesn't correspond to the device actually used by the preview track. Now synchronizes IDs once preview starts for accurate device tracking.	2025-08-11 18:48:27 +02:00
lebaudantoine	3c2c1a04db	🐛(frontend) reset video ref on track stop for state transitions Reset video element reference when track stops to ensure "camera starting" to "camera started" message transitions work correctly on repeated camera toggles. Previously only worked on initial video element load. Now properly handles state transitions for multiple camera enable/disable cycles.	2025-08-11 18:44:58 +02:00
lebaudantoine	cb30048b27	♻️(frontend) refactor select to show arrow up when menu opens upward Update select toggle device component used in conference to display upward arrow when dropdown menu opens above the select component. Improves visual consistency by matching arrow direction with actual menu opening direction, providing clearer user interface feedback.	2025-08-11 18:44:58 +02:00
lebaudantoine	945279d504	🩹(frontend) refactor track muting for proper audio/video control Fix useTrackToggle hook that wasn't properly muting/unmuting tracks outside room context. Previously only toggled boolean state via setUpManualToggle without actual track control. This caused misleading visual feedback where prejoin showed "camera disabled" while hardware remained active. Users could see camera/mic LEDs still on despite UI indicating otherwise. Refactor provides genuine track muting for accurate user feedback.	2025-08-11 18:44:58 +02:00
lebaudantoine	13c9436dc3	♻️(frontend) refactor prejoin screen for room context flexibility Decouple prejoin components from conference context to enable different behaviors when inside vs outside room environments. Components can now evolve independently with lighter coupling. Refactor layout structure to prepare for upcoming speaker selector introduction. This decoupling allows for more flexible component evolution and cleaner architecture.	2025-08-11 18:39:38 +02:00
lebaudantoine	bd139a1ef9	🎨(frontend) personalize permission modal for Safari UX differences Provides Safari-specific UI guidance that matches the browser's unique permission flow, ensuring users receive appropriate instructions for their specific browser environment.	2025-08-10 18:42:42 +02:00
lebaudantoine	f682f8feb3	🐛(frontend) fix React aria warnings with label/wrapper investigation Attempt to resolve React aria warnings by adding aria-label to form components. Visual label should be reusable by screen readers, but warning persists with only form wrapper as apparent difference. Uncertain if warning is harmful. Added aria-label as potential fix but removed after feedback from Sophie and Manu. Warning remains annoying during development.	2025-08-10 18:42:42 +02:00
lebaudantoine	5f1d59c753	🐛(frontend) fix Safari permission change detection with polling Add polling mechanism to detect permission changes on Safari where permission change events are not reliably fired when users interact with system prompts. Implements 500ms polling when permissions are in 'prompt' state to catch grant/deny actions that Safari's event system misses. Polling stops when permissions resolve to prevent performance impact. Fixes UI inconsistency where Safari users' permission changes weren't detected, leaving outdated status displays.	2025-08-10 18:42:42 +02:00
lebaudantoine	c45b91dc58	🩹(frontend) fix missing aria text for camera preview status Add missing accessibility text to video container that explains to screen reader users whether camera preview is currently enabled or disabled.	2025-08-10 18:42:42 +02:00
lebaudantoine	0e72f61650	🚸(frontend) add permission hints and modal button to join screen Add explicit messaging on join screen explaining why users should allow camera/microphone access, with quick button to open permission modal dialog. Targets first-time users who need guidance on permission requirements. Message persists until permissions are granted to ensure proper user onboarding and reduce support issues.	2025-08-10 18:42:42 +02:00
lebaudantoine	4fae3c6c47	✨(frontend) add visual permission indicator to device toggle button Introduce accessible visual indicator on device toggle buttons to hint when users have permission issues that require action. Provides clear visual warning to help users understand they need to resolve permissions before using camera/microphone features. Follows accessibility guidelines for proper user guidance.	2025-08-10 18:42:42 +02:00
lebaudantoine	120bcdc720	🚸(frontend) add permissions dialog to guide users through setup Introduce guided permissions dialog to help users understand and resolve camera/microphone access issues step-by-step. Addresses common user support requests where users cannot enable their hardware and don't understand the permission requirements. Provides clear instructions to reduce confusion and support burden. Image was quickly prototyped. It will be updated later on.	2025-08-10 18:42:42 +02:00
lebaudantoine	f1b20d7981	✨(frontend) add permissions watcher to sync valtio store with browser Introduce permissions watcher that continuously monitors browser permission changes and keeps the valtio global store synchronized with actual browser permission state.	2025-08-10 18:42:42 +02:00
lebaudantoine	95190ec690	✨(frontend) add global store for browser permissions monitoring Introduce new global state management to watch and expose browser permissions status across the application. Sets foundation for upcoming changes that will prevent the app from offering hardware features (camera/microphone) when permissions are not granted, improving user experience and reducing confusion.	2025-08-10 18:42:42 +02:00
lebaudantoine	adb99cc5d9	♻️(frontend) refactor prejoin layout for better extensibility Major refactoring of prejoin interface to improve user onboarding and camera/microphone permission handling: * Create extensible hint message system for easier addition of permission-related guidance. * Design flexible layout structure to accommodate future camera/mic options and component selection features. * Establish foundation for comprehensive prejoin redesign In upcoming commits, UX will be enhanced to a smoother user experience when joining calls and requesting media permissions.	2025-08-08 13:10:08 +02:00