fragment-tools 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -26,7 +26,6 @@
   "dependencies": {
     "@clack/core": "^0.4.2",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "body-parser": "^2.2.0",
     "changedpi": "^1.0.4",
     "convert-length": "^1.0.1",
     "get-port": "^7.1.0",
@@ -34,14 +33,15 @@
     "glslify": "^7.1.1",
     "is-unicode-supported": "^2.0.0",
     "kleur": "^4.1.4",
+    "mediabunny": "^1.13.3",
+    "milliparsec": "^5.1.0",
     "sade": "^1.7.4",
     "svelte": "^5.19.0",
     "vite": "^6.3.5",
-    "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.6",
+    "@changesets/cli": "^2.29.7",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/p5": "^1.7.6",
     "@types/three": "^0.174.0",

package/src/cli/createConfig.js

@@ -110,7 +110,7 @@ export async function createConfig(
 				__DEV__: !build,
 			},
 			optimizeDeps: {
-				include: ['convert-length', 'webm-writer', 'changedpi'],
+				include: ['convert-length', 'changedpi'],
 			},
 		}),
 		config.vite ?? {},

package/src/cli/plugins/save.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import { writeFile } from 'node:fs/promises';
-import bodyParser from 'body-parser';
+import { json } from 'milliparsec';
 import { log, green, red } from '../log.js';
 import { mkdirp } from '../utils.js';
 
@@ -50,7 +50,12 @@ export default function screenshot({
 	return {
 		name: 'save',
 		configureServer(server) {
-			server.middlewares.use(bodyParser.json({ limit: '100mb' }));
+			const payloadLimit = 100 * 1024 * 1024; // 100mb
+			server.middlewares.use(
+				json({
+					payloadLimit,
+				}),
+			);
 			server.middlewares.use('/save', async (req, res, next) => {
 				if (req.method === 'POST') {
 					const { files } = req.body;

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

@@ -7,6 +7,7 @@ class CanvasRecorder {
 			duration = Infinity,
 			framerate = 25,
 			quality = 100,
+			format,
 			onStart = noop,
 			onTick = noop,
 			onComplete = noop,
@@ -16,6 +17,7 @@ class CanvasRecorder {
 		this.framerate = framerate;
 		this.duration = duration;
 		this.quality = quality;
+		this.format = format;
 		this.onStart = onStart;
 		this.onTick = onTick;
 		this.onComplete = onComplete;
@@ -24,7 +26,7 @@ class CanvasRecorder {
 		this.deltaTime = 1000 / this.framerate;
 
 		this.frameDuration = 1000 / this.framerate;
-		this.frameTotal = isFinite(duration)
+		this.frameTotal = isFinite(this.duration)
 			? this.duration * this.framerate
 			: Infinity;
 		this.started = false;

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

@@ -9,7 +9,17 @@ class GIFRecorder extends CanvasRecorder {
 		this.tmpCanvas = document.createElement('canvas');
 		this.tmpContext = this.tmpCanvas.getContext('2d');
 
-		this.maxColors = Math.floor(map(this.quality, 1, 100, 1, 256));
+		this.maxColors = Math.floor(map(this.quality, 20, 100, 32, 256));
+
+		if (this.framerate > 50) {
+			console.warn(`GIFRecorder :: recording was capped at 50fps.`);
+			this.framerate = 50;
+			this.deltaTime = 1000 / this.framerate;
+			this.frameDuration = 1000 / this.framerate;
+			this.frameTotal = isFinite(this.duration)
+				? this.duration * this.framerate
+				: Infinity;
+		}
 
 		super.start();
 	}

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/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/state/exports.svelte.js

@@ -6,13 +6,47 @@ export const IMAGE_ENCODINGS = ['png', 'jpeg', 'webp'];
 export const VIDEO_FORMATS = {
 	FRAMES: 'frames',
 	MP4: 'mp4',
-	GIF: 'gif',
 	WEBM: 'webm',
+	GIF: 'gif',
+	MKV: 'mkv',
+	MOV: 'mov',
+};
+
+export const VIDEO_CODECS = {
+	AVC: 'avc',
+	HEVC: 'hevc',
+	VP8: 'vp8',
+	VP9: 'vp9',
+	AV1: 'av1',
 };
 
+export const VIDEO_CODECS_FORMATS = new Map();
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.AVC, ['mp4', 'mkv', 'mov']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.HEVC, ['mp4', 'mkv', 'mov']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.VP8, ['webm', 'mkv']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.VP9, ['webm', 'mkv']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.AV1, ['webm', 'mkv']);
+
+/**
+ * List valid codecs based on format
+ * @param {string} format
+ * @return {string[]}
+ */
+export function getCodecsForFormat(format) {
+	const codecs = [];
+
+	for (const [codec, formats] of VIDEO_CODECS_FORMATS) {
+		if (formats.includes(format)) {
+			codecs.push(codec);
+		}
+	}
+
+	return codecs;
+}
+
 class Exports {
 	imageEncoding = $state(IMAGE_ENCODINGS[0]);
-	videoFormat = $state(Object.values(VIDEO_FORMATS)[0]);
+	videoFormat = $state(VIDEO_FORMATS.MP4);
 	pixelsPerInch = $state(72);
 	framerate = $state(60);
 	useDuration = $state(true);
@@ -20,6 +54,7 @@ class Exports {
 	loopCount = $state(1);
 	imageQuality = $state(100);
 	videoQuality = $state(100);
+	videoCodec = $state(VIDEO_CODECS.HEVC);
 	imageCount = $state(1);
 	recording = $state(false);
 	capturing = $state(false);
@@ -41,6 +76,7 @@ class Exports {
 						loopCount: this.loopCount,
 						imageQuality: this.imageQuality,
 						videoQuality: this.videoQuality,
+						videoCodec: this.videoCodec,
 						imageCount: this.imageCount,
 						videoCollapsed: this.videoCollapsed,
 						imageCollapsed: this.imageCollapsed,
@@ -105,6 +141,7 @@ class Exports {
 			format = this.videoFormat,
 			imageEncoding = this.imageEncoding,
 			quality = this.videoQuality,
+			codec = this.videoCodec,
 			duration,
 			filename,
 			pattern,
@@ -133,6 +170,7 @@ class Exports {
 			onTick,
 			framerate,
 			format,
+			codec,
 			imageEncoding,
 			quality,
 			duration: duration * this.loopCount,

package/src/client/app/ui/Field.svelte

@@ -67,10 +67,14 @@
 			value(event);
 			onclick(event);
 		},
-		download: (event) => {
-			let [data, filename] = value(event);
+		download: async (event) => {
+			try {
+				let [data, filename] = await value(event);
 
-			download(data, filename);
+				download(data, filename);
+			} catch (error) {
+				console.error(`Error while trying to download:`, error);
+			}
 		},
 		number: (event = {}) => {
 			const isValueInRange = event.value >= 0 && event.value <= 1;

package/src/client/app/ui/FieldSection.svelte

@@ -100,7 +100,7 @@
 		transition: opacity 0.1s ease;
 	}
 
-	button.field__label {
+	button.field__label:not(:disabled) {
 		cursor: pointer;
 	}
 

package/src/client/app/ui/LayoutBuild.svelte

@@ -9,7 +9,7 @@
 
 	let gui = $derived(buildConfig.gui ?? {});
 	let layout = $derived(buildConfig.layout ?? {});
-	let headless = $derived(layout.headless ?? false);
+	let headless = $derived(layout.headless ?? true);
 	let resizable = $derived(layout.resizable ?? false);
 
 	let guiOutput = $derived(gui.output ?? true);

package/src/client/app/ui/SketchRenderer.svelte

@@ -110,7 +110,11 @@
 
 	let backgroundColor = $derived.by(() => {
 		if (layout.previewing) {
-			return sketch?.buildConfig?.backgroundColor ?? 'inherit';
+			return (
+				sketch?.buildConfig?.backgroundColor ??
+				sketch?.backgroundColor ??
+				'inherit'
+			);
 		}
 
 		return sketch?.backgroundColor ?? 'inherit';

package/src/client/app/ui/fields/CheckboxInput.svelte

@@ -12,7 +12,7 @@
 	};
 </script>
 
-<div class="checkbox">
+<div class="checkbox" class:disabled>
 	<input
 		class="input"
 		bind:checked={value}
@@ -20,7 +20,6 @@
 		onchange={handleChange}
 		disabled={disabled ? 'disabled' : null}
 	/>
-	<div class="checked" />
 </div>
 
 <style>
@@ -36,11 +35,12 @@
 		background-color: var(--fragment-input-background-color);
 	}
 
-	.checkbox:hover {
+	:global(body:not(.fragment-dragging)) .checkbox:not(.disabled):hover {
 		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
-	.checkbox:focus-within {
+	:global(body:not(.fragment-dragging))
+		.checkbox:not(.disabled):focus-within {
 		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
@@ -53,7 +53,9 @@
 		outline: 0;
 	}
 
-	.checked {
+	.checkbox:after {
+		content: '';
+
 		position: absolute;
 		left: 3px;
 		top: 3px;
@@ -67,11 +69,11 @@
 		pointer-events: none;
 	}
 
-	.input:checked + .checked {
+	.checkbox:has(.input:checked):after {
 		opacity: 1;
 	}
 
-	.input:checked:disabled + .checked {
+	.checkbox:has(.input:checked:disabled):after {
 		background-color: var(--fragment-color-disabled);
 	}
 </style>

package/src/client/app/ui/fields/ImageInput.svelte

@@ -4,7 +4,13 @@
 	import FieldInputRow from './FieldInputRow.svelte';
 	import TextInput from './TextInput.svelte';
 
-	let { value, context = null, key = '', disabled = false } = $props();
+	let {
+		value,
+		context = null,
+		key = '',
+		onchange,
+		disabled = false,
+	} = $props();
 
 	/** @type {HTMLImageElement} */
 	let img;
@@ -24,7 +30,7 @@
 	}
 
 	let reader = new FileReader();
-	let dragover = false;
+	let dragover = $state(false);
 
 	function handleUpload(event) {
 		event.preventDefault();
@@ -44,6 +50,7 @@
 			reader.onload = null;
 
 			value = e.target.result;
+			onchange(value);
 		};
 		reader.readAsDataURL(file);
 
@@ -67,33 +74,31 @@
 
 <div
 	class="img-container"
+	role="group"
+	aria-label="Drop an image here to upload"
 	class:dragover
-	on:dragover={handleDragover}
-	on:dragleave={handleDragleave}
-	on:drop={handleUpload}
+	ondragover={handleDragover}
+	ondragleave={handleDragleave}
+	ondrop={handleUpload}
 >
 	<FieldInputRow --grid-template-columns="1fr 0.5fr">
 		<div class="row">
-			<div class="preview" on:click={handleClick}>
+			<div class="preview">
 				<img class="img" src="" alt="" bind:this={img} />
+				<button class="preview-button" onclick={handleClick}>
+					<span class="visually-hidden">Upload</span>
+				</button>
 				<input
 					class="input"
 					type="file"
 					bind:this={input}
-					on:change={handleUpload}
+					onchange={handleUpload}
 					disabled={disabled ? 'disabled' : null}
 				/>
 			</div>
 			<TextInput disabled value={displayUrl} />
 		</div>
-		<ButtonInput
-			label="change"
-			on:click={handleClick}
-			on:dragover={handleDragover}
-			on:dragleave={handleDragleave}
-			on:drop={handleUpload}
-			{disabled}
-		/>
+		<ButtonInput label="change" onclick={handleClick} {disabled} />
 	</FieldInputRow>
 </div>
 
@@ -103,6 +108,8 @@
 	}
 
 	.preview {
+		position: relative;
+
 		width: calc(var(--fragment-input-height) * 1);
 		height: calc(var(--fragment-input-height) * 1);
 		display: grid;
@@ -116,6 +123,17 @@
 		overflow: hidden;
 	}
 
+	.preview-button {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: 100%;
+		height: 100%;
+
+		opacity: 0;
+	}
+
 	.row {
 		display: grid;
 		grid-template-columns: 20px auto;

package/src/client/app/ui/fields/Select.svelte

@@ -116,7 +116,7 @@
 	}
 
 	.select {
-		padding: 0 var(--padding, 6px) 0 var(--padding, 6px);
+		padding: 0 18px 0 var(--padding, 6px);
 
 		width: 100%;
 
@@ -126,6 +126,7 @@
 		outline: 0;
 		background-color: transparent;
 		opacity: 1;
+		text-overflow: ellipsis;
 	}
 
 	.select-input:not(.disabled) .select {

package/src/client/app/utils/canvas.utils.js

@@ -3,10 +3,9 @@ https://github.com/mattdesl/canvas-sketch/blob/24f6bb2bbdfdfd72a698a0b8a0962ad84
 */
 
 import { VIDEO_FORMATS } from '../state/exports.svelte';
-import WebMRecorder from '../lib/canvas-recorder/WebMRecorder';
-import MP4Recorder from '../lib/canvas-recorder/MP4Recorder';
 import GIFRecorder from '../lib/canvas-recorder/GIFRecorder';
 import FrameRecorder from '../lib/canvas-recorder/FrameRecorder';
+import MediaBunnyRecorder from '../lib/canvas-recorder/MediaBunnyRecorder';
 import { exportCanvas } from '../lib/canvas-recorder/utils';
 import { map } from './math.utils';
 import { createDataURLFromBlob, saveFiles } from './file.utils';
@@ -101,28 +100,21 @@ export async function screenshotCanvas(
 	}
 }
 
-function recordCanvasWebM(canvas, options) {
-	let recorder = new WebMRecorder(canvas, options);
+function record(canvas, options) {
+	let recorder = new MediaBunnyRecorder(canvas, options);
 	recorder.start();
 
 	return recorder;
 }
 
-function recordCanvasMp4(canvas, options) {
-	let recorder = new MP4Recorder(canvas, options);
-	recorder.start();
-
-	return recorder;
-}
-
-function recordCanvasGIF(canvas, options) {
+function recordGIF(canvas, options) {
 	let recorder = new GIFRecorder(canvas, options);
 	recorder.start();
 
 	return recorder;
 }
 
-function recordCanvasFrames(canvas, options) {
+function recordFrames(canvas, options) {
 	let recorder = new FrameRecorder(canvas, options);
 	recorder.start();
 
@@ -138,6 +130,7 @@ export function recordCanvas(
 		duration = Infinity,
 		quality = 100,
 		pattern = defaultFilenamePattern,
+		codec,
 		exportDir,
 		imageEncoding,
 		onStart = () => {},
@@ -189,6 +182,7 @@ export function recordCanvas(
 
 	const options = {
 		framerate,
+		format,
 		duration,
 		quality,
 		onStart,
@@ -198,14 +192,22 @@ export function recordCanvas(
 
 	let recorder;
 
-	if (format === VIDEO_FORMATS.WEBM) {
-		recorder = recordCanvasWebM(canvas, options);
-	} else if (format === VIDEO_FORMATS.MP4) {
-		recorder = recordCanvasMp4(canvas, options);
+	if (
+		[
+			VIDEO_FORMATS.MKV,
+			VIDEO_FORMATS.MOV,
+			VIDEO_FORMATS.MP4,
+			VIDEO_FORMATS.WEBM,
+		].includes(format)
+	) {
+		recorder = record(canvas, {
+			...options,
+			codec,
+		});
 	} else if (format === VIDEO_FORMATS.GIF) {
-		recorder = recordCanvasGIF(canvas, options);
+		recorder = recordGIF(canvas, options);
 	} else if (format === VIDEO_FORMATS.FRAMES) {
-		recorder = recordCanvasFrames(canvas, {
+		recorder = recordFrames(canvas, {
 			...options,
 			imageEncoding,
 		});

package/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-	"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-	"changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "raphaelameaume/fragment"}],
-	"commit": false,
-	"fixed": [],
-	"linked": [],
-	"access": "restricted",
-	"baseBranch": "main",
-	"updateInternalDependencies": "patch",
-	"ignore": []
-}

package/.prettierignore

@@ -1,5 +0,0 @@
-pnpm-lock.yaml
-pnpm-workspace.yaml
-package-lock.json
-.changeset/config.json
-/docs