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..2e78ed7a 100644 --- a/src/components/player/atoms/settings/CaptionSettingsView.tsx +++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx @@ -262,6 +262,14 @@ export function CaptionSettingsView({ id }: { id: string }) { value={styling.backgroundOpacity * 100} textTransformer={(s) => `${s}%`} /> + updateStyling({ backgroundBlur: v / 100 })} + value={styling.backgroundBlur * 100} + textTransformer={(s) => `${s}%`} + /> `${s}%`} /> + + props.setStyling({ ...props.styling, backgroundBlur: v / 100 }) + } + value={props.styling.backgroundBlur * 100} + textTransformer={(s) => `${s}%`} + /> { @@ -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)