transcript-viewer

1"use client"
2 
3import {
4  createContext,
5  useContext,
6  useMemo,
7  type ComponentPropsWithoutRef,
8  type ComponentPropsWithRef,
9  type HTMLAttributes,
10  type ReactNode,
11} from "react"
12import type { CharacterAlignmentResponseModel } from "@elevenlabs/elevenlabs-js/api/types/CharacterAlignmentResponseModel"
13import { Pause, Play } from "lucide-react"
14 
15import { cn } from "@/lib/utils"
16import {
17  useTranscriptViewer,
18  type SegmentComposer,
19  type TranscriptSegment,
20  type TranscriptWord as TranscriptWordType,
21  type UseTranscriptViewerResult,
22} from "@/registry/elevenlabs-ui/hooks/use-transcript-viewer"
23import { Button } from "@/components/ui/button"
24import {
25  ScrubBarContainer,
26  ScrubBarProgress,
27  ScrubBarThumb,
28  ScrubBarTimeLabel,
29  ScrubBarTrack,
30} from "@/components/ui/scrub-bar"
31 
32type TranscriptGap = Extract<TranscriptSegment, { kind: "gap" }>
33 
34type TranscriptViewerContextValue = UseTranscriptViewerResult & {
35  audioProps: Omit<ComponentPropsWithRef<"audio">, "children" | "src">
36}
37 
38const TranscriptViewerContext =
39  createContext<TranscriptViewerContextValue | null>(null)
40 
41function useTranscriptViewerContext() {
42  const context = useContext(TranscriptViewerContext)
43  if (!context) {
44    throw new Error(
45      "useTranscriptViewerContext must be used within a TranscriptViewer"
46    )
47  }
48  return context
49}
50 
51type TranscriptViewerProviderProps = {
52  value: TranscriptViewerContextValue
53  children: ReactNode
54}
55 
56function TranscriptViewerProvider({
57  value,
58  children,
59}: TranscriptViewerProviderProps) {
60  return (
61    <TranscriptViewerContext.Provider value={value}>
62      {children}
63    </TranscriptViewerContext.Provider>
64  )
65}
66 
67type AudioType =
68  | "audio/mpeg"
69  | "audio/wav"
70  | "audio/ogg"
71  | "audio/mp3"
72  | "audio/m4a"
73  | "audio/aac"
74  | "audio/webm"
75 
76type TranscriptViewerContainerProps = {
77  audioSrc: string
78  audioType: AudioType
79  alignment: CharacterAlignmentResponseModel
80  segmentComposer?: SegmentComposer
81  hideAudioTags?: boolean
82  children?: ReactNode
83} & Omit<ComponentPropsWithoutRef<"div">, "children"> &
84  Pick<
85    Parameters<typeof useTranscriptViewer>[0],
86    "onPlay" | "onPause" | "onTimeUpdate" | "onEnded" | "onDurationChange"
87  >
88 
89function TranscriptViewerContainer({
90  audioSrc,
91  audioType = "audio/mpeg",
92  alignment,
93  segmentComposer,
94  hideAudioTags = true,
95  children,
96  className,
97  onPlay,
98  onPause,
99  onTimeUpdate,
100  onEnded,
101  onDurationChange,
102  ...props
103}: TranscriptViewerContainerProps) {
104// … truncated