@lalalic/markcut 2.3.0 → 2.4.1

package/src/types/Subtitle.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cancelRender, continueRender, delayRender, Sequence, staticFile, useVideoConfig } from "remotion";
+import { cancelRender, continueRender, delayRender, Sequence, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
 import * as Subtitles from "remotion-subtitle";
 import { cssJS, parseVTT, type Cue } from "../utils/index";
 import type { SubtitleOverlay as SubtitleOverlayConfig } from "../schema/index";
@@ -89,28 +89,79 @@ function supportHtml(text: string): any {
   return el;
 }
 
+/**
+ * Strip HTML tags from text, returning the plain text content.
+ * Used to compare cue texts ignoring word-level highlighting markup.
+ */
+function stripHtml(text: string): string {
+  return text.replace(/<[^>]*>/g, "").trim();
+}
+
+/**
+ * Group consecutive cues that share the same plain-text content.
+ * This is the pattern used by word-level highlighting VTT where each
+ * cue contains the full sentence but wraps a different word in HTML
+ * (e.g. `<u>` or `<span style="...">`).
+ *
+ * Grouping them into a single CueFrame keeps the caption component
+ * mounted across word transitions, eliminating the flash that occurs
+ * when each cue unmounts/remounts its own Sequence.
+ */
+function groupConsecutiveCues(cues: Cue[]): Cue[][] {
+  const groups: Cue[][] = [];
+  let current: Cue[] = [];
+
+  for (const cue of cues) {
+    const plain = stripHtml(cue.text);
+    if (current.length === 0) {
+      current.push(cue);
+    } else {
+      const prevPlain = stripHtml(current[current.length - 1]!.text);
+      if (plain === prevPlain) {
+        current.push(cue);
+      } else {
+        groups.push(current);
+        current = [cue];
+      }
+    }
+  }
+  if (current.length > 0) groups.push(current);
+  return groups;
+}
+
 /**
  * Renders a single cue inside a <Sequence> so Remotion only evaluates it
  * during the cue's active time window — matching the qili-ai pattern.
  * This avoids per-frame cue lookups and lets the caption component mount
  * once per cue rather than re-creating on every frame.
+ *
+ * When a cue group has multiple entries (same plain text, different HTML
+ * highlighting), the component uses useCurrentFrame() to select the
+ * active cue's text dynamically — keeping the caption component mounted
+ * across word transitions and preventing flash.
  */
 function CueFrame({
   cue,
   fps,
   CaptionComponent,
   subtitle,
+  cueGroup,
 }: {
   cue: Cue;
   fps: number;
   CaptionComponent: React.FC<{ text: any; style?: React.CSSProperties }>;
   subtitle: SubtitleOverlayConfig;
+  /** Optional full group of cues sharing the same plain text. When provided,
+   * the Sequence spans the entire group and highlights change dynamically. */
+  cueGroup?: Cue[];
 }) {
-  const durationInFrames = Math.max(1, Math.floor((cue.endAt - cue.startFrom) * fps));
-  const from = Math.floor(cue.startFrom * fps);
+  const group = cueGroup ?? [cue];
+  const startFrom = group[0]!.startFrom;
+  const endAt = group[group.length - 1]!.endAt;
+
+  const durationInFrames = Math.max(1, Math.floor((endAt - startFrom) * fps));
+  const from = Math.floor(startFrom * fps);
 
-  // Stable reference: compute once per cue, not every frame
-  const captionText = React.useMemo(() => supportHtml(cue.text), [cue.text]);
   const textStyle: React.CSSProperties = React.useMemo(
     () => ({
       ...DEFAULT_TEXT_STYLE,
@@ -123,17 +174,56 @@ function CueFrame({
 
   return (
     <Sequence layout="none" durationInFrames={durationInFrames} from={from}>
-      <CaptionComponent text={captionText} style={textStyle} />
+      <GroupedCueInner
+        group={group}
+        fps={fps}
+        CaptionComponent={CaptionComponent}
+        textStyle={textStyle}
+      />
     </Sequence>
   );
 }
 
+/**
+ * Inner component that renders inside the single Sequence.
+ * Uses useCurrentFrame() to pick which cue's HTML text to display
+ * based on the current time, keeping the caption component mounted
+ * across word transitions.
+ */
+function GroupedCueInner({
+  group,
+  fps,
+  CaptionComponent,
+  textStyle,
+}: {
+  group: Cue[];
+  fps: number;
+  CaptionComponent: React.FC<{ text: any; style?: React.CSSProperties }>;
+  textStyle: React.CSSProperties;
+}) {
+  const frame = useCurrentFrame();
+  const currentTime = frame / fps;
+
+  // Find the active cue based on current time
+  let activeCue = group[group.length - 1]!;
+  for (const c of group) {
+    if (currentTime >= c.startFrom && currentTime < c.endAt) {
+      activeCue = c;
+      break;
+    }
+  }
+
+  const captionText = React.useMemo(() => supportHtml(activeCue.text), [activeCue.text]);
+
+  return <CaptionComponent text={captionText} style={textStyle} />;
+}
+
 /**
  * Root-level subtitle overlay. Renders a single VTT file as captions over
  * the entire video. VTT cue timestamps are absolute (seconds from video start),
  * matching useCurrentFrame() / fps directly.
  *
- * Each cue is rendered as a separate <Sequence> (qili-ai pattern) so Remotion
+ * Each cue is rendered as a separate <Sequence> so Remotion
  * only mounts/evaluates the caption component during its active time window.
  * This avoids per-frame computation for inactive cues.
  *
@@ -198,16 +288,21 @@ export function SubtitleOverlay({ subtitle }: { subtitle: SubtitleOverlayConfig
     };
   }, [subtitle.src]);
 
-  if (!cues) return null;
+  if (!cues) return null;@
+
+  const boxCss = subtitle.style ? (cssJS(subtitle.style) as React.CSSProperties) : {};@
 
-  const boxCss = subtitle.style ? (cssJS(subtitle.style) as React.CSSProperties) : {};
+  // Group consecutive cues with same plain text (word-level highlighting pattern)
+  // so the caption component stays mounted across word transitions — no flash.
+  const cueGroups = React.useMemo(() => groupConsecutiveCues(cues), [cues]);
 
   return (
     <div className={`${subtitle.type || "default"} subtitle-overlay`} style={{ ...DEFAULT_BOX_STYLE, ...boxCss }}>
-      {cues.map((cue, i) => (
+      {cueGroups.map((group, gi) => (
         <CueFrame
-          key={`${i}-${cue.startFrom}-${cue.endAt}`}
-          cue={cue}
+          key={`g${gi}-${group[0]!.startFrom}-${group[group.length - 1]!.endAt}`}
+          cue={group[0]!}
+          cueGroup={group}
           fps={fps}
           CaptionComponent={CaptionComponent}
           subtitle={subtitle}

package/src/types/Video.tsx

@@ -23,7 +23,7 @@ export function VideoLeaf({ stream }: { stream: Video }) {
   const startFrom = stream.startFrom ?? 0;
   const endAt = stream.endAt ?? totalDur;
   const volume = stream.volume ?? 1;
-  const playbackRate = stream.loop ? 1 : Math.min(1, toPlaybackRate((endAt - startFrom) / (end - start)));
+  const playbackRate = Math.min(1, toPlaybackRate((endAt - startFrom) / (end - start)));
   const streamStyle = cssJS(stream.style);
   const hasAnimation = "animation" in streamStyle;
   return (

package/tests/render.test.ts

@@ -473,11 +473,11 @@ describe("Audio STT Verification", () => {
 });
 
 // ───────────────────────────────────────────────────────────────────────────
-// 11. Multiple Aspect Ratios
+// 11. Dimensions from Stream File
 // ───────────────────────────────────────────────────────────────────────────
 
-describe("Multiple Aspect Ratios", () => {
-  it("renders same fixture at 16x9, 9x16, and 1x1", async () => {
+describe("Dimensions from Stream File", () => {
+  it("respects width/height defined in the stream tree root", async () => {
     const fixture = {
       root: {
         id: "root",
@@ -490,7 +490,7 @@ describe("Multiple Aspect Ratios", () => {
           {
             id: "bg",
             type: "image",
-            src: "https://picsum.photos/seed/aspect-test/1920/1080",
+            src: "https://picsum.photos/seed/dim-test/1920/1080",
             fit: "cover",
             start: 0,
             end: 2,
@@ -498,7 +498,7 @@ describe("Multiple Aspect Ratios", () => {
           {
             id: "title",
             type: "image",
-            src: "https://picsum.photos/seed/aspect-title/1920/1080",
+            src: "https://picsum.photos/seed/dim-title/1920/1080",
             fit: "cover",
             start: 0.3,
             end: 1.7,
@@ -508,18 +508,16 @@ describe("Multiple Aspect Ratios", () => {
     };
 
     const { writeFileSync } = await import("node:fs");
-    const tmpFixture = outPath("_aspects.json");
+    const tmpFixture = outPath("_dims.json");
     writeFileSync(tmpFixture, JSON.stringify(fixture));
 
-    // Render with different aspect ratios via --props adaptation
-    // Note: Aspect adaptation happens in the CLI, so we test with the default
+    // Dimensions come from the stream file root, not from a CLI --aspect flag
     const output = renderFixture(tmpFixture, {
-      outputName: "aspect-default.mp4",
+      outputName: "dims-default.mp4",
       timeout: RENDER_TIMEOUT,
     });
 
     const info = getVideoInfo(output);
-    // Default aspect is whatever the fixture says (1920x1080)
     expect(info.width).toBe(1920);
     expect(info.height).toBe(1080);