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

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

@@ -31,7 +31,6 @@ import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
 import { ToggleDevice } from './join/ToggleDevice'
 import { SelectDevice } from './join/SelectDevice'
 import { useResolveDefaultDeviceId } from '../livekit/hooks/useResolveDefaultDevice'
-import { isSafari } from '@/utils/livekit'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -102,13 +101,11 @@ export const Join = ({
       audioEnabled,
       videoEnabled,
       audioDeviceId,
-      audioOutputDeviceId,
       videoDeviceId,
       processorSerialized,
       username,
     },
     saveAudioInputEnabled,
-    saveAudioOutputDeviceId,
     saveVideoInputEnabled,
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
@@ -593,7 +590,7 @@ export const Join = ({
             >
               <div
                 className={css({
-                  width: '30%',
+                  width: '50%',
                 })}
               >
                 <SelectDevice
@@ -602,22 +599,9 @@ export const Join = ({
                   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

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

@@ -2,11 +2,10 @@ import {
   RemixiconComponentType,
   RiMicLine,
   RiVideoOnLine,
-  RiVolumeDownLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useMediaDeviceSelect } from '@livekit/components-react'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { Select } from '@/primitives/Select'
 import { useSnapshot } from 'valtio'
 import { permissionsStore } from '@/stores/permissions'
@@ -45,22 +44,6 @@ const SelectDevicePermissions = ({
       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])
-
   return (
     <Select
       aria-label={t(`${kind}.choose`)}
@@ -68,11 +51,7 @@ const SelectDevicePermissions = ({
       isDisabled={items.length === 0}
       items={items}
       iconComponent={config?.icon}
-      placeholder={
-        items.length === 0
-          ? t('selectDevice.loading')
-          : t('selectDevice.select')
-      }
+      placeholder={t('selectDevice.loading')}
       selectedKey={id || activeDeviceId}
       onSelectionChange={(key) => {
         onSubmit?.(key as string)
@@ -93,10 +72,6 @@ export const SelectDevice = ({ id, onSubmit, kind }: SelectDeviceProps) => {
         return {
           icon: RiMicLine,
         }
-      case 'audiooutput':
-        return {
-          icon: RiVolumeDownLine,
-        }
       case 'videoinput':
         return {
           icon: RiVideoOnLine,
@@ -111,9 +86,6 @@ export const SelectDevice = ({ id, onSubmit, kind }: SelectDeviceProps) => {
     if (kind == 'videoinput') {
       return permissions.isCameraDenied || permissions.isCameraPrompted
     }
-    if (kind == 'audiooutput') {
-      return permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
-    }
     return false
   }, [kind, permissions])
 

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

@@ -49,13 +49,13 @@ export const ToggleDevice = <T extends ToggleSource>({
     }
     try {
       if (isTrackEnabled) {
+        await track.mute()
         setIsTrackEnabled(false)
         onChange?.(false, true)
-        await track.mute()
       } else {
+        await track.unmute()
         setIsTrackEnabled(true)
         onChange?.(true, true)
-        await track.unmute()
       }
     } catch (error) {
       console.error('Failed to toggle track:', error)

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/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/VideoConference.tsx

@@ -32,7 +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'
 
 const LayoutWrapper = styled(
   'div',
@@ -78,7 +77,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     React.useRef<TrackReferenceOrPlaceholder | null>(null)
 
   useConnectionObserver()
-  useVideoResolutionSubscription()
 
   const tracks = useTracks(
     [

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

@@ -9,13 +9,11 @@ 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'
 
@@ -71,7 +69,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               {t('dialog.heading')}
             </Heading>
           )}
-          <TabList border={false}>
+          <TabList border={false} aria-label="Chat log orientation example">
             <Tab icon highlight id="1">
               <RiAccountCircleLine />
               {isWideScreen && t('tabs.account')}
@@ -81,14 +79,10 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               {isWideScreen && t('tabs.audio')}
             </Tab>
             <Tab icon highlight id="3">
-              <RiVideoOnLine />
-              {isWideScreen && t('tabs.video')}
-            </Tab>
-            <Tab icon highlight id="4">
               <RiSettings3Line />
               {isWideScreen && t('tabs.general')}
             </Tab>
-            <Tab icon highlight id="5">
+            <Tab icon highlight id="4">
               <RiNotification3Line />
               {isWideScreen && t('tabs.notifications')}
             </Tab>
@@ -97,9 +91,8 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
         <div className={tabPanelContainerStyle}>
           <AccountTab id="1" onOpenChange={props.onOpenChange} />
           <AudioTab id="2" />
-          <VideoTab id="3" />
-          <GeneralTab id="4" />
-          <NotificationsTab id="5" />
+          <GeneralTab id="3" />
+          <NotificationsTab id="4" />
         </div>
       </Tabs>
     </Dialog>

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'>
@@ -28,7 +95,6 @@ export const AudioTab = ({ id }: AudioTabProps) => {
     userChoices: { noiseReductionEnabled },
     saveAudioInputDeviceId,
     saveNoiseReductionEnabled,
-    saveAudioOutputDeviceId,
   } = usePersistentUserChoices()
 
   const isSpeaking = useIsSpeaking(localParticipant)
@@ -117,10 +183,9 @@ export const AudioTab = ({ id }: AudioTabProps) => {
             defaultSelectedKey={
               activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
             }
-            onSelectionChange={(key) => {
+            onSelectionChange={async (key) =>
               setActiveMediaDeviceOut(key as string)
-              saveAudioOutputDeviceId(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/locales/de/rooms.json

@@ -10,7 +10,6 @@
   "join": {
     "selectDevice": {
       "loading": "Laden…",
-      "select": "Wählen Sie einen Wert",
       "permissionsNeeded": "Genehmigung erforderlich"
     },
     "videoinput": {
@@ -28,10 +27,6 @@
       "enable": "Mikrofon aktivieren",
       "label": "Mikrofon"
     },
-    "audiooutput": {
-      "choose": "Lautsprecher auswählen",
-      "permissionsNeeded": "Lautsprecher auswählen - genehmigung erforderlich"
-    },
     "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

@@ -10,7 +10,6 @@
   "join": {
     "selectDevice": {
       "loading": "Loading…",
-      "select": "Select a value",
       "permissionsNeeded": "Permission needed"
     },
     "videoinput": {
@@ -28,10 +27,6 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "audiooutput": {
-      "choose": "Select speaker",
-      "permissionsNeeded": "Select speaker - permission needed"
-    },
     "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

@@ -10,7 +10,6 @@
   "join": {
     "selectDevice": {
       "loading": "Chargement…",
-      "select": "Sélectionnez une valeur",
       "permissionsNeeded": "Autorisations nécessaires"
     },
     "videoinput": {
@@ -28,10 +27,6 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
-    "audiooutput": {
-      "choose": "Choisir le haut-parleur",
-      "permissionsNeeded": "Choisir le haut-parleur - autorisations nécessaires"
-    },
     "heading": "Rejoindre la réunion ?",
     "effects": {
       "description": "Effets d'arrière plan",

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

@@ -10,12 +10,11 @@
   "join": {
     "selectDevice": {
       "loading": "Bezig met laden…",
-      "select": "Selecteer een waarde",
-      "permissionsNeeded": "Toestemming vereist"
+      "permissionNeeded": "Toestemming vereist"
     },
     "videoinput": {
       "choose": "Selecteer camera",
-      "permissionsNeeded": "Selecteer camera - Toestemming vereist",
+      "permissionNeeded": "Selecteer camera - Toestemming vereist",
       "disable": "Camera uitschakelen",
       "enable": "Camera inschakelen",
       "label": "Camera",
@@ -23,15 +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"
-    },
     "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/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(),
   }
 }