🚨(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.

.github/workflows/meet.yml

@@ -82,7 +82,6 @@ jobs:
         uses: actions/setup-python@v5
         with:
           python-version: "3.13"
-          cache: "pip"
       - name: Install development dependencies
         run: pip install --user .[dev]
       - name: Check code formatting with ruff
@@ -187,7 +186,6 @@ jobs:
         uses: actions/setup-python@v5
         with:
           python-version: "3.13"
-          cache: "pip"
 
       - name: Install development dependencies
         run: pip install --user .[dev]

bin/Tiltfile

@@ -85,14 +85,6 @@ clean_old_images('localhost:5001/meet-livekit')
 
 k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))
 
-k8s_resource('meet-backend', resource_deps=['dev-backend-redis', 'dev-backend-keycloak', 'dev-backend-postgres', 'livekit-livekit-server', 'dev-backend-minio:statefulset'])
-k8s_resource('meet-backend-migrate', resource_deps=['dev-backend-postgres'])
-k8s_resource('livekit-livekit-server', resource_deps=['dev-backend-redis'])
-k8s_resource('livekit-livekit-server-test-connection', resource_deps=['livekit-livekit-server'])
-k8s_resource('meet-backend-createsuperuser', resource_deps=['meet-backend-migrate'])
-k8s_resource('dev-backend-keycloak', resource_deps=['dev-backend-keycloak-pg'])
-k8s_resource('livekit-egress', resource_deps=['livekit-livekit-server'])
-
 migration = '''
 set -eu
 # get k8s pod name from tilt resource name

src/frontend/package-lock.json

@@ -13,7 +13,6 @@
         "@livekit/track-processors": "0.5.7",
         "@pandacss/preset-panda": "0.54.0",
         "@react-aria/toast": "3.0.5",
-        "@react-types/overlays": "3.9.0",
         "@remixicon/react": "4.6.0",
         "@tanstack/react-query": "5.81.5",
         "@timephy/rnnoise-wasm": "1.0.0",
@@ -26,7 +25,7 @@
         "i18next-parser": "9.3.0",
         "i18next-resources-to-backend": "1.2.1",
         "libphonenumber-js": "1.12.10",
-        "livekit-client": "2.15.5",
+        "livekit-client": "2.15.2",
         "posthog-js": "1.256.2",
         "react": "18.3.1",
         "react-aria-components": "1.10.1",
@@ -3379,12 +3378,12 @@
       }
     },
     "node_modules/@react-types/overlays": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.9.0.tgz",
-      "integrity": "sha512-T2DqMcDN5p8vb4vu2igoLrAtuewaNImLS8jsK7th7OjwQZfIWJn5Y45jSxHtXJUddEg1LkUjXYPSXCMerMcULw==",
+      "version": "3.8.16",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.16.tgz",
+      "integrity": "sha512-Aj9jIFwALk9LiOV/s3rVie+vr5qWfaJp/6aGOuc2StSNDTHvj1urSAr3T0bT8wDlkrqnlS4JjEGE40ypfOkbAA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@react-types/shared": "^3.31.0"
+        "@react-types/shared": "^3.30.0"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -3440,9 +3439,9 @@
       }
     },
     "node_modules/@react-types/shared": {
-      "version": "3.31.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.31.0.tgz",
-      "integrity": "sha512-ua5U6V66gDcbLZe4P2QeyNgPp4YWD1ymGA6j3n+s8CGExtrCPe64v+g4mvpT8Bnb985R96e4zFT61+m0YCwqMg==",
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.30.0.tgz",
+      "integrity": "sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -7460,9 +7459,9 @@
       }
     },
     "node_modules/livekit-client": {
-      "version": "2.15.5",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.15.5.tgz",
-      "integrity": "sha512-zn36akmDlqZxlrTOUgYXtxtj35HQ44aJ+mgKat9BTSPiZru4RjEHOtp8RJE6jGoN2miJlWiOeEKHB2+ae3YrSw==",
+      "version": "2.15.2",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.15.2.tgz",
+      "integrity": "sha512-hf0A0JFN7M0iVGZxMfTk6a3cW7TNTVdqxkykjKBweORlqhQX1ITVloh6aLvplLZOxpkUE5ZVLz1DeS3+ERglog==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/mutex": "1.1.1",

src/frontend/package.json

@@ -18,7 +18,6 @@
     "@livekit/track-processors": "0.5.7",
     "@pandacss/preset-panda": "0.54.0",
     "@react-aria/toast": "3.0.5",
-    "@react-types/overlays": "3.9.0",
     "@remixicon/react": "4.6.0",
     "@tanstack/react-query": "5.81.5",
     "@timephy/rnnoise-wasm": "1.0.0",
@@ -31,7 +30,7 @@
     "i18next-parser": "9.3.0",
     "i18next-resources-to-backend": "1.2.1",
     "libphonenumber-js": "1.12.10",
-    "livekit-client": "2.15.5",
+    "livekit-client": "2.15.2",
     "posthog-js": "1.256.2",
     "react": "18.3.1",
     "react-aria-components": "1.10.1",

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -98,7 +98,6 @@ export const MainNotificationToast = () => {
         case NotificationType.ScreenRecordingLimitReached:
           toastQueue.add(
             {
-              participant,
               type: notification.type,
             },
             { timeout: NotificationDuration.ALERT }

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

@@ -12,7 +12,6 @@ import {
   RoomOptions,
   supportsAdaptiveStream,
   supportsDynacast,
-  VideoPresets,
 } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -99,23 +98,15 @@ export const Conference = ({
       },
       videoCaptureDefaults: {
         deviceId: userConfig.videoDeviceId ?? undefined,
-        resolution: userConfig.videoPublishResolution
-          ? VideoPresets[userConfig.videoPublishResolution].resolution
-          : undefined,
       },
       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.videoPublishResolution,
     userConfig.audioDeviceId,
-    userConfig.audioOutputDeviceId,
     isAdaptiveStreamSupported,
     isDynacastSupported,
   ])

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

@@ -3,13 +3,7 @@ import { usePreviewTracks } from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  createLocalVideoTrack,
-  createLocalAudioTrack,
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-} from 'livekit-client'
+import { LocalVideoTrack, Track } from 'livekit-client'
 import { H } from '@/primitives/H'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
@@ -20,8 +14,6 @@ import {
   EffectsConfiguration,
   EffectsConfigurationProps,
 } from '../livekit/components/effects/EffectsConfiguration'
-import { SelectDevice } from '../livekit/components/controls/Device/SelectDevice'
-import { ToggleDevice } from '../livekit/components/controls/Device/ToggleDevice'
 import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { isMobileBrowser } from '@livekit/components-core'
@@ -34,11 +26,11 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
-import { openPermissionsDialog } from '@/stores/permissions'
-import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
-import { isSafari } from '@/utils/livekit'
-import type { LocalUserChoices } from '@/stores/userChoices'
-import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
+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)
 
@@ -109,13 +101,11 @@ export const Join = ({
       audioEnabled,
       videoEnabled,
       audioDeviceId,
-      audioOutputDeviceId,
       videoDeviceId,
       processorSerialized,
       username,
     },
     saveAudioInputEnabled,
-    saveAudioOutputDeviceId,
     saveVideoInputEnabled,
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
@@ -123,44 +113,19 @@ export const Join = ({
     saveProcessorSerialized,
   } = usePersistentUserChoices()
 
-  const initialUserChoices = useRef<LocalUserChoices | null>(null)
-
-  if (initialUserChoices.current === null) {
-    initialUserChoices.current = {
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      audioOutputDeviceId,
-      videoDeviceId,
-      processorSerialized,
-      username,
-    }
-  }
-
   const tracks = usePreviewTracks(
     {
-      audio: !!initialUserChoices.current &&
-        initialUserChoices.current?.audioEnabled && {
-          deviceId: initialUserChoices.current.audioDeviceId,
-        },
-      video: !!initialUserChoices.current &&
-        initialUserChoices.current?.videoEnabled && {
-          deviceId: initialUserChoices.current.videoDeviceId,
-          processor:
-            BackgroundProcessorFactory.deserializeProcessor(
-              processorSerialized
-            ),
-        },
+      audio: { deviceId: audioDeviceId },
+      video: {
+        deviceId: videoDeviceId,
+        processor:
+          BackgroundProcessorFactory.deserializeProcessor(processorSerialized),
+      },
     },
     onError
   )
 
-  const [dynamicVideoTrack, setDynamicVideoTrack] =
-    useState<LocalVideoTrack | null>(null)
-  const [dynamicAudioTrack, setDynamicAudioTrack] =
-    useState<LocalAudioTrack | null>(null)
-
-  const previewVideoTrack = useMemo(
+  const videoTrack = useMemo(
     () =>
       tracks?.filter(
         (track) => track.kind === Track.Kind.Video
@@ -168,100 +133,18 @@ export const Join = ({
     [tracks]
   )
 
-  const previewAudioTrack = useMemo(
+  const audioTrack = useMemo(
     () =>
       tracks?.filter(
         (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalAudioTrack,
+      )[0] as LocalVideoTrack,
     [tracks]
   )
 
-  /*
-   * Dynamic track creation strategy: Only create a dynamic track if the user initially disabled audio/video
-   * but now wants to enable it. This is a "just-in-time" acquisition pattern where we create the track
-   * on-demand. We avoid creating tracks when the user explicitly requested them to be disabled.
-   */
-  useEffect(() => {
-    const createVideoTrack = async () => {
-      try {
-        const track = await createLocalVideoTrack({
-          deviceId: { exact: videoDeviceId },
-          processor:
-            BackgroundProcessorFactory.deserializeProcessor(
-              processorSerialized
-            ),
-        })
-        setDynamicVideoTrack(track)
-      } catch (error) {
-        onError(error as Error)
-      }
-    }
-
-    if (
-      videoEnabled &&
-      !initialUserChoices.current?.videoEnabled &&
-      !previewVideoTrack &&
-      !dynamicVideoTrack
-    ) {
-      createVideoTrack()
-    }
-  }, [
-    videoEnabled,
-    videoDeviceId,
-    processorSerialized,
-    previewVideoTrack,
-    dynamicVideoTrack,
-  ])
-
-  useEffect(() => {
-    const createAudioTrack = async () => {
-      try {
-        const track = await createLocalAudioTrack({
-          deviceId: { exact: audioDeviceId },
-        })
-        setDynamicAudioTrack(track)
-      } catch (error) {
-        onError(error as Error)
-      }
-    }
-    if (
-      audioEnabled &&
-      !initialUserChoices.current?.audioEnabled &&
-      !previewAudioTrack &&
-      !dynamicAudioTrack
-    ) {
-      createAudioTrack()
-    }
-  }, [audioEnabled, audioDeviceId, previewAudioTrack, dynamicAudioTrack])
-
-  // Cleanup dynamic tracks
-  useEffect(() => {
-    return () => {
-      dynamicVideoTrack?.stop()
-    }
-  }, [dynamicVideoTrack])
-  useEffect(() => {
-    return () => {
-      dynamicAudioTrack?.stop()
-    }
-  }, [dynamicAudioTrack])
-
-  // Final tracks (dynamic takes precedence over preview)
-  const videoTrack = dynamicVideoTrack || previewVideoTrack
-  const audioTrack = dynamicAudioTrack || previewAudioTrack
-
   // LiveKit by default populates device choices with "default" value.
   // Instead, use the current device id used by the preview track as a default
-  useResolveInitiallyDefaultDeviceId(
-    audioDeviceId,
-    audioTrack,
-    saveAudioInputDeviceId
-  )
-  useResolveInitiallyDefaultDeviceId(
-    videoDeviceId,
-    videoTrack,
-    saveVideoInputDeviceId
-  )
+  useResolveDefaultDeviceId(audioDeviceId, audioTrack, saveAudioInputDeviceId)
+  useResolveDefaultDeviceId(videoDeviceId, videoTrack, saveVideoInputDeviceId)
 
   const videoEl = useRef(null)
   const isVideoInitiated = useRef(false)
@@ -277,6 +160,7 @@ export const Join = ({
     }
 
     if (videoElement && videoTrack && videoEnabled) {
+      videoTrack.unmute()
       videoTrack.attach(videoElement)
       videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
     }
@@ -349,8 +233,13 @@ export const Join = ({
     enterRoom()
   }
 
-  const isCameraDeniedOrPrompted = useCannotUseDevice('videoinput')
-  const isMicrophoneDeniedOrPrompted = useCannotUseDevice('audioinput')
+  const permissions = useSnapshot(permissionsStore)
+
+  const isCameraDeniedOrPrompted =
+    permissions.isCameraDenied || permissions.isCameraPrompted
+
+  const isMicrophoneDeniedOrPrompted =
+    permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
 
   const hintMessage = useMemo(() => {
     if (isCameraDeniedOrPrompted) {
@@ -659,30 +548,18 @@ export const Join = ({
                   })}
                 >
                   <ToggleDevice
-                    kind="audioinput"
-                    context="join"
-                    enabled={audioEnabled}
-                    toggle={async () => {
-                      saveAudioInputEnabled(!audioEnabled)
-                      if (audioEnabled) {
-                        await audioTrack?.mute()
-                      } else {
-                        await audioTrack?.unmute()
-                      }
-                    }}
+                    source={Track.Source.Microphone}
+                    initialState={audioEnabled}
+                    track={audioTrack}
+                    onChange={(enabled) => saveAudioInputEnabled(enabled)}
+                    onDeviceError={(error) => console.error(error)}
                   />
                   <ToggleDevice
-                    kind="videoinput"
-                    context="join"
-                    enabled={videoEnabled}
-                    toggle={async () => {
-                      saveVideoInputEnabled(!videoEnabled)
-                      if (videoEnabled) {
-                        await videoTrack?.mute()
-                      } else {
-                        await videoTrack?.unmute()
-                      }
-                    }}
+                    source={Track.Source.Camera}
+                    initialState={videoEnabled}
+                    track={videoTrack}
+                    onChange={(enabled) => saveVideoInputEnabled(enabled)}
+                    onDeviceError={(error) => console.error(error)}
                   />
                 </div>
                 <div
@@ -713,55 +590,24 @@ export const Join = ({
             >
               <div
                 className={css({
-                  width: '30%',
+                  width: '50%',
                 })}
               >
                 <SelectDevice
                   kind="audioinput"
                   id={audioDeviceId}
-                  onSubmit={async (id) => {
-                    try {
-                      saveAudioInputDeviceId(id)
-                      if (audioTrack) {
-                        await audioTrack.setDeviceId({ exact: id })
-                      }
-                    } catch (err) {
-                      console.error('Failed to switch microphone device', err)
-                    }
-                  }}
+                  onSubmit={saveAudioInputDeviceId}
                 />
               </div>
-              {!isSafari() && (
-                <div
-                  className={css({
-                    width: '30%',
-                  })}
-                >
-                  <SelectDevice
-                    kind="audiooutput"
-                    id={audioOutputDeviceId}
-                    onSubmit={saveAudioOutputDeviceId}
-                  />
-                </div>
-              )}
               <div
                 className={css({
-                  width: '30%',
+                  width: '50%',
                 })}
               >
                 <SelectDevice
                   kind="videoinput"
                   id={videoDeviceId}
-                  onSubmit={async (id) => {
-                    try {
-                      saveVideoInputDeviceId(id)
-                      if (videoTrack) {
-                        await await videoTrack.setDeviceId({ exact: id })
-                      }
-                    } catch (err) {
-                      console.error('Failed to switch camera device', err)
-                    }
-                  }}
+                  onSubmit={saveVideoInputDeviceId}
                 />
               </div>
             </div>

src/frontend/src/features/rooms/components/join/SelectDevice.tsx

@@ -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}
+    />
+  )
+}

src/frontend/src/features/rooms/components/join/ToggleDevice.tsx

@@ -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,
+      }}
+    />
+  )
+}

src/frontend/src/features/rooms/livekit/components/FullScreenShareWarning.tsx

@@ -1,7 +1,7 @@
 import { css } from '@/styled-system/css'
 import { Button, Text } from '@/primitives'
 import { useMemo, useRef } from 'react'
-import { screenSharePreferenceStore } from '@/stores/screenSharePreferences'
+import { ScreenSharePreferenceStore } from '@/stores/ScreenSharePreferences'
 import { useSnapshot } from 'valtio'
 import { useLocalParticipant } from '@livekit/components-react'
 import { useSize } from '../hooks/useResizeObserver'
@@ -18,7 +18,7 @@ export const FullScreenShareWarning = ({
   const warningContainerRef = useRef<HTMLDivElement>(null)
   const { width: containerWidth } = useSize(warningContainerRef)
   const { localParticipant } = useLocalParticipant()
-  const screenSharePreferences = useSnapshot(screenSharePreferenceStore)
+  const screenSharePreferences = useSnapshot(ScreenSharePreferenceStore)
 
   const isFullScreenSharing = useMemo(() => {
     if (trackReference?.source !== 'screen_share') return false
@@ -62,7 +62,7 @@ export const FullScreenShareWarning = ({
   }
 
   const handleDismissWarning = () => {
-    screenSharePreferenceStore.enabled = false
+    ScreenSharePreferenceStore.enabled = false
   }
 
   if (!shouldShowWarning) return null

src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx

@@ -1,130 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
-import { Button, Popover } from '@/primitives'
-import { RiArrowUpSLine } from '@remixicon/react'
-import { Track } from 'livekit-client'
-
-import { ToggleDevice } from './ToggleDevice'
-import { css } from '@/styled-system/css'
-import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
-import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import Source = Track.Source
-import * as React from 'react'
-import { SelectDevice } from './SelectDevice'
-import { SettingsButton } from './SettingsButton'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
-
-type AudioDevicesControlProps = Omit<
-  UseTrackToggleProps<Source.Microphone>,
-  'source' | 'onChange'
-> & {
-  hideMenu?: boolean
-}
-
-export const AudioDevicesControl = ({
-  hideMenu,
-  ...props
-}: AudioDevicesControlProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-
-  const {
-    userChoices: { audioDeviceId, audioOutputDeviceId },
-    saveAudioInputDeviceId,
-    saveAudioInputEnabled,
-    saveAudioOutputDeviceId,
-  } = usePersistentUserChoices()
-
-  const onChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
-    [saveAudioInputEnabled]
-  )
-
-  const trackProps = useTrackToggle({
-    source: Source.Microphone,
-    onChange,
-    ...props,
-  })
-
-  const kind = 'audioinput'
-  const cannotUseDevice = useCannotUseDevice(kind)
-  const selectLabel = t(`settings.${SettingsDialogExtendedKey.AUDIO}`)
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        gap: '1px',
-      })}
-    >
-      <ToggleDevice
-        {...trackProps}
-        kind={kind}
-        toggle={trackProps.toggle as () => Promise<void>}
-        overrideToggleButtonProps={{
-          ...(hideMenu
-            ? {
-                groupPosition: undefined,
-              }
-            : {}),
-        }}
-      />
-      {!hideMenu && (
-        <Popover variant="dark" withArrow={false}>
-          <Button
-            tooltip={selectLabel}
-            aria-label={selectLabel}
-            groupPosition="right"
-            square
-            variant={
-              trackProps.enabled && !cannotUseDevice ? 'primaryDark' : 'error2'
-            }
-          >
-            <RiArrowUpSLine />
-          </Button>
-          {({ close }) => (
-            <div
-              className={css({
-                maxWidth: '36rem',
-                padding: '0.15rem',
-                display: 'flex',
-                gap: '0.5rem',
-              })}
-            >
-              <div
-                style={{
-                  flex: '1 1 0',
-                  minWidth: 0,
-                }}
-              >
-                <SelectDevice
-                  context="room"
-                  kind={kind}
-                  id={audioDeviceId}
-                  onSubmit={saveAudioInputDeviceId}
-                />
-              </div>
-              <div
-                style={{
-                  flex: '1 1 0',
-                  minWidth: 0,
-                }}
-              >
-                <SelectDevice
-                  context="room"
-                  kind="audiooutput"
-                  id={audioOutputDeviceId}
-                  onSubmit={saveAudioOutputDeviceId}
-                />
-              </div>
-              <SettingsButton
-                settingTab={SettingsDialogExtendedKey.AUDIO}
-                onPress={close}
-              />
-            </div>
-          )}
-        </Popover>
-      )}
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx

@@ -1,123 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-import { useEffect, useMemo } from 'react'
-import { Select, SelectProps } from '@/primitives/Select'
-import { Placement } from '@react-types/overlays'
-import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import { useDeviceIcons } from '@/features/rooms/livekit/hooks/useDeviceIcons'
-
-type DeviceItems = Array<{ value: string; label: string }>
-
-type SelectDeviceContext = {
-  variant?: 'light' | 'dark'
-  placement?: Placement
-}
-
-type SelectDeviceProps = {
-  id?: string
-  onSubmit?: (id: string) => void
-  kind: MediaDeviceKind
-  context?: 'join' | 'room'
-}
-
-type SelectDevicePermissionsProps<T> = SelectDeviceProps &
-  Pick<SelectProps<T>, 'placement' | 'variant' | 'iconComponent'>
-
-const SelectDevicePermissions = <T extends string | number>({
-  id,
-  kind,
-  onSubmit,
-  iconComponent,
-  ...props
-}: SelectDevicePermissionsProps<T>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-
-  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,
-    }))
-
-  /**
-   * FALLBACK AUDIO OUTPUT DEVICE SELECTION
-   * Auto-selects the only available audio output device when currently on 'default'
-   */
-  useEffect(() => {
-    if (
-      kind !== 'audiooutput' ||
-      items.length !== 1 ||
-      items[0].value === 'default' ||
-      activeDeviceId !== 'default'
-    )
-      return
-    onSubmit?.(items[0].value)
-    setActiveMediaDevice(items[0].value)
-  }, [items, onSubmit, kind, setActiveMediaDevice, activeDeviceId])
-
-  const selectedKey = id || activeDeviceId
-
-  return (
-    <Select
-      aria-label={t(`${kind}.choose`)}
-      label=""
-      isDisabled={items.length === 0}
-      items={items}
-      iconComponent={iconComponent}
-      placeholder={items.length === 0 ? t('loading') : t('select')}
-      selectedKey={selectedKey}
-      onSelectionChange={(key) => {
-        if (key === selectedKey) return
-        onSubmit?.(key as string)
-        setActiveMediaDevice(key as string)
-      }}
-      {...props}
-    />
-  )
-}
-
-export const SelectDevice = ({
-  id,
-  onSubmit,
-  kind,
-  context = 'join',
-}: SelectDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-
-  const contextProps = useMemo<SelectDeviceContext>(() => {
-    if (context == 'room') {
-      return { variant: 'dark', placement: 'top' }
-    }
-    return {}
-  }, [context])
-
-  const deviceIcons = useDeviceIcons(kind)
-  const cannotUseDevice = useCannotUseDevice(kind)
-
-  if (cannotUseDevice) {
-    return (
-      <Select
-        aria-label={t(`${kind}.permissionsNeeded`)}
-        label=""
-        isDisabled={true}
-        items={[]}
-        placeholder={t('permissionsNeeded')}
-        iconComponent={deviceIcons.select}
-        {...contextProps}
-      />
-    )
-  }
-
-  return (
-    <SelectDevicePermissions
-      id={id}
-      onSubmit={onSubmit}
-      kind={kind}
-      iconComponent={deviceIcons.select}
-      {...contextProps}
-    />
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx

@@ -1,32 +0,0 @@
-import { Button } from '@/primitives'
-import { RiSettings3Line } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
-
-export const SettingsButton = ({
-  settingTab,
-  onPress,
-}: {
-  settingTab: SettingsDialogExtendedKey
-  onPress?: () => void
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const { openSettingsDialog } = useSettingsDialog()
-
-  return (
-    <Button
-      size="sm"
-      square
-      tooltip={t(`settings.${settingTab}`)}
-      aria-label={t(`settings.${settingTab}`)}
-      variant="primaryDark"
-      onPress={() => {
-        openSettingsDialog(settingTab)
-        onPress?.()
-      }}
-    >
-      <RiSettings3Line size={24} />
-    </Button>
-  )
-}

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

@@ -1,142 +0,0 @@
-import { ToggleButton } from '@/primitives'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useMemo, useState } from 'react'
-import { appendShortcutLabel } from '@/features/shortcuts/utils'
-import { useTranslation } from 'react-i18next'
-import { PermissionNeededButton } from './PermissionNeededButton'
-import useLongPress from '@/features/shortcuts/useLongPress'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import {
-  useIsSpeaking,
-  useLocalParticipant,
-  useMaybeRoomContext,
-} from '@livekit/components-react'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { openPermissionsDialog } from '@/stores/permissions'
-import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import { useDeviceIcons } from '../../../hooks/useDeviceIcons'
-import { useDeviceShortcut } from '../../../hooks/useDeviceShortcut'
-import { ToggleSource, CaptureOptionsBySource } from '@livekit/components-core'
-
-type ToggleDeviceStyleProps = {
-  variant?: NonNullable<ButtonRecipeProps>['variant']
-  errorVariant?: NonNullable<ButtonRecipeProps>['variant']
-  toggleButtonProps?: Partial<ToggleButtonProps>
-}
-
-export type ToggleDeviceProps<T extends ToggleSource> = {
-  enabled: boolean
-  toggle: (
-    forceState?: boolean,
-    captureOptions?: CaptureOptionsBySource<T>
-  ) => Promise<void | boolean | undefined>
-  context?: 'room' | 'join'
-  kind: 'audioinput' | 'videoinput'
-  overrideToggleButtonProps?: Partial<ToggleButtonProps>
-}
-
-export const ToggleDevice = <T extends ToggleSource>({
-  kind,
-  enabled,
-  toggle,
-  context = 'room',
-  overrideToggleButtonProps,
-}: ToggleDeviceProps<T>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-
-  const {
-    variant,
-    errorVariant,
-    toggleButtonProps: computedToggleButtonProps,
-  } = useMemo<ToggleDeviceStyleProps>(() => {
-    if (context === 'join') {
-      return {
-        variant: 'whiteCircle',
-        errorVariant: 'errorCircle',
-        toggleButtonProps: {
-          groupPosition: undefined,
-        },
-      } as ToggleDeviceStyleProps
-    }
-    return {
-      variant: 'primaryDark',
-      errorVariant: 'error2',
-      toggleButtonProps: {
-        groupPosition: 'left',
-      },
-    } as ToggleDeviceStyleProps
-  }, [context])
-
-  const [pushToTalk, setPushToTalk] = useState(false)
-
-  const onKeyDown = () => {
-    if (pushToTalk || enabled) return
-    toggle()
-    setPushToTalk(true)
-  }
-  const onKeyUp = () => {
-    if (!pushToTalk) return
-    toggle()
-    setPushToTalk(false)
-  }
-
-  const deviceIcons = useDeviceIcons(kind)
-  const cannotUseDevice = useCannotUseDevice(kind)
-  const deviceShortcut = useDeviceShortcut(kind)
-
-  useRegisterKeyboardShortcut({
-    shortcut: deviceShortcut,
-    handler: async () => await toggle(),
-    isDisabled: cannotUseDevice,
-  })
-  useLongPress({
-    keyCode: kind === 'audioinput' ? 'Space' : undefined,
-    onKeyDown,
-    onKeyUp,
-    isDisabled: cannotUseDevice,
-  })
-
-  const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `selectDevice.${kind}`,
-    })
-    return deviceShortcut ? appendShortcutLabel(label, deviceShortcut) : label
-  }, [enabled, kind, deviceShortcut, t])
-
-  const Icon =
-    enabled && !cannotUseDevice ? deviceIcons.toggleOn : deviceIcons.toggleOff
-
-  const roomContext = useMaybeRoomContext()
-  if (kind === 'audioinput' && pushToTalk && roomContext) {
-    return <ActiveSpeakerWrapper />
-  }
-
-  return (
-    <div style={{ position: 'relative' }}>
-      {cannotUseDevice && <PermissionNeededButton />}
-      <ToggleButton
-        isSelected={!enabled}
-        variant={enabled && !cannotUseDevice ? variant : errorVariant}
-        shySelected
-        onPress={() => (cannotUseDevice ? openPermissionsDialog() : toggle())}
-        aria-label={toggleLabel}
-        tooltip={
-          cannotUseDevice
-            ? t('tooltip', { keyPrefix: 'permissionsButton' })
-            : toggleLabel
-        }
-        {...computedToggleButtonProps}
-        {...overrideToggleButtonProps}
-      >
-        <Icon />
-      </ToggleButton>
-    </div>
-  )
-}
-
-const ActiveSpeakerWrapper = () => {
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-}

src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx

@@ -1,164 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
-import { Button, Popover } from '@/primitives'
-import { RiArrowUpSLine, RiImageCircleAiFill } from '@remixicon/react'
-import { Track, VideoCaptureOptions } from 'livekit-client'
-
-import { ToggleDevice } from './ToggleDevice'
-import { css } from '@/styled-system/css'
-import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
-import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { BackgroundProcessorFactory } from '../../blur'
-import Source = Track.Source
-import * as React from 'react'
-import { SelectDevice } from './SelectDevice'
-import { SettingsButton } from './SettingsButton'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
-
-const EffectsButton = ({ onPress }: { onPress: () => void }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const { isEffectsOpen, toggleEffects } = useSidePanel()
-  return (
-    <Button
-      size="sm"
-      square
-      tooltip={t('effects')}
-      aria-label={t('effects')}
-      variant="primaryDark"
-      onPress={() => {
-        if (!isEffectsOpen) toggleEffects()
-        onPress()
-      }}
-    >
-      <RiImageCircleAiFill size={24} />
-    </Button>
-  )
-}
-
-type VideoDeviceControlProps = Omit<
-  UseTrackToggleProps<Source.Camera>,
-  'source' | 'onChange'
-> & {
-  hideMenu?: boolean
-}
-
-export const VideoDeviceControl = ({
-  hideMenu,
-  ...props
-}: VideoDeviceControlProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-
-  const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } =
-    usePersistentUserChoices()
-
-  const onChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
-    [saveVideoInputEnabled]
-  )
-
-  const trackProps = useTrackToggle({
-    source: Source.Camera,
-    onChange,
-    ...props,
-  })
-
-  const kind = 'videoinput'
-  const cannotUseDevice = useCannotUseDevice(kind)
-
-  const toggleWithProcessor = async () => {
-    /**
-     * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-     * Before, we had the following bug:
-     * 1 - Configure a processor on join screen
-     * 2 - Turn off camera on join screen
-     * 3 - Join the room
-     * 4 - Turn on the camera
-     * 5 - No processor is applied to the camera
-     * Expected: The processor is applied.
-     *
-     * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-     */
-    const processor = BackgroundProcessorFactory.deserializeProcessor(
-      userChoices.processorSerialized
-    )
-
-    const toggle = trackProps.toggle as (
-      forceState: boolean,
-      captureOptions: VideoCaptureOptions
-    ) => Promise<void>
-
-    await toggle(!trackProps.enabled, {
-      processor: processor,
-    } as VideoCaptureOptions)
-  }
-
-  const selectLabel = t(`settings.${SettingsDialogExtendedKey.VIDEO}`)
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        gap: '1px',
-      })}
-    >
-      <ToggleDevice
-        {...trackProps}
-        kind={kind}
-        toggle={toggleWithProcessor}
-        overrideToggleButtonProps={{
-          ...(hideMenu
-            ? {
-                groupPosition: undefined,
-              }
-            : {}),
-        }}
-      />
-      {!hideMenu && (
-        <Popover variant="dark" withArrow={false}>
-          <Button
-            tooltip={selectLabel}
-            aria-label={selectLabel}
-            groupPosition="right"
-            square
-            variant={
-              trackProps.enabled && !cannotUseDevice ? 'primaryDark' : 'error2'
-            }
-          >
-            <RiArrowUpSLine />
-          </Button>
-          {({ close }) => (
-            <div
-              className={css({
-                maxWidth: '36rem',
-                padding: '0.15rem',
-                display: 'flex',
-                gap: '0.5rem',
-              })}
-            >
-              <div
-                style={{
-                  flex: '1 1 0',
-                  minWidth: 0,
-                }}
-              >
-                <SelectDevice
-                  context="room"
-                  kind={kind}
-                  id={userChoices.videoDeviceId}
-                  onSubmit={saveVideoInputDeviceId}
-                />
-              </div>
-              <EffectsButton onPress={close} />
-              <SettingsButton
-                settingTab={SettingsDialogExtendedKey.VIDEO}
-                onPress={close}
-              />
-            </div>
-          )}
-        </Popover>
-      )}
-    </div>
-  )
-}

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

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

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

@@ -0,0 +1,171 @@
+import { useTranslation } from 'react-i18next'
+import {
+  useMediaDeviceSelect,
+  useTrackToggle,
+  UseTrackToggleProps,
+} from '@livekit/components-react'
+import { Button, Menu, MenuList } from '@/primitives'
+import { RiArrowUpSLine } from '@remixicon/react'
+import {
+  LocalAudioTrack,
+  LocalVideoTrack,
+  Track,
+  VideoCaptureOptions,
+} from 'livekit-client'
+
+import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
+import { css } from '@/styled-system/css'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { useEffect, useMemo } from 'react'
+import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
+import { BackgroundProcessorFactory } from '../blur'
+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
+    initialDeviceId?: string
+    onActiveDeviceChange: (deviceId: string) => void
+    source: ToggleSource
+    variant?: NonNullable<ButtonRecipeProps>['variant']
+    menuVariant?: 'dark' | 'light'
+    hideMenu?: boolean
+  }
+
+export const SelectToggleDevice = <T extends ToggleSource>({
+  track,
+  initialDeviceId,
+  onActiveDeviceChange,
+  hideMenu,
+  variant = 'primaryDark',
+  menuVariant = 'light',
+  ...props
+}: SelectToggleDeviceProps<T>) => {
+  const config = TOGGLE_DEVICE_CONFIG[props.source]
+  if (!config) {
+    throw new Error('Invalid source')
+  }
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const trackProps = useTrackToggle(props)
+
+  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) {
+      /**
+       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
+       * Before, we had the following bug:
+       * 1 - Configure a processor on join screen
+       * 2 - Turn off camera on join screen
+       * 3 - Join the room
+       * 4 - Turn on the camera
+       * 5 - No processor is applied to the camera
+       * Expected: The processor is applied.
+       *
+       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
+       */
+      const processor = BackgroundProcessorFactory.deserializeProcessor(
+        userChoices.processorSerialized
+      )
+
+      const toggle = trackProps.toggle as (
+        forceState: boolean,
+        captureOptions: VideoCaptureOptions
+      ) => Promise<void>
+
+      toggle(!trackProps.enabled, {
+        processor: processor,
+      } as VideoCaptureOptions)
+    } else {
+      trackProps.toggle()
+    }
+  }
+
+  const { devices, activeDeviceId, setActiveMediaDevice } =
+    useMediaDeviceSelect({ kind: config.kind, track })
+
+  /**
+   * When providing only track outside of a room context, activeDeviceId is undefined.
+   * So we need to initialize it with the initialDeviceId.
+   * nb: I don't understand why useMediaDeviceSelect cannot infer it from track device id.
+   */
+  useEffect(() => {
+    if (initialDeviceId !== undefined) {
+      setActiveMediaDevice(initialDeviceId)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setActiveMediaDevice])
+
+  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        gap: '1px',
+      })}
+    >
+      <ToggleDevice
+        {...trackProps}
+        config={config}
+        variant={variant}
+        toggle={toggle}
+        isPermissionDeniedOrPrompted={isPermissionDeniedOrPrompted}
+        toggleButtonProps={{
+          ...(hideMenu
+            ? {
+                groupPosition: undefined,
+              }
+            : {}),
+        }}
+      />
+      {!hideMenu && (
+        <Menu variant={menuVariant}>
+          <Button
+            isDisabled={isPermissionDeniedOrPrompted}
+            tooltip={selectLabel}
+            aria-label={selectLabel}
+            groupPosition="right"
+            square
+            variant={
+              trackProps.enabled && !isPermissionDeniedOrPrompted
+                ? variant
+                : 'error2'
+            }
+          >
+            <RiArrowUpSLine />
+          </Button>
+          <MenuList
+            items={devices.map((d) => ({
+              value: d.deviceId,
+              label: d.label,
+            }))}
+            selectedItem={activeDeviceId}
+            onAction={(value) => {
+              setActiveMediaDevice(value as string)
+              onActiveDeviceChange(value as string)
+            }}
+            variant={menuVariant}
+          />
+        </Menu>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
+import React, { createContext, useContext, useState } from 'react'
+
+const SettingsDialogContext = createContext<
+  | {
+      dialogOpen: boolean
+      setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>
+    }
+  | undefined
+>(undefined)
+
+export const SettingsDialogProvider: React.FC<{
+  children: React.ReactNode
+}> = ({ children }) => {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  return (
+    <SettingsDialogContext.Provider value={{ dialogOpen, setDialogOpen }}>
+      {children}
+      <SettingsDialogExtended
+        isOpen={dialogOpen}
+        onOpenChange={(v) => !v && setDialogOpen(false)}
+      />
+    </SettingsDialogContext.Provider>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useSettingsDialog = () => {
+  const context = useContext(SettingsDialogContext)
+  if (!context) {
+    throw new Error(
+      'useSettingsDialog must be used within a SettingsDialogProvider'
+    )
+  }
+  return context
+}

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

@@ -0,0 +1,103 @@
+import { ToggleButton } from '@/primitives'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useMemo, useState } from 'react'
+import { appendShortcutLabel } from '@/features/shortcuts/utils'
+import { useTranslation } from 'react-i18next'
+import { PermissionNeededButton } from './PermissionNeededButton'
+import useLongPress from '@/features/shortcuts/useLongPress'
+import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
+import {
+  useIsSpeaking,
+  useLocalParticipant,
+  useMaybeRoomContext,
+} 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: ToggleDeviceConfig
+  variant?: NonNullable<ButtonRecipeProps>['variant']
+  errorVariant?: NonNullable<ButtonRecipeProps>['variant']
+  toggleButtonProps?: Partial<ToggleButtonProps>
+}
+
+export const ToggleDevice = ({
+  config,
+  enabled,
+  toggle,
+  variant = 'primaryDark',
+  errorVariant = 'error2',
+  toggleButtonProps,
+  isPermissionDeniedOrPrompted,
+}: ToggleDeviceProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const { kind, shortcut, iconOn, iconOff, longPress } = config
+
+  const [pushToTalk, setPushToTalk] = useState(false)
+
+  const onKeyDown = () => {
+    if (pushToTalk || enabled) return
+    toggle()
+    setPushToTalk(true)
+  }
+  const onKeyUp = () => {
+    if (!pushToTalk) return
+    toggle()
+    setPushToTalk(false)
+  }
+
+  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
+  useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })
+
+  const toggleLabel = useMemo(() => {
+    const label = t(enabled ? 'disable' : 'enable', {
+      keyPrefix: `join.${kind}`,
+    })
+    return shortcut ? appendShortcutLabel(label, shortcut) : label
+  }, [enabled, kind, shortcut, t])
+
+  const Icon = enabled && !isPermissionDeniedOrPrompted ? iconOn : iconOff
+
+  const context = useMaybeRoomContext()
+  if (kind === 'audioinput' && pushToTalk && context) {
+    return <ActiveSpeakerWrapper />
+  }
+
+  return (
+    <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>
+  )
+}
+
+const ActiveSpeakerWrapper = () => {
+  const { localParticipant } = useLocalParticipant()
+  const isSpeaking = useIsSpeaking(localParticipant)
+  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
+}

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

@@ -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

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

@@ -1,35 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { useMemo } from 'react'
-import { permissionsStore } from '@/stores/permissions'
-
-export const useCannotUseDevice = (kind: MediaDeviceKind) => {
-  const {
-    isLoading,
-    isMicrophoneDenied,
-    isMicrophonePrompted,
-    isCameraDenied,
-    isCameraPrompted,
-  } = useSnapshot(permissionsStore)
-
-  return useMemo(() => {
-    if (isLoading) return true
-
-    switch (kind) {
-      case 'audioinput':
-      case 'audiooutput': // audiooutput uses microphone permissions
-        return isMicrophoneDenied || isMicrophonePrompted
-      case 'videoinput':
-        return isCameraDenied || isCameraPrompted
-
-      default:
-        return false
-    }
-  }, [
-    kind,
-    isLoading,
-    isMicrophoneDenied,
-    isMicrophonePrompted,
-    isCameraDenied,
-    isCameraPrompted,
-  ])
-}

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

@@ -1,37 +0,0 @@
-import {
-  RemixiconComponentType,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-  RiVolumeDownLine,
-  RiVolumeMuteLine,
-} from '@remixicon/react'
-
-export interface DeviceIcons {
-  toggleOn: RemixiconComponentType
-  toggleOff: RemixiconComponentType
-  select: RemixiconComponentType
-}
-
-const ICONS: Record<MediaDeviceKind | 'default', DeviceIcons> = {
-  audioinput: {
-    toggleOn: RiMicLine,
-    toggleOff: RiMicOffLine,
-    select: RiMicLine,
-  },
-  videoinput: {
-    toggleOn: RiVideoOnLine,
-    toggleOff: RiVideoOffLine,
-    select: RiVideoOnLine,
-  },
-  audiooutput: {
-    toggleOn: RiVolumeDownLine,
-    toggleOff: RiVolumeMuteLine,
-    select: RiVolumeDownLine,
-  },
-  default: { toggleOn: RiMicLine, toggleOff: RiMicOffLine, select: RiMicLine },
-}
-
-export const useDeviceIcons = (kind: MediaDeviceKind): DeviceIcons =>
-  ICONS[kind] ?? ICONS.default

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

@@ -1,21 +0,0 @@
-import { useMemo } from 'react'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export const useDeviceShortcut = (kind: MediaDeviceKind) => {
-  return useMemo<Shortcut | undefined>(() => {
-    switch (kind) {
-      case 'audioinput':
-        return {
-          key: 'e',
-          ctrlKey: true,
-        }
-      case 'videoinput':
-        return {
-          key: 'd',
-          ctrlKey: true,
-        }
-      default:
-        return undefined
-    }
-  }, [kind])
-}

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

@@ -1,8 +1,6 @@
 import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
-import type { VideoResolution } from '@/stores/userChoices'
 import { ProcessorSerialized } from '@/features/rooms/livekit/components/blur'
-import type { VideoQuality } from 'livekit-client'
 
 export function usePersistentUserChoices() {
   const userChoicesSnap = useSnapshot(userChoicesStore)
@@ -18,18 +16,9 @@ export function usePersistentUserChoices() {
     saveAudioInputDeviceId: (deviceId: string) => {
       userChoicesStore.audioDeviceId = deviceId
     },
-    saveAudioOutputDeviceId: (deviceId: string) => {
-      userChoicesStore.audioOutputDeviceId = deviceId
-    },
     saveVideoInputDeviceId: (deviceId: string) => {
       userChoicesStore.videoDeviceId = deviceId
     },
-    saveVideoPublishResolution: (resolution: VideoResolution) => {
-      userChoicesStore.videoPublishResolution = resolution
-    },
-    saveVideoSubscribeQuality: (quality: VideoQuality) => {
-      userChoicesStore.videoSubscribeQuality = quality
-    },
     saveUsername: (username: string) => {
       userChoicesStore.username = username
     },

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

@@ -1,21 +1,17 @@
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 
-export const useResolveInitiallyDefaultDeviceId = <
+export const useResolveDefaultDeviceId = <
   T extends { getDeviceId(): Promise<string | undefined> },
 >(
   currentId: string,
   track: T | undefined,
   save: (id: string) => void
 ) => {
-  const isInitiated = useRef(false)
   useEffect(() => {
-    if (currentId !== 'default' || !track || isInitiated.current) return
+    if (currentId !== 'default' || !track) return
     const resolveDefaultDeviceId = async () => {
       const actualDeviceId = await track.getDeviceId()
-      if (actualDeviceId && actualDeviceId !== 'default') {
-        isInitiated.current = true
-        save(actualDeviceId)
-      }
+      if (actualDeviceId && actualDeviceId !== 'default') save(actualDeviceId)
     }
     resolveDefaultDeviceId()
   }, [currentId, track, save])

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

@@ -1,51 +0,0 @@
-import { useEffect } from 'react'
-import { usePersistentUserChoices } from './usePersistentUserChoices'
-import { useRoomContext } from '@livekit/components-react'
-import {
-  RemoteParticipant,
-  RemoteTrackPublication,
-  RoomEvent,
-  Track,
-  VideoQuality,
-} from 'livekit-client'
-
-/**
- * This hook sets initial video quality for new participants as they join.
- * LiveKit doesn't allow handling video quality preferences at the room level.
- */
-export const useVideoResolutionSubscription = () => {
-  const {
-    userChoices: { videoSubscribeQuality },
-  } = usePersistentUserChoices()
-
-  const room = useRoomContext()
-
-  useEffect(() => {
-    if (!room) return
-    const handleTrackPublished = (
-      publication: RemoteTrackPublication,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      _participant: RemoteParticipant
-    ) => {
-      // By default, the maximum quality is set to high
-      if (
-        videoSubscribeQuality === undefined ||
-        videoSubscribeQuality === VideoQuality.HIGH
-      )
-        return
-
-      if (
-        publication.kind === Track.Kind.Video &&
-        publication.source !== Track.Source.ScreenShare
-      ) {
-        publication.setVideoQuality(videoSubscribeQuality)
-      }
-    }
-
-    room.on(RoomEvent.TrackPublished, handleTrackPublished)
-
-    return () => {
-      room.off(RoomEvent.TrackPublished, handleTrackPublished)
-    }
-  }, [room, videoSubscribeQuality])
-}

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

@@ -3,23 +3,98 @@ import * as React from 'react'
 
 import { MobileControlBar } from './MobileControlBar'
 import { DesktopControlBar } from './DesktopControlBar'
+import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
 import { useIsMobile } from '@/utils/useIsMobile'
+import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean
+  camera?: boolean
+  chat?: boolean
+  screenShare?: boolean
+  leave?: boolean
+  settings?: boolean
+}
+
+/** @public */
 export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
   onDeviceError?: (error: { source: Track.Source; error: Error }) => void
+  variation?: 'minimal' | 'verbose' | 'textOnly'
+  controls?: ControlBarControls
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enable the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean
 }
 
 /**
  * The `ControlBar` prefab gives the user the basic user interface to control their
  * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
  */
 export function ControlBar({ onDeviceError }: ControlBarProps) {
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices()
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  const barProps = {
+    onDeviceError,
+    microphoneOnChange,
+    cameraOnChange,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  }
+
   const isMobile = useIsMobile()
 
-  if (isMobile) {
-    return <MobileControlBar onDeviceError={onDeviceError} />
-  }
-  return <DesktopControlBar onDeviceError={onDeviceError} />
+  return (
+    <SettingsDialogProvider>
+      {isMobile ? (
+        <MobileControlBar {...barProps} />
+      ) : (
+        <DesktopControlBar {...barProps} />
+      )}
+    </SettingsDialogProvider>
+  )
 }
 
-export type ControlBarAuxProps = Pick<ControlBarProps, 'onDeviceError'>
+export interface ControlBarAuxProps {
+  onDeviceError: ControlBarProps['onDeviceError']
+  microphoneOnChange: (
+    enabled: boolean,
+    isUserInitiated: boolean
+  ) => void | null
+  cameraOnChange: (enabled: boolean, isUserInitiated: boolean) => void | null
+  saveAudioInputDeviceId: (deviceId: string) => void
+  saveVideoInputDeviceId: (deviceId: string) => void
+}

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

@@ -2,6 +2,7 @@ import { supportsScreenSharing } from '@livekit/components-core'
 import { ControlBarAuxProps } from './ControlBar'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
+import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
 import { Track } from 'livekit-client'
 import { ReactionsToggle } from '../../components/controls/ReactionsToggle'
 import { HandToggle } from '../../components/controls/HandToggle'
@@ -10,12 +11,14 @@ import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
 import { useRef } from 'react'
-import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
-import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 
 export function DesktopControlBar({
   onDeviceError,
-}: Readonly<ControlBarAuxProps>) {
+  microphoneOnChange,
+  cameraOnChange,
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+}: ControlBarAuxProps) {
   const browserSupportsScreenSharing = supportsScreenSharing()
   const desktopControlBarEl = useRef<HTMLDivElement>(null)
   return (
@@ -50,15 +53,27 @@ export function DesktopControlBar({
           gap: '0.65rem',
         })}
       >
-        <AudioDevicesControl
+        <SelectToggleDevice
+          source={Track.Source.Microphone}
+          onChange={microphoneOnChange}
           onDeviceError={(error) =>
             onDeviceError?.({ source: Track.Source.Microphone, error })
           }
+          onActiveDeviceChange={(deviceId) =>
+            saveAudioInputDeviceId(deviceId ?? '')
+          }
+          menuVariant="dark"
         />
-        <VideoDeviceControl
+        <SelectToggleDevice
+          source={Track.Source.Camera}
+          onChange={cameraOnChange}
           onDeviceError={(error) =>
             onDeviceError?.({ source: Track.Source.Camera, error })
           }
+          onActiveDeviceChange={(deviceId) =>
+            saveVideoInputDeviceId(deviceId ?? '')
+          }
+          menuVariant="dark"
         />
         <ReactionsToggle />
         {browserSupportsScreenSharing && (

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

@@ -4,6 +4,7 @@ import { ControlBarAuxProps } from './ControlBar'
 import React from 'react'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
+import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
 import { Track } from 'livekit-client'
 import { HandToggle } from '../../components/controls/HandToggle'
 import { Button } from '@/primitives/Button'
@@ -18,22 +19,24 @@ import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
+import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
 import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'
 import { useConfig } from '@/api/useConfig'
-import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
-import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 
 export function MobileControlBar({
   onDeviceError,
-}: Readonly<ControlBarAuxProps>) {
+  microphoneOnChange,
+  cameraOnChange,
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+}: ControlBarAuxProps) {
   const { t } = useTranslation('rooms')
   const [isMenuOpened, setIsMenuOpened] = React.useState(false)
   const browserSupportsScreenSharing = supportsScreenSharing()
   const { toggleEffects } = useSidePanel()
-  const { openSettingsDialog } = useSettingsDialog()
+  const { setDialogOpen } = useSettingsDialog()
 
   const { data } = useConfig()
 
@@ -59,15 +62,27 @@ export function MobileControlBar({
           })}
         >
           <LeaveButton />
-          <AudioDevicesControl
+          <SelectToggleDevice
+            source={Track.Source.Microphone}
+            onChange={microphoneOnChange}
             onDeviceError={(error) =>
               onDeviceError?.({ source: Track.Source.Microphone, error })
             }
+            onActiveDeviceChange={(deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+            hideMenu={true}
           />
-          <VideoDeviceControl
+          <SelectToggleDevice
+            source={Track.Source.Camera}
+            onChange={cameraOnChange}
             onDeviceError={(error) =>
               onDeviceError?.({ source: Track.Source.Camera, error })
             }
+            onActiveDeviceChange={(deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+            hideMenu={true}
           />
           <HandToggle />
           <Button
@@ -152,7 +167,7 @@ export function MobileControlBar({
             )}
             <Button
               onPress={() => {
-                openSettingsDialog()
+                setDialogOpen(true)
                 setIsMenuOpened(false)
               }}
               variant="primaryTextDark"

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -32,8 +32,6 @@ import { RecordingStateToast } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
-import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
-import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
 
 const LayoutWrapper = styled(
   'div',
@@ -79,7 +77,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     React.useRef<TrackReferenceOrPlaceholder | null>(null)
 
   useConnectionObserver()
-  useVideoResolutionSubscription()
 
   const tracks = useTracks(
     [
@@ -241,7 +238,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       <RoomAudioRenderer />
       <ConnectionStateToast />
       <RecordingStateToast />
-      <SettingsDialogProvider />
     </div>
   )
 }

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

@@ -9,16 +9,13 @@ import {
   RiNotification3Line,
   RiSettings3Line,
   RiSpeakerLine,
-  RiVideoOnLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
 import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
-import { VideoTab } from './tabs/VideoTab'
 import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -47,9 +44,7 @@ const tabPanelContainerStyle = css({
 export type SettingsDialogExtended = Pick<
   DialogProps,
   'isOpen' | 'onOpenChange'
-> & {
-  defaultSelectedTab?: SettingsDialogExtendedKey
-}
+>
 
 export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   // display only icon on small screen
@@ -60,11 +55,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
 
   return (
     <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
-      <Tabs
-        orientation="vertical"
-        className={tabsStyle}
-        defaultSelectedKey={props.defaultSelectedTab}
-      >
+      <Tabs orientation="vertical" className={tabsStyle}>
         <div
           className={tabListContainerStyle}
           style={{
@@ -78,39 +69,30 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               {t('dialog.heading')}
             </Heading>
           )}
-          <TabList border={false}>
-            <Tab icon highlight id={SettingsDialogExtendedKey.ACCOUNT}>
+          <TabList border={false} aria-label="Chat log orientation example">
+            <Tab icon highlight id="1">
               <RiAccountCircleLine />
-              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.ACCOUNT}`)}
+              {isWideScreen && t('tabs.account')}
             </Tab>
-            <Tab icon highlight id={SettingsDialogExtendedKey.AUDIO}>
+            <Tab icon highlight id="2">
               <RiSpeakerLine />
-              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.AUDIO}`)}
+              {isWideScreen && t('tabs.audio')}
             </Tab>
-            <Tab icon highlight id={SettingsDialogExtendedKey.VIDEO}>
-              <RiVideoOnLine />
-              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.VIDEO}`)}
-            </Tab>
-            <Tab icon highlight id={SettingsDialogExtendedKey.GENERAL}>
+            <Tab icon highlight id="3">
               <RiSettings3Line />
-              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.GENERAL}`)}
+              {isWideScreen && t('tabs.general')}
             </Tab>
-            <Tab icon highlight id={SettingsDialogExtendedKey.NOTIFICATIONS}>
+            <Tab icon highlight id="4">
               <RiNotification3Line />
-              {isWideScreen &&
-                t(`tabs.${SettingsDialogExtendedKey.NOTIFICATIONS}`)}
+              {isWideScreen && t('tabs.notifications')}
             </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
-          <AccountTab
-            id={SettingsDialogExtendedKey.ACCOUNT}
-            onOpenChange={props.onOpenChange}
-          />
-          <AudioTab id={SettingsDialogExtendedKey.AUDIO} />
-          <VideoTab id={SettingsDialogExtendedKey.VIDEO} />
-          <GeneralTab id={SettingsDialogExtendedKey.GENERAL} />
-          <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
+          <AccountTab id="1" onOpenChange={props.onOpenChange} />
+          <AudioTab id="2" />
+          <GeneralTab id="3" />
+          <NotificationsTab id="4" />
         </div>
       </Tabs>
     </Dialog>

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

@@ -1,20 +0,0 @@
-import { SettingsDialogExtended } from './SettingsDialogExtended'
-import { useSnapshot } from 'valtio'
-import { settingsStore } from '@/stores/settings'
-
-export const SettingsDialogProvider = () => {
-  const { areSettingsOpen, defaultSelectedTab } = useSnapshot(settingsStore)
-
-  return (
-    <SettingsDialogExtended
-      isOpen={areSettingsOpen}
-      defaultSelectedTab={defaultSelectedTab}
-      onOpenChange={(v) => {
-        if (!v && settingsStore.defaultSelectedTab) {
-          settingsStore.defaultSelectedTab = undefined
-        }
-        settingsStore.areSettingsOpen = v
-      }}
-    />
-  )
-}

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

@@ -1,4 +1,4 @@
-import { DialogProps, Field, Switch, Text } from '@/primitives'
+import { DialogProps, Field, H, Switch, Text } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -9,11 +9,78 @@ import {
 import { isSafari } from '@/utils/livekit'
 import { useTranslation } from 'react-i18next'
 import { SoundTester } from '@/components/SoundTester'
+import { HStack } from '@/styled-system/jsx'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
-import { useNoiseReductionAvailable } from '@/features/rooms/livekit/hooks/useNoiseReductionAvailable'
+import { ReactNode } from 'react'
+import { css } from '@/styled-system/css'
 import posthog from 'posthog-js'
-import { RowWrapper } from './layout/RowWrapper'
+import { useNoiseReductionAvailable } from '@/features/rooms/livekit/hooks/useNoiseReductionAvailable'
+
+type RowWrapperProps = {
+  heading: string
+  children: ReactNode[]
+  beta?: boolean
+}
+
+const BetaBadge = () => (
+  <span
+    className={css({
+      content: '"Beta"',
+      display: 'block',
+      letterSpacing: '-0.02rem',
+      padding: '0 0.25rem',
+      backgroundColor: '#E8EDFF',
+      color: '#0063CB',
+      fontSize: '12px',
+      fontWeight: 500,
+      margin: '0 0 0.9375rem 0.3125rem',
+      lineHeight: '1rem',
+      borderRadius: '4px',
+      width: 'fit-content',
+      height: 'fit-content',
+      marginTop: { base: '10px', sm: '5px' },
+    })}
+  >
+    Beta
+  </span>
+)
+
+const RowWrapper = ({ heading, children, beta }: RowWrapperProps) => {
+  return (
+    <>
+      <HStack>
+        <H lvl={2}>{heading}</H>
+        {beta && <BetaBadge />}
+      </HStack>
+      <HStack
+        gap={0}
+        style={{
+          flexWrap: 'wrap',
+        }}
+      >
+        <div
+          style={{
+            flex: '1 1 215px',
+            minWidth: 0,
+          }}
+        >
+          {children[0]}
+        </div>
+        <div
+          style={{
+            width: '10rem',
+            justifyContent: 'center',
+            display: 'flex',
+            paddingLeft: '1.5rem',
+          }}
+        >
+          {children[1]}
+        </div>
+      </HStack>
+    </>
+  )
+}
 
 export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -25,19 +92,24 @@ export const AudioTab = ({ id }: AudioTabProps) => {
   const { localParticipant } = useRoomContext()
 
   const {
-    userChoices: { noiseReductionEnabled, audioDeviceId, audioOutputDeviceId },
+    userChoices: { noiseReductionEnabled },
     saveAudioInputDeviceId,
     saveNoiseReductionEnabled,
-    saveAudioOutputDeviceId,
   } = usePersistentUserChoices()
 
   const isSpeaking = useIsSpeaking(localParticipant)
 
-  const { devices: devicesOut, setActiveMediaDevice: setActiveMediaDeviceOut } =
-    useMediaDeviceSelect({ kind: 'audiooutput' })
+  const {
+    devices: devicesOut,
+    activeDeviceId: activeDeviceIdOut,
+    setActiveMediaDevice: setActiveMediaDeviceOut,
+  } = useMediaDeviceSelect({ kind: 'audiooutput' })
 
-  const { devices: devicesIn, setActiveMediaDevice: setActiveMediaDeviceIn } =
-    useMediaDeviceSelect({ kind: 'audioinput' })
+  const {
+    devices: devicesIn,
+    activeDeviceId: activeDeviceIdIn,
+    setActiveMediaDevice: setActiveMediaDeviceIn,
+  } = useMediaDeviceSelect({ kind: 'audioinput' })
 
   const itemsOut: DeviceItems = devicesOut.map((d) => ({
     value: d.deviceId,
@@ -62,6 +134,15 @@ export const AudioTab = ({ id }: AudioTabProps) => {
         defaultSelectedKey: undefined,
       }
 
+  // No API to directly query the default audio device; this function heuristically finds it.
+  // Returns the item with value 'default' if present; otherwise, returns the first item in the list.
+  const getDefaultSelectedKey = (items: DeviceItems) => {
+    if (!items || items.length === 0) return
+    const defaultItem =
+      items.find((item) => item.value === 'default') || items[0]
+    return defaultItem.value
+  }
+
   const noiseReductionAvailable = useNoiseReductionAvailable()
 
   return (
@@ -71,9 +152,11 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           type="select"
           label={t('audio.microphone.label')}
           items={itemsIn}
-          selectedKey={audioDeviceId}
-          onSelectionChange={async (key) => {
-            await setActiveMediaDeviceIn(key as string)
+          defaultSelectedKey={
+            activeDeviceIdIn || getDefaultSelectedKey(itemsIn)
+          }
+          onSelectionChange={(key) => {
+            setActiveMediaDeviceIn(key as string)
             saveAudioInputDeviceId(key as string)
           }}
           {...disabledProps}
@@ -97,11 +180,12 @@ export const AudioTab = ({ id }: AudioTabProps) => {
             type="select"
             label={t('audio.speakers.label')}
             items={itemsOut}
-            selectedKey={audioOutputDeviceId}
-            onSelectionChange={async (key) => {
-              await setActiveMediaDeviceOut(key as string)
-              saveAudioOutputDeviceId(key as string)
-            }}
+            defaultSelectedKey={
+              activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
+            }
+            onSelectionChange={async (key) =>
+              setActiveMediaDeviceOut(key as string)
+            }
             {...disabledProps}
             style={{
               minWidth: 0,

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

@@ -1,238 +0,0 @@
-import { DialogProps, Field } from '@/primitives'
-
-import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import { useMediaDeviceSelect, useRoomContext } from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
-import { useCallback, useEffect, useState } from 'react'
-import { css } from '@/styled-system/css'
-import {
-  createLocalVideoTrack,
-  LocalVideoTrack,
-  Track,
-  VideoPresets,
-  VideoQuality,
-} from 'livekit-client'
-import { BackgroundProcessorFactory } from '@/features/rooms/livekit/components/blur'
-import { VideoResolution } from '@/stores/userChoices'
-import { RowWrapper } from './layout/RowWrapper'
-
-export type VideoTabProps = Pick<DialogProps, 'onOpenChange'> &
-  Pick<TabPanelProps, 'id'>
-
-type DeviceItems = Array<{ value: string; label: string }>
-
-export const VideoTab = ({ id }: VideoTabProps) => {
-  const { t } = useTranslation('settings', { keyPrefix: 'video' })
-  const { localParticipant, remoteParticipants } = useRoomContext()
-
-  const {
-    userChoices: {
-      videoDeviceId,
-      processorSerialized,
-      videoPublishResolution,
-      videoSubscribeQuality,
-    },
-    saveVideoInputDeviceId,
-    saveVideoPublishResolution,
-    saveVideoSubscribeQuality,
-  } = usePersistentUserChoices()
-  const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
-    null
-  )
-
-  const videoCallbackRef = useCallback((element: HTMLVideoElement | null) => {
-    setVideoElement(element)
-  }, [])
-
-  const { devices: devicesIn, setActiveMediaDevice: setActiveMediaDeviceIn } =
-    useMediaDeviceSelect({ kind: 'videoinput' })
-
-  const itemsIn: DeviceItems = devicesIn.map((d) => ({
-    value: d.deviceId,
-    label: d.label,
-  }))
-
-  // The Permissions API is not fully supported in Firefox and Safari, and attempting to use it for camera permissions
-  // may raise an error. As a workaround, we infer camera permission status by checking if the list of camera input
-  // devices (devicesIn) is non-empty. If the list has one or more devices, we assume the user has granted camera access.
-  const isCamEnabled = devicesIn?.length > 0
-
-  const disabledProps = isCamEnabled
-    ? {}
-    : {
-        placeholder: t('permissionsRequired'),
-        isDisabled: true,
-      }
-
-  const handleVideoResolutionChange = async (key: 'h720' | 'h360' | 'h180') => {
-    const videoPublication = localParticipant.getTrackPublication(
-      Track.Source.Camera
-    )
-    const videoTrack = videoPublication?.track
-    if (videoTrack) {
-      saveVideoPublishResolution(key)
-      await videoTrack.restartTrack({
-        resolution: VideoPresets[key].resolution,
-        deviceId: { exact: videoDeviceId },
-        processor:
-          BackgroundProcessorFactory.deserializeProcessor(processorSerialized),
-      })
-    }
-  }
-
-  /**
-   * Updates video quality for all existing remote video tracks when user preference changes.
-   * LiveKit doesn't support setting video quality preferences at the room level for remote participants,
-   * so this function applies the selected quality to all existing remote video tracks.
-   * Hook useVideoResolutionSubscription updates quality preferences of new participants joining.
-   */
-  const updateExistingRemoteVideoQuality = (selectedQuality: VideoQuality) => {
-    remoteParticipants.forEach((participant) => {
-      participant.videoTrackPublications.forEach((publication) => {
-        if (publication.videoQuality !== selectedQuality) {
-          publication.setVideoQuality(selectedQuality)
-        }
-      })
-    })
-  }
-
-  useEffect(() => {
-    let videoTrack: LocalVideoTrack | null = null
-
-    const setUpVideoTrack = async () => {
-      if (videoElement) {
-        videoTrack = await createLocalVideoTrack({ deviceId: videoDeviceId })
-        videoTrack.attach(videoElement)
-      }
-    }
-
-    setUpVideoTrack()
-
-    return () => {
-      if (videoElement && videoTrack) {
-        videoTrack.detach()
-        videoTrack.stop()
-      }
-    }
-  }, [videoDeviceId, videoElement])
-
-  return (
-    <TabPanel padding={'md'} flex id={id}>
-      <RowWrapper heading={t('camera.heading')}>
-        <Field
-          type="select"
-          label={t('camera.label')}
-          items={itemsIn}
-          selectedKey={videoDeviceId}
-          onSelectionChange={async (key) => {
-            await setActiveMediaDeviceIn(key as string)
-            saveVideoInputDeviceId(key as string)
-          }}
-          {...disabledProps}
-          style={{
-            width: '100%',
-          }}
-        />
-        <div
-          role="status"
-          aria-label={t(
-            `camera.previewAriaLabel.${localParticipant.isCameraEnabled ? 'enabled' : 'disabled'}`
-          )}
-        >
-          {localParticipant.isCameraEnabled ? (
-            <>
-              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-              <video
-                ref={videoCallbackRef}
-                width="160px"
-                height="56px"
-                style={{
-                  display: !localParticipant.isCameraEnabled
-                    ? 'none'
-                    : undefined,
-                }}
-                className={css({
-                  transform: 'rotateY(180deg)',
-                  height: '69px',
-                  width: '160px',
-                })}
-                disablePictureInPicture
-                disableRemotePlayback
-              />
-            </>
-          ) : (
-            <span
-              className={css({
-                display: 'flex',
-                justifyContent: 'center',
-                textAlign: 'center',
-              })}
-            >
-              {t('camera.disabled')}
-            </span>
-          )}
-        </div>
-      </RowWrapper>
-      <RowWrapper heading={t('resolution.heading')}>
-        <Field
-          type="select"
-          label={t('resolution.publish.label')}
-          items={[
-            {
-              value: 'h720',
-              label: `${t('resolution.publish.items.high')} (720p)`,
-            },
-            {
-              value: 'h360',
-              label: `${t('resolution.publish.items.medium')} (360p)`,
-            },
-            {
-              value: 'h180',
-              label: `${t('resolution.publish.items.low')} (180p)`,
-            },
-          ]}
-          selectedKey={videoPublishResolution}
-          onSelectionChange={async (key) => {
-            await handleVideoResolutionChange(key as VideoResolution)
-          }}
-          style={{
-            width: '100%',
-          }}
-        />
-        <></>
-      </RowWrapper>
-      <RowWrapper>
-        <Field
-          type="select"
-          label={t('resolution.subscribe.label')}
-          items={[
-            {
-              value: VideoQuality.HIGH.toString(),
-              label: t('resolution.subscribe.items.high'),
-            },
-            {
-              value: VideoQuality.MEDIUM.toString(),
-              label: t('resolution.subscribe.items.medium'),
-            },
-            {
-              value: VideoQuality.LOW.toString(),
-              label: t('resolution.subscribe.items.low'),
-            },
-          ]}
-          selectedKey={videoSubscribeQuality?.toString()}
-          onSelectionChange={(key) => {
-            if (key == undefined) return
-            const selectedQuality = Number(String(key))
-            saveVideoSubscribeQuality(selectedQuality)
-            updateExistingRemoteVideoQuality(selectedQuality)
-          }}
-          style={{
-            width: '100%',
-          }}
-        />
-        <></>
-      </RowWrapper>
-    </TabPanel>
-  )
-}

src/frontend/src/features/settings/components/tabs/layout/RowWrapper.tsx

@@ -1,71 +0,0 @@
-import { ReactNode } from 'react'
-import { H } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
-import { css } from '@/styled-system/css'
-
-export type RowWrapperProps = {
-  heading?: string
-  children: ReactNode[]
-  beta?: boolean
-}
-
-const BetaBadge = () => (
-  <span
-    className={css({
-      content: '"Beta"',
-      display: 'block',
-      letterSpacing: '-0.02rem',
-      padding: '0 0.25rem',
-      backgroundColor: '#E8EDFF',
-      color: '#0063CB',
-      fontSize: '12px',
-      fontWeight: 500,
-      margin: '0 0 0.9375rem 0.3125rem',
-      lineHeight: '1rem',
-      borderRadius: '4px',
-      width: 'fit-content',
-      height: 'fit-content',
-      marginTop: { base: '10px', sm: '5px' },
-    })}
-  >
-    Beta
-  </span>
-)
-
-export const RowWrapper = ({ heading, children, beta }: RowWrapperProps) => {
-  return (
-    <>
-      {heading && (
-        <HStack>
-          <H lvl={2}>{heading}</H>
-          {beta && <BetaBadge />}
-        </HStack>
-      )}
-      <HStack
-        gap={0}
-        style={{
-          flexWrap: 'wrap',
-        }}
-      >
-        <div
-          style={{
-            flex: '1 1 215px',
-            minWidth: 0,
-          }}
-        >
-          {children[0]}
-        </div>
-        <div
-          style={{
-            width: '10rem',
-            justifyContent: 'center',
-            display: 'flex',
-            paddingLeft: '1.5rem',
-          }}
-        >
-          {children[1]}
-        </div>
-      </HStack>
-    </>
-  )
-}

src/frontend/src/features/settings/hook/useSettingsDialog.ts

@@ -1,20 +0,0 @@
-import { useSnapshot } from 'valtio/index'
-import { settingsStore } from '@/stores/settings'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
-
-export const useSettingsDialog = () => {
-  const { areSettingsOpen } = useSnapshot(settingsStore)
-
-  const openSettingsDialog = (
-    defaultSelectedTab?: SettingsDialogExtendedKey
-  ) => {
-    if (areSettingsOpen) return
-    if (defaultSelectedTab)
-      settingsStore.defaultSelectedTab = defaultSelectedTab
-    settingsStore.areSettingsOpen = true
-  }
-
-  return {
-    openSettingsDialog,
-  }
-}

src/frontend/src/features/settings/type.ts

@@ -1,7 +0,0 @@
-export enum SettingsDialogExtendedKey {
-  ACCOUNT = 'account',
-  AUDIO = 'audio',
-  VIDEO = 'video',
-  GENERAL = 'general',
-  NOTIFICATIONS = 'notifications',
-}

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

@@ -10,7 +10,7 @@ export const useKeyboardShortcuts = () => {
   useEffect(() => {
     // This approach handles basic shortcuts but isn't comprehensive.
     // Issues might occur. First draft.
-    const onKeyDown = async (e: KeyboardEvent) => {
+    const onKeyDown = (e: KeyboardEvent) => {
       const { key, metaKey, ctrlKey } = e
       if (!key) return
       const shortcutKey = formatShortcutKey({
@@ -20,7 +20,7 @@ export const useKeyboardShortcuts = () => {
       const shortcut = shortcutsSnap.shortcuts.get(shortcutKey)
       if (!shortcut) return
       e.preventDefault()
-      await shortcut()
+      shortcut()
     }
 
     window.addEventListener('keydown', onKeyDown)

src/frontend/src/features/shortcuts/useLongPress.ts

@@ -5,7 +5,6 @@ export type useLongPressProps = {
   onKeyDown: () => void
   onKeyUp: () => void
   longPressThreshold?: number
-  isDisabled?: boolean
 }
 
 export const useLongPress = ({
@@ -13,18 +12,10 @@ export const useLongPress = ({
   onKeyDown,
   onKeyUp,
   longPressThreshold = 300,
-  isDisabled = false,
 }: useLongPressProps) => {
   const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
-    if (isDisabled) {
-      if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current)
-        timeoutIdRef.current = null
-      }
-      return
-    }
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.code != keyCode || timeoutIdRef.current) return
       timeoutIdRef.current = setTimeout(() => {
@@ -47,12 +38,8 @@ export const useLongPress = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown)
       window.removeEventListener('keyup', handleKeyUp)
-      if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current)
-        timeoutIdRef.current = null
-      }
     }
-  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold, isDisabled])
+  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold])
 
   return
 }

src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts

@@ -5,22 +5,15 @@ import { Shortcut } from '@/features/shortcuts/types'
 
 export type useRegisterKeyboardShortcutProps = {
   shortcut?: Shortcut
-  handler: () => Promise<void | boolean | undefined> | void
-  isDisabled?: boolean
+  handler: () => void
 }
 
 export const useRegisterKeyboardShortcut = ({
   shortcut,
   handler,
-  isDisabled = false,
 }: useRegisterKeyboardShortcutProps) => {
   useEffect(() => {
     if (!shortcut) return
-    const formattedKey = formatShortcutKey(shortcut)
-    if (isDisabled) {
-      keyboardShortcutsStore.shortcuts.delete(formattedKey)
-    } else {
-      keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
-    }
-  }, [handler, shortcut, isDisabled])
+    keyboardShortcutsStore.shortcuts.set(formatShortcutKey(shortcut), handler)
+  }, [handler, shortcut])
 }

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

@@ -7,15 +7,11 @@
     "home": "Zur Startseite zurückkehren",
     "back": "Dem Meeting erneut beitreten"
   },
-  "selectDevice": {
-    "loading": "Laden…",
-    "select": "Wählen Sie einen Wert",
-    "permissionsNeeded": "Genehmigung erforderlich",
-    "settings": {
-      "audio": "Audioeinstellungen",
-      "video": "Videoeinstellungen"
+  "join": {
+    "selectDevice": {
+      "loading": "Laden…",
+      "permissionsNeeded": "Genehmigung erforderlich"
     },
-    "effects": "Effekte anwenden",
     "videoinput": {
       "choose": "Kamera auswählen",
       "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich",
@@ -31,12 +27,6 @@
       "enable": "Mikrofon aktivieren",
       "label": "Mikrofon"
     },
-    "audiooutput": {
-      "choose": "Lautsprecher auswählen",
-      "permissionsNeeded": "Lautsprecher auswählen - genehmigung erforderlich"
-    }
-  },
-  "join": {
     "effects": {
       "description": "Effekte anwenden",
       "title": "Effekte",

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

@@ -30,37 +30,6 @@
     },
     "permissionsRequired": "Berechtigungen erforderlich"
   },
-  "video": {
-    "camera": {
-      "heading": "Kamera",
-      "label": "Wählen Sie Ihre Videoeingabe aus",
-      "disabled": "Kamera deaktiviert",
-      "previewAriaLabel": {
-        "enabled": "Videovorschau aktiviert",
-        "disabled": "Videovorschau deaktiviert"
-      }
-    },
-    "resolution": {
-      "heading": "Auflösung",
-      "publish": {
-        "label": "Wählen Sie Ihre maximale Sendeauflösung (max.)",
-        "items": {
-          "high": "Hohe Auflösung",
-          "medium": "Standardauflösung",
-          "low": "Niedrige Auflösung"
-        }
-      },
-      "subscribe": {
-        "label": "Wählen Sie Ihre Empfangsauflösung (max.)",
-        "items": {
-          "high": "Hohe Auflösung (automatisch)",
-          "medium": "Standardauflösung",
-          "low": "Niedrige Auflösung"
-        }
-      }
-    },
-    "permissionsRequired": "Berechtigungen erforderlich"
-  },
   "notifications": {
     "heading": "Tonbenachrichtigungen",
     "label": "Tonbenachrichtigungen für",
@@ -85,7 +54,6 @@
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
-    "video": "Video",
     "general": "Allgemein",
     "notifications": "Benachrichtigungen"
   }

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

@@ -7,15 +7,11 @@
     "home": "Return to home",
     "back": "Rejoin the meeting"
   },
-  "selectDevice": {
-    "loading": "Loading…",
-    "select": "Select a value",
-    "permissionsNeeded": "Permission needed",
-    "settings": {
-      "audio": "Audio settings",
-      "video": "Video settings"
+  "join": {
+    "selectDevice": {
+      "loading": "Loading…",
+      "permissionsNeeded": "Permission needed"
     },
-    "effects": "Effects",
     "videoinput": {
       "choose": "Select camera",
       "permissionsNeeded": "Select camera - permission needed",
@@ -31,12 +27,6 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "audiooutput": {
-      "choose": "Select speaker",
-      "permissionsNeeded": "Select speaker - permission needed"
-    }
-  },
-  "join": {
     "effects": {
       "description": "Apply effects",
       "title": "Effects",

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

@@ -30,37 +30,6 @@
     },
     "permissionsRequired": "Permissions required"
   },
-  "video": {
-    "camera": {
-      "heading": "Camera",
-      "label": "Select your video input",
-      "disabled": "Camera disabled",
-      "previewAriaLabel": {
-        "enabled": "Video preview enabled",
-        "disabled": "Video preview disabled"
-      }
-    },
-    "resolution": {
-      "heading": "Resolution",
-      "publish": {
-        "label": "Select your sending resolution (max.)",
-        "items": {
-          "high": "High definition",
-          "medium": "Standard definition",
-          "low": "Low definition"
-        }
-      },
-      "subscribe": {
-        "label": "Select your reception resolution (max.)",
-        "items": {
-          "high": "High definition (automatic)",
-          "medium": "Standard definition",
-          "low": "Low definition"
-        }
-      }
-    },
-    "permissionsRequired": "Permissions required"
-  },
   "notifications": {
     "heading": "Sound notifications",
     "label": "sound notifications for",
@@ -85,7 +54,6 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "video": "Video",
     "general": "General",
     "notifications": "Notifications"
   }

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

@@ -7,15 +7,11 @@
     "home": "Retourner à l'accueil",
     "back": "Réintégrer la réunion"
   },
-  "selectDevice": {
-    "loading": "Chargement…",
-    "select": "Sélectionnez une valeur",
-    "permissionsNeeded": "Autorisations nécessaires",
-    "settings": {
-      "audio": "Paramètres audio",
-      "video": "Paramètres video"
+  "join": {
+    "selectDevice": {
+      "loading": "Chargement…",
+      "permissionsNeeded": "Autorisations nécessaires"
     },
-    "effects": "Effets d'arrière-plan",
     "videoinput": {
       "choose": "Choisir la webcam",
       "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
@@ -31,15 +27,9 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
-    "audiooutput": {
-      "choose": "Choisir le haut-parleur",
-      "permissionsNeeded": "Choisir le haut-parleur - autorisations nécessaires"
-    }
-  },
-  "join": {
     "heading": "Rejoindre la réunion ?",
     "effects": {
-      "description": "Effets d'arrière-plan",
+      "description": "Effets d'arrière plan",
       "title": "Effets",
       "subTitle": "Paramétrez les effets de votre caméra."
     },
@@ -198,7 +188,7 @@
       "feedback": "Partager votre avis",
       "settings": "Paramètres",
       "username": "Choisir votre nom",
-      "effects": "Effets d'arrière-plan",
+      "effects": "Effets d'arrière plan",
       "switchCamera": "Changer de caméra",
       "fullscreen": {
         "enter": "Plein écran",
@@ -462,7 +452,7 @@
       "enable": "Épingler",
       "disable": "Annuler l'épinglage"
     },
-    "effects": "Effets d'arrière-plan",
+    "effects": "Effets d'arrière plan",
     "muteParticipant": "Couper le micro de {{name}}",
     "fullScreen": "Plein écran"
   },

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

@@ -30,37 +30,6 @@
     },
     "permissionsRequired": "Autorisations nécessaires"
   },
-  "video": {
-    "camera": {
-      "heading": "Caméra",
-      "label": "Sélectionner votre entrée vidéo",
-      "disabled": "Caméra désactivée",
-      "previewAriaLabel": {
-        "enabled": "Aperçu vidéo activé",
-        "disabled": "Aperçu vidéo désactivé"
-      }
-    },
-    "resolution": {
-      "heading": "Résolution",
-      "publish": {
-        "label": "Sélectionner votre résolution d'envoi (max.)",
-        "items": {
-          "high": "Haute définition",
-          "medium": "Définition standard",
-          "low": "Basse définition"
-        }
-      },
-      "subscribe": {
-        "label": "Sélectionner votre résolution de réception (max.)",
-        "items": {
-          "high": "Haute définition (automatique)",
-          "medium": "Définition standard",
-          "low": "Basse définition"
-        }
-      }
-    },
-    "permissionsRequired": "Autorisations nécessaires"
-  },
   "notifications": {
     "heading": "Notifications sonores",
     "label": "la notification sonore pour",
@@ -85,7 +54,6 @@
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
-    "video": "Vidéo",
     "general": "Général",
     "notifications": "Notifications"
   }

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

@@ -7,18 +7,14 @@
     "home": "Keer terug naar het hoofdscherm",
     "back": "Sluit weer bij de vergadering aan"
   },
-  "selectDevice": {
-    "loading": "Bezig met laden…",
-    "select": "Selecteer een waarde",
-    "permissionsNeeded": "Toestemming vereist",
-    "settings": {
-      "audio": "Audio-instellingen",
-      "video": "Video-instellingen"
+  "join": {
+    "selectDevice": {
+      "loading": "Bezig met laden…",
+      "permissionNeeded": "Toestemming vereist"
     },
-    "effects": "Pas effecten toe",
     "videoinput": {
       "choose": "Selecteer camera",
-      "permissionsNeeded": "Selecteer camera - Toestemming vereist",
+      "permissionNeeded": "Selecteer camera - Toestemming vereist",
       "disable": "Camera uitschakelen",
       "enable": "Camera inschakelen",
       "label": "Camera",
@@ -26,17 +22,11 @@
     },
     "audioinput": {
       "choose": "Selecteer microfoon",
-      "permissionsNeeded": "Selecteer microfoon - Toestemming vereist",
+      "permissionNeeded": "Selecteer microfoon - Toestemming vereist",
       "disable": "Microfoon dempen",
       "enable": "Microfoon dempen opheffen",
       "label": "Microfoon"
     },
-    "audiooutput": {
-      "choose": "Selecteer luidspreker",
-      "permissionsNeeded": "Selecteer luidspreker - Toestemming vereist"
-    }
-  },
-  "join": {
     "effects": {
       "description": "Pas effecten toe",
       "title": "Effecten",

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

@@ -30,37 +30,6 @@
     },
     "permissionsRequired": "Machtigingen vereist"
   },
-  "video": {
-    "camera": {
-      "heading": "Camera",
-      "label": "Selecteer uw video-ingang",
-      "disabled": "Camera uitgeschakeld",
-      "previewAriaLabel": {
-        "enabled": "Videovoorbeeld ingeschakeld",
-        "disabled": "Videovoorbeeld uitgeschakeld"
-      }
-    },
-    "resolution": {
-      "heading": "Resolutie",
-      "publish": {
-        "label": "Selecteer uw verzendresolutie (max.)",
-        "items": {
-          "high": "Hoge definitie",
-          "medium": "Standaarddefinitie",
-          "low": "Lage definitie"
-        }
-      },
-      "subscribe": {
-        "label": "Selecteer uw ontvangstresolutie (max.)",
-        "items": {
-          "high": "Hoge definitie (automatisch)",
-          "medium": "Standaarddefinitie",
-          "low": "Lage definitie"
-        }
-      }
-    },
-    "permissionsRequired": "Machtigingen vereist"
-  },
   "notifications": {
     "heading": "Geluidsmeldingen",
     "label": "Geluidsmeldingen voor",
@@ -85,7 +54,6 @@
   "tabs": {
     "account": "Profiel",
     "audio": "Audio",
-    "video": "Video",
     "general": "Algemeen",
     "notifications": "Meldingen"
   }

src/frontend/src/primitives/Popover.tsx

@@ -46,18 +46,6 @@ const StyledOverlayArrow = styled(OverlayArrow, {
       transform: 'rotate(180deg) translateY(-1px)',
     },
   },
-  variants: {
-    variant: {
-      light: {},
-      dark: {
-        fill: 'primaryDark.50',
-        stroke: 'primaryDark.50',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'light',
-  },
 })
 
 /**
@@ -68,8 +56,6 @@ const StyledOverlayArrow = styled(OverlayArrow, {
  */
 export const Popover = ({
   children,
-  variant = 'light',
-  withArrow = true,
   ...dialogProps
 }: {
   children: [
@@ -78,24 +64,20 @@ export const Popover = ({
       | (({ close }: { close: () => void }) => ReactNode)
       | ReactNode,
   ]
-  variant?: 'dark' | 'light'
-  withArrow?: boolean
-} & Omit<DialogProps, 'children'>) => {
+} & DialogProps) => {
   const [trigger, popoverContent] = children
   return (
     <DialogTrigger>
       {trigger}
       <StyledPopover>
-        {withArrow && (
-          <StyledOverlayArrow variant={variant}>
-            <svg width={12} height={12} viewBox="0 0 12 12">
-              <path d="M0 0 L6 6 L12 0" />
-            </svg>
-          </StyledOverlayArrow>
-        )}
+        <StyledOverlayArrow>
+          <svg width={12} height={12} viewBox="0 0 12 12">
+            <path d="M0 0 L6 6 L12 0" />
+          </svg>
+        </StyledOverlayArrow>
         <Dialog {...dialogProps}>
           {({ close }) => (
-            <Box size="sm" type="popover" variant={variant}>
+            <Box size="sm" type="popover">
               {typeof popoverContent === 'function'
                 ? popoverContent({ close })
                 : popoverContent}

src/frontend/src/primitives/Select.tsx

@@ -6,14 +6,13 @@ import {
   ListBox,
   ListBoxItem,
   Select as RACSelect,
-  SelectProps as RACSelectProps,
+  SelectProps,
   SelectValue,
 } from 'react-aria-components'
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { css } from '@/styled-system/css'
-import type { Placement } from '@react-types/overlays'
 
 const StyledButton = styled(Button, {
   base: {
@@ -42,31 +41,6 @@ const StyledButton = styled(Button, {
       boxShadow: '0 1px 2px rgba(0 0 0 / 0.02)',
     },
   },
-  variants: {
-    variant: {
-      light: {},
-      dark: {
-        backgroundColor: 'primaryDark.100',
-        fontWeight: 'medium !important',
-        color: 'white',
-        '&[data-pressed]': {
-          backgroundColor: 'primaryDark.900',
-          color: 'primaryDark.100',
-        },
-        '&[data-hovered]': {
-          backgroundColor: 'primaryDark.300',
-          color: 'white',
-        },
-        '&[data-selected]': {
-          backgroundColor: 'primaryDark.700 !important',
-          color: 'primaryDark.100 !important',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'light',
-  },
 })
 
 const StyledSelectValue = styled(SelectValue, {
@@ -88,32 +62,23 @@ const StyledIcon = styled('div', {
   },
 })
 
-export type SelectProps<T> = Omit<
-  RACSelectProps<object>,
-  'items' | 'label' | 'errors'
-> & {
-  iconComponent?: RemixiconComponentType
-  label: ReactNode
-  items: Array<{ value: T; label: ReactNode }>
-  errors?: ReactNode
-  placement?: Placement
-  variant?: 'light' | 'dark'
-}
-
 export const Select = <T extends string | number>({
   label,
   iconComponent,
   items,
   errors,
-  placement,
-  variant = 'light',
   ...props
-}: SelectProps<T>) => {
+}: 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 variant={variant}>
+      <StyledButton>
         {!!IconComponent && (
           <StyledIcon>
             <IconComponent size={18} />
@@ -125,16 +90,13 @@ export const Select = <T extends string | number>({
           className={css({ flexShrink: 0 })}
         />
       </StyledButton>
-      <StyledPopover placement={placement}>
-        <Box size="sm" type="popover" variant={variant}>
+      <StyledPopover>
+        <Box size="sm" type="popover" variant="control">
           <ListBox>
             {items.map((item) => (
               <ListBoxItem
                 className={
-                  menuRecipe({
-                    extraPadding: true,
-                    variant: variant,
-                  }).item
+                  menuRecipe({ extraPadding: true, variant: 'light' }).item
                 }
                 id={item.value}
                 key={item.value}

src/frontend/src/primitives/Switch.tsx

@@ -22,15 +22,16 @@ export const StyledSwitch = styled(RACSwitch, {
       borderRadius: '1.143rem',
       transition: 'all 200ms, outline 200ms',
       _before: {
-        willChange: 'transform',
         content: '""',
         display: 'block',
         margin: '0.125rem',
         width: '1.063rem',
         height: '1.063rem',
         borderRadius: '1.063rem',
-        background: 'primary.800',
-        transition: 'transform 200ms, background-color 200ms',
+        border: '2px solid',
+        borderColor: 'primary.800',
+        background: 'white',
+        transition: 'opacity 10ms',
         transitionDelay: '0ms',
       },
     },
@@ -43,29 +44,14 @@ export const StyledSwitch = styled(RACSwitch, {
       color: 'primary.800',
       fontSize: '0.75rem',
       fontWeight: 'bold',
-      pointerEvents: 'none',
       zIndex: 1,
       opacity: 0,
     },
-    '& .cross': {
-      position: 'absolute',
-      display: 'block',
-      top: '50%',
-      left: '0.375rem',
-      transform: 'translateY(-50%)',
-      color: 'white',
-      fontSize: '0.70rem',
-      fontWeight: 'bold',
-      pointerEvents: 'none',
-      zIndex: 1,
-      opacity: 1,
-      transition: 'opacity 200ms',
-      transitionDelay: '0ms',
-    },
     '&[data-selected] .indicator': {
       borderColor: 'primary.800',
       background: 'primary.800',
       _before: {
+        border: 'none',
         background: 'white',
         transform: 'translateX(100%)',
       },
@@ -75,11 +61,6 @@ export const StyledSwitch = styled(RACSwitch, {
       transition: 'opacity 30ms',
       transitionDelay: '150ms',
     },
-    '&[data-selected] .cross': {
-      opacity: 0,
-      transition: 'opacity 10ms',
-      transitionDelay: '0ms',
-    },
     '&[data-disabled] .indicator': {
       borderColor: 'primary.200',
       background: 'transparent',
@@ -87,9 +68,6 @@ export const StyledSwitch = styled(RACSwitch, {
         background: 'primary.200',
       },
     },
-    '&[data-disabled] .cross': {
-      color: 'primary.500',
-    },
     '&[data-focus-visible] .indicator': {
       outline: '2px solid!',
       outlineColor: 'focusRing!',
@@ -108,12 +86,7 @@ export type SwitchProps = StyledVariantProps<typeof StyledSwitch> &
 export const Switch = ({ children, ...props }: SwitchProps) => (
   <StyledSwitch {...props}>
     <div className="indicator">
-      <span className="checkmark" aria-hidden="true">
-        ✓
-      </span>
-      <span className="cross" aria-hidden="true">
-        ✕
-      </span>
+      <span className="checkmark">✓</span>
     </div>
     {children}
   </StyledSwitch>

src/frontend/src/stores/ScreenSharePreferences.ts

@@ -4,6 +4,6 @@ type State = {
   enabled: boolean
 }
 
-export const screenSharePreferenceStore = proxy<State>({
+export const ScreenSharePreferenceStore = proxy<State>({
   enabled: true,
 })

src/frontend/src/stores/settings.ts

@@ -1,12 +0,0 @@
-import { proxy } from 'valtio'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
-
-type State = {
-  areSettingsOpen: boolean
-  defaultSelectedTab?: SettingsDialogExtendedKey
-}
-
-export const settingsStore = proxy<State>({
-  areSettingsOpen: false,
-  defaultSelectedTab: undefined,
-})

src/frontend/src/stores/userChoices.ts

@@ -5,24 +5,15 @@ import {
   saveUserChoices,
   LocalUserChoices as LocalUserChoicesLK,
 } from '@livekit/components-core'
-import { VideoQuality } from 'livekit-client'
-
-export type VideoResolution = 'h720' | 'h360' | 'h180'
 
 export type LocalUserChoices = LocalUserChoicesLK & {
   processorSerialized?: ProcessorSerialized
   noiseReductionEnabled?: boolean
-  audioOutputDeviceId?: string
-  videoPublishResolution?: VideoResolution
-  videoSubscribeQuality?: VideoQuality
 }
 
 function getUserChoicesState(): LocalUserChoices {
   return {
     noiseReductionEnabled: false,
-    audioOutputDeviceId: 'default', // Use 'default' to match LiveKit's standard device selection behavior
-    videoPublishResolution: 'h720',
-    videoSubscribeQuality: VideoQuality.HIGH,
     ...loadUserChoices(),
   }
 }

src/helm/env.d/dev-dinum/values.egress.yaml.gotmpl

@@ -13,9 +13,8 @@ egress:
   {{- end }}
   {{- end }}
   redis:
-    address: dev-backend-redis:6379
+    address: redis-master:6379
     password: pass
-    username: user
   s3:
     access_key: meet
     secret: password

src/helm/env.d/dev-dinum/values.livekit.yaml.gotmpl

@@ -14,9 +14,8 @@ livekit:
     port_range_end: 60000
     tcp_port: 7881
   redis:
-    address: dev-backend-redis:6379
+    address: redis-master:6379
     password: pass
-    username: user
   keys:
   turn:
     enabled: true

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

@@ -35,21 +35,12 @@ backend:
     LOGIN_REDIRECT_URL: https://meet.127.0.0.1.nip.io
     LOGIN_REDIRECT_URL_FAILURE: https://meet.127.0.0.1.nip.io
     LOGOUT_REDIRECT_URL: https://meet.127.0.0.1.nip.io
-    DB_HOST: dev-backend-postgres
-    DB_NAME:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: database
-    DB_USER:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: username
-    DB_PASSWORD:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: password
+    DB_HOST: postgres-postgresql
+    DB_NAME: meet
+    DB_USER: dinum
+    DB_PASSWORD: pass
     DB_PORT: 5432
-    REDIS_URL: redis://user:pass@dev-backend-redis:6379/1
+    REDIS_URL: redis://default:pass@redis-master:6379/1
     STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
     {{- with .Values.livekit.keys }}
     {{- range $key, $value := . }}
@@ -67,8 +58,8 @@ backend:
     FRONTEND_USE_FRENCH_GOV_FOOTER: True
     FRONTEND_USE_PROCONNECT_BUTTON: True
     FRONTEND_MANIFEST_LINK: "https://docs.numerique.gouv.fr/docs/1ef86abf-f7e0-46ce-b6c7-8be8b8af4c3d/"
-    AWS_S3_ENDPOINT_URL: http://dev-backend-minio.meet.svc.cluster.local:9000
-    AWS_S3_ACCESS_KEY_ID: dinum
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     AWS_STORAGE_BUCKET_NAME: meet-media-storage
     AWS_S3_REGION_NAME: local
@@ -87,7 +78,8 @@ backend:
       - "/bin/sh"
       - "-c"
       - |
-        python manage.py migrate --no-input
+        python manage.py migrate --no-input &&
+        python manage.py create_demo --force
     restartPolicy: Never
 
   command:

src/helm/env.d/dev-dinum/values.secrets.yaml

@@ -1,4 +1,4 @@
-djangoSecretKey: 7K9mQ2xR8pL3vN6tY1sW4jH5cE0zF9bM2qA7uI3oP6rT1wErt12te12
+djangoSecretKey: u!vbjDW71aru&OZA%NZQi0x
 livekit:
     keys:
         devkey: secret

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

@@ -13,9 +13,8 @@ egress:
   {{- end }}
   {{- end }}
   redis:
-    address: dev-backend-redis:6379
+    address: redis-master:6379
     password: pass
-    username: user
   s3:
     access_key: meet
     secret: password

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

@@ -14,9 +14,8 @@ livekit:
     port_range_end: 60000
     tcp_port: 7881
   redis:
-    address: dev-backend-redis:6379
+    address: redis-master:6379
     password: pass
-    username: user
   keys:
   turn:
     enabled: true

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

@@ -35,21 +35,12 @@ backend:
     LOGIN_REDIRECT_URL: https://meet.127.0.0.1.nip.io
     LOGIN_REDIRECT_URL_FAILURE: https://meet.127.0.0.1.nip.io
     LOGOUT_REDIRECT_URL: https://meet.127.0.0.1.nip.io
-    DB_HOST: dev-backend-postgres
-    DB_NAME:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: database
-    DB_USER:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: username
-    DB_PASSWORD:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: password
+    DB_HOST: postgres-postgresql
+    DB_NAME: meet
+    DB_USER: dinum
+    DB_PASSWORD: pass
     DB_PORT: 5432
-    REDIS_URL: redis://user:pass@dev-backend-redis:6379/1
+    REDIS_URL: redis://default:pass@redis-master:6379/1
     STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
     {{- with .Values.livekit.keys }}
     {{- range $key, $value := . }}
@@ -66,8 +57,8 @@ backend:
     FRONTEND_TRANSCRIPT: "{'form_beta_users': 'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17'}"
     FRONTEND_FEEDBACK: "{'url': 'https://grist.numerique.gouv.fr/o/docs/cbMv4G7pLY3Z/USER-RESEARCH-or-LA-SUITE/f/26'}"
     FRONTEND_MANIFEST_LINK: "https://docs.numerique.gouv.fr/docs/1ef86abf-f7e0-46ce-b6c7-8be8b8af4c3d/"
-    AWS_S3_ENDPOINT_URL: http://dev-backend-minio.meet.svc.cluster.local:9000
-    AWS_S3_ACCESS_KEY_ID: dinum
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     AWS_STORAGE_BUCKET_NAME: meet-media-storage
     AWS_S3_REGION_NAME: local
@@ -88,7 +79,15 @@ backend:
       - "/bin/sh"
       - "-c"
       - |
-        python manage.py migrate --no-input
+        while ! python manage.py check --database default > /dev/null 2>&1
+        do
+          echo "Database not ready"
+          sleep 2
+        done
+        echo "Database is ready"
+
+        python manage.py migrate --no-input &&
+        python manage.py create_demo --force
     restartPolicy: Never
 
   command:
@@ -103,6 +102,13 @@ backend:
       - "/bin/sh"
       - "-c"
       - |
+        while ! python manage.py check --database default > /dev/null 2>&1
+        do
+          echo "Database not ready"
+          sleep 2
+        done
+        echo "Database is ready"
+
         python manage.py createsuperuser --email admin@example.com --password admin
     restartPolicy: Never
 

src/helm/env.d/dev-keycloak/values.secrets.yaml

@@ -1,4 +1,4 @@
-djangoSecretKey: 7K9mQ2xR8pL3vN6tY1sW4jH5cE0zF9bM2qA7uI3oP6rT1wErt12te12
+djangoSecretKey: u!vbjDW71aru&OZA%NZQi0x
 livekit:
     keys:
         devkey: secret

src/helm/env.d/dev/values.egress.yaml.gotmpl

@@ -13,9 +13,8 @@ egress:
   {{- end }}
   {{- end }}
   redis:
-    address: dev-backend-redis:6379
+    address: redis-master:6379
     password: pass
-    username: user
   s3:
     access_key: meet
     secret: password

src/helm/env.d/dev/values.livekit.yaml.gotmpl

@@ -14,9 +14,8 @@ livekit:
     port_range_end: 60000
     tcp_port: 7881
   redis:
-    address: dev-backend-redis:6379
+    address: redis-master:6379
     password: pass
-    username: user
   keys:
   turn:
     enabled: true

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

@@ -57,21 +57,12 @@ backend:
     LOGIN_REDIRECT_URL: https://meet.127.0.0.1.nip.io
     LOGIN_REDIRECT_URL_FAILURE: https://meet.127.0.0.1.nip.io
     LOGOUT_REDIRECT_URL: https://meet.127.0.0.1.nip.io
-    DB_HOST: dev-backend-postgres
-    DB_NAME:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: database
-    DB_USER:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: username
-    DB_PASSWORD:
-      secretKeyRef:
-        name: dev-backend-postgres
-        key: password
+    DB_HOST: postgres-postgresql
+    DB_NAME: meet
+    DB_USER: dinum
+    DB_PASSWORD: pass
     DB_PORT: 5432
-    REDIS_URL: redis://user:pass@dev-backend-redis:6379/1
+    REDIS_URL: redis://default:pass@redis-master:6379/1
     STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
     {{- with .Values.livekit.keys }}
     {{- range $key, $value := . }}
@@ -83,8 +74,8 @@ backend:
     ALLOW_UNREGISTERED_ROOMS: False
     FRONTEND_SILENCE_LIVEKIT_DEBUG: False
     FRONTEND_SUPPORT: "{'id': '58ea6697-8eba-4492-bc59-ad6562585041'}"
-    AWS_S3_ENDPOINT_URL: http://dev-backend-minio.meet.svc.cluster.local:9000
-    AWS_S3_ACCESS_KEY_ID: dinum
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     AWS_STORAGE_BUCKET_NAME: meet-media-storage
     AWS_S3_REGION_NAME: local
@@ -109,7 +100,15 @@ backend:
       - "/bin/sh"
       - "-c"
       - |
-        python manage.py migrate --no-input
+        while ! python manage.py check --database default > /dev/null 2>&1
+        do
+          echo "Database not ready"
+          sleep 2
+        done
+        echo "Database is ready"
+
+        python manage.py migrate --no-input &&
+        python manage.py create_demo --force
     restartPolicy: Never
 
   command:
@@ -124,6 +123,13 @@ backend:
       - "/bin/sh"
       - "-c"
       - |
+        while ! python manage.py check --database default > /dev/null 2>&1
+        do
+          echo "Database not ready"
+          sleep 2
+        done
+        echo "Database is ready"
+
         python manage.py createsuperuser --email admin@example.com --password admin
     restartPolicy: Never
 

src/helm/env.d/dev/values.secrets.yaml

@@ -1,4 +1,4 @@
-djangoSecretKey: 7K9mQ2xR8pL3vN6tY1sW4jH5cE0zF9bM2qA7uI3oP6rT1wErt12te12
+djangoSecretKey: u!vbjDW71aru&OZA%NZQi0x
 livekit:
     keys:
         devkey: secret

src/helm/helmfile.yaml

@@ -13,13 +13,109 @@ environments:
       - env.d/{{ .Environment.Name }}/values.secrets.yaml
 
 repositories:
+- name: bitnami
+  url: registry-1.docker.io/bitnamicharts
+  oci: true
 - name: livekit
   url: https://helm.livekit.io
 
-- name: dev-backends
-  url: https://suitenumerique.github.io/helm-dev-backend
-
 releases:
+  - name: postgres
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    missingFileHandler: Warn
+    namespace: {{ .Namespace }}
+    chart: bitnami/postgresql
+    version: 13.1.5
+    values:
+      - auth:
+          username: dinum
+          password: pass
+          database: meet
+      - tls:
+          enabled: true
+          autoGenerated: true
+
+  - name: keycloak
+    installed: {{ or (eq .Environment.Name "dev-keycloak") (eq .Environment.Name "dev-dinum") | toYaml }}
+    missingFileHandler: Warn
+    namespace: {{ .Namespace }}
+    chart: bitnami/keycloak
+    version: 17.3.6
+    values:
+      - postgresql:
+          auth:
+            username: keycloak
+            password: keycloak
+            database: keycloak
+      - extraEnvVars:
+          - name: KEYCLOAK_EXTRA_ARGS
+            value: "--import-realm"
+          - name: KC_HOSTNAME_URL
+            value: https://keycloak.127.0.0.1.nip.io
+      - extraVolumes:
+          - name: import
+            configMap:
+              name: meet-keycloak
+      - extraVolumeMounts:
+          - name: import
+            mountPath: /opt/bitnami/keycloak/data/import/
+      - auth:
+          adminUser: su
+          adminPassword: su
+      - proxy: edge
+      - ingress:
+          enabled: true
+          hostname: keycloak.127.0.0.1.nip.io
+      - extraDeploy:
+        - apiVersion: v1
+          kind: ConfigMap
+          metadata:
+            name: meet-keycloak
+          data:
+            meet.json: |
+{{ readFile "../../docker/auth/realm.json" | replace "http://localhost:3200" "https://meet.127.0.0.1.nip.io" | indent 14 }}
+
+  - name: minio
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    namespace: {{ .Namespace }}
+    missingFileHandler: Warn
+    chart: bitnami/minio
+    version: 12.10.10
+    values:
+      - auth:
+          rootUser: meet
+          rootPassword: password
+      - provisioning:
+          enabled: true
+          buckets:
+            - name: meet-media-storage
+              versioning: true
+      - ingress:
+          enabled: true
+          hostname: minio-console.127.0.0.1.nip.io
+          servicePort: 9001
+          annotations:
+            nginx.ingress.kubernetes.io/proxy-body-size: "0"
+            kubernetes.io/ingress.class: nginx
+        extraVolumes:
+          - name: mkcert
+            secret:
+              secretName: mkcert
+        extraVolumeMounts:
+          - mountPath: /certs/CAs/
+            name: mkcert
+
+  - name: redis
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    missingFileHandler: Warn
+    namespace: {{ .Namespace }}
+    chart: bitnami/redis
+    version: 18.19.2
+    values:
+      - auth:
+          password: pass
+        architecture: standalone
+
   - name: extra
     installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
     missingFileHandler: Warn
@@ -33,8 +129,6 @@ releases:
       enablePermanentRedirect: {{ .Values | get "enablePermanentRedirect" "False"}}
       oldDomain: {{ .Values | get "oldDomain" "demo.com" }}
       newDomain: {{ .Values | get "newDomain" "demo.com" }}
-    - realm: |
-{{ readFile "../../docker/auth/realm.json" | replace "http://localhost:3200" "https://meet.127.0.0.1.nip.io" | indent 8 }}
 
   - name: meet
     version: {{ .Values.version }}
@@ -68,61 +162,3 @@ releases:
       - env.d/{{ .Environment.Name }}/values.secrets.yaml
     secrets:
       - env.d/{{ .Environment.Name }}/secrets.enc.yaml
-
-  - name: dev-backend
-    namespace: {{ .Namespace }}
-    chart: dev-backends/dev-backend
-    version: 0.0.1
-    values:
-      - postgres:
-          enabled: true
-          name: postgres
-          #serviceNameOverride: postgres
-          image: postgres:16-alpine
-          username: dinum
-          password: pass
-          database: dinum
-          size: 1Gi
-      - redis:
-          enabled: true
-          name: redis
-          #serviceNameOverride: redis
-          image: redis:8.2-alpine
-          username: user
-          password: pass
-      - minio:
-          enabled: true
-          image: minio/minio
-          name: minio
-          #serviceNameOverride: minio
-          hostname: minio.127.0.0.1.nip.io
-          tls:
-            enabled: true
-            secretName: meet-tls
-          username: dinum
-          password: password
-          bucket: meet-media-storage
-          size: 1Gi
-      - keycloak:
-          enabled: true
-          image: quay.io/keycloak/keycloak:20.0.1
-          name: keycloak
-          #serviceNameOverride: keycloak
-          hostname: keycloak.127.0.0.1.nip.io
-          username: admin
-          password: pass
-          tls:
-            enabled: true
-            secretName: meet-tls
-          db:
-            username: dinum
-            password: pass
-            database: keycloak
-            size: 1Gi
-            image: postgres:16-alpine
-          realm:
-            name: meet
-            username: meet
-            password: meet
-            email: meet@example.com
-