import classNames from "classnames"; import { useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useTranslation } from "react-i18next"; import { Toggle } from "@/components/buttons/Toggle"; import { Icon, Icons } from "@/components/Icon"; import { CaptionSetting, ColorOption, colors, } from "@/components/player/atoms/settings/CaptionSettingsView"; import { Menu } from "@/components/player/internals/ContextMenu"; import { CaptionCue } from "@/components/player/Player"; import { Heading1 } from "@/components/utils/Text"; import { Transition } from "@/components/utils/Transition"; import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles"; export function CaptionPreview(props: { fullscreen?: boolean; show?: boolean; styling: SubtitleStyling; onToggle: () => void; }) { const { t } = useTranslation(); return (
{props.fullscreen && props.show ? ( ) : null}
); } export function CaptionsPart(props: { styling: SubtitleStyling; setStyling: (s: SubtitleStyling) => void; }) { const { t } = useTranslation(); const [fullscreenPreview, setFullscreenPreview] = useState(false); const subtitleStore = useSubtitleStore(); useEffect(() => { subtitleStore.updateStyling(props.styling); }, [props.styling, subtitleStore, subtitleStore.updateStyling]); const handleStylingChange = (newStyling: SubtitleStyling) => { props.setStyling(newStyling); subtitleStore.updateStyling(newStyling); }; return (
{t("settings.subtitles.title")}
handleStylingChange({ ...props.styling, backgroundOpacity: v / 100, }) } value={props.styling.backgroundOpacity * 100} textTransformer={(s) => `${s}%`} /> handleStylingChange({ ...props.styling, backgroundBlur: v / 100, }) } value={props.styling.backgroundBlur * 1} textTransformer={(s) => `${s}%`} /> `${s}%`} onChange={(v) => handleStylingChange({ ...props.styling, size: v / 100, }) } value={props.styling.size * 100} />
{t("settings.subtitles.textBoldLabel")}
handleStylingChange({ ...props.styling, bold: !props.styling.bold, }) } />
{t("settings.subtitles.colorLabel")}
{colors.map((v) => ( handleStylingChange({ ...props.styling, color: v, }) } color={v} active={props.styling.color === v} key={v} /> ))} {/* Add Color Picker */}
{ const color = e.target.value; handleStylingChange({ ...props.styling, color }); subtitleStore.updateStyling({ ...props.styling, color, }); }} className="absolute opacity-0 cursor-pointer w-8 h-8" />
setFullscreenPreview((s) => !s)} /> setFullscreenPreview((s) => !s)} />
); }