@omnimedia/omnitool 1.1.0-8 → 1.1.0-81

package/s/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/s/demo/routines/export-test.ts

@@ -0,0 +1,16 @@
+import {Omni, TimelineFile} from "../../timeline/index.js"
+
+export function exportTest(
+	omni: Omni,
+	timeline: TimelineFile,
+	exportButton: HTMLButtonElement,
+	onStatus?: (state: "running" | "done") => void
+) {
+	exportButton.addEventListener("click", () => {
+		onStatus?.("running")
+		omni.render(timeline).then(() => {
+			console.log("done")
+			onStatus?.("done")
+		})
+	})
+}

package/s/demo/routines/filmstrip-test.ts

@@ -1,14 +1,16 @@
 import {Filmstrip} from "../../timeline/parts/filmstrip.js"
 
-export async function filmstripTest(file: File) {
-	const rangeSlider = document.querySelector(".range") as HTMLInputElement
-	const rangeView = document.querySelector(".range-view")!
-	const rangeSizeSlider = document.querySelector(".range-size")! as HTMLInputElement
-	const frequencySlider = document.querySelector(".frequency")! as HTMLInputElement
-	const frequencyView = document.querySelector(".frequency-view")!
-	const container = document.querySelector("#filmstrip")!
-	const FPS_10 = 1000/10 / 1000
+export async function filmstripTest(file: File, root: HTMLElement) {
+	const rangeSlider = root.querySelector(".range") as HTMLInputElement
+	const rangeView = root.querySelector(".range-view")!
+	const rangeSizeSlider = root.querySelector(".range-size")! as HTMLInputElement
+	const frequencySlider = root.querySelector(".frequency")! as HTMLInputElement
+	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,
 			{
@@ -27,22 +29,24 @@ export async function filmstripTest(file: 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]
 }
 

package/s/demo/routines/load-video.ts

@@ -1,7 +1,6 @@
 
-export async function loadVideo(url: string): Promise<ArrayBuffer> {
+export async function loadVideo(url: string) {
 	return fetch(url)
-		.then(response => response.bytes())
-		.then(bytes => bytes.buffer)
+		.then(response => response.blob())
 }
 

package/s/demo/routines/playback-test.ts

@@ -0,0 +1,61 @@
+
+import {O, Omni, TimelineFile} from "../../timeline/index.js"
+
+export async function playbackTest(timeline: TimelineFile, omni: Omni, root: HTMLElement) {
+	const playButton = root.querySelector(".play") as HTMLButtonElement
+	const stopButton = root.querySelector(".stop") as HTMLButtonElement
+	const scrub = root.querySelector(".scrub") as HTMLInputElement
+	const playhead = root.querySelector(".playhead") as HTMLDivElement
+	const timecode = root.querySelector(".timecode") as HTMLDivElement
+	const canvasSlot = root.querySelector(".player-canvas") as HTMLDivElement
+	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: number, durationMs: number) => {
+		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: number, durationMs: number) => {
+		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: number) {
+	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")}`
+}

package/s/demo/routines/timeline-setup.ts

@@ -0,0 +1,50 @@
+
+import {Driver} from "../../driver/driver.js"
+import {Datafile, Item, Omni} from "../../timeline/index.js"
+
+export async function TimelineSchemaTest(driver: Driver, file: 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<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationId: fade.id})
+		o.set<Item.Video>(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}
+}

package/s/demo/routines/transcode-test.ts

@@ -1,3 +1,4 @@
+
 import {Driver} from "../../driver/driver.js"
 import {DecoderSource} from "../../driver/fns/schematic.js"
 
@@ -15,14 +16,18 @@ export function setupTranscodeTest(driver: Driver, source: DecoderSource) {
 			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()
@@ -32,15 +37,24 @@ export function setupTranscodeTest(driver: Driver, source: DecoderSource) {
 		})
 		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/s/demo/routines/transitions-test.ts

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

package/s/demo/routines/waveform-test.ts

@@ -1,12 +1,39 @@
-import {Waveform} from "../../timeline/parts/waveform.js"
 
-export async function waveformTest() {
-	const container = document.querySelector(".waveform-demo") as HTMLElement
-	const widthSlider = document.querySelector(".width") as HTMLInputElement
-	const waveform = await Waveform.init("/assets/temp/gl.mp4", container)
+import {Driver} from "../../driver/driver.js"
+import {Waveform} from "../../timeline/parts/waveform/waveform.js"
 
-	widthSlider.addEventListener("change", () => {
-		const width = +widthSlider.value
-		waveform.width = width
+export async function waveformTest(driver: Driver, source: File, root: HTMLElement) {
+	const container = root.querySelector(".waveform-canvas") as HTMLDivElement
+	const widthSlider = root.querySelector(".width") as HTMLInputElement
+
+	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: number, duration: number) {
+	return duration > 0 ? width / duration : 0
 }

package/s/driver/driver-worker.ts

@@ -0,0 +1,9 @@
+
+import {Comrade} from "@e280/comrade"
+import {setupDriverWork} from "./fns/work.js"
+import {DriverSchematic} from "./fns/schematic.js"
+
+export async function driverWorker() {
+	await Comrade.worker<DriverSchematic>(setupDriverWork)
+}
+

package/s/driver/driver.test.ts

@@ -5,7 +5,7 @@ import {Science, test, expect} from "@e280/science"
 const workerUrl = new URL("./driver.worker.bundle.js", import.meta.url)
 
 export default Science.suite({
-	"driver hello world": test(async() => {
+	"driver hello world": test.skip(async() => {
 		const driver = await Driver.setup({workerUrl})
 		expect(driver.machina.count).is(0)
 		await driver.thread.work.hello()