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

package/dist/elements/EFTemporal.d.ts

@@ -1,6 +1,6 @@
+import { Task } from '@lit/task';
 import { LitElement, ReactiveController } from 'lit';
 import { EFTimegroup } from './EFTimegroup.js';
-import { Task } from '@lit/task';
 export declare const timegroupContext: {
     __context__: EFTimegroup;
 };

package/dist/elements/EFTemporal.js

@@ -190,7 +190,7 @@ const EFTemporal = (superClass) => {
 					}
 					const previous = siblingTemorals?.[(ownIndex ?? 0) - 1];
 					if (!previous) {
-						console.log("Previous temporal element not found", {
+						console.error("Previous temporal element not found", {
 							ownIndex,
 							siblingTemorals
 						});

package/dist/elements/EFTimegroup.d.ts

@@ -6,6 +6,8 @@ export declare class EFTimegroup extends EFTimegroup_base {
     #private;
     static styles: import('lit').CSSResult;
     _timeGroupContext: this;
+    private isFrameUpdateInProgress;
+    private queuedTimeUpdate;
     mode: "fit" | "fixed" | "sequence" | "contain";
     overlapMs: number;
     fit: "none" | "contain" | "cover";
@@ -13,6 +15,10 @@ export declare class EFTimegroup extends EFTimegroup_base {
     get currentTime(): number;
     get currentTimeMs(): number;
     set currentTimeMs(ms: number);
+    /**
+     * Determines if this is a root timegroup (no parent timegroups)
+     */
+    get isRootTimegroup(): boolean;
     render(): import('lit-html').TemplateResult<1>;
     maybeLoadTimeFromLocalStorage(): number;
     connectedCallback(): void;
@@ -47,6 +53,11 @@ export declare class EFTimegroup extends EFTimegroup_base {
     wrapWithWorkbench(): void;
     get efElements(): Element[];
     renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
+    /**
+     * TEMPORARY TEST METHOD: Renders audio and immediately plays it back
+     * Usage: timegroup.testPlayAudio(0, 5000) // Play first 5 seconds
+     */
+    testPlayAudio(fromMs: number, toMs: number): Promise<void>;
     loadMd5Sums(): Promise<void>;
     frameTask: Task<readonly [number, number], void>;
 }

package/dist/elements/EFTimegroup.js

@@ -25,6 +25,8 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._timeGroupContext = this;
+		this.isFrameUpdateInProgress = false;
+		this.queuedTimeUpdate = null;
 		this.mode = "contain";
 		this.overlapMs = 0;
 		this.fit = "none";
@@ -52,13 +54,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	#currentTime = 0;
 	#resizeObserver;
 	set currentTime(time) {
-		this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
-		try {
-			if (this.id) {
-				if (this.isConnected) localStorage.setItem(this.storageKey, time.toString());
-			}
-		} catch (error) {
-			log("Failed to save time to localStorage", error);
+		const newTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
+		if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
+			this.queuedTimeUpdate = newTime;
+			return;
+		}
+		if (this.isRootTimegroup) this.#executeTimeUpdate(newTime);
+		else {
+			this.#currentTime = newTime;
+			this.#saveTimeToLocalStorage(newTime);
 		}
 	}
 	get currentTime() {
@@ -70,6 +74,42 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	set currentTimeMs(ms) {
 		this.currentTime = ms / 1e3;
 	}
+	/**
+	* Determines if this is a root timegroup (no parent timegroups)
+	*/
+	get isRootTimegroup() {
+		return this.closest("ef-timegroup") === this;
+	}
+	/**
+	* Executes time update with frame locking for root timegroups
+	*/
+	async #executeTimeUpdate(time) {
+		this.isFrameUpdateInProgress = true;
+		this.#currentTime = time;
+		try {
+			this.#saveTimeToLocalStorage(time);
+			await this.waitForFrameTasks();
+		} catch (error) {
+			console.error("⚠️ [TIME_UPDATE_ERROR] Error during frame update:", error);
+		} finally {
+			this.isFrameUpdateInProgress = false;
+			if (this.queuedTimeUpdate !== null && this.queuedTimeUpdate !== time) {
+				const nextTime = this.queuedTimeUpdate;
+				this.queuedTimeUpdate = null;
+				setTimeout(() => this.#executeTimeUpdate(nextTime), 0);
+			}
+		}
+	}
+	/**
+	* Saves time to localStorage (extracted for reuse)
+	*/
+	#saveTimeToLocalStorage(time) {
+		try {
+			if (this.id && this.isConnected) localStorage.setItem(this.storageKey, time.toString());
+		} catch (error) {
+			log("Failed to save time to localStorage", error);
+		}
+	}
 	render() {
 		return html`<slot></slot> `;
 	}
@@ -162,7 +202,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	async waitForMediaDurations() {
 		await this.updateComplete;
 		const mediaElements = deepGetMediaElements(this);
-		await Promise.all(mediaElements.map((m) => m.fragmentIndexTask.taskComplete));
+		await Promise.all(mediaElements.map((m) => m.mediaEngineTask.taskComplete));
 		flushStartTimeMsCache();
 		this.requestUpdate("currentTime");
 		await this.updateComplete;
@@ -213,12 +253,17 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	async #addAudioToContext(audioContext, fromMs, toMs) {
 		await this.waitForMediaDurations();
+		const abortController = new AbortController();
 		await Promise.all(deepGetMediaElements(this).map(async (mediaElement) => {
+			if (mediaElement.mute) return;
 			const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
 			const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
 			const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-			if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) return;
-			const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
+			if (!mediaOverlaps) return;
+			const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
+			const mediaLocalToMs = Math.min(mediaElement.endTimeMs - mediaElement.startTimeMs, toMs - mediaElement.startTimeMs);
+			if (mediaLocalFromMs >= mediaLocalToMs) return;
+			const audio = await mediaElement.fetchAudioSpanningTime(mediaLocalFromMs, mediaLocalToMs, abortController.signal);
 			if (!audio) throw new Error("Failed to fetch audio");
 			const bufferSource = audioContext.createBufferSource();
 			bufferSource.buffer = await audioContext.decodeAudioData(await audio.blob.arrayBuffer());
@@ -226,13 +271,20 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
 			const ctxEndMs = mediaElement.endTimeMs - fromMs;
 			const ctxDurationMs = ctxEndMs - ctxStartMs;
-			const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-			bufferSource.start(ctxStartMs / 1e3, offset / 1e3, ctxDurationMs / 1e3);
+			const requestedOffsetInMedia = mediaLocalFromMs;
+			const actualOffsetInBuffer = requestedOffsetInMedia - audio.startMs;
+			const safeOffset = Math.max(0, actualOffsetInBuffer);
+			if (safeOffset !== actualOffsetInBuffer) {}
+			bufferSource.start(ctxStartMs / 1e3, safeOffset / 1e3, ctxDurationMs / 1e3);
 		}));
 	}
 	async renderAudio(fromMs, toMs) {
 		const durationMs = toMs - fromMs;
-		const contextSize = Math.round(48e3 * durationMs / 1e3);
+		const duration = durationMs / 1e3;
+		const exactSamples = 48e3 * duration;
+		const aacFrames = exactSamples / 1024;
+		const alignedFrames = Math.round(aacFrames);
+		const contextSize = alignedFrames * 1024;
 		if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
 		let audioContext;
 		try {
@@ -244,6 +296,29 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		const renderedBuffer = await audioContext.startRendering();
 		return renderedBuffer;
 	}
+	/**
+	* TEMPORARY TEST METHOD: Renders audio and immediately plays it back
+	* Usage: timegroup.testPlayAudio(0, 5000) // Play first 5 seconds
+	*/
+	async testPlayAudio(fromMs, toMs) {
+		try {
+			const renderedBuffer = await this.renderAudio(fromMs, toMs);
+			const playbackContext = new AudioContext();
+			const bufferSource = playbackContext.createBufferSource();
+			bufferSource.buffer = renderedBuffer;
+			bufferSource.connect(playbackContext.destination);
+			bufferSource.start(0);
+			return new Promise((resolve) => {
+				bufferSource.onended = () => {
+					playbackContext.close();
+					resolve();
+				};
+			});
+		} catch (error) {
+			console.error("🎵 [TEST_PLAY_AUDIO] Error:", error);
+			throw error;
+		}
+	}
 	async loadMd5Sums() {
 		const efElements = this.efElements;
 		const loaderTasks = [];

package/dist/elements/EFVideo.d.ts

@@ -1,4 +1,3 @@
-import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
 import { Task } from '@lit/task';
 import { PropertyValueMap } from 'lit';
 import { CacheStats, ScrubTrackManager } from '../ScrubTrackManager.js';
@@ -13,17 +12,34 @@ interface LoadingState {
 }
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
-    #private;
+    static get observedAttributes(): string[];
     static styles: import('lit').CSSResult[];
-    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
+    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
     /**
-     * Scrub track manager for fast timeline navigation
+     * Duration in milliseconds for video buffering ahead of current time
+     * @domAttribute "video-buffer-duration"
      */
-    scrubTrackManager?: ScrubTrackManager;
+    videoBufferDurationMs: number;
+    /**
+     * Maximum number of concurrent video segment fetches for buffering
+     * @domAttribute "max-video-buffer-fetches"
+     */
+    maxVideoBufferFetches: number;
     /**
-     * Track last seek time for fast seeking detection
+     * Enable/disable video buffering system
+     * @domAttribute "enable-video-buffering"
      */
-    private lastSeekTimeMs;
+    enableVideoBuffering: boolean;
+    videoSegmentIdTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    videoInitSegmentFetchTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
+    videoSegmentFetchTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    videoInputTask: import('./EFMedia/shared/MediaTaskUtils.ts').InputTask;
+    videoSeekTask: Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
+    videoBufferTask: Task<readonly [number], import('./EFMedia/videoTasks/makeVideoBufferTask.ts').VideoBufferState>;
+    /**
+     * Scrub track manager for fast timeline navigation
+     */
+    scrubTrackManager?: ScrubTrackManager;
     /**
      * Delayed loading state manager for user feedback
      */
@@ -40,23 +56,7 @@ export declare class EFVideo extends EFVideo_base {
     render(): import('lit-html').TemplateResult<1>;
     get canvasElement(): HTMLCanvasElement | undefined;
     frameTask: Task<readonly [number], void>;
-    get frameTaskStatus(): {
-        desiredSeekTimeMs: number;
-        fragmentIndexTask: string;
-        seekTask: string;
-        mediaSegmentsTask: string;
-        assetSegmentLoader: string;
-        assetSegmentKeysTask: string;
-        assetInitSegmentsTask: string;
-        videoAssetTask: string;
-        paintTask: string;
-        frameTask: string;
-    };
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    /**
-     * Initialize scrub track manager if needed
-     */
-    private initializeScrubTrackManager;
     /**
      * Start a delayed loading operation for testing
      */
@@ -71,12 +71,7 @@ export declare class EFVideo extends EFVideo_base {
      * Set loading state for user feedback
      */
     private setLoadingState;
-    videoAssetTask: Task<readonly ["asset" | "jit-transcode", Record<string, File> | null | undefined], VideoAsset | undefined>;
-    paintTask: Task<readonly [number], number | undefined>;
-    /**
-     * Render normal video using existing logic
-     */
-    private renderNormalVideo;
+    paintTask: Task<readonly [number], void>;
     /**
      * Display a video frame on the canvas
      */
@@ -93,6 +88,42 @@ export declare class EFVideo extends EFVideo_base {
      * Get scrub track performance statistics
      */
     getScrubTrackStats(): CacheStats | null;
+    /**
+     * Effective mode - always returns "asset" for EFVideo
+     */
+    get effectiveMode(): string;
+    /**
+     * Legacy getter for asset index loader (maps to mediaEngine task)
+     */
+    get assetIndexLoader(): Task<readonly [string, string | null], import('../transcoding/types/index.ts').MediaEngine>;
+    /**
+     * Legacy getter for fragment index task (maps to videoSegmentIdTask)
+     */
+    get fragmentIndexTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    /**
+     * Legacy getter for seek task (maps to videoSeekTask)
+     */
+    get seekTask(): Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
+    /**
+     * Legacy getter for media segments task (maps to videoSegmentFetchTask)
+     */
+    get mediaSegmentsTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    /**
+     * Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
+     */
+    get assetSegmentKeysTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    /**
+     * Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
+     */
+    get assetInitSegmentsTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
+    /**
+     * Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
+     */
+    get assetSegmentLoader(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    /**
+     * Legacy getter for video asset task (maps to videoBufferTask)
+     */
+    get videoAssetTask(): Task<readonly [number], import('./EFMedia/videoTasks/makeVideoBufferTask.ts').VideoBufferState>;
     /**
      * Clean up resources when component is disconnected
      */