@omnimedia/omnitool 1.1.0-4 → 1.1.0-7

package/x/features/transition/parts/fragment.d.ts

@@ -0,0 +1 @@
+export declare const fragment: (glsl: string) => string;

package/x/features/transition/parts/fragment.js

@@ -0,0 +1,25 @@
+export const fragment = (glsl) => `
+	precision highp float;
+	varying vec2 vTextureCoord;
+	varying vec2 _uv;
+	uniform sampler2D from, to;
+	uniform float progress, ratio, _fromR, _toR;
+	uniform float customUniform;
+
+	vec4 getFromColor(vec2 uv){
+		return texture2D(from, .5+(uv-.5)*vec2(max(ratio/_fromR,1.), max(_fromR/ratio,1.)));
+	}
+	vec4 getToColor(vec2 uv){
+		return texture2D(to, .5+(uv-.5)*vec2(max(ratio/_toR,1.), max(_toR/ratio,1.)));
+	}
+
+	// gl-transition code here
+	${glsl}
+	// gl-transition code end
+
+	void main(){
+		vec2 uv = vTextureCoord.xy;
+		gl_FragColor = transition(vTextureCoord);
+	}
+`;
+//# sourceMappingURL=fragment.js.map

package/x/features/transition/parts/fragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragment.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/fragment.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC;;;;;;;;;;;;;;;;GAgBvC,IAAI;;;;;;;CAON,CAAA"}

package/x/features/transition/parts/types.d.ts

@@ -0,0 +1,23 @@
+import { Renderer } from "pixi.js";
+export interface TransitionOptions {
+    name: Transition;
+    renderer: Renderer;
+}
+export interface TransitionRendererOptions {
+    from: VideoFrame;
+    to: VideoFrame;
+    progress: number;
+    width: number;
+    height: number;
+}
+export interface GLTransition {
+    author: string;
+    createdAt: string;
+    glsl: string;
+    license: string;
+    name: Transition;
+    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/x/features/transition/parts/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/x/features/transition/parts/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/types.ts"],"names":[],"mappings":""}

package/x/features/transition/parts/uniforms.d.ts

@@ -0,0 +1,31 @@
+import { GLTransition } from "./types.js";
+export declare const uniforms: {
+    custom: (transition: GLTransition) => {
+        [k: string]: {
+            value: unknown;
+            type: string;
+        };
+    };
+    basics: {
+        _fromR: {
+            value: number;
+            type: string;
+        };
+        _toR: {
+            value: number;
+            type: string;
+        };
+        ratio: {
+            value: number;
+            type: string;
+        };
+        progress: {
+            value: number;
+            type: string;
+        };
+        customUniform: {
+            value: number;
+            type: string;
+        };
+    };
+};

package/x/features/transition/parts/uniforms.js

@@ -0,0 +1,27 @@
+export const uniforms = {
+    custom: (transition) => Object.fromEntries(Object.entries(transition.defaultParams).map(([name, value]) => [
+        name,
+        {
+            value,
+            type: getUniformType(transition.paramsTypes[name])
+        }
+    ])),
+    basics: {
+        _fromR: { value: 1, type: "f32" },
+        _toR: { value: 1, type: "f32" },
+        ratio: { value: 1, type: "f32" },
+        progress: { value: 0, type: "f32" },
+        customUniform: { value: 0, type: "f32" },
+    }
+};
+const getUniformType = (type) => {
+    if (type === "f32" || type === "i32") {
+        return type;
+    }
+    else if (type === "float") {
+        return "f32";
+    }
+    else
+        return `${type}<f32>`;
+};
+//# sourceMappingURL=uniforms.js.map

package/x/features/transition/parts/uniforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uniforms.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/uniforms.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACvB,MAAM,EAAE,CAAC,UAAwB,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CACvD,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QAC/D,IAAI;QACJ;YACC,KAAK;YACL,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAClD;KACD,CAAC,CACF;IACD,MAAM,EAAE;QACP,MAAM,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QAC/B,IAAI,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QAC7B,KAAK,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QAC9B,QAAQ,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QACjC,aAAa,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;KACtC;CACD,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,EAAE;IACvC,IAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACrC,OAAO,IAAI,CAAA;IACZ,CAAC;SAAM,IAAG,IAAI,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAA;IACb,CAAC;;QACI,OAAO,GAAG,IAAI,OAAO,CAAA;AAC3B,CAAC,CAAA"}

package/x/features/transition/parts/vertex.d.ts

@@ -0,0 +1 @@
+export declare const vertex = "\n\tin vec2 aPosition;\n\tvarying vec2 _uv;                          // gl-transition\n\tuniform mat3 projectionMatrix;\n\tuniform vec4 uInputSize;\n\tuniform vec4 uOutputFrame;\n\tout vec2 vTextureCoord;\n\tuniform vec4 uOutputTexture;\n\n\tvec4 filterVertexPosition( void )\n\t{\n\t\t\tvec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n\n\t\t\tposition.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n\t\t\tposition.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n\t\t\treturn vec4(position, 0.0, 1.0);\n\t}\n\n\tvec2 filterTextureCoord( void )\n\t{\n\treturn aPosition * (uOutputFrame.zw * uInputSize.zw);\n\t}\n\n\tvoid main(void)\n\t{\n\tgl_Position = filterVertexPosition();\n\tvTextureCoord = filterTextureCoord();\n\t_uv = vec2(0.5, 0.5) * (aPosition +vec2(1.0, 1.0));    // gl-transition\n\t}\n";

package/x/features/transition/parts/vertex.js

@@ -0,0 +1,32 @@
+export const vertex = `
+	in vec2 aPosition;
+	varying vec2 _uv;                          // gl-transition
+	uniform mat3 projectionMatrix;
+	uniform vec4 uInputSize;
+	uniform vec4 uOutputFrame;
+	out vec2 vTextureCoord;
+	uniform vec4 uOutputTexture;
+
+	vec4 filterVertexPosition( void )
+	{
+			vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+
+			position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+			position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+
+			return vec4(position, 0.0, 1.0);
+	}
+
+	vec2 filterTextureCoord( void )
+	{
+	return aPosition * (uOutputFrame.zw * uInputSize.zw);
+	}
+
+	void main(void)
+	{
+	gl_Position = filterVertexPosition();
+	vTextureCoord = filterTextureCoord();
+	_uv = vec2(0.5, 0.5) * (aPosition +vec2(1.0, 1.0));    // gl-transition
+	}
+`;
+//# sourceMappingURL=vertex.js.map

package/x/features/transition/parts/vertex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertex.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/vertex.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAA"}

package/x/features/transition/transition.d.ts

@@ -0,0 +1,5 @@
+import { Texture } from "pixi.js";
+import { TransitionOptions, TransitionRendererOptions } from "./parts/types.js";
+export declare function makeTransition({ name, renderer }: TransitionOptions): {
+    render({ width, height, from, to, progress }: TransitionRendererOptions): Texture<import("pixi.js").TextureSource<any>>;
+};

package/x/features/transition/transition.js

@@ -0,0 +1,50 @@
+//@ts-ignore
+import transitions from "gl-transitions";
+import { Filter, GlProgram, Sprite, Texture, ImageSource } from "pixi.js";
+import { vertex } from "./parts/vertex.js";
+import { uniforms } from "./parts/uniforms.js";
+import { fragment } from "./parts/fragment.js";
+export function makeTransition({ name, renderer }) {
+    const transition = transitions.find((t) => t.name === name);
+    const transitionSprite = new Sprite();
+    const transitionTexture = new Texture();
+    const sourceFrom = new ImageSource({});
+    const sourceTo = new ImageSource({});
+    const filter = new Filter({
+        glProgram: new GlProgram({
+            vertex,
+            fragment: fragment(transition.glsl),
+        }),
+        resources: {
+            from: sourceFrom,
+            to: sourceTo,
+            uniforms: {
+                ...uniforms.basics,
+                ...uniforms.custom(transition)
+            }
+        }
+    });
+    transitionSprite.filters = [filter];
+    return {
+        render({ width, height, from, to, progress }) {
+            if (transitionSprite.width !== width || transitionSprite.height !== height) {
+                transitionSprite.setSize({ width, height });
+                transitionTexture.source.resize(width, height);
+            }
+            sourceFrom.resource = from;
+            sourceTo.resource = to;
+            sourceFrom.update();
+            sourceTo.update();
+            filter.resources.uniforms.uniforms.progress = progress;
+            renderer.render({
+                container: transitionSprite,
+                target: transitionTexture,
+                clear: false,
+                width,
+                height
+            });
+            return transitionTexture;
+        }
+    };
+}
+//# sourceMappingURL=transition.js.map

package/x/features/transition/transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.js","sourceRoot":"","sources":["../../../s/features/transition/transition.ts"],"names":[],"mappings":"AAAA,YAAY;AACZ,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AAEvE,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAG5C,MAAM,UAAU,cAAc,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAoB;IACjE,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAiB,CAAA;IACzF,MAAM,gBAAgB,GAAG,IAAI,MAAM,EAAE,CAAA;IACrC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAAE,CAAA;IACvC,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;IACtC,MAAM,QAAQ,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;IAEpC,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC;QACzB,SAAS,EAAE,IAAI,SAAS,CAAC;YACxB,MAAM;YACN,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;SACnC,CAAC;QACF,SAAS,EAAE;YACV,IAAI,EAAE,UAAU;YAChB,EAAE,EAAE,QAAQ;YACZ,QAAQ,EAAE;gBACT,GAAG,QAAQ,CAAC,MAAM;gBAClB,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC;aAC9B;SACD;KACD,CAAC,CAAA;IAEF,gBAAgB,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,CAAA;IAEnC,OAAO;QACN,MAAM,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAA4B;YACpE,IAAG,gBAAgB,CAAC,KAAK,KAAK,KAAK,IAAI,gBAAgB,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;gBAC3E,gBAAgB,CAAC,OAAO,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;gBACzC,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;YAC/C,CAAC;YAED,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAA;YAC1B,QAAQ,CAAC,QAAQ,GAAG,EAAE,CAAA;YACtB,UAAU,CAAC,MAAM,EAAE,CAAA;YACnB,QAAQ,CAAC,MAAM,EAAE,CAAA;YAEjB,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAA;YAEtD,QAAQ,CAAC,MAAM,CAAC;gBACf,SAAS,EAAE,gBAAgB;gBAC3B,MAAM,EAAE,iBAAiB;gBACzB,KAAK,EAAE,KAAK;gBACZ,KAAK;gBACL,MAAM;aACN,CAAC,CAAA;YAEF,OAAO,iBAAiB,CAAA;QACzB,CAAC;KACD,CAAA;AACF,CAAC"}

package/x/index.html

@@ -53,6 +53,11 @@ body {
 	}
 }
 
+canvas {
+	width: 500px;
+	height: 300px;
+}
+
 #filmstrip {
 	display: flex;
 	overflow-x: scroll;
@@ -60,7 +65,7 @@ body {
 }
 
 </style>
-					<script type=module src="demo/demo.bundle.min.js?v=7ebfc5a6da44"></script>
+					<script type=module src="demo/demo.bundle.min.js?v=a1a457609cb3"></script>
 
 
 		<meta name="theme-color" content="#3cff9c">
@@ -80,9 +85,9 @@ body {
 				<body>
 
 	<section>
-		<h1>Omnitool <small>v1.1.0-4</small></h1>
+		<h1>Omnitool <small>v1.1.0-7</small></h1>
 		<button class=fetch>fetch</button>
-		<button class="import">import</button>
+		<input type="file" class="file-input">
 		<div class=results></div>
 		<div class=filmstrip-demo>
 			<label for="viewable-range">viewable range:</label>
@@ -99,6 +104,11 @@ body {
 			<label for="width">width:</label>
 			<input class="width" id="width" name="width" type="range" min="100" max="1000000" value="1000" />
 		</div>
+		<div class=player>
+			<input class="seek" type="number" min="0">
+			<button class=play>play</button>
+			<button class=stop>stop</button>
+		</div>
 	</section>
 
 				</body>

package/x/index.html.js

@@ -24,7 +24,7 @@ export default ssg.page(import.meta.url, async (orb) => ({
 		<section>
 			<h1>Omnitool <small>v${orb.packageVersion()}</small></h1>
 			<button class=fetch>fetch</button>
-			<button class="import">import</button>
+			<input type="file" class="file-input">
 			<div class=results></div>
 			<div class=filmstrip-demo>
 				<label for="viewable-range">viewable range:</label>
@@ -41,6 +41,11 @@ export default ssg.page(import.meta.url, async (orb) => ({
 				<label for="width">width:</label>
 				<input class="width" id="width" name="width" type="range" min="100" max="1000000" value="1000" />
 			</div>
+			<div class=player>
+				<input class="seek" type="number" min="0">
+				<button class=play>play</button>
+				<button class=stop>stop</button>
+			</div>
 		</section>
 	`,
 }));

package/x/index.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,UAAU,CAAA;AACxB,MAAM,MAAM,GAAG,uBAAuB,CAAA;AACtC,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,WAAW;IACX,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,eAAe;IACpB,EAAE,EAAE,yBAAyB;IAE7B,IAAI,EAAE,IAAI,CAAA;;;;EAIT;IAED,UAAU,EAAE;QACX,KAAK;QACL,WAAW,EAAE,0BAA0B;QACvC,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,WAAW,MAAM,GAAG,OAAO,EAAE;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;0BAEe,GAAG,CAAC,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;EAoB5C;CACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,UAAU,CAAA;AACxB,MAAM,MAAM,GAAG,uBAAuB,CAAA;AACtC,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,WAAW;IACX,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,eAAe;IACpB,EAAE,EAAE,yBAAyB;IAE7B,IAAI,EAAE,IAAI,CAAA;;;;EAIT;IAED,UAAU,EAAE;QACX,KAAK;QACL,WAAW,EAAE,0BAA0B;QACvC,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,WAAW,MAAM,GAAG,OAAO,EAAE;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;0BAEe,GAAG,CAAC,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;EAyB5C;CACD,CAAC,CAAC,CAAA"}

package/x/timeline/parts/basics.d.ts

@@ -7,6 +7,6 @@ export type TimelineFile = {
     info: "https://omniclip.app/";
     format: "timeline";
     version: number;
-    root: Id;
+    rootId: Id;
     items: Item.Any[];
 };

package/x/timeline/parts/compositor/export.d.ts

@@ -0,0 +1,9 @@
+import { TimelineFile } from "../basics.js";
+import { DecoderSource } from "../../../driver/fns/schematic.js";
+export declare class Export {
+    #private;
+    private framerate;
+    private resolveMedia;
+    constructor(framerate?: number, resolveMedia?: (hash: string) => DecoderSource);
+    render(timeline: TimelineFile): Promise<void>;
+}

package/x/timeline/parts/compositor/export.js

@@ -0,0 +1,64 @@
+import { context } from "../../../context.js";
+import { fixedStep } from "./parts/schedulers.js";
+import { makeWebCodecsSampler } from "./samplers/webcodecs.js";
+import { buildWebCodecsNodeTree } from "./parts/webcodecs-tree.js";
+export class Export {
+    framerate;
+    resolveMedia;
+    #sampler;
+    constructor(framerate = 30, resolveMedia = _hash => "/assets/temp/gl.mp4") {
+        this.framerate = framerate;
+        this.resolveMedia = resolveMedia;
+        this.#sampler = makeWebCodecsSampler(this.resolveMedia);
+    }
+    async #build(timeline) {
+        const rootItem = new Map(timeline.items.map(i => [i.id, i])).get(timeline.rootId);
+        const items = new Map(timeline.items.map(i => [i.id, i]));
+        return await buildWebCodecsNodeTree(rootItem, items, this.#sampler);
+    }
+    async render(timeline) {
+        const root = await this.#build(timeline);
+        const driver = await context.driver;
+        const videoStream = new TransformStream();
+        const audioStream = new TransformStream();
+        const encodePromise = driver.encode({
+            video: videoStream.readable,
+            audio: audioStream.readable,
+            config: {
+                audio: { codec: "opus", bitrate: 128000 },
+                video: { codec: "vp9", bitrate: 1000000 },
+            },
+        });
+        const videoWriter = videoStream.writable.getWriter();
+        const audioWriter = audioStream.writable.getWriter();
+        const audioPromise = (async () => {
+            if (root.audio) {
+                for await (const chunk of root.audio.getStream()) {
+                    await audioWriter.write(chunk);
+                }
+            }
+            await audioWriter.close();
+        })();
+        const videoPromise = (async () => {
+            let i = 0;
+            const dt = 1 / this.framerate;
+            await fixedStep({ fps: this.framerate, duration: root.duration ?? 0 }, async (t) => {
+                const layers = await root.visuals?.sampleAt(t) ?? [];
+                const composed = await driver.composite(layers);
+                const vf = new VideoFrame(composed, {
+                    timestamp: Math.round(i * dt * 1_000_000),
+                    duration: Math.round(dt * 1_000_000),
+                });
+                await videoWriter.write(vf);
+                composed.close();
+                i++;
+            });
+            await videoWriter.close();
+        })();
+        await audioPromise;
+        await videoPromise;
+        await encodePromise;
+        // this.#sampler.dispose()
+    }
+}
+//# sourceMappingURL=export.js.map

package/x/timeline/parts/compositor/export.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"export.js","sourceRoot":"","sources":["../../../../s/timeline/parts/compositor/export.ts"],"names":[],"mappings":"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"}

package/x/timeline/parts/compositor/parts/html-tree.d.ts

@@ -0,0 +1,3 @@
+import { Item } from "../../item.js";
+import { AudioPlaybackComponent, HTMLSampler, Node } from "./tree-builder.js";
+export declare function buildHTMLNodeTree(root: Item.Any, items: Map<number, Item.Any>, sampler: HTMLSampler): Promise<Node<AudioPlaybackComponent>>;

package/x/timeline/parts/compositor/parts/html-tree.js

@@ -0,0 +1,40 @@
+import { TreeBuilder } from "./tree-builder.js";
+class HTMLNodeBuilder extends TreeBuilder {
+    items;
+    sampler;
+    constructor(items, sampler) {
+        super(items, sampler);
+        this.items = items;
+        this.sampler = sampler;
+    }
+    composeAudio_Stack(children) {
+        return {
+            onTimeUpdate: (time) => {
+                for (const child of children) {
+                    if (child.audio)
+                        child.audio.onTimeUpdate(time);
+                }
+            }
+        };
+    }
+    composeAudio_Sequence(children) {
+        return {
+            onTimeUpdate: (time) => {
+                let localTime = time;
+                for (const child of children) {
+                    if (localTime < child.duration) {
+                        if (child.audio)
+                            child.audio.onTimeUpdate(localTime);
+                        break;
+                    }
+                    localTime -= child.duration;
+                }
+            }
+        };
+    }
+}
+export function buildHTMLNodeTree(root, items, sampler) {
+    const builder = new HTMLNodeBuilder(items, sampler);
+    return builder.build(root);
+}
+//# sourceMappingURL=html-tree.js.map

package/x/timeline/parts/compositor/parts/html-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-tree.js","sourceRoot":"","sources":["../../../../../s/timeline/parts/compositor/parts/html-tree.ts"],"names":[],"mappings":"AACA,OAAO,EAA4C,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAExF,MAAM,eAAgB,SAAQ,WAAmC;IAC1C;IAAwC;IAA9D,YAAsB,KAA4B,EAAY,OAAoB;QACjF,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QADA,UAAK,GAAL,KAAK,CAAuB;QAAY,YAAO,GAAP,OAAO,CAAa;IAElF,CAAC;IAED,kBAAkB,CAAC,QAAwC;QAC1D,OAAO;YACN,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE;gBAC9B,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;oBAC9B,IAAI,KAAK,CAAC,KAAK;wBAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;gBAChD,CAAC;YACF,CAAC;SACD,CAAA;IACF,CAAC;IACD,qBAAqB,CAAC,QAAwC;QAC7D,OAAO;YACN,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE;gBAC9B,IAAI,SAAS,GAAG,IAAI,CAAA;gBACpB,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;oBAC9B,IAAI,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;wBAChC,IAAI,KAAK,CAAC,KAAK;4BAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;wBACpD,MAAK;oBACN,CAAC;oBACD,SAAS,IAAI,KAAK,CAAC,QAAQ,CAAA;gBAC5B,CAAC;YACF,CAAC;SACD,CAAA;IACF,CAAC;CACD;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAc,EAAE,KAA4B,EAAE,OAAoB;IACnG,MAAM,OAAO,GAAG,IAAI,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACnD,OAAO,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AAC3B,CAAC"}

package/x/timeline/parts/compositor/parts/schedulers.d.ts

@@ -0,0 +1,15 @@
+export type RealtimeController = {
+    play(): void;
+    pause(): void;
+    seek(t: number): void;
+    dispose(): void;
+    setFPS(v: number): void;
+    isPlaying(): boolean;
+};
+export declare const realtime: (onTick: (t: number) => void) => RealtimeController;
+export type FixedStepOptions = {
+    fps: number;
+    duration: number;
+    abort?: AbortSignal;
+};
+export declare const fixedStep: (opts: FixedStepOptions, onFrame: (t: number, index: number) => Promise<void> | void) => Promise<void>;

package/x/timeline/parts/compositor/parts/schedulers.js

@@ -0,0 +1,64 @@
+export const realtime = (onTick) => {
+    let playing = false;
+    let rafId = null;
+    let fps = 60;
+    let frameDuration = 1000 / fps;
+    let currentTimeS = 0;
+    let lastTime = 0;
+    let accumulator = 0;
+    const tick = (now) => {
+        if (!playing)
+            return;
+        const deltaTime = now - lastTime;
+        lastTime = now;
+        accumulator += deltaTime;
+        while (accumulator >= frameDuration) {
+            onTick(currentTimeS);
+            currentTimeS += frameDuration / 1000;
+            accumulator -= frameDuration;
+        }
+        rafId = requestAnimationFrame(tick);
+    };
+    return {
+        play() {
+            if (playing)
+                return;
+            playing = true;
+            lastTime = performance.now();
+            rafId = requestAnimationFrame(tick);
+        },
+        pause() {
+            if (!playing)
+                return;
+            playing = false;
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = null;
+        },
+        seek(t) {
+            currentTimeS = Math.max(0, t);
+            accumulator = 0;
+        },
+        dispose() {
+            this.pause();
+        },
+        isPlaying() {
+            return playing;
+        },
+        setFPS(v) {
+            fps = v;
+            frameDuration = 1000 / fps;
+        }
+    };
+};
+export const fixedStep = async (opts, onFrame) => {
+    const dt = 1 / opts.fps;
+    const total = Math.ceil(opts.duration * opts.fps);
+    for (let i = 0; i < total; i++) {
+        if (opts.abort?.aborted)
+            break;
+        const t = i * dt;
+        await onFrame(t, i);
+    }
+};
+//# sourceMappingURL=schedulers.js.map

package/x/timeline/parts/compositor/parts/schedulers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedulers.js","sourceRoot":"","sources":["../../../../../s/timeline/parts/compositor/parts/schedulers.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAA2B,EAAsB,EAAE;IAC1E,IAAI,OAAO,GAAG,KAAK,CAAA;IACnB,IAAI,KAAK,GAAkB,IAAI,CAAA;IAC/B,IAAI,GAAG,GAAG,EAAE,CAAA;IAEZ,IAAI,aAAa,GAAG,IAAI,GAAG,GAAG,CAAA;IAC9B,IAAI,YAAY,GAAG,CAAC,CAAA;IACpB,IAAI,QAAQ,GAAG,CAAC,CAAA;IAChB,IAAI,WAAW,GAAG,CAAC,CAAA;IAEnB,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;QAC3B,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,MAAM,SAAS,GAAG,GAAG,GAAG,QAAQ,CAAA;QAChC,QAAQ,GAAG,GAAG,CAAA;QAEd,WAAW,IAAI,SAAS,CAAA;QAExB,OAAO,WAAW,IAAI,aAAa,EAAE,CAAC;YACpC,MAAM,CAAC,YAAY,CAAC,CAAA;YACpB,YAAY,IAAI,aAAa,GAAG,IAAI,CAAA;YACpC,WAAW,IAAI,aAAa,CAAA;QAC9B,CAAC;QAED,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,OAAO;QACL,IAAI;YACF,IAAI,OAAO;gBAAE,OAAM;YACnB,OAAO,GAAG,IAAI,CAAA;YACd,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;YAC5B,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;QACrC,CAAC;QACD,KAAK;YACH,IAAI,CAAC,OAAO;gBAAE,OAAM;YACpB,OAAO,GAAG,KAAK,CAAA;YACf,IAAI,KAAK,KAAK,IAAI;gBAAE,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC/C,KAAK,GAAG,IAAI,CAAA;QACd,CAAC;QACD,IAAI,CAAC,CAAC;YACJ,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YAC7B,WAAW,GAAG,CAAC,CAAA;QACjB,CAAC;QACD,OAAO;YACL,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;QACD,SAAS;YACP,OAAO,OAAO,CAAA;QAChB,CAAC;QACD,MAAM,CAAC,CAAC;YACP,GAAG,GAAG,CAAC,CAAA;YACP,aAAa,GAAG,IAAI,GAAG,GAAG,CAAA;QAC3B,CAAC;KACF,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,EAC7B,IAAsB,EACtB,OAA2D,EAC1D,EAAE;IACH,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAA;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;IAEjD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAChC,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO;YAAE,MAAK;QAC9B,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;QAChB,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IACpB,CAAC;AACF,CAAC,CAAA"}

package/x/timeline/parts/compositor/parts/tree-builder.d.ts

@@ -0,0 +1,37 @@
+import { Item } from "../../item.js";
+import { Layer } from "../../../../driver/fns/schematic.js";
+import { Mat6 } from "../../../utils/matrix.js";
+export type AudioStreamComponent = {
+    getStream: () => AsyncGenerator<AudioData>;
+};
+export type AudioPlaybackComponent = {
+    onTimeUpdate: (time: number) => void;
+};
+export type VisualComponent = {
+    sampleAt: (time: number) => Promise<Layer[]>;
+};
+export type Node<T> = {
+    duration: number;
+    visuals?: VisualComponent;
+    audio?: T;
+};
+interface Sampler<T> {
+    video(item: Item.Video, parentMatrix: Mat6): Promise<Node<T>>;
+    audio(item: Item.Audio): Promise<Node<T>>;
+    dispose(): Promise<void>;
+}
+export declare const getWorldMat6: (items: Map<number, Item.Any>, item: Item.Text | Item.Sequence | Item.Stack | Item.Video, parent?: Mat6) => Mat6;
+export type WebcodecsSampler = Sampler<AudioStreamComponent>;
+export interface HTMLSampler extends Sampler<AudioPlaybackComponent> {
+    setPaused(v: boolean): void;
+}
+export declare abstract class TreeBuilder<T> {
+    #private;
+    protected items: Map<number, Item.Any>;
+    protected sampler: Sampler<T>;
+    constructor(items: Map<number, Item.Any>, sampler: Sampler<T>);
+    build(root: Item.Any, parentMatrix?: Mat6): Promise<Node<T>>;
+    abstract composeAudio_Stack(children: Node<T>[]): T | undefined;
+    abstract composeAudio_Sequence(children: Node<T>[]): T | undefined;
+}
+export {};