@omnimedia/omnitool 1.1.0-98 → 1.1.0-99

package/README.md

@@ -36,17 +36,21 @@ const timeline = omni.timeline(o => {
 		duration: 1500,
 		styles: {fill: "white", fontSize: 48}
 	})
-	const xfade = o.transition.crossfade(500)
+	const xfade = o.transition.fade(500)
 	const softened = o.filter.blur.make({strength: 8, quality: 4})
 
-	return o.sequence(
+	const visual = o.sequence(
 		o.stack(
 			o.video(clip, {start: 0, duration: 3000, filterIds: [softened.id]}),
 			caption
 		),
-		o.gap(400),
 		xfade,
 		o.video(clip, {start: 5000, duration: 2500}),
+		o.gap(400)
+	)
+
+	return o.stack(
+		visual,
 		o.audio(clip, {start: 5000, duration: 2500})
 	)
 })
@@ -57,7 +61,7 @@ Declarative helper style (no explicit `o` in timeline declarations):
 ```ts
 import {
 	Driver, Omni, Datafile,
-	timeline, stack, video, audio, text, gap, transition, filter
+	timeline, sequence, stack, video, audio, text, gap, transition, filter
 } from "@omnimedia/omnitool"
 
 const driver = await Driver.setup()
@@ -66,16 +70,20 @@ const {clip} = await omni.load({clip: Datafile.make(file)})
 
 const timeline = timeline(
 	stack(
-		filter.blur(
-			video(clip, {start: 0, duration: 3000}),
-			{strength: 8, quality: 4}
+		sequence(
+			stack(
+				filter.blur(
+					video(clip, {start: 0, duration: 3000}),
+					{strength: 8, quality: 4}
+				),
+				text("Hello world", {duration: 1500}),
+			),
+			transition.fade(500),
+			video(clip, {start: 5000, duration: 2500}),
+			gap(400),
 		),
-		text("Hello world", {duration: 1500}),
-	),
-	gap(400),
-	transition.crossfade(500),
-	video(clip, {start: 5000, duration: 2500}),
-	audio(clip, {start: 5000, duration: 2500})
+		audio(clip, {start: 5000, duration: 2500})
+	)
 )
 ```
 
@@ -458,6 +466,31 @@ const opacity = resolveScalarAnimation(localTime, opacityAnimation)
 `localTime` is time relative to the item being resolved.
 `clamp` is the default and currently only extrapolation mode, holding the first or last keyframe value outside the authored range.
 
+## 🔀 Transitions
+
+Transitions are sequence items placed between two visual items.
+
+```ts
+const timeline = omni.timeline(o =>
+	o.sequence(
+		o.video(firstClip, {duration: 3000}),
+		o.transition.fade(700),
+		o.video(secondClip, {duration: 3000}),
+	)
+)
+```
+
+Use the exported transition registry to build UI:
+
+```ts
+import {transitions} from "@omnimedia/omnitool"
+
+const options = Object.entries(transitions).map(([key, transition]) => ({
+	key,
+	label: transition.label,
+}))
+```
+
 Worker URL notes:
 - `Driver.setup()` defaults to `/node_modules/@omnimedia/omnitool/x/driver/driver.worker.bundle.min.js`.
 - If you serve the worker from a different location, pass `workerUrl`:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-98",
+	"version": "1.1.0-99",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",

package/s/demo/routines/timeline-setup.ts

@@ -49,7 +49,7 @@ export async function TimelineSchemaTest(driver: Driver, file: File) {
 		o.set<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationIds: [fade.id, textMotion.id]})
 		o.set<Item.Video>(video.id, {spatialId: videoSpatial.id})
 
-		return o.sequence(
+		const visual = o.sequence(
 			o.stack(
 				text,
 				o.captions(video, transcript, {
@@ -65,12 +65,16 @@ export async function TimelineSchemaTest(driver: Driver, file: File) {
 						wordWrapWidth: 1280,
 						stroke: {color: "#000000", width: 6},
 					},
-				}),
-				o.audio(videoA, {start: 3000})
+				})
 			),
-			o.gap(500),
+			o.transition.circle(1500),
 			o.video(videoA, {duration: 7000, start: 5000})
 		)
+
+		return o.stack(
+			visual,
+			o.audio(videoA, {start: 3000, duration: video.duration})
+		)
 	})
 
 	return {timeline, omni}

package/s/driver/fns/schematic.ts

@@ -7,6 +7,7 @@ import {Id} from "../../timeline/index.js"
 import {Crop} from "../../timeline/parts/item.js"
 import {Mat6} from "../../timeline/utils/matrix.js"
 import {FilterParams, FilterType} from "../../timeline/parts/filters.js"
+import {TransitionName} from "../../timeline/parts/transitions.js"
 
 export type DriverSchematic = AsSchematic<{
 
@@ -106,7 +107,7 @@ export type ImageLayer = {
 export type TransitionLayer = {
 	id: Id
   kind: 'transition'
-  name: string
+  name: TransitionName
   progress: number
   from: VideoFrame
   to: VideoFrame

package/s/driver/parts/compositor.ts

@@ -154,7 +154,7 @@ export class Compositor {
 	) {
 		const transition = this.#transitions.get(name) ??
 			(this.#transitions.set(name, makeTransition({
-				name: "circle",
+				name,
 				renderer: this.pixi.renderer
 			})),
 	  	this.#transitions.get(name)!

package/s/features/transition/parts/types.ts

@@ -1,7 +1,8 @@
 import {Renderer} from "pixi.js"
+import {TransitionName} from "../../../timeline/parts/transitions.js"
 
 export interface TransitionOptions {
-	name: Transition
+	name: TransitionName
 	renderer: Renderer
 }
 
@@ -18,77 +19,9 @@ export interface GLTransition {
 	createdAt: string
 	glsl: string
 	license: string
-	name: Transition
+	name: TransitionName
 	updatedAt: string
 	defaultParams: any
 	paramsTypes: any
 }
 
-export type Transition =
-  | "Bounce"
-  | "BowTieHorizontal"
-  | "BowTieVertical"
-  | "ButterflyWaveScrawler"
-  | "CircleCrop"
-  | "ColourDistance"
-  | "CrazyParametricFun"
-  | "CrossZoom"
-  | "Directional"
-  | "DoomScreenTransition"
-  | "Dreamy"
-  | "DreamyZoom"
-  | "GlitchDisplace"
-  | "GlitchMemories"
-  | "GridFlip"
-  | "InvertedPageCurl"
-  | "LinearBlur"
-  | "Mosaic"
-  | "PolkaDotsCurtain"
-  | "Radial"
-  | "SimpleZoom"
-  | "StereoViewer"
-  | "Swirl"
-  | "WaterDrop"
-  | "ZoomInCircles"
-  | "angular"
-  | "burn"
-  | "cannabisleaf"
-  | "circle"
-  | "circleopen"
-  | "colorphase"
-  | "crosshatch"
-  | "crosswarp"
-  | "cube"
-  | "directionalwarp"
-  | "directionalwipe"
-  | "displacement"
-  | "doorway"
-  | "fade"
-  | "fadecolor"
-  | "fadegrayscale"
-  | "flyeye"
-  | "heart"
-  | "hexagonalize"
-  | "kaleidoscope"
-  | "luma"
-  | "luminance_melt"
-  | "morph"
-  | "multiply_blend"
-  | "perlin"
-  | "pinwheel"
-  | "pixelize"
-  | "polar_function"
-  | "randomsquares"
-  | "ripple"
-  | "rotate_scale_fade"
-  | "squareswire"
-  | "squeeze"
-  | "swap"
-  | "undulatingBurnOut"
-  | "wind"
-  | "windowblinds"
-  | "windowslice"
-  | "wipeDown"
-  | "wipeLeft"
-  | "wipeRight"
-  | "wipeUp"

package/s/timeline/index.ts

@@ -4,6 +4,7 @@ export * from "./parts/basics.js"
 export * from "./parts/filters.js"
 export * from "./parts/item.js"
 export * from "./parts/media.js"
+export * from "./parts/transitions.js"
 export * from "./parts/resource-pool.js"
 export * from "./parts/resource.js"
 export * from "./parts/filmstrip.js"

package/s/timeline/parts/item.ts

@@ -3,6 +3,7 @@ import {TextStyleOptions} from "pixi.js"
 
 import {Id, Hash} from "./basics.js"
 import {Ms} from "../../units/ms.js"
+import type {TransitionName} from "./transitions.js"
 import {Transform, VisualAnimations} from "../types.js"
 import type {FilterParams, FilterType} from "./filters.js"
 import type {Transcription} from "../../features/speech/transcribe/types.js"
@@ -25,10 +26,6 @@ export enum Kind {
 	Image
 }
 
-export enum Effect {
-	Crossfade,
-}
-
 export namespace Item {
 	export type TextStyle = {
 		id: Id
@@ -142,7 +139,7 @@ export namespace Item {
 	export type Transition = {
 		id: Id
 		kind: Kind.Transition
-		effect: Effect.Crossfade
+		name: TransitionName
 		duration: number
 	}
 

package/s/timeline/parts/transitions.ts

@@ -0,0 +1,102 @@
+import type {Item} from "./item.js"
+
+export const transitionNames = [
+	"Bounce",
+	"BowTieHorizontal",
+	"BowTieVertical",
+	"ButterflyWaveScrawler",
+	"CircleCrop",
+	"ColourDistance",
+	"CrazyParametricFun",
+	"CrossZoom",
+	"Directional",
+	"DoomScreenTransition",
+	"Dreamy",
+	"DreamyZoom",
+	"GlitchDisplace",
+	"GlitchMemories",
+	"GridFlip",
+	"InvertedPageCurl",
+	"LinearBlur",
+	"Mosaic",
+	"PolkaDotsCurtain",
+	"Radial",
+	"SimpleZoom",
+	"StereoViewer",
+	"Swirl",
+	"WaterDrop",
+	"ZoomInCircles",
+	"angular",
+	"burn",
+	"cannabisleaf",
+	"circle",
+	"circleopen",
+	"colorphase",
+	"crosshatch",
+	"crosswarp",
+	"cube",
+	"directionalwarp",
+	"directionalwipe",
+	"displacement",
+	"doorway",
+	"fade",
+	"fadecolor",
+	"fadegrayscale",
+	"flyeye",
+	"heart",
+	"hexagonalize",
+	"kaleidoscope",
+	"luma",
+	"luminance_melt",
+	"morph",
+	"multiply_blend",
+	"perlin",
+	"pinwheel",
+	"pixelize",
+	"polar_function",
+	"randomsquares",
+	"ripple",
+	"rotate_scale_fade",
+	"squareswire",
+	"squeeze",
+	"swap",
+	"undulatingBurnOut",
+	"wind",
+	"windowblinds",
+	"windowslice",
+	"wipeDown",
+	"wipeLeft",
+	"wipeRight",
+	"wipeUp",
+] as const
+
+export type TransitionName = typeof transitionNames[number]
+
+export type Transition = {
+	name: TransitionName
+	label: string
+}
+
+export interface TransitionAction {
+	(duration: number): Item.Transition
+}
+
+export type TransitionActions = {
+	[TName in TransitionName]: TransitionAction
+}
+
+export const transitionRegistry = Object.fromEntries(
+	transitionNames.map(name => [name, {
+		name,
+		label: labelizeTransitionName(name),
+	}])
+) as Record<TransitionName, Transition>
+
+export const transitions = transitionRegistry
+
+function labelizeTransitionName(name: string) {
+	return name
+		.replace(/_/g, " ")
+		.replace(/([a-z])([A-Z])/g, "$1 $2")
+		.replace(/\b\w/g, letter => letter.toUpperCase())
+}

package/s/timeline/renderers/parts/samplers/visual/parts/transition.ts

@@ -20,7 +20,7 @@ export async function sampleTransition(
 	return f1 && f2 ? [{
 		id: item.id,
 		kind: "transition",
-		name: "circle",
+		name: item.name,
 		progress,
 		from: f1,
 		to: f2

package/s/timeline/sugar/helpers.ts

@@ -5,6 +5,7 @@ import {O} from "./o.js"
 import {Media} from "../parts/media.js"
 import {TimelineFile} from "../parts/basics.js"
 import {FilterAction} from "../parts/filters.js"
+import {TransitionName, transitions} from "../parts/transitions.js"
 import {filters, FilterParams, FilterType} from "../parts/filters.js"
 import {CaptionOptions, CaptionSourceItem} from "../parts/captions.js"
 import {Transcription} from "../../features/speech/transcribe/types.js"
@@ -20,6 +21,9 @@ type BuildVisualAnimateActions = {
 type BuildPresetAnimateActions = {
 	[TKey in AnimationPreset]: BuildPresetAnimateAction
 }
+type BuildTransitionActions = {
+	[TKey in TransitionName]: (duration: number) => Build<Item.Transition>
+}
 
 function createTimeline(): TimelineFile {
 	return {
@@ -226,9 +230,10 @@ export function textStyle(style: TextStyleOptions): Build<Item.TextStyle> {
 	return o => o.textStyle(style)
 }
 
-export const transition = {
-	crossfade(duration: number): Build<Item.Transition> {
-		return o => o.transition.crossfade(duration)
-	}
+function makeTransitionActions(): BuildTransitionActions {
+	const entries = Object.keys(transitions)
+		.map(key => [key, (duration: number) => (o: O) => o.transition[key as TransitionName](duration)])
+	return Object.fromEntries(entries) as BuildTransitionActions
 }
 
+export const transition = makeTransitionActions()

package/s/timeline/sugar/o.ts

@@ -6,8 +6,9 @@ import {Id, TimelineFile} from "../parts/basics.js"
 import {FilterAction, FilterActions} from "../parts/filters.js"
 import {filters, FilterParams, FilterType} from "../parts/filters.js"
 import {Transcription} from "../../features/speech/transcribe/types.js"
-import {Crop, Effect, FilterableItem, Item, Kind, VisualAnimatableItem} from "../parts/item.js"
+import {Crop, FilterableItem, Item, Kind, VisualAnimatableItem} from "../parts/item.js"
 import {animationPresets, makeAnimationPresets, visualAnimations} from "../parts/animations/registry.js"
+import {TransitionAction, TransitionActions, transitions, TransitionName} from "../parts/transitions.js"
 import {AnimationPreset, PresetAnimateAction, PresetAnimateActions, PresetAnimation, PresetOptions} from "../parts/animations/types.js"
 import {CaptionAction, CaptionActions, captionDuration, CaptionOptions, CaptionPreset, captionPresets, CaptionSourceItem} from "../parts/captions.js"
 import {Anim, AnimateAction, Interpolation, Keyframes, ScalarAnimation, TrackTransform, Transform, TransformAnimation, TransformOptions, Vec2, VisualAnimationInput, VisualAnimationValue, VisualAnimations} from "../types.js"
@@ -395,19 +396,27 @@ export class O {
 		return item
 	}
 
-	transition = {
-		crossfade: (duration: number): Item.Transition => {
-			const item = {
+	#makeTransition = (key: TransitionName): TransitionAction => {
+		return (duration: number): Item.Transition => {
+			const item: Item.Transition = {
 				id: this.getId(),
 				kind: Kind.Transition,
-				effect: Effect.Crossfade,
+				name: transitions[key].name,
 				duration,
-			} as Item.Transition
+			}
 			this.register(item)
 			return item
-		},
+		}
 	}
 
+	#makeTransitions = (): TransitionActions => {
+		const entries = Object.keys(transitions)
+			.map(key => [key, this.#makeTransition(key as TransitionName)])
+		return Object.fromEntries(entries) as TransitionActions
+	}
+
+	transition = this.#makeTransitions()
+
   transform = (options?: TransformOptions): Transform => {
     const position: Vec2 = [
     	options?.position?.[0] ?? 0,

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

@@ -104,7 +104,7 @@ export default Science.suite({
 		const transitionDuration = 1000
 		const o = new O({timeline: omni.timeline(o => o.sequence(
 			o.video(videoA),
-			o.transition.crossfade(transitionDuration),
+			o.transition.fade(transitionDuration),
 			o.video(videoA)
 		))})
 		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
@@ -117,7 +117,7 @@ export default Science.suite({
 		const transitionDuration = 1000
 		const o = new O({timeline: omni.timeline(o => o.stack(
 			o.video(videoA),
-			o.transition.crossfade(transitionDuration),
+			o.transition.fade(transitionDuration),
 			o.video(videoA)
 		))})
 		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
@@ -127,10 +127,10 @@ export default Science.suite({
 	"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.transition.fade(1000),
 			o.video(videoA),
 			o.video(videoA),
-			o.transition.crossfade(1000),
+			o.transition.fade(1000),
 		))})
 		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
 		expect(timelineDuration).is(videoA.duration * 2)
@@ -141,7 +141,7 @@ export default Science.suite({
 		const duration = 3000
 		const o = new O({timeline: omni.timeline(o => o.sequence(
 			o.video(videoA, {duration}),
-			o.transition.crossfade(duration * 2),
+			o.transition.fade(duration * 2),
 			o.video(videoA, {duration})
 		))})
 		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)
@@ -153,9 +153,9 @@ export default Science.suite({
 		const transitionDuration = 1000
 		const o = new O({timeline: omni.timeline(o => o.sequence(
 			o.video(videoA),
-			o.transition.crossfade(transitionDuration),
+			o.transition.fade(transitionDuration),
 			o.video(videoA),
-			o.transition.crossfade(transitionDuration),
+			o.transition.fade(transitionDuration),
 			o.video(videoA)
 		))})
 		const timelineDuration = computeItemDuration(o.timeline.rootId, o.timeline)