fragment-tools 0.1.13 → 0.1.15

package/src/client/app/components/Init.svelte

@@ -1,13 +1,45 @@
 <script>
-import { assignSketchFiles } from "../triggers/shared.js";
-import { sketchesKeys } from "../stores/sketches.js";
-import "../utils/glslErrors.js";
+	import { assignSketchFiles } from '../triggers/shared.js';
+	import { loadAll, sketchesKeys, sketches } from '../stores/sketches.js';
+	import { onSketchReload } from '@fragment/sketches';
+	import { getFilename } from '../utils/file.utils.js';
+	import '../utils/glslErrors.js';
+	import { props, reconcile } from '../stores/props.js';
 
-sketchesKeys.subscribe((keys) => {
-	if (keys.length > 0) {
-		assignSketchFiles(keys);
-	}
-})
+	sketches.subscribe((sketches) => {
+		props.update((currentProps) => {
+			Object.keys(sketches).forEach((key) => {
+				const sketch = sketches[key];
 
+				if (sketch) {
+					// sketch can be undefined if failed to load
+					currentProps[key] = reconcile(
+						sketch.props,
+						currentProps[key],
+					);
+				}
+			});
 
+			return currentProps;
+		});
+	});
+
+	sketchesKeys.subscribe((keys) => {
+		if (keys.length > 0) {
+			assignSketchFiles(keys);
+		}
+	});
+
+	onSketchReload(({ sketches }) => {
+		loadAll(sketches);
+	});
+
+	$: prefix =
+		$sketchesKeys.length === 1 ? `${getFilename($sketchesKeys[0])} | ` : '';
+
+	$: title = `${prefix}fragment`;
 </script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>

package/src/client/app/components/KeyBinding.svelte

@@ -1,32 +1,32 @@
 <script>
-import { createEventDispatcher, onDestroy, onMount } from "svelte";
-import { onKeyPress, onKeyDown, onKeyUp } from "../triggers";
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { onKeyPress, onKeyDown, onKeyUp } from '../triggers';
 
-export let key;
-export let type = "press";
+	export let key;
+	export let type = 'press';
 
-const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-const triggers = {
-	"press": onKeyPress,
-	"down": onKeyDown,
-	"up": onKeyUp,
-};
+	const triggers = {
+		press: onKeyPress,
+		down: onKeyDown,
+		up: onKeyUp,
+	};
 
-const triggerType = triggers[type];
+	const triggerType = triggers[type];
 
-let trigger;
+	let trigger;
 
-onMount(() => {
-	trigger = triggerType(key, (event) => {
-		dispatch('trigger', event);
+	onMount(() => {
+		trigger = triggerType(key, (event) => {
+			dispatch('trigger', event);
+		});
 	});
-})
 
-onDestroy(() => {
-	if (trigger) {
-		trigger.destroy();
-		trigger = null;
-	}
-});
+	onDestroy(() => {
+		if (trigger) {
+			trigger.destroy();
+			trigger = null;
+		}
+	});
 </script>

package/src/client/app/helpers.js

@@ -0,0 +1,42 @@
+import { props } from './stores/props';
+
+const propHandler = {
+	set: function (target, key, value, receiver) {
+		Reflect.set(target, key, value, receiver);
+
+		if (key === 'value') {
+			props.update((currentProps) => currentProps);
+		}
+
+		return true;
+	},
+};
+
+const propsHandler = {
+	get: (target, key) => {
+		if (typeof target[key] === 'object' && target[key] !== null) {
+			return new Proxy(target[key], propHandler);
+		}
+	},
+	set: (target, key, value) => {
+		console.log('new set', target, key, value);
+
+		target[key] = value;
+
+		props.update((currentProps) => currentProps);
+
+		return true;
+	},
+	deleteProperty: (target, prop) => {
+		if (prop in target) {
+			delete target[prop];
+			props.update((currentProps) => currentProps);
+
+			return true;
+		}
+	},
+};
+
+export function reactiveProps(props = {}) {
+	return new Proxy(props, propsHandler);
+}

package/src/client/app/hooks.js

@@ -0,0 +1,20 @@
+import {
+	removeBeforeCaptureFrom,
+	removeAfterCaptureFrom,
+	removeBeforeRecordFrom,
+	removeAfterRecordFrom,
+} from './stores/exports';
+
+export {
+	onBeforeCapture,
+	onAfterCapture,
+	onBeforeRecord,
+	onAfterRecord,
+} from './stores/exports';
+
+export function removeHooksFrom(context) {
+	removeBeforeCaptureFrom(context);
+	removeAfterCaptureFrom(context);
+	removeBeforeRecordFrom(context);
+	removeAfterRecordFrom(context);
+}

package/src/client/app/inputs/Input.js

@@ -1,15 +1,15 @@
 class Input {
-    constructor() {
-        this.enabled = true;
-    }
+	constructor() {
+		this.enabled = true;
+	}
 
-    enable() {
-        this.enabled = true;
-    }
+	enable() {
+		this.enabled = true;
+	}
 
-    disable() {
-        this.enabled = false;
-    }
+	disable() {
+		this.enabled = false;
+	}
 }
 
 export default Input;

package/src/client/app/inputs/Keyboard.js

@@ -1,21 +1,19 @@
-import Input from "./Input";
+import Input from './Input';
 
 class Keyboard extends Input {
+	/**
+	 *
+	 * @param {KeyboardEvent} event
+	 */
+	getStepFromEvent(event) {
+		if (event.shiftKey) {
+			return 10;
+		} else if (event.altKey) {
+			return 0.1;
+		}
 
-    /**
-     * 
-     * @param {KeyboardEvent} event 
-     */
-    getStepFromEvent(event) {
-        if (event.shiftKey) {
-            return 10;
-        } else if (event.altKey) {
-            return 0.1;
-        }
-
-        return 1;
-    }
-
+		return 1;
+	}
 }
 
 export default new Keyboard();

package/src/client/app/inputs/MIDI.js

@@ -1,17 +1,16 @@
-import Input from "./Input";
+import Input from './Input';
 
 const commands = {
-	0x8: "noteoff",
-	0x9: "noteon",
-	0xB: "controlchange",
+	0x8: 'noteoff',
+	0x9: 'noteon',
+	0xb: 'controlchange',
 };
 
-const notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
 
-const LOCAL_STORAGE_KEY = "midi.requested";
+const LOCAL_STORAGE_KEY = 'midi.requested';
 
 class MIDI extends Input {
-
 	constructor() {
 		super();
 
@@ -42,25 +41,25 @@ class MIDI extends Input {
 
 		if (this.inputs.size === 1) {
 			const [entry] = this.inputs.values();
-			const { id } = entry; 
+			const { id } = entry;
 
 			this.selectedInputID = id;
 		}
 
 		if (this.outputs.size === 1) {
 			const [entry] = this.outputs.values();
-			const { id } = entry; 
+			const { id } = entry;
 
 			this.selectedOutputID = id;
 		}
 	}
 
 	attachListeners() {
-		this.inputs.forEach(entry => {
+		this.inputs.forEach((entry) => {
 			entry.onmidimessage = (event) => {
 				this.onMessage(event);
 			};
-		})
+		});
 	}
 
 	addEventListener(eventName, fn) {
@@ -76,14 +75,14 @@ class MIDI extends Input {
 		let type = commands[command];
 
 		let channel = (event.data[0] & 0xf) + 1;
-    	let data1 = event.data[1]
+		let data1 = event.data[1];
 		let data2 = event.data[2];
 
 		let note = {
 			number: data1,
 			name: notes[data1 % 12],
 		};
-		
+
 		let velocity = data2 / 127;
 		let rawVelocity = data2;
 
@@ -117,7 +116,7 @@ class MIDI extends Input {
 		if (this.listeners.has(eventName)) {
 			const listeners = this.listeners.get(eventName);
 
-			listeners.forEach(listener => listener(data));
+			listeners.forEach((listener) => listener(data));
 		}
 	}
 
@@ -135,7 +134,7 @@ class MIDI extends Input {
 				this.requesting = false;
 				this.start();
 			}
-		} catch(error) {
+		} catch (error) {
 			this.handleError(error);
 		}
 	}

package/src/client/app/inputs/Mouse.js

@@ -1,4 +1,4 @@
-import Input from "./Input";
+import Input from './Input';
 
 class Mouse extends Input {}
 

package/src/client/app/inputs/Webcam.js

@@ -1,98 +1,99 @@
-import Input from "./Input";
+import Input from './Input';
 
 class Webcam extends Input {
+	constructor() {
+		super();
 
-    constructor() {
-        super();
+		this._useCanvas = false;
+		this.stream = null;
+		this.requested = false;
 
-        this._useCanvas = false;
-        this.stream = null;
-        this.requested = false;
+		this.video = document.createElement('video');
+		this.canvas = document.createElement('canvas');
+		this.context = null;
+	}
 
-        this.video = document.createElement('video');
-        this.canvas = document.createElement('canvas');
-        this.context = null;
-    }
-    
-    /**
+	/**
     @param {Boolean} value
      */
-    set useCanvas(value) {
-        const prev = this.useCanvas;
-
-        this._useCanvas = value;
-
-        if (!prev && this._useCanvas) {
-            this.prepareCanvas();
-        } else if (prev && this._useCanvas) {
-            cancelAnimationFrame(this._raf);
-            this._raf = null;
-        }
-    }
-
-    get useCanvas() {
-        return this._useCanvas;
-    }
-
-    enable() {
-        if (!this.requested) {
-            this.request();
-        }
-    }
-
-    disable() {
-        this.enabled = false;
-
-        if (this.stream) {
-            if (this.useCanvas && this._raf) {
-                cancelAnimationFrame(this._raf);
-                this._raf = null;
-            }
-
-            this.stream.getTracks().forEach(track => {
-                track.stop()
-            });
-
-            this.stream = null;
-        }
-    }
-
-    prepareCanvas() {
-        this.canvas.width = video.videoWidth;
-        this.canvas.height = video.videoHeight;
-
-        this.context = this.canvas.getContext("2d");
-    }
-
-    drawToCanvas() {
-        this.context.drawImage(video, 0, 0, canvas.width, canvas.height);
-
-        this._raf = requestAnimationFrame(() => {
-            this.drawToCanvas()
-        });
-    }
-
-    async request() {
-        try {
-            this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
-            this.requested = true;
-            this.enabled = true;
-
-            this.video.addEventListener('canplay', () => {
-                this.prepareCanvas();
-
-                if (this.useCanvas) {
-                    this.drawToCanvas();
-                }
-            });
-            this.video.srcObject = this.stream;
-            this.video.play();
-        } catch(error) {
-            console.error(`Error while trying to access webcam.`);
-            console.log(error);
-        }
-    }
-
+	set useCanvas(value) {
+		const prev = this.useCanvas;
+
+		this._useCanvas = value;
+
+		if (!prev && this._useCanvas) {
+			this.prepareCanvas();
+		} else if (prev && this._useCanvas) {
+			cancelAnimationFrame(this._raf);
+			this._raf = null;
+		}
+	}
+
+	get useCanvas() {
+		return this._useCanvas;
+	}
+
+	enable() {
+		if (!this.requested) {
+			this.request();
+		}
+	}
+
+	disable() {
+		this.enabled = false;
+
+		if (this.stream) {
+			if (this.useCanvas && this._raf) {
+				cancelAnimationFrame(this._raf);
+				this._raf = null;
+			}
+
+			this.stream.getTracks().forEach((track) => {
+				track.stop();
+			});
+
+			this.stream = null;
+		}
+	}
+
+	prepareCanvas() {
+		this.canvas.width = video.videoWidth;
+		this.canvas.height = video.videoHeight;
+
+		this.context = this.canvas.getContext('2d');
+	}
+
+	drawToCanvas() {
+		this.context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+		this._raf = requestAnimationFrame(() => {
+			this.drawToCanvas();
+		});
+	}
+
+	async request() {
+		try {
+			this.stream = await navigator.mediaDevices.getUserMedia({
+				video: true,
+				audio: false,
+			});
+			this.requested = true;
+			this.enabled = true;
+
+			this.video.addEventListener('canplay', () => {
+				this.prepareCanvas();
+
+				if (this.useCanvas) {
+					this.drawToCanvas();
+				}
+			});
+			this.video.srcObject = this.stream;
+			this.video.play();
+		} catch (error) {
+			console.error(`Error while trying to access webcam.`);
+			console.log(error);
+		}
+	}
 }
 
 export default new Webcam();

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

@@ -1,15 +1,17 @@
 let noop = () => {};
 
 class CanvasRecorder {
-
-	constructor(canvas, {
-		duration = Infinity,
-		framerate = 25,
-		quality = 100,
-		onStart = noop,
-		onTick = noop,
-		onComplete = noop,
-	}) {
+	constructor(
+		canvas,
+		{
+			duration = Infinity,
+			framerate = 25,
+			quality = 100,
+			onStart = noop,
+			onTick = noop,
+			onComplete = noop,
+		},
+	) {
 		this.canvas = canvas;
 		this.framerate = framerate;
 		this.duration = duration;
@@ -19,10 +21,12 @@ class CanvasRecorder {
 		this.onComplete = onComplete;
 
 		this.time = 0;
-		this.deltaTime = (1000 / this.framerate);
+		this.deltaTime = 1000 / this.framerate;
 
-		this.frameDuration = (1000 / this.framerate);
-		this.frameTotal = isFinite(duration) ? this.duration * this.framerate : Infinity;
+		this.frameDuration = 1000 / this.framerate;
+		this.frameTotal = isFinite(duration)
+			? this.duration * this.framerate
+			: Infinity;
 		this.started = false;
 		this.stopped = false;
 	}
@@ -39,7 +43,15 @@ class CanvasRecorder {
 			return;
 		}
 
-		console.log(`CanvasRecorder - start rendering ${this.frameTotal} frames at ${this.framerate}fps for ${this.duration}s.`);
+		if (isFinite(this.frameTotal)) {
+			console.log(
+				`CanvasRecorder - start rendering ${this.frameTotal} frames at ${this.framerate}fps for ${this.duration}s.`,
+			);
+		} else {
+			console.log(
+				`CanvasRecorder - start rendering at ${this.framerate}fps.`,
+			);
+		}
 
 		this.frameCount = 0;
 		this.started = true;
@@ -61,16 +73,24 @@ class CanvasRecorder {
 			frameCount: this.frameCount,
 		});
 
-		if (this.started && !this.stopped && (!isFinite(this.frameTotal) || (isFinite(this.frameTotal) && this.frameCount < this.frameTotal - 1))) {
+		if (
+			this.started &&
+			!this.stopped &&
+			(!isFinite(this.frameTotal) ||
+				(isFinite(this.frameTotal) &&
+					this.frameCount < this.frameTotal - 1))
+		) {
 			this.time += this.deltaTime;
-        	this.frameCount++;
-            requestAnimationFrame(() => {
-				this._tick()
+			this.frameCount++;
+			requestAnimationFrame(() => {
+				this._tick();
 			});
-        } else {
-			console.log(`CanvasRecorder - compiling ${this.frameCount + 1} frames...`);
-            this.end();
-        }
+		} else {
+			console.log(
+				`CanvasRecorder - compiling ${this.frameCount + 1} frames...`,
+			);
+			this.end();
+		}
 	}
 
 	tick() {}

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

@@ -1,10 +1,9 @@
-import { createBlobFromDataURL } from "../../utils/file.utils";
-import { map } from "../../utils/math.utils";
-import CanvasRecorder from "./CanvasRecorder";
-import { exportCanvas } from "./utils";
+import { createBlobFromDataURL } from '../../utils/file.utils';
+import { map } from '../../utils/math.utils';
+import CanvasRecorder from './CanvasRecorder';
+import { exportCanvas } from './utils';
 
 class FrameRecorder extends CanvasRecorder {
-
 	constructor(canvas, options) {
 		super(canvas, options);
 
@@ -31,7 +30,9 @@ class FrameRecorder extends CanvasRecorder {
 	}
 
 	async end() {
-		this.result = await Promise.all(this.frames.map((dataURL) => createBlobFromDataURL(dataURL)));
+		this.result = await Promise.all(
+			this.frames.map((dataURL) => createBlobFromDataURL(dataURL)),
+		);
 
 		super.end();
 	}

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

@@ -0,0 +1,45 @@
+import * as HME from 'h264-mp4-encoder';
+import CanvasRecorder from './CanvasRecorder';
+
+class H264Recorder extends CanvasRecorder {
+	getBitmapRGBA(bitmap, width = bitmap.width, height = bitmap.height) {
+		this.tmpCanvas.width = width;
+		this.tmpCanvas.height = height;
+		this.tmpContext.clearRect(0, 0, width, height);
+		this.tmpContext.drawImage(bitmap, 0, 0, width, height);
+		return this.tmpContext.getImageData(0, 0, width, height).data;
+	}
+
+	async start() {
+		this.encoder = await HME.createH264MP4Encoder();
+
+		this.tmpCanvas = document.createElement('canvas');
+		this.tmpContext = this.tmpCanvas.getContext('2d');
+
+		this.encoder.width = this.canvas.width;
+		this.encoder.height = this.canvas.height;
+		this.encoder.frameRate = this.framerate;
+		this.encoder.kbps = 30000;
+		this.encoder.initialize();
+
+		super.start();
+	}
+
+	tick() {
+		const { width, height } = this.canvas;
+		const pixels = this.getBitmapRGBA(this.canvas, width, height);
+
+		this.encoder.addFrameRgba(pixels);
+	}
+
+	async end() {
+		this.encoder.finalize();
+
+		const data = this.encoder.FS.readFile(this.encoder.outputFilename);
+		this.result = new Blob([data], { type: 'video/mp4' });
+
+		super.end();
+	}
+}
+
+export default H264Recorder;