@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/elements/EFVideo.d.ts

@@ -1,14 +1,133 @@
 import { Task } from '@lit/task';
+import { PropertyValueMap } from 'lit';
+import { CacheStats, ScrubTrackManager } from '../ScrubTrackManager.js';
 import { EFMedia } from './EFMedia.js';
+declare global {
+    var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
+}
+interface LoadingState {
+    isLoading: boolean;
+    operation: "scrub-segment" | "video-segment" | "seeking" | "decoding" | null;
+    message: string;
+}
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
-    #private;
+    static get observedAttributes(): string[];
     static styles: import('lit').CSSResult[];
-    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
+    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    /**
+     * Duration in milliseconds for video buffering ahead of current time
+     * @domAttribute "video-buffer-duration"
+     */
+    videoBufferDurationMs: number;
+    /**
+     * Maximum number of concurrent video segment fetches for buffering
+     * @domAttribute "max-video-buffer-fetches"
+     */
+    maxVideoBufferFetches: number;
+    /**
+     * Enable/disable video buffering system
+     * @domAttribute "enable-video-buffering"
+     */
+    enableVideoBuffering: boolean;
+    videoSegmentIdTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    videoInitSegmentFetchTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
+    videoSegmentFetchTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    videoInputTask: import('./EFMedia/shared/MediaTaskUtils.ts').InputTask;
+    videoSeekTask: Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
+    videoBufferTask: Task<readonly [number], import('./EFMedia/videoTasks/makeVideoBufferTask.ts').VideoBufferState>;
+    /**
+     * Scrub track manager for fast timeline navigation
+     */
+    scrubTrackManager?: ScrubTrackManager;
+    /**
+     * Delayed loading state manager for user feedback
+     */
+    private delayedLoadingState;
+    /**
+     * Loading state for user feedback
+     */
+    loadingState: {
+        isLoading: boolean;
+        operation: LoadingState["operation"];
+        message: string;
+    };
+    constructor();
     render(): import('lit-html').TemplateResult<1>;
     get canvasElement(): HTMLCanvasElement | undefined;
-    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
-    paintTask: Task<readonly [import('../../../assets/src/EncodedAsset.ts').VideoAsset | undefined, number], number | undefined>;
+    frameTask: Task<readonly [number], void>;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Start a delayed loading operation for testing
+     */
+    startDelayedLoading(operationId: string, message: string, options?: {
+        background?: boolean;
+    }): void;
+    /**
+     * Clear a delayed loading operation for testing
+     */
+    clearDelayedLoading(operationId: string): void;
+    /**
+     * Set loading state for user feedback
+     */
+    private setLoadingState;
+    paintTask: Task<readonly [number], void>;
+    /**
+     * Display a video frame on the canvas
+     */
+    private displayFrame;
+    /**
+     * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
+     */
+    private isInProductionRenderingMode;
+    /**
+     * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
+     */
+    private isFrameRenderingActive;
+    /**
+     * Get scrub track performance statistics
+     */
+    getScrubTrackStats(): CacheStats | null;
+    /**
+     * Effective mode - always returns "asset" for EFVideo
+     */
+    get effectiveMode(): string;
+    /**
+     * Legacy getter for asset index loader (maps to mediaEngine task)
+     */
+    get assetIndexLoader(): Task<readonly [string, string | null], import('../transcoding/types/index.ts').MediaEngine>;
+    /**
+     * Legacy getter for fragment index task (maps to videoSegmentIdTask)
+     */
+    get fragmentIndexTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    /**
+     * Legacy getter for seek task (maps to videoSeekTask)
+     */
+    get seekTask(): Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
+    /**
+     * Legacy getter for media segments task (maps to videoSegmentFetchTask)
+     */
+    get mediaSegmentsTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    /**
+     * Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
+     */
+    get assetSegmentKeysTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    /**
+     * Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
+     */
+    get assetInitSegmentsTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
+    /**
+     * Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
+     */
+    get assetSegmentLoader(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    /**
+     * Legacy getter for video asset task (maps to videoBufferTask)
+     */
+    get videoAssetTask(): Task<readonly [number], import('./EFMedia/videoTasks/makeVideoBufferTask.ts').VideoBufferState>;
+    /**
+     * Clean up resources when component is disconnected
+     */
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/elements/EFVideo.js

@@ -1,112 +1,34 @@
+import { EFMedia } from "./EFMedia.js";
+import { TWMixin } from "../gui/TWMixin2.js";
+import { DelayedLoadingState } from "../DelayedLoadingState.js";
+import { makeVideoBufferTask } from "./EFMedia/videoTasks/makeVideoBufferTask.js";
+import { makeVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoInitSegmentFetchTask.js";
+import { makeVideoInputTask } from "./EFMedia/videoTasks/makeVideoInputTask.js";
+import { makeVideoSeekTask } from "./EFMedia/videoTasks/makeVideoSeekTask.js";
+import { makeVideoSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoSegmentFetchTask.js";
+import { makeVideoSegmentIdTask } from "./EFMedia/videoTasks/makeVideoSegmentIdTask.js";
 import { Task } from "@lit/task";
+import debug from "debug";
 import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
-import { TWMixin } from "../gui/TWMixin.js";
-import { EFMedia } from "./EFMedia.js";
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(result) || result;
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _decoderLock;
-let EFVideo = class extends TWMixin(EFMedia) {
-  constructor() {
-    super(...arguments);
-    this.canvasRef = createRef();
-    __privateAdd(this, _decoderLock, false);
-    this.frameTask = new Task(this, {
-      args: () => [
-        this.trackFragmentIndexLoader.status,
-        this.initSegmentsLoader.status,
-        this.seekTask.status,
-        this.fetchSeekTask.status,
-        this.videoAssetTask.status,
-        this.paintTask.status
-      ],
-      task: async () => {
-        await this.trackFragmentIndexLoader.taskComplete;
-        await this.initSegmentsLoader.taskComplete;
-        await this.seekTask.taskComplete;
-        await this.fetchSeekTask.taskComplete;
-        await this.videoAssetTask.taskComplete;
-        await this.paintTask.taskComplete;
-      }
-    });
-    this.paintTask = new Task(this, {
-      args: () => [this.videoAssetTask.value, this.desiredSeekTimeMs],
-      task: async ([videoAsset, seekToMs], {
-        signal: _signal
-      }) => {
-        if (!videoAsset) {
-          return;
-        }
-        if (__privateGet(this, _decoderLock)) {
-          return;
-        }
-        try {
-          __privateSet(this, _decoderLock, true);
-          const frame = await videoAsset.seekToTime(seekToMs / 1e3);
-          if (!this.canvasElement) {
-            return;
-          }
-          const ctx = this.canvasElement.getContext("2d");
-          if (!(frame && ctx)) {
-            return;
-          }
-          if (frame?.codedWidth && frame?.codedHeight) {
-            if (this.canvasElement.width !== frame.codedWidth || this.canvasElement.height !== frame.codedHeight) {
-              this.canvasElement.width = frame.codedWidth;
-              this.canvasElement.height = frame.codedHeight;
-            }
-          }
-          if (frame.format === null) {
-            console.warn("Frame format is null", frame);
-            return seekToMs;
-          }
-          ctx.drawImage(
-            frame,
-            0,
-            0,
-            this.canvasElement.width,
-            this.canvasElement.height
-          );
-          return seekToMs;
-        } catch (error) {
-          console.trace("Unexpected error while seeking video", error);
-        } finally {
-          __privateSet(this, _decoderLock, false);
-        }
-      }
-    });
-  }
-  render() {
-    return html`
-      <canvas ${ref(this.canvasRef)}></canvas>
-    `;
-  }
-  get canvasElement() {
-    return this.canvasRef.value;
-  }
-};
-_decoderLock = /* @__PURE__ */ new WeakMap();
-EFVideo.styles = [
-  /**
-   *
-   */
-  css`
+const log = debug("ef:elements:EFVideo");
+let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
+	static get observedAttributes() {
+		const parentAttributes = EFMedia.observedAttributes || [];
+		return [
+			...parentAttributes,
+			"video-buffer-duration",
+			"max-video-buffer-fetches",
+			"enable-video-buffering"
+		];
+	}
+	static {
+		this.styles = [css`
       :host {
         display: block;
+        position: relative;
       }
       canvas {
         all: inherit;
@@ -121,11 +43,286 @@ EFVideo.styles = [
         outline: none;
         box-shadow: none;
       }
-    `
-];
-EFVideo = __decorateClass([
-  customElement("ef-video")
-], EFVideo);
-export {
-  EFVideo
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+        backdrop-filter: blur(2px);
+      }
+      .loading-content {
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 8px;
+        padding: 16px 24px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: white;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .loading-spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        border-left: 2px solid #fff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .loading-message {
+        font-size: 12px;
+        opacity: 0.8;
+      }
+    `];
+	}
+	constructor() {
+		super();
+		this.canvasRef = createRef();
+		this.videoBufferDurationMs = 6e4;
+		this.maxVideoBufferFetches = 2;
+		this.enableVideoBuffering = true;
+		this.videoSegmentIdTask = makeVideoSegmentIdTask(this);
+		this.videoInitSegmentFetchTask = makeVideoInitSegmentFetchTask(this);
+		this.videoSegmentFetchTask = makeVideoSegmentFetchTask(this);
+		this.videoInputTask = makeVideoInputTask(this);
+		this.videoSeekTask = makeVideoSeekTask(this);
+		this.videoBufferTask = makeVideoBufferTask(this);
+		this.loadingState = {
+			isLoading: false,
+			operation: null,
+			message: ""
+		};
+		this.frameTask = new Task(this, {
+			args: () => [this.desiredSeekTimeMs],
+			onError: (error) => {
+				console.error("frameTask error", error);
+			},
+			onComplete: () => {},
+			task: async ([_desiredSeekTimeMs], { signal }) => {
+				await this.videoSeekTask.taskComplete;
+				await this.paintTask.taskComplete;
+				if (signal.aborted) return;
+			}
+		});
+		this.paintTask = new Task(this, {
+			args: () => [this.desiredSeekTimeMs],
+			onError: (error) => {
+				console.error("paintTask error", error);
+			},
+			onComplete: () => {},
+			task: async ([_seekToMs], { signal }) => {
+				await this.videoSeekTask.taskComplete;
+				const isProductionRendering = this.isInProductionRenderingMode();
+				const sample = this.videoSeekTask.value;
+				if (sample) {
+					const videoFrame = sample.toVideoFrame();
+					this.displayFrame(videoFrame, _seekToMs);
+					videoFrame.close();
+				}
+				if (!isProductionRendering) {
+					if (!this.rootTimegroup || this.rootTimegroup.currentTimeMs === 0 && this.desiredSeekTimeMs === 0) return;
+				} else {
+					if (!this.rootTimegroup) return;
+					if (!this.isFrameRenderingActive()) return;
+				}
+				if (signal.aborted) return;
+			}
+		});
+		this.delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
+			this.setLoadingState(isLoading, null, message);
+		});
+	}
+	render() {
+		return html`
+      <canvas ${ref(this.canvasRef)}></canvas>
+      ${this.loadingState.isLoading ? html`
+        <div class="loading-overlay">
+          <div class="loading-content">
+            <div class="loading-spinner"></div>
+            <div>
+              <div>Loading Video...</div>
+              <div class="loading-message">${this.loadingState.message}</div>
+            </div>
+          </div>
+        </div>
+      ` : ""}
+    `;
+	}
+	get canvasElement() {
+		return this.canvasRef.value;
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+	}
+	/**
+	* Start a delayed loading operation for testing
+	*/
+	startDelayedLoading(operationId, message, options = {}) {
+		this.delayedLoadingState.startLoading(operationId, message, options);
+	}
+	/**
+	* Clear a delayed loading operation for testing
+	*/
+	clearDelayedLoading(operationId) {
+		this.delayedLoadingState.clearLoading(operationId);
+	}
+	/**
+	* Set loading state for user feedback
+	*/
+	setLoadingState(isLoading, operation = null, message = "") {
+		this.loadingState = {
+			isLoading,
+			operation,
+			message
+		};
+	}
+	/**
+	* Display a video frame on the canvas
+	*/
+	displayFrame(frame, seekToMs) {
+		log("trace: displayFrame start", {
+			seekToMs,
+			frameFormat: frame.format
+		});
+		if (!this.canvasElement) {
+			log("trace: displayFrame aborted - no canvas element");
+			throw new Error(`Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`);
+		}
+		const ctx = this.canvasElement.getContext("2d");
+		if (!ctx) {
+			log("trace: displayFrame aborted - no canvas context");
+			throw new Error(`Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`);
+		}
+		if (frame?.codedWidth && frame?.codedHeight) {
+			if (this.canvasElement.width !== frame.codedWidth || this.canvasElement.height !== frame.codedHeight) {
+				log("trace: updating canvas dimensions", {
+					width: frame.codedWidth,
+					height: frame.codedHeight
+				});
+				this.canvasElement.width = frame.codedWidth;
+				this.canvasElement.height = frame.codedHeight;
+			}
+		}
+		if (frame.format === null) {
+			log("trace: displayFrame aborted - null frame format");
+			throw new Error(`Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`);
+		}
+		log("trace: drawing frame to canvas", frame.timestamp / 1e3);
+		ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);
+		log("trace: frame drawn to canvas", { seekToMs });
+		return seekToMs;
+	}
+	/**
+	* Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
+	*/
+	isInProductionRenderingMode() {
+		if (typeof window.EF_RENDERING === "function") return window.EF_RENDERING();
+		const workbench = document.querySelector("ef-workbench");
+		if (workbench?.rendering) return true;
+		if (window.EF_FRAMEGEN?.renderOptions) return true;
+		return false;
+	}
+	/**
+	* Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
+	*/
+	isFrameRenderingActive() {
+		if (!window.EF_FRAMEGEN?.renderOptions) return false;
+		const renderOptions = window.EF_FRAMEGEN.renderOptions;
+		const renderStartTime = renderOptions.encoderOptions.fromMs;
+		const currentTime = this.rootTimegroup?.currentTimeMs || 0;
+		return currentTime >= renderStartTime;
+	}
+	/**
+	* Get scrub track performance statistics
+	*/
+	getScrubTrackStats() {
+		return this.scrubTrackManager?.getCacheStats() || null;
+	}
+	/**
+	* Effective mode - always returns "asset" for EFVideo
+	*/
+	get effectiveMode() {
+		return "asset";
+	}
+	/**
+	* Legacy getter for asset index loader (maps to mediaEngine task)
+	*/
+	get assetIndexLoader() {
+		return this.mediaEngineTask;
+	}
+	/**
+	* Legacy getter for fragment index task (maps to videoSegmentIdTask)
+	*/
+	get fragmentIndexTask() {
+		return this.videoSegmentIdTask;
+	}
+	/**
+	* Legacy getter for seek task (maps to videoSeekTask)
+	*/
+	get seekTask() {
+		return this.videoSeekTask;
+	}
+	/**
+	* Legacy getter for media segments task (maps to videoSegmentFetchTask)
+	*/
+	get mediaSegmentsTask() {
+		return this.videoSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
+	*/
+	get assetSegmentKeysTask() {
+		return this.videoSegmentIdTask;
+	}
+	/**
+	* Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
+	*/
+	get assetInitSegmentsTask() {
+		return this.videoInitSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
+	*/
+	get assetSegmentLoader() {
+		return this.videoSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for video asset task (maps to videoBufferTask)
+	*/
+	get videoAssetTask() {
+		return this.videoBufferTask;
+	}
+	/**
+	* Clean up resources when component is disconnected
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.scrubTrackManager?.cleanup();
+		this.delayedLoadingState.clearAllLoading();
+	}
 };
+_decorate([property({
+	type: Number,
+	attribute: "video-buffer-duration"
+})], EFVideo.prototype, "videoBufferDurationMs", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "max-video-buffer-fetches"
+})], EFVideo.prototype, "maxVideoBufferFetches", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "enable-video-buffering"
+})], EFVideo.prototype, "enableVideoBuffering", void 0);
+_decorate([state()], EFVideo.prototype, "loadingState", void 0);
+EFVideo = _decorate([customElement("ef-video")], EFVideo);
+export { EFVideo };