studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(frontend) refactor video tab i18n strings with common prefix

Browse Source 
Reorganize internationalization strings for video tab to use shared
"video" prefix, improving code maintainability and consistency.
This commit is contained in:
lebaudantoine
2025-08-13 12:46:33 +02:00
committed by aleb_the_flash
parent 9728603f72
commit 8245270f28
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/frontend/src/features/settings/components/tabs/VideoTab.tsx
View File

@@ -60,7 +60,7 @@ export type VideoTabProps = Pick<DialogProps, 'onOpenChange'> &
type DeviceItems = Array<{ value: string; label: string }> type DeviceItems = Array<{ value: string; label: string }>
export const VideoTab = ({ id }: VideoTabProps) => { export const VideoTab = ({ id }: VideoTabProps) => {
const { t } = useTranslation('settings') const { t } = useTranslation('settings', { keyPrefix: 'video' })
const { localParticipant } = useRoomContext() const { localParticipant } = useRoomContext()
const { const {
@@ -92,7 +92,7 @@ export const VideoTab = ({ id }: VideoTabProps) => {
const disabledProps = isCamEnabled const disabledProps = isCamEnabled
? {} ? {}
: { : {
placeholder: t('video.permissionsRequired'), placeholder: t('permissionsRequired'),
isDisabled: true, isDisabled: true,
} }
@@ -134,10 +134,10 @@ export const VideoTab = ({ id }: VideoTabProps) => {
return ( return (
<TabPanel padding={'md'} flex id={id}> <TabPanel padding={'md'} flex id={id}>
<RowWrapper heading={t('video.camera.heading')}> <RowWrapper heading={t('camera.heading')}>
<Field <Field
type="select" type="select"
label={t('video.camera.label')} label={t('camera.label')}
items={itemsIn} items={itemsIn}
selectedKey={videoDeviceId} selectedKey={videoDeviceId}
onSelectionChange={async (key) => { onSelectionChange={async (key) => {
@@ -152,7 +152,7 @@ export const VideoTab = ({ id }: VideoTabProps) => {
<div <div
role="status" role="status"
aria-label={t( aria-label={t(
`video.camera.previewAriaLabel.${localParticipant.isCameraEnabled ? 'enabled' : 'disabled'}` `camera.previewAriaLabel.${localParticipant.isCameraEnabled ? 'enabled' : 'disabled'}`
)} )}
> >
{localParticipant.isCameraEnabled ? ( {localParticipant.isCameraEnabled ? (
@@ -184,12 +184,12 @@ export const VideoTab = ({ id }: VideoTabProps) => {
textAlign: 'center', textAlign: 'center',
})} })}
> >
{t('video.camera.disabled')} {t('camera.disabled')}
</span> </span>
)} )}
</div> </div>
</RowWrapper> </RowWrapper>
<H lvl={2}>{t('video.resolution.heading')}</H> <H lvl={2}>{t('resolution.heading')}</H>
<HStack <HStack
gap={0} gap={0}
style={{ style={{
@@ -204,19 +204,19 @@ export const VideoTab = ({ id }: VideoTabProps) => {
> >
<Field <Field
type="select" type="select"
label={t('video.resolution.publish.label')} label={t('resolution.publish.label')}
items={[ items={[
{ {
value: 'h720', value: 'h720',
label: `${t('video.resolution.publish.items.high')} (720p)`, label: `${t('resolution.publish.items.high')} (720p)`,
}, },
{ {
value: 'h360', value: 'h360',
label: `${t('video.resolution.publish.items.medium')} (360p)`, label: `${t('resolution.publish.items.medium')} (360p)`,
}, },
{ {
value: 'h180', value: 'h180',
label: `${t('video.resolution.publish.items.low')} (180p)`, label: `${t('resolution.publish.items.low')} (180p)`,
}, },
]} ]}
selectedKey={videoPublishResolution} selectedKey={videoPublishResolution}