Tom Boullay
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { useSettingsStore } from "@/managers/stores/useSettingsStore";
|
|
import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
|
|
import type { DialogueSpeaker } from "@/types/dialogues/dialogues";
|
|
|
|
export type SubtitleSpeaker = DialogueSpeaker;
|
|
|
|
interface SubtitlesProps {
|
|
speaker?: SubtitleSpeaker | null;
|
|
text?: string | null;
|
|
}
|
|
|
|
export function Subtitles({
|
|
speaker = null,
|
|
text = null,
|
|
}: SubtitlesProps): React.JSX.Element | null {
|
|
const subtitlesEnabled = useSettingsStore((state) => state.subtitlesEnabled);
|
|
const activeSubtitle = useSubtitleStore((state) => state.activeSubtitle);
|
|
const subtitleSpeaker = speaker ?? activeSubtitle?.speaker ?? null;
|
|
const content = (text ?? activeSubtitle?.text)?.trim();
|
|
|
|
if (!subtitlesEnabled || !content) return null;
|
|
|
|
return (
|
|
<div className="subtitles" aria-live="polite">
|
|
<p>
|
|
{subtitleSpeaker ? (
|
|
<span
|
|
className={`subtitles__speaker subtitles__speaker--${subtitleSpeaker.toLowerCase()}`}
|
|
>
|
|
{subtitleSpeaker}:
|
|
</span>
|
|
) : null}
|
|
{content}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|