pstream is dead; long live pstream taciturnaxolotl.github.io/pstream-ng/
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request #993 from ssssobek/dev

Add blurred background option for subtitles

authored by

chaos and committed by
GitHub
3d333dcb 9409922e

+32
+1
src/assets/locales/en.json
··· 533 533 }, 534 534 "subtitles": { 535 535 "backgroundLabel": "Background opacity", 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
··· 525 525 }, 526 526 "subtitles": { 527 527 "backgroundLabel": "Krycie tła", 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
··· 263 263 textTransformer={(s) => `${s}%`} 264 264 /> 265 265 <CaptionSetting 266 + label={t("settings.subtitles.backgroundBlurLabel")} 267 + max={100} 268 + min={0} 269 + onChange={(v) => updateStyling({ backgroundBlur: v / 100 })} 270 + value={styling.backgroundBlur * 100} 271 + textTransformer={(s) => `${s}%`} 272 + /> 273 + <CaptionSetting 266 274 label={t("settings.subtitles.textSizeLabel")} 267 275 max={200} 268 276 min={1}
+4
src/components/player/base/SubtitleView.tsx
··· 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 + backdropFilter: 59 + styling.backgroundBlur !== 0 60 + ? `blur(${Math.floor(styling.backgroundBlur * 64)}px)` 61 + : "none", 58 62 }} 59 63 > 60 64 <span
+10
src/pages/parts/settings/CaptionsPart.tsx
··· 93 93 textTransformer={(s) => `${s}%`} 94 94 /> 95 95 <CaptionSetting 96 + label={t("settings.subtitles.backgroundBlurLabel")} 97 + max={100} 98 + min={0} 99 + onChange={(v) => 100 + props.setStyling({ ...props.styling, backgroundBlur: v / 100 }) 101 + } 102 + value={props.styling.backgroundBlur * 100} 103 + textTransformer={(s) => `${s}%`} 104 + /> 105 + <CaptionSetting 96 106 label={t("settings.subtitles.textSizeLabel")} 97 107 max={200} 98 108 min={1}
+8
src/stores/subtitles/index.ts
··· 17 17 * background opacity, ranges between 0 and 1 18 18 */ 19 19 backgroundOpacity: number; 20 + 21 + /** 22 + * background blur, ranges between 0 and 1 23 + */ 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 + 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 + if (newStyling.backgroundBlur !== undefined) 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)