@omnimedia/omnitool 1.1.0-1 → 1.1.0-100

package/s/index.html.ts

@@ -15,7 +15,7 @@ export default ssg.page(import.meta.url, async orb => ({
 	head: html`
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css2?family=Share+Tech&family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
 	`,
 
 	socialCard: {
@@ -28,26 +28,109 @@ export default ssg.page(import.meta.url, async orb => ({
 
 	body: html`
 		<section>
-			<h1>Omnitool <small>v${orb.packageVersion()}</small></h1>
-			<button class=fetch>fetch</button>
-			<button class="import">import</button>
-			<div class=results></div>
-			<div class=filmstrip-demo>
-				<label for="viewable-range">viewable range:</label>
-				<input type="range" min="0" max="100" step="1" value="10" class="range" id="viewable-range" name="viewable-range">
-				<div class="range-view"></div>
-				<label for="range-size">viewable range size:</label>
-				<input type="range" class="range-size" min="0.1" max="10" step="0.1" value="0.5" id="range-size" name="range-size">
-				<label for="frequency">frequency:</label>
-				<input type="range" class="frequency" min="0.1" max="120" step="0.1" value="10" id="frequency" name="frequency">
-				<div class="frequency-view">10 (fps)</div>
-				<div id=filmstrip></div>
-			</div>
-			<div class=waveform-demo>
-				<label for="width">width:</label>
-				<input class="width" id="width" name="width" type="range" min="100" max="1000000" value="1000" />
+			<header class="hero">
+				<div>
+					<h1>Omnitool <small>v${orb.packageVersion()}</small></h1>
+					<p>Developer demos for decoding, preview, waveform, playback, and export.</p>
+				</div>
+			</header>
+
+			<div class="demo-grid">
+				<article class="demo-card" data-demo="transcode">
+					<header>
+						<h2>Transcode Test</h2>
+						<p>Full decode + composite + encode pipeline.</p>
+					</header>
+					<div class="demo-controls">
+						<input type="file" accept="video/*" />
+						<button data-action="run">Run Transcode</button>
+					</div>
+					<div class="demo-progress">
+						<progress class="progress"></progress>
+						<span class="status">idle</span>
+					</div>
+					<div class="demo-preview"></div>
+				</article>
+
+				<article class="demo-card" data-demo="filmstrip">
+					<header>
+						<h2>Filmstrip</h2>
+						<p>Thumbnail sampling across a time range.</p>
+					</header>
+					<div class="demo-controls">
+						<input type="file" accept="video/*" />
+						<button data-action="run">Generate Filmstrip</button>
+					</div>
+					<div class="filmstrip-controls">
+						<label>viewable range</label>
+						<input type="range" min="0" max="100" step="1" value="10" class="range">
+						<div class="range-view"></div>
+						<label>range size</label>
+						<input type="range" class="range-size" min="0.1" max="10" step="0.1" value="0.5">
+						<label>frequency</label>
+						<input type="range" class="frequency" min="0.1" max="120" step="0.1" value="10">
+						<div class="frequency-view">10 (fps)</div>
+					</div>
+					<div class="filmstrip"></div>
+				</article>
+
+				<article class="demo-card" data-demo="waveform">
+					<header>
+						<h2>Waveform</h2>
+						<p>Audio peak rendering with adjustable width.</p>
+					</header>
+					<div class="demo-controls">
+						<input type="file" accept="audio/*,video/*" />
+						<button data-action="run">Build Waveform</button>
+					</div>
+					<div class="waveform-controls">
+						<label>width</label>
+						<input class="width" type="range" min="100" max="1000000" value="1000" step="100" />
+					</div>
+					<div class="waveform-canvas"></div>
+				</article>
+
+				<article class="demo-card" data-demo="playback">
+					<header>
+						<h2>Timeline Playback</h2>
+						<p>Build timeline and run the playback engine.</p>
+					</header>
+					<div class="demo-controls">
+						<input type="file" accept="video/*,audio/*,image/*" />
+					</div>
+					<div class="player-canvas"></div>
+					<div class="player">
+						<div class="timeline">
+							<div class="track">
+								<div class="playhead"></div>
+							</div>
+							<input class="scrub" type="range" min="0" max="0" step="1" value="0">
+						</div>
+						<div class="timecode">0:00.000 / 0:00.000</div>
+						<div class="controls">
+							<button class=play disabled>play</button>
+							<button class=stop disabled>stop</button>
+						</div>
+					</div>
+				</article>
+
+				<article class="demo-card" data-demo="export">
+					<header>
+						<h2>Timeline Export</h2>
+						<p>Build timeline and export a render.</p>
+					</header>
+					<div class="demo-controls">
+						<input type="file" accept="video/*,audio/*,image/*" />
+						<button data-action="export" disabled>Export</button>
+					</div>
+					<div class="demo-progress">
+						<progress class="progress"></progress>
+						<span class="status">idle</span>
+					</div>
+					<div class="demo-preview"></div>
+				</article>
 			</div>
+
 		</section>
 	`,
 }))
-

package/s/index.ts

@@ -1,4 +1,5 @@
 
 export * from "./driver/driver.js"
+export * from "./driver/driver-worker.js"
 export * from "./timeline/index.js"
 

package/s/tests.bundle.ts

@@ -0,0 +1,11 @@
+
+import {Science} from "@e280/science"
+import omniTest from "./timeline/sugar/omni.test.js"
+import renderersTest from "./timeline/renderers/renderers.test.js"
+
+await Science.run
+({
+	omniTest,
+	renderersTest
+})
+

package/s/tests.html.ts

@@ -0,0 +1,28 @@
+
+import {ssg, html} from "@e280/scute"
+
+const title = "omnitool"
+const domain = "omnitool.omniclip.app"
+const favicon = "/assets/favicon.png"
+
+export default ssg.page(import.meta.url, async orb => ({
+	title,
+	dark: true,
+	css: "demo/demo.css",
+	js: "tests.bundle.min.js",
+
+	head: html`
+	`,
+
+	socialCard: {
+		title,
+		description: "video processing toolkit",
+		themeColor: "#3cff9c",
+		siteName: domain,
+		image: `https://${domain}${favicon}`,
+	},
+
+	body: html`
+	`,
+}))
+

package/s/timeline/index.ts

@@ -1,14 +1,30 @@
 
+export * from "./types.js"
 export * from "./parts/basics.js"
+export * from "./parts/filters.js"
 export * from "./parts/item.js"
 export * from "./parts/media.js"
+export * from "./parts/transitions.js"
 export * from "./parts/resource-pool.js"
 export * from "./parts/resource.js"
 export * from "./parts/filmstrip.js"
+export * from "./parts/animations/registry.js"
+export {captionPresets} from "./parts/captions.js"
+export * from "../features/speech/transcribe/default-spec.js"
+export * from "../features/speech/transcribe/transcriber.js"
+export * from "../features/speech/transcribe/types.js"
+export * from "../features/bg-remover/default-spec.js"
+export * from "../features/bg-remover/bg-remover.js"
+export * from "../features/bg-remover/types.js"
+
+export * from "./parts/waveform/waveform.js"
+export * from "./parts/waveform/parts/types.js"
+export * from "./renderers/player/player.js"
 
 export * from "./sugar/o.js"
+export * from "./sugar/helpers.js"
 export * from "./sugar/omni.js"
 
 export * from "./utils/checksum.js"
 export * from "./utils/datafile.js"
-
+export * from "./utils/anim.js"

package/s/timeline/parts/animations/make.ts

@@ -0,0 +1,38 @@
+
+import {animationPresets} from "./presets.js"
+import {AnimationPresetActions, MotionAnimationOptions, ScalarAnimationOptions} from "./types.js"
+import {Anim, Interpolation, Keyframes, TrackTransform, Transform, TransformOptions} from "../../types.js"
+
+export function makeAnimationPresets(
+	scalar: (terp: Interpolation, track: Keyframes) => Anim<Keyframes>,
+	transform: (terp: Interpolation, source: Keyframes<Transform>) => Anim<TrackTransform>,
+	transformFrom: (options: TransformOptions) => Transform,
+): AnimationPresetActions {
+	const entries = Object.entries(animationPresets).map(([name, preset]) => {
+		const action = preset.type === "motion"
+			? (options?: MotionAnimationOptions): Anim<TrackTransform> => {
+				const offset = options?.offset ?? 0
+				return transform(options?.terp ?? preset.defaults.terp, [
+					[offset, transformFrom({
+						...preset.transform.from,
+						...(options?.from === undefined ? {} : {position: options.from}),
+					})],
+					[offset + (options?.duration ?? preset.defaults.duration), transformFrom({
+						...preset.transform.to,
+						...(options?.to === undefined ? {} : {position: options.to}),
+					})],
+				])
+			}
+			: (options?: ScalarAnimationOptions): Anim<Keyframes> => {
+				const offset = options?.offset ?? 0
+				return scalar(options?.terp ?? preset.defaults.terp, [
+					[offset, options?.from ?? preset.defaults.from],
+					[offset + (options?.duration ?? preset.defaults.duration), options?.to ?? preset.defaults.to],
+				])
+			}
+
+		return [name, action]
+	})
+
+	return Object.fromEntries(entries) as AnimationPresetActions
+}

package/s/timeline/parts/animations/presets.ts

@@ -0,0 +1,138 @@
+
+import type {AnimationPresetDefinition} from "./types.js"
+
+export const animationPresets = {
+	slideIn: {
+		type: "motion",
+		label: "Slide in",
+		defaults: {
+			duration: 700,
+			from: [-400, 0],
+			to: [0, 0],
+			terp: "easeOut",
+		},
+		transform: {
+			from: {position: [-400, 0]},
+			to: {position: [0, 0]},
+		},
+	},
+	slideOut: {
+		type: "motion",
+		label: "Slide out",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [400, 0],
+			terp: "easeIn",
+		},
+		transform: {
+			from: {position: [0, 0]},
+			to: {position: [400, 0]},
+		},
+	},
+	spinIn: {
+		type: "motion",
+		label: "Spin in",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [0, 0],
+			terp: "easeOut",
+		},
+		transform: {
+			from: {scale: [0, 0], rotation: -180},
+			to: {scale: [1, 1], rotation: 0},
+		},
+	},
+	spinOut: {
+		type: "motion",
+		label: "Spin out",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [0, 0],
+			terp: "easeIn",
+		},
+		transform: {
+			from: {scale: [1, 1], rotation: 0},
+			to: {scale: [0, 0], rotation: 180},
+		},
+	},
+	zoomIn: {
+		type: "motion",
+		label: "Zoom in",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [0, 0],
+			terp: "easeOut",
+		},
+		transform: {
+			from: {scale: [0, 0]},
+			to: {scale: [1, 1]},
+		},
+	},
+	zoomOut: {
+		type: "motion",
+		label: "Zoom out",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [0, 0],
+			terp: "easeIn",
+		},
+		transform: {
+			from: {scale: [1, 1]},
+			to: {scale: [0, 0]},
+		},
+	},
+	bounceIn: {
+		type: "motion",
+		label: "Bounce in",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [0, 0],
+			terp: "bounce",
+		},
+		transform: {
+			from: {scale: [0, 0]},
+			to: {scale: [1, 1]},
+		},
+	},
+	bounceOut: {
+		type: "motion",
+		label: "Bounce out",
+		defaults: {
+			duration: 700,
+			from: [0, 0],
+			to: [0, 0],
+			terp: "bounce",
+		},
+		transform: {
+			from: {scale: [1, 1]},
+			to: {scale: [0, 0]},
+		},
+	},
+	fadeIn: {
+		type: "scalar",
+		label: "Fade in",
+		defaults: {
+			duration: 700,
+			from: 0,
+			to: 1,
+			terp: "easeIn",
+		},
+	},
+	fadeOut: {
+		type: "scalar",
+		label: "Fade out",
+		defaults: {
+			duration: 700,
+			from: 1,
+			to: 0,
+			terp: "easeOut",
+		},
+	},
+} as const satisfies Record<string, AnimationPresetDefinition>
+

package/s/timeline/parts/animations/properties.ts

@@ -0,0 +1,30 @@
+
+import type {AnimationDefinition} from "./types.js"
+
+export const visualAnimations = {
+	transform: {
+		type: "transform",
+		defaultTerp: "linear",
+		channels: [
+			{path: "position.x", type: "number", default: 0, unit: "pixel"},
+			{path: "position.y", type: "number", default: 0, unit: "pixel"},
+			{path: "scale.x", type: "number", default: 1, unit: "scale"},
+			{path: "scale.y", type: "number", default: 1, unit: "scale"},
+			{path: "rotation", type: "number", default: 0, unit: "degree"},
+		],
+	},
+	opacity: {
+		type: "scalar",
+		defaultTerp: "linear",
+		channels: [
+			{type: "number", default: 1, unit: "ratio", range: [0, 1]},
+		],
+	},
+} as const satisfies Record<string, AnimationDefinition>
+
+// const audioAnimations = {}
+
+export const animatableProperties = {
+	...visualAnimations,
+} as const
+

package/s/timeline/parts/animations/registry.ts

@@ -0,0 +1,13 @@
+
+import {animationPresets} from "./presets.js"
+import {animatableProperties} from "./properties.js"
+
+export const animationRegistry = {
+	presets: animationPresets,
+	properties: animatableProperties,
+} as const
+
+export * from "./make.js"
+export * from "./presets.js"
+export * from "./properties.js"
+export * from "./types.js"

package/s/timeline/parts/animations/types.ts

@@ -0,0 +1,80 @@
+
+import {animationPresets} from "./presets.js"
+import type {Item, VisualAnimatableItem} from "../item.js"
+import {visualAnimations, animatableProperties} from "./properties.js"
+import type {Anim, Interpolation, Keyframes, ScalarAnimation, TrackTransform, TransformAnimation, TransformOptions, Vec2} from "../../types.js"
+
+export type AnimationType = "scalar" | "transform"
+export type AnimationChannelType = "number"
+export type AnimationUnit = "pixel" | "scale" | "degree" | "ratio"
+
+export type AnimationChannel = {
+	path?: string
+	type: AnimationChannelType
+	default: number
+	unit?: AnimationUnit
+	range?: readonly [min: number, max: number]
+}
+
+export type AnimationDefinition = {
+	type: AnimationType
+	defaultTerp: Interpolation
+	channels: readonly AnimationChannel[]
+}
+
+export type MotionAnimationPresetDefinition = {
+	type: "motion"
+	label: string
+	defaults: Required<Omit<MotionAnimationOptions, "offset">>
+	transform: {
+		from: TransformOptions
+		to: TransformOptions
+	}
+}
+
+export type ScalarAnimationPresetDefinition = {
+	type: "scalar"
+	label: string
+	defaults: Required<Omit<ScalarAnimationOptions, "offset">>
+}
+
+export type AnimationPresetDefinition =
+	| MotionAnimationPresetDefinition
+	| ScalarAnimationPresetDefinition
+
+export type VisualAnimationProperty = keyof typeof visualAnimations
+export type AnimationProperty = keyof typeof animatableProperties
+export type AnimationPreset = keyof typeof animationPresets
+
+type AnimationPresetAction<TPreset extends AnimationPresetDefinition> =
+	TPreset extends MotionAnimationPresetDefinition
+		? (options?: MotionAnimationOptions) => Anim<TrackTransform>
+		: TPreset extends ScalarAnimationPresetDefinition
+			? (options?: ScalarAnimationOptions) => Anim<Keyframes>
+			: never
+
+export type AnimationPresetActions = {
+	[TName in AnimationPreset]: AnimationPresetAction<(typeof animationPresets)[TName]>
+}
+
+export type AnimationPresetOptions<Value> = {
+	duration?: number
+	offset?: number
+	from?: Value
+	to?: Value
+	terp?: Interpolation
+}
+
+export type MotionAnimationOptions = AnimationPresetOptions<Vec2>
+export type ScalarAnimationOptions = AnimationPresetOptions<number>
+export type PresetAnimation = ScalarAnimation | TransformAnimation
+export type PresetOptions = MotionAnimationOptions | ScalarAnimationOptions
+
+export interface PresetAnimateAction {
+	<T extends VisualAnimatableItem>(item: T, options?: PresetOptions): T
+	make(options?: PresetOptions): Item.Animation
+}
+
+export type PresetAnimateActions = {
+	[TKey in AnimationPreset]: PresetAnimateAction
+}

package/s/timeline/parts/basics.ts

@@ -11,7 +11,7 @@ export type TimelineFile = {
 	info: "https://omniclip.app/"
 	format: "timeline"
 	version: number
-	root: Id
+	rootId: Id
 	items: Item.Any[]
 }
 

package/s/timeline/parts/captions.ts

@@ -0,0 +1,91 @@
+
+import type {Item} from "./item.js"
+import {TextStyleOptions} from "pixi.js"
+import {TransformOptions, Vec2} from "../types.js"
+import {Transcription, TranscriptSegment} from "../../features/speech/transcribe/types.js"
+
+export type CaptionOptions = {
+	itemId?: Item.Caption["itemId"]
+	start?: number
+	duration?: number
+	styles?: TextStyleOptions
+	maxChars?: number
+	maxDuration?: number
+	maxSilence?: number
+}
+
+export const captionPresets = {
+	default: {
+		styles: {
+			fontFamily: "Arial",
+			fontSize: 56,
+			fill: "#ffffff",
+			align: "center",
+			wordWrap: true,
+			wordWrapWidth: 1440,
+		} satisfies TextStyleOptions,
+		transform: {
+			position: [240, 860] as Vec2
+		} satisfies TransformOptions,
+	}
+}
+
+export type CaptionPreset = (typeof captionPresets)[keyof typeof captionPresets]
+export type CaptionSourceItem = Item.Video | Item.Audio
+export type CaptionAction = {
+	(item: CaptionSourceItem, transcript: Transcription, options?: CaptionOptions): Item.Stack
+	make: (transcript: Transcription, options?: CaptionOptions) => Item.Caption
+}
+
+export type CaptionActions = CaptionAction & {
+	presets: {
+		[TName in keyof typeof captionPresets]: CaptionAction
+	}
+}
+
+const CAPTION_DEFAULTS = {
+	maxChars: 42,
+	maxDuration: 3500,
+	maxSilence: 750,
+} satisfies CaptionOptions
+
+export function segmentTranscript(transcript: Transcription, options?: CaptionOptions): TranscriptSegment[] {
+	const {maxChars, maxDuration, maxSilence} = {...CAPTION_DEFAULTS, ...options}
+	const segments: TranscriptSegment[] = []
+	let current: TranscriptSegment | null = null
+
+	for (const {timestamp: [t0, t1], text: rawText} of transcript.chunks) {
+		const [start, end] = [t0 * 1000, t1 * 1000]
+		const text = rawText.trim()
+
+		if (!Number.isFinite(start) || !Number.isFinite(end) || !text) continue
+
+		if (!current) {
+			current = {text, timestamp: [start, end]}
+			continue
+		}
+
+		const [currentStart, currentEnd]: [number, number] = current.timestamp
+		const nextText = `${current.text} ${text}`.trim()
+		const shouldBreak =
+			nextText.length > maxChars ||
+			end - currentStart > maxDuration ||
+			start - currentEnd > maxSilence
+
+		if (shouldBreak) {
+			segments.push(current)
+			current = {text, timestamp: [start, end]}
+		}
+		else {
+			current = {text: nextText, timestamp: [currentStart, end]}
+		}
+	}
+
+	if (current) segments.push(current)
+	return segments
+}
+
+export function captionDuration(transcript: Transcription, options?: CaptionOptions) {
+	const segments = segmentTranscript(transcript, options)
+	return Math.max(0, ...segments.map(segment => segment.timestamp[1]))
+}