Fix subtitle styling settings and add reset button

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

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
 import { Icon, Icons } from "@/components/Icon";
 import { Menu } from "@/components/player/internals/ContextMenu";
@@ -241,6 +242,16 @@ export function CaptionSettingsView({
     updateStyling(newStyling);
   };
 
+  const resetSubStyling = () => {
+    subtitleStore.updateStyling({
+      color: "#ffffff",
+      backgroundOpacity: 0.5,
+      size: 1,
+      backgroundBlur: 0.5,
+      bold: false,
+    });
+  };
+
   return (
     <>
       <Menu.BackLink
@@ -344,6 +355,13 @@ export function CaptionSettingsView({
             </div>
           </div>
         </div>
+        <Button
+          className="w-full md:w-auto"
+          theme="secondary"
+          onClick={resetSubStyling}
+        >
+          {t("settings.reset")}
+        </Button>
       </Menu.Section>
     </>
   );

src/pages/parts/settings/CaptionsPart.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 
+import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
 import { Icon, Icons } from "@/components/Icon";
 import {
@@ -89,6 +90,17 @@ export function CaptionsPart(props: {
     subtitleStore.updateStyling(newStyling);
   };
 
+  const resetSubStyling = () => {
+    subtitleStore.resetStyling();
+    props.setStyling({
+      color: "#ffffff",
+      backgroundOpacity: 0.5,
+      size: 1,
+      backgroundBlur: 0.5,
+      bold: false,
+    });
+  };
+
   return (
     <div>
       <Heading1 border>{t("settings.subtitles.title")}</Heading1>
@@ -117,7 +129,7 @@ export function CaptionsPart(props: {
                 backgroundBlur: v / 100,
               })
             }
-            value={props.styling.backgroundBlur * 1}
+            value={props.styling.backgroundBlur * 100}
             textTransformer={(s) => `${s}%`}
           />
           <CaptionSetting
@@ -200,6 +212,13 @@ export function CaptionsPart(props: {
           styling={props.styling}
           onToggle={() => setFullscreenPreview((s) => !s)}
         />
+        <Button
+          className="w-full md:w-auto"
+          theme="secondary"
+          onClick={resetSubStyling}
+        >
+          {t("settings.reset")}
+        </Button>
       </div>
     </div>
   );

src/stores/subtitles/index.ts

@@ -41,6 +41,7 @@ export interface SubtitleStore {
   overrideCasing: boolean;
   delay: number;
   updateStyling(newStyling: Partial<SubtitleStyling>): void;
+  resetStyling(): void;
   setLanguage(language: string | null): void;
   setIsOpenSubtitles(isOpenSubtitles: boolean): void;
   setCustomSubs(): void;
@@ -93,6 +94,17 @@ export const useSubtitleStore = create(
           if (newStyling.bold !== undefined) s.styling.bold = newStyling.bold;
         });
       },
+      resetStyling() {
+        set((s) => {
+          s.styling = {
+            color: "#ffffff",
+            backgroundOpacity: 0.5,
+            size: 1,
+            backgroundBlur: 0.5,
+            bold: false,
+          };
+        });
+      },
       setLanguage(lang) {
         set((s) => {
           s.enabled = !!lang;