@omnimedia/omnitool 1.1.0-75 → 1.1.0-77

package/README.md

@@ -37,10 +37,11 @@ const timeline = omni.timeline(o => {
 		styles: {fill: "white", fontSize: 48}
 	})
 	const xfade = o.transition.crossfade(500)
+	const softened = o.filter.blur.make({strength: 8, quality: 4})
 
 	return o.sequence(
 		o.stack(
-			o.video(clip, {start: 0, duration: 3000}),
+			o.video(clip, {start: 0, duration: 3000, filterIds: [softened.id]}),
 			caption
 		),
 		o.gap(400),
@@ -56,7 +57,7 @@ Declarative helper style (no explicit `o` in timeline declarations):
 ```ts
 import {
 	Driver, Omni, Datafile,
-	timeline, stack, video, audio, text, gap, transition
+	timeline, stack, video, audio, text, gap, transition, filter
 } from "@omnimedia/omnitool"
 
 const driver = await Driver.setup()
@@ -65,7 +66,10 @@ const {clip} = await omni.load({clip: Datafile.make(file)})
 
 const timeline = timeline(
 	stack(
-		video(clip, {start: 0, duration: 3000}),
+		filter.blur(
+			video(clip, {start: 0, duration: 3000}),
+			{strength: 8, quality: 4}
+		),
 		text("Hello world", {duration: 1500}),
 	),
 	gap(400),
@@ -75,6 +79,52 @@ const timeline = timeline(
 )
 ```
 
+## 🎛 Filters
+
+Inline filter application:
+
+```ts
+const timeline = omni.timeline(o =>
+	o.stack(
+		o.filter.blur(
+			o.video(clip, {duration: 3000}),
+			{strength: 8, quality: 4}
+		),
+		o.filter.glow(
+			o.text("Hello world", {duration: 3000}),
+			{distance: 12, outerStrength: 2, color: "#ffffff"}
+		)
+	)
+)
+```
+
+Reusable filter items:
+
+```ts
+const timeline = omni.timeline(o => {
+	const blur = o.filter.blur.make({strength: 8, quality: 4})
+
+	return o.stack(
+		o.video(clip, {duration: 3000, filterIds: [blur.id]}),
+		o.text("Caption", {duration: 3000, styles: {fill: "white"}})
+	)
+})
+```
+
+Filter metadata for UI:
+
+```ts
+import {
+	filterTypes,
+	filterSchemas,
+	getFilterDefaultParams
+} from "@omnimedia/omnitool"
+
+const available = Object.entries(filterTypes)
+const schema = filterSchemas.BlurFilter
+const defaults = getFilterDefaultParams("BlurFilter")
+```
+
 ## 🧭 Spatial Transforms
 
 ```ts
@@ -156,6 +206,7 @@ Timeline items:
 - 6 `Spatial`
 - 7 `Transition`
 - 8 `TextStyle`
+- 9 `Filter`
 
 ## 🗺️ Roadmap
 - CLI commands:
@@ -180,4 +231,3 @@ omnitool ai "make a 15s promo for tea"
 - smooth seeking
 - keyframes
 - server-side, not just browsers
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-75",
+	"version": "1.1.0-77",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",
@@ -43,6 +43,7 @@
 		"gsap": "^3.14.2",
 		"lit": "^3.3.2",
 		"mediabunny": "^1.27.3",
+		"pixi-filters": "^6.1.5",
 		"pixi.js": "^8.14.3",
 		"wavesurfer.js": "^7.12.1"
 	},

package/s/driver/fns/schematic.ts

@@ -3,9 +3,10 @@ import {TextStyleOptions} from "pixi.js"
 import {AsSchematic} from "@e280/comrade"
 import type {AudioEncodingConfig, StreamTargetChunk, VideoEncodingConfig} from "mediabunny"
 
-import {Mat6} from "../../timeline/utils/matrix.js"
 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"
 
 export type DriverSchematic = AsSchematic<{
 
@@ -74,6 +75,13 @@ export interface MuxOpts {
 
 export type Composition = Layer | (Layer | Composition)[]
 
+export type FilterSpec = {
+	[TFilter in FilterType]: {
+		type: TFilter
+		params?: FilterParams<TFilter>
+	}
+}[FilterType]
+
 export type TextLayer = {
 	id: Id
 	kind: 'text'
@@ -81,6 +89,7 @@ export type TextLayer = {
 	style?: TextStyleOptions
 	matrix?: Mat6
 	crop?: Crop
+	filters?: FilterSpec[]
 }
 
 export type ImageLayer = {
@@ -89,6 +98,7 @@ export type ImageLayer = {
 	frame: VideoFrame
 	matrix?: Mat6
 	crop?: Crop
+	filters?: FilterSpec[]
 }
 
 export type TransitionLayer = {
@@ -112,4 +122,3 @@ export type Audio = {
 }
 
 export type Layer = TextLayer | ImageLayer | TransitionLayer | GapLayer
-

package/s/driver/parts/compositor.ts

@@ -1,10 +1,23 @@
 
 import {pub} from "@e280/stz"
-import {autoDetectRenderer, Container, FederatedPointerEvent, Graphics, Renderer, Sprite, Text, Texture} from "pixi.js"
+import {
+	autoDetectRenderer,
+	ColorMatrixFilter,
+	Container,
+	FederatedPointerEvent,
+	Filter,
+	Graphics,
+	Renderer,
+	Sprite,
+	Text,
+	Texture
+} from "pixi.js"
+import * as PixiFilters from "pixi-filters"
 
 import {Id} from "../../timeline/index.js"
 import {Crop} from "../../timeline/parts/item.js"
-import {Composition, Layer} from "../fns/schematic.js"
+import {findPixiFilter} from "../utils/find-pixi-filter.js"
+import {Composition, FilterSpec, Layer} from "../fns/schematic.js"
 import {Mat6, mat6ToMatrix} from "../../timeline/utils/matrix.js"
 import {makeTransition} from "../../features/transition/transition.js"
 
@@ -99,6 +112,7 @@ export class Compositor {
 		const sprite = this.#findOrCreate<Text>(layer)!
 		this.#applyTransform(sprite, layer.matrix)
 		this.#applyCrop(sprite, layer.crop)
+		this.#applyFilters(sprite, layer.filters)
 		parent.addChild(sprite)
 		return {
 			dispose: () => {}
@@ -119,6 +133,7 @@ export class Compositor {
 		sprite.texture = texture
 		this.#applyTransform(sprite, layer.matrix)
 		this.#applyCrop(sprite, layer.crop)
+		this.#applyFilters(sprite, layer.filters)
 		parent.addChild(sprite)
 
 		return {
@@ -164,7 +179,10 @@ export class Compositor {
 			return
 
 		const [top, right, bottom, left] = crop
+		const activeMask = target.mask
+		target.mask = null
 		const bounds = target.getLocalBounds()
+		target.mask = activeMask
 		const x = bounds.x + bounds.width * left
 		const y = bounds.y + bounds.height * top
 		const width = bounds.width * Math.max(0, 1 - left - right)
@@ -180,6 +198,35 @@ export class Compositor {
 		this.#cropMasks.set(target, mask)
 	}
 
+	#applyFilters(target: Container, specs: FilterSpec[] | undefined) {
+		if (!specs?.length) {
+			target.filters = null
+			return
+		}
+
+		target.filters = specs
+			.map((spec): Filter | undefined => {
+				switch (spec.type) {
+					case "ColorMatrixFilter": {
+						const {matrix, ...params} = spec.params ?? {}
+						const filter = new ColorMatrixFilter(params)
+						if (matrix)
+							filter.matrix = matrix
+						return filter
+					}
+					case "EmbossFilter":
+						return new PixiFilters.EmbossFilter(spec.params?.strength)
+					case "PixelateFilter":
+						return new PixiFilters.PixelateFilter(spec.params?.size)
+					default: {
+						const PixiFilter = findPixiFilter(spec.type)
+						return PixiFilter ? new PixiFilter(spec.params) : undefined
+					}
+				}
+			})
+			.filter((filter): filter is Filter => !!filter)
+	}
+
 	#findOrCreate<T = Container>(layer: Layer) {
 		const object = this.#activeObjects.get(layer.id)
 		if(!object) {
@@ -261,4 +308,3 @@ export class Compositor {
 		}
 	}
 }
-

package/s/driver/utils/find-pixi-filter.ts

@@ -0,0 +1,24 @@
+import {
+	AlphaFilter,
+	BlurFilter,
+	ColorMatrixFilter,
+	NoiseFilter,
+	Filter,
+} from "pixi.js"
+import * as PixiFilters from "pixi-filters"
+
+import type {FilterType} from "../../timeline/parts/filters.js"
+
+type FilterConstructor = new (options?: any) => Filter
+
+const pixiFilters: Partial<Record<FilterType, FilterConstructor>> = {
+	AlphaFilter,
+	BlurFilter,
+	ColorMatrixFilter,
+	NoiseFilter,
+	...PixiFilters
+}
+
+export function findPixiFilter(type: FilterType) {
+	return pixiFilters[type]
+}

package/s/timeline/index.ts

@@ -1,5 +1,6 @@
 
 export * from "./parts/basics.js"
+export * from "./parts/filters.js"
 export * from "./parts/item.js"
 export * from "./parts/media.js"
 export * from "./parts/resource-pool.js"
@@ -16,4 +17,3 @@ export * from "./sugar/omni.js"
 
 export * from "./utils/checksum.js"
 export * from "./utils/datafile.js"
-