fragment-tools 0.2.9 → 0.2.11

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/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @typedef {import('./types/config').Config} Config
+ */
+
+/**
+ * Type helper to make it easier to use fragment.config.js
+ * @param {Config} config
+ * @returns {Config}
+ */
+export function defineConfig(config = {}) {
+	return config;
+}

package/src/types/config.d.ts

@@ -0,0 +1,6 @@
+import { UserConfig } from 'vite';
+
+export interface Config {
+	vite?: UserConfig;
+	[key: string]: any;
+}

package/src/types/index.d.ts

@@ -1,5 +1,6 @@
 export type * from './renderers';
 export type * from './sketch';
+export type * from './config';
 export type * from './props';
 export type * from './helpers';
 export type * from './hooks';

package/src/types/props.d.ts

@@ -3,7 +3,7 @@ type BaseProp<Value, Params, Type> = {
 	params?: Params;
 	type?: Type;
 	hidden?: boolean;
-	displayName?: string;
+	displayName?: string | null;
 	folder?: string;
 	group?: string;
 	onChange?: PropOnChange<Value, Params>;
@@ -25,11 +25,37 @@ type NumberProp = BaseProp<
 	{ disabled?: boolean; step?: number } | { min: number; max: number },
 	'number'
 >;
-type VecProp = BaseProp<
+
+type VecArray =
 	| [number, number]
 	| [number, number, number]
-	| [number, number, number, number],
-	{ locked?: boolean },
+	| [number, number, number, number];
+
+type VecObject = Record<string, number> & { [key: number]: never };
+
+type VecValue = VecArray | VecObject;
+
+type VecArrayParams<V extends VecArray> = {
+	min: { [K in keyof V]: number };
+	max: { [K in keyof V]: number };
+	step?: { [K in keyof V]: number };
+};
+
+type VecObjectParams<V extends VecObject> = {
+	min: { [K in keyof V]: number };
+	max: { [K in keyof V]: number };
+	step?: { [K in keyof V]: number };
+};
+
+type VecParams<V extends VecValue> = V extends readonly number[]
+	? VecArrayParams<V>
+	: V extends Record<string, number>
+		? VecObjectParams<V>
+		: never;
+
+type VecProp<V extends VecValue = VecValue> = BaseProp<
+	V,
+	{ locked?: boolean } | VecParams<V>,
 	'vec'
 >;
 type CheckboxProp = BaseProp<boolean, never, 'checkbox'>;
@@ -50,7 +76,8 @@ type ImageProp = BaseProp<string, never, 'image'>;
 type Prop =
 	| SelectProp
 	| NumberProp
-	| VecProp
+	| VecProp<VecObject>
+	| VecProp<VecArray>
 	| CheckboxProp
 	| TextProp
 	| ListProp

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

package/.prettierrc

@@ -1,25 +0,0 @@
-{
-	"semi": true,
-	"tabWidth": 4,
-	"useTabs": true,
-	"singleQuote": true,
-	"printWidth": 80,
-	"bracketSpacing": true,
-	"trailingComma": "all",
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": ["README.md", "packages/*/README.md", "**/package.json"],
-			"options": {
-				"useTabs": false,
-				"tabWidth": 2
-			}
-		},
-		{
-			"files": ["docs/**/*.md"],
-			"options": {
-				"printWidth": 60
-			}
-		}
-	]
-}

package/CHANGELOG.md

@@ -1,10 +0,0 @@
-# fragment-tools
-
-## 0.2.9
-
-### Patch Changes
-
-- Prevent state mutations and warnings
-- Start templates on a green screen
-- Update examples
-- Prevent build layout re-render if layout is not persistent

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

@@ -1,44 +0,0 @@
-import loadMP4Module, { isWebCodecsSupported } from './mp4.js';
-import CanvasRecorder from './CanvasRecorder';
-
-let MP4;
-
-class MP4Recorder extends CanvasRecorder {
-	static loaded = false;
-	static isSupported = true;
-
-	constructor(canvas, options) {
-		super(canvas, options);
-	}
-
-	async load() {
-		if (!MP4Recorder.loaded) {
-			MP4 = await loadMP4Module();
-
-			MP4Recorder.loaded = true;
-		}
-
-		this.encoder = MP4.createWebCodecsEncoder({
-			width: this.canvas.width,
-			height: this.canvas.height,
-			fps: this.framerate,
-		});
-	}
-
-	async tick() {
-		const bitmap = await window.createImageBitmap(this.canvas);
-
-		// Add bitmap to encoder
-		await this.encoder.addFrame(bitmap);
-	}
-
-	async end() {
-		const buffer = await this.encoder.end();
-
-		this.result = new Blob([buffer], { type: 'video/mp4' });
-
-		super.end();
-	}
-}
-
-export default MP4Recorder;

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

@@ -1,29 +0,0 @@
-import WebMWriter from 'webm-writer';
-import { map } from '../../utils/math.utils';
-import CanvasRecorder from './CanvasRecorder';
-
-class WebMRecorder extends CanvasRecorder {
-	start() {
-		const quality = map(this.quality, 1, 100, 0, 0.99999);
-
-		this.writer = new WebMWriter({
-			quality,
-			frameRate: this.framerate,
-		});
-
-		super.start();
-	}
-
-	tick() {
-		this.writer.addFrame(this.canvas);
-	}
-
-	async end() {
-		this.result = await this.writer.complete();
-		this.writer = null;
-
-		super.end();
-	}
-}
-
-export default WebMRecorder;