electron-rare/meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(feat) add default color option for captions

Browse Source 
Add "Default" option (white text on black background) for font and background.
This commit is contained in:
Cyril
2026-03-10 14:57:00 +01:00
committed by lebaudantoine
parent d7634bd331
commit 94daf66f8c
7 changed files with 91 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+3 -3
View File
@@ -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
src/frontend/src/features/subtitle/component/CaptionsSettings.tsx
+6 -9
View File
@@ -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
+11 -10
View File
@@ -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
+11 -10
View File
@@ -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
+11 -10
View File
@@ -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
+11 -10
View File
@@ -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
+38 -62
View File
@@ -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,