51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2769,"use client" import { createContext, useContext, useMemo, type ComponentPropsWithoutRef, type ComponentPropsWithRef, type HTMLAttributes, type ReactNode, } from "react" import type { CharacterAlignmentResponseModel } from "@elevenlabs/elevenlabs-js/api/types/CharacterAlignmentResponseModel" import { Pause, Play } from "lucide-react" import { cn } from "@/lib/utils" import { useTranscriptViewer, type SegmentComposer, type TranscriptSegment, type TranscriptWord as TranscriptWordType, type UseTranscriptViewerResult, } from "@/registry/elevenlabs-ui/hooks/use-transcript-viewer" import { Button } from "@/components/ui/button" import { ScrubBarContainer, ScrubBarProgress, ScrubBarThumb, ScrubBarTimeLabel, ScrubBarTrack, } from "@/components/ui/scrub-bar" type TranscriptGap = Extract type TranscriptViewerContextValue = UseTranscriptViewerResult & { audioProps: Omit, "children" | "src"> } const TranscriptViewerContext = createContext(null) function useTranscriptViewerContext() { const context = useContext(TranscriptViewerContext) if (!context) { throw new Error( "useTranscriptViewerContext must be used within a TranscriptViewer" ) } return context } type TranscriptViewerProviderProps = { value: TranscriptViewerContextValue children: ReactNode } function TranscriptViewerProvider({ value, children, }: TranscriptViewerProviderProps) { return ( {children} ) } type AudioType = | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/mp3" | "audio/m4a" | "audio/aac" | "audio/webm" type TranscriptViewerContainerProps = { audioSrc: string audioType: AudioType alignment: CharacterAlignmentResponseModel segmentComposer?: SegmentComposer hideAudioTags?: boolean children?: ReactNode } & Omit, "children"> & Pick< Parameters[0], "onPlay" | "onPause" | "onTimeUpdate" | "onEnded" | "onDurationChange" > function TranscriptViewerContainer({ audioSrc, audioType = "audio/mpeg", alignment, segmentComposer, hideAudioTags = true, children, className, onPlay, onPause, onTimeUpdate, onEnded, onDurationChange, ...props }: TranscriptViewerContainerProps) { const viewerState = useTranscriptViewer({ alignment, hideAudioTags, segmentComposer, onPlay, onPause, onTimeUpdate, onEnded, onDurationChange, }) const { audioRef } = viewerState const audioProps = useMemo( () => ({ ref: audioRef, controls: false, preload: "metadata" as const, src: audioSrc, children: , }), [audioRef, audioSrc] ) const contextValue = useMemo( () => ({ ...viewerState, audioProps, }), [viewerState, audioProps] ) return (

{children}

) } type TranscriptViewerWordStatus = "spoken" | "unspoken" | "current" interface TranscriptViewerWordProps extends Omit, "children"> { word: TranscriptWordType status: TranscriptViewerWordStatus children?: ReactNode } function TranscriptViewerWord({ word, status, className, children, ...props }: TranscriptViewerWordProps) { return ( {children ?? word.text} ) } interface TranscriptViewerWordsProps extends HTMLAttributes { renderWord?: (props: { word: TranscriptWordType status: TranscriptViewerWordStatus }) => ReactNode renderGap?: (props: { segment: TranscriptGap status: TranscriptViewerWordStatus }) => ReactNode wordClassNames?: string gapClassNames?: string } function TranscriptViewerWords({ className, renderWord, renderGap, wordClassNames, gapClassNames, ...props }: TranscriptViewerWordsProps) { const { spokenSegments, unspokenSegments, currentWord, segments, duration, currentTime, } = useTranscriptViewerContext() const nearEnd = useMemo(() => { if (!duration) return false return currentTime >= duration - 0.01 }, [currentTime, duration]) const segmentsWithStatus = useMemo(() => { if (nearEnd) { return segments.map((segment) => ({ segment, status: "spoken" as const })) } const entries: Array<{ segment: TranscriptSegment status: TranscriptViewerWordStatus }> = [] for (const segment of spokenSegments) { entries.push({ segment, status: "spoken" }) } if (currentWord) { entries.push({ segment: currentWord, status: "current" }) } for (const segment of unspokenSegments) { entries.push({ segment, status: "unspoken" }) } return entries }, [spokenSegments, unspokenSegments, currentWord, nearEnd, segments]) return (

{segmentsWithStatus.map(({ segment, status }) => { if (segment.kind === "gap") { const content = renderGap ? renderGap({ segment, status }) : segment.text return ( {content} ) } if (renderWord) { return ( {renderWord({ word: segment, status })} ) } return ( ) })}

) } function TranscriptViewerAudio({ ...props }: ComponentPropsWithoutRef<"audio">) { const { audioProps } = useTranscriptViewerContext() return (