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;