diff --git a/CHANGELOG.md b/CHANGELOG.md index ee69132b..a1354ccd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,8 +22,8 @@ and this project adheres to - ♿️(frontend) Caption text size setting for accessibility #1062 - ♿️(frontend) sync html lang attribute with i18n for screen readers #1111 - ♿️(frontend) improve MoreLink a11y and UX on home page #1112 -- ♿(frontend) improve chat toast a11y for screen readers #1109 -- ♿(frontend) improve ui and aria labels for help article links #1108 +- ♿️(frontend) improve chat toast a11y for screen readers #1109 +- ♿️(frontend) improve ui and aria labels for help article links #1108 - 🌐(frontend) improve German translation #1125 - 🔨(python-env) migrate meet main app to UV #1120 - ♻️(backend) align Application model field with `is_active` convention #1133 @@ -32,6 +32,7 @@ and this project adheres to - 🔒️(backend) avoid information exposure through exception messages #1144 - ⬆️(dependencies) update PyJWT to v2.12.0 [SECURITY] #1151 - 📌(agents) unpin OpenSSL and related dependencies #1167 +- ♿️(frontend) add caption font and background color customization #1122 ### Fixed @@ -41,7 +42,6 @@ and this project adheres to - 🩹(backend) ignore non-recording uploads in storage webhook handler #1142 - 🐛(frontend) fix dimension mismatch in BackgroundCustomProcessor #1116 - ## [1.10.0] - 2026-03-05 ### Changed diff --git a/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx b/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx index d0573dbe..51f7c42e 100644 --- a/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx +++ b/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 }} /> diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json index e74ea1be..9879d21b 100644 --- a/src/frontend/src/locales/de/settings.json +++ b/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" } } } diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json index f40ca74b..722978b0 100644 --- a/src/frontend/src/locales/en/settings.json +++ b/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" } } } diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json index 0b10fad3..99e29c82 100644 --- a/src/frontend/src/locales/fr/settings.json +++ b/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" } } } diff --git a/src/frontend/src/locales/nl/settings.json b/src/frontend/src/locales/nl/settings.json index f5acf015..ec971879 100644 --- a/src/frontend/src/locales/nl/settings.json +++ b/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" } } } diff --git a/src/frontend/src/stores/accessibility.ts b/src/frontend/src/stores/accessibility.ts index d2f4640a..3c6399f5 100644 --- a/src/frontend/src/stores/accessibility.ts +++ b/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 = { +export const CAPTION_FONT_COLOR_VALUES: Record = { + 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 = { + 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,