@linto-ai/transcript-ui-plugin-subtitle 0.9.0

package/src/useSubtitleScroller.ts

@@ -0,0 +1,66 @@
+import { onMounted, onUnmounted, watch, type ComputedRef, type Ref } from "vue"
+import { useCore } from "@linto-ai/transcript-ui-core"
+import { SubtitleScroller } from "./SubtitleScroller"
+
+interface UseSubtitleScrollerOptions {
+  canvasRef: Readonly<Ref<HTMLCanvasElement | null>>
+  fontSize: Ref<number> | ComputedRef<number>
+  lineHeight: Ref<number> | ComputedRef<number>
+}
+
+/**
+ * Wires a SubtitleScroller to editor events (live partials, turn adds, sync resets).
+ * Handles creation on mount and full cleanup on unmount.
+ */
+export function useSubtitleScroller(options: UseSubtitleScrollerOptions) {
+  const core = useCore()
+  let scroller: SubtitleScroller | null = null
+
+  onMounted(() => {
+    if (!options.canvasRef.value) return
+    scroller = new SubtitleScroller(options.canvasRef.value, {
+      fontSize: options.fontSize.value,
+      lineHeight: options.lineHeight.value,
+    })
+  })
+
+  watch([options.fontSize, options.lineHeight], ([fs, lh]) => {
+    if (!scroller) return
+    scroller.setFontSize(fs, lh)
+  })
+
+  watch(
+    () => core.live?.partial.value,
+    (text) => {
+      if (text && scroller) scroller.newPartial(text)
+    },
+  )
+
+  const unsubTurnAdd = core.onActiveTranslation("turn:add", ({ turn }) => {
+    if (!scroller) return
+    const text =
+      turn.words.length > 0
+        ? turn.words.map((w) => w.text).join(" ")
+        : (turn.text ?? "")
+    if (text) scroller.newFinal(text)
+  })
+
+  function resetScroller(): void {
+    if (!scroller) return
+    scroller.resetDrawing()
+    scroller.resetAll()
+  }
+
+  const unsubTranslationChange = core.on("translation:change", resetScroller)
+  const unsubTranslationSync = core.on("translation:sync", resetScroller)
+  const unsubChannelSync = core.on("channel:sync", resetScroller)
+
+  onUnmounted(() => {
+    unsubTurnAdd()
+    unsubTranslationChange()
+    unsubTranslationSync()
+    unsubChannelSync()
+    scroller?.dispose()
+    scroller = null
+  })
+}

package/src/useWatermarkCycle.ts

@@ -0,0 +1,59 @@
+import { onBeforeUnmount, onMounted, ref, watch } from "vue"
+import type { WatermarkPluginApi } from "@linto-ai/transcript-ui-core"
+
+export function useWatermarkCycle(api: WatermarkPluginApi | undefined) {
+  const visible = ref(false)
+  let showTimer: ReturnType<typeof setTimeout> | null = null
+  let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+  function clearTimers() {
+    if (showTimer) {
+      clearTimeout(showTimer)
+      showTimer = null
+    }
+    if (hideTimer) {
+      clearTimeout(hideTimer)
+      hideTimer = null
+    }
+  }
+
+  function show() {
+    if (!api || !api.display.value) return
+    visible.value = true
+    if (!api.pinned.value) {
+      hideTimer = setTimeout(hide, api.duration.value * 1000)
+    }
+  }
+
+  function hide() {
+    visible.value = false
+    if (!api || !api.display.value || api.pinned.value) return
+    showTimer = setTimeout(show, api.frequency.value * 1000)
+  }
+
+  function restart() {
+    clearTimers()
+    if (!api || !api.display.value) {
+      visible.value = false
+      return
+    }
+    if (api.pinned.value) {
+      visible.value = true
+      return
+    }
+    visible.value = false
+    showTimer = setTimeout(show, api.frequency.value * 1000)
+  }
+
+  if (api) {
+    watch(
+      [api.display, api.pinned, api.frequency, api.duration],
+      restart,
+    )
+  }
+
+  onMounted(restart)
+  onBeforeUnmount(clearTimers)
+
+  return { visible }
+}

package/src/utils/parseWatermark.ts

@@ -0,0 +1,39 @@
+import type { WatermarkToken } from "@linto-ai/transcript-ui-core"
+
+export type WatermarkPart =
+  | { type: "text"; value: string }
+  | { type: "token"; src: string; alt: string }
+
+const TOKEN_RE = /\$(\w+)/g
+
+export function parseWatermark(
+  content: string,
+  tokens: Record<string, WatermarkToken>,
+): WatermarkPart[] {
+  const parts: WatermarkPart[] = []
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  TOKEN_RE.lastIndex = 0
+  while ((match = TOKEN_RE.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ type: "text", value: content.slice(lastIndex, match.index) })
+    }
+
+    const name = match[1] ?? ""
+    const token = name ? tokens[name] : undefined
+    if (token) {
+      parts.push({ type: "token", src: token.src, alt: token.alt ?? name })
+    } else {
+      parts.push({ type: "text", value: match[0] })
+    }
+
+    lastIndex = match.index + match[0].length
+  }
+
+  if (lastIndex < content.length) {
+    parts.push({ type: "text", value: content.slice(lastIndex) })
+  }
+
+  return parts
+}

package/src/utils/splitPartialSubtitles.ts

@@ -0,0 +1,200 @@
+import { diffArrays } from "diff"
+
+interface SubtitleState {
+  previousText: string
+  previousIndexes: number[]
+}
+
+interface DiffEntry {
+  value: string[]
+  added?: boolean
+  removed?: boolean
+  count: number
+}
+
+interface ReplacementEntry {
+  replaced: true
+  removed: boolean
+  added: boolean
+  countRemoved: number
+  countAdded: number
+}
+
+type DiffWithReplacements = (DiffEntry | ReplacementEntry)[]
+
+export default function splitPartialSubtitles(
+  { previousText, previousIndexes: oldCutPositions }: SubtitleState,
+  newText: string,
+  computeIfTextIsTooLong: (text: string) => boolean,
+  computeIfTextOverflows?: (text: string) => boolean,
+): SubtitleState {
+  if (!newText) {
+    return { previousText, previousIndexes: oldCutPositions }
+  }
+
+  const previousTextSplitBySpace = previousText.split(" ")
+  const newTextSplitBySpace = newText.split(" ")
+  const diffList = diffArrays(previousTextSplitBySpace, newTextSplitBySpace, {
+    comparator: isSameWord,
+  })
+
+  const diffListWithReplacements = detectReplacements(diffList)
+
+  const copyCutPositions = [...oldCutPositions]
+  let newCutPositions = [...oldCutPositions]
+
+  let wordIndex = 0
+  for (const diff of diffListWithReplacements) {
+    do {
+      if (wordIndex < copyCutPositions[0]!) break
+    } while (copyCutPositions.shift() !== undefined)
+
+    if (copyCutPositions.length === 0) break
+
+    if ("replaced" in diff && diff.replaced) {
+      newCutPositions = incrementIndexes(
+        newCutPositions,
+        copyCutPositions[0]!,
+        diff.countAdded - diff.countRemoved,
+      )
+      wordIndex += diff.countRemoved
+    } else if ("removed" in diff && diff.removed) {
+      const d = diff as DiffEntry
+      wordIndex += d.count
+      newCutPositions = incrementIndexes(
+        newCutPositions,
+        copyCutPositions[0]!,
+        -d.count,
+      )
+    } else if ("added" in diff && diff.added) {
+      const d = diff as DiffEntry
+      newCutPositions = incrementIndexes(
+        newCutPositions,
+        copyCutPositions[0]!,
+        d.count,
+      )
+    } else {
+      const d = diff as DiffEntry
+      wordIndex += d.count
+    }
+  }
+
+  // The scroller only ever displays the last two lines, so we only keep those
+  // two inside the canvas.
+  const lineText = (from: number, to?: number): string =>
+    newTextSplitBySpace.slice(from, to).join(" ")
+
+  // Step 1 — keep the second-to-last (first visible) line inside the canvas. If a
+  // widened word pushed it off the edge, move the last cut earlier so the
+  // overflowing tail flows down into the last line; the head stays in place. We
+  // trigger on the overflow threshold but cut at the normal one, leaving a margin
+  // before it can overflow again (hysteresis, avoids re-cutting on every partial).
+  if (computeIfTextOverflows && newCutPositions.length > 0) {
+    const lastIndex = newCutPositions.length - 1
+    const lineStart = lastIndex > 0 ? newCutPositions[lastIndex - 1]! : 0
+    const secondToLastLine = lineText(lineStart, newCutPositions[lastIndex]!)
+
+    if (computeIfTextOverflows(secondToLastLine)) {
+      const [headCut] = getIndexesWhereToCutText(
+        secondToLastLine,
+        computeIfTextIsTooLong,
+      )
+      // headCut is undefined for a single unsplittable word: leave it as is.
+      if (headCut !== undefined) newCutPositions[lastIndex] = lineStart + headCut
+    }
+  }
+
+  // Step 2 — cut the last line if it is too long, including the words step 1 may
+  // have just pushed down. This is the normal live-growth cut.
+  const lastLineStart =
+    newCutPositions.length > 0 ? newCutPositions[newCutPositions.length - 1]! : 0
+  const lastLine = lineText(lastLineStart)
+  if (computeIfTextIsTooLong(lastLine)) {
+    const cuts = getIndexesWhereToCutText(lastLine, computeIfTextIsTooLong)
+    newCutPositions = newCutPositions.concat(cuts.map((i) => i + lastLineStart))
+  }
+
+  return {
+    previousIndexes: newCutPositions,
+    previousText: newText,
+  }
+}
+
+function detectReplacements(diffList: DiffEntry[]): DiffWithReplacements {
+  const result: DiffWithReplacements = []
+
+  for (let i = 0; i < diffList.length; i++) {
+    const currentDiff = diffList[i]!
+    const nextDiff = diffList[i + 1]
+
+    // A replacement is a removed block immediately followed by an added one.
+    const isReplacement = currentDiff.removed && nextDiff?.added
+
+    if (isReplacement) {
+      result.push({
+        replaced: true,
+        removed: true,
+        added: true,
+        countRemoved: currentDiff.count,
+        countAdded: nextDiff!.count,
+      })
+      i++ // skip the added block, already merged into this replacement
+    } else {
+      result.push(currentDiff)
+    }
+  }
+
+  return result
+}
+
+function incrementIndexes(indexes: number[], from: number, increment: number): number[] {
+  return indexes.map((index) => (index >= from ? index + increment : index))
+}
+
+export function getIndexesWhereToCutText(
+  text: string,
+  computeIfTextIsTooLong: (text: string) => boolean,
+): number[] {
+  const splitText = text.split(" ")
+  if (!computeIfTextIsTooLong(text) || splitText.length <= 1) {
+    return []
+  }
+
+  let i: number
+  for (i = 0; i < splitText.length; i++) {
+    const currentText = splitText.slice(0, i).join(" ")
+    if (computeIfTextIsTooLong(currentText)) break
+  }
+
+  return [i - 1].concat(
+    incrementIndexes(
+      getIndexesWhereToCutText(
+        splitText.slice(i - 1).join(" "),
+        computeIfTextIsTooLong,
+      ),
+      0,
+      i - 1,
+    ),
+  )
+}
+
+function isSameWord(word1: string, word2: string): boolean {
+  const w1Normalized = word1
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+  const w2Normalized = word2
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+
+  const shortestLength = Math.min(w1Normalized.length, w2Normalized.length)
+
+  let numberOfSameChars = 0
+  for (let i = 0; i < shortestLength; i++) {
+    if (w1Normalized[i] === w2Normalized[i]) numberOfSameChars++
+  }
+
+  const similarity = numberOfSameChars / w1Normalized.length
+  return similarity > 0.8
+}

package/src/utils/test/parseWatermark.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "bun:test"
+import { parseWatermark } from "../parseWatermark"
+
+const tokens = {
+  linto: { src: "/img/linto.svg", alt: "LinTO" },
+  logo: { src: "/img/logo.png" },
+}
+
+describe("parseWatermark", () => {
+  it("returns a single text part for plain content", () => {
+    expect(parseWatermark("Hello world", tokens)).toEqual([
+      { type: "text", value: "Hello world" },
+    ])
+  })
+
+  it("returns an empty array for empty content", () => {
+    expect(parseWatermark("", tokens)).toEqual([])
+  })
+
+  it("replaces a known token with an image part", () => {
+    expect(parseWatermark("$linto", tokens)).toEqual([
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+    ])
+  })
+
+  it("uses the token name as alt when alt is not provided", () => {
+    expect(parseWatermark("$logo", tokens)).toEqual([
+      { type: "token", src: "/img/logo.png", alt: "logo" },
+    ])
+  })
+
+  it("keeps unknown tokens as literal text", () => {
+    expect(parseWatermark("Hi $unknown", tokens)).toEqual([
+      { type: "text", value: "Hi " },
+      { type: "text", value: "$unknown" },
+    ])
+  })
+
+  it("handles text around and between tokens", () => {
+    expect(
+      parseWatermark("Powered by $linto and $logo - thanks", tokens),
+    ).toEqual([
+      { type: "text", value: "Powered by " },
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+      { type: "text", value: " and " },
+      { type: "token", src: "/img/logo.png", alt: "logo" },
+      { type: "text", value: " - thanks" },
+    ])
+  })
+
+  it("replaces every occurrence of the same token", () => {
+    expect(parseWatermark("$linto vs $linto", tokens)).toEqual([
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+      { type: "text", value: " vs " },
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+    ])
+  })
+
+  it("stops the token name at the first non-word character", () => {
+    expect(parseWatermark("$linto.svg", tokens)).toEqual([
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+      { type: "text", value: ".svg" },
+    ])
+  })
+
+  it("handles adjacent tokens", () => {
+    expect(parseWatermark("$linto$logo", tokens)).toEqual([
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+      { type: "token", src: "/img/logo.png", alt: "logo" },
+    ])
+  })
+
+  it("keeps a lone $ as literal text", () => {
+    expect(parseWatermark("price: $ 20", tokens)).toEqual([
+      { type: "text", value: "price: $ 20" },
+    ])
+  })
+
+  it("keeps numeric-only tokens as literal when unknown", () => {
+    expect(parseWatermark("$20", tokens)).toEqual([
+      { type: "text", value: "$20" },
+    ])
+  })
+
+  it("does not run HTML: angle brackets are kept as-is (rendering escapes them)", () => {
+    expect(parseWatermark("<script>$linto", tokens)).toEqual([
+      { type: "text", value: "<script>" },
+      { type: "token", src: "/img/linto.svg", alt: "LinTO" },
+    ])
+  })
+
+  it("works with no tokens registered", () => {
+    expect(parseWatermark("$linto hi", {})).toEqual([
+      { type: "text", value: "$linto" },
+      { type: "text", value: " hi" },
+    ])
+  })
+
+  it("is stateless across consecutive calls (no regex lastIndex leak)", () => {
+    const first = parseWatermark("$linto", tokens)
+    const second = parseWatermark("$linto", tokens)
+    expect(first).toEqual(second)
+  })
+})

package/src/utils/test/splitPartialSubtitles.test.ts

@@ -0,0 +1,180 @@
+import { describe, expect, it } from "bun:test"
+import splitPartialSubtitles, {
+  getIndexesWhereToCutText,
+} from "../splitPartialSubtitles"
+
+// A line is "too long" once it exceeds `maxWords` words. Word-based so the cut
+// positions stay easy to reason about: one cut roughly every `maxWords` words.
+const tooLongAfter = (maxWords: number) => (text: string) =>
+  text.split(" ").length > maxWords
+
+describe("getIndexesWhereToCutText", () => {
+  it("returns no cut when the text fits", () => {
+    expect(getIndexesWhereToCutText("a b c", tooLongAfter(3))).toEqual([])
+  })
+
+  it("returns no cut for a single word, even when it is too long", () => {
+    expect(getIndexesWhereToCutText("word", (t) => t.length > 1)).toEqual([])
+  })
+
+  it("cuts once when the text is one line too long", () => {
+    expect(getIndexesWhereToCutText("a b c d e", tooLongAfter(3))).toEqual([3])
+  })
+
+  it("cuts repeatedly for a very long text", () => {
+    expect(getIndexesWhereToCutText("a b c d e f g h", tooLongAfter(3))).toEqual([
+      3, 6,
+    ])
+  })
+})
+
+describe("splitPartialSubtitles", () => {
+  const emptyState = { previousText: "", previousIndexes: [] as number[] }
+
+  it("returns the previous state untouched for empty text", () => {
+    const state = { previousText: "a b", previousIndexes: [1] }
+    expect(splitPartialSubtitles(state, "", tooLongAfter(3))).toEqual(state)
+  })
+
+  it("produces no cut for a short fresh text", () => {
+    expect(splitPartialSubtitles(emptyState, "a b", tooLongAfter(3))).toEqual({
+      previousText: "a b",
+      previousIndexes: [],
+    })
+  })
+
+  it("cuts a long fresh text", () => {
+    expect(splitPartialSubtitles(emptyState, "a b c d e", tooLongAfter(3))).toEqual(
+      { previousText: "a b c d e", previousIndexes: [3] },
+    )
+  })
+
+  it("keeps the earlier cut stable when the text grows", () => {
+    const state = { previousText: "a b c d e", previousIndexes: [3] }
+    expect(
+      splitPartialSubtitles(state, "a b c d e f g", tooLongAfter(3)),
+    ).toEqual({ previousText: "a b c d e f g", previousIndexes: [3, 6] })
+  })
+
+  it("does not cut when a word is replaced without overflowing", () => {
+    const state = { previousText: "hello world", previousIndexes: [] }
+    expect(splitPartialSubtitles(state, "hi world", tooLongAfter(3))).toEqual({
+      previousText: "hi world",
+      previousIndexes: [],
+    })
+  })
+})
+
+// Two stable lines of three words each, cut at index 3:
+//   "mot1 mot2 mot3 | mot4 mot5 mot6"
+// These pin how an edit shifts (or keeps) that cut.
+describe("splitPartialSubtitles — cut shifting on edits", () => {
+  const twoLines = {
+    previousText: "mot1 mot2 mot3 mot4 mot5 mot6",
+    previousIndexes: [3],
+  }
+
+  const indexesAfter = (next: string): number[] =>
+    splitPartialSubtitles(twoLines, next, tooLongAfter(3)).previousIndexes
+
+  it("keeps the cut when line 1 is replaced word-for-word (1 word -> 2, 1 deleted)", () => {
+    // mot2 mot3 -> mot2.1 mot2.2 (still 2 words), line 2 stays 3 words
+    expect(indexesAfter("mot1 mot2.1 mot2.2 mot4 mot6 mot7")).toEqual([3])
+  })
+
+  it("keeps the cut on a 1:1 replacement plus a tail delete/add", () => {
+    expect(indexesAfter("mot1 mot2.1 mot3 mot5 mot6 mot7")).toEqual([3])
+  })
+
+  it("keeps the cut when a word is duplicated across both lines", () => {
+    // mot2 -> mot4, so "mot4" now appears in both lines
+    expect(indexesAfter("mot1 mot4 mot3 mot4 mot5 mot6")).toEqual([3])
+  })
+
+  it("shifts the cut right when a word is inserted in line 1", () => {
+    // KNOWN OVERFLOW BUG: line 1 ends up with 4 words and is NOT re-cut.
+    // Expected to change once the two-threshold fix re-validates earlier lines.
+    expect(indexesAfter("mot1 inserted mot2 mot3 mot4 mot5 mot6")).toEqual([4])
+  })
+
+  it("shifts the cut left when a word is deleted in line 1", () => {
+    expect(indexesAfter("mot1 mot3 mot4 mot5 mot6")).toEqual([2])
+  })
+
+  it("re-cuts the last line when it grows too long", () => {
+    expect(indexesAfter("mot1 mot2 mot3 mot4 mot5 mot6 mot7 mot8")).toEqual([
+      3, 6,
+    ])
+  })
+
+  it("re-cuts the last line when a word is inserted into line 2", () => {
+    expect(indexesAfter("mot1 mot2 mot3 mot4 inserted mot5 mot6")).toEqual([
+      3, 6,
+    ])
+  })
+})
+
+// The overflow predicate is char-based here, standing in for pixel width:
+//   tooLong  = normal cut threshold  (canvas.width - 2 * paddingInline)
+//   overflows = canvas edge / overflow (canvas.width - paddingInline)
+// The gap between 11 and 15 is the inline margin a line may spill into.
+describe("splitPartialSubtitles — overflow on the second-to-last line", () => {
+  const tooLong = (t: string) => t.length > 11
+  const overflows = (t: string) => t.length > 15
+
+  const indexesAfter = (
+    prev: string,
+    prevIndexes: number[],
+    next: string,
+  ): number[] =>
+    splitPartialSubtitles(
+      { previousText: prev, previousIndexes: prevIndexes },
+      next,
+      tooLong,
+      overflows,
+    ).previousIndexes
+
+  it("pushes the overflowing tail down and keeps the head when the last line has room", () => {
+    // "ddd" -> "dddd" makes line 1 leave the canvas; its tail flows down and the
+    // head ("aaa bbb ccc") stays in place.
+    expect(indexesAfter("aaa bbb ccc ddd z", [4], "aaa bbb ccc dddd z")).toEqual([
+      3,
+    ])
+  })
+
+  it("tolerates a line that only spills into the inline margin (no re-cut)", () => {
+    // line 1 is 13 chars: past the soft limit (11) but within the hard one (15).
+    expect(indexesAfter("aaaa bbbb ccc z", [3], "aaaa bbbb ccc z")).toEqual([3])
+  })
+
+  it("scrolls when the last line is full and cannot absorb the pushed-down word", () => {
+    expect(
+      indexesAfter("aaa bbb ccc ddd xxx yyy", [4], "aaa bbb ccc dddd xxx yyy"),
+    ).toEqual([3, 5])
+  })
+
+  it("leaves an unsplittable wide word in place", () => {
+    expect(
+      indexesAfter("wordwordwordword z", [1], "wordwordwordword z"),
+    ).toEqual([1])
+  })
+
+  it("does nothing when no line overflows", () => {
+    expect(indexesAfter("aa bb cc z", [3], "aa bb cc z")).toEqual([3])
+  })
+
+  it("worked example: pushes the head down then re-cuts the rest", () => {
+    // "mot2" widens to "mot2222" and "mot7" is appended:
+    //   mot1 mot2 mot3 | mot4 mot5 mot6
+    //   -> mot1 mot2222 | mot3 mot4 mot5 | mot6 mot7
+    const soft = (t: string) => t.length > 14
+    const hard = (t: string) => t.length > 16
+    const res = splitPartialSubtitles(
+      { previousText: "mot1 mot2 mot3 mot4 mot5 mot6", previousIndexes: [3] },
+      "mot1 mot2222 mot3 mot4 mot5 mot6 mot7",
+      soft,
+      hard,
+    )
+    expect(res.previousIndexes).toEqual([2, 5])
+  })
+})