Go back to using percentages instead of pixels

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

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

src/components/player/base/SubtitleView.tsx

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

src/pages/parts/settings/CaptionsPart.tsx

@@ -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.setStyling({ ...props.styling, backgroundBlur: v / 100 })
-                ...props.styling,
-                backgroundBlur: Math.round(v / 4) * 4,
-              })
             }
-            value={props.styling.backgroundBlur}
+            value={props.styling.backgroundBlur * 100}
-            textTransformer={(s) => `${s}px`}
+            textTransformer={(s) => `${s}%`}
           />
           <CaptionSetting
             label={t("settings.subtitles.textSizeLabel")}

src/stores/subtitles/index.ts

@@ -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;
 }