YouTube Transcript API for React

import { useState } from "react";

interface Segment {
  text: string;
  start: number;
  duration: number;
}

interface TranscriptData {
  title: string;
  channel: string;
  transcript: Segment[];
}

export function TranscriptViewer() {
  const [url, setUrl] = useState("");
  const [data, setData] = useState<TranscriptData | null>(null);
  const [loading, setLoading] = useState(false);

  async function fetchTranscript() {
    setLoading(true);
    try {
      // Call your backend proxy to keep API key secret
      const res = await fetch(
        `/api/transcript?url=${encodeURIComponent(url)}`
      );
      const json = await res.json();
      setData(json);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <input
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        placeholder="Paste YouTube URL..."
      />
      <button onClick={fetchTranscript} disabled={loading}>
        {loading ? "Loading..." : "Get Transcript"}
      </button>

      {data && (
        <div>
          <h2>{data.title}</h2>
          <p>{data.channel}</p>
          {data.transcript.map((seg, i) => (
            <p key={i}>
              <strong>{seg.start.toFixed(1)}s</strong> {seg.text}
            </p>
          ))}
        </div>
      )}
    </div>
  );
}