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

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;
+    }
+}