import classNames from "classnames"; import { useState } from "react"; import { Helmet } from "react-helmet-async"; import { useTranslation } from "react-i18next"; 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 } 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); return (
{t("settings.subtitles.title")}
props.setStyling({ ...props.styling, backgroundOpacity: v / 100 }) } value={props.styling.backgroundOpacity * 100} textTransformer={(s) => `${s}%`} /> props.setStyling({ ...props.styling, backgroundBlur: v / 100 }) } value={props.styling.backgroundBlur * 100} textTransformer={(s) => `${s}%`} /> `${s}%`} onChange={(v) => props.setStyling({ ...props.styling, size: v / 100 }) } value={props.styling.size * 100} />
{t("settings.subtitles.colorLabel")}
{colors.map((v) => ( props.setStyling({ ...props.styling, color: v }) } color={v} active={props.styling.color === v} key={v} /> ))}
setFullscreenPreview((s) => !s)} /> setFullscreenPreview((s) => !s)} />
); }