♿️(frontend) add caption font color and background to access store

Persist captionFontColor and captionBackgroundColor in user preferences.

src/frontend/src/stores/accessibility.ts

@@ -10,14 +10,88 @@ export const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
   'large',
 ]
 
+export type CaptionFontColor =
+  | 'white'
+  | 'yellow'
+  | 'green'
+  | 'cyan'
+  | 'blue'
+  | 'magenta'
+  | 'red'
+  | 'black'
+
+export const CAPTION_FONT_COLOR_OPTIONS: CaptionFontColor[] = [
+  'white',
+  'yellow',
+  'green',
+  'cyan',
+  'blue',
+  'magenta',
+  'red',
+  'black',
+]
+
+export const CAPTION_FONT_COLOR_VALUES: Record<CaptionFontColor, string> = {
+  white: '#FFFFFF',
+  yellow: '#FFFF00',
+  green: '#00FF00',
+  cyan: '#00FFFF',
+  blue: '#0000FF',
+  magenta: '#FF00FF',
+  red: '#FF0000',
+  black: '#000000',
+}
+
+export type CaptionBackgroundColor =
+  | 'black'
+  | 'white'
+  | 'red'
+  | 'green'
+  | 'blue'
+  | 'yellow'
+  | 'cyan'
+  | 'magenta'
+  | 'transparent'
+
+export const CAPTION_BACKGROUND_COLOR_OPTIONS: CaptionBackgroundColor[] = [
+  'black',
+  'white',
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'cyan',
+  'magenta',
+  'transparent',
+]
+
+export const CAPTION_BACKGROUND_COLOR_VALUES: Record<
+  CaptionBackgroundColor,
+  string
+> = {
+  black: 'rgba(0, 0, 0, 0.75)',
+  white: 'rgba(255, 255, 255, 0.75)',
+  red: 'rgba(255, 0, 0, 0.75)',
+  green: 'rgba(0, 255, 0, 0.75)',
+  blue: 'rgba(0, 0, 255, 0.75)',
+  yellow: 'rgba(255, 255, 0, 0.75)',
+  cyan: 'rgba(0, 255, 255, 0.75)',
+  magenta: 'rgba(255, 0, 255, 0.75)',
+  transparent: 'transparent',
+}
+
 type AccessibilityState = {
   announceReactions: boolean
   captionTextSize: CaptionTextSize
+  captionFontColor: CaptionFontColor
+  captionBackgroundColor: CaptionBackgroundColor
 }
 
 const DEFAULT_STATE: AccessibilityState = {
   announceReactions: false,
   captionTextSize: 'medium',
+  captionFontColor: 'white',
+  captionBackgroundColor: 'black',
 }
 
 function getAccessibilityState(): AccessibilityState {
@@ -25,10 +99,22 @@ function getAccessibilityState(): AccessibilityState {
     const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY)
     if (stored) {
       const parsed = JSON.parse(stored)
-      const validCaptionSizes = CAPTION_TEXT_SIZE_OPTIONS
-      const captionTextSize = validCaptionSizes.includes(parsed.captionTextSize)
+      const captionTextSize = CAPTION_TEXT_SIZE_OPTIONS.includes(
+        parsed.captionTextSize
+      )
         ? parsed.captionTextSize
         : DEFAULT_STATE.captionTextSize
+      const captionFontColor = CAPTION_FONT_COLOR_OPTIONS.includes(
+        parsed.captionFontColor
+      )
+        ? parsed.captionFontColor
+        : DEFAULT_STATE.captionFontColor
+      const captionBackgroundColor =
+        CAPTION_BACKGROUND_COLOR_OPTIONS.includes(
+          parsed.captionBackgroundColor
+        )
+          ? parsed.captionBackgroundColor
+          : DEFAULT_STATE.captionBackgroundColor
       return {
         ...DEFAULT_STATE,
         ...parsed,
@@ -37,6 +123,8 @@ function getAccessibilityState(): AccessibilityState {
             ? parsed.announceReactions
             : DEFAULT_STATE.announceReactions,
         captionTextSize,
+        captionFontColor,
+        captionBackgroundColor,
       }
     }