transcript-viewer-demo

1"use client"
2 
3import { useEffect, useState } from "react"
4import { PauseIcon, PlayIcon } from "lucide-react"
5 
6import {
7  TranscriptViewerAudio,
8  TranscriptViewerContainer,
9  TranscriptViewerPlayPauseButton,
10  TranscriptViewerScrubBar,
11  TranscriptViewerWords,
12  type CharacterAlignmentResponseModel,
13} from "@/components/ui/transcript-viewer"
14 
15import { Skeleton } from "../ui/skeleton"
16 
17const TranscriptViewerDemo = () => {
18  const audioSrc = "/sounds/transcript-viewer/transcript-viewer-audio.mp3"
19  const [alignment, setAlignment] = useState<
20    CharacterAlignmentResponseModel | undefined
21  >(undefined)
22 
23  useEffect(() => {
24    fetch("/sounds/transcript-viewer/transcript-viewer-alignment.json")
25      .then((res) => res.json())
26      .then((data) => setAlignment(data))
27  }, [])
28 
29  return (
30    <div className="flex w-full flex-col gap-4">
31      <TranscriptViewerContainer
32        key={audioSrc}
33        className="bg-card w-full rounded-xl border p-4"
34        audioSrc={audioSrc}
35        audioType="audio/mpeg"
36        alignment={
37          alignment ?? {
38            characters: [],
39            characterStartTimesSeconds: [],
40            characterEndTimesSeconds: [],
41          }
42        }
43      >
44        <TranscriptViewerAudio className="sr-only" />
45        {alignment ? (
46          <>
47            <TranscriptViewerWords />
48            <div className="flex items-center gap-3">
49              <TranscriptViewerScrubBar />
50            </div>
51          </>
52        ) : (
53          <div className="flex w-full flex-col gap-3">
54            <Skeleton className="h-5 w-full" />
55            <Skeleton className="mb-4 h-5 w-1/2" />
56            <Skeleton className="h-2 w-full" />
57            <div className="-mt-1 flex items-center justify-between">
58              <Skeleton className="h-2 w-6" />
59              <Skeleton className="h-2 w-6" />
60            </div>
61          </div>
62        )}
63        <TranscriptViewerPlayPauseButton
64          className="w-full cursor-pointer"
65          size="default"
66          disabled={!alignment}
67        >
68          {({ isPlaying }) => (
69            <>
70              {isPlaying ? (
71                <>
72                  <PauseIcon className="size-4" /> Pause
73                </>
74              ) : (
75                <>
76                  <PlayIcon className="size-4" /> Play
77                </>
78              )}
79            </>
80          )}
81        </TranscriptViewerPlayPauseButton>
82      </TranscriptViewerContainer>
83    </div>
84  )
85}
86// … truncated