@editframe/elements 0.18.3-beta.0 → 0.18.8-beta.0

package/dist/gui/services/PlaybackController.js

@@ -1,290 +0,0 @@
-/**
-* Manages playback timing, AudioContext lifecycle, and timeline synchronization
-* Extracted from ContextMixin to improve separation of concerns and testability
-*/
-var PlaybackController = class {
-	constructor(options = {}) {
-		this.playbackAudioContext = null;
-		this.animationFrameRequest = null;
-		this.playing = false;
-		this.currentTimeMs = 0;
-		this.audioStartTime = 0;
-		this.playbackStartTimeMs = 0;
-		this.activeChunks = /* @__PURE__ */ new Map();
-		this.chunkDurationMs = 4e3;
-		this.lookaheadChunks = 2;
-		this.currentChunkIndex = 0;
-		this.renderingChunks = /* @__PURE__ */ new Set();
-		this.options = {
-			fps: 30,
-			onTimeUpdate: () => {},
-			onPlayStateChange: () => {},
-			onError: () => {},
-			...options
-		};
-		this.msPerFrame = 1e3 / this.options.fps;
-	}
-	/**
-	* Start playback for the given timegroup
-	*/
-	async startPlayback(timegroup, fromMs) {
-		await this.stopPlayback();
-		if (!timegroup) {
-			this.setPlaying(false);
-			this.options.onPlayStateChange(false);
-			this.options.onError(/* @__PURE__ */ new Error("No timegroup provided"));
-			return;
-		}
-		await timegroup.waitForMediaDurations?.();
-		const currentMs = fromMs ?? timegroup.currentTimeMs ?? 0;
-		const toMs = timegroup.endTimeMs;
-		if (currentMs >= toMs) {
-			this.setPlaying(false);
-			this.options.onPlayStateChange(false);
-			return;
-		}
-		try {
-			this.playbackAudioContext = new AudioContext({ latencyHint: "playback" });
-			if (this.playbackAudioContext.state === "suspended") {
-				console.warn("AudioContext is suspended, attempting to resume...");
-				try {
-					await Promise.race([this.playbackAudioContext.resume(), new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("AudioContext resume timeout")), 2e3))]);
-				} catch (error) {
-					console.warn("AudioContext resume failed:", error);
-				}
-			} else await this.playbackAudioContext.resume();
-			this.audioStartTime = this.playbackAudioContext.currentTime;
-			this.playbackStartTimeMs = currentMs;
-			this.currentChunkIndex = Math.floor(currentMs / this.chunkDurationMs);
-			await this.startProgressivePlayback(timegroup, currentMs, toMs);
-			if (this.isAudioContextReady()) {
-				this.setPlaying(true);
-				this.currentTimeMs = currentMs;
-				this.options.onTimeUpdate(currentMs);
-				this.syncPlayheadToAudioBuffer(timegroup, currentMs);
-			} else {
-				this.setPlaying(false);
-				this.options.onPlayStateChange(false);
-				console.warn("AudioContext not ready for playback, state:", this.playbackAudioContext?.state);
-			}
-		} catch (error) {
-			console.error("🎵 [PLAYBACK_ERROR] Failed to setup progressive audio playback:", error);
-			this.setPlaying(false);
-			this.options.onPlayStateChange(false);
-			this.options.onError(error);
-		}
-	}
-	/**
-	* Stop playback and clean up resources
-	*/
-	async stopPlayback() {
-		for (const [_chunkIndex, bufferSource] of this.activeChunks.entries()) try {
-			bufferSource.stop();
-		} catch (_error) {}
-		this.activeChunks.clear();
-		this.renderingChunks.clear();
-		if (this.playbackAudioContext) {
-			if (this.playbackAudioContext.state !== "closed") await this.playbackAudioContext.close();
-		}
-		if (this.animationFrameRequest) {
-			cancelAnimationFrame(this.animationFrameRequest);
-			this.animationFrameRequest = null;
-		}
-		this.playbackAudioContext = null;
-		this.setPlaying(false);
-	}
-	/**
-	* Pause playback (can be resumed)
-	*/
-	async pausePlayback() {
-		if (this.playbackAudioContext && this.playbackAudioContext.state === "running") try {
-			await Promise.race([this.playbackAudioContext.suspend(), new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("AudioContext suspend timeout")), 2e3))]);
-		} catch (error) {
-			console.warn("AudioContext suspend failed:", error);
-		}
-		if (this.animationFrameRequest) {
-			cancelAnimationFrame(this.animationFrameRequest);
-			this.animationFrameRequest = null;
-		}
-		this.setPlaying(false);
-	}
-	/**
-	* Resume paused playback
-	*/
-	async resumePlayback() {
-		if (this.playbackAudioContext && this.playbackAudioContext.state === "suspended") {
-			try {
-				await Promise.race([this.playbackAudioContext.resume(), new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("AudioContext resume timeout")), 2e3))]);
-			} catch (error) {
-				console.warn("AudioContext resume failed:", error);
-			}
-			this.setPlaying(true);
-		}
-	}
-	/**
-	* Seek to a specific time (restarts progressive playback from new position)
-	*/
-	async seekTo(timeMs, timegroup) {
-		this.currentTimeMs = timeMs;
-		this.options.onTimeUpdate(timeMs);
-		if (this.playing && timegroup) {
-			for (const bufferSource of this.activeChunks.values()) try {
-				bufferSource.stop();
-			} catch (_error) {}
-			this.activeChunks.clear();
-			this.renderingChunks.clear();
-			this.audioStartTime = this.playbackAudioContext?.currentTime ?? 0;
-			this.playbackStartTimeMs = timeMs;
-			this.currentChunkIndex = Math.floor(timeMs / this.chunkDurationMs);
-			await this.startProgressivePlayback(timegroup, timeMs, timegroup.endTimeMs);
-		}
-	}
-	/**
-	* Internal method to sync playhead with unified audio buffer timing
-	*/
-	syncPlayheadToAudioBuffer(timegroup, startMs) {
-		if (!this.playbackAudioContext || !this.playing) return;
-		const elapsedAudioTime = this.playbackAudioContext.currentTime - this.audioStartTime;
-		const rawTimeMs = startMs + elapsedAudioTime * 1e3;
-		const nextTimeMs = Math.round(rawTimeMs / this.msPerFrame) * this.msPerFrame;
-		if (nextTimeMs !== this.currentTimeMs) {
-			this.currentTimeMs = nextTimeMs;
-			this.options.onTimeUpdate(nextTimeMs);
-			if (timegroup && timegroup.currentTimeMs !== nextTimeMs) timegroup.currentTimeMs = nextTimeMs;
-			this.updateProgressiveChunks(timegroup, nextTimeMs, timegroup.endTimeMs);
-		}
-		this.animationFrameRequest = requestAnimationFrame(() => {
-			this.syncPlayheadToAudioBuffer(timegroup, startMs);
-		});
-	}
-	/**
-	* Update playing state and notify observers
-	*/
-	setPlaying(playing) {
-		if (this.playing !== playing) {
-			this.playing = playing;
-			this.options.onPlayStateChange(playing);
-		}
-	}
-	/**
-	* Get current playback state
-	*/
-	isPlaying() {
-		return this.playing;
-	}
-	/**
-	* Get current time
-	*/
-	getCurrentTime() {
-		return this.currentTimeMs;
-	}
-	/**
-	* Get current AudioContext
-	*/
-	getAudioContext() {
-		return this.playbackAudioContext;
-	}
-	/**
-	* Check if AudioContext is ready
-	*/
-	isAudioContextReady() {
-		return this.playbackAudioContext != null && this.playbackAudioContext.state !== "closed";
-	}
-	/**
-	* Get playback statistics for debugging
-	*/
-	getPlaybackInfo() {
-		return {
-			playing: this.playing,
-			currentTimeMs: this.currentTimeMs,
-			audioContextState: this.playbackAudioContext?.state || null,
-			hasElementManager: false
-		};
-	}
-	/**
-	* Update playback options
-	*/
-	updateOptions(options) {
-		Object.assign(this.options, options);
-		if (options.fps) this.msPerFrame = 1e3 / options.fps;
-	}
-	/**
-	* Start progressive chunk rendering and playback
-	*/
-	async startProgressivePlayback(timegroup, fromMs, _toMs) {
-		const firstChunkIndex = Math.floor(fromMs / this.chunkDurationMs);
-		const firstChunkStart = firstChunkIndex * this.chunkDurationMs;
-		const offsetInChunk = fromMs - firstChunkStart;
-		await this.renderAndScheduleChunk(timegroup, firstChunkStart, firstChunkIndex, offsetInChunk);
-	}
-	/**
-	* Render and schedule a single audio chunk
-	*/
-	async renderAndScheduleChunk(timegroup, chunkStartMs, chunkIndex, offsetInChunk = 0) {
-		if (this.renderingChunks.has(chunkIndex) || this.activeChunks.has(chunkIndex)) return;
-		this.renderingChunks.add(chunkIndex);
-		try {
-			const chunkEndMs = chunkStartMs + this.chunkDurationMs;
-			const chunkBuffer = await timegroup.renderAudio(chunkStartMs, chunkEndMs);
-			const bufferSource = this.playbackAudioContext?.createBufferSource();
-			if (!bufferSource || !this.playbackAudioContext?.destination) throw new Error("Audio context or buffer source not available");
-			bufferSource.buffer = chunkBuffer;
-			bufferSource.connect(this.playbackAudioContext.destination);
-			const chunkTimelineStartMs = chunkIndex * this.chunkDurationMs;
-			const relativeDelayMs = Math.max(0, chunkTimelineStartMs - this.playbackStartTimeMs);
-			const chunkStartTime = this.audioStartTime + relativeDelayMs / 1e3;
-			const startOffset = offsetInChunk / 1e3;
-			const now = this.playbackAudioContext?.currentTime ?? 0;
-			if (chunkStartTime <= now) console.warn(`🎵 [CHUNK_TIMING_WARNING] Chunk ${chunkIndex} scheduled in the past! startTime=${chunkStartTime.toFixed(3)}s, currentTime=${now.toFixed(3)}s`);
-			bufferSource.start(chunkStartTime, startOffset);
-			this.activeChunks.set(chunkIndex, bufferSource);
-			bufferSource.onended = () => {
-				this.activeChunks.delete(chunkIndex);
-			};
-		} catch (error) {
-			console.error(`🎵 [CHUNK_ERROR] Failed to render chunk ${chunkIndex}:`, error);
-		} finally {
-			this.renderingChunks.delete(chunkIndex);
-		}
-	}
-	/**
-	* Update chunk rendering as playhead advances - now handles all chunk management
-	*/
-	updateProgressiveChunks(timegroup, currentTimeMs, maxTimeMs) {
-		const newChunkIndex = Math.floor(currentTimeMs / this.chunkDurationMs);
-		if (newChunkIndex !== this.currentChunkIndex) {
-			this.currentChunkIndex = newChunkIndex;
-			this.cleanupOldChunks();
-		}
-		this.ensureChunksAhead(timegroup, maxTimeMs);
-	}
-	/**
-	* Systematically ensure chunks are ready ahead of current playback (synchronous)
-	*/
-	ensureChunksAhead(timegroup, maxTimeMs) {
-		for (let i = 1; i <= this.lookaheadChunks; i++) {
-			const targetChunkIndex = this.currentChunkIndex + i;
-			const targetChunkStartMs = targetChunkIndex * this.chunkDurationMs;
-			if (targetChunkStartMs >= maxTimeMs) break;
-			if (!this.renderingChunks.has(targetChunkIndex) && !this.activeChunks.has(targetChunkIndex)) {
-				const offsetInChunk = 0;
-				this.renderAndScheduleChunk(timegroup, targetChunkStartMs, targetChunkIndex, offsetInChunk).catch((error) => {
-					console.error(`🎵 [ENSURE_CHUNKS_ERROR] Failed to render chunk ${targetChunkIndex}:`, error);
-				});
-			}
-		}
-	}
-	/**
-	* Clean up chunks that are behind the current playhead
-	*/
-	cleanupOldChunks() {
-		const cutoffChunkIndex = this.currentChunkIndex - 1;
-		for (const [chunkIndex, bufferSource] of this.activeChunks.entries()) if (chunkIndex < cutoffChunkIndex) {
-			try {
-				bufferSource.stop();
-			} catch (_error) {}
-			this.activeChunks.delete(chunkIndex);
-		}
-	}
-};
-export { PlaybackController };

package/dist/services/MediaSourceManager.d.ts

@@ -1,62 +0,0 @@
-export interface MediaSourceManagerOptions {
-    onError?: (error: Error) => void;
-    onReady?: () => void;
-    onUpdateEnd?: () => void;
-    timeout?: number;
-}
-/**
- * Manages MediaSource for audio streaming
- */
-export declare class MediaSourceManager {
-    private mediaSource;
-    private audioElement;
-    private sourceBuffer;
-    private mediaSourceReady;
-    private pendingSegments;
-    private options;
-    constructor(options?: MediaSourceManagerOptions);
-    /**
-     * Initialize MediaSource for audio streaming
-     */
-    initialize(): Promise<void>;
-    /**
-     * Create SourceBuffer with codec fallback
-     */
-    private createSourceBuffer;
-    /**
-     * Setup SourceBuffer event listeners
-     */
-    private setupSourceBufferListeners;
-    /**
-     * Feed audio segments directly to MediaSource SourceBuffer
-     */
-    feedSegment(segmentBuffer: ArrayBuffer): Promise<void>;
-    /**
-     * Process any queued segments when SourceBuffer becomes available
-     */
-    private processPendingSegments;
-    /**
-     * Log debug information for troubleshooting
-     */
-    private logDebugInfo;
-    /**
-     * Set audio element current time
-     */
-    setCurrentTime(timeMs: number): void;
-    /**
-     * Get the audio element for MediaElementSource
-     */
-    getAudioElement(): HTMLAudioElement | null;
-    /**
-     * Check if MediaSource is ready
-     */
-    isReady(): boolean;
-    /**
-     * Get buffered time ranges
-     */
-    getBuffered(): TimeRanges | null;
-    /**
-     * Clean up MediaSource resources
-     */
-    cleanup(_preserveCache?: boolean): void;
-}

package/dist/services/MediaSourceManager.js

@@ -1,211 +0,0 @@
-/**
-* Manages MediaSource for audio streaming
-*/
-var MediaSourceManager = class {
-	constructor(options = {}) {
-		this.mediaSource = null;
-		this.audioElement = null;
-		this.sourceBuffer = null;
-		this.mediaSourceReady = false;
-		this.pendingSegments = [];
-		this.options = {
-			timeout: 1e4,
-			...options
-		};
-	}
-	/**
-	* Initialize MediaSource for audio streaming
-	*/
-	async initialize() {
-		this.cleanup(true);
-		this.mediaSource = new MediaSource();
-		this.audioElement = document.createElement("audio");
-		this.audioElement.addEventListener("error", (event) => {
-			const error = this.audioElement?.error;
-			console.error("🎵 [AUDIO_ELEMENT_ERROR] Audio element error:", {
-				code: error?.code,
-				message: error?.message,
-				event
-			});
-			if (this.options.onError) this.options.onError(/* @__PURE__ */ new Error(`Audio element error: ${error?.message}`));
-		});
-		this.audioElement.src = URL.createObjectURL(this.mediaSource);
-		return new Promise((resolve, reject) => {
-			this.mediaSource?.addEventListener("sourceopen", () => {
-				try {
-					const sourceBuffer = this.createSourceBuffer();
-					if (!sourceBuffer) throw new Error("Failed to create SourceBuffer with any supported codec");
-					this.sourceBuffer = sourceBuffer;
-					this.setupSourceBufferListeners();
-					this.mediaSourceReady = true;
-					if (this.options.onReady) this.options.onReady();
-					resolve();
-				} catch (error) {
-					console.error("🎵 [MEDIA_SOURCE_ERROR] Failed to create SourceBuffer:", error);
-					reject(error);
-				}
-			});
-			this.mediaSource?.addEventListener("error", (error) => {
-				console.error("🎵 [MEDIA_SOURCE_ERROR] MediaSource error:", error);
-				reject(error);
-			});
-			setTimeout(() => {
-				if (!this.mediaSourceReady) {
-					const timeoutError = /* @__PURE__ */ new Error("MediaSource failed to open within timeout");
-					console.error("🎵 [MEDIA_SOURCE_TIMEOUT] MediaSource initialization timeout");
-					reject(timeoutError);
-				}
-			}, 4e3);
-		});
-	}
-	/**
-	* Create SourceBuffer with codec fallback
-	*/
-	createSourceBuffer() {
-		const codecOptions = [
-			"audio/mp4; codecs=\"mp4a.40.2\"",
-			"audio/mp4; codecs=\"mp4a.40.5\"",
-			"audio/mp4"
-		];
-		let sourceBuffer;
-		let lastError;
-		for (const codec of codecOptions) try {
-			if (MediaSource.isTypeSupported(codec)) {
-				sourceBuffer = this.mediaSource?.addSourceBuffer(codec);
-				break;
-			}
-		} catch (error) {
-			console.error(`🎵 [CODEC_ERROR] Failed to create SourceBuffer with ${codec}:`, error);
-			lastError = error;
-		}
-		if (!sourceBuffer && lastError) throw new Error(`Failed to create SourceBuffer with any supported codec. Last error: ${lastError.message}`);
-		return sourceBuffer;
-	}
-	/**
-	* Setup SourceBuffer event listeners
-	*/
-	setupSourceBufferListeners() {
-		if (!this.sourceBuffer) return;
-		this.sourceBuffer.addEventListener("updateend", () => {
-			this.processPendingSegments();
-			if (this.options.onUpdateEnd) this.options.onUpdateEnd();
-		});
-		this.sourceBuffer.addEventListener("error", (event) => {
-			console.error("🎵 [SOURCE_BUFFER_EVENT_ERROR] SourceBuffer error event:", event);
-			if (this.options.onError) this.options.onError(/* @__PURE__ */ new Error("SourceBuffer error"));
-		});
-	}
-	/**
-	* Feed audio segments directly to MediaSource SourceBuffer
-	*/
-	async feedSegment(segmentBuffer) {
-		if (!this.mediaSourceReady || !this.sourceBuffer) {
-			this.pendingSegments.push(segmentBuffer);
-			return;
-		}
-		if (this.sourceBuffer.updating) {
-			this.pendingSegments.push(segmentBuffer);
-			return;
-		}
-		if (this.audioElement?.error) {
-			const error = this.audioElement.error;
-			console.error("🎵 [MEDIA_ELEMENT_ERROR] HTMLMediaElement error detected:", {
-				code: error.code,
-				message: error.message,
-				MEDIA_ERR_ABORTED: error.code === MediaError.MEDIA_ERR_ABORTED,
-				MEDIA_ERR_NETWORK: error.code === MediaError.MEDIA_ERR_NETWORK,
-				MEDIA_ERR_DECODE: error.code === MediaError.MEDIA_ERR_DECODE,
-				MEDIA_ERR_SRC_NOT_SUPPORTED: error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
-			});
-			this.audioElement.load();
-			return;
-		}
-		try {
-			this.sourceBuffer.appendBuffer(segmentBuffer);
-		} catch (error) {
-			console.error("🎵 [SOURCE_BUFFER_ERROR] Failed to append segment:", error);
-			this.logDebugInfo();
-			this.pendingSegments.push(segmentBuffer);
-		}
-	}
-	/**
-	* Process any queued segments when SourceBuffer becomes available
-	*/
-	processPendingSegments() {
-		if (!this.sourceBuffer || this.sourceBuffer.updating || this.pendingSegments.length === 0) return;
-		const nextSegment = this.pendingSegments.shift();
-		if (nextSegment) this.feedSegment(nextSegment);
-	}
-	/**
-	* Log debug information for troubleshooting
-	*/
-	logDebugInfo() {
-		console.error("🎵 [SOURCE_BUFFER_DEBUG] SourceBuffer state:", {
-			updating: this.sourceBuffer?.updating,
-			buffered: this.sourceBuffer?.buffered ? Array.from({ length: this.sourceBuffer.buffered.length }, (_, i) => `${this.sourceBuffer?.buffered.start(i)}-${this.sourceBuffer?.buffered.end(i)}`) : [],
-			mode: this.sourceBuffer?.mode,
-			timestampOffset: this.sourceBuffer?.timestampOffset
-		});
-		console.error("🎵 [MEDIA_SOURCE_DEBUG] MediaSource state:", {
-			readyState: this.mediaSource?.readyState,
-			sourceBuffers: this.mediaSource?.sourceBuffers.length,
-			duration: this.mediaSource?.duration
-		});
-		console.error("🎵 [AUDIO_ELEMENT_DEBUG] Audio element state:", {
-			readyState: this.audioElement?.readyState,
-			networkState: this.audioElement?.networkState,
-			error: this.audioElement?.error?.code,
-			src: `${this.audioElement?.src.substring(0, 50)}...`
-		});
-	}
-	/**
-	* Set audio element current time
-	*/
-	setCurrentTime(timeMs) {
-		if (this.audioElement) this.audioElement.currentTime = timeMs / 1e3;
-	}
-	/**
-	* Get the audio element for MediaElementSource
-	*/
-	getAudioElement() {
-		return this.audioElement;
-	}
-	/**
-	* Check if MediaSource is ready
-	*/
-	isReady() {
-		return this.mediaSourceReady;
-	}
-	/**
-	* Get buffered time ranges
-	*/
-	getBuffered() {
-		return this.sourceBuffer?.buffered || null;
-	}
-	/**
-	* Clean up MediaSource resources
-	*/
-	cleanup(_preserveCache = false) {
-		if (this.sourceBuffer && this.mediaSource && this.mediaSource.readyState === "open") try {
-			this.mediaSource.removeSourceBuffer(this.sourceBuffer);
-		} catch (error) {
-			console.warn("🎵 [CLEANUP_ERROR] Error removing SourceBuffer:", error);
-		}
-		if (this.mediaSource) try {
-			if (this.mediaSource.readyState === "open") this.mediaSource.endOfStream();
-		} catch (error) {
-			console.warn("🎵 [CLEANUP_ERROR] Error ending MediaSource:", error);
-		}
-		if (this.audioElement) try {
-			URL.revokeObjectURL(this.audioElement.src);
-		} catch (error) {
-			console.warn("🎵 [CLEANUP_ERROR] Error revoking URL:", error);
-		}
-		this.mediaSource = null;
-		this.audioElement = null;
-		this.sourceBuffer = null;
-		this.mediaSourceReady = false;
-		this.pendingSegments = [];
-	}
-};
-export { MediaSourceManager };