q5 2.14.4 → 2.14.5

package/src/q5-record.js

@@ -1,366 +0,0 @@
-Q5.modules.record = ($, q) => {
-	class Q5Recorder {
-		constructor(canvas, options = {}) {
-			this.canvas = canvas || document.querySelector('canvas');
-			if (!this.canvas) {
-				throw new Error('Canvas not found');
-			}
-
-			this.mediaRecorder = null;
-			this.chunks = [];
-			this.isRecording = false;
-			this.isPaused = false;
-			this.stream = this.canvas.captureStream($.getTargetFrameRate());
-			this.options = {
-				x: options.x,
-				y: options.y,
-				display: options.x !== undefined || options.y !== undefined ? 'flex' : 'none',
-				...options
-			};
-			this.startTime = null;
-			this.timerInterval = null;
-			this.elapsedTime = 0;
-			this.createUI();
-		}
-
-		createUI() {
-			document.head.insertAdjacentHTML(
-				'afterbegin',
-				`<style>
-.recorder-wrapper {
-		position: absolute;
-		top: ${this.options.y}px;
-		left: ${this.options.x}px;
-		z-index: 1000;
-		gap: 7px;
-		background: rgb(26, 27, 29);
-		padding: 7px;
-		border-radius: 30px;
-		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-		border: 2px solid transparent; 
-		opacity: 0.5;
-		transition: all 0.3s;
-		display: ${this.options.display};
-		overflow: hidden;
-}
-
-.recorder-wrapper:hover {
-		opacity: 0.95;
-}
-
-.recorder-wrapper.recording {
-		border-color: #cc3e44;
-}
-
-.recorder-wrapper.recording .start-button {
-		color: #cc3e44; 
-		opacity: 1;
-}
-
-.recorder-wrapper.recording .format-selector,
-.recorder-wrapper.recording .download-button {
-		width: 0px;
-		height: 0px;
-		opacity: 0;
-		min-width: 0px;
-}
-
-.recorder-wrapper button,
-.recorder-wrapper select,
-.recorder-wrapper .recorder-timer {
-		cursor: pointer;
-		font-size: 13px;
-		padding: 5px 9px;
-		border-radius: 30px;
-		border: none;
-		outline: none;
-		background-color: rgb(35, 37, 41);
-		color: rgb(212, 218, 230);
-		font-family: 'Arial';
-		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-		border: thin solid rgb(70, 73, 78);
-		line-height: 24px;
-		min-width: 37px;
-		max-width: 37px;
-		transition: width 0.3s, height 0.3s, opacity 0.2s;
-		overflow: hidden;
-}
-
-.recorder-wrapper .recorder-timer {
-		min-width: 69px;
-		max-width:100px;
-}
-
-.recorder-wrapper select {
-		max-width:100px;
-}
-
-.recorder-wrapper .format-selector {
-		min-width: 100px;
-}
-
-.recorder-wrapper select:hover,
-.recorder-wrapper button:hover {
-		background-color: rgb(41, 43, 48);
-}
-
-.recorder-wrapper button:disabled {
-		opacity: 0.5;
-		color: rgb(150, 155, 165);
-		cursor: not-allowed;
-}
-
-.recorder-wrapper .download-button {
-		font-size: 18px;
-}
-</style>`
-			);
-
-			let supportedFormats = [
-				{ label: 'H.264', mimeType: 'video/mp4; codecs="avc1.42E01E"' },
-				{ label: 'VP9', mimeType: 'video/mp4; codecs=vp9' }
-			].filter((format) => MediaRecorder.isTypeSupported(format.mimeType));
-
-			let wrapper = document.createElement('div');
-			wrapper.className = 'recorder-wrapper';
-			wrapper.innerHTML = `
-<button></button><button></button><span class="recorder-timer"></span>`;
-
-			let formatSelector = document.createElement('select');
-			for (let format of supportedFormats) {
-				let option = document.createElement('option');
-				option.value = format.mimeType;
-				option.textContent = format.label;
-				formatSelector.appendChild(option);
-			}
-			wrapper.appendChild(formatSelector);
-
-			document.body.appendChild(wrapper);
-
-			this.wrapper = wrapper;
-			let recordPauseButton = (this.recordPauseButton = wrapper.children[0]);
-			let deleteSaveButton = (this.deleteSaveButton = wrapper.children[1]);
-			this.timerDisplay = wrapper.children[2];
-			this.formatSelector = formatSelector;
-
-			this.encoderSettings = {
-				mimeType: formatSelector.value,
-				videoBitsPerSecond: 10000000
-			};
-
-			formatSelector.addEventListener('change', () => {
-				this.encoderSettings.mimeType = formatSelector.value;
-			});
-
-			recordPauseButton.addEventListener('click', () => {
-				if (!this.isRecording) this.start();
-				else if (!this.isPaused) this.pauseRecording();
-				else this.resumeRecording();
-			});
-
-			deleteSaveButton.addEventListener('click', () => {
-				if (this.isPaused) this.saveRecording();
-				else {
-					this.stop();
-					this.chunks = [];
-					this.resetUI();
-				}
-			});
-
-			this.resetUI();
-		}
-
-		start(videoSettings = {}) {
-			if (this.isRecording) return;
-
-			if (videoSettings.mimeType) this.encoderSettings.mimeType = videoSettings.mimeType;
-			if (videoSettings.videoBitsPerSecond) this.encoderSettings.videoBitsPerSecond = videoSettings.videoBitsPerSecond;
-
-			try {
-				this.mediaRecorder = new MediaRecorder(this.stream, this.encoderSettings);
-			} catch (e) {
-				console.error('Failed to initialize MediaRecorder:', e);
-				return;
-			}
-
-			this.chunks = [];
-			this.mediaRecorder.ondataavailable = (event) => {
-				if (event.data.size > 0) {
-					this.chunks.push(event.data);
-				}
-			};
-
-			this.mediaRecorder.start();
-			this.isRecording = true;
-			this.isPaused = false;
-
-			this.recordPauseButton.innerHTML = '⏸';
-			this.recordPauseButton.title = 'Pause Recording';
-			this.deleteSaveButton.innerHTML = '🗑️';
-			this.deleteSaveButton.title = 'Delete Recording';
-
-			this.deleteSaveButton.disabled = false;
-			this.wrapper.classList.add('recording');
-
-			this.startTime = Date.now();
-			this.timerInterval = setInterval(() => {
-				this.updateTimer();
-			}, 50);
-		}
-
-		pauseRecording() {
-			if (!this.isRecording || this.isPaused) return;
-
-			this.mediaRecorder.pause();
-			this.isPaused = true;
-
-			this.recordPauseButton.innerHTML = '⏺';
-			this.recordPauseButton.title = 'Resume Recording';
-			this.deleteSaveButton.innerHTML = '💾';
-			this.deleteSaveButton.title = 'Save Recording';
-
-			this.elapsedTime += Date.now() - this.startTime;
-			clearInterval(this.timerInterval);
-		}
-
-		resumeRecording() {
-			if (!this.isRecording || !this.isPaused) return;
-
-			this.mediaRecorder.resume();
-			this.isPaused = false;
-
-			this.recordPauseButton.innerHTML = '⏸';
-			this.recordPauseButton.title = 'Pause Recording';
-			this.deleteSaveButton.innerHTML = '🗑️';
-			this.deleteSaveButton.title = 'Delete Recording';
-
-			this.startTime = Date.now();
-			this.timerInterval = setInterval(() => {
-				this.updateTimer();
-			}, 50);
-		}
-
-		stop() {
-			if (!this.isRecording) return;
-
-			this.mediaRecorder.stop();
-			this.isRecording = false;
-			this.isPaused = false;
-
-			this.wrapper.classList.remove('recording');
-
-			this.elapsedTime += Date.now() - this.startTime;
-			clearInterval(this.timerInterval);
-			this.updateTimer();
-		}
-
-		saveRecording(fileName = 'recording') {
-			if (this.isRecording) {
-				this.stop();
-				this.mediaRecorder.onstop = () => {
-					this.exportRecording(fileName);
-				};
-			} else {
-				this.exportRecording(fileName);
-			}
-		}
-
-		exportRecording(fileName) {
-			if (this.chunks.length === 0) return;
-
-			let type = this.encoderSettings.mimeType;
-			let extension = type.slice(5, type.indexOf(';') - 5);
-			let fullFileName = `${fileName}.${extension}`;
-			let blob = new Blob(this.chunks, { type });
-			let dataUrl = URL.createObjectURL(blob);
-
-			let anchor = document.createElement('a');
-			anchor.href = dataUrl;
-			anchor.download = fullFileName;
-			anchor.click();
-
-			URL.revokeObjectURL(dataUrl);
-			this.chunks = [];
-			this.resetUI();
-		}
-
-		resetUI() {
-			this.recordPauseButton.innerHTML = '⏺';
-			this.recordPauseButton.title = 'Start Recording';
-
-			this.deleteSaveButton.innerHTML = '💾';
-			this.deleteSaveButton.title = 'Save Recording';
-
-			this.deleteSaveButton.disabled = true;
-			this.timerDisplay.textContent = '00:00:00:00';
-			this.elapsedTime = 0;
-		}
-
-		updateTimer() {
-			let totalElapsed;
-			if (q.isPaused) {
-				totalElapsed = this.elapsedTime;
-			} else {
-				totalElapsed = this.elapsedTime + (Date.now() - this.startTime);
-			}
-			let formattedTime = this.formatTime(totalElapsed);
-			this.timerDisplay.textContent = formattedTime;
-		}
-
-		formatTime(milliseconds) {
-			let totalSeconds = Math.floor(milliseconds / 1000);
-			let hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
-			totalSeconds %= 3600;
-			let minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
-			let seconds = String(totalSeconds % 60).padStart(2, '0');
-			let ms = String(Math.floor((milliseconds % 1000) / 10)).padStart(2, '0');
-			return `${hours}:${minutes}:${seconds}:${ms}`;
-		}
-	}
-
-	$.isRecording = false;
-
-	let _rec;
-
-	$.record = (videoSettings) => {
-		if (!_rec) {
-			_rec = new Q5Recorder($.canvas, { x: undefined, y: undefined });
-		}
-		if (!$.isRecording) {
-			_rec.start(videoSettings);
-			$.isRecording = true;
-		} else if (_rec.isPaused) {
-			_rec.resumeRecording();
-		}
-	};
-
-	$.pauseRecording = () => {
-		if (_rec && $.isRecording && !_rec.isPaused) {
-			_rec.pauseRecording();
-		}
-	};
-
-	$.deleteRecording = () => {
-		if (_rec) {
-			_rec.deleteRecording();
-			$.isRecording = false;
-		}
-	};
-
-	$.saveRecording = (fileName) => {
-		if (_rec) {
-			_rec.saveRecording(fileName);
-			$.isRecording = false;
-		}
-	};
-
-	$.createRecorder = (x = 10, y = 10) => {
-		if (!_rec) {
-			_rec = new Q5Recorder($.canvas, { x, y });
-		} else {
-			_rec.wrapper.style.top = `${y}px`;
-			_rec.wrapper.style.left = `${x}px`;
-			_rec.wrapper.style.display = 'flex';
-		}
-	};
-};

package/src/q5-sensors.js

@@ -1,98 +0,0 @@
-/* Adds mobile device accelerometer and gyroscope input */
-Q5.modules.sensors = ($) => {
-	$.accelerationX = 0;
-	$.accelerationY = 0;
-	$.accelerationZ = 0;
-	$.rotationX = 0;
-	$.rotationY = 0;
-	$.rotationZ = 0;
-	$.relRotationX = 0;
-	$.relRotationY = 0;
-	$.relRotationZ = 0;
-	$.pAccelerationX = 0;
-	$.pAccelerationY = 0;
-	$.pAccelerationZ = 0;
-	$.pRotationX = 0;
-	$.pRotationY = 0;
-	$.pRotationZ = 0;
-	$.pRelRotationX = 0;
-	$.pRelRotationY = 0;
-	$.pRelRotationZ = 0;
-
-	$.hasSensorPermission =
-		(!window.DeviceOrientationEvent && !window.DeviceMotionEvent) ||
-		!(DeviceOrientationEvent.requestPermission || DeviceMotionEvent.requestPermission);
-	$.requestSensorPermissions = () => {
-		if (DeviceOrientationEvent.requestPermission) {
-			DeviceOrientationEvent.requestPermission()
-				.then((response) => {
-					if (response == 'granted') {
-						if (DeviceMotionEvent.requestPermission) {
-							DeviceMotionEvent.requestPermission()
-								.then((response) => {
-									if (response == 'granted') {
-										$.hasSensorPermission = true;
-									}
-								})
-								.catch(alert);
-						}
-					}
-				})
-				.catch(alert);
-		}
-	};
-
-	let ROTX = (a) => [1, 0, 0, 0, 0, $.cos(a), -$.sin(a), 0, 0, $.sin(a), $.cos(a), 0, 0, 0, 0, 1];
-	let ROTY = (a) => [$.cos(a), 0, $.sin(a), 0, 0, 1, 0, 0, -$.sin(a), 0, $.cos(a), 0, 0, 0, 0, 1];
-	let MULT = (A, B) => [
-		A[0] * B[0] + A[1] * B[4] + A[2] * B[8] + A[3] * B[12],
-		A[0] * B[1] + A[1] * B[5] + A[2] * B[9] + A[3] * B[13],
-		A[0] * B[2] + A[1] * B[6] + A[2] * B[10] + A[3] * B[14],
-		A[0] * B[3] + A[1] * B[7] + A[2] * B[11] + A[3] * B[15],
-		A[4] * B[0] + A[5] * B[4] + A[6] * B[8] + A[7] * B[12],
-		A[4] * B[1] + A[5] * B[5] + A[6] * B[9] + A[7] * B[13],
-		A[4] * B[2] + A[5] * B[6] + A[6] * B[10] + A[7] * B[14],
-		A[4] * B[3] + A[5] * B[7] + A[6] * B[11] + A[7] * B[15],
-		A[8] * B[0] + A[9] * B[4] + A[10] * B[8] + A[11] * B[12],
-		A[8] * B[1] + A[9] * B[5] + A[10] * B[9] + A[11] * B[13],
-		A[8] * B[2] + A[9] * B[6] + A[10] * B[10] + A[11] * B[14],
-		A[8] * B[3] + A[9] * B[7] + A[10] * B[11] + A[11] * B[15],
-		A[12] * B[0] + A[13] * B[4] + A[14] * B[8] + A[15] * B[12],
-		A[12] * B[1] + A[13] * B[5] + A[14] * B[9] + A[15] * B[13],
-		A[12] * B[2] + A[13] * B[6] + A[14] * B[10] + A[15] * B[14],
-		A[12] * B[3] + A[13] * B[7] + A[14] * B[11] + A[15] * B[15]
-	];
-	let TRFM = (A, v) => [
-		(A[0] * v[0] + A[1] * v[1] + A[2] * v[2] + A[3]) / (A[12] * v[0] + A[13] * v[1] + A[14] * v[2] + A[15]),
-		(A[4] * v[0] + A[5] * v[1] + A[6] * v[2] + A[7]) / (A[12] * v[0] + A[13] * v[1] + A[14] * v[2] + A[15]),
-		(A[8] * v[0] + A[9] * v[1] + A[10] * v[2] + A[11]) / (A[12] * v[0] + A[13] * v[1] + A[14] * v[2] + A[15])
-	];
-
-	window.addEventListener('deviceorientation', (e) => {
-		$.pRotationX = $.rotationX;
-		$.pRotationY = $.rotationY;
-		$.pRotationZ = $.rotationZ;
-		$.pRelRotationX = $.relRotationX;
-		$.pRelRotationY = $.relRotationY;
-		$.pRelRotationZ = $.relRotationZ;
-
-		$.rotationX = e.beta * (Math.PI / 180.0);
-		$.rotationY = e.gamma * (Math.PI / 180.0);
-		$.rotationZ = e.alpha * (Math.PI / 180.0);
-		$.relRotationX = [-$.rotationY, -$.rotationX, $.rotationY][Math.trunc(window.orientation / 90) + 1];
-		$.relRotationY = [-$.rotationX, $.rotationY, $.rotationX][Math.trunc(window.orientation / 90) + 1];
-		$.relRotationZ = $.rotationZ;
-	});
-
-	window.addEventListener('devicemotion', (e) => {
-		$.pAccelerationX = $.accelerationX;
-		$.pAccelerationY = $.accelerationY;
-		$.pAccelerationZ = $.accelerationZ;
-		if (!e.acceleration) {
-			let grav = TRFM(MULT(ROTY($.rotationY), ROTX($.rotationX)), [0, 0, -9.80665]);
-			$.accelerationX = e.accelerationIncludingGravity.x + grav[0];
-			$.accelerationY = e.accelerationIncludingGravity.y + grav[1];
-			$.accelerationZ = e.accelerationIncludingGravity.z - grav[2];
-		}
-	});
-};

package/src/q5-sound.js

@@ -1,64 +0,0 @@
-Q5.modules.sound = ($, q) => {
-	$.Sound = Q5.Sound;
-
-	let sounds = [];
-
-	$.loadSound = (path, cb) => {
-		q._preloadCount++;
-		let s = new Q5.Sound(path, cb);
-		s.crossOrigin = 'Anonymous';
-		s.addEventListener('canplaythrough', () => {
-			if (!s.loaded) {
-				q._preloadCount--;
-				s.loaded = true;
-				if (Q5.aud) s.init();
-				if (cb) cb(s);
-			}
-		});
-		sounds.push(s);
-		return s;
-	};
-	$.getAudioContext = () => Q5.aud;
-	$.userStartAudio = () => {
-		if (window.AudioContext) {
-			if (!Q5.aud) {
-				Q5.aud = new window.AudioContext();
-				for (let s of sounds) s.init();
-			}
-			return Q5.aud.resume();
-		}
-	};
-};
-
-if (window.Audio) {
-	Q5.Sound ??= class extends Audio {
-		init() {
-			let s = this;
-			s.panner = Q5.aud.createStereoPanner();
-			s.source = Q5.aud.createMediaElementSource(s);
-			s.source.connect(s.panner);
-			s.panner.connect(Q5.aud.destination);
-			let pan = s.pan;
-			Object.defineProperty(s, 'pan', {
-				get: () => s.panner.pan.value,
-				set: (v) => (s.panner.pan.value = v)
-			});
-			if (pan) s.pan = pan;
-		}
-		setVolume(level) {
-			this.volume = level;
-		}
-		setLoop(loop) {
-			this.loop = loop;
-		}
-		setPan(value) {
-			this.pan = value;
-		}
-		isLoaded() {
-			return this.loaded;
-		}
-		isPlaying() {
-			return !this.paused;
-		}
-	};
-}

package/src/q5-util.js

@@ -1,50 +0,0 @@
-Q5.modules.util = ($, q) => {
-	$._loadFile = (path, cb, type) => {
-		q._preloadCount++;
-		let ret = {};
-		fetch(path)
-			.then((r) => {
-				if (type == 'json') return r.json();
-				return r.text();
-			})
-			.then((r) => {
-				q._preloadCount--;
-				if (type == 'csv') r = $.CSV.parse(r);
-				Object.assign(ret, r);
-				if (cb) cb(r);
-			});
-		return ret;
-	};
-
-	$.loadText = (path, cb) => $._loadFile(path, cb, 'text');
-	$.loadJSON = (path, cb) => $._loadFile(path, cb, 'json');
-	$.loadCSV = (path, cb) => $._loadFile(path, cb, 'csv');
-
-	$.CSV = {};
-	$.CSV.parse = (csv, sep = ',', lineSep = '\n') => {
-		if (!csv.length) return [];
-		let a = [],
-			lns = csv.split(lineSep),
-			headers = lns[0].split(sep).map((h) => h.replaceAll('"', ''));
-		for (let i = 1; i < lns.length; i++) {
-			let o = {},
-				ln = lns[i].split(sep);
-			headers.forEach((h, i) => (o[h] = JSON.parse(ln[i])));
-			a.push(o);
-		}
-		return a;
-	};
-
-	if (typeof localStorage == 'object') {
-		$.storeItem = localStorage.setItem;
-		$.getItem = localStorage.getItem;
-		$.removeItem = localStorage.removeItem;
-		$.clearStorage = localStorage.clear;
-	}
-
-	$.year = () => new Date().getFullYear();
-	$.day = () => new Date().getDay();
-	$.hour = () => new Date().getHours();
-	$.minute = () => new Date().getMinutes();
-	$.second = () => new Date().getSeconds();
-};