@omnimedia/omnitool 1.1.0-9 → 1.1.0-91

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/filmstrip.ts

@@ -17,7 +17,7 @@ export class Filmstrip {
 
 	private constructor(
 		private videoTrack: InputVideoTrack,
-		private options: Required<FilmstripOptions>
+		private options: FilmstripOptions
 	) {
 		this.#sink = new CanvasSink(videoTrack, options.canvasSinkOptions)
 	}
@@ -33,7 +33,8 @@ export class Filmstrip {
 				videoTrack, {
 					frequency: options.frequency ?? 1,
 					canvasSinkOptions: options.canvasSinkOptions ?? {width: 80, height: 50, fit: "fill"},
-					onChange: options.onChange
+					onChange: options.onChange,
+					onPlaceholders: options.onPlaceholders
 			})
 		else throw new Error("Source has no video track")
 	}
@@ -54,9 +55,28 @@ export class Filmstrip {
 		return this.options.frequency
 	}
 
-	#computeActiveRange([start, end]: TimeRange): TimeRange {
+	#computeActiveRange([start, end]: TimeRange, margin = 1): TimeRange {
 		const tileSize = end - start
-		return [start - tileSize, end + tileSize]
+		return [start - tileSize * margin, end + tileSize * margin]
+	}
+
+	async #generatePlaceholders() {
+		const [rangeStart, rangeEnd] = this.#activeRange
+		const neededTimestamps = new Set<number>()
+
+		// duration should be computed but with trim etc also
+		const duration = await this.videoTrack.computeDuration()
+		for (
+			let timestamp = Math.max(0, rangeStart);
+			timestamp <= rangeEnd;
+			timestamp += this.options.frequency
+		) {
+			// Clamp to valid time range
+			if (timestamp >= 0 && timestamp <= duration)
+				neededTimestamps.add(timestamp)
+		}
+
+		this.options.onPlaceholders?.([...neededTimestamps])
 	}
 
 	async #generateTiles() {
@@ -66,13 +86,13 @@ export class Filmstrip {
 		// duration should be computed but with trim etc also
 		const duration = await this.videoTrack.computeDuration()
 		for (
-			let timestamp = rangeStart;
+			let timestamp = Math.max(0, rangeStart);
 			timestamp <= rangeEnd;
 			timestamp += this.options.frequency
 		) {
 			// Clamp to valid time range
 			if (timestamp >= 0 && timestamp <= duration)
-				neededTimestamps.add(+timestamp.toFixed(3))
+				neededTimestamps.add(timestamp)
 		}
 
 		const missingTimestamps = [...neededTimestamps]
@@ -106,15 +126,20 @@ export class Filmstrip {
  	* @param visibleRange - The current timeline viewport as a [start, end] tuple in seconds.
  	*/
 	set range(visibleRange: TimeRange) {
-		const newRange = this.#computeActiveRange(visibleRange)
-		// Avoid redundant updates
-		if (
-			this.#activeRange[0] === newRange[0] &&
-			this.#activeRange[1] === newRange[1]
-		)
-			return
+		const [visStart, visEnd] = visibleRange
+		const visibleSize = visEnd - visStart
+		const [actStart, actEnd] = this.#activeRange
+
+		// trigger when we're 1x visible width away from margin edges
+		const leftTrigger = actStart + visibleSize
+		const rightTrigger = actEnd - visibleSize
+
+		const nearLeftEdge = visStart < leftTrigger
+		const nearRightEdge = visEnd > rightTrigger
+
+		if (!nearLeftEdge && !nearRightEdge) return
 
-		this.#activeRange = newRange
+		this.#activeRange = this.#computeActiveRange(visibleRange, 2)
 		this.#update()
 	}
 
@@ -122,6 +147,7 @@ export class Filmstrip {
 	#shouldRunAgain = false
 
 	async #update() {
+		this.#generatePlaceholders()
 		// Perform update immediately. If multiple updates are requested while updating,
 		// only the latest one will run after the current finishes (skips intermediate ones).
 		if(this.#updating) {
@@ -147,11 +173,12 @@ export class Filmstrip {
 	}
 }
 
-type TimeRange = [number, number]
+export type TimeRange = [start: number, end: number]
 
 interface FilmstripOptions {
-	frequency?: number
+	frequency: number
 	canvasSinkOptions?: CanvasSinkOptions
+	onPlaceholders?: (timestamps: number[]) => void
 	onChange: (tiles: {
 		time: number
 		canvas: WrappedCanvas