diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 1de6cc8c..eeaa0d48 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/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 (
<>
+
>
);
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx
index 45b3ec8e..02f35255 100644
--- a/src/pages/parts/settings/CaptionsPart.tsx
+++ b/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 (
{t("settings.subtitles.title")}
@@ -117,7 +129,7 @@ export function CaptionsPart(props: {
backgroundBlur: v / 100,
})
}
- value={props.styling.backgroundBlur * 1}
+ value={props.styling.backgroundBlur * 100}
textTransformer={(s) => `${s}%`}
/>
setFullscreenPreview((s) => !s)}
/>
+
);
diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts
index fab66644..3829edbf 100644
--- a/src/stores/subtitles/index.ts
+++ b/src/stores/subtitles/index.ts
@@ -41,6 +41,7 @@ export interface SubtitleStore {
overrideCasing: boolean;
delay: number;
updateStyling(newStyling: Partial): 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;