presently 0.23.0 → 0.24.0

data/public/recorder.js

@@ -1,366 +0,0 @@
-const RECORDING_EDGE_DELAY = 100;
-
-// Records and reviews the narration for one slide. The element is recreated
-// when the selected slide changes, which gives each recording session a clear
-// lifetime and releases the microphone during navigation.
-export class PresentlyRecorder extends HTMLElement {
-	#mediaRecorder = null;
-	#mediaStream = null;
-	#audioContext = null;
-	#audioSource = null;
-	#audioDelay = null;
-	#audioDestination = null;
-	#chunks = [];
-	#recording = null;
-	#recordingURL = null;
-	#recordingDuration = null;
-	#startedAt = null;
-	#timer = null;
-	#startToken = null;
-	#ignoreClick = false;
-	
-	connectedCallback() {
-		this.recordButton = this.querySelector('.recording-toggle');
-		this.saveButton = this.querySelector('.recording-save');
-		this.playback = this.querySelector('.recording-playback');
-		this.applyDurationButton = this.querySelector('.recording-apply-duration');
-		this.updateDuration = this.querySelector('.recording-update-duration');
-		this.status = this.querySelector('.recording-status');
-		this.time = this.querySelector('.recording-time');
-		
-		// Stop as soon as the pointer is pressed so the delayed audio excludes the
-		// click. The click handler provides both starting and keyboard activation.
-		this.recordButton.addEventListener('pointerdown', () => {
-			if (this.isRecording()) {
-				this.#ignoreClick = true;
-				this.stop();
-			}
-		});
-		this.recordButton.addEventListener('click', () => {
-			if (this.#ignoreClick) {
-				this.#ignoreClick = false;
-				return;
-			}
-
-			if (this.recordButton.disabled) return;
-			
-			if (this.isRecording()) {
-				this.stop();
-			} else {
-				this.start(performance.now());
-			}
-		});
-		this.saveButton.addEventListener('click', () => this.save());
-		this.applyDurationButton.addEventListener('click', () => this.updateSlideDuration());
-		this.playback.addEventListener('loadedmetadata', () => this.updateDurationAction());
-		
-		this.loadExisting();
-	}
-	
-	disconnectedCallback() {
-		this.#startToken = null;
-
-		if (this.#mediaRecorder?.state === 'recording') {
-			this.#mediaRecorder.onstop = null;
-			this.#mediaRecorder.stop();
-		}
-		
-		this.releaseMicrophone();
-		this.stopTimer();
-		this.releaseRecordingURL();
-	}
-	
-	get url() {
-		return this.dataset.recordingUrl;
-	}
-
-	isRecording() {
-		return this.#mediaRecorder?.state === 'recording';
-	}
-	
-	async loadExisting() {
-		try {
-			const response = await fetch(this.url, {method: 'HEAD', cache: 'no-store'});
-			
-			if (response.ok) {
-				this.playback.src = this.cacheBustedURL();
-				this.playback.hidden = false;
-				this.recordButton.textContent = '● Retake';
-				this.setStatus('Existing recording loaded.');
-			} else if (response.status === 404) {
-				this.setStatus('No recording yet.');
-			} else {
-				throw new Error(`Could not check recording (${response.status}).`);
-			}
-		} catch (error) {
-			this.setStatus(error.message, true);
-		}
-	}
-	
-	async start(clickedAt) {
-		const AudioContext = window.AudioContext || window.webkitAudioContext;
-		if (!window.MediaRecorder || !navigator.mediaDevices?.getUserMedia || !AudioContext) {
-			this.setStatus('Audio recording is not supported by this browser.', true);
-			return;
-		}
-		
-		const mimeType = 'audio/webm;codecs=opus';
-		if (!MediaRecorder.isTypeSupported(mimeType)) {
-			this.setStatus(`${mimeType} recording is not supported by this browser.`, true);
-			return;
-		}
-		
-		const startToken = this.#startToken = {};
-		this.recordButton.disabled = true;
-		this.saveButton.disabled = true;
-		this.applyDurationButton.hidden = true;
-		this.#recordingDuration = null;
-		this.dataset.state = 'preparing';
-		this.setStatus('Preparing microphone…');
-
-		try {
-			this.playback.pause();
-			this.#audioContext = new AudioContext();
-			await this.#audioContext.resume();
-
-			if (this.#startToken !== startToken || !this.isConnected) {
-				this.releaseMicrophone();
-				return;
-			}
-
-			const audio = {};
-			if (navigator.mediaDevices.getSupportedConstraints().autoGainControl) {
-				// Preserve the microphone's dynamics for consistent offline normalization.
-				audio.autoGainControl = false;
-			}
-
-			const mediaStream = await navigator.mediaDevices.getUserMedia({audio});
-
-			if (this.#startToken !== startToken || !this.isConnected) {
-				mediaStream.getTracks().forEach(track => track.stop());
-				this.releaseMicrophone();
-				return;
-			}
-
-			this.#mediaStream = mediaStream;
-			this.#audioSource = this.#audioContext.createMediaStreamSource(mediaStream);
-
-			this.#audioDelay = this.#audioContext.createDelay(RECORDING_EDGE_DELAY / 1000);
-			this.#audioDelay.delayTime.value = RECORDING_EDGE_DELAY / 1000;
-			this.#audioDestination = this.#audioContext.createMediaStreamDestination();
-			this.#audioSource
-				.connect(this.#audioDelay)
-				.connect(this.#audioDestination);
-
-			this.#chunks = [];
-			this.#mediaRecorder = new MediaRecorder(this.#audioDestination.stream, {mimeType});
-			
-			this.#mediaRecorder.addEventListener('dataavailable', (event) => {
-				if (event.data.size > 0) this.#chunks.push(event.data);
-			});
-			
-			this.#mediaRecorder.onstop = () => this.finish();
-
-			this.dataset.state = 'starting';
-			this.setStatus('Starting…');
-
-			// Audio reaches MediaRecorder 100 ms after it reaches the microphone. Starting
-			// the encoder 200 ms after the click therefore retains audio beginning 100 ms
-			// after pointer-up. If microphone setup took longer, wait only long enough for
-			// the newly-created delay line to contain live audio.
-			const startAt = Math.max(
-				clickedAt + RECORDING_EDGE_DELAY * 2,
-				performance.now() + RECORDING_EDGE_DELAY,
-			);
-			await new Promise(resolve => window.setTimeout(resolve, Math.max(0, startAt - performance.now())));
-
-			if (this.#startToken !== startToken || !this.isConnected) return;
-
-			this.#mediaRecorder.start();
-			this.#startToken = null;
-			this.startTimer();
-			
-			this.recordButton.disabled = false;
-			this.recordButton.textContent = '■ Stop';
-			this.dataset.state = 'recording';
-			this.setStatus('Recording…');
-		} catch (error) {
-			if (this.#startToken !== startToken) return;
-
-			this.#startToken = null;
-			this.releaseMicrophone();
-			this.recordButton.disabled = false;
-			this.dataset.state = 'idle';
-			this.setStatus(`Could not start recording: ${error.message}`, true);
-		}
-	}
-	
-	stop() {
-		if (this.#mediaRecorder?.state === 'recording') {
-			this.#recordingDuration = (performance.now() - this.#startedAt) / 1000;
-			
-			// The encoder receives audio through a 100 ms delay. Stopping immediately
-			// excludes approximately the final 100 ms before this pointer-down event.
-			this.#mediaRecorder.stop();
-			this.recordButton.disabled = true;
-			this.dataset.state = 'finishing';
-			this.setStatus('Preparing recording…');
-		}
-	}
-	
-	finish() {
-		this.stopTimer();
-		this.releaseMicrophone();
-		this.releaseRecordingURL();
-		
-		this.#recording = new Blob(this.#chunks, {type: 'audio/webm'});
-		this.#recordingURL = URL.createObjectURL(this.#recording);
-		this.playback.src = this.#recordingURL;
-		this.playback.hidden = false;
-		this.applyDurationButton.hidden = true;
-		
-		this.recordButton.disabled = false;
-		this.recordButton.textContent = '● Retake';
-		this.saveButton.disabled = this.#recording.size === 0;
-		this.dataset.state = 'review';
-		this.setStatus(this.#recording.size > 0 ? 'Review the recording, then save it.' : 'The recording was empty.', this.#recording.size === 0);
-	}
-	
-	async save() {
-		if (!this.#recording) return;
-		
-		this.saveButton.disabled = true;
-		this.setStatus('Saving…');
-		
-		try {
-			const url = new URL(this.url, window.location.href);
-			let duration = null;
-			
-			if (this.updateDuration.checked) {
-				duration = this.canonicalDuration();
-				if (!duration) {
-					throw new Error('Could not determine the recording duration.');
-				}
-				
-				url.searchParams.set('duration', duration);
-			}
-			
-			const response = await fetch(url, {
-				method: 'PUT',
-				headers: {'content-type': this.#recording.type},
-				body: this.#recording,
-			});
-			
-			if (!response.ok) {
-				throw new Error((await response.text()) || `Could not save recording (${response.status}).`);
-			}
-			
-			// Keep the reviewed blob loaded because replacing its source resets media metadata:
-			this.#recording = null;
-			if (duration) this.dataset.slideDuration = String(duration);
-			this.updateDurationAction();
-			const unit = duration === 1 ? 'second' : 'seconds';
-			this.setStatus(duration ? `Recording saved. Slide duration set to ${duration} ${unit}.` : 'Recording saved.');
-		} catch (error) {
-			this.saveButton.disabled = false;
-			this.setStatus(`Could not save recording: ${error.message}`, true);
-		}
-	}
-	
-	canonicalDuration() {
-		const duration = this.recordingDuration();
-		if (!Number.isFinite(duration) || duration <= 0) return null;
-		return Math.max(1, Math.ceil(duration));
-	}
-	
-	updateDurationAction() {
-		const recordingDuration = this.canonicalDuration();
-		const slideDuration = Number(this.dataset.slideDuration);
-		this.applyDurationButton.hidden = Boolean(this.#recording) || !recordingDuration || recordingDuration === slideDuration;
-	}
-	
-	async updateSlideDuration() {
-		const duration = this.canonicalDuration();
-		if (!duration) return;
-		
-		this.applyDurationButton.disabled = true;
-		this.setStatus('Updating slide duration…');
-		
-		try {
-			const url = new URL(this.url, window.location.href);
-			url.searchParams.set('duration', duration);
-			const response = await fetch(url, {method: 'PATCH'});
-			
-			if (!response.ok) {
-				throw new Error((await response.text()) || `Could not update slide duration (${response.status}).`);
-			}
-			
-			this.dataset.slideDuration = String(duration);
-			this.applyDurationButton.disabled = false;
-			this.applyDurationButton.hidden = true;
-			const unit = duration === 1 ? 'second' : 'seconds';
-			this.setStatus(`Slide duration set to ${duration} ${unit}.`);
-		} catch (error) {
-			this.applyDurationButton.disabled = false;
-			this.setStatus(`Could not update slide duration: ${error.message}`, true);
-		}
-	}
-	
-	recordingDuration() {
-		if (Number.isFinite(this.playback.duration) && this.playback.duration > 0) {
-			return this.playback.duration;
-		}
-		
-		return this.#recordingDuration;
-	}
-	
-	startTimer() {
-		this.#startedAt = performance.now();
-		this.updateTimer();
-		this.#timer = window.setInterval(() => this.updateTimer(), 250);
-	}
-	
-	stopTimer() {
-		if (this.#timer) window.clearInterval(this.#timer);
-		this.#timer = null;
-	}
-	
-	updateTimer() {
-		const elapsed = Math.floor((performance.now() - this.#startedAt) / 1000);
-		const minutes = Math.floor(elapsed / 60);
-		const seconds = String(elapsed % 60).padStart(2, '0');
-		this.time.textContent = `${minutes}:${seconds}`;
-	}
-	
-	releaseMicrophone() {
-		this.#mediaStream?.getTracks().forEach(track => track.stop());
-		this.#mediaStream = null;
-
-		this.#audioDestination?.stream.getTracks().forEach(track => track.stop());
-		this.#audioSource?.disconnect();
-		this.#audioDelay?.disconnect();
-		this.#audioDestination?.disconnect();
-		this.#audioContext?.close().catch(() => {});
-
-		this.#audioContext = null;
-		this.#audioSource = null;
-		this.#audioDelay = null;
-		this.#audioDestination = null;
-	}
-	
-	releaseRecordingURL() {
-		if (this.#recordingURL) URL.revokeObjectURL(this.#recordingURL);
-		this.#recordingURL = null;
-	}
-	
-	cacheBustedURL() {
-		return `${this.url}&version=${Date.now()}`;
-	}
-	
-	setStatus(message, error = false) {
-		this.status.textContent = message;
-		this.status.classList.toggle('error', error);
-	}
-}
-
-customElements.define('presently-recorder', PresentlyRecorder);