@editframe/elements 0.33.0-beta → 0.34.6-beta

package/dist/elements/EFVideo.d.ts

@@ -1,13 +1,8 @@
+import { FrameRenderable, FrameState, FrameTask } from "../preview/FrameController.js";
 import { EFFramegen } from "../EF_FRAMEGEN.js";
-import { InputTask } from "./EFMedia/shared/MediaTaskUtils.js";
-import { MediaEngine } from "../transcoding/types/index.js";
-import { MediaBufferState } from "./EFMedia/shared/BufferUtils.js";
 import { EFMedia } from "./EFMedia.js";
-import { VideoBufferState } from "./EFMedia/videoTasks/makeVideoBufferTask.js";
-import { Task } from "@lit/task";
 import * as lit2 from "lit";
 import { PropertyValueMap } from "lit";
-import * as mediabunny0 from "mediabunny";
 import * as lit_html2 from "lit-html";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
@@ -26,7 +21,8 @@ interface LoadingState {
  */
 
 declare const EFVideo_base: typeof EFMedia;
-declare class EFVideo extends EFVideo_base {
+declare class EFVideo extends EFVideo_base implements FrameRenderable {
+  #private;
   static styles: lit2.CSSResult[];
   canvasRef: lit_html_directives_ref0.Ref<HTMLCanvasElement>;
   /**
@@ -44,18 +40,32 @@ declare class EFVideo extends EFVideo_base {
    * @domAttribute "enable-video-buffering"
    */
   enableVideoBuffering: boolean;
-  unifiedVideoSeekTask: Task<readonly [number], mediabunny0.VideoSample | undefined>;
-  videoBufferTask: Task<readonly [number], VideoBufferState>;
-  scrubVideoBufferTask: Task<readonly [any], MediaBufferState>;
-  scrubVideoInputTask: InputTask;
-  scrubVideoSeekTask: Task<readonly [number], mediabunny0.VideoSample | undefined>;
-  scrubVideoSegmentIdTask: Task<readonly [MediaEngine | undefined, number], number | undefined>;
-  scrubVideoSegmentFetchTask: Task<readonly [MediaEngine | undefined, number | undefined], ArrayBuffer>;
-  scrubVideoInitSegmentFetchTask: Task<readonly [MediaEngine | undefined], ArrayBuffer>;
   /**
-   * Delayed loading state manager for user feedback
+   * Query readiness state for a given time.
+   * @implements FrameRenderable
+   *
+   * Note: The timeMs parameter is the root timegroup's time. We check against
+   * this.currentSourceTimeMs since that's what we cache in prepareFrame.
+   */
+  getFrameState(_timeMs: number): FrameState;
+  /**
+   * Async preparation - seeks video and caches the sample.
+   * @implements FrameRenderable
+   *
+   * Note: The timeMs parameter is the root timegroup's time. We ignore it and
+   * use this.currentSourceTimeMs instead, which accounts for:
+   * - Our position within the parent timegroup (ownCurrentTimeMs)
+   * - Source trimming (sourceIn/sourceOut or trimStart/trimEnd)
    */
-  private delayedLoadingState;
+  prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void>;
+  /**
+   * Synchronous render - paints cached video sample to canvas.
+   * @implements FrameRenderable
+   *
+   * Note: The timeMs parameter is the root timegroup's time. We use
+   * this.currentSourceTimeMs to match what prepareFrame cached.
+   */
+  renderFrame(_timeMs: number): void;
   /**
    * Loading state for user feedback
    */
@@ -68,7 +78,11 @@ declare class EFVideo extends EFVideo_base {
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   render(): lit_html2.TemplateResult<1>;
   get canvasElement(): HTMLCanvasElement | undefined;
-  frameTask: Task<readonly [number], void>;
+  /**
+   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.
+   * This is a compatibility wrapper that delegates to the new system.
+   */
+  frameTask: FrameTask;
   /**
    * Start a delayed loading operation for testing
    */
@@ -106,9 +120,9 @@ declare class EFVideo extends EFVideo_base {
   private isFrameRenderingActive;
   /**
    * Legacy getter for fragment index task
-   * Still used by EFCaptions - maps to unified video seek task
+   * Still used by EFCaptions - maps to frameTask
    */
-  get fragmentIndexTask(): Task<readonly [number], mediabunny0.VideoSample | undefined>;
+  get fragmentIndexTask(): FrameTask;
   /**
    * Helper method for tests: wait for the current frame to be ready
    * This encapsulates the complexity of ensuring the video has updated
@@ -117,6 +131,29 @@ declare class EFVideo extends EFVideo_base {
    * @returns Promise that resolves when the frame is ready
    */
   waitForFrameReady(): Promise<void>;
+  /**
+   * Capture a video frame directly at a source media timestamp.
+   * Bypasses the frameTask system - designed for export/rendering.
+   * Does NOT paint to the element's internal canvas.
+   *
+   * Uses the same routing logic as unified video system:
+   * - "auto": main track for production rendering, follows normal routing otherwise
+   * - "scrub": force low-res scrub track (for thumbnails)
+   * - "main": force full-quality main track
+   *
+   * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)
+   * @param options - Capture options including quality and abort signal
+   * @returns Frame data for serialization
+   * @public
+   */
+  captureFrameAtSourceTime(sourceTimeMs: number, options?: {
+    quality?: "auto" | "scrub" | "main";
+    signal?: AbortSignal;
+  }): Promise<{
+    dataUrl: string;
+    width: number;
+    height: number;
+  }>;
   /**
    * Pre-fetch scrub segments for given timestamps.
    * Loads 30-second segments sequentially, emitting progress events.

package/dist/elements/EFVideo.js

@@ -1,18 +1,12 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { updateAnimations } from "./updateAnimations.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { TWMixin } from "../gui/TWMixin2.js";
-import { withSpan, withSpanSync } from "../otel/tracingHelpers.js";
+import { withSpanSync } from "../otel/tracingHelpers.js";
+import { PRIORITY_VIDEO, createFrameTaskWrapper } from "../preview/FrameController.js";
 import { EFMedia } from "./EFMedia.js";
-import { updateAnimations } from "./updateAnimations.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
-import { makeScrubVideoBufferTask } from "./EFMedia/videoTasks/makeScrubVideoBufferTask.js";
-import { makeScrubVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.js";
-import { makeScrubVideoInputTask } from "./EFMedia/videoTasks/makeScrubVideoInputTask.js";
-import { makeScrubVideoSeekTask } from "./EFMedia/videoTasks/makeScrubVideoSeekTask.js";
-import { makeScrubVideoSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoSegmentFetchTask.js";
-import { makeScrubVideoSegmentIdTask } from "./EFMedia/videoTasks/makeScrubVideoSegmentIdTask.js";
-import { makeUnifiedVideoSeekTask } from "./EFMedia/videoTasks/makeUnifiedVideoSeekTask.js";
-import { makeVideoBufferTask } from "./EFMedia/videoTasks/makeVideoBufferTask.js";
-import { Task } from "@lit/task";
+import { MainVideoInputCache } from "./EFMedia/videoTasks/MainVideoInputCache.js";
+import { ScrubInputCache } from "./EFMedia/videoTasks/ScrubInputCache.js";
 import debug from "debug";
 import { css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -20,6 +14,8 @@ import { context, trace } from "@opentelemetry/api";
 import { createRef, ref } from "lit/directives/ref.js";
 
 //#region src/elements/EFVideo.ts
+const mainVideoInputCache = new MainVideoInputCache();
+const scrubInputCache = new ScrubInputCache();
 const log = debug("ef:elements:EFVideo");
 let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	static {
@@ -82,68 +78,196 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
       }
     `];
 	}
+	/**
+	* Cached video sample for the current frame.
+	* Set by prepareFrame(), consumed by renderFrame().
+	*/
+	#cachedVideoSample = void 0;
+	#cachedVideoSampleTimeMs = void 0;
+	/**
+	* Query readiness state for a given time.
+	* @implements FrameRenderable
+	* 
+	* Note: The timeMs parameter is the root timegroup's time. We check against
+	* this.currentSourceTimeMs since that's what we cache in prepareFrame.
+	*/
+	getFrameState(_timeMs) {
+		const sourceTimeMs = this.currentSourceTimeMs;
+		const hasCache = this.#cachedVideoSample !== void 0 && this.#cachedVideoSampleTimeMs === sourceTimeMs;
+		return {
+			needsPreparation: !hasCache,
+			isReady: hasCache,
+			priority: PRIORITY_VIDEO
+		};
+	}
+	/**
+	* Async preparation - seeks video and caches the sample.
+	* @implements FrameRenderable
+	* 
+	* Note: The timeMs parameter is the root timegroup's time. We ignore it and
+	* use this.currentSourceTimeMs instead, which accounts for:
+	* - Our position within the parent timegroup (ownCurrentTimeMs)
+	* - Source trimming (sourceIn/sourceOut or trimStart/trimEnd)
+	*/
+	async prepareFrame(_timeMs, signal) {
+		signal.throwIfAborted();
+		const sourceTimeMs = this.currentSourceTimeMs;
+		const mediaEngine = await this.getMediaEngine(signal);
+		if (!mediaEngine) {
+			this.#cachedVideoSample = void 0;
+			this.#cachedVideoSampleTimeMs = sourceTimeMs;
+			return;
+		}
+		signal.throwIfAborted();
+		try {
+			const videoSample = await this.#fetchVideoSampleForFrame(mediaEngine, sourceTimeMs, signal);
+			signal.throwIfAborted();
+			this.#cachedVideoSample = videoSample;
+			this.#cachedVideoSampleTimeMs = sourceTimeMs;
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") throw error;
+			console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);
+			this.#cachedVideoSample = void 0;
+			this.#cachedVideoSampleTimeMs = sourceTimeMs;
+		}
+	}
+	/**
+	* Synchronous render - paints cached video sample to canvas.
+	* @implements FrameRenderable
+	* 
+	* Note: The timeMs parameter is the root timegroup's time. We use 
+	* this.currentSourceTimeMs to match what prepareFrame cached.
+	*/
+	renderFrame(_timeMs) {
+		const sourceTimeMs = this.currentSourceTimeMs;
+		if (this.#cachedVideoSampleTimeMs === sourceTimeMs && this.#cachedVideoSample) {
+			const videoFrame = this.#cachedVideoSample.toVideoFrame();
+			try {
+				this.displayFrame(videoFrame, sourceTimeMs);
+			} finally {
+				videoFrame.close();
+			}
+		}
+		if (!this.parentTimegroup) updateAnimations(this);
+	}
+	/**
+	* Fetch video sample for a given time.
+	* 
+	* Uses a quality routing strategy:
+	* - In production rendering: always use main (full quality) track
+	* - In preview mode: try scrub track first for faster scrubbing, fall back to main
+	* - If main track segment is already cached: use it (avoid redundant lower-quality fetch)
+	*/
+	async #fetchVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal) {
+		const mainRendition = mediaEngine.videoRendition;
+		if (mainRendition) {
+			const mainSegmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, mainRendition);
+			if (mainSegmentId !== void 0 && mediaEngine.isSegmentCached(mainSegmentId, mainRendition)) return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
+		}
+		if (this.isInProductionRenderingMode()) return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
+		if (mediaEngine.getScrubVideoRendition?.()) {
+			const scrubSample = await this.#getScrubVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
+			if (scrubSample) return scrubSample;
+		}
+		return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
+	}
+	/**
+	* Get scrub (low-resolution) video sample for fast preview scrubbing.
+	* Used in preview mode for faster response during timeline scrubbing.
+	*/
+	async #getScrubVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal) {
+		const scrubRendition = mediaEngine.getScrubVideoRendition?.();
+		if (!scrubRendition) return;
+		const scrubRenditionWithSrc = {
+			...scrubRendition,
+			src: mediaEngine.src
+		};
+		const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, scrubRenditionWithSrc);
+		if (segmentId === void 0) return;
+		const scrubInput = await scrubInputCache.getOrCreateInput(mediaEngine.src, segmentId, async () => {
+			let initSegment;
+			let mediaSegment;
+			try {
+				[initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal), mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc, signal)]);
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") throw error;
+				return;
+			}
+			if (!initSegment || !mediaSegment) return;
+			signal.throwIfAborted();
+			const combinedBlob = new Blob([initSegment, mediaSegment]);
+			signal.throwIfAborted();
+			const arrayBuffer = await combinedBlob.arrayBuffer();
+			signal.throwIfAborted();
+			const { BufferedSeekingInput } = await import("./EFMedia/BufferedSeekingInput.js");
+			return new BufferedSeekingInput(arrayBuffer, {
+				videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+				audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+				startTimeOffsetMs: scrubRendition.startTimeOffsetMs
+			});
+		});
+		if (!scrubInput) return;
+		signal.throwIfAborted();
+		const videoTrack = await scrubInput.getFirstVideoTrack();
+		if (!videoTrack) return;
+		signal.throwIfAborted();
+		return scrubInput.seek(videoTrack.id, desiredSeekTimeMs);
+	}
+	/**
+	* Get main video sample for a given time.
+	*/
+	async #getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal) {
+		const videoRendition = mediaEngine.getVideoRendition?.() ?? mediaEngine.videoRendition;
+		if (!videoRendition) return;
+		const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, videoRendition);
+		if (segmentId === void 0) return;
+		const mainInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, videoRendition.id, async () => {
+			let initSegment;
+			let mediaSegment;
+			try {
+				[initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(videoRendition, signal), mediaEngine.fetchMediaSegment(segmentId, videoRendition, signal)]);
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") throw error;
+				if (error instanceof Error && (error.message.includes("401") || error.message.includes("UNAUTHORIZED") || error.message.includes("Failed to fetch") || error.message.includes("File not found") || error.message.includes("Media segment not found") || error.message.includes("Init segment not found") || error.message.includes("Track not found"))) return;
+				throw error;
+			}
+			if (!initSegment || !mediaSegment) return;
+			signal.throwIfAborted();
+			const combinedBlob = new Blob([initSegment, mediaSegment]);
+			signal.throwIfAborted();
+			const arrayBuffer = await combinedBlob.arrayBuffer();
+			signal.throwIfAborted();
+			const { BufferedSeekingInput } = await import("./EFMedia/BufferedSeekingInput.js");
+			return new BufferedSeekingInput(arrayBuffer, {
+				videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+				audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+				startTimeOffsetMs: videoRendition.startTimeOffsetMs
+			});
+		});
+		if (!mainInput) return;
+		signal.throwIfAborted();
+		const videoTrack = await mainInput.getFirstVideoTrack();
+		if (!videoTrack) return;
+		signal.throwIfAborted();
+		return mainInput.seek(videoTrack.id, desiredSeekTimeMs);
+	}
+	/**
+	* Delayed loading state manager for user feedback
+	*/
+	#delayedLoadingState;
 	constructor() {
 		super();
 		this.canvasRef = createRef();
 		this.videoBufferDurationMs = 1e4;
 		this.maxVideoBufferFetches = 2;
 		this.enableVideoBuffering = true;
-		this.unifiedVideoSeekTask = makeUnifiedVideoSeekTask(this);
-		this.videoBufferTask = makeVideoBufferTask(this);
-		this.scrubVideoBufferTask = makeScrubVideoBufferTask(this);
-		this.scrubVideoInputTask = makeScrubVideoInputTask(this);
-		this.scrubVideoSeekTask = makeScrubVideoSeekTask(this);
-		this.scrubVideoSegmentIdTask = makeScrubVideoSegmentIdTask(this);
-		this.scrubVideoSegmentFetchTask = makeScrubVideoSegmentFetchTask(this);
-		this.scrubVideoInitSegmentFetchTask = makeScrubVideoInitSegmentFetchTask(this);
 		this.loadingState = {
 			isLoading: false,
 			operation: null,
 			message: ""
 		};
-		this.frameTask = new Task(this, {
-			autoRun: false,
-			args: () => [this.desiredSeekTimeMs],
-			onError: (error) => {
-				this.frameTask.taskComplete.catch(() => {});
-				if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
-				if (error instanceof Error && !error.message.includes("Video rendition unavailable") && !error.message.includes("No valid media source") && !error.message.includes("Sample not found for time")) console.error("frameTask error", error);
-			},
-			onComplete: () => {},
-			task: async ([_desiredSeekTimeMs], { signal }) => {
-				const t0 = performance.now();
-				await withSpan("video.frameTask", {
-					elementId: this.id || "unknown",
-					desiredSeekTimeMs: _desiredSeekTimeMs,
-					src: this.src || "none"
-				}, void 0, async (span) => {
-					const t1 = performance.now();
-					span.setAttribute("preworkMs", t1 - t0);
-					this.unifiedVideoSeekTask.run().catch(() => {});
-					const t2 = performance.now();
-					span.setAttribute("seekRunMs", t2 - t1);
-					try {
-						await this.unifiedVideoSeekTask.taskComplete;
-					} catch (error) {
-						if (error instanceof DOMException && error.name === "AbortError") {
-							signal?.throwIfAborted();
-							return;
-						}
-						throw error;
-					}
-					const t3 = performance.now();
-					span.setAttribute("seekAwaitMs", t3 - t2);
-					signal?.throwIfAborted();
-					const t4 = performance.now();
-					this.paint(_desiredSeekTimeMs, span);
-					const t5 = performance.now();
-					span.setAttribute("paintMs", t5 - t4);
-					if (!this.parentTimegroup) updateAnimations(this);
-					span.setAttribute("totalFrameMs", t5 - t0);
-				});
-			}
-		});
-		this.delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
+		this.frameTask = createFrameTaskWrapper(this, { getTimeMs: () => this.desiredSeekTimeMs });
+		this.#delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
 			this.setLoadingState(isLoading, null, message);
 		});
 	}
@@ -176,13 +300,13 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* Start a delayed loading operation for testing
 	*/
 	startDelayedLoading(operationId, message, options = {}) {
-		this.delayedLoadingState.startLoading(operationId, message, options);
+		this.#delayedLoadingState.startLoading(operationId, message, options);
 	}
 	/**
 	* Clear a delayed loading operation for testing
 	*/
 	clearDelayedLoading(operationId) {
-		this.delayedLoadingState.clearLoading(operationId);
+		this.#delayedLoadingState.clearLoading(operationId);
 	}
 	/**
 	* Set loading state for user feedback
@@ -212,7 +336,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			span.setAttribute("modeCheckMs", t1 - t0);
 			try {
 				const t2 = performance.now();
-				const videoSample = this.unifiedVideoSeekTask.value;
+				const videoSample = this.#cachedVideoSample;
 				span.setAttribute("hasVideoSample", !!videoSample);
 				span.setAttribute("valueAccessMs", t2 - t1);
 				if (videoSample) {
@@ -230,7 +354,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 					}
 				}
 			} catch (error) {
-				console.warn("Unified video pipeline error:", error);
+				console.warn("Video pipeline error:", error);
 			}
 			if (!isProductionRendering) {
 				const isInRenderClone = !!this.closest(".ef-render-clone-container");
@@ -339,11 +463,13 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	}
 	/**
 	* Legacy getter for fragment index task
-	* Still used by EFCaptions - maps to unified video seek task
+	* Still used by EFCaptions - maps to frameTask
 	*/
 	get fragmentIndexTask() {
-		return this.unifiedVideoSeekTask;
+		return this.frameTask;
 	}
+	#pendingFrameReadyTime = null;
+	#pendingFrameReadyPromise = null;
 	/**
 	* Helper method for tests: wait for the current frame to be ready
 	* This encapsulates the complexity of ensuring the video has updated
@@ -354,6 +480,19 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	async waitForFrameReady() {
 		const currentTime = this.currentSourceTimeMs;
 		if (this.desiredSeekTimeMs !== currentTime) this.desiredSeekTimeMs = currentTime;
+		if (this.#pendingFrameReadyTime === currentTime && this.#pendingFrameReadyPromise) return this.#pendingFrameReadyPromise;
+		this.#pendingFrameReadyTime = currentTime;
+		this.#pendingFrameReadyPromise = this.#doWaitForFrameReady(currentTime);
+		try {
+			await this.#pendingFrameReadyPromise;
+		} finally {
+			if (this.#pendingFrameReadyTime === currentTime) {
+				this.#pendingFrameReadyTime = null;
+				this.#pendingFrameReadyPromise = null;
+			}
+		}
+	}
+	async #doWaitForFrameReady(_targetTimeMs) {
 		await this.updateComplete;
 		try {
 			await this.frameTask.run();
@@ -363,6 +502,119 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		}
 	}
 	/**
+	* Capture a video frame directly at a source media timestamp.
+	* Bypasses the frameTask system - designed for export/rendering.
+	* Does NOT paint to the element's internal canvas.
+	* 
+	* Uses the same routing logic as unified video system:
+	* - "auto": main track for production rendering, follows normal routing otherwise
+	* - "scrub": force low-res scrub track (for thumbnails)
+	* - "main": force full-quality main track
+	* 
+	* @param sourceTimeMs - Timestamp in source media coordinates (not timeline)
+	* @param options - Capture options including quality and abort signal
+	* @returns Frame data for serialization
+	* @public
+	*/
+	async captureFrameAtSourceTime(sourceTimeMs, options = {}) {
+		const { quality = "auto", signal } = options;
+		signal?.throwIfAborted();
+		const mediaEngine = await this.getMediaEngine(signal);
+		signal?.throwIfAborted();
+		if (!mediaEngine) throw new Error("No media engine available for frame capture");
+		const useMainTrack = quality === "main" || quality === "auto" && this.isInProductionRenderingMode();
+		let videoSample;
+		const { BufferedSeekingInput } = await import("./EFMedia/BufferedSeekingInput.js");
+		signal?.throwIfAborted();
+		if (useMainTrack) {
+			const videoRendition = mediaEngine.getVideoRendition?.() || mediaEngine.videoRendition;
+			if (!videoRendition) throw new Error("No video rendition available");
+			const segmentId = mediaEngine.computeSegmentId(sourceTimeMs, videoRendition);
+			if (segmentId === void 0) throw new Error(`Cannot compute segment ID for time ${sourceTimeMs}ms`);
+			const seekingInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, videoRendition.id, async () => {
+				const fetchSignal = signal ?? new AbortController().signal;
+				const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(videoRendition, fetchSignal), mediaEngine.fetchMediaSegment(segmentId, videoRendition, fetchSignal)]);
+				if (!initSegment || !mediaSegment) return;
+				return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
+					videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+					audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+					startTimeOffsetMs: videoRendition.startTimeOffsetMs
+				});
+			});
+			signal?.throwIfAborted();
+			if (!seekingInput) throw new Error(`Failed to fetch video segments for time ${sourceTimeMs}ms`);
+			const videoTrack = await seekingInput.getFirstVideoTrack();
+			signal?.throwIfAborted();
+			if (!videoTrack) throw new Error("No video track found in segment");
+			videoSample = await seekingInput.seek(videoTrack.id, sourceTimeMs);
+			signal?.throwIfAborted();
+		} else {
+			const scrubRendition = mediaEngine.getScrubVideoRendition?.();
+			if (!scrubRendition) return this.captureFrameAtSourceTime(sourceTimeMs, {
+				quality: "main",
+				signal
+			});
+			const scrubRenditionWithSrc = {
+				...scrubRendition,
+				src: mediaEngine.src
+			};
+			const segmentId = mediaEngine.computeSegmentId(sourceTimeMs, scrubRenditionWithSrc);
+			if (segmentId === void 0) throw new Error(`Cannot compute scrub segment ID for time ${sourceTimeMs}ms`);
+			const seekingInput = await scrubInputCache.getOrCreateInput(mediaEngine.src, segmentId, async () => {
+				const scrubFetchSignal = signal ?? new AbortController().signal;
+				const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(scrubRenditionWithSrc, scrubFetchSignal), mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc, scrubFetchSignal)]);
+				if (!initSegment || !mediaSegment) return;
+				return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
+					videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+					audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+					startTimeOffsetMs: scrubRendition.startTimeOffsetMs
+				});
+			});
+			signal?.throwIfAborted();
+			if (!seekingInput) return this.captureFrameAtSourceTime(sourceTimeMs, {
+				quality: "main",
+				signal
+			});
+			const videoTrack = await seekingInput.getFirstVideoTrack();
+			signal?.throwIfAborted();
+			if (!videoTrack) return this.captureFrameAtSourceTime(sourceTimeMs, {
+				quality: "main",
+				signal
+			});
+			videoSample = await seekingInput.seek(videoTrack.id, sourceTimeMs);
+			signal?.throwIfAborted();
+		}
+		if (!videoSample) throw new Error(`No video sample found at ${sourceTimeMs}ms`);
+		const videoFrame = videoSample.toVideoFrame();
+		try {
+			signal?.throwIfAborted();
+			const canvas = new OffscreenCanvas(videoFrame.codedWidth, videoFrame.codedHeight);
+			const ctx = canvas.getContext("2d");
+			if (!ctx) throw new Error("Failed to get 2d context from OffscreenCanvas");
+			ctx.drawImage(videoFrame, 0, 0);
+			signal?.throwIfAborted();
+			const blob = await canvas.convertToBlob({
+				type: "image/jpeg",
+				quality: .92
+			});
+			signal?.throwIfAborted();
+			const dataUrl = await new Promise((resolve, reject) => {
+				const reader = new FileReader();
+				reader.onload = () => resolve(reader.result);
+				reader.onerror = reject;
+				reader.readAsDataURL(blob);
+			});
+			signal?.throwIfAborted();
+			return {
+				dataUrl,
+				width: videoFrame.codedWidth,
+				height: videoFrame.codedHeight
+			};
+		} finally {
+			videoFrame.close();
+		}
+	}
+	/**
 	* Pre-fetch scrub segments for given timestamps.
 	* Loads 30-second segments sequentially, emitting progress events.
 	* This ensures scrub track is cached for fast thumbnail generation.
@@ -373,7 +625,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* @public
 	*/
 	async prefetchScrubSegments(timestamps, onProgress) {
-		const mediaEngine = await this.mediaEngineTask.taskComplete;
+		const mediaEngine = await this.getMediaEngine();
 		if (!mediaEngine) {
 			log("prefetchScrubSegments: no media engine available");
 			return;
@@ -444,7 +696,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* @public
 	*/
 	async prefetchMainVideoSegments(timestamps, onProgress) {
-		const mediaEngine = await this.mediaEngineTask.taskComplete;
+		const mediaEngine = await this.getMediaEngine();
 		if (!mediaEngine) {
 			log("prefetchMainVideoSegments: no media engine available");
 			return;
@@ -492,7 +744,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	*/
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.delayedLoadingState.clearAllLoading();
+		this.#delayedLoadingState.clearAllLoading();
 	}
 	didBecomeRoot() {
 		super.didBecomeRoot();