@omnimedia/omnitool 1.1.0-42 → 1.1.0-44

package/s/driver/parts/machina.ts

@@ -1,27 +1,26 @@
-import {WebMediaInfo} from "web-demuxer"
 
-type Events =
-	| {type: "config", config: {audio: AudioDecoderConfig, video: VideoDecoderConfig}}
-	| {type: "info", data: WebMediaInfo}
-	| {type: "encoderQueueSize", size: number}
-
-type Handler = (event: Events) => void
+// type Events =
+// 	| {type: "config", config: {audio: AudioDecoderConfig, video: VideoDecoderConfig}}
+// 	| {type: "info", data: WebMediaInfo}
+// 	| {type: "encoderQueueSize", size: number}
+//
+// type Handler = (event: Events) => void
 
 export class Machina {
 	count = 0
 
-	#handlers = new Map<number, Handler>()
-
-	register(id: number, handler: Handler) {
-		this.#handlers.set(id, handler)
-	}
-
-	unregister(id: number) {
-		this.#handlers.delete(id)
-	}
-
-	dispatch(id: number, event: Events) {
-		this.#handlers.get(id)?.(event)
-	}
+	// #handlers = new Map<number, Handler>()
+	//
+	// register(id: number, handler: Handler) {
+	// 	this.#handlers.set(id, handler)
+	// }
+	//
+	// unregister(id: number) {
+	// 	this.#handlers.delete(id)
+	// }
+	//
+	// dispatch(id: number, event: Events) {
+	// 	this.#handlers.get(id)?.(event)
+	// }
 }
 

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/timeline/index.ts

@@ -6,7 +6,7 @@ export * from "./parts/resource-pool.js"
 export * from "./parts/resource.js"
 export * from "./parts/filmstrip.js"
 export * from "./parts/waveform.js"
-export * from "./parts/compositor/playback.js"
+export * from "./parts/renderers/playback.js"
 
 export * from "./sugar/o.js"
 export * from "./sugar/omni.js"

package/s/timeline/parts/media.ts

@@ -14,13 +14,22 @@ export class Media {
 
 	static async analyze(datafile: Datafile) {
 		const media = new this(datafile)
-		media.duration = 10
-		const {video, audio} = await this.#has("/assets/temp/gl.mp4")
+		const duration = await this.duration(datafile.url) * 1000
+		media.duration = duration
+		const {video, audio} = await this.#has(datafile.url)
 		media.hasAudio = audio
 		media.hasVideo = video
 		return media
 	}
 
+	static async duration(source: DecoderSource) {
+		const input = new Input({
+			formats: ALL_FORMATS,
+			source: await loadDecoderSource(source)
+		})
+		return input.computeDuration()
+	}
+
 	static async #has(source: DecoderSource) {
 		const input = new Input({
 			formats: ALL_FORMATS,

package/s/timeline/parts/{compositor → renderers}/parts/html-tree.ts

@@ -18,9 +18,9 @@ class HTMLNodeBuilder extends TreeBuilder<AudioPlaybackComponent> {
 	composeAudio_Sequence(children: Node<AudioPlaybackComponent>[]) {
 		return {
 			onTimeUpdate: (time: number) => {
-				let localTime = time
+				let localTime = Math.round(time)
 				for (const child of children) {
-					if (localTime < child.duration) {
+					if (localTime <= child.duration) {
 						if (child.audio) child.audio.onTimeUpdate(localTime)
 						break
 					}

package/s/timeline/parts/{compositor → renderers}/parts/tree-builder.ts

@@ -66,6 +66,7 @@ export abstract class TreeBuilder<T> {
 							if (t < 0 || t >= root.duration)
 								return []
 							else return [{
+								id: root.id,
 								kind: "text",
 								content: root.content,
 								style: styleItem?.style,
@@ -110,9 +111,9 @@ export abstract class TreeBuilder<T> {
 	#composeVisuals_Sequence(children: Node<T>[]): VisualComponent {
 		return {
 			sampleAt: async (time) => {
-				let localTime = time
+				let localTime = Math.round(time)
 				for (const child of children) {
-					if (localTime < child.duration) return child.visuals ? child.visuals.sampleAt(localTime) : []
+					if (localTime <= child.duration) return child.visuals ? child.visuals.sampleAt(localTime) : []
 					localTime -= child.duration
 				}
 				return []
@@ -183,6 +184,7 @@ export abstract class TreeBuilder<T> {
 						const to = await incomingNode.visuals.sampleAt(localTime) as ImageLayer[]
 						if(!from[0]?.frame || !to[0]?.frame) return []
 						return [{
+							id: transitionItem.id,
 							kind: "transition",
 							name: "circle",
 							progress,

package/s/timeline/parts/{compositor → renderers}/playback.ts

@@ -22,24 +22,17 @@ export class VideoPlayer {
 		public canvas: HTMLCanvasElement,
 		private root: Node<AudioPlaybackComponent>,
 		private sampler: HTMLSampler,
-		private resolveMedia: ResolveMedia = _hash => "/assets/temp/gl.mp4"
 	) {
 		this.#controller.setFPS(30)
 	}
 
-	get context() {
-		return this.canvas.getContext("2d")!
-	}
-
-	static async create(driver: Driver, timeline: TimelineFile) {
+	static async create(driver: Driver, timeline: TimelineFile, resolveMedia: ResolveMedia) {
 		const rootItem = new Map(timeline.items.map(i => [i.id, i])).get(timeline.rootId)!
 		const items = new Map(timeline.items.map(i => [i.id, i]))
-		const sampler = makeHtmlSampler(() => "/assets/temp/gl.mp4")
+		const sampler = makeHtmlSampler(resolveMedia)
 		const root = await buildHTMLNodeTree(rootItem, items, sampler)
-		const canvas = document.createElement("canvas")
-		canvas.width = 1920
-		canvas.height = 1080
-		return new this(driver, canvas, root, sampler)
+		const view = driver.compositor.pixi.renderer.canvas
+		return new this(driver, view, root, sampler)
 	}
 
 	async #tick(ms: number) {
@@ -48,7 +41,6 @@ export class VideoPlayer {
 		this.root.audio?.onTimeUpdate(tt)
 		const layers = await this.root.visuals?.sampleAt(tt) ?? []
 		const frame = await this.driver.composite(layers)
-		this.context.drawImage(frame, 0, 0)
 		frame.close()
 		if (ms >= duration) this.pause()
 	}
@@ -73,7 +65,6 @@ export class VideoPlayer {
 		this.root.audio?.onTimeUpdate(ms)
 		const layers = await this.root.visuals?.sampleAt(ms) ?? []
 		const frame = await this.driver.composite(layers)
-		this.context.drawImage(frame, 0, 0)
 		frame.close()
 	}
 

package/s/timeline/parts/{compositor → renderers}/samplers/html.ts

@@ -45,11 +45,16 @@ export function makeHtmlSampler(resolveMedia: (hash: string) => DecoderSource):
 				// if paused seek otherwise play
 				visuals: {
 					sampleAt: async (ms) => {
-						if (ms < 0 || ms >= item.duration)
+						const mediaTime = item.start + ms
+						const endTime = item.start + item.duration
+
+						if (mediaTime < item.start || mediaTime >= endTime) {
+							video.pause()
 							return []
+						}
 
 						if(video.paused && paused) {
-							await seek(video, ms / 1000)
+							await seek(video, mediaTime / 1000)
 						}
 
 						if(video.paused && !paused) {
@@ -57,7 +62,7 @@ export function makeHtmlSampler(resolveMedia: (hash: string) => DecoderSource):
 						}
 
 						const frame = new VideoFrame(video)
-						return frame ? [{kind: "image", frame, matrix}] : []
+						return frame ? [{kind: "image", frame, matrix, id: item.id}] : []
 					}
 				}
 			}
@@ -68,13 +73,22 @@ export function makeHtmlSampler(resolveMedia: (hash: string) => DecoderSource):
 				duration: item.duration,
 				audio: {
 					onTimeUpdate: async (ms) => {
-						const localTime = item.start + ms
+						const mediaTime = item.start + ms
+						const endTime = item.start + item.duration
+
+						if (mediaTime < item.start || mediaTime >= endTime) {
+							audio.pause()
+							return []
+						}
+
 						if(audio.paused && paused) {
-							await seek(audio, localTime / 1000)
+							await seek(audio, mediaTime / 1000)
 						}
+
 						if(audio.paused && !paused) {
 							await audio.play()
 						}
+
 						return []
 					}
 				}

package/s/timeline/parts/{compositor → renderers}/samplers/webcodecs.ts

@@ -31,7 +31,7 @@ export function makeWebCodecsSampler(
 				visuals: {
 					sampleAt: async (ms: number) => {
 						const frame = await cursor.atOrNear(baseUs + toUs(ms))
-						return frame ? [{kind: "image", frame, matrix}] : []
+						return frame ? [{kind: "image", frame, matrix, id: item.id}] : []
 					}
 				}
 			}

package/s/timeline/parts/resource-pool.ts

@@ -1,27 +1,31 @@
 
-import {MapG} from "@e280/stz"
+import {GMap} from "@e280/stz"
 import {Hash} from "./basics.js"
 import {Media} from "./media.js"
 import {Resource} from "./resource.js"
 import {Datafile} from "../utils/datafile.js"
 
 export class ResourcePool {
-	#map = new MapG<Hash, Resource.Any>
+	#map = new GMap<Hash, Resource.Any>
 
 	/** store a media file (avoids duplicates via hash) */
 	async store(datafile: Datafile) {
 		const media = await Media.analyze(datafile)
 		const {hash} = media.datafile.checksum
-		const {filename, bytes} = media.datafile
+		const {filename, bytes, url} = media.datafile
 
 		if (this.#map.has(hash)) {
 			const alreadyExists = this.#map.require(hash)
 			alreadyExists.filename = filename
 		}
 		else
-			this.#map.set(hash, {kind: "media", filename, bytes})
+			this.#map.set(hash, {kind: "media", filename, bytes, url})
 
 		return media
 	}
+
+	require(hash: string) {
+		return this.#map.require(hash)
+	}
 }
 

package/s/timeline/parts/resource.ts

@@ -4,6 +4,7 @@ export namespace Resource {
 		kind: "media"
 		filename: string
 		bytes: Uint8Array
+		url: string
 	}
 
 	export type Any = Media

package/s/timeline/sugar/o.ts

@@ -114,13 +114,21 @@ export class O {
 		return item
 	}
 
-	text = (content: string): Item.Text => {
+	text = (content: string, options?: {
+			duration?: number,
+			styles?: TextStyleOptions
+		}): Item.Text => {
+
 		const item = {
 			id: this.#getId(),
 			content,
 			kind: Kind.Text,
-			duration: 2000
+			duration: options?.duration ?? 2000
 		} as Item.Text
+
+		if(options?.styles)
+			item.styleId = this.textStyle(options.styles).id
+
 		this.register(item)
 		return item
 	}

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

@@ -1,7 +1,7 @@
 
 import {Omni} from "./omni.js"
 import {Driver} from "../../driver/driver.js"
-import {dummyData} from "../utils/dummy-data.js"
+// import {dummyData} from "../utils/dummy-data.js"
 
 const driver = await Driver.setup()
 //
@@ -14,27 +14,27 @@ const omni = new Omni(driver)
 // load in some media resources
 //
 
-const {mediaA, mediaB} = await omni.load({
-	mediaA: dummyData(),
-	mediaB: dummyData(),
-})
+// const {mediaA, mediaB} = await omni.load({
+// 	mediaA: dummyData(),
+// 	mediaB: dummyData(),
+// })
 
 //
 // create a timeline
 //
 
-const timeline = omni.timeline(o => o.sequence(
-	o.video(mediaA),
-	o.transition.crossfade(600),
-	o.stack(
-		o.video(mediaB),
-		o.text("hello world"),
-	),
-))
+// const timeline = omni.timeline(o => o.sequence(
+// 	o.video(mediaA),
+// 	o.transition.crossfade(600),
+// 	o.stack(
+// 		o.video(mediaB),
+// 		o.text("hello world"),
+// 	),
+// ))
 
 //
 // log the timeline
 //
 
-console.log(JSON.stringify(timeline, undefined, "  "))
+// console.log(JSON.stringify(timeline, undefined, "  "))
 

package/s/timeline/sugar/omni.ts

@@ -5,7 +5,7 @@ import {Media} from "../parts/media.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 {Export} from "../parts/renderers/export.js"
 import {ResourcePool} from "../parts/resource-pool.js"
 import {RenderConfig} from "../../driver/fns/schematic.js"
 
@@ -38,7 +38,7 @@ export class Omni {
 		return o.state.project
 	}
 
-	render = async (timeline: TimelineFile, config: RenderConfig) => {
+	render = async (timeline: TimelineFile) => {
 		await this.#export.render(timeline)
 	}
 }

package/s/timeline/utils/datafile.ts

@@ -3,19 +3,29 @@ import {Checksum} from "./checksum.js"
 
 export class Datafile {
 	constructor(
+		public url: string,
 		public bytes: Uint8Array,
 		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, 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/x/demo/WebGLRenderer-Q3OV2JVE.js

@@ -0,0 +1,2 @@
+import{a}from"./chunk-X2GHKWPJ.js";import"./chunk-RFNLITDQ.js";import"./chunk-LQU5JKKZ.js";export{a as WebGLRenderer};
+//# sourceMappingURL=WebGLRenderer-Q3OV2JVE.js.map

package/x/demo/WebGLRenderer-Q3OV2JVE.js.map

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

package/x/demo/WebGPURenderer-FUFF62QA.js

@@ -0,0 +1,2 @@
+import{a}from"./chunk-6DBMQOFE.js";import"./chunk-TBWCKYN2.js";import"./chunk-RFNLITDQ.js";import"./chunk-LQU5JKKZ.js";export{a as WebGPURenderer};
+//# sourceMappingURL=WebGPURenderer-FUFF62QA.js.map

package/x/demo/WebGPURenderer-FUFF62QA.js.map

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

package/x/demo/browserAll-PGQYU756.js

@@ -0,0 +1,2 @@
+import{a as i,b as o,c as m,d as p,e}from"./chunk-TLDBHU4V.js";import"./chunk-LAJHJD2S.js";import"./chunk-2RBLPWNG.js";import"./chunk-TBWCKYN2.js";import{O as t,e as r}from"./chunk-LQU5JKKZ.js";r.add(i);r.mixin(t,o);r.add(m);r.mixin(t,p);r.add(e);
+//# sourceMappingURL=browserAll-PGQYU756.js.map

package/x/demo/browserAll-PGQYU756.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"]
+}