use-transcript-viewer

1"use client"
2 
3import {
4  useCallback,
5  useEffect,
6  useMemo,
7  useRef,
8  useState,
9  type RefObject,
10} from "react"
11import type { CharacterAlignmentResponseModel } from "@elevenlabs/elevenlabs-js/api/types/CharacterAlignmentResponseModel"
12 
13type ComposeSegmentsOptions = {
14  hideAudioTags?: boolean
15}
16 
17type BaseSegment = {
18  segmentIndex: number
19  text: string
20}
21 
22type TranscriptWord = BaseSegment & {
23  kind: "word"
24  wordIndex: number
25  startTime: number
26  endTime: number
27}
28 
29type GapSegment = BaseSegment & {
30  kind: "gap"
31}
32 
33type TranscriptSegment = TranscriptWord | GapSegment
34 
35type ComposeSegmentsResult = {
36  segments: TranscriptSegment[]
37  words: TranscriptWord[]
38}
39 
40type SegmentComposer = (
41  alignment: CharacterAlignmentResponseModel
42) => ComposeSegmentsResult
43 
44function composeSegments(
45  alignment: CharacterAlignmentResponseModel,
46  options: ComposeSegmentsOptions = {}
47): ComposeSegmentsResult {
48  const {
49    characters,
50    characterStartTimesSeconds: starts,
51    characterEndTimesSeconds: ends,
52  } = alignment
53 
54  const segments: TranscriptSegment[] = []
55  const words: TranscriptWord[] = []
56 
57  let wordBuffer = ""
58  let whitespaceBuffer = ""
59  let wordStart = 0
60  let wordEnd = 0
61  let segmentIndex = 0
62  let wordIndex = 0
63  let insideAudioTag = false
64 
65  const hideAudioTags = options.hideAudioTags ?? false
66 
67  const flushWhitespace = () => {
68    if (!whitespaceBuffer) return
69    segments.push({
70      kind: "gap",
71      segmentIndex: segmentIndex++,
72      text: whitespaceBuffer,
73    })
74    whitespaceBuffer = ""
75  }
76 
77  const flushWord = () => {
78    if (!wordBuffer) return
79    const word: TranscriptWord = {
80      kind: "word",
81      segmentIndex: segmentIndex++,
82      wordIndex: wordIndex++,
83      text: wordBuffer,
84      startTime: wordStart,
85      endTime: wordEnd,
86    }
87    segments.push(word)
88    words.push(word)
89    wordBuffer = ""
90  }
91 
92  for (let i = 0; i < characters.length; i++) {
93    const char = characters[i]
94    const start = starts[i] ?? 0
95    const end = ends[i] ?? start
96 
97    if (hideAudioTags) {
98      if (char === "[") {
99        flushWord()
100        whitespaceBuffer = ""
101        insideAudioTag = true
102        continue
103      }
104 
105      if (insideAudioTag) {
106        if (char === "]") insideAudioTag = false
107        continue
108      }
109    }
110 
111    if (/\s/.test(char)) {
112      flushWord()
113      whitespaceBuffer += char
114      continue
115    }
116 
117    if (whitespaceBuffer) {
118      flushWhitespace()
119    }
120 
121    if (!wordBuffer) {
122      wordBuffer = char
123// … truncated