@omnimedia/omnitool 1.0.0 → 1.1.0-3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Przemysław Gałęzki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,2 +1,120 @@
-# omnitool
-# omnitool
+
+# 🚧 Work In Progress
+
+> **Note:** Omni Tools is under development. Expect breaking changes, evolving APIs, and experimental features.
+
+---
+
+# 🎬 Omnitool
+
+> Code-first video editing toolkit behind [Omniclip](https://omniclip.app) — build timelines, render videos, and automate workflows.
+
+---
+
+## 🧱 Modular by Design
+
+Omni Tools is a collection of composable utilities for working with Omniclip timelines — via code, JSON, or CLI.
+
+- ✅ Define timelines in JSON or TypeScript
+- ✅ Automate rendering with CLI tools
+- ✅ Ideal for scripting, CI/CD, and AI-generated workflows
+
+---
+
+## 🚀 Quick Start
+
+### Install
+
+```bash
+npm i @omnimedia/omnitool
+```
+
+---
+
+## 📦 Example (Programmatic Timeline)
+
+```ts
+import { subtitle, crossfade, sequence, stack, video } from "@omni/tools"
+
+const watermark = subtitle("omniclip")
+const xfade = crossfade(500)
+
+const timeline = sequence(
+  video("opening-credits.mp4"),
+  xfade,
+  stack(
+    video("skateboarding.mp4"),
+    watermark
+  ),
+  xfade,
+  stack(
+    video("biking.mp4"),
+    watermark
+  )
+)
+	
+```
+
+---
+
+## 🧩 Timeline Format (Omni Timeline Format)
+
+Every timeline is defined as a graph:
+
+```json
+{
+  "format": "omni-timeline@1",
+  "root": "root-1",
+  "items": [
+    ["root-1", ["sequence", { "children": ["video-1", "stack-1"] }]],
+    ["video-1", ["video", { ... }]],
+    ["stack-1", ["stack", { "children": ["text-1", "audio-1"] }]],
+    ["text-1", ["text", { ... }]],
+    ["audio-1", ["audio", { ... }]]
+  ]
+}
+```
+
+Each item is a `[id, item]` pair. Items can reference others by ID, forming a directed graph of reusable, composable blocks.
+
+---
+
+## 🖥 CLI Usage
+
+```bash
+# Build a timeline (manually or via AI)
+omnitool build-template promo.json
+
+# Validate structure
+omnitool validate promo.json
+
+# Render video
+omnitool export promo.json --output final.mp4
+
+# Batch render
+omnitool batch-export ./projects/* --output-dir ./exports
+```
+
+---
+
+## ✅ Use Cases
+
+- Render videos from scripts, templates, or AI
+- Build and test timelines without opening the UI
+- Generate video pipelines from code or prompts
+
+---
+
+## 📘 More to come
+
+- `omnitool preview` – headless timeline viewer
+- `omnitool optimize` – auto-fit timeline elements
+- `omnitool ai` – native prompt-to-timeline generation
+
+---
+
+## 🧠 Learn More
+
+Omni Tools powers AI agents, programmatic editing, and upcoming new version of omniclip video editor.
+
+→ [Visit Omniclip](https://omniclip.app)

package/package.json

@@ -1,29 +1,58 @@
 {
-  "name": "@omnimedia/omnitool",
-  "version": "1.0.0",
-  "description": "open source video processing tools",
-  "main": "x/index.js",
-  "files": [
-    "x",
-    "s"
-  ],
-  "type": "module",
-  "scripts": {
-    "build": "tsc",
-		"start": "tsc --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "tools",
-    "video",
-    "processing"
-  ],
-  "author": "zenkyu",
-  "license": "ISC",
-  "devDependencies": {
-    "typescript": "^5.4.5"
-  },
-  "dependencies": {
-    "@types/dom-webcodecs": "^0.1.11"
-  }
+	"name": "@omnimedia/omnitool",
+	"version": "1.1.0-3",
+	"description": "open source video processing tools",
+	"license": "MIT",
+	"author": "Przemysław Gałęzki",
+	"type": "module",
+	"main": "x/index.js",
+	"files": [
+		"x",
+		"s"
+	],
+	"scripts": {
+		"build": "run-s _clean _tsc _ln _scute",
+		"start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x'",
+		"_clean": "rm -rf x && mkdir x",
+		"_tsc": "tsc",
+		"_ln": "run-s _ln-s _ln-assets",
+		"_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-debug": "node inspect x/tests.test.js"
+	},
+	"devDependencies": {
+		"@e280/science": "^0.0.5",
+		"@e280/scute": "^0.0.0-6",
+		"@types/node": "^24.0.14",
+		"http-server": "^14.1.1",
+		"npm-run-all": "^4.1.5",
+		"typescript": "^5.8.3"
+	},
+	"dependencies": {
+		"@benev/slate": "^0.3.9",
+		"@e280/comrade": "^0.0.0-18",
+		"@e280/renraku": "^0.5.0-19",
+		"@e280/stz": "^0.0.0-22",
+		"comrade": "^0.0.3",
+		"mediabunny": "^1.1.1",
+		"mp4-muxer": "^5.2.1",
+		"pixi.js": "^8.10.1",
+		"wavesurfer.js": "^7.10.0",
+		"web-demuxer": "^2.3.8"
+	},
+	"homepage": "https://github.com/omni-media/omnitool#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/omni-media/omnitool.git"
+	},
+	"bugs": {
+		"url": "https://github.com/omni-media/omnitool/issues"
+	},
+	"keywords": [
+		"tools",
+		"video",
+		"processing"
+	]
 }

package/s/_archive/types.ts

@@ -0,0 +1,107 @@
+export interface Effect {
+	start: number
+	end: number
+	duration: number
+}
+
+export interface TextEffect {
+	font: Font
+	content: string
+	color: string
+	size: number
+	style: FontStyle
+	align: TextAlign
+	rect: Rect
+}
+
+export interface SubtitleEffect {
+	content: string
+}
+
+export interface FillEffect {
+	backgroundColor: string
+}
+
+export type FontStyle = "italic" | "bold" | "normal"
+export type Font = "Arial" | "Lato"
+export type TextAlign = "left" | "right" | "center"
+
+export interface AudioClip extends Effect {
+	file: string
+}
+
+export interface VideoClip extends Effect {
+	file: string
+	rect: Rect
+}
+
+export interface ImageEffect extends Effect {
+	file: string
+	rect: Rect
+}
+
+export interface Transition {
+	type: TransitonType
+	duration: number
+}
+
+export type TransitonType = "crossfade" | "blur" | "fade"
+
+export type AudioItem = ["audio", AudioClip]
+export type VideoItem = ["video", VideoClip]
+export type TransitionItem = ["transition", Transition]
+export type SubtitleItem = ["subtitle", SubtitleEffect]
+export type TextItem = ["text", Text]
+export type ImageItem = ["image", ImageEffect]
+export type FillItem = ["fill", FillEffect]
+export type Sequence = ["sequence", {children: string[]}]
+export type Stack = ["stack", {children: string[]}]
+
+type Item =
+	| AudioItem
+	| VideoItem
+	| TransitionItem
+	| SubtitleItem
+	| TextItem
+	| ImageItem
+	| FillItem
+	| Sequence
+	| Stack
+
+export type Items = [string, Item]
+
+export interface Timeline {
+	root: string
+	items: Items[]
+}
+
+export interface Rect {
+	width: number
+	height: number
+	scaleX: number
+	scaleY: number
+	position_on_canvas: {
+		x: number
+		y: number
+	}
+	rotation: number
+}
+
+const defaultRect: Rect = {
+	width: 0,
+	height: 0,
+	scaleX: 0,
+	scaleY: 0,
+	position_on_canvas: {x: 0, y: 0},
+	rotation: 0,
+}
+
+const timeline: Timeline = {
+	root: "213",
+	items: [
+		[
+			"12321",
+			["video", { file: "", start: 0, end: 5, duration: 5, rect: defaultRect }],
+		],
+	],
+}

package/s/context.ts

@@ -0,0 +1,7 @@
+import {Driver} from "./driver/driver.js"
+
+const workerUrl = new URL("../driver/driver.worker.bundle.js", import.meta.url)
+
+export const context = {
+	driver: Driver.setup({workerUrl})
+}

package/s/demo/demo.bundle.ts

@@ -0,0 +1,64 @@
+
+import {context} from "../context.js"
+import {waveformTest} from "./routines/waveform-test.js"
+import {filmstripTest} from "./routines/filmstrip-test.js"
+import {setupTranscodeTest} from "./routines/transcode-test.js"
+
+const driver = await context.driver
+const results = document.querySelector(".results")!
+
+const fetchButton = document.querySelector(".fetch")
+const importButton = document.querySelector(".import") as HTMLButtonElement
+
+fetchButton?.addEventListener("click", startDemoFetch)
+importButton?.addEventListener("click", startDemoImport)
+
+waveformTest()
+
+// hello world test
+{
+	await driver.thread.work.hello()
+	if (driver.machina.count === 1) console.log("✅ driver works")
+	else console.error("❌ FAIL driver call didn't work")
+}
+
+// transcoding tests
+async function startDemoImport()
+{
+	const [fileHandle] = await window.showOpenFilePicker()
+	const transcode = setupTranscodeTest(driver, fileHandle)
+	await filmstripTest(fileHandle)
+	run(transcode, fileHandle.name)
+}
+
+async function startDemoFetch()
+{
+
+	// 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)
+	}
+}
+
+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)
+
+	// add the canvas to dom
+	div.append(transcode.canvas)
+
+	// run the test
+	await transcode.run()
+}

package/s/demo/demo.css

@@ -0,0 +1,54 @@
+
+@layer vars, basics, page;
+
+@layer vars {
+	:root {
+		--link: cyan;
+		--color: #fffa;
+		--background: #111;
+	}
+}
+
+@layer basics {
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+}
+
+@layer page {
+	html {
+		font-size: 10px;
+		color: var(--color);
+		background: var(--background);
+	}
+
+	body {
+		padding: 2em;
+	}
+
+	.results {
+		margin-top: 1em;
+
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+
+		> div {
+			font-size: 1.5em;
+			border: 1px solid color-mix(in lch, transparent, var(--color) 20%);
+			padding: 1em;
+		}
+
+		canvas {
+			width: 20em;
+		}
+	}
+
+	#filmstrip {
+		display: flex;
+		overflow-x: scroll;
+	}
+}
+

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

@@ -0,0 +1,68 @@
+import {Filmstrip} from "../../timeline/parts/filmstrip.js"
+
+export async function filmstripTest(fileHandle: FileSystemFileHandle) {
+	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
+	let rangeSize = 0.5
+	const filmstrip = await Filmstrip.init(
+			fileHandle,
+			{
+				onChange(tiles) {
+					// Sort by time (optional, for clean ordering)
+					const sorted = tiles.sort((a, b) => a.time - b.time)
+					// Clear previous thumbnails
+					container.replaceChildren(
+						...sorted.map(({ time, canvas }) => createLabeledCanvas(time, canvas.canvas as HTMLCanvasElement))
+					)
+				},
+				frequency: FPS_10,
+				canvasSinkOptions: {
+					width: 80,
+					height: 50,
+					fit: "fill"
+				}
+			}
+		)
+	rangeSizeSlider.addEventListener("change", () => {
+		rangeSize = +rangeSizeSlider.value
+		const [start, end] = [+rangeSlider.value, +rangeSlider.value+rangeSize]
+		filmstrip.range = [start, end]
+		rangeView.textContent = `visible time range: [${start}, ${end}]`
+	})
+	rangeSlider.addEventListener("change", () => {
+		const [start, end] = [+rangeSlider.value, +rangeSlider.value+rangeSize]
+		filmstrip.range = [start, end]
+		rangeView.textContent = `visible time range: [${start}, ${end}]`
+	})
+	frequencySlider.addEventListener("change", () => {
+		filmstrip.frequency = 1000/+frequencySlider.value/1000
+		frequencyView.textContent = `frame every ${filmstrip.frequency.toFixed(3)} second (${frequencySlider.value} frames per second)`
+	})
+	filmstrip.range = [10, 10.5]
+}
+
+function createLabeledCanvas(time: number, canvas: HTMLCanvasElement) {
+	const wrapper = document.createElement('div')
+	wrapper.style.position = 'relative'
+	wrapper.style.display = 'inline-block'
+	wrapper.style.marginRight = '4px'
+	wrapper.appendChild(canvas)
+	const label = document.createElement('div')
+	label.textContent = `${time.toFixed(2)}s`
+	label.style.position = 'absolute'
+	label.style.top = '2px'
+	label.style.right = '4px'
+	label.style.fontSize = '10px'
+	label.style.color = 'white'
+	label.style.background = 'rgba(0,0,0,0.6)'
+	label.style.padding = '2px 4px'
+	label.style.borderRadius = '4px'
+	label.style.pointerEvents = 'none'
+	wrapper.appendChild(label)
+	return wrapper
+}

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

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

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

@@ -0,0 +1,44 @@
+import {Driver} from "../../driver/driver.js"
+import {DecoderSource} from "../../driver/fns/schematic.js"
+
+export function setupTranscodeTest(driver: Driver, source: DecoderSource) {
+	const dimensions = {width: 1920, height: 1080}
+
+	const canvas = document.createElement("canvas")
+	canvas.width = dimensions.width
+	canvas.height = dimensions.height
+	const ctx = canvas.getContext("2d")
+
+	async function run() {
+		const readables = driver.decode({
+			source,
+			async onFrame(frame) {
+				const composed = await driver.composite([
+					{
+						kind: "image",
+						frame
+					},
+					{
+						kind: "text",
+						content: "omnitool",
+						fontSize: 50,
+						color: "green"
+					}
+				])
+				frame.close()
+				ctx?.drawImage(composed, 0, 0)
+				return composed
+			}
+		})
+
+		await driver.encode({
+			readables,
+			config: {
+				audio: {codec: "opus", bitrate: 128000},
+				video: {codec: "vp9", bitrate: 1000000}
+			}
+		})
+	}
+
+	return {canvas, run}
+}

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

@@ -0,0 +1,12 @@
+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)
+
+	widthSlider.addEventListener("change", () => {
+		const width = +widthSlider.value
+		waveform.width = width
+	})
+}

package/s/driver/driver.test.ts

@@ -0,0 +1,15 @@
+
+import {Driver} from "./driver.js"
+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() => {
+		const driver = await Driver.setup({workerUrl})
+		expect(driver.machina.count).is(0)
+		await driver.thread.work.hello()
+		expect(driver.machina.count).is(1)
+	}),
+})
+