@editframe/elements 0.16.7-beta.0 → 0.17.6-beta.0

package/dist/elements/EFVideo.d.ts

@@ -1,14 +1,102 @@
+import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
 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 styles: import('lit').CSSResult[];
     canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
+    /**
+     * Scrub track manager for fast timeline navigation
+     */
+    scrubTrackManager?: ScrubTrackManager;
+    /**
+     * Track last seek time for fast seeking detection
+     */
+    private lastSeekTimeMs;
+    /**
+     * 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>;
+    get frameTaskStatus(): {
+        desiredSeekTimeMs: number;
+        fragmentIndexTask: string;
+        seekTask: string;
+        mediaSegmentsTask: string;
+        assetSegmentLoader: string;
+        assetSegmentKeysTask: string;
+        assetInitSegmentsTask: string;
+        videoAssetTask: string;
+        paintTask: string;
+        frameTask: string;
+    };
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Initialize scrub track manager if needed
+     */
+    private initializeScrubTrackManager;
+    /**
+     * 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;
+    videoAssetTask: Task<readonly ["asset" | "jit-transcode", Record<string, File> | null | undefined], VideoAsset | undefined>;
+    paintTask: Task<readonly [number], number | undefined>;
+    /**
+     * Render normal video using existing logic
+     */
+    private renderNormalVideo;
+    /**
+     * 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;
+    /**
+     * Clean up resources when component is disconnected
+     */
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/elements/EFVideo.js

@@ -1,112 +1,22 @@
+import { EFMedia } from "./EFMedia.js";
+import { DelayedLoadingState } from "../DelayedLoadingState.js";
+import { TWMixin } from "../gui/TWMixin2.js";
+import { ScrubTrackManager } from "../ScrubTrackManager.js";
+import { printTaskStatus } from "./printTaskStatus.js";
 import { Task } from "@lit/task";
+import debug from "debug";
 import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
 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 {
+		this.styles = [css`
       :host {
         display: block;
+        position: relative;
       }
       canvas {
         all: inherit;
@@ -121,11 +31,398 @@ 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.lastSeekTimeMs = 0;
+		this.loadingState = {
+			isLoading: false,
+			operation: null,
+			message: ""
+		};
+		this.frameTask = new Task(this, {
+			args: () => [this.desiredSeekTimeMs],
+			onError: (error) => {
+				console.error("frameTask error", error);
+			},
+			task: async ([_desiredSeekTimeMs], { signal }) => {
+				await this.seekTask.taskComplete;
+				if (signal.aborted) return;
+				await this.fragmentIndexTask.taskComplete;
+				if (signal.aborted) return;
+				await this.mediaSegmentsTask.taskComplete;
+				if (signal.aborted) return;
+				await this.videoAssetTask.taskComplete;
+				if (signal.aborted) return;
+				await this.paintTask.taskComplete;
+				if (signal.aborted) return;
+			}
+		});
+		this.videoAssetTask = new Task(this, {
+			autoRun: true,
+			args: () => [this.effectiveMode, this.mediaSegmentsTask.value],
+			onError: (error) => {
+				console.error("videoAsset task error", error);
+			},
+			task: async ([mode, _files], { signal: _signal }) => {
+				await this.mediaSegmentsTask.taskComplete;
+				if (_signal.aborted) return void 0;
+				await this.fragmentIndexTask.taskComplete;
+				if (_signal.aborted) return void 0;
+				const files = this.mediaSegmentsTask.value;
+				const fragmentIndex = this.fragmentIndexTask.value;
+				if (!files) {
+					log("trace: videoAsset task aborted - no files");
+					throw new Error(`Video asset creation failed: No media segment files available. This indicates a problem with media segment loading for source: "${this.src}"`);
+				}
+				const computedVideoTrackId = Object.values(fragmentIndex ?? {}).find((track) => track.type === "video")?.track;
+				if (computedVideoTrackId === void 0) {
+					log("trace: videoAsset task aborted - no video track");
+					throw new Error(`Video asset creation failed: No video track found in media segments. Source may not contain video content: "${this.src}"`);
+				}
+				const videoFile = files[computedVideoTrackId];
+				if (!videoFile) {
+					log("trace: videoAsset task aborted - no video file");
+					throw new Error(`Video asset creation failed: Video file not available for track ${computedVideoTrackId}. Media segment loading may have failed for source: "${this.src}"`);
+				}
+				const existingAsset = this.videoAssetTask.value;
+				if (existingAsset) {
+					for (const frame of existingAsset?.decodedFrames || []) frame.close();
+					const decoder = existingAsset?.videoDecoder;
+					if (decoder && decoder.state !== "closed") decoder.close();
+				}
+				if (_signal.aborted) return void 0;
+				log("trace: creating video asset", { mode });
+				const videoTrackFragmentIndex = Object.values(fragmentIndex ?? {}).find((track) => track.type === "video");
+				const startTimeOffsetMs = Number((videoTrackFragmentIndex?.startTimeOffsetMs ?? 0).toFixed(5));
+				if (mode === "jit-transcode") {
+					const result$1 = await VideoAsset.createFromCompleteMP4(`jit-segment-${computedVideoTrackId}`, videoFile, { startTimeOffsetMs });
+					return result$1;
+				}
+				const result = await VideoAsset.createFromReadableStream("video.mp4", videoFile.stream(), videoFile, { startTimeOffsetMs });
+				return result;
+			}
+		});
+		this.paintTask = new Task(this, {
+			args: () => [this.desiredSeekTimeMs],
+			onError: (error) => {
+				console.error("paintTask error", error);
+			},
+			task: async ([_seekToMs], { signal }) => {
+				const isProductionRendering = this.isInProductionRenderingMode();
+				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;
+				await this.mediaSegmentsTask.taskComplete;
+				if (signal.aborted) return;
+				await this.videoAssetTask.taskComplete;
+				if (signal.aborted) return;
+				const videoAsset = this.videoAssetTask.value;
+				const currentSeekToMs = this.desiredSeekTimeMs;
+				if (!videoAsset) {
+					log("trace: paintTask aborted - no video asset");
+					throw new Error(`Frame rendering failed: No video asset available. This may indicate a problem with video loading or an invalid source: "${this.src}"`);
+				}
+				if (this.#decoderNeedsReset) try {
+					if (videoAsset?.videoDecoder) videoAsset.configureDecoder();
+					else console.warn("No video decoder available for reset");
+					this.#decoderNeedsReset = false;
+				} catch (resetError) {
+					console.error("reset error", resetError);
+					throw new Error(`Frame rendering failed: Unable to reset video decoder after previous error. Decoder state: ${resetError instanceof Error ? resetError.message : "Unknown error"}. Try refreshing the page or reloading the video.`);
+				}
+				if (signal.aborted) return;
+				if (this.#decoderLock) return;
+				try {
+					this.#decoderLock = true;
+					const currentVideoAsset = this.videoAssetTask.value;
+					if (videoAsset !== currentVideoAsset) return;
+					const decoderState = videoAsset?.videoDecoder?.state;
+					if (decoderState === "closed") return;
+					if (this.effectiveMode === "jit-transcode" && this.scrubTrackManager) {
+						const shouldUseScrub = this.scrubTrackManager.shouldUseScrubTrack(currentSeekToMs);
+						const isFastSeeking = this.scrubTrackManager.isFastSeeking(this.lastSeekTimeMs, currentSeekToMs);
+						if (shouldUseScrub || isFastSeeking) try {
+							this.startDelayedLoading("scrub-segment-load", "Loading scrub segment...");
+							const scrubFrame = await this.scrubTrackManager.getScrubFrame(currentSeekToMs);
+							if (scrubFrame && this.canvasElement) {
+								this.scrubTrackManager.recordCacheMiss();
+								this.lastSeekTimeMs = currentSeekToMs;
+								this.clearDelayedLoading("scrub-segment-load");
+								return this.displayFrame(scrubFrame, currentSeekToMs);
+							}
+							console.warn("Scrub track returned null frame, falling back to normal video");
+							this.clearDelayedLoading("scrub-segment-load");
+							this.startDelayedLoading("video-segment-fallback", "Loading high quality video...");
+						} catch (error) {
+							this.clearDelayedLoading("scrub-segment-load");
+							console.warn("Scrub track failed, falling back to normal video:", error);
+							this.startDelayedLoading("video-segment-fallback", "Loading high quality video...");
+						}
+						else this.scrubTrackManager?.recordCacheHit();
+					}
+					const shouldShowLoading = !this.delayedLoadingState.isLoading && (this.effectiveMode !== "asset" || !videoAsset);
+					if (shouldShowLoading) this.startDelayedLoading("video-segment", "Loading video segment...");
+					this.lastSeekTimeMs = currentSeekToMs;
+					const result = await this.renderNormalVideo(videoAsset, currentSeekToMs);
+					this.clearDelayedLoading("video-segment");
+					this.clearDelayedLoading("video-segment-fallback");
+					return result;
+				} catch (error) {
+					this.clearDelayedLoading("scrub-segment-load");
+					this.clearDelayedLoading("video-segment");
+					this.clearDelayedLoading("video-segment-fallback");
+					if (error instanceof Error) {
+						if (error.name === "DataError" && error.message.includes("key frame is required")) {
+							console.warn("Decoder reset during VideoAsset due to key frame requirement");
+							this.#decoderNeedsReset = true;
+							if (this.effectiveMode === "jit-transcode") this.requestUpdate();
+							throw error;
+						}
+						if (error.name === "AbortError") throw new Error("Frame rendering cancelled: Operation was aborted, likely due to a new seek request or component unmounting.");
+						if (error.message.includes("VideoAsset decoder closed") || error.message.includes("recreation in progress")) return;
+						if (error.name === "InvalidStateError" && error.message.includes("closed codec")) return;
+						console.warn("Decoder reset during VideoAsset recreation", error);
+						this.#decoderNeedsReset = true;
+						throw error;
+					}
+					throw new Error(`Frame rendering failed: Unknown error during video rendering at ${currentSeekToMs}ms. Error: ${String(error)}`);
+				} finally {
+					this.#decoderLock = false;
+				}
+			}
+		});
+		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;
+	}
+	#decoderLock = false;
+	#decoderNeedsReset = false;
+	get frameTaskStatus() {
+		return {
+			desiredSeekTimeMs: this.desiredSeekTimeMs,
+			fragmentIndexTask: printTaskStatus(this.fragmentIndexTask.status),
+			seekTask: printTaskStatus(this.seekTask.status),
+			mediaSegmentsTask: printTaskStatus(this.mediaSegmentsTask.status),
+			assetSegmentLoader: printTaskStatus(this.assetSegmentLoader.status),
+			assetSegmentKeysTask: printTaskStatus(this.assetSegmentKeysTask.status),
+			assetInitSegmentsTask: printTaskStatus(this.assetInitSegmentsTask.status),
+			videoAssetTask: printTaskStatus(this.videoAssetTask.status),
+			paintTask: printTaskStatus(this.paintTask.status),
+			frameTask: printTaskStatus(this.frameTask.status)
+		};
+	}
+	#lastVideoAsset = null;
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		const currentVideoAsset = this.videoAssetTask.value;
+		if (currentVideoAsset !== this.#lastVideoAsset) this.#lastVideoAsset = currentVideoAsset;
+		this.initializeScrubTrackManager();
+	}
+	/**
+	* Initialize scrub track manager if needed
+	*/
+	async initializeScrubTrackManager() {
+		const mode = this.effectiveMode;
+		if (mode === "jit-transcode" && this.src && !this.scrubTrackManager) {
+			const jitClient = this.jitClientTask.value;
+			if (jitClient) try {
+				this.scrubTrackManager = new ScrubTrackManager(this.src, jitClient, { onLoadingStateChange: (isLoading, message) => {
+					if (isLoading) this.startDelayedLoading("scrub-segment", message || "Loading scrub track...");
+					else this.clearDelayedLoading("scrub-segment");
+				} });
+				await this.scrubTrackManager.initialize();
+			} catch (error) {
+				console.warn("Failed to initialize scrub track manager:", error);
+			}
+		}
+	}
+	/**
+	* 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
+		};
+	}
+	/**
+	* Render normal video using existing logic
+	*/
+	async renderNormalVideo(videoAsset, seekToMs) {
+		let targetSeekTimeSeconds = seekToMs / 1e3;
+		try {
+			const currentVideoAsset = this.videoAssetTask.value;
+			if (videoAsset !== currentVideoAsset) throw new Error("VideoAsset decoder closed during seek - recreation in progress");
+			const decoderState = videoAsset?.videoDecoder?.state;
+			if (decoderState === "closed") throw new Error("VideoAsset decoder closed during seek - recreation in progress");
+			if (this.effectiveMode === "jit-transcode") targetSeekTimeSeconds %= 2;
+			const frame = await videoAsset.seekToTime(targetSeekTimeSeconds);
+			if (frame) {
+				const finalVideoAsset = this.videoAssetTask.value;
+				if (videoAsset !== finalVideoAsset) {
+					frame.close();
+					throw new Error("VideoAsset decoder closed during seek - recreation in progress");
+				}
+				const finalSeekToMs = this.desiredSeekTimeMs;
+				return this.displayFrame(frame, finalSeekToMs);
+			}
+			log("trace: no frame returned from seekToTime");
+			throw new Error(`Frame rendering failed: No frame available at time ${seekToMs}ms (${targetSeekTimeSeconds}s). This may indicate seeking beyond video duration, corrupted video data, or an incompatible video format.`);
+		} catch (error) {
+			if (error instanceof Error && (error.message.includes("VideoAsset decoder closed") || error.message.includes("recreation in progress"))) throw error;
+			throw error;
+		}
+	}
+	/**
+	* 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");
+		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;
+	}
+	/**
+	* Clean up resources when component is disconnected
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.scrubTrackManager?.cleanup();
+		this.delayedLoadingState.clearAllLoading();
+	}
 };
+_decorate([state()], EFVideo.prototype, "loadingState", void 0);
+EFVideo = _decorate([customElement("ef-video")], EFVideo);
+export { EFVideo };