demowright 0.1.0

package/dist/video-script.mjs

@@ -0,0 +1,529 @@
+import { n as __exportAll, t as __esmMin } from "./chunk-C0p4GxOx.mjs";
+import { a as getTtsProvider, d as storeRenderJob, n as getGlobalOutputDir, o as init_hud_registry, r as getGlobalTtsProvider, s as isHudActive, u as storeAudioSegment } from "./hud-registry-CptkyV32.mjs";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+//#region src/video-script.ts
+/**
+* Video script — narration-driven video production for demowright.
+*
+* Extends the narration plan pattern with title cards, transitions,
+* auto-generated SRT subtitles, chapter markers, and direct MP4 render.
+*
+* ```ts
+* const script = createVideoScript()
+*   .title("My Product Tour")
+*   .segment("Welcome to the dashboard", async (pace) => {
+*     await page.goto("/dashboard");
+*     await pace();
+*   })
+*   .transition("fade", 500)
+*   .segment("Let's fill the form", async (pace) => {
+*     await clickEl(page, "#name");
+*     await pace();
+*     await typeKeys(page, "Alice");
+*   })
+*   .outro({ text: "Thanks for watching!" })
+*
+* const result = await script.render(page);
+* // result.mp4Path, result.srtPath, result.timeline
+* ```
+*/
+var video_script_exports = /* @__PURE__ */ __exportAll({
+	buildFfmpegCommand: () => buildFfmpegCommand,
+	createVideoScript: () => createVideoScript
+});
+async function fetchTtsAudio(text, provider) {
+	if (typeof provider === "string") {
+		const url = provider.replace(/%s/g, encodeURIComponent(text));
+		const res = await fetch(url);
+		if (!res.ok) throw new Error(`TTS fetch ${res.status}`);
+		return Buffer.from(await res.arrayBuffer());
+	}
+	const result = await provider(text);
+	return Buffer.isBuffer(result) ? result : Buffer.from(result);
+}
+function parseWavDuration(wavBuf) {
+	const dataOffset = wavBuf.indexOf("data") + 8;
+	if (dataOffset < 8) return 0;
+	const sampleRate = wavBuf.readUInt32LE(24);
+	const channels = wavBuf.readUInt16LE(22);
+	return wavBuf.subarray(dataOffset).length / 2 / channels / sampleRate * 1e3;
+}
+function parseWav(wavBuf) {
+	const dataOffset = wavBuf.indexOf("data") + 8;
+	if (dataOffset < 8) throw new Error("Invalid WAV");
+	const sampleRate = wavBuf.readUInt32LE(24);
+	const channels = wavBuf.readUInt16LE(22);
+	const pcmData = wavBuf.subarray(dataOffset);
+	const sampleCount = pcmData.length / 2;
+	const float32 = new Float32Array(sampleCount);
+	for (let i = 0; i < sampleCount; i++) float32[i] = pcmData.readInt16LE(i * 2) / 32768;
+	return {
+		float32,
+		sampleRate,
+		channels,
+		sampleCount,
+		durationMs: sampleCount / channels / sampleRate * 1e3
+	};
+}
+async function showCard(page, text, subtitle, durationMs, background) {
+	await page.evaluate(([t, sub, d, bg]) => {
+		const overlay = document.createElement("div");
+		overlay.id = "qa-vs-card";
+		overlay.style.cssText = [
+			"position:fixed",
+			"inset:0",
+			`background:${bg}`,
+			"display:flex",
+			"flex-direction:column",
+			"align-items:center",
+			"justify-content:center",
+			"z-index:2147483646",
+			"pointer-events:none",
+			`animation:qa-vs-card-anim ${d}ms ease-in-out forwards`
+		].join(";");
+		const h = document.createElement("div");
+		h.textContent = t;
+		h.style.cssText = "font-family:'Segoe UI',system-ui,sans-serif;font-size:48px;font-weight:800;color:#fff;text-align:center;max-width:80vw;line-height:1.2;text-shadow:0 2px 20px rgba(0,0,0,0.5);";
+		overlay.appendChild(h);
+		if (sub) {
+			const s = document.createElement("div");
+			s.textContent = sub;
+			s.style.cssText = "font-family:'Segoe UI',system-ui,sans-serif;font-size:22px;font-weight:400;color:rgba(255,255,255,0.7);margin-top:16px;text-align:center;max-width:70vw;";
+			overlay.appendChild(s);
+		}
+		if (!document.querySelector("#qa-vs-card-style")) {
+			const style = document.createElement("style");
+			style.id = "qa-vs-card-style";
+			style.textContent = `
+          @keyframes qa-vs-card-anim {
+            0%   { opacity: 0; }
+            10%  { opacity: 1; }
+            85%  { opacity: 1; }
+            100% { opacity: 0; }
+          }
+        `;
+			document.head.appendChild(style);
+		}
+		document.body.appendChild(overlay);
+		setTimeout(() => overlay.remove(), d);
+	}, [
+		text,
+		subtitle,
+		durationMs,
+		background
+	]);
+}
+async function showCaption(page, text, durationMs) {
+	await page.evaluate(([t, d]) => {
+		const el = document.createElement("div");
+		el.textContent = t;
+		el.style.cssText = [
+			"position:fixed",
+			"bottom:60px",
+			"left:50%",
+			"transform:translateX(-50%)",
+			"background:rgba(0,0,0,0.8)",
+			"color:#fff",
+			"font-family:system-ui,sans-serif",
+			"font-size:18px",
+			"padding:10px 24px",
+			"border-radius:8px",
+			"z-index:2147483647",
+			"pointer-events:none",
+			"white-space:nowrap",
+			"max-width:90vw",
+			"text-align:center",
+			`animation:qa-sub-fade ${d}ms ease-out forwards`
+		].join(";");
+		if (!document.querySelector("#qa-sub-style")) {
+			const style = document.createElement("style");
+			style.id = "qa-sub-style";
+			style.textContent = `
+          @keyframes qa-sub-fade {
+            0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
+            8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
+            85%  { opacity: 1; transform: translateX(-50%) translateY(0); }
+            100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+          }
+        `;
+			document.head.appendChild(style);
+		}
+		document.body.appendChild(el);
+		setTimeout(() => el.remove(), d);
+	}, [text, durationMs]);
+}
+function formatSrtTimestamp(ms) {
+	const totalSec = Math.floor(ms / 1e3);
+	const h = Math.floor(totalSec / 3600);
+	const m = Math.floor(totalSec % 3600 / 60);
+	const s = totalSec % 60;
+	const millis = Math.floor(ms % 1e3);
+	return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")},${String(millis).padStart(3, "0")}`;
+}
+function generateSrt(timeline) {
+	return timeline.filter((e) => e.kind === "segment" || e.kind === "title" || e.kind === "outro").map((entry, i) => {
+		const start = formatSrtTimestamp(entry.startMs);
+		const end = formatSrtTimestamp(entry.startMs + entry.durationMs);
+		return `${i + 1}\n${start} --> ${end}\n${entry.text}\n`;
+	}).join("\n");
+}
+function generateChapters(timeline) {
+	return timeline.filter((e) => e.kind === "segment" || e.kind === "title" || e.kind === "outro").map((entry) => {
+		(entry.startMs / 1e3).toFixed(3);
+		((entry.startMs + entry.durationMs) / 1e3).toFixed(3);
+		return `[CHAPTER]\nTIMEBASE=1/1000\nSTART=${Math.round(entry.startMs)}\nEND=${Math.round(entry.startMs + entry.durationMs)}\ntitle=${entry.text.slice(0, 80)}`;
+	}).join("\n\n");
+}
+/**
+* Build a complete ffmpeg command that:
+* 1. Muxes video + audio
+* 2. Applies fade transitions at the correct offsets
+* 3. Burns in SRT subtitles
+* 4. Embeds chapter metadata
+*/
+function buildFfmpegCommand(videoPath, wavPath, srtPath, chaptersPath, mp4Path, timeline) {
+	const filters = [];
+	const transitions = timeline.filter((e) => e.kind === "transition");
+	for (const t of transitions) {
+		const startSec = (t.startMs / 1e3).toFixed(3);
+		const durSec = (t.durationMs / 1e3).toFixed(3);
+		const endSec = ((t.startMs + t.durationMs) / 1e3).toFixed(3);
+		filters.push(`fade=t=out:st=${startSec}:d=${durSec}`);
+		filters.push(`fade=t=in:st=${endSec}:d=${durSec}`);
+	}
+	const escapedSrt = srtPath.replace(/\\/g, "/").replace(/:/g, "\\\\:").replace(/'/g, "'\\''");
+	filters.push(`subtitles='${escapedSrt}'`);
+	const vf = filters.join(",");
+	return [
+		"ffmpeg -y",
+		`-i "${videoPath}"`,
+		`-i "${wavPath}"`,
+		`-i "${chaptersPath}"`,
+		"-map_metadata 2",
+		`-vf "${vf}"`,
+		"-c:v libx264 -preset fast",
+		"-c:a aac",
+		"-shortest",
+		`"${mp4Path}"`
+	].join(" \\\n  ");
+}
+function buildWavTrack(segments, totalMs) {
+	if (segments.length === 0) return null;
+	const anySeg = segments[0];
+	const { sampleRate } = parseWav(anySeg.wavBuf);
+	const channels = 2;
+	const totalSamples = Math.ceil(totalMs / 1e3 * sampleRate * channels);
+	const trackBuffer = new Float32Array(totalSamples);
+	for (const seg of segments) {
+		const parsed = parseWav(seg.wavBuf);
+		const offsetSamples = Math.floor(seg.offsetMs / 1e3 * sampleRate) * channels;
+		const stereo = parsed.channels === 1 ? (() => {
+			const s = new Float32Array(parsed.sampleCount * 2);
+			for (let i = 0; i < parsed.sampleCount; i++) {
+				s[i * 2] = parsed.float32[i];
+				s[i * 2 + 1] = parsed.float32[i];
+			}
+			return s;
+		})() : parsed.float32;
+		for (let i = 0; i < stereo.length && offsetSamples + i < trackBuffer.length; i++) trackBuffer[offsetSamples + i] += stereo[i];
+	}
+	const int16 = new Int16Array(trackBuffer.length);
+	for (let i = 0; i < trackBuffer.length; i++) {
+		const s = Math.max(-1, Math.min(1, trackBuffer[i]));
+		int16[i] = s < 0 ? s * 32768 : s * 32767;
+	}
+	const dataBytes = int16.length * 2;
+	const buffer = Buffer.alloc(44 + dataBytes);
+	buffer.write("RIFF", 0);
+	buffer.writeUInt32LE(36 + dataBytes, 4);
+	buffer.write("WAVE", 8);
+	buffer.write("fmt ", 12);
+	buffer.writeUInt32LE(16, 16);
+	buffer.writeUInt16LE(1, 20);
+	buffer.writeUInt16LE(channels, 22);
+	buffer.writeUInt32LE(sampleRate, 24);
+	buffer.writeUInt32LE(sampleRate * channels * 2, 28);
+	buffer.writeUInt16LE(channels * 2, 32);
+	buffer.writeUInt16LE(16, 34);
+	buffer.write("data", 36);
+	buffer.writeUInt32LE(dataBytes, 40);
+	Buffer.from(int16.buffer).copy(buffer, 44);
+	return buffer;
+}
+/**
+* Create a video script — narration-driven video production with title cards,
+* transitions, auto-subtitles, and chapter markers.
+*/
+function createVideoScript() {
+	return new VideoScriptImpl();
+}
+var DEFAULT_BG, VideoScriptImpl;
+var init_video_script = __esmMin((() => {
+	init_hud_registry();
+	DEFAULT_BG = "radial-gradient(ellipse at 50% 40%, #1a1a3e 0%, #0b0b1a 100%)";
+	VideoScriptImpl = class VideoScriptImpl {
+		steps = [];
+		counter = 0;
+		prepared = /* @__PURE__ */ new Map();
+		static ttsCache = /* @__PURE__ */ new Map();
+		/**
+		* Add a title card — full-screen overlay with text + optional subtitle.
+		* No TTS narration by default (silent title card).
+		*/
+		title(text, opts) {
+			this.steps.push({
+				kind: "title",
+				text,
+				subtitle: opts?.subtitle,
+				durationMs: opts?.durationMs ?? 4e3,
+				background: opts?.background
+			});
+			return this;
+		}
+		/**
+		* Add a narrated segment — TTS audio drives timing, callback runs paced actions.
+		* Same as NarrationPlan's `.annotate()` but named `.segment()` for clarity.
+		*/
+		segment(text, action) {
+			this.steps.push({
+				kind: "segment",
+				text,
+				action
+			});
+			return this;
+		}
+		/**
+		* Add a transition between segments.
+		* Applied as an ffmpeg filter during render.
+		*/
+		transition(type = "fade", durationMs = 500) {
+			this.steps.push({
+				kind: "transition",
+				type,
+				durationMs
+			});
+			return this;
+		}
+		/**
+		* Add an outro card — full-screen overlay, similar to title.
+		*/
+		outro(opts) {
+			this.steps.push({
+				kind: "outro",
+				text: opts?.text ?? "Thanks for watching!",
+				subtitle: opts?.subtitle,
+				durationMs: opts?.durationMs ?? 4e3,
+				background: opts?.background
+			});
+			return this;
+		}
+		/**
+		* Pre-generate all TTS audio for segment steps.
+		* Call before page.goto() so video recording doesn't include TTS wait time.
+		*/
+		async prepare(pageOrProvider) {
+			let provider;
+			if (!pageOrProvider) provider = getGlobalTtsProvider();
+			else if (typeof pageOrProvider === "function" || typeof pageOrProvider === "string") provider = pageOrProvider;
+			else provider = getTtsProvider(pageOrProvider);
+			if (!provider) return;
+			const segmentSteps = this.steps.filter((s) => s.kind === "segment").map((s, i) => ({
+				...s,
+				id: `step-${i}`
+			}));
+			const results = await Promise.allSettled(segmentSteps.map(async (step) => {
+				const cached = VideoScriptImpl.ttsCache.get(step.text);
+				if (cached) return {
+					id: step.id,
+					...cached
+				};
+				const wavBuf = await fetchTtsAudio(step.text, provider);
+				const durationMs = parseWavDuration(wavBuf);
+				return {
+					id: step.id,
+					wavBuf,
+					durationMs
+				};
+			}));
+			let idx = 0;
+			for (const r of results) {
+				if (r.status === "fulfilled") {
+					const seg = {
+						wavBuf: r.value.wavBuf,
+						durationMs: r.value.durationMs
+					};
+					this.prepared.set(r.value.id, seg);
+					const step = segmentSteps[idx];
+					if (step) VideoScriptImpl.ttsCache.set(step.text, seg);
+				}
+				idx++;
+			}
+		}
+		/**
+		* Execute the script steps — run each step timed to its narration duration.
+		* Returns timeline + totalMs. Audio segments are stored in the registry
+		* for deferred track building at context close (setup.ts).
+		*/
+		async run(page) {
+			const { timeline, totalMs, audioSegments } = await this.executeSteps(page);
+			return {
+				timeline,
+				totalMs,
+				srtContent: generateSrt(timeline),
+				chaptersContent: generateChapters(timeline)
+			};
+		}
+		/**
+		* Execute the script and produce final output files:
+		* WAV audio track, SRT subtitles, chapter metadata.
+		* Audio mux with video happens at context close (setup.ts).
+		*/
+		async render(page, opts) {
+			const { timeline, totalMs, audioSegments } = await this.executeSteps(page);
+			const srtContent = generateSrt(timeline);
+			const chaptersContent = generateChapters(timeline);
+			const outputDir = opts?.outputDir ?? join(process.cwd(), getGlobalOutputDir());
+			const tmpDir = join(outputDir, "tmp");
+			const baseName = opts?.baseName ?? `demowright-video-${Date.now()}`;
+			mkdirSync(outputDir, { recursive: true });
+			mkdirSync(tmpDir, { recursive: true });
+			const wavPath = join(tmpDir, `${baseName}.wav`);
+			const srtPath = join(tmpDir, `${baseName}.srt`);
+			const chaptersPath = join(tmpDir, `${baseName}-chapters.txt`);
+			const mp4Path = join(outputDir, `${baseName}.mp4`);
+			writeFileSync(srtPath, srtContent);
+			if (chaptersContent) writeFileSync(chaptersPath, chaptersContent);
+			const wavBuf = buildWavTrack(audioSegments, totalMs);
+			if (wavBuf) writeFileSync(wavPath, wavBuf);
+			if (wavBuf) {
+				const job = {
+					wavPath,
+					srtPath,
+					chaptersPath,
+					mp4Path,
+					timeline: timeline.map((e) => ({
+						kind: e.kind,
+						type: e.kind === "transition" ? e.text.replace(/^\[|\]$/g, "") : void 0,
+						startMs: e.startMs,
+						durationMs: e.durationMs
+					})),
+					totalMs
+				};
+				storeRenderJob(page, job);
+				const cmd = buildFfmpegCommand("<video.webm>", wavPath, srtPath, chaptersPath, mp4Path, job.timeline);
+				console.log(`[demowright] Render files ready. After test completes, run:\n${cmd}`);
+				return {
+					timeline,
+					totalMs,
+					srtContent,
+					srtPath,
+					chaptersContent,
+					mp4Path: void 0,
+					wavPath,
+					ffmpegCommand: cmd
+				};
+			}
+			return {
+				timeline,
+				totalMs,
+				srtContent,
+				srtPath,
+				chaptersContent
+			};
+		}
+		async executeSteps(page) {
+			const active = await isHudActive(page);
+			const provider = getTtsProvider(page);
+			if (this.prepared.size === 0 && active && provider) await this.prepare(page);
+			let segIdx = 0;
+			const stepIds = this.steps.map((s) => {
+				if (s.kind === "segment") return `step-${segIdx++}`;
+				return `step-${s.kind}-${this.steps.indexOf(s)}`;
+			});
+			const timeline = [];
+			const audioSegments = [];
+			const planStartMs = Date.now();
+			let segmentIndex = 0;
+			for (let i = 0; i < this.steps.length; i++) {
+				const step = this.steps[i];
+				const stepStartMs = Date.now();
+				if (step.kind === "title" || step.kind === "outro") {
+					const bg = step.background ?? DEFAULT_BG;
+					if (active) showCard(page, step.text, step.subtitle, step.durationMs, bg).catch(() => {});
+					await page.waitForTimeout(step.durationMs);
+					timeline.push({
+						id: stepIds[i],
+						kind: step.kind,
+						text: step.text,
+						startMs: stepStartMs - planStartMs,
+						durationMs: step.durationMs,
+						actionMs: 0,
+						overrunMs: 0
+					});
+				} else if (step.kind === "transition") {
+					if (active) await page.waitForTimeout(step.durationMs);
+					timeline.push({
+						id: stepIds[i],
+						kind: "transition",
+						text: `[${step.type}]`,
+						startMs: stepStartMs - planStartMs,
+						durationMs: step.durationMs,
+						actionMs: 0,
+						overrunMs: 0
+					});
+				} else if (step.kind === "segment") {
+					const segId = `step-${segmentIndex}`;
+					segmentIndex++;
+					const segment = this.prepared.get(segId);
+					const targetMs = segment?.durationMs ?? 3e3;
+					if (active) showCaption(page, step.text, targetMs).catch(() => {});
+					if (active && segment) {
+						const offsetMs = Date.now() - planStartMs;
+						audioSegments.push({
+							offsetMs,
+							wavBuf: segment.wavBuf
+						});
+						storeAudioSegment(page, {
+							timestampMs: Date.now(),
+							wavBuf: segment.wavBuf
+						});
+					}
+					let paceCallCount = 0;
+					const paceEstimate = 8;
+					const pace = async () => {
+						paceCallCount++;
+						const remaining = targetMs - (Date.now() - stepStartMs);
+						const remainingPaces = Math.max(1, paceEstimate - paceCallCount);
+						const delay = Math.max(50, remaining / remainingPaces);
+						if (remaining > 50 && active) await page.waitForTimeout(Math.min(delay, remaining));
+					};
+					const actionStartMs = Date.now();
+					await step.action?.(pace);
+					const actionMs = Date.now() - actionStartMs;
+					const remaining = targetMs - (Date.now() - stepStartMs);
+					const overrunMs = Math.max(0, -remaining);
+					if (remaining > 50 && active) await page.waitForTimeout(remaining);
+					const actualDuration = Date.now() - stepStartMs;
+					timeline.push({
+						id: segId,
+						kind: "segment",
+						text: step.text,
+						startMs: stepStartMs - planStartMs,
+						durationMs: actualDuration,
+						actionMs,
+						overrunMs
+					});
+				}
+			}
+			return {
+				timeline,
+				totalMs: Date.now() - planStartMs,
+				audioSegments
+			};
+		}
+	};
+}));
+//#endregion
+init_video_script();
+export { buildFfmpegCommand, createVideoScript, video_script_exports as n, init_video_script as t };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "demowright",
+  "version": "0.1.0",
+  "description": "Playwright video production plugin — cursor overlay, keystroke badges, TTS narration, and narration-driven video scripts for test recordings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/snomiao/demowright.git"
+  },
+  "files": [
+    "dist",
+    "register.cjs",
+    "media"
+  ],
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./register": "./register.cjs",
+    "./config": {
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.mts"
+    },
+    "./helpers": {
+      "import": "./dist/helpers.mjs",
+      "types": "./dist/helpers.d.mts"
+    },
+    "./auto-annotate": {
+      "import": "./dist/auto-annotate.mjs",
+      "types": "./dist/auto-annotate.d.mts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "bunx playwright test",
+    "demo": "bunx playwright test tests/demo.spec.ts --headed",
+    "prepublishOnly": "tsdown"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "@types/node": "^25.5.2",
+    "@typescript/native-preview": "^7.0.0-dev.20260405.1",
+    "semantic-release": "^25.0.3",
+    "tsdown": "^0.21.7"
+  },
+  "peerDependencies": {
+    "@playwright/test": ">=1.40.0"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ]
+  }
+}