From 01f46ce23c62111a7f3025eab9a1cdee58ea11bf Mon Sep 17 00:00:00 2001 From: mrjvs Date: Sun, 19 Mar 2023 19:58:30 +0100 Subject: [PATCH] fine-tune caption rendering --- src/setup/locales/en/translation.json | 2 +- src/state/settings/context.tsx | 20 +---------- src/state/settings/store.ts | 10 +++--- src/state/settings/types.ts | 2 -- src/video/components/Caption.tsx | 25 ------------- src/video/components/VideoPlayer.tsx | 4 +-- .../CaptionRendererAction.tsx} | 36 +++++++++++++++---- .../internal/VideoElementInternal.tsx | 6 +--- .../popouts/CaptionSettingsPopout.tsx | 23 +++--------- 9 files changed, 43 insertions(+), 85 deletions(-) delete mode 100644 src/video/components/Caption.tsx rename src/video/components/{CaptionRenderer.tsx => actions/CaptionRendererAction.tsx} (56%) diff --git a/src/setup/locales/en/translation.json b/src/setup/locales/en/translation.json index c7af52ec..d1408148 100644 --- a/src/setup/locales/en/translation.json +++ b/src/setup/locales/en/translation.json @@ -70,7 +70,7 @@ "seasons": "Seasons", "captions": "Captions", "captionPreferences": { - "title": "Caption Preferences", + "title": "Customize", "delay": "Delay", "fontSize": "Size", "opacity": "Opacity", diff --git a/src/state/settings/context.tsx b/src/state/settings/context.tsx index e7603a18..030833cc 100644 --- a/src/state/settings/context.tsx +++ b/src/state/settings/context.tsx @@ -8,8 +8,6 @@ interface MWSettingsDataSetters { setCaptionDelay(delay: number): void; setCaptionColor(color: string): void; setCaptionFontSize(size: number): void; - setCaptionFontFamily(fontFamily: string): void; - setCaptionTextShadow(textShadow: string): void; setCaptionBackgroundColor(backgroundColor: string): void; } type MWSettingsDataWrapper = MWSettingsData & MWSettingsDataSetters; @@ -50,23 +48,7 @@ export function SettingsProvider(props: { children: ReactNode }) { setCaptionFontSize(size) { setSettings((oldSettings) => { const style = oldSettings.captionSettings.style; - style.fontSize = enforceRange(10, size, 30); - const newSettings = oldSettings; - return newSettings; - }); - }, - setCaptionFontFamily(fontFamily) { - setSettings((oldSettings) => { - const captionStyle = oldSettings.captionSettings.style; - captionStyle.fontFamily = fontFamily; - const newSettings = oldSettings; - return newSettings; - }); - }, - setCaptionTextShadow(textShadow) { - setSettings((oldSettings) => { - const captionStyle = oldSettings.captionSettings.style; - captionStyle.textShadow = textShadow; + style.fontSize = enforceRange(10, size, 60); const newSettings = oldSettings; return newSettings; }); diff --git a/src/state/settings/store.ts b/src/state/settings/store.ts index 6eabb777..c854dc04 100644 --- a/src/state/settings/store.ts +++ b/src/state/settings/store.ts @@ -5,20 +5,18 @@ export const SettingsStore = createVersionedStore() .setKey("mw-settings") .addVersion({ version: 0, - create() { + create(): MWSettingsData { return { language: "en", captionSettings: { delay: 0, style: { color: "#ffffff", - fontSize: 20, - fontFamily: "inherit", - textShadow: "2px 2px 2px black", - backgroundColor: "#000000ff", + fontSize: 25, + backgroundColor: "#00000096", }, }, - } as MWSettingsData; + }; }, }) .build(); diff --git a/src/state/settings/types.ts b/src/state/settings/types.ts index 9107d955..b793308d 100644 --- a/src/state/settings/types.ts +++ b/src/state/settings/types.ts @@ -4,8 +4,6 @@ export interface CaptionStyleSettings { * Range is [10, 30] */ fontSize: number; - fontFamily: string; - textShadow: string; backgroundColor: string; } diff --git a/src/video/components/Caption.tsx b/src/video/components/Caption.tsx deleted file mode 100644 index 34cca5af..00000000 --- a/src/video/components/Caption.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { sanitize } from "@/backend/helpers/captions"; -import { useSettings } from "@/state/settings"; - -export function Caption({ text }: { text?: string }) { - const { captionSettings } = useSettings(); - return ( - - ); -} diff --git a/src/video/components/VideoPlayer.tsx b/src/video/components/VideoPlayer.tsx index ea36dd63..22d96502 100644 --- a/src/video/components/VideoPlayer.tsx +++ b/src/video/components/VideoPlayer.tsx @@ -28,7 +28,7 @@ import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderA import { ChromecastAction } from "@/video/components/actions/ChromecastAction"; import { CastingTextAction } from "@/video/components/actions/CastingTextAction"; import { PictureInPictureAction } from "@/video/components/actions/PictureInPictureAction"; -import { CaptionRenderer } from "./CaptionRenderer"; +import { CaptionRendererAction } from "./actions/CaptionRendererAction"; import { SettingsAction } from "./actions/SettingsAction"; import { DividerAction } from "./actions/DividerAction"; @@ -166,7 +166,7 @@ export function VideoPlayer(props: Props) { {show ? : null} - + {props.children} diff --git a/src/video/components/CaptionRenderer.tsx b/src/video/components/actions/CaptionRendererAction.tsx similarity index 56% rename from src/video/components/CaptionRenderer.tsx rename to src/video/components/actions/CaptionRendererAction.tsx index 25118d11..4fed3369 100644 --- a/src/video/components/CaptionRenderer.tsx +++ b/src/video/components/actions/CaptionRendererAction.tsx @@ -1,14 +1,36 @@ import { Transition } from "@/components/Transition"; import { useSettings } from "@/state/settings"; +import { sanitize } from "@/backend/helpers/captions"; import { parse, Cue } from "node-webvtt"; import { useRef } from "react"; import { useAsync } from "react-use"; -import { useVideoPlayerDescriptor } from "../state/hooks"; -import { useProgress } from "../state/logic/progress"; -import { useSource } from "../state/logic/source"; -import { Caption } from "./Caption"; +import { useVideoPlayerDescriptor } from "../../state/hooks"; +import { useProgress } from "../../state/logic/progress"; +import { useSource } from "../../state/logic/source"; -export function CaptionRenderer({ +function CaptionCue({ text }: { text?: string }) { + const { captionSettings } = useSettings(); + return ( + + ); +} + +export function CaptionRendererAction({ isControlsShown, }: { isControlsShown: boolean; @@ -44,7 +66,7 @@ export function CaptionRenderer({ return ( isVisible(start, end) && ( - + ) )} diff --git a/src/video/components/internal/VideoElementInternal.tsx b/src/video/components/internal/VideoElementInternal.tsx index 9cf3ec86..d87c27e9 100644 --- a/src/video/components/internal/VideoElementInternal.tsx +++ b/src/video/components/internal/VideoElementInternal.tsx @@ -44,11 +44,7 @@ function VideoElement(props: Props) { muted={mediaPlaying.volume === 0} playsInline className="h-full w-full" - > - {/* {source.source?.caption ? ( - - ) : null} */} - + /> ); } diff --git a/src/video/components/popouts/CaptionSettingsPopout.tsx b/src/video/components/popouts/CaptionSettingsPopout.tsx index 41af389b..f4694dda 100644 --- a/src/video/components/popouts/CaptionSettingsPopout.tsx +++ b/src/video/components/popouts/CaptionSettingsPopout.tsx @@ -14,12 +14,10 @@ export type SliderProps = { value: number; valueDisplay?: string; onChange: ChangeEventHandler; - stops?: number[]; }; export function Slider(props: SliderProps) { const ref = useRef(null); - const stops = props.stops ?? [Math.floor((props.max + props.min) / 2)]; useEffect(() => { const e = ref.current as HTMLInputElement; e.style.setProperty("--value", e.value); @@ -41,13 +39,7 @@ export function Slider(props: SliderProps) { max={props.max} min={props.min} step={props.step} - list="stops" /> - - {stops.map((s) => ( -
@@ -88,13 +80,12 @@ export function CaptionSettingsPopout(props: { valueDisplay={`${captionSettings.delay.toFixed(1)}s`} value={captionSettings.delay} onChange={(e) => setCaptionDelay(e.target.valueAsNumber)} - stops={[-5, 0, 5]} /> setCaptionFontSize(e.target.valueAsNumber)} /> @@ -131,20 +122,16 @@ export function CaptionSettingsPopout(props: {
{colors.map((color) => (
setCaptionColor(color)} > - setCaptionColor(e.target.value)} />