@editframe/elements 0.19.4-beta.0 → 0.20.0-beta.0

package/dist/elements/EFMedia/AssetMediaEngine.js

@@ -157,5 +157,16 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 			maxAudioBufferFetches: 1
 		};
 	}
+	convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition) {
+		{
+			if (!rendition.trackId) throw new Error("Track ID is required for asset metadata");
+			const trackData = this.data[rendition.trackId];
+			if (!trackData) throw new Error("Track not found");
+			const segment = trackData.segments?.[segmentId];
+			if (!segment) throw new Error("Segment not found");
+			const segmentStartMs = segment.cts / trackData.timescale * 1e3;
+			return globalTimestamps.map((globalMs) => (globalMs - segmentStartMs) / 1e3);
+		}
+	}
 };
 export { AssetMediaEngine };

package/dist/elements/EFMedia/BaseMediaEngine.d.ts

@@ -1,7 +1,8 @@
 import { RequestDeduplicator } from '../../transcoding/cache/RequestDeduplicator.js';
-import { AudioRendition, SegmentTimeRange, VideoRendition } from '../../transcoding/types';
+import { AudioRendition, SegmentTimeRange, ThumbnailResult, VideoRendition } from '../../transcoding/types';
 import { SizeAwareLRUCache } from '../../utils/LRUCache.js';
 import { EFMedia } from '../EFMedia.js';
+import { MediaRendition } from './shared/MediaTaskUtils.js';
 export declare const mediaCache: SizeAwareLRUCache<string>;
 export declare const globalRequestDeduplicator: RequestDeduplicator;
 export declare abstract class BaseMediaEngine {
@@ -43,6 +44,11 @@ export declare abstract class BaseMediaEngine {
         trackId: number | undefined;
         src: string;
     }): Promise<ArrayBuffer>;
+    abstract fetchInitSegment(rendition: {
+        trackId: number | undefined;
+        src: string;
+    }, signal: AbortSignal): Promise<ArrayBuffer>;
+    abstract computeSegmentId(desiredSeekTimeMs: number, rendition: MediaRendition): number | undefined;
     /**
      * Fetch media segment with built-in deduplication
      * Now uses global deduplication for all requests
@@ -80,4 +86,10 @@ export declare abstract class BaseMediaEngine {
      * Get cached segment IDs from a list for a given rendition
      */
     getCachedSegments(segmentIds: number[], rendition: AudioRendition | VideoRendition): Set<number>;
+    /**
+     * Extract thumbnail canvases at multiple timestamps efficiently
+     * Default implementation provides helpful error information
+     */
+    extractThumbnails(timestamps: number[]): Promise<(ThumbnailResult | null)[]>;
+    abstract convertToSegmentRelativeTimestamps(globalTimestamps: number[], segmentId: number, rendition: VideoRendition): number[];
 }

package/dist/elements/EFMedia/BaseMediaEngine.js

@@ -190,5 +190,14 @@ var BaseMediaEngine = class {
 	getCachedSegments(segmentIds, rendition) {
 		return new Set(segmentIds.filter((id) => this.isSegmentCached(id, rendition)));
 	}
+	/**
+	* Extract thumbnail canvases at multiple timestamps efficiently
+	* Default implementation provides helpful error information
+	*/
+	async extractThumbnails(timestamps) {
+		const engineName = this.constructor.name;
+		console.warn(`${engineName}: extractThumbnails not properly implemented. This MediaEngine type does not support thumbnail generation. Supported engines: JitMediaEngine. Requested ${timestamps.length} thumbnail${timestamps.length === 1 ? "" : "s"}.`);
+		return timestamps.map(() => null);
+	}
 };
 export { BaseMediaEngine };

package/dist/elements/EFMedia/JitMediaEngine.d.ts

@@ -1,10 +1,11 @@
-import { AudioRendition, MediaEngine, RenditionId, VideoRendition } from '../../transcoding/types';
+import { AudioRendition, MediaEngine, RenditionId, ThumbnailResult, VideoRendition } from '../../transcoding/types';
 import { UrlGenerator } from '../../transcoding/utils/UrlGenerator';
 import { EFMedia } from '../EFMedia.js';
 import { BaseMediaEngine } from './BaseMediaEngine';
 export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
     private urlGenerator;
     private data;
+    private thumbnailExtractor;
     static fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string): Promise<JitMediaEngine>;
     constructor(host: EFMedia, urlGenerator: UrlGenerator);
     get durationMs(): number;
@@ -37,4 +38,9 @@ export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngi
         maxVideoBufferFetches: number;
         maxAudioBufferFetches: number;
     };
+    /**
+     * Extract thumbnail canvases using same rendition priority as video playback for frame alignment
+     */
+    extractThumbnails(timestamps: number[]): Promise<(ThumbnailResult | null)[]>;
+    convertToSegmentRelativeTimestamps(globalTimestamps: number[], _segmentId: number, _rendition: VideoRendition): number[];
 }

package/dist/elements/EFMedia/JitMediaEngine.js

@@ -1,4 +1,5 @@
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
+import { ThumbnailExtractor } from "./shared/ThumbnailExtractor.js";
 var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	static async fetch(host, urlGenerator, url) {
 		const engine = new JitMediaEngine(host, urlGenerator);
@@ -10,6 +11,7 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 		super(host);
 		this.data = {};
 		this.urlGenerator = urlGenerator;
+		this.thumbnailExtractor = new ThumbnailExtractor(this);
 	}
 	get durationMs() {
 		return this.data.durationMs;
@@ -101,5 +103,27 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 			maxAudioBufferFetches: 3
 		};
 	}
+	/**
+	* Extract thumbnail canvases using same rendition priority as video playback for frame alignment
+	*/
+	async extractThumbnails(timestamps) {
+		let rendition;
+		try {
+			const mainRendition = this.getVideoRendition();
+			if (mainRendition) rendition = mainRendition;
+			else {
+				const scrubRendition = this.getScrubVideoRendition();
+				if (scrubRendition) rendition = scrubRendition;
+				else throw new Error("No video rendition available");
+			}
+		} catch (error) {
+			console.warn("JitMediaEngine: No video rendition available for thumbnails", error);
+			return timestamps.map(() => null);
+		}
+		return this.thumbnailExtractor.extractThumbnails(timestamps, rendition, this.durationMs);
+	}
+	convertToSegmentRelativeTimestamps(globalTimestamps, _segmentId, _rendition) {
+		return globalTimestamps.map((timestamp) => timestamp / 1e3);
+	}
 };
 export { JitMediaEngine };

package/dist/elements/EFMedia/shared/GlobalInputCache.d.ts

@@ -0,0 +1,39 @@
+import { Input } from 'mediabunny';
+/**
+ * Global cache for MediaBunny Input instances
+ * Shared across all MediaEngine instances to prevent duplicate decoding
+ * of the same segment data
+ */
+declare class GlobalInputCache {
+    private cache;
+    /**
+     * Generate standardized cache key for Input objects
+     * Format: "input:{src}:{segmentId}:{renditionId}"
+     */
+    private generateKey;
+    /**
+     * Get cached Input object
+     */
+    get(src: string, segmentId: number, renditionId?: string): Input | undefined;
+    /**
+     * Cache Input object
+     */
+    set(src: string, segmentId: number, input: Input, renditionId?: string): void;
+    /**
+     * Check if Input is cached
+     */
+    has(src: string, segmentId: number, renditionId?: string): boolean;
+    /**
+     * Clear all cached Input objects
+     */
+    clear(): void;
+    /**
+     * Get cache statistics for debugging
+     */
+    getStats(): {
+        size: number;
+        cachedKeys: unknown[];
+    };
+}
+export declare const globalInputCache: GlobalInputCache;
+export {};

package/dist/elements/EFMedia/shared/GlobalInputCache.js

@@ -0,0 +1,57 @@
+import { LRUCache } from "../../../utils/LRUCache.js";
+/**
+* Global cache for MediaBunny Input instances
+* Shared across all MediaEngine instances to prevent duplicate decoding
+* of the same segment data
+*/
+var GlobalInputCache = class {
+	constructor() {
+		this.cache = new LRUCache(50);
+	}
+	/**
+	* Generate standardized cache key for Input objects
+	* Format: "input:{src}:{segmentId}:{renditionId}"
+	*/
+	generateKey(src, segmentId, renditionId) {
+		return `input:${src}:${segmentId}:${renditionId || "default"}`;
+	}
+	/**
+	* Get cached Input object
+	*/
+	get(src, segmentId, renditionId) {
+		const key = this.generateKey(src, segmentId, renditionId);
+		return this.cache.get(key);
+	}
+	/**
+	* Cache Input object
+	*/
+	set(src, segmentId, input, renditionId) {
+		const key = this.generateKey(src, segmentId, renditionId);
+		this.cache.set(key, input);
+	}
+	/**
+	* Check if Input is cached
+	*/
+	has(src, segmentId, renditionId) {
+		const key = this.generateKey(src, segmentId, renditionId);
+		return this.cache.has(key);
+	}
+	/**
+	* Clear all cached Input objects
+	*/
+	clear() {
+		this.cache.clear();
+	}
+	/**
+	* Get cache statistics for debugging
+	*/
+	getStats() {
+		return {
+			size: this.cache.size,
+			cachedKeys: Array.from(this.cache.cache.keys())
+		};
+	}
+};
+const globalInputCache = new GlobalInputCache();
+globalThis.debugInputCache = globalInputCache;
+export { globalInputCache };

package/dist/elements/EFMedia/shared/ThumbnailExtractor.d.ts

@@ -0,0 +1,27 @@
+import { ThumbnailResult, VideoRendition } from '../../../transcoding/types/index.js';
+import { BaseMediaEngine } from '../BaseMediaEngine.js';
+/**
+ * Shared thumbnail extraction logic for all MediaEngine implementations
+ * Eliminates code duplication and provides consistent behavior
+ */
+export declare class ThumbnailExtractor {
+    private mediaEngine;
+    constructor(mediaEngine: BaseMediaEngine);
+    /**
+     * Extract thumbnails at multiple timestamps efficiently using segment batching
+     */
+    extractThumbnails(timestamps: number[], rendition: VideoRendition, durationMs: number): Promise<(ThumbnailResult | null)[]>;
+    /**
+     * Group timestamps by segment ID for efficient batch processing
+     */
+    private groupTimestampsBySegment;
+    /**
+     * Extract thumbnails for a specific segment using CanvasSink
+     */
+    private extractSegmentThumbnails;
+    /**
+     * Convert global timestamps to segment-relative timestamps for mediabunny
+     * This is where the main difference between JIT and Asset engines lies
+     */
+    private convertToSegmentRelativeTimestamps;
+}

package/dist/elements/EFMedia/shared/ThumbnailExtractor.js

@@ -0,0 +1,106 @@
+import { globalInputCache } from "./GlobalInputCache.js";
+import { ALL_FORMATS, BlobSource, CanvasSink, Input } from "mediabunny";
+/**
+* Shared thumbnail extraction logic for all MediaEngine implementations
+* Eliminates code duplication and provides consistent behavior
+*/
+var ThumbnailExtractor = class {
+	constructor(mediaEngine) {
+		this.mediaEngine = mediaEngine;
+	}
+	/**
+	* Extract thumbnails at multiple timestamps efficiently using segment batching
+	*/
+	async extractThumbnails(timestamps, rendition, durationMs) {
+		if (timestamps.length === 0) return [];
+		const validTimestamps = timestamps.filter((timeMs) => timeMs >= 0 && timeMs <= durationMs);
+		if (validTimestamps.length === 0) {
+			console.warn(`ThumbnailExtractor: All timestamps out of bounds (0-${durationMs}ms)`);
+			return timestamps.map(() => null);
+		}
+		const segmentGroups = this.groupTimestampsBySegment(validTimestamps, rendition);
+		const results = /* @__PURE__ */ new Map();
+		for (const [segmentId, segmentTimestamps] of segmentGroups) try {
+			const segmentResults = await this.extractSegmentThumbnails(segmentId, segmentTimestamps, rendition);
+			for (const [timestamp, thumbnail] of segmentResults) results.set(timestamp, thumbnail);
+		} catch (error) {
+			console.warn(`ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`, error);
+			for (const timestamp of segmentTimestamps) results.set(timestamp, null);
+		}
+		return timestamps.map((t) => {
+			if (t < 0 || t > durationMs) return null;
+			return results.get(t) || null;
+		});
+	}
+	/**
+	* Group timestamps by segment ID for efficient batch processing
+	*/
+	groupTimestampsBySegment(timestamps, rendition) {
+		const segmentGroups = /* @__PURE__ */ new Map();
+		for (const timeMs of timestamps) try {
+			const segmentId = this.mediaEngine.computeSegmentId(timeMs, rendition);
+			if (segmentId !== void 0) {
+				if (!segmentGroups.has(segmentId)) segmentGroups.set(segmentId, []);
+				const segmentGroup = segmentGroups.get(segmentId) ?? [];
+				if (!segmentGroup) segmentGroups.set(segmentId, []);
+				segmentGroup.push(timeMs);
+			}
+		} catch (error) {
+			console.warn(`ThumbnailExtractor: Could not compute segment for timestamp ${timeMs}:`, error);
+		}
+		return segmentGroups;
+	}
+	/**
+	* Extract thumbnails for a specific segment using CanvasSink
+	*/
+	async extractSegmentThumbnails(segmentId, timestamps, rendition) {
+		const results = /* @__PURE__ */ new Map();
+		try {
+			const abortController = new AbortController();
+			const [initSegment, mediaSegment] = await Promise.all([this.mediaEngine.fetchInitSegment(rendition, abortController.signal), this.mediaEngine.fetchMediaSegment(segmentId, rendition)]);
+			const segmentBlob = new Blob([initSegment, mediaSegment]);
+			let input = globalInputCache.get(rendition.src, segmentId, rendition.id);
+			if (!input) {
+				input = new Input({
+					formats: ALL_FORMATS,
+					source: new BlobSource(segmentBlob)
+				});
+				globalInputCache.set(rendition.src, segmentId, input, rendition.id);
+			}
+			const videoTrack = await input.getPrimaryVideoTrack();
+			if (!videoTrack) {
+				for (const timestamp of timestamps) results.set(timestamp, null);
+				return results;
+			}
+			const sink = new CanvasSink(videoTrack);
+			const relativeTimestamps = this.convertToSegmentRelativeTimestamps(timestamps, segmentId, rendition);
+			const timestampResults = [];
+			for await (const result of sink.canvasesAtTimestamps(relativeTimestamps)) timestampResults.push(result);
+			for (let i = 0; i < timestamps.length; i++) {
+				const globalTimestamp = timestamps[i];
+				if (globalTimestamp === void 0) continue;
+				const result = timestampResults[i];
+				if (result?.canvas) {
+					const canvas = result.canvas;
+					if (canvas instanceof HTMLCanvasElement || canvas instanceof OffscreenCanvas) results.set(globalTimestamp, {
+						timestamp: globalTimestamp,
+						thumbnail: canvas
+					});
+					else results.set(globalTimestamp, null);
+				} else results.set(globalTimestamp, null);
+			}
+		} catch (error) {
+			console.error(`ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`, error);
+			for (const timestamp of timestamps) results.set(timestamp, null);
+		}
+		return results;
+	}
+	/**
+	* Convert global timestamps to segment-relative timestamps for mediabunny
+	* This is where the main difference between JIT and Asset engines lies
+	*/
+	convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition) {
+		return this.mediaEngine.convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition);
+	}
+};
+export { ThumbnailExtractor };

package/dist/elements/EFMedia.js

@@ -1,3 +1,4 @@
+import { isContextMixin } from "../gui/ContextMixin.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
 import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.js";
 import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.js";
@@ -64,7 +65,9 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 			"asset-id",
 			"audio-buffer-duration",
 			"max-audio-buffer-fetches",
-			"enable-audio-buffering"
+			"enable-audio-buffering",
+			"sourcein",
+			"sourceout"
 		];
 	}
 	static {
@@ -105,6 +108,27 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 		const newCurrentSourceTimeMs = this.currentSourceTimeMs;
 		if (newCurrentSourceTimeMs !== this.desiredSeekTimeMs) this.executeSeek(newCurrentSourceTimeMs);
 		if (changedProperties.has("ownCurrentTimeMs")) this.executeSeek(this.currentSourceTimeMs);
+		const durationAffectingProps = [
+			"_trimStartMs",
+			"_trimEndMs",
+			"_sourceInMs",
+			"_sourceOutMs"
+		];
+		const hasDurationChange = durationAffectingProps.some((prop) => changedProperties.has(prop));
+		if (hasDurationChange) {
+			if (this.parentTimegroup) {
+				this.parentTimegroup.requestUpdate("durationMs");
+				this.parentTimegroup.requestUpdate("currentTime");
+				let parent = this.parentNode;
+				while (parent) {
+					if (isContextMixin(parent)) {
+						parent.dispatchEvent(new CustomEvent("child-duration-changed", { detail: { source: this } }));
+						break;
+					}
+					parent = parent.parentNode;
+				}
+			}
+		}
 	}
 	get hasOwnDuration() {
 		return true;

package/dist/elements/EFSurface.d.ts

@@ -0,0 +1,30 @@
+import { Task } from '@lit/task';
+import { LitElement } from 'lit';
+import { ContextMixinInterface } from '../gui/ContextMixin.ts';
+export declare class EFSurface extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    targetElement: ContextMixinInterface | null;
+    target: string;
+    render(): import('lit-html').TemplateResult<1>;
+    get rootTimegroup(): any;
+    get currentTimeMs(): number;
+    get durationMs(): number;
+    get startTimeMs(): number;
+    get endTimeMs(): number;
+    /**
+     * Minimal integration with EFTimegroup's frame scheduling:
+     * - Waits for the target video element's frameTask to complete (ensuring it painted)
+     * - Copies the target's canvas into this element's canvas
+     */
+    frameTask: Task<readonly [ContextMixinInterface | null], void>;
+    protected updated(): void;
+    private getSourceCanvas;
+    private copyFromTarget;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-surface": EFSurface;
+    }
+}

package/dist/elements/EFSurface.js

@@ -0,0 +1,96 @@
+import { TargetController } from "./TargetController.js";
+import { Task } from "@lit/task";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { createRef, ref } from "lit/directives/ref.js";
+let EFSurface = class EFSurface$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.canvasRef = createRef();
+		this.targetElement = null;
+		this.target = "";
+		this.frameTask = new Task(this, {
+			autoRun: false,
+			args: () => [this.targetElement],
+			task: async ([target]) => {
+				if (!target) return;
+				try {
+					const maybeTask = target.frameTask;
+					if (maybeTask && typeof maybeTask.run === "function") {
+						maybeTask.run();
+						await maybeTask.taskComplete;
+					}
+				} catch (_err) {}
+				this.copyFromTarget(target);
+			}
+		});
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        position: relative;
+      }
+      canvas {
+        all: inherit;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    `];
+	}
+	#targetController = new TargetController(this);
+	render() {
+		return html`<canvas ${ref(this.canvasRef)}></canvas>`;
+	}
+	get rootTimegroup() {
+		const target = this.targetElement;
+		if (target && "rootTimegroup" in target) return target.rootTimegroup;
+		let root = this.closest("ef-timegroup");
+		while (root?.parentTimegroup) root = root.parentTimegroup;
+		return root;
+	}
+	get currentTimeMs() {
+		return this.rootTimegroup?.currentTimeMs ?? 0;
+	}
+	get durationMs() {
+		return this.rootTimegroup?.durationMs ?? 0;
+	}
+	get startTimeMs() {
+		return this.rootTimegroup?.startTimeMs ?? 0;
+	}
+	get endTimeMs() {
+		return this.startTimeMs + this.durationMs;
+	}
+	updated() {
+		if (this.targetElement) this.copyFromTarget(this.targetElement);
+	}
+	getSourceCanvas(from) {
+		const anyEl = from;
+		if ("canvasElement" in anyEl) return anyEl.canvasElement ?? null;
+		const sr = from.shadowRoot;
+		if (sr) {
+			const c = sr.querySelector("canvas");
+			return c ?? null;
+		}
+		return null;
+	}
+	copyFromTarget(target) {
+		const dst = this.canvasRef.value;
+		const src = this.getSourceCanvas(target);
+		if (!dst || !src) return;
+		if (!src.width || !src.height) return;
+		if (dst.width !== src.width || dst.height !== src.height) {
+			dst.width = src.width;
+			dst.height = src.height;
+		}
+		const ctx = dst.getContext("2d");
+		if (!ctx) return;
+		ctx.drawImage(src, 0, 0, dst.width, dst.height);
+	}
+};
+_decorate([state()], EFSurface.prototype, "targetElement", void 0);
+_decorate([property({ type: String })], EFSurface.prototype, "target", void 0);
+EFSurface = _decorate([customElement("ef-surface")], EFSurface);
+export { EFSurface };

package/dist/elements/EFTemporal.js

@@ -140,25 +140,26 @@ const EFTemporal = (superClass) => {
 			return void 0;
 		}
 		get hasOwnDuration() {
-			return false;
+			return this.intrinsicDurationMs !== void 0 || this.hasExplicitDuration;
 		}
 		get intrinsicDurationMs() {
 			return void 0;
 		}
 		get durationMs() {
-			if (this.intrinsicDurationMs === void 0) return this._durationMs || this.parentTimegroup?.durationMs || 0;
+			const baseDurationMs = this.intrinsicDurationMs ?? this._durationMs ?? this.parentTimegroup?.durationMs ?? 0;
+			if (baseDurationMs === 0) return 0;
 			if (this.trimStartMs || this.trimEndMs) {
-				const trimmedDurationMs = this.intrinsicDurationMs - (this.trimStartMs ?? 0) - (this.trimEndMs ?? 0);
+				const trimmedDurationMs = baseDurationMs - (this.trimStartMs ?? 0) - (this.trimEndMs ?? 0);
 				if (trimmedDurationMs < 0) return 0;
 				return trimmedDurationMs;
 			}
 			if (this.sourceInMs || this.sourceOutMs) {
 				const sourceInMs = this.sourceInMs ?? 0;
-				const sourceOutMs = this.sourceOutMs ?? this.intrinsicDurationMs;
+				const sourceOutMs = this.sourceOutMs ?? baseDurationMs;
 				if (sourceInMs >= sourceOutMs) return 0;
 				return sourceOutMs - sourceInMs;
 			}
-			return this.intrinsicDurationMs;
+			return baseDurationMs;
 		}
 		get sourceStartMs() {
 			return this.trimStartMs ?? this.sourceInMs ?? 0;
@@ -284,4 +285,4 @@ const EFTemporal = (superClass) => {
 	Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, { value: true });
 	return TemporalMixinClass;
 };
-export { EFTemporal, deepGetElementsWithFrameTasks, deepGetTemporalElements, flushStartTimeMsCache, isEFTemporal, resetTemporalCache, shallowGetTemporalElements, timegroupContext };
+export { EFTemporal, deepGetElementsWithFrameTasks, deepGetTemporalElements, flushStartTimeMsCache, resetTemporalCache, shallowGetTemporalElements, timegroupContext };

package/dist/elements/EFThumbnailStrip.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+import { EFVideo } from './EFVideo.js';
+export declare class EFThumbnailStrip extends LitElement {
+    static styles: import('lit').CSSResult[];
+    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    private _targetController;
+    private _targetElement;
+    get targetElement(): EFVideo | null;
+    set targetElement(value: EFVideo | null);
+    target: string;
+    /**
+     * Desired thumbnail width in pixels (height is determined by aspect ratio)
+     * Number of thumbnails is derived from this and available strip width
+     */
+    thumbnailWidth: number;
+    /**
+     * Custom start time in milliseconds relative to trimmed timeline (0 = start of trimmed portion)
+     * In trimmed mode: 0ms = sourceStartMs, 1000ms = sourceStartMs + 1000ms
+     * In intrinsic mode: 0ms = 0ms in source media
+     */
+    startTimeMs?: number;
+    /**
+     * Custom end time in milliseconds relative to trimmed timeline
+     * In trimmed mode: relative to sourceStartMs
+     * In intrinsic mode: relative to source media start (0ms)
+     */
+    endTimeMs?: number;
+    /**
+     * Use intrinsic duration instead of trimmed duration
+     * Accepts "true"/"false" string values or boolean
+     */
+    useIntrinsicDuration: boolean;
+    private _stripWidth;
+    private _stripHeight;
+    private _pendingStripWidth;
+    private _thumbnailLayoutTask;
+    private set stripWidth(value);
+    private get stripWidth();
+    /**
+     * Run thumbnail render task directly with provided layout (bypasses task args dependency)
+     */
+    private runThumbnailRenderTask;
+    private resizeObserver?;
+    private _thumbnailUpdateInProgress;
+    private _pendingThumbnailUpdate;
+    private _videoPropertyObserver?;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Run thumbnail update with responsive debouncing (based on EFTimegroup currentTime pattern)
+     */
+    private runThumbnailUpdate;
+    private thumbnailLayoutTask;
+    /**
+     * Calculate layout with a ready media engine
+     */
+    private calculateLayoutWithMediaEngine;
+    /**
+     * Generate layout from calculated time range
+     */
+    private generateLayoutFromTimeRange;
+    private thumbnailRenderTask;
+    /**
+     * Render thumbnails with provided layout (main rendering logic)
+     */
+    private renderThumbnails;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Draw thumbnails to the canvas with cache hits and placeholders
+     */
+    private drawThumbnails;
+    /**
+     * Load missing thumbnails using MediaEngine batch extraction
+     */
+    private loadMissingThumbnails;
+    /**
+     * Convert Canvas to ImageData for caching
+     */
+    private canvasToImageData;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-thumbnail-strip": EFThumbnailStrip;
+    }
+}