@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/dist/elements/EFThumbnailStrip.js

@@ -1,165 +1,97 @@
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
-import { OrderedLRUCache } from "../utils/LRUCache.js";
 import { TargetController } from "./TargetController.js";
-import { Task } from "@lit/task";
+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
-/**
-* Global thumbnail image cache for smooth resize performance
-* Shared across all thumbnail strip instances
-* Uses OrderedLRUCache for efficient timestamp-based searching
-*/
-const thumbnailImageCache = new OrderedLRUCache(200, (a, b) => {
-	const partsA = a.split(":");
-	const partsB = b.split(":");
-	return Number.parseFloat(partsA[partsA.length - 1] || "0") - Number.parseFloat(partsB[partsB.length - 1] || "0");
-});
-globalThis.debugThumbnailCache = thumbnailImageCache;
-/**
-* Quantize timestamp to 30fps frame boundaries for consistent caching
-* This eliminates cache misses from floating point precision differences
-*/
-function quantizeTimestamp(timeMs) {
-	const frameIntervalMs = 1e3 / 30;
-	return Math.round(timeMs / frameIntervalMs) * frameIntervalMs;
+/** Type guard to check if element is EFVideo */
+function isEFVideo(element) {
+	return element?.tagName.toLowerCase() === "ef-video";
 }
-/**
-* Generate cache key for thumbnail image data (dimension-independent, quantized)
-*/
-function getThumbnailCacheKey(videoSrc, timeMs) {
-	return `${videoSrc}:${quantizeTimestamp(timeMs)}`;
+/** Type guard to check if element is EFTimegroup */
+function isEFTimegroup(element) {
+	return element?.tagName.toLowerCase() === "ef-timegroup";
 }
-const THUMBNAIL_GAP = 1;
-const STRIP_BORDER_PADDING = 4;
 /**
-* Calculate optimal thumbnail count and timestamps for the strip
-* Groups thumbnails by scrub segment ID for efficient caching
+* Get identifiers for cache key generation.
+* Returns rootId (for cache isolation), elementId (for element-specific caching), and epoch (for content versioning).
 */
-function calculateThumbnailLayout(stripWidth, thumbnailWidth, startTimeMs, endTimeMs, scrubSegmentDurationMs) {
-	if (stripWidth <= 0 || thumbnailWidth <= 0 || endTimeMs <= startTimeMs) return {
-		count: 0,
-		segments: []
-	};
-	const thumbnailPitch = thumbnailWidth + THUMBNAIL_GAP;
-	const baseFitCount = Math.floor(stripWidth / thumbnailPitch);
-	const count = Math.max(1, baseFitCount + 1);
-	const timestamps = [];
-	const timeRange = endTimeMs - startTimeMs;
-	for (let i = 0; i < count; i++) {
-		const timeMs = count === 1 ? (startTimeMs + endTimeMs) / 2 : startTimeMs + i * timeRange / (count - 1);
-		timestamps.push(timeMs);
-	}
-	const segmentMap = /* @__PURE__ */ new Map();
-	for (const timeMs of timestamps) {
-		const segmentId = scrubSegmentDurationMs ? Math.floor(timeMs / scrubSegmentDurationMs) : 0;
-		if (!segmentMap.has(segmentId)) segmentMap.set(segmentId, []);
-		segmentMap.get(segmentId).push({ timeMs });
-	}
+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 {
-		count,
-		segments: Array.from(segmentMap.entries()).sort(([a], [b]) => a - b).map(([segmentId, thumbnails]) => ({
-			segmentId,
-			thumbnails
-		}))
+		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._targetController = new TargetController(this);
-		this._targetElement = null;
 		this.target = "";
-		this.thumbnailWidth = 80;
+		this.thumbnailWidth = 0;
+		this.gap = DEFAULT_GAP;
 		this.useIntrinsicDuration = false;
-		this._stripWidth = 0;
-		this._stripHeight = 48;
-		this._thumbnailUpdateInProgress = false;
-		this._pendingThumbnailUpdate = false;
-		this.thumbnailLayoutTask = new Task(this, {
-			autoRun: false,
-			task: async ([stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine]) => {
-				if (stripWidth <= 0 || !targetElement) return {
-					count: 0,
-					segments: []
-				};
-				if (!mediaEngine) {
-					if (targetElement.mediaEngineTask) {
-						await targetElement.mediaEngineTask.taskComplete;
-						const readyMediaEngine = targetElement.mediaEngineTask.value;
-						if (!readyMediaEngine) return {
-							count: 0,
-							segments: []
-						};
-						return this.calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, readyMediaEngine);
-					}
-					return {
-						count: 0,
-						segments: []
-					};
-				}
-				return this.calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine);
-			},
-			args: () => [
-				this.stripWidth,
-				this.thumbnailWidth,
-				this.targetElement,
-				this.startTimeMs,
-				this.endTimeMs,
-				this.useIntrinsicDuration,
-				this.targetElement?.mediaEngineTask?.value
-			]
-		});
-		this.thumbnailRenderTask = new Task(this, {
-			autoRun: false,
-			task: async ([layout, targetElement, thumbnailWidth]) => {
-				if (!layout || !targetElement) return [];
-				return this.renderThumbnails(layout, targetElement, thumbnailWidth);
-			},
-			args: () => [
-				this.thumbnailLayoutTask.value || null,
-				this.targetElement,
-				this.thumbnailWidth
-			]
-		});
+		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;
-        width: 100%;
-        height: 48px; /* Default filmstrip height */
-        background: #2a2a2a;
-        border: 2px solid #333;
-        border-radius: 6px;
+        background: #1a1a2e;
         overflow: hidden;
-        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+        width: 100%;
+        height: 100%;
       }
       canvas {
         display: block;
+        /* Absolute positioning - we manually position at visible region */
         position: absolute;
         top: 0;
-        left: 0;
-        image-rendering: pixelated; /* Keep thumbnails crisp */
-        /* Width and height set programmatically to prevent CSS scaling */
-      }
-      .loading-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(42, 42, 42, 0.9);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 11px;
-        color: #ccc;
-        font-weight: 500;
+        /* Left and width set programmatically based on visible portion */
+        height: 100%;
+        image-rendering: auto;
       }
     `];
 	}
@@ -169,20 +101,166 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	set targetElement(value) {
 		const oldValue = this._targetElement;
 		this._targetElement = value;
-		this._videoPropertyObserver?.disconnect();
-		if (value && value !== oldValue) {
-			this._videoPropertyObserver = new MutationObserver((mutations) => {
-				let shouldUpdate = false;
-				for (const mutation of mutations) if (mutation.type === "attributes" && mutation.attributeName) {
-					const attr = mutation.attributeName;
-					if (attr === "trimstart" || attr === "trimend" || attr === "sourcein" || attr === "sourceout" || attr === "src") {
-						shouldUpdate = true;
-						break;
-					}
+		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 (shouldUpdate) this.runThumbnailUpdate();
-			});
-			this._videoPropertyObserver.observe(value, {
+			}
+			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",
@@ -192,271 +270,434 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 					"src"
 				]
 			});
-			if (value.mediaEngineTask) value.mediaEngineTask.taskComplete.then(() => {
-				if (this._stripWidth > 0) this.thumbnailLayoutTask.run();
-			}).catch(() => {});
+			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);
+			}
 		}
-		this.requestUpdate("targetElement", oldValue);
 	}
-	set stripWidth(value) {
-		if (this._thumbnailLayoutTask) {
-			this._pendingStripWidth = value;
-			return;
-		}
-		this._stripWidth = value;
-		if (value > 0) this._thumbnailLayoutTask = this.thumbnailLayoutTask.run().then(async () => {
-			await this.thumbnailLayoutTask.taskComplete;
-			const layout = this.thumbnailLayoutTask.value;
-			return layout ? this.runThumbnailRenderTask(layout) : [];
-		}).finally(() => {
-			this._thumbnailLayoutTask = void 0;
-			if (this._pendingStripWidth) {
-				this.stripWidth = this._pendingStripWidth;
-				this._pendingStripWidth = void 0;
-			}
+	_scheduleRender() {
+		if (this._renderRequested) return;
+		this._renderRequested = true;
+		requestAnimationFrame(() => {
+			this._renderRequested = false;
+			this._calculateLayout();
+			this._checkCache();
+			this._drawCanvas();
+			this._loadVisibleThumbnails();
+			this._checkAndDispatchReady();
 		});
 	}
-	get stripWidth() {
-		return this._stripWidth;
-	}
 	/**
-	* Run thumbnail render task directly with provided layout (bypasses task args dependency)
+	* Check if thumbnails are ready and dispatch event if not already done.
 	*/
-	async runThumbnailRenderTask(layout) {
-		if (!layout || !this.targetElement || layout.count === 0) return [];
-		return this.renderThumbnails(layout, this.targetElement, this.thumbnailWidth);
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (this._stripWidth === 0) {
-			const width = this.clientWidth;
-			if (width > 0) this.stripWidth = width;
+	_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 }));
 		}
-		if (changedProperties.has("thumbnailWidth") || changedProperties.has("startTimeMs") || changedProperties.has("endTimeMs") || changedProperties.has("useIntrinsicDuration")) this.runThumbnailUpdate();
 	}
 	/**
-	* Run thumbnail update with responsive debouncing (based on EFTimegroup currentTime pattern)
+	* Calculate thumbnail layout based on current dimensions and time range.
+	* Only recreates slots if layout parameters have actually changed.
 	*/
-	runThumbnailUpdate() {
-		if (this._thumbnailUpdateInProgress) {
-			this._pendingThumbnailUpdate = true;
+	_calculateLayout() {
+		if (this._width <= 0 || this._height <= 0 || !this._targetElement) {
+			this._thumbnailSlots = [];
+			this._lastLayoutParams = null;
 			return;
 		}
-		this._thumbnailUpdateInProgress = true;
-		this.thumbnailLayoutTask.run().then(async () => {
-			await this.thumbnailLayoutTask.taskComplete;
-			const layout = this.thumbnailLayoutTask.value;
-			if (layout) await this.runThumbnailRenderTask(layout);
-		}).catch(() => {}).finally(() => {
-			this._thumbnailUpdateInProgress = false;
-			if (this._pendingThumbnailUpdate) {
-				this._pendingThumbnailUpdate = false;
-				this.runThumbnailUpdate();
-			}
-		});
+		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;
 	}
 	/**
-	* Calculate layout with a ready media engine
+	* Get effective time range for thumbnails.
 	*/
-	calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine) {
-		if (useIntrinsicDuration) {
-			const effectiveStartMs$1 = startTimeMs ?? 0;
-			const effectiveEndMs$1 = endTimeMs ?? targetElement.intrinsicDurationMs ?? 0;
-			return this.generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs$1, effectiveEndMs$1, mediaEngine);
+	_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
+			};
 		}
-		const sourceStart = targetElement.sourceStartMs ?? 0;
-		const trimmedDuration = targetElement.durationMs ?? 0;
-		const effectiveStartMs = startTimeMs !== void 0 ? sourceStart + startTimeMs : sourceStart;
-		const effectiveEndMs = endTimeMs !== void 0 ? sourceStart + endTimeMs : sourceStart + trimmedDuration;
-		return this.generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine);
+		return {
+			startMs: this.startTimeMs ?? 0,
+			endMs: this.endTimeMs && this.endTimeMs > 0 ? this.endTimeMs : target.durationMs ?? 0
+		};
 	}
 	/**
-	* Generate layout from calculated time range
+	* Calculate effective thumbnail width (auto or specified).
 	*/
-	generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine) {
-		return calculateThumbnailLayout(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine && typeof mediaEngine.getScrubVideoRendition === "function" ? mediaEngine.getScrubVideoRendition()?.segmentDurationMs : void 0);
+	_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);
 	}
 	/**
-	* Render thumbnails with provided layout (main rendering logic)
+	* Check cache for existing thumbnails.
 	*/
-	async renderThumbnails(layout, targetElement, thumbnailWidth) {
-		if (!layout || !targetElement || layout.count === 0) return [];
-		const videoSrc = targetElement.src;
-		const availableHeight = this._stripHeight - STRIP_BORDER_PADDING;
-		const allThumbnails = [];
-		let thumbnailIndex = 0;
-		for (const segment of layout.segments) for (const thumbnail of segment.thumbnails) {
-			const cacheKey = getThumbnailCacheKey(videoSrc, thumbnail.timeMs);
-			let imageData = thumbnailImageCache.get(cacheKey);
-			let status = "exact-hit";
-			let nearHitKey;
-			if (!imageData) {
-				const timeMinus = Math.max(0, thumbnail.timeMs - 5e3);
-				const timePlus = thumbnail.timeMs + 5e3;
-				const rangeStartKey = `${videoSrc}:${timeMinus}`;
-				const rangeEndKey = `${videoSrc}:${timePlus}`;
-				const sameVideoHits = thumbnailImageCache.findRange(rangeStartKey, rangeEndKey).filter((hit) => hit.key.startsWith(`${videoSrc}:`));
-				if (sameVideoHits.length > 0) {
-					const nearestHit = sameVideoHits.reduce((closest, current) => {
-						const currentParts = current.key.split(":");
-						const closestParts = closest.key.split(":");
-						const currentTime = Number.parseFloat(currentParts[currentParts.length - 1] || "0");
-						const closestTime = Number.parseFloat(closestParts[closestParts.length - 1] || "0");
-						return Math.abs(currentTime - thumbnail.timeMs) < Math.abs(closestTime - thumbnail.timeMs) ? current : closest;
-					});
-					imageData = nearestHit.value;
-					status = "near-hit";
-					nearHitKey = nearestHit.key;
-				} else status = "missing";
-			}
-			const x = thumbnailIndex * (thumbnailWidth + THUMBNAIL_GAP);
-			allThumbnails.push({
-				timeMs: thumbnail.timeMs,
-				segmentId: segment.segmentId,
-				x,
-				width: thumbnailWidth,
-				height: availableHeight,
-				status,
-				imageData,
-				nearHitKey
-			});
-			thumbnailIndex++;
+	_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";
 		}
-		await this.drawThumbnails(allThumbnails);
-		await this.loadMissingThumbnails(allThumbnails, targetElement);
-		return allThumbnails;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.resizeObserver = new ResizeObserver((entries) => {
-			for (const entry of entries) {
-				const width = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0]?.inlineSize : entry.contentRect.width;
-				this._stripHeight = (entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0]?.blockSize : entry.contentRect.height) ?? 0;
-				this.stripWidth = width ?? 0;
-			}
-		});
-		this.resizeObserver.observe(this);
-		this.updateComplete.then(() => {
-			if (this._stripWidth === 0) {
-				const width = this.clientWidth;
-				if (width > 0) this.stripWidth = width ?? 0;
-			}
-		});
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.resizeObserver?.disconnect();
-		this.resizeObserver = void 0;
-		this._videoPropertyObserver?.disconnect();
-		this._videoPropertyObserver = void 0;
 	}
 	/**
-	* Draw thumbnails to the canvas with cache hits and placeholders
+	* 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.
 	*/
-	async drawThumbnails(thumbnails) {
+	_drawCanvas() {
 		const canvas = this.canvasRef.value;
 		if (!canvas) return;
-		const ctx = canvas.getContext("2d");
+		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;
-		canvas.width = this._stripWidth * dpr;
-		canvas.height = this._stripHeight * dpr;
-		canvas.style.width = `${this._stripWidth}px`;
-		canvas.style.height = `${this._stripHeight}px`;
-		ctx.scale(dpr, dpr);
-		ctx.fillStyle = "#2a2a2a";
-		ctx.fillRect(0, 0, this._stripWidth, this._stripHeight);
-		for (const thumb of thumbnails) if (thumb.imageData) {
-			const tempCanvas = document.createElement("canvas");
-			tempCanvas.width = thumb.imageData.width;
-			tempCanvas.height = thumb.imageData.height;
-			const tempCtx = tempCanvas.getContext("2d");
-			if (!tempCtx) continue;
-			tempCtx.putImageData(thumb.imageData, 0, 0);
-			const sourceAspect = thumb.imageData.width / thumb.imageData.height;
-			const containerAspect = thumb.width / thumb.height;
-			let drawWidth;
-			let drawHeight;
-			let drawX;
-			let drawY;
-			if (sourceAspect > containerAspect) {
-				drawWidth = thumb.width;
-				drawHeight = Math.round(thumb.width / sourceAspect);
-				drawX = thumb.x;
-				drawY = Math.round((this._stripHeight - drawHeight) / 2);
-			} else {
-				drawWidth = Math.round(thumb.height * sourceAspect);
-				drawHeight = thumb.height;
-				drawX = thumb.x + Math.round((thumb.width - drawWidth) / 2);
-				drawY = Math.round((this._stripHeight - drawHeight) / 2);
-			}
-			ctx.drawImage(tempCanvas, drawX, drawY, drawWidth, drawHeight);
-			if (thumb.status === "near-hit") {
-				ctx.fillStyle = "rgba(255, 165, 0, 0.3)";
-				ctx.fillRect(thumb.x, 0, thumb.width, 2);
+		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 {
-			const placeholderY = Math.round((this._stripHeight - thumb.height) / 2);
-			ctx.fillStyle = "#404040";
-			ctx.fillRect(thumb.x, placeholderY, thumb.width, thumb.height);
-			ctx.strokeStyle = "#666";
-			ctx.lineWidth = 1;
-			ctx.setLineDash([2, 2]);
-			ctx.strokeRect(thumb.x, placeholderY, thumb.width, thumb.height);
-			ctx.setLineDash([]);
+			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);
+			}
 		}
 	}
 	/**
-	* Load missing thumbnails using MediaEngine batch extraction
+	* Capture thumbnails from a video target using MediaEngine.
 	*/
-	async loadMissingThumbnails(thumbnails, targetElement) {
-		const mediaEngine = targetElement.mediaEngineTask?.value;
+	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 missingThumbnails = thumbnails.filter((t) => t.status === "missing" || t.status === "near-hit");
-		if (missingThumbnails.length === 0) return;
-		for (const thumb of missingThumbnails) thumb.status = "loading";
-		const timestamps = missingThumbnails.map((t) => t.timeMs);
-		const thumbnailResults = await mediaEngine.extractThumbnails(timestamps);
-		for (let i = 0; i < missingThumbnails.length; i++) {
-			const thumb = missingThumbnails[i];
-			const thumbnailResult = thumbnailResults[i];
-			if (thumb && thumbnailResult) {
-				const imageData = this.canvasToImageData(thumbnailResult.thumbnail);
-				if (imageData) {
-					const cacheKey = getThumbnailCacheKey(targetElement.src, thumb.timeMs);
-					thumbnailImageCache.set(cacheKey, imageData);
-					thumb.imageData = imageData;
-					thumb.status = "exact-hit";
+		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);
 		}
-		await this.drawThumbnails(thumbnails);
 	}
 	/**
-	* Convert Canvas to ImageData for caching
+	* Convert canvas to ImageData.
 	*/
-	canvasToImageData(canvas) {
-		const ctx = canvas.getContext("2d");
+	_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>
-      ${this.thumbnailRenderTask.render({
-			pending: () => html``,
-			complete: () => html``,
-			error: (e) => html`<div class="error">Error loading thumbnails: ${e}</div>`
-		})}
-    `;
+		return html`<canvas ${ref(this.canvasRef)}></canvas>`;
 	}
 };
-__decorate([state()], EFThumbnailStrip.prototype, "targetElement", null);
 __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"
@@ -470,14 +711,19 @@ __decorate([property({
 	attribute: "use-intrinsic-duration",
 	reflect: true,
 	converter: {
-		fromAttribute: (value) => {
-			if (value === null) return false;
-			return value === "true";
-		},
+		fromAttribute: (value) => value === "true",
 		toAttribute: (value) => value ? "true" : null
 	}
 })], EFThumbnailStrip.prototype, "useIntrinsicDuration", void 0);
-__decorate([state()], EFThumbnailStrip.prototype, "stripWidth", null);
+__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