+1

src/assets/locales/en.json

reviewed

··· 533 533 }, 534 534 "subtitles": { 535 535 "backgroundLabel": "Background opacity", 536 536 + "backgroundBlurLabel": "Background blur", 536 537 "colorLabel": "Color", 537 538 "previewQuote": "I must not fear. Fear is the mind-killer.", 538 539 "textSizeLabel": "Text size",

+1

src/assets/locales/pl.json

reviewed

··· 525 525 }, 526 526 "subtitles": { 527 527 "backgroundLabel": "Krycie tła", 528 528 + "backgroundBlurLabel": "Rozmycie tła", 528 529 "colorLabel": "Kolor", 529 530 "previewQuote": "Nie wolno mi się bać. Strach zabija myślenie.", 530 531 "textSizeLabel": "Rozmiar czcionki",

+8

src/components/player/atoms/settings/CaptionSettingsView.tsx

reviewed

··· 263 263 textTransformer={(s) => `${s}%`} 264 264 /> 265 265 <CaptionSetting 266 266 + label={t("settings.subtitles.backgroundBlurLabel")} 267 267 + max={100} 268 268 + min={0} 269 269 + onChange={(v) => updateStyling({ backgroundBlur: v / 100 })} 270 270 + value={styling.backgroundBlur * 100} 271 271 + textTransformer={(s) => `${s}%`} 272 272 + /> 273 273 + <CaptionSetting 266 274 label={t("settings.subtitles.textSizeLabel")} 267 275 max={200} 268 276 min={1}

+4

src/components/player/base/SubtitleView.tsx

reviewed

··· 55 55 color: styling.color, 56 56 fontSize: `${(1.5 * styling.size).toFixed(2)}em`, 57 57 backgroundColor: `rgba(0,0,0,${styling.backgroundOpacity.toFixed(2)})`, 58 58 + backdropFilter: 59 59 + styling.backgroundBlur !== 0 60 60 + ? `blur(${Math.floor(styling.backgroundBlur * 64)}px)` 61 61 + : "none", 58 62 }} 59 63 > 60 64 <span

+10

src/pages/parts/settings/CaptionsPart.tsx

reviewed

··· 93 93 textTransformer={(s) => `${s}%`} 94 94 /> 95 95 <CaptionSetting 96 96 + label={t("settings.subtitles.backgroundBlurLabel")} 97 97 + max={100} 98 98 + min={0} 99 99 + onChange={(v) => 100 100 + props.setStyling({ ...props.styling, backgroundBlur: v / 100 }) 101 101 + } 102 102 + value={props.styling.backgroundBlur * 100} 103 103 + textTransformer={(s) => `${s}%`} 104 104 + /> 105 105 + <CaptionSetting 96 106 label={t("settings.subtitles.textSizeLabel")} 97 107 max={200} 98 108 min={1}

+8

src/stores/subtitles/index.ts

reviewed

··· 17 17 * background opacity, ranges between 0 and 1 18 18 */ 19 19 backgroundOpacity: number; 20 20 + 21 21 + /** 22 22 + * background blur, ranges between 0 and 1 23 23 + */ 24 24 + backgroundBlur: number; 20 25 } 21 26 22 27 export interface SubtitleStore { ··· 51 56 color: "#ffffff", 52 57 backgroundOpacity: 0.5, 53 58 size: 1, 59 59 + backgroundBlur: 0.5, 54 60 }, 55 61 resetSubtitleSpecificSettings() { 56 62 set((s) => { ··· 62 68 set((s) => { 63 69 if (newStyling.backgroundOpacity !== undefined) 64 70 s.styling.backgroundOpacity = newStyling.backgroundOpacity; 71 71 + if (newStyling.backgroundBlur !== undefined) 72 72 + s.styling.backgroundBlur = newStyling.backgroundBlur; 65 73 if (newStyling.color !== undefined) 66 74 s.styling.color = newStyling.color.toLowerCase(); 67 75 if (newStyling.size !== undefined)