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

package/dist/elements/EFAudio.d.ts

@@ -2,7 +2,7 @@ import { MediaEngine } from "../transcoding/types/index.js";
 import { EFMedia } from "./EFMedia.js";
 import * as _lit_task8 from "@lit/task";
 import { Task } from "@lit/task";
-import * as lit_html1 from "lit-html";
+import * as lit_html2 from "lit-html";
 import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
 
 //#region src/elements/EFAudio.d.ts
@@ -20,7 +20,7 @@ declare class EFAudio extends EFAudio_base {
   volume: number;
   audioElementRef: lit_html_directives_ref_js1.Ref<HTMLAudioElement>;
   protected updated(changedProperties: Map<PropertyKey, unknown>): void;
-  render(): lit_html1.TemplateResult<1>;
+  render(): lit_html2.TemplateResult<1>;
   frameTask: Task<readonly [_lit_task8.TaskStatus, _lit_task8.TaskStatus, _lit_task8.TaskStatus, _lit_task8.TaskStatus], void>;
   /**
    * Legacy getter for fragment index task (maps to audioSegmentIdTask)

package/dist/elements/EFCaptions.d.ts

@@ -4,9 +4,9 @@ import { FetchMixinInterface } from "./FetchMixin.js";
 import { EFVideo } from "./EFVideo.js";
 import { EFAudio } from "./EFAudio.js";
 import { Task, TaskStatus } from "@lit/task";
-import * as lit3 from "lit";
+import * as lit4 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html3 from "lit-html";
+import * as lit_html4 from "lit-html";
 
 //#region src/elements/EFCaptions.d.ts
 interface WordSegment {
@@ -25,8 +25,8 @@ interface Caption {
 }
 declare const EFCaptionsActiveWord_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
-  static styles: lit3.CSSResult[];
-  render(): lit_html3.TemplateResult<1> | undefined;
+  static styles: lit4.CSSResult[];
+  render(): lit_html4.TemplateResult<1> | undefined;
   wordStartMs: number;
   wordEndMs: number;
   wordText: string;
@@ -38,8 +38,8 @@ declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
 }
 declare const EFCaptionsSegment_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFCaptionsSegment extends EFCaptionsSegment_base {
-  static styles: lit3.CSSResult[];
-  render(): lit_html3.TemplateResult<1> | undefined;
+  static styles: lit4.CSSResult[];
+  render(): lit_html4.TemplateResult<1> | undefined;
   segmentStartMs: number;
   segmentEndMs: number;
   segmentText: string;
@@ -49,8 +49,8 @@ declare class EFCaptionsSegment extends EFCaptionsSegment_base {
   get durationMs(): number;
 }
 declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
-  static styles: lit3.CSSResult[];
-  render(): lit_html3.TemplateResult<1> | undefined;
+  static styles: lit4.CSSResult[];
+  render(): lit_html4.TemplateResult<1> | undefined;
   hidden: boolean;
   segmentText: string;
   segmentStartMs: number;
@@ -60,8 +60,8 @@ declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
   get durationMs(): number;
 }
 declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
-  static styles: lit3.CSSResult[];
-  render(): lit_html3.TemplateResult<1> | undefined;
+  static styles: lit4.CSSResult[];
+  render(): lit_html4.TemplateResult<1> | undefined;
   hidden: boolean;
   segmentText: string;
   segmentStartMs: number;
@@ -73,7 +73,7 @@ declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
 declare const EFCaptions_base: (new (...args: any[]) => EFSourceMixinInterface) & (new (...args: any[]) => TemporalMixinInterface) & (new (...args: any[]) => FetchMixinInterface) & typeof LitElement;
 declare class EFCaptions extends EFCaptions_base {
   #private;
-  static styles: lit3.CSSResult[];
+  static styles: lit4.CSSResult[];
   targetSelector: string;
   set target(value: string);
   wordStyle: string;
@@ -96,7 +96,7 @@ declare class EFCaptions extends EFCaptions_base {
   segmentContainers: HTMLCollectionOf<EFCaptionsSegment>;
   beforeActiveWordContainers: HTMLCollectionOf<EFCaptionsBeforeActiveWord>;
   afterActiveWordContainers: HTMLCollectionOf<EFCaptionsAfterActiveWord>;
-  render(): lit_html3.TemplateResult<1>;
+  render(): lit_html4.TemplateResult<1>;
   transcriptionsPath(): string | null;
   captionsPath(): string | null;
   protected md5SumLoader: Task<readonly [string, typeof fetch], any>;

package/dist/elements/EFImage.d.ts

@@ -3,21 +3,21 @@ import { TemporalMixinInterface } from "./EFTemporal.js";
 import { FetchMixinInterface } from "./FetchMixin.js";
 import * as _lit_task0 from "@lit/task";
 import { Task } from "@lit/task";
-import * as lit0 from "lit";
+import * as lit1 from "lit";
 import { LitElement } from "lit";
-import * as lit_html0 from "lit-html";
+import * as lit_html1 from "lit-html";
 import * as lit_html_directives_ref_js0 from "lit-html/directives/ref.js";
 
 //#region src/elements/EFImage.d.ts
 declare const EFImage_base: (new (...args: any[]) => TemporalMixinInterface) & (new (...args: any[]) => EFSourceMixinInterface) & (new (...args: any[]) => FetchMixinInterface) & typeof LitElement;
 declare class EFImage extends EFImage_base {
   #private;
-  static styles: lit0.CSSResult[];
+  static styles: lit1.CSSResult[];
   imageRef: lit_html_directives_ref_js0.Ref<HTMLImageElement>;
   canvasRef: lit_html_directives_ref_js0.Ref<HTMLCanvasElement>;
   set assetId(value: string | null);
   get assetId(): string | null;
-  render(): lit_html0.TemplateResult<1>;
+  render(): lit_html1.TemplateResult<1>;
   private isDirectUrl;
   assetPath(): string;
   get hasOwnDuration(): boolean;

package/dist/elements/EFMedia.d.ts

@@ -9,7 +9,7 @@ import { AudioBufferState } from "./EFMedia/audioTasks/makeAudioBufferTask.js";
 import { ControllableInterface } from "../gui/Controllable.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
 import * as _lit_task0 from "@lit/task";
-import * as lit1 from "lit";
+import * as lit2 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 import * as mediabunny0 from "mediabunny";
 
@@ -34,7 +34,7 @@ declare class EFMedia extends EFMedia_base {
    */
   get requiredTracks(): "audio" | "video" | "both";
   static get observedAttributes(): string[];
-  static styles: lit1.CSSResult[];
+  static styles: lit2.CSSResult[];
   /**
    * Duration in milliseconds for audio buffering ahead of current time
    * @domAttribute "audio-buffer-duration"

package/dist/elements/EFText.d.ts

@@ -1,14 +1,14 @@
 import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFTextSegment } from "./EFTextSegment.js";
-import * as lit8 from "lit";
+import * as lit0 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html8 from "lit-html";
+import * as lit_html0 from "lit-html";
 
 //#region src/elements/EFText.d.ts
 type SplitMode = "line" | "word" | "char";
 declare const EFText_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFText extends EFText_base {
-  static styles: lit8.CSSResult[];
+  static styles: lit0.CSSResult[];
   split: SplitMode;
   private validateSplit;
   staggerMs?: number;
@@ -19,7 +19,7 @@ declare class EFText extends EFText_base {
   private _textContent;
   private _templateElement;
   private _segmentsReadyResolvers;
-  render(): lit_html8.TemplateResult<1>;
+  render(): lit_html0.TemplateResult<1>;
   set textContent(value: string | null);
   get textContent(): string;
   /**

package/dist/elements/EFThumbnailStrip.d.ts

@@ -48,6 +48,10 @@ declare class EFThumbnailStrip extends LitElement {
   private _renderRequested;
   /** Track if any thumbnails have been loaded (for ready event) */
   private _hasLoadedThumbnails;
+  /** Track the last epoch we loaded thumbnails for */
+  private _lastLoadedEpoch;
+  /** Track layout parameters to avoid unnecessary slot recreation */
+  private _lastLayoutParams;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
@@ -78,6 +82,11 @@ declare class EFThumbnailStrip extends LitElement {
   private _onScroll;
   private _onContextScroll;
   private get _viewportWidth();
+  /**
+   * Watch for async content loading from child media elements.
+   * When media finishes loading, increment the epoch to invalidate cached thumbnails.
+   */
+  private _watchChildContentLoading;
   private _setupTargetObserver;
   private _scheduleRender;
   /**
@@ -86,6 +95,7 @@ declare class EFThumbnailStrip extends LitElement {
   private _checkAndDispatchReady;
   /**
    * Calculate thumbnail layout based on current dimensions and time range.
+   * Only recreates slots if layout parameters have actually changed.
    */
   private _calculateLayout;
   /**
@@ -112,6 +122,7 @@ declare class EFThumbnailStrip extends LitElement {
   private _drawThumbnailImage;
   /**
    * Load thumbnails that are visible in the current viewport.
+   * Skips loading if the epoch hasn't changed since last load.
    */
   private _loadVisibleThumbnails;
   /**

package/dist/elements/EFThumbnailStrip.js

@@ -19,13 +19,17 @@ function isEFTimegroup(element) {
 }
 /**
 * Get identifiers for cache key generation.
-* Returns rootId (for cache isolation) and elementId (for element-specific caching).
+* 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: (rootTemporal && isEFTimegroup(rootTemporal) ? rootTemporal : null)?.id || "default",
-		elementId: isEFVideo(element) ? element.src || element.id || "video" : element.id || "timegroup"
+		rootId,
+		elementId: isEFVideo(element) ? element.src || element.id || "video" : element.id || "timegroup",
+		epoch
 	};
 }
 /** Padding in pixels for virtual rendering (render extra thumbnails beyond viewport) */
@@ -58,6 +62,8 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		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;
@@ -96,7 +102,11 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		const oldValue = this._targetElement;
 		this._targetElement = value;
 		this._mutationObserver?.disconnect();
-		if (value !== oldValue) this._hasLoadedThumbnails = false;
+		if (value !== oldValue) {
+			this._hasLoadedThumbnails = false;
+			this._lastLoadedEpoch = null;
+			this._lastLayoutParams = null;
+		}
 		if (value && value !== oldValue) this._setupTargetObserver(value);
 		this.requestUpdate("targetElement", oldValue);
 	}
@@ -222,6 +232,31 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		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());
@@ -243,11 +278,37 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 				});
 			});
 		} else if (isEFTimegroup(target)) {
-			this._mutationObserver = new MutationObserver(() => this._scheduleRender());
+			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
+				subtree: true,
+				attributes: true,
+				attributeFilter: [
+					"src",
+					"asset-id",
+					"style",
+					"transform"
+				]
 			});
+			this._watchChildContentLoading(target);
 			if (target.durationMs === 0) {
 				const checkDuration = () => {
 					if (this._targetElement !== target) return;
@@ -285,19 +346,32 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	}
 	/**
 	* 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 = [];
@@ -355,13 +429,13 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	*/
 	_checkCache() {
 		if (!this._targetElement) return;
-		const { rootId, elementId } = getCacheIdentifiers(this._targetElement);
+		const { rootId, elementId, epoch } = getCacheIdentifiers(this._targetElement);
 		for (const slot of this._thumbnailSlots) {
-			const key = getCacheKey(rootId, elementId, slot.timeMs);
+			const key = getCacheKey(rootId, elementId, slot.timeMs, epoch);
 			if (sessionThumbnailCache.has(key)) {
 				slot.imageData = sessionThumbnailCache.get(key);
 				slot.status = "cached";
-			}
+			} else slot.status = "pending";
 		}
 	}
 	/**
@@ -447,9 +521,16 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	}
 	/**
 	* 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;
@@ -475,6 +556,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		} 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 }));
@@ -486,7 +568,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	*/
 	async _captureTimegroupThumbnails(slots) {
 		const target = this._targetElement;
-		const { rootId, elementId } = getCacheIdentifiers(target);
+		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);
@@ -504,7 +586,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 					if (canvas) {
 						const imageData = this._canvasToImageData(canvas);
 						if (imageData) {
-							const key = getCacheKey(rootId, elementId, slot.timeMs);
+							const key = getCacheKey(rootId, elementId, slot.timeMs, epoch);
 							sessionThumbnailCache.set(key, imageData, slot.timeMs, elementId);
 							slot.imageData = imageData;
 							slot.status = "cached";
@@ -523,7 +605,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	*/
 	async _captureVideoThumbnails(slots) {
 		const target = this._targetElement;
-		const { rootId, elementId } = getCacheIdentifiers(target);
+		const { rootId, elementId, epoch } = getCacheIdentifiers(target);
 		if (target.mediaEngineTask) await target.mediaEngineTask.taskComplete;
 		const mediaEngine = target.mediaEngineTask?.value;
 		if (!mediaEngine) return;
@@ -540,7 +622,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 				if (result?.thumbnail) {
 					const imageData = this._canvasToImageData(result.thumbnail);
 					if (imageData) {
-						const key = getCacheKey(rootId, elementId, slot.timeMs);
+						const key = getCacheKey(rootId, elementId, slot.timeMs, epoch);
 						sessionThumbnailCache.set(key, imageData, slot.timeMs, elementId);
 						slot.imageData = imageData;
 						slot.status = "cached";