Tom Boullay
34 lines
818 B
TypeScript
34 lines
818 B
TypeScript
import { useSettingsStore } from "@/managers/stores/useSettingsStore";
|
|
|
|
export type SubtitleSpeaker = "Narrateur" | "Fermier" | "Leonie";
|
|
|
|
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 content = text?.trim();
|
|
|
|
if (!subtitlesEnabled || !content) return null;
|
|
|
|
return (
|
|
<div className="subtitles" aria-live="polite">
|
|
<p>
|
|
{speaker ? (
|
|
<span
|
|
className={`subtitles__speaker subtitles__speaker--${speaker.toLowerCase()}`}
|
|
>
|
|
{speaker}:
|
|
</span>
|
|
) : null}
|
|
{content}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|