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

package/README.md

@@ -0,0 +1,29 @@
+# @linto-ai/transcript-ui-plugin-subtitle
+
+Fullscreen or banner subtitle display driven by the transcript (live or not), with an optional cycling watermark (text and/or image tokens).
+
+## Usage
+
+```ts
+import { createSubtitlePlugin } from "@linto-ai/transcript-ui-plugin-subtitle"
+
+core.use(
+  createSubtitlePlugin({
+    fontSize: 40,
+    isVisible: true,
+    watermark: {
+      content: "{logo} Recorded with LinTO",
+      tokens: { logo: { src: "/logo.svg", alt: "LinTO" } },
+      frequency: 30, // show every 30s
+      duration: 5, // for 5s
+    },
+  }),
+)
+```
+
+Toggle it from your own UI (a settings panel, a button, …) through the reactive state it exposes:
+
+```ts
+core.subtitle!.isVisible.value = true
+core.subtitle!.enterFullscreen()
+```

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@linto-ai/transcript-ui-plugin-subtitle",
+  "version": "0.9.0",
+  "description": "Subtitle display plugin for @linto-ai/transcript-ui — fullscreen/banner captions with an optional watermark",
+  "keywords": [
+    "vue",
+    "vue3",
+    "transcript",
+    "subtitle",
+    "captions",
+    "linto-plugin"
+  ],
+  "sideEffects": [
+    "**/*.vue"
+  ],
+  "homepage": "https://github.com/linto-ai/linto-studio",
+  "bugs": "https://github.com/linto-ai/linto-studio/issues",
+  "author": "Tom Darboux <tdarboux@linagora.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/linto-ai/linto-studio.git",
+    "directory": "studio-sdk/components/transcript-ui/packages/plugin-subtitle"
+  },
+  "type": "module",
+  "license": "AGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@linto-ai/transcript-ui-core": "0.9.0",
+    "@linto-ai/transcript-ui-i18n": "0.9.0",
+    "diff": "^8.0.3"
+  },
+  "devDependencies": {
+    "@types/diff": "^8.0.0"
+  }
+}

package/src/SubtitleBanner.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, useTemplateRef, watch } from "vue"
+import { useCore } from "@linto-ai/transcript-ui-core"
+import { useSubtitleScroller } from "./useSubtitleScroller"
+import { useWatermarkCycle } from "./useWatermarkCycle"
+import SubtitleWatermark from "./SubtitleWatermark.vue"
+
+const core = useCore()
+const canvasRef = useTemplateRef<HTMLCanvasElement>("canvas")
+
+const fontSize = computed(() => core.subtitle?.fontSize.value ?? 40)
+const lineHeight = computed(() => 1.2 * fontSize.value)
+const canvasHeight = computed(() => 2.4 * fontSize.value)
+
+useSubtitleScroller({
+  canvasRef,
+  fontSize,
+  lineHeight,
+})
+
+const { visible: watermarkVisible } = useWatermarkCycle(
+  core.subtitle?.watermark,
+)
+
+// The v-if in Layout mounts this component exactly when the fixed banner
+// occupies the bottom of the viewport. Notify the consumer so it can reserve
+// space (e.g. padding-bottom) and avoid content being hidden behind the banner.
+onMounted(() => {
+  core.emit("subtitle:visible", { visible: true, height: canvasHeight.value })
+})
+
+watch(canvasHeight, (height) => {
+  core.emit("subtitle:visible", { visible: true, height })
+})
+
+onBeforeUnmount(() => {
+  core.emit("subtitle:visible", { visible: false, height: 0 })
+})
+</script>
+
+<template>
+  <div class="subtitle-banner" :style="{ height: canvasHeight + 'px' }">
+    <canvas
+      ref="canvas"
+      class="subtitle-canvas"
+      :class="{ 'subtitle-canvas--shrunk': watermarkVisible }"
+      :height="canvasHeight"></canvas>
+    <SubtitleWatermark :visible="watermarkVisible" />
+  </div>
+</template>
+
+<style scoped>
+.subtitle-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  flex-shrink: 0;
+  background-color: var(--color-black);
+  overflow: hidden;
+  z-index: 1001;
+}
+
+.subtitle-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s ease;
+  transform-origin: top center;
+}
+
+.subtitle-canvas--shrunk {
+  transform: scale(0.8) translateY(-8%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .subtitle-canvas {
+    transition: none;
+  }
+}
+</style>

package/src/SubtitleFullscreen.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, useTemplateRef } from "vue"
+import { X } from "lucide-vue-next"
+import { useCore } from "@linto-ai/transcript-ui-core"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import { useSubtitleScroller } from "./useSubtitleScroller"
+import { useWatermarkCycle } from "./useWatermarkCycle"
+import SubtitleWatermark from "./SubtitleWatermark.vue"
+
+const core = useCore()
+const { t } = useI18n()
+const containerRef = useTemplateRef<HTMLDivElement>("container")
+const canvasRef = useTemplateRef<HTMLCanvasElement>("canvas")
+
+const fontSize = computed(() => core.subtitle?.fontSize.value ?? 48)
+const lineHeight = computed(() => 1.2 * fontSize.value)
+
+useSubtitleScroller({
+  canvasRef,
+  fontSize,
+  lineHeight,
+})
+
+const { visible: watermarkVisible } = useWatermarkCycle(
+  core.subtitle?.watermark,
+)
+
+onMounted(async () => {
+  const el = containerRef.value
+  if (!el) return
+
+  try {
+    await el.requestFullscreen()
+  } catch (err) {
+    console.warn("Fullscreen API not supported:", err)
+  }
+
+  try {
+    await (screen.orientation as unknown as { lock(o: string): Promise<void> }).lock("landscape")
+  } catch {
+    // Not supported or not allowed
+  }
+})
+
+// Sync: browser exits fullscreen (Escape key) → update plugin state
+function onFullscreenChange() {
+  if (!document.fullscreenElement) {
+    core.subtitle?.exitFullscreen()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("fullscreenchange", onFullscreenChange)
+})
+
+function close() {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(() => {})
+  }
+  core.subtitle?.exitFullscreen()
+}
+
+onUnmounted(() => {
+  document.removeEventListener("fullscreenchange", onFullscreenChange)
+
+  try {
+    ;(screen.orientation as unknown as { unlock(): void }).unlock()
+  } catch {
+    // Not supported
+  }
+
+  if (document.fullscreenElement) {
+    document.exitFullscreen().catch(() => {})
+  }
+})
+</script>
+
+<template>
+  <div ref="container" class="subtitle-fullscreen">
+    <button
+      class="subtitle-fullscreen__close"
+      :aria-label="t('subtitle.exitFullscreen')"
+      @click="close">
+      <X :size="24" />
+    </button>
+    <canvas
+      ref="canvas"
+      class="subtitle-fullscreen__canvas"
+      :class="{ 'subtitle-fullscreen__canvas--shrunk': watermarkVisible }"></canvas>
+    <SubtitleWatermark :visible="watermarkVisible" />
+  </div>
+</template>
+
+<style scoped>
+.subtitle-fullscreen {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-black);
+}
+
+.subtitle-fullscreen__close {
+  position: absolute;
+  top: var(--spacing-md, 16px);
+  right: var(--spacing-md, 16px);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-white);
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  transition: background-color var(--transition-duration) ease;
+}
+
+.subtitle-fullscreen__close:hover,
+.subtitle-fullscreen__close:focus-visible {
+  background: rgba(255, 255, 255, 0.25);
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+.subtitle-fullscreen__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s ease;
+  transform-origin: center;
+}
+
+.subtitle-fullscreen__canvas--shrunk {
+  transform: scale(0.85) translateY(-4%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .subtitle-fullscreen__close,
+  .subtitle-fullscreen__canvas {
+    transition: none;
+  }
+}
+</style>

package/src/SubtitleScroller.ts

@@ -0,0 +1,198 @@
+import splitPartialSubtitles from "./utils/splitPartialSubtitles"
+
+interface DrawerOptions {
+  fontSize?: number
+  lineHeight?: number
+  color?: string
+  font?: string
+  paddingInline?: number
+}
+
+interface ScrollerState {
+  previousText: string
+  previousIndexes: number[]
+}
+
+export class SubtitleDrawer {
+  protected canvas: HTMLCanvasElement
+  protected fontSize: number
+  protected lineHeight: number
+  protected color: string
+  protected font: string
+  protected paddingInline: number
+  protected isResizing = false
+  private resizeObserver: ResizeObserver
+
+  constructor(
+    canvas: HTMLCanvasElement,
+    {
+      fontSize = 40,
+      lineHeight = 50,
+      color = "white",
+      font = "Arial",
+      paddingInline = 100,
+    }: DrawerOptions = {},
+  ) {
+    this.canvas = canvas
+    this.fontSize = fontSize
+    this.lineHeight = lineHeight
+    this.color = color
+    this.font = font
+    this.paddingInline = paddingInline
+
+    this.canvas.width = this.canvas.clientWidth
+    this.canvas.height = this.canvas.clientHeight
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.isResizing = true
+      this.canvas.width = this.canvas.clientWidth
+      this.canvas.height = this.canvas.clientHeight
+      this.onResize()
+      this.isResizing = false
+    })
+    this.resizeObserver.observe(this.canvas)
+  }
+
+  dispose(): void {
+    this.resizeObserver.disconnect()
+  }
+
+  setFontSize(fontSize: number, lineHeight: number): void {
+    this.fontSize = fontSize
+    this.lineHeight = lineHeight
+    this.resetDrawing()
+    this.onResize()
+  }
+
+  resetDrawing(): void {
+    const ctx = this.canvas.getContext("2d")!
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  protected drawText(text: string, x: number, y: number): void {
+    const ctx = this.canvas.getContext("2d")!
+    ctx.font = `${this.fontSize}px ${this.font}`
+    ctx.fillStyle = this.color
+    ctx.fillText(text, x + this.paddingInline, y)
+  }
+
+  protected drawFirstLine(text: string): void {
+    this.drawText(text, 0, this.fontSize)
+  }
+
+  protected drawSecondLine(text: string): void {
+    this.drawText(text, 0, this.fontSize + this.lineHeight)
+  }
+
+  protected onResize(): void {
+    // Override in subclass
+  }
+}
+
+export class SubtitleScroller extends SubtitleDrawer {
+  private currentState: ScrollerState = { previousText: "", previousIndexes: [] }
+  private previousState: ScrollerState = { previousText: "", previousIndexes: [] }
+
+  constructor(canvas: HTMLCanvasElement, options?: DrawerOptions) {
+    super(canvas, options)
+  }
+
+  resetAll(): void {
+    this.currentState = { previousText: "", previousIndexes: [] }
+    this.previousState = { previousText: "", previousIndexes: [] }
+  }
+
+  protected override onResize(): void {
+    const currentText = this.currentState.previousText
+    this.resetAll()
+    this.currentState = splitPartialSubtitles(
+      this.currentState,
+      currentText.trim(),
+      this.computeIfTextIsTooLong.bind(this),
+      this.computeIfTextOverflows.bind(this),
+    )
+    this.draw()
+  }
+
+  newPartial(text: string): void {
+    if (this.isResizing) return
+    this.currentState = splitPartialSubtitles(
+      this.currentState,
+      text.trim(),
+      this.computeIfTextIsTooLong.bind(this),
+      this.computeIfTextOverflows.bind(this),
+    )
+    this.draw()
+  }
+
+  newFinal(text: string): void {
+    if (this.isResizing) return
+    this.currentState = splitPartialSubtitles(
+      this.currentState,
+      text.trim(),
+      this.computeIfTextIsTooLong.bind(this),
+      this.computeIfTextOverflows.bind(this),
+    )
+    this.draw()
+    this.resetState()
+  }
+
+  private resetState(): void {
+    this.previousState = this.currentState
+    this.currentState = { previousText: "", previousIndexes: [] }
+  }
+
+  private draw(): void {
+    this.resetDrawing()
+    let firstLine = ""
+    let secondLine = ""
+
+    switch (this.currentState.previousIndexes.length) {
+      case 0:
+        firstLine = this.getLastLineOfState(this.previousState)
+        secondLine = this.currentState.previousText
+        break
+      default:
+        firstLine = this.getSecondLastLineOfState(this.currentState)
+        secondLine = this.getLastLineOfState(this.currentState)
+        break
+    }
+
+    this.drawFirstLine(firstLine)
+    this.drawSecondLine(secondLine)
+  }
+
+  private getLastLineOfState(state: ScrollerState): string {
+    if (state.previousIndexes.length === 0) return state.previousText
+    const lastIndex = state.previousIndexes[state.previousIndexes.length - 1]!
+    return state.previousText.split(" ").slice(lastIndex).join(" ")
+  }
+
+  private getSecondLastLineOfState(state: ScrollerState): string {
+    if (state.previousIndexes.length === 0) return ""
+    const lastIndex = state.previousIndexes[state.previousIndexes.length - 1]!
+    let beforeLastIndex = 0
+    if (state.previousIndexes.length > 1) {
+      beforeLastIndex = state.previousIndexes[state.previousIndexes.length - 2]!
+    }
+    return state.previousText.split(" ").slice(beforeLastIndex, lastIndex).join(" ")
+  }
+
+  private textWidth(text: string): number {
+    const ctx = this.canvas.getContext("2d")!
+    ctx.font = `${this.fontSize}px ${this.font}`
+    return ctx.measureText(text).width
+  }
+
+  // Normal cut threshold: keeps both inline margins free.
+  private computeIfTextIsTooLong(text: string): boolean {
+    return this.textWidth(text) > this.canvas.width - 2 * this.paddingInline
+  }
+
+  // Overflow threshold: the text is drawn at x = paddingInline, so it reaches the
+  // canvas edge once its width exceeds canvas.width - paddingInline. Spilling into
+  // the inline margin is tolerated; going past this re-cuts an already-shown line.
+  private computeIfTextOverflows(text: string): boolean {
+    return this.textWidth(text) > this.canvas.width - this.paddingInline
+  }
+}

package/src/SubtitleWatermark.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { useCore } from "@linto-ai/transcript-ui-core"
+import { parseWatermark } from "./utils/parseWatermark"
+
+defineProps<{ visible: boolean }>()
+
+const core = useCore()
+const watermark = core.subtitle?.watermark
+
+const parts = computed(() => {
+  if (!watermark) return []
+  return parseWatermark(watermark.content.value, watermark.tokens.value)
+})
+</script>
+
+<template>
+  <Transition name="watermark">
+    <div v-if="visible && watermark" class="watermark" aria-hidden="true">
+      <template v-for="(part, i) in parts" :key="i">
+        <img
+          v-if="part.type === 'token'"
+          :src="part.src"
+          :alt="part.alt"
+          class="watermark__img" />
+        <span v-else>{{ part.value }}</span>
+      </template>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.watermark {
+  position: absolute;
+  right: var(--spacing-md, 16px);
+  bottom: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: 1.2rem;
+  color: var(--color-white, #fff);
+  pointer-events: none;
+  line-height: 1;
+}
+
+.watermark__img {
+  height: 1em;
+  vertical-align: middle;
+}
+
+.watermark-enter-active,
+.watermark-leave-active {
+  transition:
+    opacity 0.4s ease,
+    transform 0.4s ease;
+}
+
+.watermark-enter-from,
+.watermark-leave-to {
+  opacity: 0;
+  transform: translate(6px, 6px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .watermark-enter-active,
+  .watermark-leave-active {
+    transition: opacity 0.01s;
+    transform: none;
+  }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,89 @@
+import { ref, watch } from "vue"
+import type {
+  Core,
+  CorePlugin,
+  SubtitlePluginApi,
+  WatermarkPluginApi,
+  WatermarkToken,
+} from "@linto-ai/transcript-ui-core"
+import SubtitleBanner from "./SubtitleBanner.vue"
+import SubtitleFullscreen from "./SubtitleFullscreen.vue"
+
+export type { SubtitlePluginApi, WatermarkPluginApi, WatermarkToken }
+export { SubtitleBanner, SubtitleFullscreen }
+
+export interface WatermarkOptions {
+  display?: boolean
+  pinned?: boolean
+  content?: string
+  frequency?: number
+  duration?: number
+  tokens?: Record<string, WatermarkToken>
+  readonly?: boolean
+}
+
+export interface SubtitlePluginOptions {
+  fontSize?: number
+  isVisible?: boolean
+  watermark?: WatermarkOptions
+}
+
+export function createSubtitlePlugin(
+  options: SubtitlePluginOptions = {},
+): CorePlugin {
+  return {
+    name: "subtitle",
+    components: { subtitleBanner: SubtitleBanner, subtitleFullscreen: SubtitleFullscreen },
+
+    install(core: Core) {
+      const fontSize = ref(options.fontSize ?? 40)
+      const isVisible = ref(options.isVisible ?? false)
+      const isFullscreen = ref(false)
+
+      let watermark: WatermarkPluginApi | undefined
+      const unwatchers: Array<() => void> = []
+      if (options.watermark) {
+        const w = options.watermark
+        watermark = {
+          display: ref(w.display ?? false),
+          pinned: ref(w.pinned ?? false),
+          content: ref(w.content ?? ""),
+          frequency: ref(w.frequency ?? 30),
+          duration: ref(w.duration ?? 5),
+          tokens: ref(w.tokens ?? {}),
+          readonly: w.readonly ?? false,
+        }
+        unwatchers.push(
+          watch(watermark.display, (display) =>
+            core.emit("watermark:display", { display }),
+          ),
+          watch(watermark.pinned, (pinned) =>
+            core.emit("watermark:pin", { pinned }),
+          ),
+        )
+      }
+
+      const api: SubtitlePluginApi = {
+        fontSize,
+        isVisible,
+        isFullscreen,
+        enterFullscreen() {
+          isFullscreen.value = true
+        },
+        exitFullscreen() {
+          isFullscreen.value = false
+        },
+        watermark,
+      }
+
+      core.subtitle = api
+
+      return () => {
+        isVisible.value = false
+        isFullscreen.value = false
+        unwatchers.forEach((stop) => stop())
+        core.subtitle = undefined
+      }
+    },
+  }
+}