diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx index 936e693d..2e78ed7a 100644 --- a/src/components/player/atoms/settings/CaptionSettingsView.tsx +++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx @@ -264,15 +264,11 @@ export function CaptionSettingsView({ id }: { id: string }) { /> - 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}%`} /> diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx index 3a16dd25..a6f8ddb5 100644 --- a/src/pages/parts/settings/CaptionsPart.tsx +++ b/src/pages/parts/settings/CaptionsPart.tsx @@ -94,16 +94,13 @@ export function CaptionsPart(props: { /> - 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}%`} />