♻️(frontend) refactor audio/video tabs to share common layout components

Extract shared layout components from audio and video tabs to eliminate
code duplication and improve maintainability.

Creates reusable layout components that both tabs can utilize, reducing
redundancy and ensuring consistent styling and behavior across settings
tabs.

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

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

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

@@ -1,6 +1,8 @@
 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)
@@ -22,6 +24,12 @@ export function usePersistentUserChoices() {
     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

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

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

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

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

@@ -1,4 +1,4 @@
-import { DialogProps, Field, H, Switch, Text } from '@/primitives'
+import { DialogProps, Field, Switch, Text } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -9,78 +9,11 @@ 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 { ReactNode } from 'react'
-import { css } from '@/styled-system/css'
-import posthog from 'posthog-js'
 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>
-    </>
-  )
-}
+import posthog from 'posthog-js'
+import { RowWrapper } from './layout/RowWrapper'
 
 export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>

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

@@ -0,0 +1,238 @@
+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

@@ -0,0 +1,71 @@
+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/settings.json

@@ -30,6 +30,37 @@
     },
     "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",
@@ -54,6 +85,7 @@
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
+    "video": "Video",
     "general": "Allgemein",
     "notifications": "Benachrichtigungen"
   }

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

@@ -30,6 +30,37 @@
     },
     "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",
@@ -54,6 +85,7 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
+    "video": "Video",
     "general": "General",
     "notifications": "Notifications"
   }

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

@@ -30,6 +30,37 @@
     },
     "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",
@@ -54,6 +85,7 @@
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
+    "video": "Vidéo",
     "general": "Général",
     "notifications": "Notifications"
   }

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

@@ -30,6 +30,37 @@
     },
     "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",
@@ -54,6 +85,7 @@
   "tabs": {
     "account": "Profiel",
     "audio": "Audio",
+    "video": "Video",
     "general": "Algemeen",
     "notifications": "Meldingen"
   }

src/frontend/src/stores/userChoices.ts

@@ -5,17 +5,24 @@ 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(),
   }
 }