@omnimedia/omnitool 1.1.0-8 → 1.1.0-80

package/x/demo/demo.css

@@ -1,11 +1,16 @@
 
-@layer vars, basics, page;
+@layer vars, basics, page, demo;
 
 @layer vars {
 	:root {
-		--link: cyan;
-		--color: #fffa;
-		--background: #111;
+		--ink: #f2f4f8;
+		--muted: #9fb0c3;
+		--surface: #0f141c;
+		--panel: #121a26;
+		--accent: #2cffd7;
+		--accent-2: #ff9a3c;
+		--border: color-mix(in oklab, #ffffff 10%, transparent);
+		--shadow: 0 20px 60px #00000066;
 	}
 }
 
@@ -20,16 +25,20 @@
 @layer page {
 	html {
 		font-size: 10px;
-		color: var(--color);
-		background: var(--background);
+		color: var(--ink);
+		background:
+			radial-gradient(1200px 600px at 10% -10%, #1f314e 0%, transparent 60%),
+			radial-gradient(800px 500px at 90% -20%, #2a1f4e 0%, transparent 55%),
+			linear-gradient(160deg, #0a0f16 0%, #0b1018 45%, #0b0f14 100%);
+		font-family: "Space Grotesk", system-ui, sans-serif;
 	}
 
 	body {
-		padding: 2em;
+		padding: 3.2em;
 	}
 
 	.results {
-		margin-top: 1em;
+		margin-top: 2em;
 
 		display: flex;
 		flex-direction: column;
@@ -37,8 +46,10 @@
 
 		> div {
 			font-size: 1.5em;
-			border: 1px solid color-mix(in lch, transparent, var(--color) 20%);
+			border: 1px solid var(--border);
 			padding: 1em;
+			background: var(--panel);
+			box-shadow: var(--shadow);
 		}
 
 		canvas {
@@ -46,14 +57,233 @@
 		}
 	}
 
-	canvas {
-		width: 500px;
-		height: 300px;
+}
+
+@layer demo {
+	.hero {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 2em;
+		margin-bottom: 2.4em;
+	}
+
+	.hero h1 {
+		font-family: "Share Tech", system-ui, sans-serif;
+		font-size: 3.4em;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	.hero h1 small {
+		font-size: 0.5em;
+		color: var(--muted);
+	}
+
+	.hero p {
+		font-size: 1.4em;
+		color: var(--muted);
+		margin-top: 0.6em;
+		max-width: 60ch;
+	}
+
+	.demo-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.8em;
+		margin-bottom: 2.4em;
+	}
+
+	.demo-card {
+		background: linear-gradient(160deg, #111a25 0%, #0f1620 60%, #0d121a 100%);
+		border: 1px solid var(--border);
+		border-radius: 16px;
+		padding: 1.6em;
+		box-shadow: var(--shadow);
+		display: grid;
+		gap: 1.2em;
+	}
+
+	.demo-card h2 {
+		font-size: 1.8em;
+		letter-spacing: 0.03em;
+	}
+
+	.demo-card p {
+		color: var(--muted);
+		font-size: 1.2em;
+	}
+
+	.demo-controls {
+		display: grid;
+		gap: 0.8em;
+	}
+
+	.demo-progress {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		gap: 0.8em;
+		font-size: 1.1em;
+		color: var(--muted);
+	}
+
+	.demo-progress .status {
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		font-size: 0.9em;
+	}
+
+	progress.progress {
+		width: 100%;
+		height: 10px;
+		border-radius: 999px;
+		overflow: hidden;
+		background: #0b1118;
+		border: 1px solid var(--border);
+	}
+
+	progress.progress::-webkit-progress-bar {
+		background: #0b1118;
+	}
+
+	progress.progress::-webkit-progress-value {
+		background: linear-gradient(120deg, var(--accent), #4df1ff);
+	}
+
+	progress.progress::-moz-progress-bar {
+		background: linear-gradient(120deg, var(--accent), #4df1ff);
+	}
+
+	.demo-preview {
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		min-height: 160px;
+		background: #0b1118;
+		display: grid;
+		place-items: center;
+		overflow: hidden;
+	}
+
+	.demo-preview canvas {
+		width: 100%;
+		height: auto;
 	}
 
-	#filmstrip {
+	.filmstrip-controls,
+	.waveform-controls {
+		display: grid;
+		gap: 0.6em;
+		font-size: 1.1em;
+		color: var(--muted);
+	}
+
+	.filmstrip-controls input[type="range"],
+	.waveform-controls input[type="range"] {
+		width: 100%;
+	}
+
+	input[type="file"] {
+		background: #0b111a;
+		color: var(--ink);
+		border: 1px dashed #2b3b52;
+		border-radius: 10px;
+		padding: 0.8em;
+		font-size: 1.2em;
+	}
+
+	button {
+		background: linear-gradient(120deg, var(--accent), #4df1ff);
+		border: none;
+		color: #0a0f14;
+		font-weight: 600;
+		letter-spacing: 0.03em;
+		border-radius: 10px;
+		padding: 0.8em 1.2em;
+		cursor: pointer;
+		transition: transform 120ms ease, box-shadow 120ms ease;
+		box-shadow: 0 10px 20px #00ffd533;
+	}
+
+	button[data-action="export"] {
+		background: linear-gradient(120deg, var(--accent-2), #ffd479);
+		box-shadow: 0 10px 20px #ffb35a33;
+	}
+
+	button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		transform: none;
+		box-shadow: none;
+	}
+
+	button:not(:disabled):hover {
+		transform: translateY(-1px);
+	}
+
+	.filmstrip {
 		display: flex;
 		overflow-x: scroll;
+		gap: 0.4em;
+		padding: 0.4em 0;
+	}
+
+	.player {
+		margin-top: 1.2em;
+		display: grid;
+		gap: 0.8em;
 	}
-}
 
+	.player .timeline {
+		display: grid;
+		gap: 0.6em;
+	}
+
+	.player .track {
+		position: relative;
+		height: 10px;
+		border-radius: 999px;
+		background:
+			linear-gradient(90deg, #1e1e1e, #1a1a1a),
+			repeating-linear-gradient(90deg, #ffffff14 0 6px, transparent 6px 12px);
+		border: 1px solid #ffffff22;
+		overflow: hidden;
+	}
+
+	.player .playhead {
+		position: absolute;
+		left: 0%;
+		top: -6px;
+		width: 2px;
+		height: 22px;
+		background: #3cff9c;
+		box-shadow: 0 0 12px #3cff9c99;
+	}
+
+	.player .scrub {
+		width: 100%;
+	}
+
+	.player .timecode {
+		font-size: 1.2em;
+		letter-spacing: 0.06em;
+		color: #c7ffe3;
+	}
+
+	.player .controls {
+		display: flex;
+		gap: 0.8em;
+	}
+
+	.player-canvas {
+		border: 1px solid var(--border);
+		border-radius: 10px;
+		padding: 0.6em;
+		background: #0b1118;
+	}
+
+	canvas {
+		width: 100%;
+		height: auto;
+	}
+}

package/x/demo/routines/export-test.d.ts

@@ -0,0 +1,2 @@
+import { Omni, TimelineFile } from "../../timeline/index.js";
+export declare function exportTest(omni: Omni, timeline: TimelineFile, exportButton: HTMLButtonElement, onStatus?: (state: "running" | "done") => void): void;

package/x/demo/routines/export-test.js

@@ -0,0 +1,10 @@
+export function exportTest(omni, timeline, exportButton, onStatus) {
+    exportButton.addEventListener("click", () => {
+        onStatus?.("running");
+        omni.render(timeline).then(() => {
+            console.log("done");
+            onStatus?.("done");
+        });
+    });
+}
+//# sourceMappingURL=export-test.js.map

package/x/demo/routines/export-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-test.js","sourceRoot":"","sources":["../../../s/demo/routines/export-test.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CACzB,IAAU,EACV,QAAsB,EACtB,YAA+B,EAC/B,QAA8C;IAE9C,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC3C,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;YACnB,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;QACnB,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;AACH,CAAC"}

package/x/demo/routines/filmstrip-test.d.ts

@@ -1 +1 @@
-export declare function filmstripTest(file: File): Promise<void>;
+export declare function filmstripTest(file: File, root: HTMLElement): Promise<void>;

package/x/demo/routines/filmstrip-test.js

@@ -1,13 +1,14 @@
 import { Filmstrip } from "../../timeline/parts/filmstrip.js";
-export async function filmstripTest(file) {
-    const rangeSlider = document.querySelector(".range");
-    const rangeView = document.querySelector(".range-view");
-    const rangeSizeSlider = document.querySelector(".range-size");
-    const frequencySlider = document.querySelector(".frequency");
-    const frequencyView = document.querySelector(".frequency-view");
-    const container = document.querySelector("#filmstrip");
-    const FPS_10 = 1000 / 10 / 1000;
+export async function filmstripTest(file, root) {
+    const rangeSlider = root.querySelector(".range");
+    const rangeView = root.querySelector(".range-view");
+    const rangeSizeSlider = root.querySelector(".range-size");
+    const frequencySlider = root.querySelector(".frequency");
+    const frequencyView = root.querySelector(".frequency-view");
+    const container = root.querySelector(".filmstrip");
+    const FPS_10 = 1 / 10;
     let rangeSize = 0.5;
+    container.replaceChildren();
     const filmstrip = await Filmstrip.init(file, {
         onChange(tiles) {
             // Sort by time (optional, for clean ordering)
@@ -22,21 +23,23 @@ export async function filmstripTest(file) {
             fit: "fill"
         }
     });
-    rangeSizeSlider.addEventListener("change", () => {
+    rangeSizeSlider.oninput = () => {
         rangeSize = +rangeSizeSlider.value;
-        const [start, end] = [+rangeSlider.value, +rangeSlider.value + rangeSize];
+        const start = +rangeSlider.value;
+        const end = start + rangeSize;
         filmstrip.range = [start, end];
         rangeView.textContent = `visible time range: [${start}, ${end}]`;
-    });
-    rangeSlider.addEventListener("change", () => {
-        const [start, end] = [+rangeSlider.value, +rangeSlider.value + rangeSize];
+    };
+    rangeSlider.oninput = () => {
+        const start = +rangeSlider.value;
+        const end = start + rangeSize;
         filmstrip.range = [start, end];
         rangeView.textContent = `visible time range: [${start}, ${end}]`;
-    });
-    frequencySlider.addEventListener("change", () => {
-        filmstrip.frequency = 1000 / +frequencySlider.value / 1000;
+    };
+    frequencySlider.oninput = () => {
+        filmstrip.frequency = 1 / +frequencySlider.value;
         frequencyView.textContent = `frame every ${filmstrip.frequency.toFixed(3)} second (${frequencySlider.value} frames per second)`;
-    });
+    };
     filmstrip.range = [10, 10.5];
 }
 function createLabeledCanvas(time, canvas) {

package/x/demo/routines/filmstrip-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"filmstrip-test.js","sourceRoot":"","sources":["../../../s/demo/routines/filmstrip-test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"filmstrip-test.js","sourceRoot":"","sources":["../../../s/demo/routines/filmstrip-test.ts"],"names":[],"mappings":"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"}

package/x/demo/routines/load-video.d.ts

@@ -1 +1 @@
-export declare function loadVideo(url: string): Promise<ArrayBuffer>;
+export declare function loadVideo(url: string): Promise<Blob>;

package/x/demo/routines/load-video.js

@@ -1,6 +1,5 @@
 export async function loadVideo(url) {
     return fetch(url)
-        .then(response => response.bytes())
-        .then(bytes => bytes.buffer);
+        .then(response => response.blob());
 }
 //# sourceMappingURL=load-video.js.map

package/x/demo/routines/load-video.js.map

@@ -1 +1 @@
-{"version":3,"file":"load-video.js","sourceRoot":"","sources":["../../../s/demo/routines/load-video.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW;IAC1C,OAAO,KAAK,CAAC,GAAG,CAAC;SACf,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;SAClC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"load-video.js","sourceRoot":"","sources":["../../../s/demo/routines/load-video.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW;IAC1C,OAAO,KAAK,CAAC,GAAG,CAAC;SACf,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;AACpC,CAAC"}

package/x/demo/routines/playback-test.d.ts

@@ -0,0 +1,2 @@
+import { Omni, TimelineFile } from "../../timeline/index.js";
+export declare function playbackTest(timeline: TimelineFile, omni: Omni, root: HTMLElement): Promise<void>;

package/x/demo/routines/playback-test.js

@@ -0,0 +1,51 @@
+import { O } from "../../timeline/index.js";
+export async function playbackTest(timeline, omni, root) {
+    const playButton = root.querySelector(".play");
+    const stopButton = root.querySelector(".stop");
+    const scrub = root.querySelector(".scrub");
+    const playhead = root.querySelector(".playhead");
+    const timecode = root.querySelector(".timecode");
+    const canvasSlot = root.querySelector(".player-canvas");
+    const o = new O({ timeline });
+    const player = await omni.playback(timeline);
+    canvasSlot.replaceChildren(player.canvas);
+    playButton.disabled = false;
+    stopButton.disabled = false;
+    playButton.addEventListener("click", () => player.play());
+    stopButton.addEventListener("click", () => player.pause());
+    scrub.max = String(Math.ceil(player.duration));
+    let isScrubbing = false;
+    player.playback.onTick.on(() => setScrubState(player.currentTime, player.duration));
+    const updateTimecode = (currentMs, durationMs) => {
+        timecode.textContent = `${formatTime(currentMs)} / ${formatTime(durationMs)}`;
+    };
+    scrub.addEventListener("input", async () => {
+        isScrubbing = true;
+        const next = Math.max(0, Math.min(+scrub.value, player.duration));
+        updateTimecode(next, player.duration);
+        await player.seek(next);
+    });
+    scrub.addEventListener("change", async () => {
+        isScrubbing = false;
+        const next = Math.max(0, Math.min(+scrub.value, player.duration));
+        await player.seek(next);
+    });
+    const setScrubState = (timeMs, durationMs) => {
+        const clamped = Math.max(0, Math.min(timeMs, durationMs));
+        if (!isScrubbing)
+            scrub.value = String(Math.round(clamped));
+        const progress = durationMs ? (clamped / durationMs) * 100 : 0;
+        playhead.style.left = `${progress}%`;
+        updateTimecode(clamped, durationMs);
+    };
+    player.update(o.timeline);
+}
+function formatTime(ms) {
+    const clamped = Math.max(0, ms);
+    const totalSeconds = Math.floor(clamped / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const millis = Math.floor(clamped % 1000);
+    return `${minutes}:${String(seconds).padStart(2, "0")}.${String(millis).padStart(3, "0")}`;
+}
+//# sourceMappingURL=playback-test.js.map

package/x/demo/routines/playback-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-test.js","sourceRoot":"","sources":["../../../s/demo/routines/playback-test.ts"],"names":[],"mappings":"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"}

package/x/demo/routines/timeline-setup.d.ts

@@ -0,0 +1,6 @@
+import { Driver } from "../../driver/driver.js";
+import { Omni } from "../../timeline/index.js";
+export declare function TimelineSchemaTest(driver: Driver, file: File): Promise<{
+    timeline: import("../../timeline/index.js").TimelineFile;
+    omni: Omni;
+}>;

package/x/demo/routines/timeline-setup.js

@@ -0,0 +1,32 @@
+import { Datafile, Omni } from "../../timeline/index.js";
+export async function TimelineSchemaTest(driver, file) {
+    const omni = new Omni(driver);
+    const { videoA } = await omni.load({ videoA: Datafile.make(file) });
+    const timeline = omni.timeline(o => {
+        const text = o.text("content", { duration: 3000 });
+        const fade = o.animate.opacity.make("easeIn", [
+            [0, 0],
+            [700, 1],
+            [2200, 1],
+            [3000, 0.35],
+        ]);
+        const style = o.textStyle({ fill: "green", fontSize: 100 });
+        const videoSpatial = o.spatial(o.transform({
+            position: [240, 160],
+            scale: [1.4, 1.4],
+            rotation: 0.08,
+        }), [0.15, 0.1, 0.05, 0.2]);
+        const textSpatial = o.animatedSpatial(o.anim.transform("linear", [
+            [0, o.transform({ position: [-320, 80], scale: [0.7, 0.7] })],
+            [1000, o.transform({ position: [120, 80], scale: [1, 1] })],
+            [2000, o.transform({ position: [200, 40], scale: [1.35, 1.35], rotation: 8 })],
+            [3000, o.transform({ position: [320, 0], scale: [1.15, 1.15], rotation: 0 })],
+        ]));
+        const video = o.video(videoA, { duration: 3000, start: 1000 });
+        o.set(text.id, { styleId: style.id, spatialId: textSpatial.id, animationId: fade.id });
+        o.set(video.id, { spatialId: videoSpatial.id });
+        return o.sequence(o.stack(text, video, o.audio(videoA, { duration: 1000 })), o.gap(500), o.video(videoA, { duration: 7000, start: 5000 }));
+    });
+    return { timeline, omni };
+}
+//# sourceMappingURL=timeline-setup.js.map

package/x/demo/routines/timeline-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-setup.js","sourceRoot":"","sources":["../../../s/demo/routines/timeline-setup.ts"],"names":[],"mappings":"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"}

package/x/demo/routines/transcode-test.js

@@ -10,14 +10,18 @@ export function setupTranscodeTest(driver, source) {
             async onFrame(frame) {
                 const composed = await driver.composite([
                     {
+                        id: 0,
                         kind: "image",
                         frame
                     },
                     {
+                        id: 1,
                         kind: "text",
                         content: "omnitool",
-                        fontSize: 50,
-                        color: "green"
+                        style: {
+                            fontSize: 50,
+                            fill: "green"
+                        }
                     }
                 ]);
                 frame.close();
@@ -26,14 +30,20 @@ export function setupTranscodeTest(driver, source) {
             }
         });
         const audio = driver.decodeAudio({ source });
-        await driver.encode({
-            video,
-            audio,
+        const { readable, done } = driver.encode({
+            video: video.readable,
+            audio: audio.readable,
             config: {
                 audio: { codec: "opus", bitrate: 128000 },
                 video: { codec: "vp9", bitrate: 1000000 }
             }
         });
+        const handle = await window.showSaveFilePicker();
+        const writable = await handle.createWritable();
+        await Promise.all([
+            readable.pipeTo(writable),
+            done
+        ]);
     }
     return { canvas, run };
 }

package/x/demo/routines/transcode-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"transcode-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transcode-test.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,MAAqB;IACvE,MAAM,UAAU,GAAG,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,CAAA;IAE9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAA;IAC/B,MAAM,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAA;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IAEnC,KAAK,UAAU,GAAG;QACjB,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;YAChC,MAAM;YACN,KAAK,CAAC,OAAO,CAAC,KAAK;gBAClB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC;oBACvC;wBACC,IAAI,EAAE,OAAO;wBACb,KAAK;qBACL;oBACD;wBACC,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,UAAU;wBACnB,QAAQ,EAAE,EAAE;wBACZ,KAAK,EAAE,OAAO;qBACd;iBACD,CAAC,CAAA;gBACF,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,GAAG,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;gBAC9B,OAAO,QAAQ,CAAA;YAChB,CAAC;SACD,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,EAAC,MAAM,EAAC,CAAC,CAAA;QAE1C,MAAM,MAAM,CAAC,MAAM,CAAC;YACnB,KAAK;YACL,KAAK;YACL,MAAM,EAAE;gBACP,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAC;gBACvC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAC;aACvC;SACD,CAAC,CAAA;IACH,CAAC;IAED,OAAO,EAAC,MAAM,EAAE,GAAG,EAAC,CAAA;AACrB,CAAC"}
+{"version":3,"file":"transcode-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transcode-test.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,MAAqB;IACvE,MAAM,UAAU,GAAG,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,CAAA;IAE9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAA;IAC/B,MAAM,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAA;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IAEnC,KAAK,UAAU,GAAG;QACjB,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;YAChC,MAAM;YACN,KAAK,CAAC,OAAO,CAAC,KAAK;gBAClB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC;oBACvC;wBACC,EAAE,EAAE,CAAC;wBACL,IAAI,EAAE,OAAO;wBACb,KAAK;qBACL;oBACD;wBACC,EAAE,EAAE,CAAC;wBACL,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,UAAU;wBACnB,KAAK,EAAE;4BACN,QAAQ,EAAE,EAAE;4BACZ,IAAI,EAAE,OAAO;yBACb;qBACD;iBACD,CAAC,CAAA;gBACF,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,GAAG,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;gBAC9B,OAAO,QAAQ,CAAA;YAChB,CAAC;SACD,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,EAAC,MAAM,EAAC,CAAC,CAAA;QAE1C,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAC,GAAG,MAAM,CAAC,MAAM,CAAC;YACtC,KAAK,EAAE,KAAK,CAAC,QAAQ;YACrB,KAAK,EAAE,KAAK,CAAC,QAAQ;YACrB,MAAM,EAAE;gBACP,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAC;gBACvC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAC;aACvC;SACD,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,kBAAkB,EAAE,CAAA;QAChD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,cAAc,EAAE,CAAA;QAE9C,MAAM,OAAO,CAAC,GAAG,CAAC;YACjB,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;YACzB,IAAI;SACJ,CAAC,CAAA;IACH,CAAC;IAED,OAAO,EAAC,MAAM,EAAE,GAAG,EAAC,CAAA;AACrB,CAAC"}

package/x/demo/routines/transitions-test.js

@@ -22,8 +22,8 @@ export async function setupTransitionsTest(driver, source) {
                 return frame;
             }
         });
-        await driver.encode({
-            video,
+        driver.encode({
+            video: video.readable,
             config: {
                 audio: { codec: "opus", bitrate: 128000 },
                 video: { codec: "vp9", bitrate: 1000000 }

package/x/demo/routines/transitions-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"transitions-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transitions-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,MAAM,EAAC,MAAM,SAAS,CAAA;AAI3C,OAAO,EAAC,cAAc,EAAC,MAAM,yCAAyC,CAAA;AAEtE,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,MAAc,EAAE,MAAqB;IAC/E,MAAM,GAAG,GAAG,IAAI,WAAW,EAAE,CAAA;IAC7B,MAAM,GAAG,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAC,CAAC,CAAA;IAC9D,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC,CAAA;IAEpD,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAE1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACrC,MAAM,UAAU,GAAG,cAAc,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAC,CAAC,CAAA;IAE3E,KAAK,UAAU,GAAG;QACjB,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;YAChC,MAAM;YACN,KAAK,CAAC,OAAO,CAAC,KAAK;gBAClB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC;oBACjC,IAAI,EAAE,KAAK;oBACX,EAAE,EAAE,KAAK;oBACT,QAAQ,EAAE,GAAG;oBACb,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK;oBACvB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM;iBACzB,CAAC,CAAA;gBACF,MAAM,CAAC,OAAO,GAAG,OAAO,CAAA;gBACxB,OAAO,KAAK,CAAA;YACb,CAAC;SACD,CAAC,CAAA;QAEF,MAAM,MAAM,CAAC,MAAM,CAAC;YACnB,KAAK;YACL,MAAM,EAAE;gBACP,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAC;gBACvC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAC;aACvC;SACD,CAAC,CAAA;IACH,CAAC;IAED,OAAO,EAAC,GAAG,EAAC,CAAA;AACb,CAAC"}
+{"version":3,"file":"transitions-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transitions-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,MAAM,EAAC,MAAM,SAAS,CAAA;AAI3C,OAAO,EAAC,cAAc,EAAC,MAAM,yCAAyC,CAAA;AAEtE,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,MAAc,EAAE,MAAqB;IAC/E,MAAM,GAAG,GAAG,IAAI,WAAW,EAAE,CAAA;IAC7B,MAAM,GAAG,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAC,CAAC,CAAA;IAC9D,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC,CAAA;IAEpD,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAE1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACrC,MAAM,UAAU,GAAG,cAAc,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAC,CAAC,CAAA;IAE3E,KAAK,UAAU,GAAG;QACjB,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;YAChC,MAAM;YACN,KAAK,CAAC,OAAO,CAAC,KAAK;gBAClB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC;oBACjC,IAAI,EAAE,KAAK;oBACX,EAAE,EAAE,KAAK;oBACT,QAAQ,EAAE,GAAG;oBACb,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK;oBACvB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM;iBACzB,CAAC,CAAA;gBACF,MAAM,CAAC,OAAO,GAAG,OAAO,CAAA;gBACxB,OAAO,KAAK,CAAA;YACb,CAAC;SACD,CAAC,CAAA;QAEF,MAAM,CAAC,MAAM,CAAC;YACb,KAAK,EAAE,KAAK,CAAC,QAAQ;YACrB,MAAM,EAAE;gBACP,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAC;gBACvC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAC;aACvC;SACD,CAAC,CAAA;IACH,CAAC;IAED,OAAO,EAAC,GAAG,EAAC,CAAA;AACb,CAAC"}

package/x/demo/routines/waveform-test.d.ts

@@ -1 +1,2 @@
-export declare function waveformTest(): Promise<void>;
+import { Driver } from "../../driver/driver.js";
+export declare function waveformTest(driver: Driver, source: File, root: HTMLElement): Promise<void>;

package/x/demo/routines/waveform-test.js

@@ -1,11 +1,32 @@
-import { Waveform } from "../../timeline/parts/waveform.js";
-export async function waveformTest() {
-    const container = document.querySelector(".waveform-demo");
-    const widthSlider = document.querySelector(".width");
-    const waveform = await Waveform.init("/assets/temp/gl.mp4", container);
-    widthSlider.addEventListener("change", () => {
-        const width = +widthSlider.value;
-        waveform.width = width;
+import { Waveform } from "../../timeline/parts/waveform/waveform.js";
+export async function waveformTest(driver, source, root) {
+    const container = root.querySelector(".waveform-canvas");
+    const widthSlider = root.querySelector(".width");
+    container.replaceChildren();
+    container.style.position = "relative";
+    container.style.height = "96px";
+    container.style.overflow = "hidden";
+    const waveform = await Waveform.init(driver, source, {
+        tileHeight: 96,
+        onChange: () => renderTiles()
     });
+    const renderTiles = () => {
+        const width = +widthSlider.value;
+        const zoom = pixelsPerSecond(width, waveform.duration);
+        waveform.zoom = zoom;
+        container.style.width = `${width}px`;
+        container.replaceChildren(...[...waveform.getTiles().values()].map(tile => {
+            tile.canvas.style.position = "absolute";
+            tile.canvas.style.top = "0";
+            tile.canvas.style.left = `${tile.startTime * pixelsPerSecond(width, waveform.duration)}px`;
+            tile.canvas.style.height = "100%";
+            return tile.canvas;
+        }));
+    };
+    widthSlider.oninput = renderTiles;
+    waveform.range = [0, waveform.duration];
+}
+function pixelsPerSecond(width, duration) {
+    return duration > 0 ? width / duration : 0;
 }
 //# sourceMappingURL=waveform-test.js.map

package/x/demo/routines/waveform-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"waveform-test.js","sourceRoot":"","sources":["../../../s/demo/routines/waveform-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAA;AAEzD,MAAM,CAAC,KAAK,UAAU,YAAY;IACjC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAA;IACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAA;IACxE,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAA;IAEtE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QAC3C,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,CAAA;QAChC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACvB,CAAC,CAAC,CAAA;AACH,CAAC"}
+{"version":3,"file":"waveform-test.js","sourceRoot":"","sources":["../../../s/demo/routines/waveform-test.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAC,MAAM,2CAA2C,CAAA;AAElE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,MAAc,EAAE,MAAY,EAAE,IAAiB;IACjF,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAmB,CAAA;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAA;IAEpE,SAAS,CAAC,eAAe,EAAE,CAAA;IAC3B,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;IACrC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;IAC/B,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAEnC,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE;QACpD,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE;KAC7B,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,CAAA;QAChC,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACtD,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAA;QACpB,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;QACpC,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACzE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;YACvC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;YAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAA;YAC1F,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACjC,OAAO,IAAI,CAAC,MAAM,CAAA;QACnB,CAAC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,WAAW,CAAC,OAAO,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;AACxC,CAAC;AAED,SAAS,eAAe,CAAC,KAAa,EAAE,QAAgB;IACvD,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AAC3C,CAAC"}