fragment-tools 0.2.8 → 0.2.10

package/src/client/app/lib/canvas-recorder/MediaBunnyRecorder.js

@@ -0,0 +1,97 @@
+import CanvasRecorder from './CanvasRecorder.js';
+import {
+	Output,
+	Mp4OutputFormat,
+	MkvOutputFormat,
+	MovOutputFormat,
+	WebMInputFormat,
+	BufferTarget,
+	CanvasSource,
+	Quality,
+	QUALITY_VERY_LOW,
+	QUALITY_LOW,
+	QUALITY_MEDIUM,
+	QUALITY_HIGH,
+	QUALITY_VERY_HIGH,
+	WebMOutputFormat,
+} from 'mediabunny';
+import { map } from '@fragment/utils/math.utils.js';
+import { VIDEO_FORMATS } from '@fragment/state/exports.svelte.js';
+
+class MediaBunnyRecorder extends CanvasRecorder {
+	/** @type Quality[] */
+	static BITRATES = [
+		QUALITY_VERY_LOW,
+		QUALITY_LOW,
+		QUALITY_MEDIUM,
+		QUALITY_HIGH,
+		QUALITY_VERY_HIGH,
+	];
+
+	/**
+	 *
+	 * @param {HTMLCanvasElement} canvas
+	 * @param {object} options
+	 * @param {codec} options.string
+	 */
+	constructor(canvas, { codec, ...options }) {
+		super(canvas, options);
+
+		/** @type {string} */
+		this.codec = codec;
+
+		const outputFormats = new Map();
+		outputFormats.set(VIDEO_FORMATS.MKV, MkvOutputFormat);
+		outputFormats.set(VIDEO_FORMATS.MP4, Mp4OutputFormat);
+		outputFormats.set(VIDEO_FORMATS.MOV, MovOutputFormat);
+		outputFormats.set(VIDEO_FORMATS.WEBM, WebMOutputFormat);
+
+		const outputFormat = outputFormats.get(this.format);
+
+		/** @type {Output} */
+		this.output = new Output({
+			format: new outputFormat(),
+			target: new BufferTarget(),
+		});
+
+		const { BITRATES } = MediaBunnyRecorder;
+
+		const bitrate =
+			BITRATES[
+				Math.floor(map(this.quality, 1, 100, 0, BITRATES.length - 1))
+			];
+
+		/** @type {CanvasSource} */
+		this.videoSource = new CanvasSource(this.canvas, {
+			codec,
+			bitrate,
+		});
+
+		this.output.addVideoTrack(this.videoSource, {
+			frameRate: this.framerate,
+		});
+	}
+
+	async load() {
+		await this.output.start();
+	}
+
+	async tick({ frameCount, time }) {
+		const timestamp = frameCount / this.framerate;
+
+		this.videoSource.add(timestamp, this.frameDuration / 1000);
+	}
+
+	async end() {
+		await this.output.finalize();
+
+		const { mimeType } = this.output.format;
+		const { buffer } = this.output.target;
+
+		this.result = new Blob([buffer], { type: mimeType });
+
+		super.end();
+	}
+}
+
+export default MediaBunnyRecorder;

package/src/client/app/lib/gl/Renderer.js

@@ -8,7 +8,7 @@ class Renderer {
 		premultipliedAlpha = false,
 		pixelRatio = window.devicePixelRatio,
 		webgl = 2,
-	}) {
+	} = {}) {
 		let gl;
 		let attributes = {
 			depth,

package/src/client/app/lib/gl/Texture.js

@@ -8,7 +8,7 @@ class Texture {
 	constructor(
 		gl,
 		{
-			image,
+			image = null,
 			name = '',
 			target = gl.TEXTURE_2D,
 			type = gl.UNSIGNED_BYTE,

package/src/client/app/lib/gl/index.js

@@ -9,7 +9,7 @@ export function fragment({
 	canvas = document.createElement('canvas'),
 	shader = defaultFragment,
 	uniforms = {},
-}) {
+} = {}) {
 	let _fragmentShader = shader;
 	let _vertexShader = defaultVertex;
 	let _uniforms = uniforms;
@@ -30,7 +30,7 @@ export function fragment({
 
 	let w, h, pr;
 
-	function resize({ width = w, height = h, pixelRatio = pr }) {
+	function resize({ width = w, height = h, pixelRatio = pr } = {}) {
 		renderer.setPixelRatio(pixelRatio);
 		renderer.setSize({ width, height });
 

package/src/client/app/modules/AudioAnalyser/Range.svelte

@@ -64,7 +64,7 @@
 		bottom: 0;
 		width: 1px;
 
-		background-color: var(--color-border-input);
+		background-color: var(--fragment-input-border-color);
 	}
 
 	.row {
@@ -83,7 +83,7 @@
 		width: 100%;
 		height: 100%;
 
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 		opacity: var(--opacity, 0);
 		border-radius: 2px;
 	}

package/src/client/app/modules/AudioAnalyser/Spectrum.svelte

@@ -25,8 +25,8 @@
 		grid-template-columns: repeat(10, 1fr);
 		padding: 0 3px;
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 </style>

package/src/client/app/modules/Console/ConsoleLine.svelte

@@ -90,12 +90,12 @@
 	.log {
 		--json-tree-string-color: #17d08e;
 		--arrow-sign: rgba(255, 255, 255, 0.5);
-		--json-tree-font-size: var(--font-size-input);
-		--json-tree-font-family: var(--font-mono);
+		--json-tree-font-size: var(--fragment-input-font-size);
+		--json-tree-font-family: var(--fragment-font-family);
 		--json-tree-number-color: #9980ff;
 		--json-tree-symbol-color: #0a0606;
 		--json-tree-boolean-color: #9980ff;
-		--json-tree-function-color: var(--color-active);
+		--json-tree-function-color: var(--fragment-accent-color);
 		/* --json-tree-number-color: #3029cf; */
 		--json-tree-property-color: #5db0d7;
 		--json-tree-label-color: rgba(240, 240, 240, 0.6);
@@ -124,22 +124,22 @@
 
 	.string {
 		display: block;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 	}
 
 	.function {
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 		font-style: italic;
 		white-space: pre;
 		tab-size: 2em;
 	}
 
 	:global(
-			.log ul > .Number,
-			.log ul > .Boolean,
-			.log ul > .Date,
-			.log ul > .Undefined
-		) {
+		.log ul > .Number,
+		.log ul > .Boolean,
+		.log ul > .Date,
+		.log ul > .Undefined
+	) {
 		margin-left: calc(var(--li-identation) * -1);
 	}
 
@@ -204,7 +204,7 @@
 	.trace {
 		border-bottom: 1px solid #eee;
 		font-size: 12px;
-		font-family: var(--font-mono);
+		font-family: var(--fragment-font-family);
 		padding: 4px 0 2px;
 	}
 
@@ -234,7 +234,7 @@
 		height: 16px;
 
 		border-radius: 9px;
-		background-color: var(--color-lightblack);
+		background-color: var(--fragment-color-lightblack);
 	}
 
 	.count span {
@@ -261,7 +261,7 @@
 	}
 
 	.title {
-		font-family: var(--font-mono);
+		font-family: var(--fragment-font-family);
 		font-size: 13px;
 		font-weight: bold;
 		padding-left: 11px;

package/src/client/app/modules/Console.svelte

@@ -114,8 +114,8 @@
 		max-height: 100%;
 
 		background-color: #1d1d1e;
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 
 	.scroll {
@@ -138,12 +138,14 @@
 
 	.scroll::-webkit-scrollbar-track {
 		background-color: var(
-			--color-lightblack
+			--fragment-color-lightblack
 		); /* color of the tracking area */
 	}
 
 	.scroll::-webkit-scrollbar-thumb {
-		background-color: var(--color-active); /* color of the scroll thumb */
+		background-color: var(
+			--fragment-accent-color
+		); /* color of the scroll thumb */
 		border-radius: 20px; /* roundness of the scroll thumb */
 	}
 </style>

package/src/client/app/modules/Exports.svelte

@@ -7,6 +7,7 @@
 		IMAGE_ENCODINGS,
 		VIDEO_FORMATS,
 		exports,
+		getCodecsForFormat,
 	} from '../state/exports.svelte';
 
 	let { id = layout.getID(), headless = false } = $props();
@@ -81,16 +82,39 @@
 			params={{ options: Object.values(VIDEO_FORMATS) }}
 			onchange={(value) => {
 				exports.videoFormat = value;
+
+				if (
+					!getCodecsForFormat(exports.videoFormat).includes(
+						exports.videoCodec,
+					)
+				) {
+					exports.videoCodec = getCodecsForFormat(
+						exports.videoFormat,
+					)?.[0];
+				}
 			}}
 		/>
+		{#if [VIDEO_FORMATS.MKV, VIDEO_FORMATS.MP4, VIDEO_FORMATS.WEBM, VIDEO_FORMATS.MOV].includes(exports.videoFormat)}
+			<Field
+				key="codec"
+				value={exports.videoCodec}
+				params={{ options: getCodecsForFormat(exports.videoFormat) }}
+				onchange={(value) => {
+					exports.videoCodec = value;
+				}}
+			/>
+		{/if}
 		<Field
 			key="quality"
 			value={exports.videoQuality}
 			params={{
-				min: 1,
-				max: 100,
-				step: 1,
-				suffix: '%',
+				options: [
+					{ value: 100, label: 'very high' },
+					{ value: 80, label: 'high' },
+					{ value: 60, label: 'medium' },
+					{ value: 40, label: 'low' },
+					{ value: 20, label: 'very low' },
+				],
 				triggerable: false,
 			}}
 			onchange={(value) => {

package/src/client/app/renderers/2DRenderer.js

@@ -1,13 +1,14 @@
 /**
  * @typedef {object} MountParams2DRenderer
+ * @property {HTMLCanvasElement} canvas
  * @property {CanvasRenderingContext2D} context
  */
 
 /**
  * @param {object} params
  * @param {number} params.id
- * @param {HTMLDivElement} params.container
  * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
  * @param {number} params.width
  * @param {number} params.height
  * @param {number} params.pixelRatio
@@ -21,13 +22,15 @@ export let onMountPreview = ({ canvas }) => {
 };
 
 /**
- * @param {object} params
+ * @param {MountParams2DRenderer} params
+ * @param {number} params.id
  * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
  * @param {number} params.width
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let onResizePreview = ({ canvas, width, height, pixelRatio }) => {
+export let onResizePreview = ({ id, canvas, width, height, pixelRatio }) => {
 	canvas.width = width * pixelRatio;
 	canvas.height = height * pixelRatio;
 	canvas.style.width = `${width}px`;

package/src/client/app/renderers/FragmentRenderer.js

@@ -3,9 +3,32 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 
+/**
+ * @typedef {object} MountParamsFragmentRenderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {Frag} frag
+ */
+
+/**
+ * @typedef {object} FragFragmentRenderer
+ * @property {number} id
+ * @property {Frag} frag
+ */
+
+/** @type {FragFragmentRenderer[]} */
 let frags = [];
 
-export let onMountPreview = ({ canvas, id }) => {
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParamsFragmentRenderer}
+ */
+export let onMountPreview = ({ id, canvas }) => {
 	let frag = fragment({
 		canvas,
 	});
@@ -18,13 +41,27 @@ export let onMountPreview = ({ canvas, id }) => {
 	return { canvas, frag };
 };
 
+/**
+ * @param {MountParamsFragmentRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	let { frag } = frags.find((f) => f.id === id);
 
 	frag.resize({ width, height, pixelRatio });
 };
 
-export let onDestroyPreview = ({ canvas, id }) => {
+/**
+ * @param {MountParamsFragmentRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
+ */
+export let onDestroyPreview = ({ id, canvas }) => {
 	let fragIndex = frags.findIndex((f) => f.id === id);
 	let { frag } = frags[fragIndex];
 

package/src/client/app/renderers/P5GLRenderer.js

@@ -3,13 +3,6 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 
-/**
- * @typedef {object} PreviewP5GLRenderer
- * @property {number} id
- * @property {p5} p
- * @property {boolean} rendered
- */
-
 /**
  * @typedef {object} MountParamsP5GLRenderer
  * @property {HTMLCanvasElement} canvas
@@ -17,10 +10,10 @@ import { clearError } from '../state/errors.svelte';
  */
 
 /**
- * @typedef {object} PreviewParamsP5GLRenderer
- * @property {number} params.id
- * @property {HTMLDivElement} params.container
- * @property {HTMLCanvasElement} params.canvas
+ * @typedef {object} PreviewP5GLRenderer
+ * @property {number} id
+ * @property {p5} p
+ * @property {boolean} rendered
  */
 
 /** @type {PreviewP5GLRenderer[]} */
@@ -36,31 +29,30 @@ let previews = [];
  * @param {number} params.pixelRatio
  * @returns {MountParamsP5GLRenderer}
  */
-export let onMountPreview = ({ id, container, width, height }) => {
+export let onMountPreview = ({ id, container, canvas, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
-			const canvas = sketch.createCanvas(width, height, 'webgl');
-			canvas.parent(container);
+			sketch.createCanvas(width, height, 'webgl', canvas);
 		};
-	});
+	}, container);
 
-	/** @type {PreviewP5GLRenderer} */
-	const preview = {
+	previews.push({
 		id,
 		p,
 		rendered: false,
-	};
-
-	previews.push(preview);
+	});
 
 	return {
-		canvas: p.canvas,
+		canvas,
 		p,
 	};
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
  */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
@@ -73,7 +65,10 @@ export let onBeforeUpdatePreview = ({ id }) => {
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
  */
 export let onAfterUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
@@ -91,7 +86,12 @@ export let onAfterUpdatePreview = ({ id }) => {
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
  */
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	const preview = previews.find((p) => p.id === id);
@@ -103,7 +103,10 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
  */
 export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((preview) => preview.id === id);
@@ -186,7 +189,6 @@ if (import.meta.hot) {
 
 client.on('shader-update', (shaderUpdates) => {
 	previews.forEach(({ p }) => {
-		console.log('clear error', p._renderer.GL.__uuid);
 		clearError(p._renderer.GL.__uuid);
 	});
 

package/src/client/app/renderers/P5Renderer.js

@@ -1,28 +1,54 @@
 import p5 from 'p5';
 
+/**
+ * @typedef {object} MountParamsP5Renderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {p5} p
+ */
+
+/**
+ * @typedef {object} PreviewP5Renderer
+ * @property {number} id
+ * @property {p5} p
+ */
+
+/** @type {PreviewP5Renderer[]} */
 let previews = [];
 
-export let onMountPreview = ({ id, container, width, height }) => {
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParamsP5Renderer}
+ */
+export let onMountPreview = ({ id, container, canvas, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
-			const canvas = sketch.createCanvas(width, height);
-			canvas.parent(container);
+			sketch.createCanvas(width, height, canvas);
 		};
-	});
+	}, container);
 
-	const preview = {
+	previews.push({
 		id,
 		p,
-	};
-
-	previews.push(preview);
+	});
 
 	return {
-		canvas: p.canvas,
+		canvas,
 		p,
 	};
 };
 
+/**
+ * @param {MountParamsP5Renderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
+ */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -31,6 +57,14 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {MountParamsP5Renderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -40,6 +74,12 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	}
 };
 
+/**
+ * @param {MountParamsP5Renderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
+ */
 export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((p) => p.id === id);
 	const preview = previews[previewIndex];