demowright 2.1.0 → 2.2.0

package/dist/video-script.d.mts

@@ -10,6 +10,9 @@ interface TitleStep {
   kind: "title";
   text: string;
   subtitle?: string;
+  /** Optional TTS narration read aloud over the card. When set, card
+   *  duration becomes max(durationMs, narration audio length). */
+  narration?: string;
   durationMs: number;
   background?: string;
 }
@@ -27,6 +30,9 @@ interface OutroStep {
   kind: "outro";
   text: string;
   subtitle?: string;
+  /** Optional TTS narration read aloud over the card. When set, card
+   *  duration becomes max(durationMs, narration audio length). */
+  narration?: string;
   durationMs: number;
   background?: string;
 }
@@ -53,6 +59,8 @@ interface VideoScriptResult {
 }
 interface TitleOptions {
   subtitle?: string;
+  /** TTS narration read aloud over the card overlay. Duration auto-extends to fit. */
+  narration?: string;
   durationMs?: number;
   /** CSS background — default: radial gradient */
   background?: string;
@@ -60,6 +68,8 @@ interface TitleOptions {
 interface OutroOptions {
   text?: string;
   subtitle?: string;
+  /** TTS narration read aloud over the card overlay. Duration auto-extends to fit. */
+  narration?: string;
   durationMs?: number;
   background?: string;
 }
@@ -89,7 +99,7 @@ declare class VideoScriptImpl {
   private static ttsCache;
   /**
    * Add a title card — full-screen overlay with text + optional subtitle.
-   * No TTS narration by default (silent title card).
+   * Pass `narration` in opts to have TTS voiceover during the card.
    */
   title(text: string, opts?: TitleOptions): this;
   /**
@@ -104,6 +114,7 @@ declare class VideoScriptImpl {
   transition(type?: TransitionType, durationMs?: number): this;
   /**
    * Add an outro card — full-screen overlay, similar to title.
+   * Pass `narration` in opts to have TTS voiceover during the card.
    */
   outro(opts?: OutroOptions): this;
   /**

package/dist/video-script.mjs

@@ -267,13 +267,14 @@ var init_video_script = __esmMin((() => {
 		static ttsCache = /* @__PURE__ */ new Map();
 		/**
 		* Add a title card — full-screen overlay with text + optional subtitle.
-		* No TTS narration by default (silent title card).
+		* Pass `narration` in opts to have TTS voiceover during the card.
 		*/
 		title(text, opts) {
 			this.steps.push({
 				kind: "title",
 				text,
 				subtitle: opts?.subtitle,
+				narration: opts?.narration,
 				durationMs: opts?.durationMs ?? 4e3,
 				background: opts?.background
 			});
@@ -305,12 +306,14 @@ var init_video_script = __esmMin((() => {
 		}
 		/**
 		* Add an outro card — full-screen overlay, similar to title.
+		* Pass `narration` in opts to have TTS voiceover during the card.
 		*/
 		outro(opts) {
 			this.steps.push({
 				kind: "outro",
 				text: opts?.text ?? "Thanks for watching!",
 				subtitle: opts?.subtitle,
+				narration: opts?.narration,
 				durationMs: opts?.durationMs ?? 4e3,
 				background: opts?.background
 			});
@@ -326,11 +329,20 @@ var init_video_script = __esmMin((() => {
 			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 ttsSteps = [];
+			let segIdx2 = 0;
+			for (let i = 0; i < this.steps.length; i++) {
+				const s = this.steps[i];
+				if (s.kind === "segment") ttsSteps.push({
+					id: `step-${segIdx2++}`,
+					text: s.text
+				});
+				else if ((s.kind === "title" || s.kind === "outro") && s.narration) ttsSteps.push({
+					id: `card-${i}`,
+					text: s.narration
+				});
+			}
+			const results = await Promise.allSettled(ttsSteps.map(async (step) => {
 				const cached = VideoScriptImpl.ttsCache.get(step.text);
 				if (cached) return {
 					id: step.id,
@@ -352,7 +364,7 @@ var init_video_script = __esmMin((() => {
 						durationMs: r.value.durationMs
 					};
 					this.prepared.set(r.value.id, seg);
-					const step = segmentSteps[idx];
+					const step = ttsSteps[idx];
 					if (step) VideoScriptImpl.ttsCache.set(step.text, seg);
 				}
 				idx++;
@@ -450,14 +462,28 @@ var init_video_script = __esmMin((() => {
 				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);
+					const cardTts = step.narration ? this.prepared.get(`card-${i}`) : void 0;
+					const effectiveDuration = cardTts ? Math.max(step.durationMs, cardTts.durationMs + 500) : step.durationMs;
+					if (active) showCard(page, step.text, step.subtitle, effectiveDuration, bg).catch(() => {});
+					if (active && cardTts) {
+						const offsetMs = Date.now() - planStartMs;
+						audioSegments.push({
+							offsetMs,
+							wavBuf: cardTts.wavBuf
+						});
+						storeAudioSegment(page, {
+							timestampMs: Date.now(),
+							wavBuf: cardTts.wavBuf
+						});
+						showCaption(page, step.narration, cardTts.durationMs).catch(() => {});
+					}
+					await page.waitForTimeout(effectiveDuration);
 					timeline.push({
 						id: stepIds[i],
 						kind: step.kind,
-						text: step.text,
+						text: step.narration ?? step.text,
 						startMs: stepStartMs - planStartMs,
-						durationMs: step.durationMs,
+						durationMs: effectiveDuration,
 						actionMs: 0,
 						overrunMs: 0
 					});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demowright",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Playwright video production plugin — cursor overlay, keystroke badges, TTS narration, and narration-driven video scripts for test recordings",
   "license": "MIT",
   "repository": {