@editframe/elements 0.37.3-beta → 0.38.1

package/dist/elements/EFThumbnailStrip.js

@@ -1,731 +0,0 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
-import { TargetController } from "./TargetController.js";
-import { findRootTemporal } from "./findRootTemporal.js";
-import { timelineStateContext } from "../gui/timeline/timelineStateContext.js";
-import { getCacheKey, sessionThumbnailCache } from "./SessionThumbnailCache.js";
-import { consume } from "@lit/context";
-import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-
-//#region src/elements/EFThumbnailStrip.ts
-/** Type guard to check if element is EFVideo */
-function isEFVideo(element) {
-	return element?.tagName.toLowerCase() === "ef-video";
-}
-/** Type guard to check if element is EFTimegroup */
-function isEFTimegroup(element) {
-	return element?.tagName.toLowerCase() === "ef-timegroup";
-}
-/**
-* Get identifiers for cache key generation.
-* Returns rootId (for cache isolation), elementId (for element-specific caching), and epoch (for content versioning).
-*/
-function getCacheIdentifiers(element) {
-	const rootTemporal = findRootTemporal(element);
-	const rootTimegroup = rootTemporal && isEFTimegroup(rootTemporal) ? rootTemporal : null;
-	const rootId = rootTimegroup?.id || "default";
-	const epoch = rootTimegroup?.contentEpoch ?? 0;
-	return {
-		rootId,
-		elementId: isEFVideo(element) ? element.src || element.id || "video" : element.id || "timegroup",
-		epoch
-	};
-}
-/** Padding in pixels for virtual rendering (render extra thumbnails beyond viewport) */
-const VIRTUAL_RENDER_PADDING_PX = 200;
-/** Default gap between thumbnails */
-const DEFAULT_GAP = 4;
-/** Default aspect ratio if unknown */
-const DEFAULT_ASPECT_RATIO = 16 / 9;
-/** Max canvas width for thumbnail captures */
-const MAX_CAPTURE_WIDTH = 480;
-/** Thumbnails to capture per batch */
-const BATCH_SIZE = 10;
-let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.canvasRef = createRef();
-		this.target = "";
-		this.thumbnailWidth = 0;
-		this.gap = DEFAULT_GAP;
-		this.useIntrinsicDuration = false;
-		this.pixelsPerMs = .1;
-		this._targetController = new TargetController(this);
-		this._targetElement = null;
-		this._width = 0;
-		this._height = 0;
-		this._scrollContainer = null;
-		this._currentScrollLeft = 0;
-		this._trackLeftOffset = 0;
-		this._thumbnailSlots = [];
-		this._captureInProgress = false;
-		this._renderRequested = false;
-		this._hasLoadedThumbnails = false;
-		this._lastLoadedEpoch = null;
-		this._lastLayoutParams = null;
-		this._onScroll = () => {
-			if (!this._scrollContainer) return;
-			this._currentScrollLeft = this._scrollContainer.scrollLeft;
-			this._drawCanvas();
-			if (!this._scrollFrame) this._scrollFrame = requestAnimationFrame(() => {
-				this._scrollFrame = void 0;
-				this._loadVisibleThumbnails();
-			});
-		};
-	}
-	static {
-		this.styles = [css`
-      :host {
-        display: block;
-        position: relative;
-        background: #1a1a2e;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-      }
-      canvas {
-        display: block;
-        /* Absolute positioning - we manually position at visible region */
-        position: absolute;
-        top: 0;
-        /* Left and width set programmatically based on visible portion */
-        height: 100%;
-        image-rendering: auto;
-      }
-    `];
-	}
-	get targetElement() {
-		return this._targetElement;
-	}
-	set targetElement(value) {
-		const oldValue = this._targetElement;
-		this._targetElement = value;
-		this._mutationObserver?.disconnect();
-		if (value !== oldValue) {
-			this._hasLoadedThumbnails = false;
-			this._lastLoadedEpoch = null;
-			this._lastLayoutParams = null;
-		}
-		if (value && value !== oldValue) this._setupTargetObserver(value);
-		this.requestUpdate("targetElement", oldValue);
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver((entries) => {
-			for (const entry of entries) {
-				const box = entry.borderBoxSize?.[0];
-				this._width = box?.inlineSize ?? entry.contentRect.width;
-				this._height = box?.blockSize ?? entry.contentRect.height;
-				this._calculateTrackOffset();
-				this._scheduleRender();
-			}
-		});
-		this._resizeObserver.observe(this);
-		this.updateComplete.then(() => {
-			this._findScrollContainer();
-			this._scheduleRender();
-		});
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._mutationObserver?.disconnect();
-		this._detachScrollListener();
-		if (this._scrollFrame) cancelAnimationFrame(this._scrollFrame);
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (changedProperties.has("thumbnailWidth") || changedProperties.has("gap") || changedProperties.has("startTimeMs") || changedProperties.has("endTimeMs") || changedProperties.has("useIntrinsicDuration") || changedProperties.has("pixelsPerMs") || changedProperties.has("targetElement")) this._scheduleRender();
-		if (changedProperties.has("_timelineState")) this._onContextScroll();
-	}
-	_findScrollContainer() {
-		let node = this.parentNode;
-		while (node) {
-			if (node instanceof HTMLElement) {
-				const style = getComputedStyle(node);
-				if (style.overflowX === "auto" || style.overflowX === "scroll") {
-					this._scrollContainer = node;
-					this._calculateTrackOffset();
-					this._attachScrollListener();
-					return;
-				}
-			}
-			if (node.parentNode) node = node.parentNode;
-			else if (node instanceof ShadowRoot) node = node.host;
-			else break;
-		}
-	}
-	/**
-	* Calculate the horizontal offset from scroll container's left edge to this element's track.
-	* This accounts for sticky labels or other elements that precede the track area.
-	* 
-	* We look for our specific timeline elements (ef-timeline-row) and measure their label width.
-	*/
-	_calculateTrackOffset() {
-		if (!this._scrollContainer) {
-			this._trackLeftOffset = 0;
-			return;
-		}
-		const timelineRow = this._findTimelineRow();
-		if (timelineRow) {
-			const labelWidth = this._getTimelineRowLabelWidth(timelineRow);
-			if (labelWidth > 0) {
-				this._trackLeftOffset = labelWidth;
-				return;
-			}
-		}
-		this._trackLeftOffset = 0;
-	}
-	/**
-	* Find the ef-timeline-row ancestor by walking up through shadow DOM boundaries.
-	*/
-	_findTimelineRow() {
-		let node = this;
-		while (node) {
-			if (node instanceof Element && node.tagName.toLowerCase() === "ef-timeline-row") return node;
-			const parentNode = node.parentNode;
-			if (parentNode instanceof ShadowRoot) node = parentNode.host;
-			else node = parentNode;
-		}
-		return null;
-	}
-	/**
-	* Get the label width from an ef-timeline-row element.
-	* Queries the shadow root for .row-label and returns its width.
-	*/
-	_getTimelineRowLabelWidth(timelineRow) {
-		const shadowRoot = timelineRow.shadowRoot;
-		if (!shadowRoot) return 0;
-		const rowLabel = shadowRoot.querySelector(".row-label");
-		if (!rowLabel) return 0;
-		return rowLabel.getBoundingClientRect().width;
-	}
-	/**
-	* Get this strip's absolute position in the timeline (pixels from timeline origin).
-	* Uses the target element's startTimeMs to determine position.
-	*/
-	_getStripTimelinePosition() {
-		const target = this._targetElement;
-		if (!target) return 0;
-		if (isEFVideo(target)) return (target.startTimeMs ?? 0) * (this._timelineState?.pixelsPerMs ?? .1);
-		return 0;
-	}
-	_attachScrollListener() {
-		if (!this._scrollContainer) return;
-		this._scrollContainer.addEventListener("scroll", this._onScroll, { passive: true });
-		this._currentScrollLeft = this._scrollContainer.scrollLeft;
-	}
-	_detachScrollListener() {
-		if (this._scrollContainer) {
-			this._scrollContainer.removeEventListener("scroll", this._onScroll);
-			this._scrollContainer = null;
-		}
-	}
-	_onContextScroll() {
-		if (!this._timelineState || this._scrollContainer) return;
-		this._currentScrollLeft = this._timelineState.viewportScrollLeft;
-		this._drawCanvas();
-	}
-	get _viewportWidth() {
-		if (this._timelineState?.viewportWidth) return this._timelineState.viewportWidth;
-		if (this._scrollContainer) return this._scrollContainer.clientWidth - this._trackLeftOffset;
-		return this._width;
-	}
-	/**
-	* Watch for async content loading from child media elements.
-	* When media finishes loading, increment the epoch to invalidate cached thumbnails.
-	*/
-	_watchChildContentLoading(target) {
-		const mediaElements = target.querySelectorAll("ef-video, ef-image, ef-audio");
-		for (const el of mediaElements) {
-			const mediaEngine = el.mediaEngineTask;
-			if (mediaEngine?.taskComplete) mediaEngine.taskComplete.then(() => {
-				if (this._targetElement === target) {
-					target.incrementContentEpoch();
-					this._lastLayoutParams = null;
-					this._scheduleRender();
-				}
-			}).catch(() => {});
-			const fetchTask = el.fetchImage;
-			if (fetchTask?.taskComplete) fetchTask.taskComplete.then(() => {
-				if (this._targetElement === target) {
-					target.incrementContentEpoch();
-					this._lastLayoutParams = null;
-					this._scheduleRender();
-				}
-			}).catch(() => {});
-		}
-	}
-	_setupTargetObserver(target) {
-		if (isEFVideo(target)) {
-			this._mutationObserver = new MutationObserver(() => this._scheduleRender());
-			this._mutationObserver.observe(target, {
-				attributes: true,
-				attributeFilter: [
-					"trimstart",
-					"trimend",
-					"sourcein",
-					"sourceout",
-					"src"
-				]
-			});
-			target.updateComplete.then(() => {
-				if (this._targetElement !== target) return;
-				target.mediaEngineTask?.taskComplete.then(() => {
-					if (this._targetElement !== target) return;
-					this._scheduleRender();
-				});
-			});
-		} else if (isEFTimegroup(target)) {
-			this._mutationObserver = new MutationObserver((mutations) => {
-				if (mutations.some((mutation) => {
-					if (mutation.type === "childList") return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
-					if (mutation.type === "attributes") {
-						const attrName = mutation.attributeName;
-						if (attrName === "currenttime" || attrName === "current-time" || attrName === "playing" || attrName === "loop") return false;
-						return attrName === "src" || attrName === "asset-id" || attrName === "style" || attrName === "transform";
-					}
-					return false;
-				})) {
-					const epochBefore = target.contentEpoch;
-					target.incrementContentEpoch();
-					if (target.contentEpoch !== epochBefore) {
-						this._lastLayoutParams = null;
-						if (mutations.some((m) => m.addedNodes.length > 0)) this._watchChildContentLoading(target);
-						this._scheduleRender();
-					}
-				}
-			});
-			this._mutationObserver.observe(target, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-				attributeFilter: [
-					"src",
-					"asset-id",
-					"style",
-					"transform"
-				]
-			});
-			this._watchChildContentLoading(target);
-			if (target.durationMs === 0) {
-				const checkDuration = () => {
-					if (this._targetElement !== target) return;
-					if (target.durationMs > 0) this._scheduleRender();
-					else requestAnimationFrame(checkDuration);
-				};
-				requestAnimationFrame(checkDuration);
-			}
-		}
-	}
-	_scheduleRender() {
-		if (this._renderRequested) return;
-		this._renderRequested = true;
-		requestAnimationFrame(() => {
-			this._renderRequested = false;
-			this._calculateLayout();
-			this._checkCache();
-			this._drawCanvas();
-			this._loadVisibleThumbnails();
-			this._checkAndDispatchReady();
-		});
-	}
-	/**
-	* Check if thumbnails are ready and dispatch event if not already done.
-	*/
-	_checkAndDispatchReady() {
-		if (this._hasLoadedThumbnails) return;
-		const hasLayout = this._thumbnailSlots.length > 0;
-		const hasAnyCached = this._thumbnailSlots.some((s) => s.status === "cached");
-		const hasPending = this._thumbnailSlots.some((s) => s.status === "pending");
-		if (hasLayout && (hasAnyCached || !hasPending)) {
-			this._hasLoadedThumbnails = true;
-			this.dispatchEvent(new CustomEvent("thumbnails-ready", { bubbles: true }));
-		}
-	}
-	/**
-	* Calculate thumbnail layout based on current dimensions and time range.
-	* Only recreates slots if layout parameters have actually changed.
-	*/
-	_calculateLayout() {
-		if (this._width <= 0 || this._height <= 0 || !this._targetElement) {
-			this._thumbnailSlots = [];
-			this._lastLayoutParams = null;
-			return;
-		}
-		const timeRange = this._getTimeRange();
-		if (timeRange.endMs <= timeRange.startMs) {
-			this._thumbnailSlots = [];
-			this._lastLayoutParams = null;
-			return;
-		}
-		const thumbWidth = this._getEffectiveThumbnailWidth();
-		const gap = this.gap;
-		const currentParams = {
-			width: this._width,
-			height: this._height,
-			startTimeMs: timeRange.startMs,
-			endTimeMs: timeRange.endMs,
-			thumbWidth,
-			gap
-		};
-		if (this._lastLayoutParams && this._lastLayoutParams.width === currentParams.width && this._lastLayoutParams.height === currentParams.height && this._lastLayoutParams.startTimeMs === currentParams.startTimeMs && this._lastLayoutParams.endTimeMs === currentParams.endTimeMs && this._lastLayoutParams.thumbWidth === currentParams.thumbWidth && this._lastLayoutParams.gap === currentParams.gap) return;
-		this._lastLayoutParams = currentParams;
-		const count = Math.max(1, Math.floor((this._width + gap) / (thumbWidth + gap)));
-		const pitch = count > 1 ? (this._width - thumbWidth) / (count - 1) : 0;
-		const slots = [];
-		const duration = timeRange.endMs - timeRange.startMs;
-		for (let i = 0; i < count; i++) {
-			const timeMs = count === 1 ? (timeRange.startMs + timeRange.endMs) / 2 : timeRange.startMs + i * duration / (count - 1);
-			slots.push({
-				timeMs,
-				x: Math.round(i * pitch),
-				width: thumbWidth,
-				status: "pending"
-			});
-		}
-		this._thumbnailSlots = slots;
-	}
-	/**
-	* Get effective time range for thumbnails.
-	*/
-	_getTimeRange() {
-		const target = this._targetElement;
-		if (!target) return {
-			startMs: 0,
-			endMs: 0
-		};
-		if (isEFVideo(target)) {
-			if (this.useIntrinsicDuration) return {
-				startMs: this.startTimeMs ?? 0,
-				endMs: this.endTimeMs ?? target.intrinsicDurationMs ?? 0
-			};
-			const sourceStart = target.sourceStartMs ?? 0;
-			const trimmedDuration = target.durationMs ?? 0;
-			return {
-				startMs: this.startTimeMs !== void 0 ? sourceStart + this.startTimeMs : sourceStart,
-				endMs: this.endTimeMs !== void 0 ? sourceStart + this.endTimeMs : sourceStart + trimmedDuration
-			};
-		}
-		return {
-			startMs: this.startTimeMs ?? 0,
-			endMs: this.endTimeMs && this.endTimeMs > 0 ? this.endTimeMs : target.durationMs ?? 0
-		};
-	}
-	/**
-	* Calculate effective thumbnail width (auto or specified).
-	*/
-	_getEffectiveThumbnailWidth() {
-		if (this.thumbnailWidth > 0) return this.thumbnailWidth;
-		const target = this._targetElement;
-		let aspectRatio = DEFAULT_ASPECT_RATIO;
-		if (isEFVideo(target)) aspectRatio = (target.videoWidth || 1920) / (target.videoHeight || 1080);
-		else if (isEFTimegroup(target)) aspectRatio = (target.offsetWidth || 1920) / (target.offsetHeight || 1080);
-		return Math.round(this._height * aspectRatio);
-	}
-	/**
-	* Check cache for existing thumbnails.
-	*/
-	_checkCache() {
-		if (!this._targetElement) return;
-		const { rootId, elementId, epoch } = getCacheIdentifiers(this._targetElement);
-		for (const slot of this._thumbnailSlots) {
-			const key = getCacheKey(rootId, elementId, slot.timeMs, epoch);
-			if (sessionThumbnailCache.has(key)) {
-				slot.imageData = sessionThumbnailCache.get(key);
-				slot.status = "cached";
-			} else slot.status = "pending";
-		}
-	}
-	/**
-	* Draw the canvas with current thumbnail state.
-	* Canvas is absolutely positioned at the visible portion of the strip.
-	* Uses virtual rendering - only draws thumbnails in the visible region.
-	*/
-	_drawCanvas() {
-		const canvas = this.canvasRef.value;
-		if (!canvas) return;
-		const ctx = canvas.getContext("2d", { willReadFrequently: true });
-		if (!ctx) return;
-		const stripWidth = this._width;
-		const height = this._height;
-		if (stripWidth <= 0 || height <= 0) return;
-		const dpr = window.devicePixelRatio || 1;
-		const scrollLeft = this._currentScrollLeft;
-		const viewportWidth = this._viewportWidth;
-		const stripStartPx = this._getStripTimelinePosition();
-		const stripEndPx = stripStartPx + stripWidth;
-		const visibleLeftPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;
-		const visibleRightPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;
-		if (stripEndPx < visibleLeftPx || stripStartPx > visibleRightPx) {
-			canvas.style.display = "none";
-			return;
-		}
-		canvas.style.display = "block";
-		const visibleStartInStrip = Math.max(0, visibleLeftPx - stripStartPx);
-		const visibleEndInStrip = Math.min(stripWidth, visibleRightPx - stripStartPx);
-		const visibleWidthPx = visibleEndInStrip - visibleStartInStrip;
-		if (visibleWidthPx <= 0) {
-			canvas.style.display = "none";
-			return;
-		}
-		const targetWidth = Math.ceil(visibleWidthPx * dpr);
-		const targetHeight = Math.ceil(height * dpr);
-		if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
-			canvas.width = targetWidth;
-			canvas.height = targetHeight;
-		}
-		canvas.style.left = `${visibleStartInStrip}px`;
-		canvas.style.width = `${visibleWidthPx}px`;
-		canvas.style.height = `${height}px`;
-		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-		ctx.fillStyle = "#1a1a2e";
-		ctx.fillRect(0, 0, visibleWidthPx, height);
-		for (const slot of this._thumbnailSlots) {
-			if (slot.x + slot.width < visibleStartInStrip || slot.x > visibleEndInStrip) continue;
-			const drawX = slot.x - visibleStartInStrip;
-			if (drawX + slot.width < 0 || drawX > visibleWidthPx) continue;
-			if (slot.imageData) this._drawThumbnailImage(ctx, slot.imageData, drawX, slot.width, height);
-			else {
-				ctx.fillStyle = slot.status === "loading" ? "#2d2d50" : "#2d2d44";
-				ctx.fillRect(drawX, 0, slot.width, height);
-				if (slot.status === "loading") {
-					ctx.fillStyle = "rgba(59, 130, 246, 0.3)";
-					ctx.fillRect(drawX, 0, slot.width, 2);
-				}
-			}
-		}
-	}
-	/**
-	* Draw a thumbnail image with cover mode scaling.
-	*/
-	_drawThumbnailImage(ctx, imageData, x, width, height) {
-		const tempCanvas = document.createElement("canvas");
-		tempCanvas.width = imageData.width;
-		tempCanvas.height = imageData.height;
-		const tempCtx = tempCanvas.getContext("2d");
-		if (!tempCtx) return;
-		tempCtx.putImageData(imageData, 0, 0);
-		const srcAspect = imageData.width / imageData.height;
-		const dstAspect = width / height;
-		let srcX = 0, srcY = 0, srcW = imageData.width, srcH = imageData.height;
-		if (srcAspect > dstAspect) {
-			srcW = imageData.height * dstAspect;
-			srcX = (imageData.width - srcW) / 2;
-		} else {
-			srcH = imageData.width / dstAspect;
-			srcY = (imageData.height - srcH) / 2;
-		}
-		ctx.drawImage(tempCanvas, srcX, srcY, srcW, srcH, x, 0, width, height);
-	}
-	/**
-	* Load thumbnails that are visible in the current viewport.
-	* Skips loading if the epoch hasn't changed since last load.
-	*/
-	async _loadVisibleThumbnails() {
-		if (this._captureInProgress || !this._targetElement) return;
-		if (isEFTimegroup(this._targetElement)) {
-			const currentEpoch = this._targetElement.contentEpoch;
-			if (this._lastLoadedEpoch !== null && this._lastLoadedEpoch === currentEpoch) {
-				if (!this._thumbnailSlots.some((s) => s.status === "pending")) return;
-			}
-		}
-		const viewportWidth = this._viewportWidth;
-		const scrollOffset = this._currentScrollLeft;
-		const stripWidth = this._width;
-		const stripStartPx = this._getStripTimelinePosition();
-		const visibleLeftPx = scrollOffset - VIRTUAL_RENDER_PADDING_PX;
-		const visibleRightPx = scrollOffset + viewportWidth + VIRTUAL_RENDER_PADDING_PX;
-		const visibleStartInStrip = Math.max(0, visibleLeftPx - stripStartPx);
-		const visibleEndInStrip = Math.min(stripWidth, visibleRightPx - stripStartPx);
-		const pending = this._thumbnailSlots.filter((slot) => {
-			if (slot.status !== "pending") return false;
-			return slot.x + slot.width >= visibleStartInStrip && slot.x <= visibleEndInStrip;
-		});
-		if (pending.length === 0) return;
-		this._captureInProgress = true;
-		for (const slot of pending) slot.status = "loading";
-		this._drawCanvas();
-		try {
-			if (isEFTimegroup(this._targetElement)) await this._captureTimegroupThumbnails(pending);
-			else if (isEFVideo(this._targetElement)) await this._captureVideoThumbnails(pending);
-		} catch (error) {
-			console.warn("Failed to capture thumbnails:", error);
-			for (const slot of pending) if (slot.status === "loading") slot.status = "pending";
-		} finally {
-			this._captureInProgress = false;
-			this._drawCanvas();
-			if (isEFTimegroup(this._targetElement)) this._lastLoadedEpoch = this._targetElement.contentEpoch;
-			if (this._thumbnailSlots.some((s) => s.status === "cached") && !this._hasLoadedThumbnails) {
-				this._hasLoadedThumbnails = true;
-				this.dispatchEvent(new CustomEvent("thumbnails-ready", { bubbles: true }));
-			}
-		}
-	}
-	/**
-	* Capture thumbnails from a timegroup target.
-	*/
-	async _captureTimegroupThumbnails(slots) {
-		const target = this._targetElement;
-		const { rootId, elementId, epoch } = getCacheIdentifiers(target);
-		const timegroupWidth = target.offsetWidth || 1920;
-		const timegroupHeight = target.offsetHeight || 1080;
-		const scale = Math.min(1, this._height / timegroupHeight, MAX_CAPTURE_WIDTH / timegroupWidth);
-		for (let i = 0; i < slots.length; i += BATCH_SIZE) {
-			const batch = slots.slice(i, i + BATCH_SIZE);
-			const timestamps = batch.map((s) => s.timeMs);
-			try {
-				const canvases = await target.captureBatch(timestamps, {
-					scale,
-					contentReadyMode: "immediate"
-				});
-				for (let j = 0; j < batch.length; j++) {
-					const slot = batch[j];
-					const canvas = canvases[j];
-					if (canvas) {
-						const imageData = this._canvasToImageData(canvas);
-						if (imageData) {
-							const key = getCacheKey(rootId, elementId, slot.timeMs, epoch);
-							sessionThumbnailCache.set(key, imageData, slot.timeMs, elementId);
-							slot.imageData = imageData;
-							slot.status = "cached";
-						}
-					}
-				}
-				this._drawCanvas();
-				if (i + BATCH_SIZE < slots.length) await new Promise((r) => requestAnimationFrame(r));
-			} catch (error) {
-				console.warn("Batch capture failed:", error);
-			}
-		}
-	}
-	/**
-	* Capture thumbnails from a video target using MediaEngine.
-	*/
-	async _captureVideoThumbnails(slots) {
-		const target = this._targetElement;
-		const { rootId, elementId, epoch } = getCacheIdentifiers(target);
-		if (target.mediaEngineTask) await target.mediaEngineTask.taskComplete;
-		const mediaEngine = target.mediaEngineTask?.value;
-		if (!mediaEngine) return;
-		const videoRendition = mediaEngine.getVideoRendition();
-		const scrubRendition = mediaEngine.getScrubVideoRendition();
-		if (!videoRendition && !scrubRendition) return;
-		const timestamps = slots.map((s) => s.timeMs);
-		const abortController = new AbortController();
-		try {
-			const results = await mediaEngine.extractThumbnails(timestamps, abortController.signal);
-			for (let i = 0; i < slots.length; i++) {
-				const slot = slots[i];
-				const result = results[i];
-				if (result?.thumbnail) {
-					const imageData = this._canvasToImageData(result.thumbnail);
-					if (imageData) {
-						const key = getCacheKey(rootId, elementId, slot.timeMs, epoch);
-						sessionThumbnailCache.set(key, imageData, slot.timeMs, elementId);
-						slot.imageData = imageData;
-						slot.status = "cached";
-					}
-				}
-			}
-		} catch (error) {
-			abortController.abort();
-			console.warn("Video thumbnail extraction failed:", error);
-		}
-	}
-	/**
-	* Convert canvas to ImageData.
-	*/
-	_canvasToImageData(canvas) {
-		const ctx = canvas.getContext("2d", { willReadFrequently: true });
-		if (!ctx) return null;
-		return ctx.getImageData(0, 0, canvas.width, canvas.height);
-	}
-	/**
-	* Returns a promise that resolves when thumbnails are ready.
-	* Resolves immediately if thumbnails are already loaded.
-	*/
-	whenReady() {
-		if (this._hasLoadedThumbnails) return Promise.resolve();
-		return new Promise((resolve) => {
-			this.addEventListener("thumbnails-ready", () => resolve(), { once: true });
-		});
-	}
-	/**
-	* Check if thumbnails have been loaded.
-	*/
-	get isReady() {
-		return this._hasLoadedThumbnails;
-	}
-	/**
-	* Invalidate cached thumbnails for this element within a time range.
-	* Call this when content changes at specific times.
-	*/
-	invalidateTimeRange(startTimeMs, endTimeMs) {
-		if (!this._targetElement) return;
-		const { rootId, elementId } = getCacheIdentifiers(this._targetElement);
-		sessionThumbnailCache.invalidateTimeRange(rootId, elementId, startTimeMs, endTimeMs);
-		for (const slot of this._thumbnailSlots) if (slot.timeMs >= startTimeMs && slot.timeMs <= endTimeMs) {
-			slot.imageData = void 0;
-			slot.status = "pending";
-		}
-		this._scheduleRender();
-	}
-	/**
-	* Invalidate all cached thumbnails for this element.
-	*/
-	invalidateAll() {
-		if (!this._targetElement) return;
-		const { rootId, elementId } = getCacheIdentifiers(this._targetElement);
-		sessionThumbnailCache.invalidateElement(rootId, elementId);
-		for (const slot of this._thumbnailSlots) {
-			slot.imageData = void 0;
-			slot.status = "pending";
-		}
-		this._scheduleRender();
-	}
-	render() {
-		return html`<canvas ${ref(this.canvasRef)}></canvas>`;
-	}
-};
-__decorate([property({ type: String })], EFThumbnailStrip.prototype, "target", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "thumbnail-width"
-})], EFThumbnailStrip.prototype, "thumbnailWidth", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "gap"
-})], EFThumbnailStrip.prototype, "gap", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "start-time-ms"
-})], EFThumbnailStrip.prototype, "startTimeMs", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "end-time-ms"
-})], EFThumbnailStrip.prototype, "endTimeMs", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: "use-intrinsic-duration",
-	reflect: true,
-	converter: {
-		fromAttribute: (value) => value === "true",
-		toAttribute: (value) => value ? "true" : null
-	}
-})], EFThumbnailStrip.prototype, "useIntrinsicDuration", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "pixels-per-ms"
-})], EFThumbnailStrip.prototype, "pixelsPerMs", void 0);
-__decorate([consume({
-	context: timelineStateContext,
-	subscribe: true
-}), state()], EFThumbnailStrip.prototype, "_timelineState", void 0);
-__decorate([state()], EFThumbnailStrip.prototype, "targetElement", null);
-EFThumbnailStrip = __decorate([customElement("ef-thumbnail-strip")], EFThumbnailStrip);
-
-//#endregion
-export { EFThumbnailStrip };
-//# sourceMappingURL=EFThumbnailStrip.js.map