Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 20:51:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #993 from ssssobek/dev

Browse Source 
Add blurred background option for subtitles
This commit is contained in:
chaos 2024-03-11 01:05:50 +02:00 committed by GitHub
commit 3d333dcb03
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/locales/en.json
View File

@ -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",

1
src/assets/locales/pl.json
View File

@ -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",

8
src/components/player/atoms/settings/CaptionSettingsView.tsx
View File

@ -262,6 +262,14 @@ export function CaptionSettingsView({ id }: { id: string }) {
value={styling.backgroundOpacity * 100}
textTransformer={(s) => `${s}%`}
/>
<CaptionSetting
label={t("settings.subtitles.backgroundBlurLabel")}
max={100}
min={0}
onChange={(v) => updateStyling({ backgroundBlur: v / 100 })}
value={styling.backgroundBlur * 100}
textTransformer={(s) => `${s}%`}
/>
<CaptionSetting
label={t("settings.subtitles.textSizeLabel")}
max={200}

4
src/components/player/base/SubtitleView.tsx
View File

@ -55,6 +55,10 @@ export function CaptionCue({
color: styling.color,
fontSize: `${(1.5 * styling.size).toFixed(2)}em`,
backgroundColor: `rgba(0,0,0,${styling.backgroundOpacity.toFixed(2)})`,
backdropFilter:
styling.backgroundBlur !== 0
? `blur(${Math.floor(styling.backgroundBlur * 64)}px)`
: "none",
}}
>
<span

10
src/pages/parts/settings/CaptionsPart.tsx
View File

@ -92,6 +92,16 @@ export function CaptionsPart(props: {
value={props.styling.backgroundOpacity * 100}
textTransformer={(s) => `${s}%`}
/>
<CaptionSetting
label={t("settings.subtitles.backgroundBlurLabel")}
max={100}
min={0}
onChange={(v) =>
props.setStyling({ ...props.styling, backgroundBlur: v / 100 })
}
value={props.styling.backgroundBlur * 100}
textTransformer={(s) => `${s}%`}
/>
<CaptionSetting
label={t("settings.subtitles.textSizeLabel")}
max={200}

8
src/stores/subtitles/index.ts
View File

@ -17,6 +17,11 @@ export interface SubtitleStyling {
* background opacity, ranges between 0 and 1
*/
backgroundOpacity: number;
/**
* background blur, ranges between 0 and 1
*/
backgroundBlur: number;
}
export interface SubtitleStore {
@ -51,6 +56,7 @@ export const useSubtitleStore = create(
color: "#ffffff",
backgroundOpacity: 0.5,
size: 1,
backgroundBlur: 0.5,
},
resetSubtitleSpecificSettings() {
set((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)