mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues Wiki Activity

Go back to using percentages instead of pixels

Browse source
This commit is contained in:
ssssobek 2024-03-10 23:10:25 +01:00
parent e09c04b57b
commit ca180ab9ea
4 changed files with 10 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/player/atoms/settings/CaptionSettingsView.tsx
View file

@ -264,15 +264,11 @@ export function CaptionSettingsView({ id }: { id: string }) {
/>
<CaptionSetting
label={t("settings.subtitles.backgroundBlurLabel")}
max={64}
max={100}
min={0}
onChange={(v) =>
updateStyling({
backgroundBlur: Math.round(v / 4) * 4,
})
}
value={styling.backgroundBlur}
textTransformer={(s) => `${s}px`}
onChange={(v) => updateStyling({ backgroundBlur: v / 100 })}
value={styling.backgroundBlur * 100}
textTransformer={(s) => `${s}%`}
/>
<CaptionSetting
label={t("settings.subtitles.textSizeLabel")}

2
src/components/player/base/SubtitleView.tsx
View file

@ -57,7 +57,7 @@ export function CaptionCue({
backgroundColor: `rgba(0,0,0,${styling.backgroundOpacity.toFixed(2)})`,
backdropFilter:
styling.backgroundBlur !== 0
? `blur(${styling.backgroundBlur}px)`
? `blur(${Math.floor(styling.backgroundBlur * 64)}px)`
: "none",
}}
>

11
src/pages/parts/settings/CaptionsPart.tsx
View file

@ -94,16 +94,13 @@ export function CaptionsPart(props: {
/>
<CaptionSetting
label={t("settings.subtitles.backgroundBlurLabel")}
max={64}
max={100}
min={0}
onChange={(v) =>
props.setStyling({
...props.styling,
backgroundBlur: Math.round(v / 4) * 4,
})
props.setStyling({ ...props.styling, backgroundBlur: v / 100 })
}
value={props.styling.backgroundBlur}
textTransformer={(s) => `${s}px`}
value={props.styling.backgroundBlur * 100}
textTransformer={(s) => `${s}%`}
/>
<CaptionSetting
label={t("settings.subtitles.textSizeLabel")}

2
src/stores/subtitles/index.ts
View file

@ -19,7 +19,7 @@ export interface SubtitleStyling {
backgroundOpacity: number;
/**
* background blur, ranges between 0 and 64
* background blur, ranges between 0 and 1
*/
backgroundBlur: number;
}