@omnimedia/omnitool 1.1.0-7 → 1.1.0-71

package/s/timeline/sugar/o.ts

@@ -1,106 +1,165 @@
+import {hex} from "@e280/stz"
+import {TextStyleOptions} from "pixi.js"
 
-import {MapG} from "@e280/stz"
-import {Id} from "../parts/basics.js"
 import {Media} from "../parts/media.js"
+import {Id, TimelineFile} from "../parts/basics.js"
 import {Effect, Item, Kind} from "../parts/item.js"
 import {Transform, TransformOptions, Vec2} from "../types.js"
-import {Video, Gap, Sequence, Stack, Text, TimelineItem, Spatial, Audio, Transition} from "./builders.js"
 
 export class O {
-	#nextId = 0
-	#items = new MapG<Id, TimelineItem>()
+	constructor(public state: {timeline: TimelineFile}) {}
 
-	#getId() {
-		return this.#nextId++
+	require<T extends Item.Any>(id: Id | undefined) {
+    if (id === undefined)
+    	return undefined
+    const item = this.state.timeline.items.find(item => item.id === id)
+    return item as T | undefined
 	}
 
-	register(item: TimelineItem) {
-		if (!this.#items.has(item.id))
-			this.#items.set(item.id, item)
-		return item.id
+	get timeline() {
+		return this.state.timeline
 	}
 
-	get items() {
-		return [...this.#items.values()]
+	getId() {
+		return hex.toInteger(hex.random())
 	}
 
-	get itemsMap() {
-		return this.#items
+  #mutate(fn: (project: TimelineFile) => TimelineFile) {
+    this.state.timeline = fn(this.state.timeline)
+  }
+
+	register(item: Item.Any) {
+		this.#mutate(state => ({
+			...state,
+			items: [...state.items, item]
+		}))
 	}
 
-  spatial = (transform: Transform) => {
+  textStyle = (style: TextStyleOptions): Item.TextStyle => {
+		const item = {
+			id: this.getId(),
+			kind: Kind.TextStyle,
+			style
+		} as Item.TextStyle
+		this.register(item)
+		return item
+  }
+
+  spatial = (transform: Transform): Item.Spatial => {
   	const item: Item.Spatial = {
-  		id: this.#getId(),
+  		id: this.getId(),
   		kind: Kind.Spatial,
-  		transform
+  		transform,
+  		enabled: true
   	}
-  	const spatial = new Spatial(item)
-  	this.register(spatial)
-  	return spatial
+		this.register(item)
+  	return item
   }
 
-	sequence = (...items: TimelineItem[]) => new Sequence(this, {
-		id: this.#getId(),
-		kind: Kind.Sequence,
-		childrenIds: items.map((item) => this.register(item))
-	})
+	sequence = (...items: Item.Any[]): Item.Sequence => {
+		const item =  {
+			id: this.getId(),
+			kind: Kind.Sequence,
+			childrenIds: items.map(item => item.id)
+		} as Item.Sequence
+		this.register(item)
+		return item
+	}
+
+	stack = (...items: Item.Any[]): Item.Stack => {
+		const item = {
+			kind: Kind.Stack,
+			id: this.getId(),
+			childrenIds: items.map(item => item.id)
+		} as Item.Stack
+		this.register(item)
+		return item
+	}
 
-	stack = (...items: TimelineItem[]) => new Stack(this, {
-		kind: Kind.Stack,
-		id: this.#getId(),
-		childrenIds: items.map(item => this.register(item))
-	})
+	video = (
+		media: Media,
+		options?: {
+			start?: number,
+			duration?: number
+		}): Item.Video => {
 
-	video = (media: Media, options?: {start?: number, duration?: number}) => {
 		if(!media.hasVideo)
 			throw new Error(`Video clip error: media "${media.datafile.filename}" has no video track.`)
 
 		const item: Item.Video = {
 			kind: Kind.Video,
-			id: this.#getId(),
+			id: this.getId(),
 			mediaHash: media.datafile.checksum.hash,
 			start: options?.start ?? 0,
 			duration: options?.duration ?? media.duration
 		}
-
-		return new Video(item)
+		this.register(item)
+		return item
 	}
 
-	audio = (media: Media, options?: {start?: number, duration?: number}) => {
+	audio = (
+		media: Media,
+		options?: {
+			start?: number,
+			duration?: number,
+			gain?: number
+		}): Item.Audio => {
+
 		if(!media.hasAudio)
 			throw new Error(`Audio clip error: media "${media.datafile.filename}" has no audio track.`)
 
 		const item: Item.Audio = {
 			kind: Kind.Audio,
-			id: this.#getId(),
+			id: this.getId(),
 			mediaHash: media.datafile.checksum.hash,
 			start: options?.start ?? 0,
-			duration: options?.duration ?? media.duration
+			duration: options?.duration ?? media.duration,
+			gain: options?.gain ?? 1
 		}
-
-		return new Audio(item)
+		this.register(item)
+		return item
 	}
 
-	text = (content: string) => new Text({
-		id: this.#getId(),
-		content,
-		kind: Kind.Text,
-		color: "#FFFFF"
-	})
+	text = (content: string, options?: {
+			duration?: number,
+			styles?: TextStyleOptions
+		}): Item.Text => {
+
+		const item = {
+			id: this.getId(),
+			content,
+			kind: Kind.Text,
+			duration: options?.duration ?? 2000
+		} as Item.Text
+
+		if(options?.styles)
+			item.styleId = this.textStyle(options.styles).id
+
+		this.register(item)
+		return item
+	}
 
-	gap = (duration: number) => new Gap({
-		id: this.#getId(),
-		kind: Kind.Gap,
-		duration
-	})
+	gap = (duration: number): Item.Gap => {
+		const item = {
+			id: this.getId(),
+			kind: Kind.Gap,
+			duration
+		} as Item.Gap
+		this.register(item)
+		return item
+	}
 
 	transition = {
-		crossfade: (duration: number) => new Transition({
-			id: this.#getId(),
-			kind: Kind.Transition,
-			effect: Effect.Crossfade,
-			duration,
-		}),
+		crossfade: (duration: number): Item.Transition => {
+			const item = {
+				id: this.getId(),
+				kind: Kind.Transition,
+				effect: Effect.Crossfade,
+				duration,
+			} as Item.Transition
+			this.register(item)
+			return item
+		},
 	}
 
   transform = (options?: TransformOptions): Transform => {
@@ -115,5 +174,27 @@ export class O {
     const rotation = options?.rotation ?? 0
     return [position, scale, rotation]
   }
+
+  addChildren(parent: Item.Stack | Item.Sequence, ...items: Item.Any[]) {
+		this.#mutate(state => {
+			const parentItem = state.items.find(({id}) => id === parent.id) as Item.Stack
+			parentItem.childrenIds.push(...items.map(item => item.id))
+			return state
+		})
+  }
+
+	set = <K extends Item.Any>(
+		id: Id,
+		partial: Partial<K>
+	) => {
+		this.#mutate(project => ({
+			...project,
+			items: project.items.map(item =>
+				item.id === id
+					? { ...item, ...partial }
+					: item
+			)
+		}))
+	}
 }
 

package/s/timeline/sugar/omni.test.ts

@@ -0,0 +1,210 @@
+
+import {expect, Science, test} from "@e280/science"
+
+import {O} from "./o.js"
+import {Omni} from "./omni.js"
+import {Item} from "../parts/item.js"
+import {Driver} from "../../driver/driver.js"
+import {Datafile} from "../utils/datafile.js"
+import {loadVideo} from "../../demo/routines/load-video.js"
+import {computeItemDuration} from "../renderers/parts/handy.js"
+
+const workerUrl = new URL("../driver/driver.worker.bundle.min.js", import.meta.url)
+export async function setupTest() {
+	const driver = await Driver.setup({workerUrl})
+	const omni = new Omni(driver)
+
+	const testVideo = await loadVideo("/assets/temp/test.mp4")
+	const {videoA} = await omni.load({videoA: Datafile.make(testVideo, "test.mp4")})
+
+	return {driver, omni, testVideo, videoA}
+}
+
+export default Science.suite({
+	"basic demo": test(async () => {
+		const driver = await Driver.setup({workerUrl: new URL("../driver/driver.worker.bundle.min.js", import.meta.url)})
+		const omni = new Omni(driver)
+
+		const testVideo = await loadVideo("/assets/temp/test.mp4")
+		const {videoA} = await omni.load({videoA: Datafile.make(testVideo, "test.mp4")})
+
+		const o = new O({timeline: omni.timeline(o => o.sequence())})
+		const rootItem = o.require<Item.Sequence>(o.timeline.rootId)!
+
+		const video = o.video(videoA)
+		o.addChildren(rootItem, video)
+
+		const videoDuration = computeItemDuration(video.id, o.timeline)
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+
+		expect(videoDuration).is(timelineDuration)
+	}),
+
+	"sequence duration is 3x": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA),
+			o.video(videoA),
+			o.video(videoA),
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration * 3)
+	}),
+
+	"stack duration is 1x": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.stack(
+			o.video(videoA),
+			o.video(videoA),
+			o.video(videoA),
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration)
+	}),
+
+	"nested stack inside sequence": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA),
+			o.stack(
+				o.video(videoA),
+				o.video(videoA)
+			),
+			o.video(videoA),
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration * 3)
+	}),
+
+	"nested sequence inside stack": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.stack(
+			o.video(videoA),
+			o.sequence(
+				o.video(videoA),
+				o.video(videoA)
+			)
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration * 2)
+	}),
+
+	"empty timeline duration is 0": test(async () => {
+		const {omni} = await setupTest()
+		const o1 = new O({timeline: omni.timeline(o => o.sequence())})
+		const o2 = new O({timeline: omni.timeline(o => o.stack())})
+		const duration1 = computeItemDuration(o1.timeline.rootId, o1.timeline)
+		const duration2 = computeItemDuration(o2.timeline.rootId, o2.timeline)
+		expect(duration1).is(0)
+		expect(duration2).is(0)
+	}),
+
+	"transition in a sequence": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const transitionDuration = 1000
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA),
+			o.transition.crossfade(transitionDuration),
+			o.video(videoA)
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		const expectedDuration = (videoA.duration * 2) - transitionDuration
+		expect(timelineDuration).is(expectedDuration)
+	}),
+
+	"transition in a stack": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const transitionDuration = 1000
+		const o = new O({timeline: omni.timeline(o => o.stack(
+			o.video(videoA),
+			o.transition.crossfade(transitionDuration),
+			o.video(videoA)
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration)
+	}),
+
+	"ignore invalid transition": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.transition.crossfade(1000),
+			o.video(videoA),
+			o.video(videoA),
+			o.transition.crossfade(1000),
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration * 2)
+	}),
+
+	"clamp transition duration on overflow": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const duration = 3000
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA, {duration}),
+			o.transition.crossfade(duration * 2),
+			o.video(videoA, {duration})
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(duration)
+	}),
+
+	"multiple transitions": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const transitionDuration = 1000
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA),
+			o.transition.crossfade(transitionDuration),
+			o.video(videoA),
+			o.transition.crossfade(transitionDuration),
+			o.video(videoA)
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		const expected = (videoA.duration * 3) - (transitionDuration * 2)
+		expect(timelineDuration).is(expected)
+	}),
+
+	"gap item in a sequence": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const gapDuration = 1000
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA),
+			o.gap(gapDuration),
+			o.video(videoA)
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		const expected = videoA.duration * 2 + gapDuration
+		expect(timelineDuration).is(expected)
+	}),
+
+	"gap item in a stack": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.stack(
+			o.video(videoA),
+			o.gap(1000),
+			o.video(videoA)
+		))})
+		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
+		expect(timelineDuration).is(videoA.duration)
+	}),
+
+	"load media into Omni": test(async () => {
+		const driver = await Driver.setup({workerUrl})
+		const omni = new Omni(driver)
+		const testVideo = await loadVideo("/assets/temp/test.mp4")
+		const {videoA} = await omni.load({videoA: Datafile.make(testVideo, "test.mp4")})
+		expect(omni.resources.require(videoA.datafile.checksum.hash)).happy()
+	}),
+
+	"playback seeks to correct time": test(async () => {
+		const {omni, videoA} = await setupTest()
+		const o = new O({timeline: omni.timeline(o => o.sequence(
+			o.video(videoA, {duration: 2000}),
+			o.gap(500),
+			o.video(videoA, {duration: 2500})
+		))})
+		const playback = await omni.playback(o.timeline)
+		await playback.seek(1000)
+		expect(playback.currentTime).is(1000)
+	})
+})
+

package/s/timeline/sugar/omni.ts

@@ -1,33 +1,56 @@
 
 import {O} from "./o.js"
-import {Timeline} from "../timeline.js"
+import {Item} from "../parts/item.js"
+import {fps} from "../../units/fps.js"
 import {Media} from "../parts/media.js"
-import {TimelineItem} from "./builders.js"
+import {Driver} from "../../driver/driver.js"
 import {Datafile} from "../utils/datafile.js"
 import {TimelineFile} from "../parts/basics.js"
-import {Export} from "../parts/compositor/export.js"
 import {ResourcePool} from "../parts/resource-pool.js"
-import {RenderConfig} from "../../driver/fns/schematic.js"
+import {VideoPlayer} from "../renderers/player/player.js"
+import {produce} from "../renderers/export/produce.js"
 
 export class Omni {
 	resources = new ResourcePool()
-	#export = new Export()
+
+	constructor(private driver: Driver) {}
 
 	load = async<S extends Record<string, Promise<Datafile>>>(spec: S) => {
 		return Object.fromEntries(await Promise.all(Object.entries(spec).map(
-			async([key, value]) => [key, await this.resources.store(await value)]
+			async ([key, value]) => [key, await this.resources.store(await value)]
 		))) as {[K in keyof S]: Media}
 	}
 
-	timeline = (fn: (o: O) => TimelineItem): Timeline => {
-		const o = new O()
+	timeline = (fn: (o: O) => Item.Any): TimelineFile => {
+		const o = new O({
+			timeline: {
+				format: "timeline",
+				info: "https://omniclip.app/",
+				version: 0,
+				items: [],
+				rootId: 0
+			}
+		})
 		const root = fn(o)
-		o.register(root)
-		return new Timeline(root, o.itemsMap)
+		o.timeline.rootId = root.id
+		return o.timeline
+	}
+
+	playback = async (timeline: TimelineFile) => {
+		return new VideoPlayer(
+			this.driver,
+			(hash) => this.resources.require(hash).url,
+			timeline
+		)
 	}
 
-	render = async (timeline: TimelineFile, config: RenderConfig) => {
-		await this.#export.render(timeline)
+	render = async (timeline: TimelineFile, framerate: number = 30) => {
+		return produce({
+			timeline,
+			fps: fps(framerate),
+			driver: this.driver,
+			resolveMedia: (hash) => this.resources.require(hash).url
+		})
 	}
 }
 

package/s/timeline/utils/checksum.ts

@@ -1,11 +1,13 @@
 
 import {Hex, Thumbprint} from "@e280/stz"
 
+import {Hash} from "../parts/basics.js"
+
 export class Checksum {
 	constructor(
 		public data: Uint8Array,
 		public bytes: Uint8Array,
-		public hash: string,
+		public hash: Hash,
 		public nickname: string,
 	) {}
 

package/s/timeline/utils/datafile.ts

@@ -3,19 +3,30 @@ import {Checksum} from "./checksum.js"
 
 export class Datafile {
 	constructor(
+		public url: string,
 		public bytes: Uint8Array,
+		public blob: Blob,
 		public filename: string,
 		public checksum: Checksum,
 	) {}
 
-	static async make(bytes: Uint8Array, name?: string) {
+	static async make(file: Blob, name?: string) {
+		const buffer = await file.arrayBuffer()
+		const bytes = new Uint8Array(buffer)
 		const checksum = await Checksum.make(bytes)
 		const filename = name ?? checksum.nickname
-		return new this(bytes, filename, checksum)
+		const url = URL.createObjectURL(file)
+		return new this(url, bytes, file, filename, checksum)
 	}
 
-	static async load(_path: string): Promise<Datafile> {
-		throw new Error("TODO implement")
+	static async load(path: string) {
+		// const file = await fetch(path)
+		// const buffer = await file.arrayBuffer()
+		// const bytes = new Uint8Array(buffer)
+		// const filename =  file?.headers.get('Content-Disposition')?.split('filename=')[1] ?? "file"
+		// console.log(filename)
+		// const checksum = await Checksum.make(bytes)
+		// return new this(path, bytes, filename, checksum)
 	}
 }
 

package/s/timeline/utils/dummy-data.ts

@@ -1,7 +1,7 @@
 
 import {Datafile} from "./datafile.js"
 
-export const dummyData = () => Datafile.make(
-	new Uint8Array([0xDE, 0xAD, 0xBE, 0xEF])
-)
+// export const dummyData = () => Datafile.make(
+// 	new Uint8Array([0xDE, 0xAD, 0xBE, 0xEF])
+// )
 

package/s/units/fps.ts

@@ -0,0 +1,8 @@
+declare const FpsBrand: unique symbol
+
+export type Fps = number & {
+	readonly [FpsBrand]: "fps"
+}
+
+export const fps = (value: number): Fps =>
+	value as Fps

package/s/units/ms.ts

@@ -0,0 +1,8 @@
+declare const MsBrand: unique symbol
+
+export type Ms = number & {
+	readonly [MsBrand]: "ms"
+}
+
+export const ms = (value: number): Ms =>
+	value as Ms

package/s/units/seconds.ts

@@ -0,0 +1,8 @@
+declare const SecondsBrand: unique symbol
+
+export type Seconds = number & {
+	readonly [SecondsBrand]: "s"
+}
+
+export const seconds = (value: number): Seconds =>
+	value as Seconds

package/x/WebGLRenderer-7X274AYV.js

@@ -0,0 +1,2 @@
+import{a}from"./chunk-4ONWQOPX.js";import"./chunk-W5CN46AR.js";import"./chunk-WFT3KTZG.js";export{a as WebGLRenderer};
+//# sourceMappingURL=WebGLRenderer-7X274AYV.js.map

package/x/WebGLRenderer-7X274AYV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/x/WebGPURenderer-XMCMEXAO.js

@@ -0,0 +1,2 @@
+import{a}from"./chunk-Q7JBQNE4.js";import"./chunk-A45M2HJC.js";import"./chunk-W5CN46AR.js";import"./chunk-WFT3KTZG.js";export{a as WebGPURenderer};
+//# sourceMappingURL=WebGPURenderer-XMCMEXAO.js.map

package/x/WebGPURenderer-XMCMEXAO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/x/browserAll-6TVTCHHE.js

@@ -0,0 +1,2 @@
+import{a as i,b as o,c as m,d as p,e}from"./chunk-OTQK6FAJ.js";import"./chunk-63NSCXPX.js";import"./chunk-W33LM336.js";import"./chunk-A45M2HJC.js";import{O as t,e as r}from"./chunk-WFT3KTZG.js";r.add(i);r.mixin(t,o);r.add(m);r.mixin(t,p);r.add(e);
+//# sourceMappingURL=browserAll-6TVTCHHE.js.map

package/x/browserAll-6TVTCHHE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../node_modules/pixi.js/src/accessibility/init.ts", "../node_modules/pixi.js/src/events/init.ts", "../node_modules/pixi.js/src/dom/init.ts"],
+  "sourcesContent": ["import { extensions } from '../extensions/Extensions';\nimport { Container } from '../scene/container/Container';\nimport { AccessibilitySystem } from './AccessibilitySystem';\nimport { accessibilityTarget } from './accessibilityTarget';\n\nextensions.add(AccessibilitySystem);\nextensions.mixin(Container, accessibilityTarget);\n", "import { extensions } from '../extensions/Extensions';\nimport { Container } from '../scene/container/Container';\nimport { EventSystem } from './EventSystem';\nimport { FederatedContainer } from './FederatedEventTarget';\n\nextensions.add(EventSystem);\nextensions.mixin(Container, FederatedContainer);\n", "import { extensions } from '../extensions/Extensions';\nimport { DOMPipe } from './DOMPipe';\n\nexport * from './index';\n\nextensions.add(DOMPipe);\n"],
+  "mappings": "kMAKAA,EAAW,IAAIC,CAAmB,EAClCD,EAAW,MAAME,EAAWC,CAAmB,ECD/CC,EAAW,IAAIC,CAAW,EAC1BD,EAAW,MAAME,EAAWC,CAAkB,ECD9CC,EAAW,IAAIC,CAAO",
+  "names": ["extensions", "AccessibilitySystem", "Container", "accessibilityTarget", "extensions", "EventSystem", "Container", "FederatedContainer", "extensions", "DOMPipe"]
+}