Skip to content

Commit ea1c90d

Browse files
Ovgoddlebaudantoine
Ovgodd
authored and
lebaudantoine
committed
✨(feat) add default color option for captions
Add "Default" option (white text on black background) for font and background.
1 parent 3e963e3 commit ea1c90d

7 files changed

Lines changed: 85 additions & 108 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ and this project adheres to
2222
- ♿️(frontend) Caption text size setting for accessibility #1062
2323
- ♿️(frontend) sync html lang attribute with i18n for screen readers #1111
2424
- ♿️(frontend) improve MoreLink a11y and UX on home page #1112
25-
- ♿(frontend) improve chat toast a11y for screen readers #1109
26-
- ♿(frontend) improve ui and aria labels for help article links #1108
25+
- ♿️(frontend) improve chat toast a11y for screen readers #1109
26+
- ♿️(frontend) improve ui and aria labels for help article links #1108
2727
- 🌐(frontend) improve German translation #1125
2828
- 🔨(python-env) migrate meet main app to UV #1120
2929
- ♻️(backend) align Application model field with `is_active` convention #1133
@@ -32,6 +32,7 @@ and this project adheres to
3232
- 🔒️(backend) avoid information exposure through exception messages #1144
3333
- ⬆️(dependencies) update PyJWT to v2.12.0 [SECURITY] #1151
3434
- 📌(agents) unpin OpenSSL and related dependencies #1167
35+
- ♿️(frontend) add caption font and background color customization #1122
3536

3637
### Fixed
3738

@@ -41,7 +42,6 @@ and this project adheres to
4142
- 🩹(backend) ignore non-recording uploads in storage webhook handler #1142
4243
- 🐛(frontend) fix dimension mismatch in BackgroundCustomProcessor #1116
4344

44-
4545
## [1.10.0] - 2026-03-05
4646

4747
### Changed

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ import { useSnapshot } from 'valtio'
66
import {
77
accessibilityStore,
88
type CaptionTextSize,
9-
type CaptionFontColor,
10-
type CaptionBackgroundColor,
9+
type CaptionColor,
1110
CAPTION_TEXT_SIZE_OPTIONS,
12-
CAPTION_FONT_COLOR_OPTIONS,
13-
CAPTION_BACKGROUND_COLOR_OPTIONS,
11+
CAPTION_COLOR_OPTIONS,
1412
} from '@/stores/accessibility'
1513

1614
export const CaptionsSettings = () => {
@@ -30,7 +28,7 @@ export const CaptionsSettings = () => {
3028

3129
const captionFontColorItems = useMemo(
3230
() =>
33-
CAPTION_FONT_COLOR_OPTIONS.map((color) => ({
31+
CAPTION_COLOR_OPTIONS.map((color) => ({
3432
value: color,
3533
label: t(`fontColor.options.${color}`),
3634
})),
@@ -39,7 +37,7 @@ export const CaptionsSettings = () => {
3937

4038
const captionBackgroundColorItems = useMemo(
4139
() =>
42-
CAPTION_BACKGROUND_COLOR_OPTIONS.map((color) => ({
40+
CAPTION_COLOR_OPTIONS.map((color) => ({
4341
value: color,
4442
label: t(`backgroundColor.options.${color}`),
4543
})),
@@ -79,7 +77,7 @@ export const CaptionsSettings = () => {
7977
items={captionFontColorItems}
8078
selectedKey={snap.captionFontColor}
8179
onSelectionChange={(key) => {
82-
accessibilityStore.captionFontColor = key as CaptionFontColor
80+
accessibilityStore.captionFontColor = key as CaptionColor
8381
}}
8482
wrapperProps={{ noMargin: true, fullWidth: true }}
8583
/>
@@ -89,8 +87,7 @@ export const CaptionsSettings = () => {
8987
items={captionBackgroundColorItems}
9088
selectedKey={snap.captionBackgroundColor}
9189
onSelectionChange={(key) => {
92-
accessibilityStore.captionBackgroundColor =
93-
key as CaptionBackgroundColor
90+
accessibilityStore.captionBackgroundColor = key as CaptionColor
9491
}}
9592
wrapperProps={{ noMargin: true, fullWidth: true }}
9693
/>

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,28 +130,29 @@
130130
"fontColor": {
131131
"label": "Schriftfarbe",
132132
"options": {
133+
"default": "Standard",
133134
"white": "Weiß",
134-
"yellow": "Gelb",
135-
"green": "Grün",
136-
"cyan": "Cyan",
135+
"black": "Schwarz",
137136
"blue": "Blau",
138-
"magenta": "Magenta",
137+
"green": "Grün",
139138
"red": "Rot",
140-
"black": "Schwarz"
139+
"yellow": "Gelb",
140+
"cyan": "Cyan",
141+
"magenta": "Magenta"
141142
}
142143
},
143144
"backgroundColor": {
144145
"label": "Hintergrundfarbe",
145146
"options": {
146-
"black": "Schwarz",
147+
"default": "Standard",
147148
"white": "Weiß",
148-
"red": "Rot",
149-
"green": "Grün",
149+
"black": "Schwarz",
150150
"blue": "Blau",
151+
"green": "Grün",
152+
"red": "Rot",
151153
"yellow": "Gelb",
152154
"cyan": "Cyan",
153-
"magenta": "Magenta",
154-
"transparent": "Transparent"
155+
"magenta": "Magenta"
155156
}
156157
}
157158
}

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,28 +130,29 @@
130130
"fontColor": {
131131
"label": "Font color",
132132
"options": {
133+
"default": "Default",
133134
"white": "White",
134-
"yellow": "Yellow",
135-
"green": "Green",
136-
"cyan": "Cyan",
135+
"black": "Black",
137136
"blue": "Blue",
138-
"magenta": "Magenta",
137+
"green": "Green",
139138
"red": "Red",
140-
"black": "Black"
139+
"yellow": "Yellow",
140+
"cyan": "Cyan",
141+
"magenta": "Magenta"
141142
}
142143
},
143144
"backgroundColor": {
144145
"label": "Background color",
145146
"options": {
146-
"black": "Black",
147+
"default": "Default",
147148
"white": "White",
148-
"red": "Red",
149-
"green": "Green",
149+
"black": "Black",
150150
"blue": "Blue",
151+
"green": "Green",
152+
"red": "Red",
151153
"yellow": "Yellow",
152154
"cyan": "Cyan",
153-
"magenta": "Magenta",
154-
"transparent": "Transparent"
155+
"magenta": "Magenta"
155156
}
156157
}
157158
}

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,28 +130,29 @@
130130
"fontColor": {
131131
"label": "Couleur du texte",
132132
"options": {
133+
"default": "Par défaut",
133134
"white": "Blanc",
134-
"yellow": "Jaune",
135-
"green": "Vert",
136-
"cyan": "Cyan",
135+
"black": "Noir",
137136
"blue": "Bleu",
138-
"magenta": "Magenta",
137+
"green": "Vert",
139138
"red": "Rouge",
140-
"black": "Noir"
139+
"yellow": "Jaune",
140+
"cyan": "Cyan",
141+
"magenta": "Magenta"
141142
}
142143
},
143144
"backgroundColor": {
144145
"label": "Couleur de fond",
145146
"options": {
146-
"black": "Noir",
147+
"default": "Par défaut",
147148
"white": "Blanc",
148-
"red": "Rouge",
149-
"green": "Vert",
149+
"black": "Noir",
150150
"blue": "Bleu",
151+
"green": "Vert",
152+
"red": "Rouge",
151153
"yellow": "Jaune",
152154
"cyan": "Cyan",
153-
"magenta": "Magenta",
154-
"transparent": "Transparent"
155+
"magenta": "Magenta"
155156
}
156157
}
157158
}

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,28 +130,29 @@
130130
"fontColor": {
131131
"label": "Tekstkleur",
132132
"options": {
133+
"default": "Standaard",
133134
"white": "Wit",
134-
"yellow": "Geel",
135-
"green": "Groen",
136-
"cyan": "Cyaan",
135+
"black": "Zwart",
137136
"blue": "Blauw",
138-
"magenta": "Magenta",
137+
"green": "Groen",
139138
"red": "Rood",
140-
"black": "Zwart"
139+
"yellow": "Geel",
140+
"cyan": "Cyaan",
141+
"magenta": "Magenta"
141142
}
142143
},
143144
"backgroundColor": {
144145
"label": "Achtergrondkleur",
145146
"options": {
146-
"black": "Zwart",
147+
"default": "Standaard",
147148
"white": "Wit",
148-
"red": "Rood",
149-
"green": "Groen",
149+
"black": "Zwart",
150150
"blue": "Blauw",
151+
"green": "Groen",
152+
"red": "Rood",
151153
"yellow": "Geel",
152154
"cyan": "Cyaan",
153-
"magenta": "Magenta",
154-
"transparent": "Transparant"
155+
"magenta": "Magenta"
155156
}
156157
}
157158
}

‎src/frontend/src/stores/accessibility.ts‎

Lines changed: 32 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,88 +10,65 @@ export const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
1010
'large',
1111
]
1212

13-
export type CaptionFontColor =
13+
export type CaptionColor =
14+
| 'default'
1415
| 'white'
15-
| 'yellow'
16+
| 'black'
17+
| 'blue'
1618
| 'green'
19+
| 'red'
20+
| 'yellow'
1721
| 'cyan'
18-
| 'blue'
1922
| 'magenta'
20-
| 'red'
21-
| 'black'
2223

23-
export const CAPTION_FONT_COLOR_OPTIONS: CaptionFontColor[] = [
24+
export const CAPTION_COLOR_OPTIONS: CaptionColor[] = [
25+
'default',
2426
'white',
25-
'yellow',
27+
'black',
28+
'blue',
2629
'green',
30+
'red',
31+
'yellow',
2732
'cyan',
28-
'blue',
2933
'magenta',
30-
'red',
31-
'black',
3234
]
3335

34-
export const CAPTION_FONT_COLOR_VALUES: Record<CaptionFontColor, string> = {
36+
export const CAPTION_FONT_COLOR_VALUES: Record<CaptionColor, string> = {
37+
default: '#FFFFFF',
3538
white: '#FFFFFF',
36-
yellow: '#FFFF00',
39+
black: '#000000',
40+
blue: '#0000FF',
3741
green: '#00FF00',
42+
red: '#FF0000',
43+
yellow: '#FFFF00',
3844
cyan: '#00FFFF',
39-
blue: '#0000FF',
4045
magenta: '#FF00FF',
41-
red: '#FF0000',
42-
black: '#000000',
4346
}
4447

45-
export type CaptionBackgroundColor =
46-
| 'black'
47-
| 'white'
48-
| 'red'
49-
| 'green'
50-
| 'blue'
51-
| 'yellow'
52-
| 'cyan'
53-
| 'magenta'
54-
| 'transparent'
55-
56-
export const CAPTION_BACKGROUND_COLOR_OPTIONS: CaptionBackgroundColor[] = [
57-
'black',
58-
'white',
59-
'red',
60-
'green',
61-
'blue',
62-
'yellow',
63-
'cyan',
64-
'magenta',
65-
'transparent',
66-
]
67-
68-
export const CAPTION_BACKGROUND_COLOR_VALUES: Record<
69-
CaptionBackgroundColor,
70-
string
71-
> = {
48+
export const CAPTION_BACKGROUND_COLOR_VALUES: Record<CaptionColor, string> = {
49+
default: 'rgba(0, 0, 0, 0.75)',
7250
black: 'rgba(0, 0, 0, 0.75)',
7351
white: 'rgba(255, 255, 255, 0.75)',
74-
red: 'rgba(255, 0, 0, 0.75)',
75-
green: 'rgba(0, 255, 0, 0.75)',
7652
blue: 'rgba(0, 0, 255, 0.75)',
53+
green: 'rgba(0, 255, 0, 0.75)',
54+
red: 'rgba(255, 0, 0, 0.75)',
7755
yellow: 'rgba(255, 255, 0, 0.75)',
7856
cyan: 'rgba(0, 255, 255, 0.75)',
7957
magenta: 'rgba(255, 0, 255, 0.75)',
80-
transparent: 'transparent',
8158
}
8259

8360
type AccessibilityState = {
8461
announceReactions: boolean
8562
captionTextSize: CaptionTextSize
86-
captionFontColor: CaptionFontColor
87-
captionBackgroundColor: CaptionBackgroundColor
63+
captionFontColor: CaptionColor
64+
captionBackgroundColor: CaptionColor
8865
}
8966

9067
const DEFAULT_STATE: AccessibilityState = {
9168
announceReactions: false,
9269
captionTextSize: 'medium',
93-
captionFontColor: 'white',
94-
captionBackgroundColor: 'black',
70+
captionFontColor: 'default',
71+
captionBackgroundColor: 'default',
9572
}
9673

9774
function getAccessibilityState(): AccessibilityState {
@@ -104,17 +81,16 @@ function getAccessibilityState(): AccessibilityState {
10481
)
10582
? parsed.captionTextSize
10683
: DEFAULT_STATE.captionTextSize
107-
const captionFontColor = CAPTION_FONT_COLOR_OPTIONS.includes(
84+
const captionFontColor = CAPTION_COLOR_OPTIONS.includes(
10885
parsed.captionFontColor
10986
)
11087
? parsed.captionFontColor
11188
: DEFAULT_STATE.captionFontColor
112-
const captionBackgroundColor =
113-
CAPTION_BACKGROUND_COLOR_OPTIONS.includes(
114-
parsed.captionBackgroundColor
115-
)
116-
? parsed.captionBackgroundColor
117-
: DEFAULT_STATE.captionBackgroundColor
89+
const captionBackgroundColor = CAPTION_COLOR_OPTIONS.includes(
90+
parsed.captionBackgroundColor
91+
)
92+
? parsed.captionBackgroundColor
93+
: DEFAULT_STATE.captionBackgroundColor
11894
return {
11995
...DEFAULT_STATE,
12096
...parsed,

0 commit comments

Comments
 (0)
⚡