@linto-ai/transcript-ui-plugin-subtitle 0.9.23 → 0.9.24-unstable.202610151359

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linto-ai/transcript-ui-plugin-subtitle",
-  "version": "0.9.23",
+  "version": "0.9.24-unstable.202610151359",
   "description": "Subtitle display plugin for @linto-ai/transcript-ui — fullscreen/banner captions with an optional watermark",
   "keywords": [
     "vue",
@@ -38,8 +38,8 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@linto-ai/transcript-ui-core": "0.9.23",
-    "@linto-ai/transcript-ui-i18n": "0.9.23",
+    "@linto-ai/transcript-ui-core": "0.9.24-unstable.202610151359",
+    "@linto-ai/transcript-ui-i18n": "0.9.24-unstable.202610151359",
     "diff": "^8.0.3",
     "lucide-vue-next": "^0.564.0"
   },

package/src/SubtitleBanner.vue

@@ -43,8 +43,7 @@ onBeforeUnmount(() => {
     <canvas
       ref="canvas"
       class="subtitle-canvas"
-      :class="{ 'subtitle-canvas--shrunk': watermarkVisible }"
-      :height="canvasHeight"></canvas>
+      :class="{ 'subtitle-canvas--shrunk': watermarkVisible }"></canvas>
     <SubtitleWatermark :visible="watermarkVisible" />
   </div>
 </template>

package/src/SubtitleFullscreen.vue

@@ -92,13 +92,16 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+/* Fixed to the viewport on its own: when requestFullscreen() is refused
+   (iPhone Safari, WebViews), the view must still cover the editor instead of
+   sitting as one more flex child of the layout. */
 .subtitle-fullscreen {
-  position: relative;
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-fullscreen);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
   background-color: var(--color-black);
 }
 

package/src/SubtitleScroller.ts

@@ -21,6 +21,10 @@ export class SubtitleDrawer {
   protected font: string
   protected paddingInline: number
   protected isResizing = false
+  /** Canvas size in CSS pixels: the unit of every draw and measure call. The
+   *  bitmap itself is scaled by devicePixelRatio (see resizeBitmap). */
+  protected width = 0
+  protected height = 0
   private resizeObserver: ResizeObserver
 
   constructor(
@@ -40,13 +44,11 @@ export class SubtitleDrawer {
     this.font = font
     this.paddingInline = paddingInline
 
-    this.canvas.width = this.canvas.clientWidth
-    this.canvas.height = this.canvas.clientHeight
+    this.resizeBitmap()
 
     this.resizeObserver = new ResizeObserver(() => {
       this.isResizing = true
-      this.canvas.width = this.canvas.clientWidth
-      this.canvas.height = this.canvas.clientHeight
+      this.resizeBitmap()
       this.onResize()
       this.isResizing = false
     })
@@ -66,7 +68,20 @@ export class SubtitleDrawer {
 
   resetDrawing(): void {
     const ctx = this.canvas.getContext("2d")!
-    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    ctx.clearRect(0, 0, this.width, this.height)
+  }
+
+  // Sizes the bitmap in device pixels so text stays sharp on high-density
+  // screens, then scales the context back so callers keep drawing in CSS
+  // pixels. Assigning canvas.width resets the context, hence the transform
+  // being set again on every call.
+  private resizeBitmap(): void {
+    const pixelRatio = window.devicePixelRatio || 1
+    this.width = this.canvas.clientWidth
+    this.height = this.canvas.clientHeight
+    this.canvas.width = Math.round(this.width * pixelRatio)
+    this.canvas.height = Math.round(this.height * pixelRatio)
+    this.canvas.getContext("2d")!.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
   }
 
   protected drawText(text: string, x: number, y: number): void {
@@ -77,11 +92,17 @@ export class SubtitleDrawer {
   }
 
   protected drawFirstLine(text: string): void {
-    this.drawText(text, 0, this.fontSize)
+    this.drawText(text, 0, this.computeTextBlockTop() + this.fontSize)
   }
 
   protected drawSecondLine(text: string): void {
-    this.drawText(text, 0, this.fontSize + this.lineHeight)
+    this.drawText(text, 0, this.computeTextBlockTop() + this.fontSize + this.lineHeight)
+  }
+
+  // The two lines form a block of 2 × lineHeight, centered vertically. The
+  // banner canvas is exactly that tall, so there the block starts at the top.
+  private computeTextBlockTop(): number {
+    return (this.height - 2 * this.lineHeight) / 2
   }
 
   protected onResize(): void {
@@ -125,6 +146,15 @@ export class SubtitleScroller extends SubtitleDrawer {
     this.draw()
   }
 
+  /** Drops the provisional line being built and repaints without it — the
+   *  last finalized line stays up. What the canvas showed just before the
+   *  partial started, in other words. */
+  clearPartial(): void {
+    if (this.isResizing) return
+    this.currentState = { previousText: "", previousIndexes: [] }
+    this.draw()
+  }
+
   newFinal(text: string): void {
     if (this.isResizing) return
     this.currentState = splitPartialSubtitles(
@@ -186,13 +216,13 @@ export class SubtitleScroller extends SubtitleDrawer {
 
   // Normal cut threshold: keeps both inline margins free.
   private computeIfTextIsTooLong(text: string): boolean {
-    return this.textWidth(text) > this.canvas.width - 2 * this.paddingInline
+    return this.textWidth(text) > this.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
+  // canvas edge once its width exceeds 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
+    return this.textWidth(text) > this.width - this.paddingInline
   }
 }

package/src/useSubtitleScroller.ts

@@ -36,6 +36,16 @@ export function useSubtitleScroller(options: UseSubtitleScrollerOptions) {
     },
   )
 
+  // Clearing core.live.partial is routine — it happens on every finalized
+  // turn — so the scroller ignores it and keeps the text on screen. Turning
+  // the setting off is the one case where the line must actually go.
+  watch(
+    () => core.live?.partialsVisible.value,
+    (visible) => {
+      if (visible === false) scroller?.clearPartial()
+    },
+  )
+
   const unsubTurnAdd = core.onActiveTranslation("turn:add", ({ turn }) => {
     if (!scroller) return
     const text =