@omnimedia/omnitool 1.1.0-9 → 1.1.0-90

package/s/timeline/sugar/o.ts

@@ -1,63 +1,248 @@
+import {hex} from "@e280/stz"
+import {TextStyleOptions} from "pixi.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 {FilterAction, FilterActions} from "../parts/filters.js"
+import {filters, FilterParams, FilterType} from "../parts/filters.js"
+import {Crop, Effect, FilterableItem, Item, Kind, VisualAnimatableItem} from "../parts/item.js"
+import {animationPresets, makeAnimationPresets, visualAnimations} from "../parts/animations/registry.js"
+import {AnimationPreset, PresetAnimateAction, PresetAnimateActions, PresetAnimation, PresetOptions} from "../parts/animations/types.js"
+import {Anim, AnimateAction, Interpolation, Keyframes, ScalarAnimation, TrackTransform, Transform, TransformAnimation, TransformOptions, Vec2, VisualAnimationInput, VisualAnimationValue, VisualAnimations} from "../types.js"
+
+type VisualAnimateActions = {
+	[TKey in keyof VisualAnimations]-?: AnimateAction<TKey>
+}
 
 export class O {
-	#nextId = 0
+	constructor(public state: {timeline: TimelineFile}) {}
 
-	constructor(public state: {project: TimelineFile}) {}
+	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
+	}
 
-  require<T extends Item.Any>(id: Id): T {
-    const item = this.state.project.items.find(item => item.id === id)
-    return item as T
-  }
+	get timeline() {
+		return this.state.timeline
+	}
 
-	#getId() {
-		return this.#nextId++
+	getId() {
+		return hex.toInteger(hex.random())
 	}
 
   #mutate(fn: (project: TimelineFile) => TimelineFile) {
-    this.state.project = fn(this.state.project)
+    this.state.timeline = fn(this.state.timeline)
   }
 
-  spatial = (transform: Transform): Item.Spatial => {
+	register(item: Item.Any) {
+		this.#mutate(state => ({
+			...state,
+			items: [...state.items, item]
+		}))
+	}
+
+  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
   	}
+		this.register(item)
   	return item
   }
 
-	sequence = (...items: Item.Any[]): Item.Any => {
+	#registerAnimation = (anims: VisualAnimations): Item.Animation => {
+		const item: Item.Animation = {
+			id: this.getId(),
+			kind: Kind.Animation,
+			anims,
+			enabled: true
+		}
+		this.register(item)
+		return item
+	}
+
+	#attachAnimation = <T extends VisualAnimatableItem>(item: T, animation: Item.Animation): T => {
+		const next = {
+			...item,
+			animationIds: [...(item.animationIds ?? []), animation.id]
+		}
+		this.set<T>(item.id, next as Partial<T>)
+		return next
+	}
+
+	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}
+		},
+	}
+
+	#animationPresets = makeAnimationPresets(
+		(terp, track) => ({terp, track}),
+		(terp, source) => this.anim.transform(terp, source),
+		options => this.transform(options),
+	)
+
+	#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
+	}
+
+	filter = this.#makeFilters()
+
+	#makeAnimationValue = <TKey extends keyof VisualAnimations>(
+		key: TKey,
+		terp: Interpolation,
+		track: VisualAnimationInput<TKey>
+	): VisualAnimationValue<TKey> =>
+		(
+			key === "transform"
+				? this.anim.transform(terp, track as Keyframes<Transform>)
+				: this.anim.scalar(terp, track as Keyframes)
+		) as VisualAnimationValue<TKey>
+
+	#makeAnimate = <TKey extends keyof VisualAnimations>(key: TKey): AnimateAction<TKey> => {
+		const make = (terp: Interpolation, track: VisualAnimationInput<TKey>) =>
+			this.#registerAnimation({
+				[key]: this.#makeAnimationValue(key, terp, track)
+			} as Pick<VisualAnimations, TKey>)
+
+		const action = (<T extends VisualAnimatableItem>(
+			item: T,
+			terp: Interpolation,
+			track: VisualAnimationInput<TKey>
+		): T => {
+			const animation = make(terp, track)
+			return this.#attachAnimation(item, animation)
+		}) as AnimateAction<TKey>
+
+		action.make = make
+		return action
+	}
+
+	#makePresetAnimate = <TKey extends AnimationPreset>(key: TKey): PresetAnimateAction => {
+		const make = (options?: PresetOptions) => {
+			const preset = animationPresets[key]
+			const anim = this.#animationPresets[key](options as never) as PresetAnimation
+			return this.#registerAnimation(
+				preset.type === "motion"
+					? {transform: anim as TransformAnimation}
+					: {opacity: anim as ScalarAnimation}
+			)
+		}
+
+		const action = (<T extends VisualAnimatableItem>(item: T, options?: PresetOptions): T => {
+			const animation = make(options)
+			return this.#attachAnimation(item, animation)
+		}) as PresetAnimateAction
+
+		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
+	}
+
+	#makePresetAnimateActions = (): PresetAnimateActions => {
+		const entries = Object.keys(animationPresets)
+			.map(key => [key, this.#makePresetAnimate(key as AnimationPreset)])
+		return Object.fromEntries(entries) as PresetAnimateActions
+	}
+
+	animate = {
+		...this.#makeAnimateActions(),
+		presets: this.#makePresetAnimateActions(),
+	}
+
+	sequence = (...items: Item.Any[]): Item.Sequence => {
 		const item =  {
-			id: this.#getId(),
+			id: this.getId(),
 			kind: Kind.Sequence,
 			childrenIds: items.map(item => item.id)
 		} as Item.Sequence
-
-		this.#mutate(state => {
-			state.items.push(item, ...items)
-			return state
-		})
-
+		this.register(item)
 		return item
 	}
 
-	stack = (...items: Item.Any[]): Item.Any => {
+	stack = (...items: Item.Any[]): Item.Stack => {
 		const item = {
 			kind: Kind.Stack,
-			id: this.#getId(),
+			id: this.getId(),
 			childrenIds: items.map(item => item.id)
 		} as Item.Stack
-
-		this.#mutate(state => {
-			state.items.push(item, ...items)
-			return state
-		})
-
+		this.register(item)
 		return item
 	}
 
@@ -73,12 +258,12 @@ export class O {
 
 		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
 		}
-
+		this.register(item)
 		return item
 	}
 
@@ -86,7 +271,8 @@ export class O {
 		media: Media,
 		options?: {
 			start?: number,
-			duration?: number
+			duration?: number,
+			gain?: number
 		}): Item.Audio => {
 
 		if(!media.hasAudio)
@@ -94,35 +280,56 @@ export class O {
 
 		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
 		}
-
+		this.register(item)
 		return item
 	}
 
-	text = (content: string): Item.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
 
-	gap = (duration: number): Item.Gap => ({
-		id: this.#getId(),
-		kind: Kind.Gap,
-		duration
-	})
+		if(options?.styles)
+			item.styleId = this.textStyle(options.styles).id
+
+		this.register(item)
+		return item
+	}
+
+	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): Item.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 => {
@@ -142,9 +349,22 @@ export class O {
 		this.#mutate(state => {
 			const parentItem = state.items.find(({id}) => id === parent.id) as Item.Stack
 			parentItem.childrenIds.push(...items.map(item => item.id))
-			state.items.push(...items)
 			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,26 +1,29 @@
 
 import {O} from "./o.js"
 import {Item} from "../parts/item.js"
+import {fps} from "../../units/fps.js"
 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 {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) => Item.Any): TimelineFile => {
 		const o = new O({
-			project: {
+			timeline: {
 				format: "timeline",
 				info: "https://omniclip.app/",
 				version: 0,
@@ -29,12 +32,25 @@ export class Omni {
 			}
 		})
 		const root = fn(o)
-		o.state.project.rootId = root.id
-		return o.state.project
+		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
+		})
 	}
 }