@omnimedia/omnitool 1.1.0-8 → 1.1.0-81

package/s/timeline/sugar/o.ts

@@ -1,106 +1,296 @@
+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 {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"
+import {Id, TimelineFile} from "../parts/basics.js"
+import {FilterAction, FilterActions} from "../parts/filters.js"
+import {filters, FilterParams, FilterType} from "../parts/filters.js"
+import {visualAnimations} from "../parts/animations.js"
+import {Crop, Effect, FilterableItem, Item, Kind, VisualAnimatableItem} from "../parts/item.js"
+import {Anim, AnimateAction, Interpolation, Keyframes, TrackTransform, Transform, TransformOptions, Vec2, VisualAnimations} from "../types.js"
+
+type VisualAnimateActions = {
+	[TKey in keyof VisualAnimations]-?: AnimateAction
+}
 
 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, crop?: Crop): Item.Spatial => {
   	const item: Item.Spatial = {
-  		id: this.#getId(),
+  		id: this.getId(),
   		kind: Kind.Spatial,
-  		transform
+  		transform: transform ?? this.transform(),
+  		crop,
+  		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))
-	})
+	animatedSpatial = (anim: Anim<TrackTransform>, crop?: Crop): Item.AnimatedSpatial => {
+		const item: Item.AnimatedSpatial = {
+			id: this.getId(),
+			kind: Kind.AnimatedSpatial,
+			anim,
+			crop,
+			enabled: true
+		}
+		this.register(item)
+		return item
+	}
+
+	#registerAnimation = (anims: VisualAnimations): Item.Animation => {
+		const item: Item.Animation = {
+			id: this.getId(),
+			kind: Kind.Animation,
+			anims,
+			enabled: true
+		}
+		this.register(item)
+		return item
+	}
+
+	anim = {
+		scalar: (terp: Interpolation, track: Keyframes): Anim<Keyframes> => ({terp, track}),
+
+		vec2: (terp: Interpolation, source: Keyframes<Vec2>) => {
+			const track = {x: [] as Keyframes, y: [] as Keyframes}
+
+			for (const [time, [x, y]] of source) {
+				track.x.push([time, x])
+				track.y.push([time, y])
+			}
+
+			return {terp, track}
+		},
+
+		transform: (terp: Interpolation, source: Keyframes<Transform>): Anim<TrackTransform> => {
+			const track: TrackTransform = {
+				position: {x: [], y: []},
+				scale: {x: [], y: []},
+				rotation: [],
+			}
+
+			for (const [time, [position, scale, rotation]] of source) {
+				track.position.x.push([time, position[0]])
+				track.position.y.push([time, position[1]])
+				track.scale.x.push([time, scale[0]])
+				track.scale.y.push([time, scale[1]])
+				track.rotation.push([time, rotation])
+			}
+
+			return {terp, track}
+		},
+	}
+
+	#makeFilter = <TFilter extends FilterType>(type: TFilter) => {
+		const make = (params?: FilterParams<TFilter>) => {
+			const item: Item.Filter<TFilter> = {
+				id: this.getId(),
+				kind: Kind.Filter,
+				type,
+				params,
+				enabled: true
+			}
+			this.register(item)
+			return item
+		}
+
+		const action = (<T extends FilterableItem>(item: T, params?: FilterParams<TFilter>): T => {
+			const filter = make(params)
+			const next = {
+				...item,
+				filterIds: [...(item.filterIds ?? []), filter.id]
+			}
+			this.set<T>(item.id, next as Partial<T>)
+			return next
+		}) as FilterAction<TFilter>
+
+		action.make = make
+		return action
+	}
+
+	#makeFilters = (): FilterActions => {
+		const entries = Object.entries(filters)
+			.map(([name, filter]) => [name, this.#makeFilter(filter.type)])
+		return Object.fromEntries(entries) as FilterActions
+	}
 
-	stack = (...items: TimelineItem[]) => new Stack(this, {
-		kind: Kind.Stack,
-		id: this.#getId(),
-		childrenIds: items.map(item => this.register(item))
-	})
+	filter = this.#makeFilters()
+
+	#makeAnimate = <TKey extends keyof VisualAnimations>(key: TKey): AnimateAction => {
+		const make = (terp: Interpolation, track: Keyframes) =>
+			this.#registerAnimation({
+				[key]: this.anim.scalar(terp, track)
+			} as Pick<VisualAnimations, TKey>)
+
+		const action = (<T extends VisualAnimatableItem>(
+			item: T,
+			terp: Interpolation,
+			track: Keyframes
+		): T => {
+			const animation = make(terp, track)
+			const next = {
+				...item,
+				animationId: animation.id
+			}
+			this.set<T>(item.id, next as Partial<T>)
+			return next
+		}) as AnimateAction
+
+		action.make = make
+		return action
+	}
+
+	#makeAnimateActions = (): VisualAnimateActions => {
+		const entries = Object.keys(visualAnimations)
+			.map(key => [key, this.#makeAnimate(key as keyof VisualAnimations)])
+		return Object.fromEntries(entries) as VisualAnimateActions
+	}
+
+	animate = this.#makeAnimateActions()
+
+	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
+	}
+
+	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 +305,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
+		})
 	}
 }