useSpeechSynthesis

"use client";

import { useState } from "react";
import { useSpeechSynthesis } from "@repo/hooks/speech/use-speech-synthesis";
import { Volume2, VolumeX, Square } from "lucide-react";

/* BASIC USAGE - Text to Speech */
export const Example1 = () => {
    const [text, setText] = useState(
        "Hello! I am a text-to-speech demo. You can type anything here and I will read it aloud for you.",
    );

    const { speak, cancel, isSpeaking, isSupported, errorMessage } =
        useSpeechSynthesis();

    if (!isSupported) {
        return (
            <div className="bg-destructive/10 text-destructive rounded-lg p-4 text-center">
                <p className="font-medium">
                    Speech Synthesis is not supported in your browser.
                </p>
            </div>
        );
    }

    return (
        <div className="flex w-full max-w-md flex-col gap-4">
            {/* Text Input */}
            <textarea
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Enter text to speak..."
                className="border-input bg-background min-h-32 w-full rounded-lg border p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />

            {/* Controls */}
            <div className="flex items-center gap-3">
                <button
                    onClick={() => (isSpeaking ? cancel() : speak(text))}
                    disabled={!text.trim()}
                    className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 font-medium transition-colors ${
                        isSpeaking
                            ? "bg-red-500 text-white hover:bg-red-600"
                            : "bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                    }`}
                >
                    {isSpeaking ? (
                        <>
                            <Square className="h-4 w-4" />
                            Stop
                        </>
                    ) : (
                        <>
                            <Volume2 className="h-4 w-4" />
                            Speak
                        </>
                    )}
                </button>
            </div>

            {/* Status */}
            <div className="flex items-center justify-center gap-2">
                {isSpeaking ? (
                    <>
                        <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
                        <span className="text-muted-foreground text-sm">
                            Speaking...
                        </span>
                    </>
                ) : (
                    <>
                        <VolumeX className="text-muted-foreground h-4 w-4" />
                        <span className="text-muted-foreground text-sm">
                            Ready
                        </span>
                    </>
                )}
            </div>

            {/* Error Display */}
            {errorMessage && (
                <div className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm">
                    {errorMessage}
                </div>
            )}
        </div>
    );
};

"use client";

import { useState } from "react";
import { useSpeechSynthesis } from "@repo/hooks/speech/use-speech-synthesis";
import { Volume2, Pause, Play, Square, User } from "lucide-react";

/* VOICE AND RATE CONTROLS */
export const Example2 = () => {
    const [text, setText] = useState(
        "Welcome to the voice customization demo! Adjust the voice, speed, and pitch to find your preferred settings.",
    );
    const [selectedVoiceIndex, setSelectedVoiceIndex] = useState(0);
    const [rate, setRate] = useState(1);
    const [pitch, setPitch] = useState(1);

    // Get voices first without passing voice option
    const { voices, isSupported, isSpeaking, isPaused, cancel, pause, resume } =
        useSpeechSynthesis({
            rate,
            pitch,
        });

    console.log("voices", { voices });

    // Get selected voice safely
    const selectedVoice = voices[selectedVoiceIndex] || null;

    // Create a new speech synthesis instance with the selected voice
    const speakWithVoice = (textToSpeak: string) => {
        if (!isSupported || !textToSpeak.trim()) return;

        // Cancel any ongoing speech
        window.speechSynthesis.cancel();

        const utterance = new SpeechSynthesisUtterance(textToSpeak);
        if (selectedVoice) utterance.voice = selectedVoice;
        utterance.rate = rate;
        utterance.pitch = pitch;

        window.speechSynthesis.speak(utterance);
    };

    if (!isSupported) {
        return (
            <div className="bg-destructive/10 text-destructive rounded-lg p-4 text-center">
                Speech Synthesis is not supported in your browser.
            </div>
        );
    }

    return (
        <div className="flex w-full max-w-md flex-col gap-4">
            {/* Text Input */}
            <textarea
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Enter text to speak..."
                className="border-input bg-background min-h-24 w-full rounded-lg border p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />

            {/* Voice Selector */}
            <div className="flex items-center gap-2">
                <User className="text-muted-foreground h-4 w-4" />
                <select
                    value={selectedVoiceIndex}
                    onChange={(e) =>
                        setSelectedVoiceIndex(Number(e.target.value))
                    }
                    className="border-input bg-background flex-1 rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    {voices.map((voice, index) => (
                        <option key={`${voice.name}-${index}`} value={index}>
                            {voice.name} ({voice.lang})
                        </option>
                    ))}
                </select>
            </div>

            {/* Rate Slider */}
            <div className="space-y-1">
                <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">Speed</span>
                    <span className="font-mono">{rate.toFixed(1)}x</span>
                </div>
                <input
                    type="range"
                    min="0.5"
                    max="2"
                    step="0.1"
                    value={rate}
                    onChange={(e) => setRate(Number(e.target.value))}
                    className="w-full accent-blue-500"
                />
            </div>

            {/* Pitch Slider */}
            <div className="space-y-1">
                <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">Pitch</span>
                    <span className="font-mono">{pitch.toFixed(1)}</span>
                </div>
                <input
                    type="range"
                    min="0.5"
                    max="2"
                    step="0.1"
                    value={pitch}
                    onChange={(e) => setPitch(Number(e.target.value))}
                    className="w-full accent-blue-500"
                />
            </div>

            {/* Controls */}
            <div className="flex items-center gap-2">
                <button
                    onClick={() => speakWithVoice(text)}
                    disabled={!text.trim() || isSpeaking}
                    className="bg-primary text-primary-foreground hover:bg-primary/90 flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium disabled:opacity-50"
                >
                    <Volume2 className="h-4 w-4" />
                    Speak
                </button>

                <button
                    onClick={() => (isPaused ? resume() : pause())}
                    disabled={!isSpeaking}
                    className="bg-muted hover:bg-muted/80 flex h-10 w-10 items-center justify-center rounded-lg disabled:opacity-50"
                >
                    {isPaused ? (
                        <Play className="h-4 w-4" />
                    ) : (
                        <Pause className="h-4 w-4" />
                    )}
                </button>

                <button
                    onClick={cancel}
                    disabled={!isSpeaking}
                    className="bg-muted hover:bg-muted/80 flex h-10 w-10 items-center justify-center rounded-lg disabled:opacity-50"
                >
                    <Square className="h-4 w-4" />
                </button>
            </div>

            {/* Status */}
            <p className="text-muted-foreground text-center text-xs">
                {isSpeaking
                    ? isPaused
                        ? "Paused"
                        : "Speaking..."
                    : `${voices.length} voices available`}
            </p>
        </div>
    );
};

"use client";

import { useState, useMemo } from "react";
import { useSpeechSynthesis } from "@repo/hooks/speech/use-speech-synthesis";
import { Volume2, Square } from "lucide-react";

const SAMPLE_TEXT = `The quick brown fox jumps over the lazy dog. This pangram contains every letter of the alphabet at least once. Speech synthesis technology has advanced significantly over the years, making it possible to create natural-sounding voices that can read any text aloud.`;

/* TEXT HIGHLIGHTING - Word boundary tracking */
export const Example3 = () => {
    const [currentCharIndex, setCurrentCharIndex] = useState(0);

    const { speak, cancel, isSpeaking, isSupported } = useSpeechSynthesis({
        rate: 0.9,
        onBoundary: (event) => {
            setCurrentCharIndex(event.charIndex);
        },
        onEnd: () => {
            setCurrentCharIndex(0);
        },
    });

    // Split text into before, current word, and after
    const highlightedText = useMemo(() => {
        if (!isSpeaking || currentCharIndex === 0) {
            return { before: "", current: "", after: SAMPLE_TEXT };
        }

        // Find word boundaries
        let wordStart = currentCharIndex;
        let wordEnd = currentCharIndex;

        // Find start of current word
        while (wordStart > 0 && SAMPLE_TEXT[wordStart - 1] !== " ") {
            wordStart--;
        }

        // Find end of current word
        while (wordEnd < SAMPLE_TEXT.length && SAMPLE_TEXT[wordEnd] !== " ") {
            wordEnd++;
        }

        return {
            before: SAMPLE_TEXT.slice(0, wordStart),
            current: SAMPLE_TEXT.slice(wordStart, wordEnd),
            after: SAMPLE_TEXT.slice(wordEnd),
        };
    }, [currentCharIndex, isSpeaking]);

    if (!isSupported) {
        return (
            <div className="bg-destructive/10 text-destructive rounded-lg p-4 text-center">
                Speech Synthesis is not supported in your browser.
            </div>
        );
    }

    return (
        <div className="flex w-full max-w-md flex-col gap-4">
            {/* Text Display with Highlighting */}
            <div className="bg-muted/50 rounded-lg p-4">
                <p className="text-muted-foreground mb-2 text-xs font-medium uppercase tracking-wide">
                    Text with Word Highlighting
                </p>
                <p className="text-sm leading-relaxed">
                    <span>{highlightedText.before}</span>
                    <span className="rounded bg-yellow-300 px-0.5 font-medium text-yellow-900 dark:bg-yellow-500/30 dark:text-yellow-200">
                        {highlightedText.current}
                    </span>
                    <span className="text-muted-foreground">
                        {highlightedText.after}
                    </span>
                </p>
            </div>

            {/* Controls */}
            <button
                onClick={() => {
                    if (isSpeaking) {
                        cancel();
                        setCurrentCharIndex(0);
                    } else {
                        speak(SAMPLE_TEXT);
                    }
                }}
                className={`flex items-center justify-center gap-2 rounded-lg px-4 py-3 font-medium transition-colors ${
                    isSpeaking
                        ? "bg-red-500 text-white hover:bg-red-600"
                        : "bg-primary text-primary-foreground hover:bg-primary/90"
                }`}
            >
                {isSpeaking ? (
                    <>
                        <Square className="h-4 w-4" />
                        Stop
                    </>
                ) : (
                    <>
                        <Volume2 className="h-4 w-4" />
                        Read Aloud
                    </>
                )}
            </button>

            {/* Info */}
            <p className="text-muted-foreground text-center text-xs">
                {isSpeaking
                    ? "Watch the highlighted word as it speaks"
                    : "Click to see word-by-word highlighting"}
            </p>
        </div>
    );
};