diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 55922380..dc4d6ed1 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -533,6 +533,7 @@ }, "subtitles": { "backgroundLabel": "Background opacity", + "backgroundBlurLabel": "Background blur", "colorLabel": "Color", "previewQuote": "I must not fear. Fear is the mind-killer.", "textSizeLabel": "Text size", diff --git a/src/assets/locales/pl.json b/src/assets/locales/pl.json index a653e4f9..843e2201 100644 --- a/src/assets/locales/pl.json +++ b/src/assets/locales/pl.json @@ -525,6 +525,7 @@ }, "subtitles": { "backgroundLabel": "Krycie tła", + "backgroundBlurLabel": "Rozmycie tła", "colorLabel": "Kolor", "previewQuote": "Nie wolno mi się bać. Strach zabija myślenie.", "textSizeLabel": "Rozmiar czcionki", diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx index 5515946d..936e693d 100644 --- a/src/components/player/atoms/settings/CaptionSettingsView.tsx +++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx @@ -262,6 +262,18 @@ export function CaptionSettingsView({ id }: { id: string }) { value={styling.backgroundOpacity * 100} textTransformer={(s) => `${s}%`} /> + + updateStyling({ + backgroundBlur: Math.round(v / 4) * 4, + }) + } + value={styling.backgroundBlur} + textTransformer={(s) => `${s}px`} + /> `${s}%`} /> + + props.setStyling({ + ...props.styling, + backgroundBlur: Math.round(v / 4) * 4, + }) + } + value={props.styling.backgroundBlur} + textTransformer={(s) => `${s}px`} + /> { @@ -62,6 +68,8 @@ export const useSubtitleStore = create( set((s) => { if (newStyling.backgroundOpacity !== undefined) s.styling.backgroundOpacity = newStyling.backgroundOpacity; + if (newStyling.backgroundBlur !== undefined) + s.styling.backgroundBlur = newStyling.backgroundBlur; if (newStyling.color !== undefined) s.styling.color = newStyling.color.toLowerCase(); if (newStyling.size !== undefined)