@editframe/elements 0.20.3-beta.0 → 0.21.0-beta.0

package/dist/elements/EFImage.js

@@ -1,13 +1,13 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 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" })) {
+var EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitElement), { assetType: "image_files" })) {
 	constructor(..._args) {
 		super(..._args);
 		this.imageRef = createRef();
@@ -65,8 +65,7 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 	}
 	render() {
 		const assetPath = this.assetPath();
-		const isDirectUrl = this.isDirectUrl(assetPath);
-		return isDirectUrl ? html`<img ${ref(this.imageRef)} src=${assetPath} />` : html`<canvas ${ref(this.canvasRef)}></canvas>`;
+		return this.isDirectUrl(assetPath) ? html`<img ${ref(this.imageRef)} src=${assetPath} />` : html`<canvas ${ref(this.canvasRef)}></canvas>`;
 	}
 	isDirectUrl(src) {
 		return src.startsWith("http://") || src.startsWith("https://");
@@ -80,10 +79,10 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 		return this.hasExplicitDuration;
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "asset-id",
 	reflect: true
 })], EFImage.prototype, "assetId", null);
-EFImage = _decorate([customElement("ef-image")], EFImage);
+EFImage = __decorate([customElement("ef-image")], EFImage);
 export { EFImage };

package/dist/elements/EFMedia/AssetIdMediaEngine.js

@@ -2,8 +2,7 @@ import { AssetMediaEngine } from "./AssetMediaEngine.js";
 var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 	static async fetchByAssetId(host, _urlGenerator, assetId, apiHost) {
 		const url = `${apiHost}/api/v1/isobmff_files/${assetId}/index`;
-		const response = await host.fetch(url);
-		const data = await response.json();
+		const data = await (await host.fetch(url)).json();
 		return new AssetIdMediaEngine(host, assetId, data, apiHost);
 	}
 	constructor(host, assetId, data, apiHost) {
@@ -11,8 +10,7 @@ var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 		this.assetId = assetId;
 		this.apiHost = apiHost;
 		this.data = data;
-		const longestFragment = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
-		this.durationMs = longestFragment * 1e3;
+		this.durationMs = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0) * 1e3;
 	}
 	get initSegmentPaths() {
 		const paths = {};

package/dist/elements/EFMedia/AssetMediaEngine.d.ts

@@ -13,14 +13,14 @@ export declare class AssetMediaEngine extends BaseMediaEngine implements MediaEn
     get audioTrackIndex(): import('../../../../assets/src/index.ts').AudioTrackFragmentIndex | undefined;
     get videoTrackIndex(): import('../../../../assets/src/index.ts').VideoTrackFragmentIndex | undefined;
     get videoRendition(): {
-        trackId: number | undefined;
+        trackId: number;
         src: string;
         startTimeOffsetMs: number | undefined;
-    };
+    } | undefined;
     get audioRendition(): {
-        trackId: number | undefined;
+        trackId: number;
         src: string;
-    };
+    } | undefined;
     get initSegmentPaths(): InitSegmentPaths;
     get templates(): {
         initSegment: string;

package/dist/elements/EFMedia/AssetMediaEngine.js

@@ -1,3 +1,4 @@
+import { withSpan } from "../../otel/tracingHelpers.js";
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
 import { convertToScaledTime, roundToMilliseconds } from "./shared/PrecisionUtils.js";
 var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
@@ -10,10 +11,8 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 	static async fetch(host, urlGenerator, src) {
 		const engine = new AssetMediaEngine(host, src);
 		const url = urlGenerator.generateTrackFragmentIndexUrl(src);
-		const data = await engine.fetchManifest(url);
-		engine.data = data;
-		const longestFragment = Object.values(engine.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
-		engine.durationMs = longestFragment * 1e3;
+		engine.data = await engine.fetchManifest(url);
+		engine.durationMs = Object.values(engine.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0) * 1e3;
 		if (src.startsWith("/")) engine.src = src.slice(1);
 		return engine;
 	}
@@ -24,15 +23,19 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 		return Object.values(this.data).find((track) => track.type === "video");
 	}
 	get videoRendition() {
+		const videoTrack = this.videoTrackIndex;
+		if (!videoTrack || videoTrack.track === void 0) return;
 		return {
-			trackId: this.videoTrackIndex?.track,
+			trackId: videoTrack.track,
 			src: this.src,
-			startTimeOffsetMs: this.videoTrackIndex?.startTimeOffsetMs
+			startTimeOffsetMs: videoTrack.startTimeOffsetMs
 		};
 	}
 	get audioRendition() {
+		const audioTrack = this.audioTrackIndex;
+		if (!audioTrack || audioTrack.track === void 0) return;
 		return {
-			trackId: this.audioTrackIndex?.track,
+			trackId: audioTrack.track,
 			src: this.src
 		};
 	}
@@ -63,25 +66,37 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 		return `/@ef-track/${this.src}?trackId=${trackId}&segmentId=${segmentId}`;
 	}
 	async fetchInitSegment(rendition, signal) {
-		if (!rendition.trackId) throw new Error("[fetchInitSegment] Track ID is required for asset metadata");
-		const url = this.buildInitSegmentUrl(rendition.trackId);
-		const initSegment = this.data[rendition.trackId]?.initSegment;
-		if (!initSegment) throw new Error("Init segment not found");
-		const headers = { Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}` };
-		return this.fetchMediaWithHeaders(url, headers, signal);
+		return withSpan("assetEngine.fetchInitSegment", {
+			trackId: rendition.trackId || -1,
+			src: rendition.src
+		}, void 0, async (span) => {
+			if (!rendition.trackId) throw new Error("[fetchInitSegment] Track ID is required for asset metadata");
+			const url = this.buildInitSegmentUrl(rendition.trackId);
+			const initSegment = this.data[rendition.trackId]?.initSegment;
+			if (!initSegment) throw new Error("Init segment not found");
+			span.setAttribute("offset", initSegment.offset);
+			span.setAttribute("size", initSegment.size);
+			const headers = { Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}` };
+			return this.fetchMediaWithHeaders(url, headers, signal);
+		});
 	}
 	async fetchMediaSegment(segmentId, rendition, signal) {
-		if (!rendition.trackId) throw new Error("[fetchMediaSegment] Track ID is required for asset metadata");
-		if (segmentId === void 0) throw new Error("Segment ID is not available");
-		const url = this.buildMediaSegmentUrl(rendition.trackId, segmentId);
-		const mediaSegment = this.data[rendition.trackId]?.segments[segmentId];
-		if (!mediaSegment) throw new Error("Media segment not found");
-		const headers = { Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}` };
-		return this.fetchMediaWithHeaders(url, headers, signal);
-	}
-	/**
-	* Calculate audio segments for variable-duration segments using track fragment index
-	*/
+		return withSpan("assetEngine.fetchMediaSegment", {
+			segmentId,
+			trackId: rendition.trackId || -1,
+			src: rendition.src
+		}, void 0, async (span) => {
+			if (!rendition.trackId) throw new Error("[fetchMediaSegment] Track ID is required for asset metadata");
+			if (segmentId === void 0) throw new Error("Segment ID is not available");
+			const url = this.buildMediaSegmentUrl(rendition.trackId, segmentId);
+			const mediaSegment = this.data[rendition.trackId]?.segments[segmentId];
+			if (!mediaSegment) throw new Error("Media segment not found");
+			span.setAttribute("offset", mediaSegment.offset);
+			span.setAttribute("size", mediaSegment.size);
+			const headers = { Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}` };
+			return this.fetchMediaWithHeaders(url, headers, signal);
+		});
+	}
 	calculateAudioSegmentRange(fromMs, toMs, rendition, _durationMs) {
 		if (fromMs >= toMs || !rendition.trackId) {
 			console.warn(`calculateAudioSegmentRange: invalid fromMs ${fromMs} toMs ${toMs} rendition ${JSON.stringify(rendition)}`);
@@ -145,13 +160,7 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 		}
 		return nearestSegmentIndex;
 	}
-	getScrubVideoRendition() {
-		return void 0;
-	}
-	/**
-	* Get preferred buffer configuration for this media engine
-	* AssetMediaEngine uses lower buffering since segments are already optimized
-	*/
+	getScrubVideoRendition() {}
 	getBufferConfig() {
 		return {
 			videoBufferDurationMs: 2e3,
@@ -162,7 +171,7 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 	}
 	convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition) {
 		{
-			if (!rendition.trackId) throw new Error("[convertToSegmentRelativeTimestamps] Track ID is required for asset metadata");
+			if (!rendition.trackId) throw new Error("Track ID is required for asset metadata");
 			const trackData = this.data[rendition.trackId];
 			if (!trackData) throw new Error("Track not found");
 			const segment = trackData.segments?.[segmentId];

package/dist/elements/EFMedia/BaseMediaEngine.d.ts

@@ -10,8 +10,16 @@ export declare abstract class BaseMediaEngine {
     constructor(host: EFMedia);
     abstract get videoRendition(): VideoRendition | undefined;
     abstract get audioRendition(): AudioRendition | undefined;
-    getVideoRendition(): VideoRendition;
-    getAudioRendition(): AudioRendition;
+    /**
+     * Get video rendition if available. Returns undefined for audio-only assets.
+     * Callers should handle undefined gracefully.
+     */
+    getVideoRendition(): VideoRendition | undefined;
+    /**
+     * Get audio rendition if available. Returns undefined for video-only assets.
+     * Callers should handle undefined gracefully.
+     */
+    getAudioRendition(): AudioRendition | undefined;
     /**
      * Generate cache key for segment requests
      */

package/dist/elements/EFMedia/BaseMediaEngine.js

@@ -1,3 +1,4 @@
+import { withSpan } from "../../otel/tracingHelpers.js";
 import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator.js";
 import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
 const mediaCache = new SizeAwareLRUCache(100 * 1024 * 1024);
@@ -7,53 +8,72 @@ var BaseMediaEngine = class {
 		this.host = host;
 	}
 	getVideoRendition() {
-		if (!this.videoRendition) throw new Error("No video rendition available");
 		return this.videoRendition;
 	}
 	getAudioRendition() {
-		if (!this.audioRendition) throw new Error("No audio rendition available");
 		return this.audioRendition;
 	}
-	/**
-	* Generate cache key for segment requests
-	*/
 	getSegmentCacheKey(segmentId, rendition) {
 		return `${rendition.src}-${rendition.id}-${segmentId}-${rendition.trackId}`;
 	}
-	/**
-	* Unified fetch method with caching and global deduplication
-	* All requests (media, manifest, init segments) go through this method
-	*/
 	async fetchWithCache(url, options) {
-		const { responseType, headers, signal } = options;
-		const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
-		const cached = mediaCache.get(cacheKey);
-		if (cached) {
-			if (signal) return this.handleAbortForCachedRequest(cached, signal);
-			return cached;
-		}
-		const promise = globalRequestDeduplicator.executeRequest(cacheKey, async () => {
-			try {
-				const response = await this.host.fetch(url, { headers });
-				if (responseType === "json") return response.json();
-				return response.arrayBuffer();
-			} catch (error) {
+		return withSpan("mediaEngine.fetchWithCache", {
+			url: url.length > 100 ? `${url.substring(0, 100)}...` : url,
+			responseType: options.responseType,
+			hasHeaders: !!options.headers
+		}, void 0, async (span) => {
+			const t0 = performance.now();
+			const { responseType, headers, signal } = options;
+			const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+			const t1 = performance.now();
+			const cached = mediaCache.get(cacheKey);
+			const t2 = performance.now();
+			span.setAttribute("cacheLookupMs", Math.round((t2 - t1) * 1e3) / 1e3);
+			if (cached) {
+				span.setAttribute("cacheHit", true);
+				if (signal) {
+					const t3 = performance.now();
+					const result$1 = await this.handleAbortForCachedRequest(cached, signal);
+					const t4 = performance.now();
+					span.setAttribute("handleAbortMs", Math.round((t4 - t3) * 100) / 100);
+					span.setAttribute("totalCacheHitMs", Math.round((t4 - t0) * 100) / 100);
+					return result$1;
+				}
+				span.setAttribute("totalCacheHitMs", Math.round((t2 - t0) * 100) / 100);
+				return cached;
+			}
+			span.setAttribute("cacheHit", false);
+			const promise = globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+				const fetchStart = performance.now();
+				try {
+					const response = await this.host.fetch(url, { headers });
+					const fetchEnd = performance.now();
+					span.setAttribute("fetchMs", fetchEnd - fetchStart);
+					if (responseType === "json") return response.json();
+					const buffer = await response.arrayBuffer();
+					span.setAttribute("sizeBytes", buffer.byteLength);
+					return buffer;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+					throw error;
+				}
+			});
+			mediaCache.set(cacheKey, promise);
+			promise.catch((error) => {
 				if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
-				throw error;
+			});
+			if (signal) {
+				const result$1 = await this.handleAbortForCachedRequest(promise, signal);
+				const tEnd$1 = performance.now();
+				span.setAttribute("totalFetchMs", Math.round((tEnd$1 - t0) * 100) / 100);
+				return result$1;
 			}
+			const result = await promise;
+			const tEnd = performance.now();
+			span.setAttribute("totalFetchMs", Math.round((tEnd - t0) * 100) / 100);
+			return result;
 		});
-		mediaCache.set(cacheKey, promise);
-		promise.catch((error) => {
-			if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
-		});
-		if (signal) return this.handleAbortForCachedRequest(promise, signal);
-		return promise;
-	}
-	/**
-	* Handles abort logic for a cached request without affecting the underlying fetch
-	* This allows multiple instances to share the same cached request while each
-	* manages their own abort behavior
-	*/
+	}
 	handleAbortForCachedRequest(promise, signal) {
 		if (signal.aborted) throw new DOMException("Aborted", "AbortError");
 		return Promise.race([promise, new Promise((_, reject) => {
@@ -93,39 +113,22 @@ var BaseMediaEngine = class {
 	async fetchMediaCacheWithHeaders(url, headers, signal) {
 		return this.fetchMediaWithHeaders(url, headers, signal);
 	}
-	/**
-	* Fetch media segment with built-in deduplication
-	* Now uses global deduplication for all requests
-	*/
 	async fetchMediaSegmentWithDeduplication(segmentId, rendition, _signal) {
 		const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
 		return globalRequestDeduplicator.executeRequest(cacheKey, async () => {
 			return this.fetchMediaSegment(segmentId, rendition);
 		});
 	}
-	/**
-	* Check if a segment is currently being fetched
-	*/
 	isSegmentBeingFetched(segmentId, rendition) {
 		const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
 		return globalRequestDeduplicator.isPending(cacheKey);
 	}
-	/**
-	* Get count of active segment requests (for debugging/monitoring)
-	*/
 	getActiveSegmentRequestCount() {
 		return globalRequestDeduplicator.getPendingCount();
 	}
-	/**
-	* Cancel all active segment requests (for cleanup)
-	*/
 	cancelAllSegmentRequests() {
 		globalRequestDeduplicator.clear();
 	}
-	/**
-	* Calculate audio segments needed for a time range
-	* Each media engine implements this based on their segment structure
-	*/
 	calculateAudioSegmentRange(fromMs, toMs, rendition, durationMs) {
 		if (fromMs >= toMs) return [];
 		const segments = [];
@@ -163,37 +166,24 @@ var BaseMediaEngine = class {
 		}
 		return segments;
 	}
-	/**
-	* Check if a segment is cached for a given rendition
-	* This needs to check the URL-based cache since that's where segments are actually stored
-	*/
 	isSegmentCached(segmentId, rendition) {
 		try {
 			const maybeJitEngine = this;
 			if (maybeJitEngine.urlGenerator && typeof maybeJitEngine.urlGenerator.generateSegmentUrl === "function") {
 				if (!rendition.id) return false;
 				const segmentUrl = maybeJitEngine.urlGenerator.generateSegmentUrl(segmentId, rendition.id, maybeJitEngine);
-				const urlIsCached = mediaCache.has(segmentUrl);
-				return urlIsCached;
+				return mediaCache.has(segmentUrl);
 			}
 			const cacheKey = `${rendition.src}-${rendition.id || "default"}-${segmentId}-${rendition.trackId}`;
-			const isCached = mediaCache.has(cacheKey);
-			return isCached;
+			return mediaCache.has(cacheKey);
 		} catch (error) {
 			console.warn(`🎬 BaseMediaEngine: Error checking if segment ${segmentId} is cached:`, error);
 			return false;
 		}
 	}
-	/**
-	* Get cached segment IDs from a list for a given rendition
-	*/
 	getCachedSegments(segmentIds, rendition) {
 		return new Set(segmentIds.filter((id) => this.isSegmentCached(id, rendition)));
 	}
-	/**
-	* Extract thumbnail canvases at multiple timestamps efficiently
-	* Default implementation provides helpful error information
-	*/
 	async extractThumbnails(timestamps) {
 		const engineName = this.constructor.name;
 		console.warn(`${engineName}: extractThumbnails not properly implemented. This MediaEngine type does not support thumbnail generation. Supported engines: JitMediaEngine. Requested ${timestamps.length} thumbnail${timestamps.length === 1 ? "" : "s"}.`);