diff --git a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx index 952d129d..dad2297b 100644 --- a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx +++ b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx @@ -4,6 +4,7 @@ import { css } from '@/styled-system/css' import { useTranslation } from 'react-i18next' import { useSnapshot } from 'valtio' import { accessibilityStore } from '@/stores/accessibility' +import { CaptionsSettings } from '@/features/subtitle/component/CaptionsSettings' export type AccessibilityTabProps = Pick @@ -32,6 +33,7 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => { wrapperProps={{ noMargin: true, fullWidth: true }} /> + ) diff --git a/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx b/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx new file mode 100644 index 00000000..1388c1f4 --- /dev/null +++ b/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx @@ -0,0 +1,50 @@ +import { Field, H } from '@/primitives' +import { css } from '@/styled-system/css' +import { useMemo } from 'react' +import { useTranslation } from 'react-i18next' +import { useSnapshot } from 'valtio' +import { accessibilityStore } from '@/stores/accessibility' +import type { CaptionTextSize } from '@/stores/accessibility' + +const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [ + 'small', + 'medium', + 'large', +] + +export const CaptionsSettings = () => { + const { t } = useTranslation('settings') + const snap = useSnapshot(accessibilityStore) + + const captionTextSizeItems = useMemo( + () => + CAPTION_TEXT_SIZE_OPTIONS.map((size) => ({ + value: size, + label: t(`accessibility.captions.textSize.options.${size}`), + })), + [t] + ) + + return ( +
  • + + {t('accessibility.captions.heading')} + + { + accessibilityStore.captionTextSize = key as CaptionTextSize + }} + wrapperProps={{ noMargin: true, fullWidth: true }} + /> +
  • + ) +}