q5 2.16.4 → 2.18.1

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.16
+ * @version 2.18
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -311,7 +311,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.16';
+Q5.version = Q5.VERSION = '2.18';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -464,8 +464,10 @@ Q5.modules.canvas = ($, q) => {
 	};
 
 	$._setCanvasSize = (w, h) => {
+		if (!w) h ??= window.innerHeight;
+		else h ??= w;
 		w ??= window.innerWidth;
-		h ??= window.innerHeight;
+
 		$.defaultWidth = c.w = w = Math.ceil(w);
 		$.defaultHeight = c.h = h = Math.ceil(h);
 		c.hw = w / 2;
@@ -1761,7 +1763,7 @@ Q5.renderers.c2d.soft_filters = ($) => {
 
 	$._softFilter = (typ, x) => {
 		if (!$._filters) initSoftFilters();
-		let imgData = $.ctx._getImageData(0, 0, $.canvas.width, $.canvas.height);
+		let imgData = $._getImageData(0, 0, $.canvas.width, $.canvas.height);
 		$._filters[typ](imgData.data, x);
 		$.ctx.putImageData(imgData, 0, 0);
 	};
@@ -2549,6 +2551,271 @@ main {
 		else document.body.exitFullscreen();
 	};
 };
+Q5.modules.dom = ($) => {
+	$.elementMode = (mode) => ($._elementMode = mode);
+
+	$.createElement = (tag, content) => {
+		let el = document.createElement(tag);
+
+		if ($._elementMode == 'center') {
+			el.style.transform = 'translate(-50%, -50%)';
+		}
+
+		if (content) el.innerHTML = content;
+
+		Object.defineProperty(el, 'x', {
+			get: () => el._x,
+			set: (v) => {
+				let pos = el.style.position;
+				if (!pos || pos == 'relative') {
+					el.style.position = 'absolute';
+				}
+				let x = $.canvas.offsetLeft + v;
+				el.style.left = x + 'px';
+				el._x = x;
+			}
+		});
+
+		Object.defineProperty(el, 'y', {
+			get: () => el._y,
+			set: (v) => {
+				let pos = el.style.position;
+				if (!pos || pos == 'relative') {
+					el.style.position = 'absolute';
+				}
+				let y = $.canvas.offsetTop + v;
+				el.style.top = y + 'px';
+				el._y = y;
+			}
+		});
+
+		Object.defineProperty(el, 'width', {
+			get: () => el.style.width,
+			set: (v) => (el.style.width = v + 'px')
+		});
+
+		Object.defineProperty(el, 'height', {
+			get: () => el.style.height,
+			set: (v) => (el.style.height = v + 'px')
+		});
+
+		el.position = (x, y, scheme) => {
+			if (scheme) el.style.position = scheme;
+			el.x = x;
+			el.y = y;
+			return el;
+		};
+
+		// overwrite size
+		Object.defineProperty(el, 'size', {
+			writable: true
+		});
+
+		el.size = (w, h) => {
+			el.width = w;
+			el.height = h;
+			return el;
+		};
+
+		el.center = () => {
+			el.style.position = 'absolute';
+			el.x = $.canvas.hw;
+			el.y = $.canvas.hh;
+			return el;
+		};
+
+		el.show = () => {
+			el.style.display = '';
+			return el;
+		};
+
+		el.hide = () => {
+			el.style.display = 'none';
+			return el;
+		};
+
+		el.parent = (parent) => {
+			parent.append(el);
+			return el;
+		};
+
+		$._elements.push(el);
+		$.canvas.parentElement.append(el);
+
+		return el;
+	};
+	$.createEl = $.createElement;
+
+	$.createA = (href, content, newTab) => {
+		let el = $.createEl('a', content);
+		el.href = href;
+		el.target = newTab ? '_blank' : '_self';
+		return el;
+	};
+
+	$.createButton = (content) => $.createEl('button', content);
+
+	$.createCheckbox = (label = '', checked = false) => {
+		let el = $.createEl('input');
+		el.type = 'checkbox';
+		el.checked = checked;
+		let lbl = $.createEl('label', label);
+		lbl.addEventListener('click', () => {
+			el.checked = !el.checked;
+			el.dispatchEvent(new Event('input', { bubbles: true }));
+			el.dispatchEvent(new Event('change', { bubbles: true }));
+		});
+		el.insertAdjacentElement('afterend', lbl);
+		el.label = lbl;
+		return el;
+	};
+
+	$.createColorPicker = (value = '#ffffff') => {
+		let el = $.createEl('input');
+		el.type = 'color';
+		el.value = value.toString();
+		return el;
+	};
+
+	$.createDiv = (content) => $.createEl('div', content);
+
+	$.createImg = (src) => {
+		let el = $.createEl('img');
+		el.crossOrigin = 'anonymous';
+		el.src = src;
+		return el;
+	};
+
+	$.createInput = (value = '', type = 'text') => {
+		let el = $.createEl('input');
+		el.value = value;
+		el.type = type;
+		el.style.boxSizing = 'border-box';
+		return el;
+	};
+
+	$.createP = (content) => $.createEl('p', content);
+
+	let radioCount = 0;
+	$.createRadio = (name) => {
+		let el = $.createEl('div');
+		el.name = name || 'radio' + radioCount++;
+		el.buttons = [];
+		Object.defineProperty(el, 'value', {
+			get: () => el.selected?.value,
+			set: (v) => {
+				let btn = el.buttons.find((b) => b.value == v);
+				if (btn) {
+					btn.checked = true;
+					el.selected = btn;
+				}
+			}
+		});
+		el.option = (label, value) => {
+			let btn = $.createEl('input');
+			btn.type = 'radio';
+			btn.name = el.name;
+			btn.value = value || label;
+			btn.addEventListener('input', () => (el.selected = btn));
+
+			let lbl = $.createEl('label', label);
+			lbl.addEventListener('click', () => {
+				btn.checked = true;
+				el.selected = btn;
+				btn.dispatchEvent(new Event('input', { bubbles: true }));
+				btn.dispatchEvent(new Event('change', { bubbles: true }));
+			});
+
+			btn.label = lbl;
+			el.append(btn);
+			el.append(lbl);
+			el.buttons.push(btn);
+			return el;
+		};
+
+		return el;
+	};
+
+	$.createSelect = (placeholder) => {
+		let el = $.createEl('select');
+		if (placeholder) {
+			let opt = $.createEl('option', placeholder);
+			opt.disabled = true;
+			opt.selected = true;
+			el.append(opt);
+		}
+		Object.defineProperty(el, 'selected', {
+			get: () => {
+				if (el.multiple) {
+					return Array.from(el.selectedOptions).map((opt) => opt.textContent);
+				}
+				return el.selectedOptions[0]?.textContent;
+			},
+			set: (v) => {
+				if (el.multiple) {
+					Array.from(el.options).forEach((opt) => {
+						opt.selected = v.includes(opt.textContent);
+					});
+				} else {
+					const option = Array.from(el.options).find((opt) => opt.textContent === v);
+					if (option) option.selected = true;
+				}
+			}
+		});
+		Object.defineProperty(el, 'value', {
+			get: () => {
+				if (el.multiple) {
+					return Array.from(el.selectedOptions).map((o) => o.value);
+				}
+				return el.selectedOptions[0]?.value;
+			},
+			set: (v) => {
+				if (el.multiple) {
+					el.options.forEach((o) => (o.selected = v.includes(o.value)));
+				} else {
+					let opt;
+					for (let i = 0; i < el.options.length; i++) {
+						if (el.options[i].value == v) {
+							opt = el.options[i];
+							break;
+						}
+					}
+					if (opt) opt.selected = true;
+				}
+			}
+		});
+		el.option = (label, value) => {
+			let opt = $.createEl('option', label);
+			opt.value = value || label;
+			el.append(opt);
+			return el;
+		};
+		return el;
+	};
+
+	$.createSlider = (min, max, value, step) => {
+		let el = $.createEl('input');
+		el.type = 'range';
+		el.min = min;
+		el.max = max;
+		el.value = value;
+		el.step = step;
+		el.val = () => parseFloat(el.value);
+		return el;
+	};
+
+	$.createSpan = (content) => $.createEl('span', content);
+
+	$.createVideo = (src) => {
+		let el = $.createEl('video');
+		el.crossOrigin = 'anonymous';
+		el.src = src;
+		return el;
+	};
+
+	$.findElement = (selector) => document.querySelector(selector);
+	$.findElements = (selector) => document.querySelectorAll(selector);
+};
 Q5.modules.input = ($, q) => {
 	if ($._scope == 'graphics') return;
 
@@ -3188,6 +3455,342 @@ Q5.PerlinNoise = class extends Q5.Noise {
 		return (total / maxAmp + 1) / 2;
 	}
 };
+Q5.modules.record = ($) => {
+	let rec, btn0, btn1, timer, formatSelect, qualitySelect;
+
+	$.recording = false;
+
+	function initRecorder(opt = {}) {
+		document.head.insertAdjacentHTML(
+			'beforeend',
+			`<style>
+.rec {
+	display: flex;
+	z-index: 1000;
+	gap: 6px;
+	background: #1a1b1d;
+	padding: 6px 8px;
+	border-radius: 21px;
+	box-shadow: #0000001a 0px 4px 12px;
+	border: 2px solid transparent; 
+	opacity: 0.6;
+	transition: all 0.3s;
+	width: 134px;
+	overflow: hidden;
+}
+
+.rec:hover {
+	width: unset;
+	opacity: 0.96;
+}
+
+.rec.recording { border-color: #cc3e44; }
+
+.rec button,
+.rec select { cursor: pointer; }
+
+.rec button,
+.rec select,
+.rec .record-timer {
+	font-family: sans-serif;
+	font-size: 14px;
+	padding: 2px 10px;
+	border-radius: 18px;
+	outline: none;
+	background-color: #232529;
+	color: #d4dae6;
+	box-shadow: #0000001a 0px 4px 12px;
+	border: 1px solid #46494e;
+	vertical-align: middle;
+	line-height: 18px;
+	transition: all 0.3s;
+}
+
+.rec .record-button { 
+	color: #cc3e44;
+	font-size: 18px;
+}
+
+.rec select:hover,
+.rec button:hover { background-color: #292b30; }
+
+.rec button:disabled {
+	opacity: 0.5;
+	color: #969ba5;
+	cursor: not-allowed;
+}
+</style>`
+		);
+
+		rec = $.createEl('div');
+		rec.className = 'rec';
+		rec.innerHTML = `
+<button class="record-button"></button>
+<span class="record-timer"></span>
+<button></button>
+`;
+
+		[btn0, timer, btn1] = rec.children;
+
+		rec.x = rec.y = 8;
+
+		rec.resetTimer = () => (rec.time = { hours: 0, minutes: 0, seconds: 0, frames: 0 });
+		rec.resetTimer();
+
+		rec.formats = opt.formats || {
+			'H.264': 'video/mp4; codecs="avc1.42E01E"',
+			VP9: 'video/mp4; codecs=vp9'
+		};
+
+		// remove unsupported formats
+		for (let format in rec.formats) {
+			if (!MediaRecorder.isTypeSupported(rec.formats[format])) {
+				delete rec.formats[format];
+			}
+		}
+
+		formatSelect = $.createSelect();
+		for (const name in rec.formats) {
+			formatSelect.option(name, rec.formats[name]);
+		}
+		rec.append(formatSelect);
+
+		// prettier-ignore
+		rec.qualityPresets = {
+			SD:   10000000, // 10 Mbps
+			HD:   16000000, // 16 Mbps
+			FHD:  22000000, // 22 Mbps
+			QHD:  28000000, // 28 Mbps
+			'4K': 48000000, // 48 Mbps
+			'8K': 75000000  // 75 Mbps
+		};
+
+		qualitySelect = $.createSelect();
+		for (let name in rec.qualityPresets) {
+			qualitySelect.option(name);
+		}
+		rec.append(qualitySelect);
+
+		rec.encoderSettings = {};
+
+		function changeFormat() {
+			rec.encoderSettings.mimeType = formatSelect.value;
+		}
+
+		function changeQuality() {
+			rec.encoderSettings.videoBitsPerSecond = rec.qualityPresets[qualitySelect.value];
+		}
+
+		formatSelect.addEventListener('change', changeFormat);
+		qualitySelect.addEventListener('change', changeQuality);
+
+		Object.defineProperty(rec, 'quality', {
+			get: () => qualitySelect.selected,
+			set: (v) => {
+				v = v.toUpperCase();
+				if (rec.qualityPresets[v]) {
+					qualitySelect.selected = v;
+					changeQuality();
+				}
+			}
+		});
+
+		Object.defineProperty(rec, 'format', {
+			get: () => formatSelect.selected,
+			set: (v) => {
+				v = v.toUpperCase();
+				if (rec.formats[v]) {
+					formatSelect.selected = v;
+					changeFormat();
+				}
+			}
+		});
+
+		let h = $.canvas.height;
+		rec.quality = h >= 4320 ? '8K' : h >= 2160 ? '4K' : h >= 1440 ? 'QHD' : h >= 1080 ? 'FHD' : h >= 720 ? 'HD' : 'SD';
+
+		if (h >= 1440 && rec.formats.VP9) rec.format = 'VP9';
+		else rec.format = 'H.264';
+
+		btn0.addEventListener('click', () => {
+			if (!$.recording) start();
+			else if (!rec.paused) $.pauseRecording();
+			else resumeRecording();
+		});
+
+		btn1.addEventListener('click', () => {
+			if (rec.paused) $.saveRecording();
+			else $.deleteRecording();
+		});
+
+		resetUI();
+
+		$.registerMethod('post', updateTimer);
+	}
+
+	function start() {
+		if ($.recording) return;
+
+		if (!rec.stream) {
+			rec.frameRate ??= $.getTargetFrameRate();
+			let canvasStream = $.canvas.captureStream(rec.frameRate);
+			// let audioStream = Q5.aud.createMediaStreamDestination().stream;
+			// rec.stream = new MediaStream([canvasStream.getTracks()[0], ...audioStream.getTracks()]);
+			rec.stream = canvasStream;
+		}
+
+		try {
+			rec.mediaRecorder = new MediaRecorder(rec.stream, rec.encoderSettings);
+		} catch (e) {
+			console.error('Failed to initialize MediaRecorder: ', e);
+			return;
+		}
+
+		rec.chunks = [];
+		rec.mediaRecorder.addEventListener('dataavailable', (e) => {
+			if (e.data.size > 0) rec.chunks.push(e.data);
+		});
+
+		rec.mediaRecorder.start();
+		$.recording = true;
+		rec.paused = false;
+		rec.classList.add('recording');
+
+		rec.resetTimer();
+		resetUI(true);
+	}
+
+	function resumeRecording() {
+		if (!$.recording || !rec.paused) return;
+
+		rec.mediaRecorder.resume();
+		rec.paused = false;
+		resetUI(true);
+	}
+
+	function stop() {
+		if (!$.recording) return;
+
+		rec.resetTimer();
+		rec.mediaRecorder.stop();
+		$.recording = false;
+		rec.paused = false;
+		rec.classList.remove('recording');
+	}
+
+	function resetUI(r) {
+		btn0.textContent = r ? '⏸' : '⏺';
+		btn0.title = (r ? 'Pause' : 'Start') + ' Recording';
+		btn1.textContent = r ? '🗑️' : '💾';
+		btn1.title = (r ? 'Delete' : 'Save') + ' Recording';
+		btn1.disabled = !r;
+	}
+
+	function updateTimer() {
+		if ($.recording && !rec.paused) {
+			rec.time.frames++;
+			let fr = $.getTargetFrameRate();
+
+			if (rec.time.frames >= fr) {
+				rec.time.seconds += Math.floor(rec.time.frames / fr);
+				rec.time.frames %= fr;
+
+				if (rec.time.seconds >= 60) {
+					rec.time.minutes += Math.floor(rec.time.seconds / 60);
+					rec.time.seconds %= 60;
+
+					if (rec.time.minutes >= 60) {
+						rec.time.hours += Math.floor(rec.time.minutes / 60);
+						rec.time.minutes %= 60;
+					}
+				}
+			}
+		}
+		timer.textContent = formatTime();
+	}
+
+	function formatTime() {
+		let { hours, minutes, seconds, frames } = rec.time;
+		return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(
+			2,
+			'0'
+		)}:${String(frames).padStart(2, '0')}`;
+	}
+
+	$.createRecorder = (opt) => {
+		if (!rec) initRecorder(opt);
+		return rec;
+	};
+
+	$.record = (opt) => {
+		if (!rec) {
+			initRecorder(opt);
+			rec.hide();
+		}
+		if (!$.recording) start();
+		else if (rec.paused) resumeRecording();
+	};
+
+	$.pauseRecording = () => {
+		if (!$.recording || rec.paused) return;
+
+		rec.mediaRecorder.pause();
+		rec.paused = true;
+
+		resetUI();
+		btn0.title = 'Resume Recording';
+		btn1.disabled = false;
+	};
+
+	$.deleteRecording = () => {
+		stop();
+		resetUI();
+		$.recording = false;
+	};
+
+	$.saveRecording = async (fileName) => {
+		if (!$.recording) return;
+
+		await new Promise((resolve) => {
+			rec.mediaRecorder.onstop = resolve;
+			stop();
+		});
+
+		let type = rec.encoderSettings.mimeType,
+			extension = type.slice(6, type.indexOf(';')),
+			dataUrl = URL.createObjectURL(new Blob(rec.chunks, { type })),
+			iframe = document.createElement('iframe'),
+			a = document.createElement('a');
+
+		// Create an invisible iframe to detect load completion
+		iframe.style.display = 'none';
+		iframe.name = 'download_' + Date.now();
+		document.body.append(iframe);
+
+		a.target = iframe.name;
+		a.href = dataUrl;
+		fileName ??=
+			'recording ' +
+			new Date()
+				.toLocaleString(undefined, { hour12: false })
+				.replace(',', ' at')
+				.replaceAll('/', '-')
+				.replaceAll(':', '_');
+		a.download = `${fileName}.${extension}`;
+
+		await new Promise((resolve) => {
+			iframe.onload = () => {
+				document.body.removeChild(iframe);
+				resolve();
+			};
+			a.click();
+		});
+
+		setTimeout(() => URL.revokeObjectURL(dataUrl), 1000);
+		resetUI();
+		$.recording = false;
+	};
+};
 Q5.modules.sound = ($, q) => {
 	$.Sound = Q5.Sound;
 	let sounds = [];