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

package/dist/elements/EFImage.js

@@ -1,87 +1,45 @@
-import { Task } from "@lit/task";
-import { LitElement, html, css } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
-var __defProp = Object.defineProperty;
-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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, 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"), getter ? getter.call(obj) : 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 _assetId;
-let EFImage = class extends EFTemporal(
-  EFSourceMixin(FetchMixin(LitElement), {
-    assetType: "image_files"
-  })
-) {
-  constructor() {
-    super(...arguments);
-    this.imageRef = createRef();
-    this.canvasRef = createRef();
-    __privateAdd(this, _assetId, null);
-    this.fetchImage = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.assetPath(), this.fetch],
-      task: async ([assetPath, fetch], { signal }) => {
-        const response = await fetch(assetPath, { signal });
-        const image = new Image();
-        image.src = URL.createObjectURL(await response.blob());
-        await new Promise((resolve) => {
-          image.onload = resolve;
-        });
-        if (!this.canvasRef.value) throw new Error("Canvas not ready");
-        const ctx = this.canvasRef.value.getContext("2d");
-        if (!ctx) throw new Error("Canvas 2d context not ready");
-        this.canvasRef.value.width = image.width;
-        this.canvasRef.value.height = image.height;
-        ctx.drawImage(image, 0, 0);
-      }
-    });
-    this.frameTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.fetchImage.status],
-      task: async () => {
-        await this.fetchImage.taskComplete;
-      }
-    });
-  }
-  set assetId(value) {
-    __privateSet(this, _assetId, value);
-  }
-  get assetId() {
-    return __privateGet(this, _assetId) ?? this.getAttribute("asset-id");
-  }
-  render() {
-    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
-  }
-  assetPath() {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/image_files/${this.assetId}`;
-    }
-    return `/@ef-image/${this.src}`;
-  }
-  get hasOwnDuration() {
-    return this.hasExplicitDuration;
-  }
-};
-_assetId = /* @__PURE__ */ new WeakMap();
-EFImage.styles = [
-  css`
+import { Task } from "@lit/task";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { createRef, ref } from "lit/directives/ref.js";
+let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitElement), { assetType: "image_files" })) {
+	constructor(..._args) {
+		super(..._args);
+		this.imageRef = createRef();
+		this.canvasRef = createRef();
+		this.fetchImage = new Task(this, {
+			autoRun: EF_INTERACTIVE,
+			args: () => [this.assetPath(), this.fetch],
+			task: async ([assetPath, fetch], { signal }) => {
+				const response = await fetch(assetPath, { signal });
+				const image = new Image();
+				image.src = URL.createObjectURL(await response.blob());
+				await new Promise((resolve) => {
+					image.onload = resolve;
+				});
+				if (!this.canvasRef.value) throw new Error("Canvas not ready");
+				const ctx = this.canvasRef.value.getContext("2d");
+				if (!ctx) throw new Error("Canvas 2d context not ready");
+				this.canvasRef.value.width = image.width;
+				this.canvasRef.value.height = image.height;
+				ctx.drawImage(image, 0, 0);
+			}
+		});
+		this.frameTask = new Task(this, {
+			autoRun: EF_INTERACTIVE,
+			args: () => [this.fetchImage.status],
+			task: async () => {
+				await this.fetchImage.taskComplete;
+			}
+		});
+	}
+	static {
+		this.styles = [css`
       :host {
         display: block;
         display: flex;
@@ -91,14 +49,30 @@ EFImage.styles = [
       canvas {
         all: inherit;
       }
-    `
-];
-__decorateClass([
-  property({ type: String, attribute: "asset-id", reflect: true })
-], EFImage.prototype, "assetId", 1);
-EFImage = __decorateClass([
-  customElement("ef-image")
-], EFImage);
-export {
-  EFImage
+    `];
+	}
+	#assetId = null;
+	set assetId(value) {
+		this.#assetId = value;
+	}
+	get assetId() {
+		return this.#assetId ?? this.getAttribute("asset-id");
+	}
+	render() {
+		return html`<canvas ${ref(this.canvasRef)}></canvas>`;
+	}
+	assetPath() {
+		if (this.assetId) return `${this.apiHost}/api/v1/image_files/${this.assetId}`;
+		return `/@ef-image/${this.src}`;
+	}
+	get hasOwnDuration() {
+		return this.hasExplicitDuration;
+	}
 };
+_decorate([property({
+	type: String,
+	attribute: "asset-id",
+	reflect: true
+})], EFImage.prototype, "assetId", null);
+EFImage = _decorate([customElement("ef-image")], EFImage);
+export { EFImage };

package/dist/elements/EFMedia.d.ts

@@ -1,15 +1,58 @@
-import { Task } from '@lit/task';
-import { LitElement, PropertyValueMap } from 'lit';
 import { TrackFragmentIndex, TrackSegment } from '../../../assets/src/index.ts';
 import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
 import { MP4File } from '../../../assets/src/MP4File.ts';
+import { Task } from '@lit/task';
+import { LitElement, PropertyValueMap } from 'lit';
+import { JitTranscodingClient } from '../JitTranscodingClient.js';
 import type * as MP4Box from "mp4box";
+declare global {
+    var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
+}
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
 declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFMedia extends EFMedia_base {
     #private;
     static styles: import('lit').CSSResult[];
     currentTimeMs: number;
+    /**
+     * Media loading mode - determines how content is loaded and processed
+     * - "asset": Use existing asset-based loading (assetId or fragment-based URLs)
+     * - "jit-transcode": Use JIT transcoding for remote URLs
+     * - "auto": Automatically detect based on URL patterns (default)
+     */
+    private _mode;
+    /**
+     * Get the mode, prioritizing attribute values over property values
+     */
+    get mode(): "asset" | "jit-transcode" | "auto";
+    set mode(value: "asset" | "jit-transcode" | "auto");
+    connectedCallback(): void;
+    /**
+     * Configuration for JIT transcoding performance optimizations
+     */
+    prefetchSegments: number;
+    cacheSize: number;
+    enablePrefetch: boolean;
+    /**
+     * Loading states for JIT transcoding
+     */
+    jitLoadingState: "idle" | "metadata" | "segments" | "error";
+    jitErrorMessage: string | null;
+    jitCacheStats: {
+        size: number;
+        hitRate: number;
+        efficiency: number;
+    } | null;
+    /**
+     * Detected loading mode based on URL patterns and manual override
+     */
+    get effectiveMode(): "asset" | "jit-transcode";
+    jitClientTask: Task<readonly [string | undefined, number, boolean, number], JitTranscodingClient>;
+    /**
+     * JIT transcoding metadata loader
+     * Loads video metadata for JIT transcoded content
+     */
+    jitMetadataLoader: Task<readonly [string, JitTranscodingClient | undefined], import('../JitTranscodingClient.js').VideoMetadata | null>;
     /**
      * The unique identifier for the media asset.
      * This property can be set programmatically or via the "asset-id" attribute.
@@ -19,43 +62,15 @@ export declare class EFMedia extends EFMedia_base {
     get assetId(): string | null;
     fragmentIndexPath(): string;
     fragmentTrackPath(trackId: string): string;
-    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex> | undefined>;
-    initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
-        trackId: string;
-        buffer: MP4Box.MP4ArrayBuffer;
-        mp4File: MP4File;
-    }[] | undefined>;
+    get mediaDurationTask(): Task<readonly [Record<number, TrackFragmentIndex> | null | undefined, import('../JitTranscodingClient.js').VideoMetadata | null | undefined], Record<number, TrackFragmentIndex> | null>;
     get defaultVideoTrackId(): number | undefined;
     get defaultAudioTrackId(): number | undefined;
-    seekTask: Task<readonly [number, Record<number, TrackFragmentIndex> | undefined, {
-        trackId: string;
-        buffer: MP4Box.MP4ArrayBuffer;
-        mp4File: MP4File;
-    }[] | undefined], Record<string, {
-        segment: TrackSegment;
-        track: MP4Box.TrackInfo;
-        nextSegment?: TrackSegment;
-    }> | undefined>;
-    fetchSeekTask: Task<readonly [{
-        trackId: string;
-        buffer: MP4Box.MP4ArrayBuffer;
-        mp4File: MP4File;
-    }[] | undefined, Record<string, {
-        segment: TrackSegment;
-        track: MP4Box.TrackInfo;
-        nextSegment?: TrackSegment;
-    }> | undefined, typeof fetch], Record<string, File> | undefined>;
-    videoAssetTask: Task<readonly [Record<string, File> | undefined], VideoAsset | undefined>;
-    desiredSeekTimeMs: number;
-    protected executeSeek(seekToMs: number): Promise<void>;
-    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    get hasOwnDuration(): boolean;
     get intrinsicDurationMs(): number;
-    audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
+    audioBufferTask: Task<readonly [Record<string, File> | null | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
         nextSegment?: TrackSegment;
-    }> | undefined], {
+    }> | null | undefined], {
         buffer: AudioBuffer;
         startOffsetMs: number;
     } | undefined>;
@@ -64,6 +79,10 @@ export declare class EFMedia extends EFMedia_base {
         startMs: number;
         endMs: number;
     } | undefined>;
+    /**
+     * Encode an AudioBuffer to a WAV blob
+     */
+    private encodeWAVBuffer;
     set fftSize(value: number);
     set fftDecay(value: number);
     get fftSize(): number;
@@ -77,5 +96,51 @@ export declare class EFMedia extends EFMedia_base {
     frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
     set fftGain(value: number);
     get fftGain(): number;
+    private synthesizeFragmentIndex;
+    private calculateAssetSegmentKeys;
+    private calculateJitSegmentKeys;
+    private calculateAssetSeekResult;
+    private calculateJitSeekResult;
+    private createTrackInfo;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    get hasOwnDuration(): boolean;
+    videoAssetTask: Task<readonly ["asset" | "jit-transcode", Record<string, File> | null | undefined], VideoAsset | undefined>;
+    private _desiredSeekTimeMs;
+    get desiredSeekTimeMs(): number;
+    set desiredSeekTimeMs(value: number);
+    protected executeSeek(seekToMs: number): Promise<void>;
+    assetIndexLoader: Task<readonly [string | null, typeof fetch], Record<number, TrackFragmentIndex> | null>;
+    assetSegmentKeysTask: Task<readonly [Record<number, TrackFragmentIndex> | null | undefined, number], Record<string, {
+        startTimeMs: number;
+        trackId: string;
+    }> | null>;
+    assetInitSegmentsTask: Task<readonly [Record<number, TrackFragmentIndex> | null | undefined, typeof fetch], {
+        trackId: string;
+        buffer: MP4Box.MP4ArrayBuffer;
+        mp4File: MP4File;
+    }[] | null>;
+    assetSegmentLoader: Task<readonly [Record<number, TrackFragmentIndex> | null | undefined, Record<string, {
+        startTimeMs: number;
+        trackId: string;
+    }> | null | undefined, {
+        trackId: string;
+        buffer: MP4Box.MP4ArrayBuffer;
+        mp4File: MP4File;
+    }[] | null | undefined, typeof fetch], Record<string, File> | null>;
+    jitSegmentKeysTask: Task<readonly [import('../JitTranscodingClient.js').VideoMetadata | null | undefined, number], Record<string, {
+        startTimeMs: number;
+        trackId: string;
+    }> | null>;
+    jitSegmentLoader: Task<readonly [string, Record<string, {
+        startTimeMs: number;
+        trackId: string;
+    }> | null | undefined, import('../JitTranscodingClient.js').VideoMetadata | null | undefined], Record<string, File> | null>;
+    fragmentIndexTask: Task<readonly [Record<number, TrackFragmentIndex> | null | undefined, import('../JitTranscodingClient.js').VideoMetadata | null | undefined], Record<number, TrackFragmentIndex> | null>;
+    mediaSegmentsTask: Task<readonly [Record<string, File> | null | undefined, Record<string, File> | null | undefined], Record<string, File> | null>;
+    seekTask: Task<readonly [Record<number, TrackFragmentIndex> | null | undefined, Record<string, File> | null | undefined, number], Record<string, {
+        segment: TrackSegment;
+        track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
+    }> | null>;
 }
 export {};