mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
3e801697f7
The release cuts read as static screen recordings: one 6s cursor glide that then vanished, a locked-off camera, metronomic flat card fades. And two renderer defects were silently wrecking every cut: - @hyperframes/producer floated (^0.7.36, no lockfile — image builds get whatever is latest): 0.7.60 fails EVERY render with "Cannot access 'rt' before initialization". Pinned 0.7.36 exact and committed package-lock.json so sidecar builds are reproducible. - the producer's per-clip visibility scheduler runs on a clock that lags ~50% behind the encoded timeline on a 40s cut — the final frame showed the authored ~18s state, so the tail scenes (bell card, toast, outro) were silently missing from the MP4. This, not authoring, is why rendered cuts kept losing their late scenes. Fix: clip windows are for structural layers only (hero, panel frame, status); every beat rides base-hidden styles + delayed CSS animations, which run on the true clock. Verified frame-by-frame: all four cards, stats, toast, and outro now land exactly on schedule in both cuts. Craft, made reusable in the kit instead of per-composition heroics: - kit.js choreographCursor: data-waypoints="t x y [click]; ..." generates a multi-leg eased path with fade in/out, an idle-hand sway, and click rings + glyph press dips — the cursor behaves like a hand, never pops in, freezes, or blinks out - kit.js choreographCamera: data-shots="t x y scale; ..." — push-ins toward each beat's focal point, pull-backs for reveals, settle to end - release-0.25.0 both cuts re-choreographed: the cursor is the CEO's hand (settle on the intake while it types, ONE submit click, witness each card completing, acknowledge the toast, exit off-frame); the camera lives on every beat; springy card entrances replace flat fades - motion/README.md gains 'Cinematography & rhythm' (shot-list-first, no locked-off camera, verify motion with frame PAIRS) + the clip-window rule; kit/README.md documents both engines; the dev video prompt block carries the craft bar Verified end to end through the real sidecar: both cuts render green, 32-frame strips read visually — cursor travels and clicks on schedule, camera moves, every scene present. motion pnpm test 15/15. Co-authored-by: Renn F <rennf93@users.noreply.github.com>
113 lines
4.7 KiB
JavaScript
113 lines
4.7 KiB
JavaScript
import { readFileSync, existsSync } from "node:fs";
|
|
import { dirname, join } from "node:path";
|
|
import { fileURLToPath } from "node:url";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
// HTML-structure smoke test for the RoboCo v0.25.0 release composition.
|
|
// Extends the panel-demo register: panel chrome, typing reveal, four feature cards
|
|
// with progress -> completed pill flips, cursor, stats overlay, toast,
|
|
// outro, offline constraint, and the captions.json schema/limits.
|
|
|
|
const here = dirname(fileURLToPath(import.meta.url));
|
|
const dir = here;
|
|
const read = (name) => readFileSync(join(dir, name), "utf8");
|
|
|
|
const orientations = [
|
|
{ file: "vertical.html", height: "1920" },
|
|
{ file: "square.html", height: "1080" },
|
|
];
|
|
|
|
describe("release-0.25.0 composition", () => {
|
|
it("ships props.js (default preview values, sidecar overwrites at render)", () => {
|
|
expect(existsSync(join(dir, "props.js"))).toBe(true);
|
|
const src = read("props.js");
|
|
expect(src).toContain("window.__PROPS__");
|
|
expect(src).toContain("window.__ORIENTATION__");
|
|
expect(src).toContain("introText");
|
|
expect(src).toContain("toastTitle");
|
|
expect(src).toContain("toastBody");
|
|
expect(src).not.toMatch(/—/);
|
|
});
|
|
|
|
it.each(orientations)("$file parses with correct dimensions and wiring", ({ file, height }) => {
|
|
const html = read(file);
|
|
|
|
expect(html).toContain('data-width="1080"');
|
|
expect(html).toContain(`data-height="${height}"`);
|
|
expect(html).toMatch(/data-duration="40"/);
|
|
expect(html).toMatch(/data-fps="30"/);
|
|
|
|
const propsIdx = html.indexOf('<script src="props.js"></script>');
|
|
const kitJsIdx = html.indexOf('<script src="../../kit/kit.js"></script>');
|
|
const inlineIdx = html.indexOf("window.__timelines");
|
|
expect(propsIdx).toBeGreaterThan(-1);
|
|
expect(kitJsIdx).toBeGreaterThan(propsIdx);
|
|
expect(inlineIdx).toBeGreaterThan(kitJsIdx);
|
|
|
|
expect(html).toContain('href="../../kit/kit.css"');
|
|
expect(html).toMatch(/class="[^"]*clip[^"]*"/);
|
|
|
|
expect(html).toContain("pk-frame");
|
|
expect(html).toContain("pk-frame__sidebar");
|
|
expect(html).toContain("pk-frame__topbar");
|
|
|
|
expect(html).toContain('id="typeIntro"');
|
|
expect(html).toContain("pk-caret");
|
|
expect(html).toContain("typeReveal");
|
|
|
|
const cardCount = (html.match(/class="pk-card"/g) || []).length;
|
|
const progressCount = (html.match(/pk-pill--progress/g) || []).length;
|
|
const completedCount = (html.match(/pk-pill--completed/g) || []).length;
|
|
expect(cardCount).toBe(4);
|
|
expect(progressCount).toBe(4);
|
|
expect(completedCount).toBe(4);
|
|
|
|
expect(html).toContain("v0.25.0");
|
|
expect(html).toContain("Env ladder");
|
|
expect(html).toContain("Collision map");
|
|
expect(html).toContain("Metrics donut");
|
|
expect(html).toContain("Notification bell");
|
|
|
|
// Choreographed cursor: multi-waypoint path with at least one click
|
|
// beat (rings are generated at runtime by kit.js, not static HTML),
|
|
// and a camera that moves — a locked-off frame is an automatic bounce.
|
|
expect(html).toContain("pk-cursor");
|
|
const waypoints = html.match(/data-waypoints="([^"]+)"/);
|
|
expect(waypoints).not.toBeNull();
|
|
expect(waypoints[1].split(";").length).toBeGreaterThanOrEqual(6);
|
|
expect(waypoints[1]).toContain("click");
|
|
const shots = html.match(/data-shots="([^"]+)"/);
|
|
expect(shots).not.toBeNull();
|
|
expect(shots[1].split(";").length).toBeGreaterThanOrEqual(4);
|
|
expect(html).toContain("choreographAllCursors");
|
|
expect(html).toContain("choreographAllCameras");
|
|
|
|
expect(html).toContain("pk-toast");
|
|
expect(html).toContain('id="toastTitle"');
|
|
expect(html).toContain('id="toastBody"');
|
|
|
|
expect(html).toContain("pk-outro");
|
|
expect(html).toContain("roboco.tech");
|
|
|
|
expect(html).not.toMatch(/<script[^>]+src="https?:\/\//);
|
|
expect(html).not.toMatch(/href="https?:\/\//);
|
|
expect(html).not.toMatch(/—/);
|
|
});
|
|
|
|
it("ships captions.json within X and TikTok platform limits", () => {
|
|
expect(existsSync(join(dir, "captions.json"))).toBe(true);
|
|
const captions = JSON.parse(read("captions.json"));
|
|
|
|
expect(captions.composition_id).toBe("release-0.25.0");
|
|
expect(captions.platforms.x.char_count).toBe(captions.platforms.x.caption.length);
|
|
expect(captions.platforms.x.char_count).toBeLessThanOrEqual(captions.platforms.x.limit);
|
|
expect(captions.platforms.x.within_limit).toBe(true);
|
|
expect(captions.platforms.tiktok.char_count).toBe(captions.platforms.tiktok.caption.length);
|
|
expect(captions.platforms.tiktok.char_count).toBeLessThanOrEqual(captions.platforms.tiktok.limit);
|
|
expect(captions.platforms.tiktok.within_limit).toBe(true);
|
|
|
|
expect(captions.platforms.x.caption).not.toMatch(/—/);
|
|
expect(captions.platforms.tiktok.caption).not.toMatch(/—/);
|
|
});
|
|
});
|