@omnimedia/omnitool 1.1.0-47 → 1.1.0-48

package/README.md

@@ -19,6 +19,8 @@ npm i @omnimedia/omnitool
 
 ## 📦 Quick Start
 
+#### Declaring the timeline
+
 ```ts
 import {Driver, Omni, Datafile} from "@omnimedia/omnitool"
 
@@ -49,6 +51,30 @@ const timeline = omni.timeline(o => {
 })
 ```
 
+Declarative helper style (no explicit `o` in timeline declarations):
+
+```ts
+import {
+	Driver, Omni, Datafile,
+	timeline, stack, video, audio, text, gap, transition
+} from "@omnimedia/omnitool"
+
+const driver = await Driver.setup()
+const omni = new Omni(driver)
+const {clip} = await omni.load({clip: Datafile.make(file)})
+
+const timeline = timeline(
+	stack(
+		video(clip, {start: 0, duration: 3000}),
+		text("Hello world", {duration: 1500}),
+	),
+	gap(400),
+	transition.crossfade(500),
+	video(clip, {start: 5000, duration: 2500}),
+	audio(clip, {start: 5000, duration: 2500})
+)
+```
+
 ## 🧭 Spatial Transforms
 
 ```ts
@@ -132,7 +158,7 @@ Timeline items:
 - 8 `TextStyle`
 
 ## 🗺️ Roadmap
-- Planned CLI commands (not available in this repo yet):
+- CLI commands:
 
 ```bash
 # build a reusable template from a timeline
@@ -152,5 +178,6 @@ omnitool ai "make a 15s promo for tea"
 ```
 
 - smooth seeking
+- keyframes
 - server-side, not just browsers
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-47",
+	"version": "1.1.0-48",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",
@@ -19,7 +19,7 @@
 		"_ln-s": "ln -s \"$(realpath s)\" x/s",
 		"_ln-assets": "ln -s \"$(realpath assets)\" x/assets",
 		"_scute": "scute -v",
-		"test": "node x/tests.test.js",
+		"test": "echo \"node tests disabled for now\"",
 		"test-debug": "node inspect x/tests.test.js"
 	},
 	"devDependencies": {

package/s/demo/demo.bundle.ts

@@ -1,6 +1,6 @@
 
 import {Driver} from "../driver/driver.js"
-import {exportTest} from "./routines/export-test.js"
+import type {Omni, TimelineFile} from "../timeline/index.js"
 import {playbackTest} from "./routines/playback-test.js"
 import {waveformTest} from "./routines/waveform-test.js"
 import {TimelineSchemaTest } from "./routines/timeline-setup.js"
@@ -8,16 +8,15 @@ import {filmstripTest} from "./routines/filmstrip-test.js"
 import {setupTranscodeTest} from "./routines/transcode-test.js"
 
 const driver = await Driver.setup({workerUrl: new URL("../driver/driver.worker.bundle.min.js", import.meta.url)})
-const results = document.querySelector(".results")!
 
-const fetchButton = document.querySelector(".fetch")
-const fileInput = document.querySelector(".file-input") as HTMLInputElement
+const transcodeCard = document.querySelector("[data-demo='transcode']") as HTMLElement
+const filmstripCard = document.querySelector("[data-demo='filmstrip']") as HTMLElement
+const waveformCard = document.querySelector("[data-demo='waveform']") as HTMLElement
+const playbackCard = document.querySelector("[data-demo='playback']") as HTMLElement
+const exportCard = document.querySelector("[data-demo='export']") as HTMLElement
+const exportButton = exportCard.querySelector("[data-action='export']") as HTMLButtonElement
 
-fetchButton?.addEventListener("click", startDemoFetch)
-fileInput?.addEventListener("input", startDemoImport)
-
-waveformTest(driver)
-// const transcriber = await transcriberTest(driver)
+let exportState: {timeline: TimelineFile; omni: Omni} | null = null
 
 // hello world test
 {
@@ -26,53 +25,103 @@ waveformTest(driver)
 	else console.error("❌ FAIL driver call didn't work")
 }
 
-// transcoding tests
-async function startDemoImport(e: Event)
+const setProgress = (card: HTMLElement, state: "idle" | "running" | "done") => {
+	const progress = card.querySelector(".progress") as HTMLProgressElement
+	const status = card.querySelector(".status") as HTMLSpanElement
+
+	if (state === "running") {
+		progress.removeAttribute("value")
+		status.textContent = "running"
+	} else if (state === "done") {
+		progress.value = 1
+		status.textContent = "done"
+	} else {
+		progress.value = 0
+		status.textContent = "idle"
+	}
+}
+
+const bindDemo = (
+	card: HTMLElement,
+	run: (file: File, card: HTMLElement) => Promise<void>
+) => {
+	const input = card.querySelector("input[type='file']") as HTMLInputElement
+	const button = card.querySelector("[data-action='run']") as HTMLButtonElement
+
+	button.disabled = true
+	input.addEventListener("input", () => {
+		button.disabled = !input.files?.length
+	})
+
+	button.addEventListener("click", async () => {
+		const file = input.files?.[0]
+		if (!file)
+			return
+
+		button.disabled = true
+		setProgress(card, "running")
+		try {
+			await run(file, card)
+			setProgress(card, "done")
+		} finally {
+			button.disabled = false
+		}
+	})
+}
+
+bindDemo(transcodeCard, async (file, card) => {
+	const preview = card.querySelector(".demo-preview") as HTMLDivElement
+	const transcode = setupTranscodeTest(driver, file)
+	preview.replaceChildren(transcode.canvas)
+	await transcode.run()
+})
+
+bindDemo(filmstripCard, async (file, card) => {
+	await filmstripTest(file, card)
+})
+
+bindDemo(waveformCard, async (file, card) => {
+	await waveformTest(driver, file, card)
+})
+
 {
-	const file = fileInput.files?.[0]
-	if(file) {
-		const transcode = setupTranscodeTest(driver, file)
-		await filmstripTest(file)
-		run(transcode, file.name)
-		// await transcriber.transcribe(file)
+	const input = playbackCard.querySelector("input[type='file']") as HTMLInputElement
+	input.addEventListener("input", async () => {
+		const file = input.files?.[0]
+		if (!file)
+			return
 
 		const {timeline, omni} = await TimelineSchemaTest(driver, file)
-
-		playbackTest(timeline, omni)
-		exportTest(omni, timeline)
-	}
-	// const [fileHandle] = await window.showOpenFilePicker()
-	// const file = await fileHandle.getFile()
+		await playbackTest(timeline, omni, playbackCard)
+	})
 }
 
-async function startDemoFetch()
 {
+	const input = exportCard.querySelector("input[type='file']") as HTMLInputElement
+	input.addEventListener("input", async () => {
+		const file = input.files?.[0]
+		if (!file)
+			return
 
-	// which videos to run tests on
-	const videos = [
-		"/assets/temp/gl.mp4",
-	]
-
-	// running each test in sequence
-	for (const url of videos) {
-		const transcode = setupTranscodeTest(driver, "/assets/temp/gl.mp4")
-		run(transcode, url)
-	}
+		setProgress(exportCard, "running")
+		const {timeline, omni} = await TimelineSchemaTest(driver, file)
+		exportState = {timeline, omni}
+		exportButton.disabled = false
+
+		const preview = exportCard.querySelector(".demo-preview") as HTMLDivElement
+		const player = await omni.playback(timeline)
+		await player.seek(0)
+		preview.replaceChildren(player.canvas)
+		setProgress(exportCard, "done")
+	})
 }
 
-async function run(transcode: ReturnType<typeof setupTranscodeTest>, label: string) {
-	// create result div
-	const div = document.createElement("div")
-	results.append(div)
-
-	// add video label
-	const p = document.createElement("p")
-	p.textContent = label
-	div.append(p)
+exportButton.addEventListener("click", async () => {
+	if (!exportState)
+		return
 
-	// add the canvas to dom
-	div.append(transcode.canvas)
+	setProgress(exportCard, "running")
+	await exportState.omni.render(exportState.timeline)
+	setProgress(exportCard, "done")
+})
 
-	// run the test
-	await transcode.run()
-}

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

@@ -1,8 +1,16 @@
 import {Omni, TimelineFile} from "../../timeline/index.js"
 
-export function exportTest(omni: Omni, timeline: TimelineFile) {
-	const exportButton = document.querySelector(".export") as HTMLButtonElement
-	exportButton!.addEventListener("click", () => {
-		omni.render(timeline).then(() => console.log("done"))
+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())
 }