q5 2.17.0 → 2.18.1

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.17
+ * @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.17';
+Q5.version = Q5.VERSION = '2.18';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -2625,7 +2625,7 @@ Q5.modules.dom = ($) => {
 		};
 
 		el.show = () => {
-			el.style.display = 'block';
+			el.style.display = '';
 			return el;
 		};
 
@@ -2662,6 +2662,7 @@ Q5.modules.dom = ($) => {
 		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);
@@ -2715,12 +2716,13 @@ Q5.modules.dom = ($) => {
 			btn.type = 'radio';
 			btn.name = el.name;
 			btn.value = value || label;
-			btn.addEventListener('change', () => (el.selected = btn));
+			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 }));
 			});
 
@@ -2744,14 +2746,19 @@ Q5.modules.dom = ($) => {
 		}
 		Object.defineProperty(el, 'selected', {
 			get: () => {
-				if (el.multiple) return Array.from(el.selectedOptions);
-				return el.selectedOptions[0];
+				if (el.multiple) {
+					return Array.from(el.selectedOptions).map((opt) => opt.textContent);
+				}
+				return el.selectedOptions[0]?.textContent;
 			},
 			set: (v) => {
 				if (el.multiple) {
-					el.options.forEach((o) => (o.selected = v.includes(o)));
+					Array.from(el.options).forEach((opt) => {
+						opt.selected = v.includes(opt.textContent);
+					});
 				} else {
-					v.selected = true;
+					const option = Array.from(el.options).find((opt) => opt.textContent === v);
+					if (option) option.selected = true;
 				}
 			}
 		});
@@ -3448,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 = [];