✨(feat) add default color option for captions

Add "Default" option (white text on black background) for font and background.

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

@@ -6,11 +6,9 @@ import { useSnapshot } from 'valtio'
 import {
   accessibilityStore,
   type CaptionTextSize,
-  type CaptionFontColor,
-  type CaptionBackgroundColor,
+  type CaptionColor,
   CAPTION_TEXT_SIZE_OPTIONS,
-  CAPTION_FONT_COLOR_OPTIONS,
-  CAPTION_BACKGROUND_COLOR_OPTIONS,
+  CAPTION_COLOR_OPTIONS,
 } from '@/stores/accessibility'
 
 export const CaptionsSettings = () => {
@@ -30,7 +28,7 @@ export const CaptionsSettings = () => {
 
   const captionFontColorItems = useMemo(
     () =>
-      CAPTION_FONT_COLOR_OPTIONS.map((color) => ({
+      CAPTION_COLOR_OPTIONS.map((color) => ({
         value: color,
         label: t(`fontColor.options.${color}`),
       })),
@@ -39,7 +37,7 @@ export const CaptionsSettings = () => {
 
   const captionBackgroundColorItems = useMemo(
     () =>
-      CAPTION_BACKGROUND_COLOR_OPTIONS.map((color) => ({
+      CAPTION_COLOR_OPTIONS.map((color) => ({
         value: color,
         label: t(`backgroundColor.options.${color}`),
       })),
@@ -79,7 +77,7 @@ export const CaptionsSettings = () => {
           items={captionFontColorItems}
           selectedKey={snap.captionFontColor}
           onSelectionChange={(key) => {
-            accessibilityStore.captionFontColor = key as CaptionFontColor
+            accessibilityStore.captionFontColor = key as CaptionColor
           }}
           wrapperProps={{ noMargin: true, fullWidth: true }}
         />
@@ -89,8 +87,7 @@ export const CaptionsSettings = () => {
           items={captionBackgroundColorItems}
           selectedKey={snap.captionBackgroundColor}
           onSelectionChange={(key) => {
-            accessibilityStore.captionBackgroundColor =
-              key as CaptionBackgroundColor
+            accessibilityStore.captionBackgroundColor = key as CaptionColor
           }}
           wrapperProps={{ noMargin: true, fullWidth: true }}
         />

src/frontend/src/locales/de/settings.json

@@ -130,28 +130,29 @@
       "fontColor": {
         "label": "Schriftfarbe",
         "options": {
+          "default": "Standard",
           "white": "Weiß",
-          "yellow": "Gelb",
-          "green": "Grün",
-          "cyan": "Cyan",
+          "black": "Schwarz",
           "blue": "Blau",
-          "magenta": "Magenta",
+          "green": "Grün",
           "red": "Rot",
-          "black": "Schwarz"
+          "yellow": "Gelb",
+          "cyan": "Cyan",
+          "magenta": "Magenta"
         }
       },
       "backgroundColor": {
         "label": "Hintergrundfarbe",
         "options": {
-          "black": "Schwarz",
+          "default": "Standard",
           "white": "Weiß",
-          "red": "Rot",
-          "green": "Grün",
+          "black": "Schwarz",
           "blue": "Blau",
+          "green": "Grün",
+          "red": "Rot",
           "yellow": "Gelb",
           "cyan": "Cyan",
-          "magenta": "Magenta",
-          "transparent": "Transparent"
+          "magenta": "Magenta"
         }
       }
     }

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

@@ -130,28 +130,29 @@
       "fontColor": {
         "label": "Font color",
         "options": {
+          "default": "Default",
           "white": "White",
-          "yellow": "Yellow",
-          "green": "Green",
-          "cyan": "Cyan",
+          "black": "Black",
           "blue": "Blue",
-          "magenta": "Magenta",
+          "green": "Green",
           "red": "Red",
-          "black": "Black"
+          "yellow": "Yellow",
+          "cyan": "Cyan",
+          "magenta": "Magenta"
         }
       },
       "backgroundColor": {
         "label": "Background color",
         "options": {
-          "black": "Black",
+          "default": "Default",
           "white": "White",
-          "red": "Red",
-          "green": "Green",
+          "black": "Black",
           "blue": "Blue",
+          "green": "Green",
+          "red": "Red",
           "yellow": "Yellow",
           "cyan": "Cyan",
-          "magenta": "Magenta",
-          "transparent": "Transparent"
+          "magenta": "Magenta"
         }
       }
     }

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

@@ -130,28 +130,29 @@
       "fontColor": {
         "label": "Couleur du texte",
         "options": {
+          "default": "Par défaut",
           "white": "Blanc",
-          "yellow": "Jaune",
-          "green": "Vert",
-          "cyan": "Cyan",
+          "black": "Noir",
           "blue": "Bleu",
-          "magenta": "Magenta",
+          "green": "Vert",
           "red": "Rouge",
-          "black": "Noir"
+          "yellow": "Jaune",
+          "cyan": "Cyan",
+          "magenta": "Magenta"
         }
       },
       "backgroundColor": {
         "label": "Couleur de fond",
         "options": {
-          "black": "Noir",
+          "default": "Par défaut",
           "white": "Blanc",
-          "red": "Rouge",
-          "green": "Vert",
+          "black": "Noir",
           "blue": "Bleu",
+          "green": "Vert",
+          "red": "Rouge",
           "yellow": "Jaune",
           "cyan": "Cyan",
-          "magenta": "Magenta",
-          "transparent": "Transparent"
+          "magenta": "Magenta"
         }
       }
     }

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

@@ -130,28 +130,29 @@
       "fontColor": {
         "label": "Tekstkleur",
         "options": {
+          "default": "Standaard",
           "white": "Wit",
-          "yellow": "Geel",
-          "green": "Groen",
-          "cyan": "Cyaan",
+          "black": "Zwart",
           "blue": "Blauw",
-          "magenta": "Magenta",
+          "green": "Groen",
           "red": "Rood",
-          "black": "Zwart"
+          "yellow": "Geel",
+          "cyan": "Cyaan",
+          "magenta": "Magenta"
         }
       },
       "backgroundColor": {
         "label": "Achtergrondkleur",
         "options": {
-          "black": "Zwart",
+          "default": "Standaard",
           "white": "Wit",
-          "red": "Rood",
-          "green": "Groen",
+          "black": "Zwart",
           "blue": "Blauw",
+          "green": "Groen",
+          "red": "Rood",
           "yellow": "Geel",
           "cyan": "Cyaan",
-          "magenta": "Magenta",
-          "transparent": "Transparant"
+          "magenta": "Magenta"
         }
       }
     }

src/frontend/src/stores/accessibility.ts

@@ -10,88 +10,65 @@ export const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
   'large',
 ]
 
-export type CaptionFontColor =
+export type CaptionColor =
+  | 'default'
   | 'white'
-  | 'yellow'
-  | 'green'
-  | 'cyan'
-  | 'blue'
-  | 'magenta'
-  | 'red'
   | 'black'
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'yellow'
+  | 'cyan'
+  | 'magenta'
 
-export const CAPTION_FONT_COLOR_OPTIONS: CaptionFontColor[] = [
+export const CAPTION_COLOR_OPTIONS: CaptionColor[] = [
+  'default',
   'white',
-  'yellow',
-  'green',
-  'cyan',
-  'blue',
-  'magenta',
-  'red',
   'black',
+  'blue',
+  'green',
+  'red',
+  'yellow',
+  'cyan',
+  'magenta',
 ]
 
-export const CAPTION_FONT_COLOR_VALUES: Record<CaptionFontColor, string> = {
+export const CAPTION_FONT_COLOR_VALUES: Record<CaptionColor, string> = {
+  default: '#FFFFFF',
   white: '#FFFFFF',
-  yellow: '#FFFF00',
-  green: '#00FF00',
-  cyan: '#00FFFF',
-  blue: '#0000FF',
-  magenta: '#FF00FF',
-  red: '#FF0000',
   black: '#000000',
+  blue: '#0000FF',
+  green: '#00FF00',
+  red: '#FF0000',
+  yellow: '#FFFF00',
+  cyan: '#00FFFF',
+  magenta: '#FF00FF',
 }
 
-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
-> = {
+export const CAPTION_BACKGROUND_COLOR_VALUES: Record<CaptionColor, string> = {
+  default: 'rgba(0, 0, 0, 0.75)',
   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)',
+  green: 'rgba(0, 255, 0, 0.75)',
+  red: 'rgba(255, 0, 0, 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
+  captionFontColor: CaptionColor
+  captionBackgroundColor: CaptionColor
 }
 
 const DEFAULT_STATE: AccessibilityState = {
   announceReactions: false,
   captionTextSize: 'medium',
-  captionFontColor: 'white',
-  captionBackgroundColor: 'black',
+  captionFontColor: 'default',
+  captionBackgroundColor: 'default',
 }
 
 function getAccessibilityState(): AccessibilityState {
@@ -104,17 +81,16 @@ function getAccessibilityState(): AccessibilityState {
       )
         ? parsed.captionTextSize
         : DEFAULT_STATE.captionTextSize
-      const captionFontColor = CAPTION_FONT_COLOR_OPTIONS.includes(
+      const captionFontColor = CAPTION_COLOR_OPTIONS.includes(
         parsed.captionFontColor
       )
         ? parsed.captionFontColor
         : DEFAULT_STATE.captionFontColor
-      const captionBackgroundColor =
-        CAPTION_BACKGROUND_COLOR_OPTIONS.includes(
-          parsed.captionBackgroundColor
-        )
-          ? parsed.captionBackgroundColor
-          : DEFAULT_STATE.captionBackgroundColor
+      const captionBackgroundColor = CAPTION_COLOR_OPTIONS.includes(
+        parsed.captionBackgroundColor
+      )
+        ? parsed.captionBackgroundColor
+        : DEFAULT_STATE.captionBackgroundColor
       return {
         ...DEFAULT_STATE,
         ...parsed,