Files
hyperframes/skills/faceless-explainer/scripts/lib/pad-frame-duration.mjs
Miguel Ángel 8bc1e5d603 fix(video-workflows): pad the frame's own duration to match the transition tail (#1889)
* fix(video-workflows): pad the frame's own duration to match the transition tail

transitions.mjs extends the index.html WRAPPER's data-duration to cover an
outgoing transition's tail, but the frame's own internal composition file
kept its shorter, content-only data-duration (authored per frame-worker.md's
"duration is fixed upstream" instruction). The render engine clip-gates a
sub-composition's visible content at its own declared duration, so content
vanished abruptly at content-end instead of fading through the wrapper's
extended fade-out tween.

A user root-caused and verified this themselves: padding the frame's own
duration to match the wrapper fixed it, project-wide, across every
non-final frame. transitions.mjs already computes the correct padded
duration for the wrapper - it now writes the same value into the matching
frame's own file at inject time.

Extracted to a shared lib/pad-frame-duration.mjs (mirroring the existing
lib/transition-registry.mjs convention) since transitions.mjs's own
top-level CLI dispatch runs on import, making it untestable directly.
Duplicated identically across pr-to-video, faceless-explainer, and
product-launch-video, whose transitions.mjs copies are otherwise
byte-identical (confirmed via diff) - one root cause, one fix, applied
everywhere it lives.

* fix(skills): avoid duration helper file race
2026-07-04 14:08:18 -07:00

37 lines
1.6 KiB
JavaScript

// pad-frame-duration.mjs — keeps a frame's own #root/clip data-duration in
// sync with the padded index.html wrapper duration transitions.mjs computes.
//
// The frame's OWN internal file declares its #root/clip data-duration to the
// STORYBOARD's content-only length (frame-worker.md: duration is "fixed
// upstream"). When an outgoing transition pads the index.html WRAPPER's
// data-duration to cover the transition tail, the frame's own internal
// duration is left short — the render engine clip-gates the sub-composition's
// visible content at that shorter value, so content vanishes abruptly at
// content-end instead of fading gracefully through the wrapper's extended
// fade-out tween. Pad the frame's own file to match so both durations agree.
import { readFileSync, writeFileSync } from "node:fs";
import { resolve } from "node:path";
export function padFrameInternalDuration(hyperframesDir, frameSrc, frameId, newDuration) {
const framePath = resolve(hyperframesDir, frameSrc);
let html;
try {
html = readFileSync(framePath, "utf8");
} catch (err) {
if (err?.code === "ENOENT") return;
throw err;
}
const tagRe = /<[a-z][\w:-]*\s[^<>]*?>/gi;
let m;
while ((m = tagRe.exec(html)) !== null) {
const tag = m[0];
if (!tag.includes(`data-composition-id="${frameId}"`)) continue;
if (!/data-duration="[\d.]+"/.test(tag)) continue;
const newTag = tag.replace(/data-duration="[\d.]+"/, `data-duration="${newDuration}"`);
if (newTag === tag) return;
writeFileSync(framePath, html.slice(0, m.index) + newTag + html.slice(m.index + tag.length));
return;
}
}