✨(feat) add caption font color and background settings

Select font color and background color in Accessibility > Captions.

src/frontend/src/features/subtitle/component/CaptionsSettings.tsx

@@ -6,7 +6,11 @@ import { useSnapshot } from 'valtio'
 import {
   accessibilityStore,
   type CaptionTextSize,
+  type CaptionFontColor,
+  type CaptionBackgroundColor,
   CAPTION_TEXT_SIZE_OPTIONS,
+  CAPTION_FONT_COLOR_OPTIONS,
+  CAPTION_BACKGROUND_COLOR_OPTIONS,
 } from '@/stores/accessibility'
 
 export const CaptionsSettings = () => {
@@ -24,6 +28,24 @@ export const CaptionsSettings = () => {
     [t]
   )
 
+  const captionFontColorItems = useMemo(
+    () =>
+      CAPTION_FONT_COLOR_OPTIONS.map((color) => ({
+        value: color,
+        label: t(`fontColor.options.${color}`),
+      })),
+    [t]
+  )
+
+  const captionBackgroundColorItems = useMemo(
+    () =>
+      CAPTION_BACKGROUND_COLOR_OPTIONS.map((color) => ({
+        value: color,
+        label: t(`backgroundColor.options.${color}`),
+      })),
+    [t]
+  )
+
   return (
     <li>
       <H
@@ -34,16 +56,45 @@ export const CaptionsSettings = () => {
       >
         {t('heading')}
       </H>
-      <Field
-        type="select"
-        label={t('textSize.label')}
-        items={captionTextSizeItems}
-        selectedKey={snap.captionTextSize}
-        onSelectionChange={(key) => {
-          accessibilityStore.captionTextSize = key as CaptionTextSize
-        }}
-        wrapperProps={{ noMargin: true, fullWidth: true }}
-      />
+      <div
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.75rem',
+        })}
+      >
+        <Field
+          type="select"
+          label={t('textSize.label')}
+          items={captionTextSizeItems}
+          selectedKey={snap.captionTextSize}
+          onSelectionChange={(key) => {
+            accessibilityStore.captionTextSize = key as CaptionTextSize
+          }}
+          wrapperProps={{ noMargin: true, fullWidth: true }}
+        />
+        <Field
+          type="select"
+          label={t('fontColor.label')}
+          items={captionFontColorItems}
+          selectedKey={snap.captionFontColor}
+          onSelectionChange={(key) => {
+            accessibilityStore.captionFontColor = key as CaptionFontColor
+          }}
+          wrapperProps={{ noMargin: true, fullWidth: true }}
+        />
+        <Field
+          type="select"
+          label={t('backgroundColor.label')}
+          items={captionBackgroundColorItems}
+          selectedKey={snap.captionBackgroundColor}
+          onSelectionChange={(key) => {
+            accessibilityStore.captionBackgroundColor =
+              key as CaptionBackgroundColor
+          }}
+          wrapperProps={{ noMargin: true, fullWidth: true }}
+        />
+      </div>
     </li>
   )
 }