From e09c04b57bfedf8b1fd99034e2c60aeba592c65a Mon Sep 17 00:00:00 2001
From: ssssobek <ssssobek@gmail.com>
Date: Sun, 10 Mar 2024 20:14:48 +0100
Subject: [PATCH 1/3] Add blurred backgroud for subtitles

---
 src/assets/locales/en.json                          |  1 +
 src/assets/locales/pl.json                          |  1 +
 .../player/atoms/settings/CaptionSettingsView.tsx   | 12 ++++++++++++
 src/components/player/base/SubtitleView.tsx         |  4 ++++
 src/pages/parts/settings/CaptionsPart.tsx           | 13 +++++++++++++
 src/stores/subtitles/index.ts                       |  8 ++++++++
 6 files changed, 39 insertions(+)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 55922380..dc4d6ed1 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -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",
diff --git a/src/assets/locales/pl.json b/src/assets/locales/pl.json
index a653e4f9..843e2201 100644
--- a/src/assets/locales/pl.json
+++ b/src/assets/locales/pl.json
@@ -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",
diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 5515946d..936e693d 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -262,6 +262,18 @@ export function CaptionSettingsView({ id }: { id: string }) {
           value={styling.backgroundOpacity * 100}
           textTransformer={(s) => `${s}%`}
         />
+        <CaptionSetting
+          label={t("settings.subtitles.backgroundBlurLabel")}
+          max={64}
+          min={0}
+          onChange={(v) =>
+            updateStyling({
+              backgroundBlur: Math.round(v / 4) * 4,
+            })
+          }
+          value={styling.backgroundBlur}
+          textTransformer={(s) => `${s}px`}
+        />
         <CaptionSetting
           label={t("settings.subtitles.textSizeLabel")}
           max={200}
diff --git a/src/components/player/base/SubtitleView.tsx b/src/components/player/base/SubtitleView.tsx
index 7dbbf4e1..ebcc7c7c 100644
--- a/src/components/player/base/SubtitleView.tsx
+++ b/src/components/player/base/SubtitleView.tsx
@@ -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(${styling.backgroundBlur}px)`
+            : "none",
       }}
     >
       <span
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx
index f40e1d93..3a16dd25 100644
--- a/src/pages/parts/settings/CaptionsPart.tsx
+++ b/src/pages/parts/settings/CaptionsPart.tsx
@@ -92,6 +92,19 @@ export function CaptionsPart(props: {
             value={props.styling.backgroundOpacity * 100}
             textTransformer={(s) => `${s}%`}
           />
+          <CaptionSetting
+            label={t("settings.subtitles.backgroundBlurLabel")}
+            max={64}
+            min={0}
+            onChange={(v) =>
+              props.setStyling({
+                ...props.styling,
+                backgroundBlur: Math.round(v / 4) * 4,
+              })
+            }
+            value={props.styling.backgroundBlur}
+            textTransformer={(s) => `${s}px`}
+          />
           <CaptionSetting
             label={t("settings.subtitles.textSizeLabel")}
             max={200}
diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts
index a839d0e5..c9ffbca2 100644
--- a/src/stores/subtitles/index.ts
+++ b/src/stores/subtitles/index.ts
@@ -17,6 +17,11 @@ export interface SubtitleStyling {
    * background opacity, ranges between 0 and 1
    */
   backgroundOpacity: number;
+
+  /**
+   * background blur, ranges between 0 and 64
+   */
+  backgroundBlur: number;
 }
 
 export interface SubtitleStore {
@@ -51,6 +56,7 @@ export const useSubtitleStore = create(
         color: "#ffffff",
         backgroundOpacity: 0.5,
         size: 1,
+        backgroundBlur: 0,
       },
       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)

From ca180ab9ea171e49e903d9e97f72f52451a245cf Mon Sep 17 00:00:00 2001
From: ssssobek <ssssobek@gmail.com>
Date: Sun, 10 Mar 2024 23:10:25 +0100
Subject: [PATCH 2/3] Go back to using percentages instead of pixels

---
 .../player/atoms/settings/CaptionSettingsView.tsx    | 12 ++++--------
 src/components/player/base/SubtitleView.tsx          |  2 +-
 src/pages/parts/settings/CaptionsPart.tsx            | 11 ++++-------
 src/stores/subtitles/index.ts                        |  2 +-
 4 files changed, 10 insertions(+), 17 deletions(-)

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 }) {
         />
         <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")}
diff --git a/src/components/player/base/SubtitleView.tsx b/src/components/player/base/SubtitleView.tsx
index ebcc7c7c..4f4c6f06 100644
--- a/src/components/player/base/SubtitleView.tsx
+++ b/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",
       }}
     >
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: {
           />
           <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")}
diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts
index c9ffbca2..b1b535d1 100644
--- a/src/stores/subtitles/index.ts
+++ b/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;
 }

From 67af11fd85f872ab2589a1a9e352093026cc4e67 Mon Sep 17 00:00:00 2001
From: ssssobek <ssssobek@gmail.com>
Date: Sun, 10 Mar 2024 23:56:06 +0100
Subject: [PATCH 3/3] Set the default background blur to 50%

---
 src/stores/subtitles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts
index b1b535d1..31e59836 100644
--- a/src/stores/subtitles/index.ts
+++ b/src/stores/subtitles/index.ts
@@ -56,7 +56,7 @@ export const useSubtitleStore = create(
         color: "#ffffff",
         backgroundOpacity: 0.5,
         size: 1,
-        backgroundBlur: 0,
+        backgroundBlur: 0.5,
       },
       resetSubtitleSpecificSettings() {
         set((s) => {