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

package/dist/elements/EFMedia/AssetMediaEngine.js

@@ -157,5 +157,16 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 			maxAudioBufferFetches: 1
 		};
 	}
+	convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition) {
+		{
+			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];
+			if (!segment) throw new Error("Segment not found");
+			const segmentStartMs = segment.cts / trackData.timescale * 1e3;
+			return globalTimestamps.map((globalMs) => (globalMs - segmentStartMs) / 1e3);
+		}
+	}
 };
 export { AssetMediaEngine };

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

@@ -1,7 +1,8 @@
 import { RequestDeduplicator } from '../../transcoding/cache/RequestDeduplicator.js';
-import { AudioRendition, SegmentTimeRange, VideoRendition } from '../../transcoding/types';
+import { AudioRendition, SegmentTimeRange, ThumbnailResult, VideoRendition } from '../../transcoding/types';
 import { SizeAwareLRUCache } from '../../utils/LRUCache.js';
 import { EFMedia } from '../EFMedia.js';
+import { MediaRendition } from './shared/MediaTaskUtils.js';
 export declare const mediaCache: SizeAwareLRUCache<string>;
 export declare const globalRequestDeduplicator: RequestDeduplicator;
 export declare abstract class BaseMediaEngine {
@@ -43,6 +44,11 @@ export declare abstract class BaseMediaEngine {
         trackId: number | undefined;
         src: string;
     }): Promise<ArrayBuffer>;
+    abstract fetchInitSegment(rendition: {
+        trackId: number | undefined;
+        src: string;
+    }, signal: AbortSignal): Promise<ArrayBuffer>;
+    abstract computeSegmentId(desiredSeekTimeMs: number, rendition: MediaRendition): number | undefined;
     /**
      * Fetch media segment with built-in deduplication
      * Now uses global deduplication for all requests
@@ -80,4 +86,10 @@ export declare abstract class BaseMediaEngine {
      * Get cached segment IDs from a list for a given rendition
      */
     getCachedSegments(segmentIds: number[], rendition: AudioRendition | VideoRendition): Set<number>;
+    /**
+     * Extract thumbnail canvases at multiple timestamps efficiently
+     * Default implementation provides helpful error information
+     */
+    extractThumbnails(timestamps: number[]): Promise<(ThumbnailResult | null)[]>;
+    abstract convertToSegmentRelativeTimestamps(globalTimestamps: number[], segmentId: number, rendition: VideoRendition): number[];
 }

package/dist/elements/EFMedia/BaseMediaEngine.js

@@ -190,5 +190,14 @@ var BaseMediaEngine = class {
 	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"}.`);
+		return timestamps.map(() => null);
+	}
 };
 export { BaseMediaEngine };

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

@@ -1,10 +1,11 @@
-import { AudioRendition, MediaEngine, RenditionId, VideoRendition } from '../../transcoding/types';
+import { AudioRendition, MediaEngine, RenditionId, ThumbnailResult, VideoRendition } from '../../transcoding/types';
 import { UrlGenerator } from '../../transcoding/utils/UrlGenerator';
 import { EFMedia } from '../EFMedia.js';
 import { BaseMediaEngine } from './BaseMediaEngine';
 export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
     private urlGenerator;
     private data;
+    private thumbnailExtractor;
     static fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string): Promise<JitMediaEngine>;
     constructor(host: EFMedia, urlGenerator: UrlGenerator);
     get durationMs(): number;
@@ -37,4 +38,9 @@ export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngi
         maxVideoBufferFetches: number;
         maxAudioBufferFetches: number;
     };
+    /**
+     * Extract thumbnail canvases using same rendition priority as video playback for frame alignment
+     */
+    extractThumbnails(timestamps: number[]): Promise<(ThumbnailResult | null)[]>;
+    convertToSegmentRelativeTimestamps(globalTimestamps: number[], _segmentId: number, _rendition: VideoRendition): number[];
 }

package/dist/elements/EFMedia/JitMediaEngine.js

@@ -1,4 +1,5 @@
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
+import { ThumbnailExtractor } from "./shared/ThumbnailExtractor.js";
 var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	static async fetch(host, urlGenerator, url) {
 		const engine = new JitMediaEngine(host, urlGenerator);
@@ -10,6 +11,7 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 		super(host);
 		this.data = {};
 		this.urlGenerator = urlGenerator;
+		this.thumbnailExtractor = new ThumbnailExtractor(this);
 	}
 	get durationMs() {
 		return this.data.durationMs;
@@ -101,5 +103,18 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 			maxAudioBufferFetches: 3
 		};
 	}
+	/**
+	* Extract thumbnail canvases using same rendition priority as video playback for frame alignment
+	*/
+	async extractThumbnails(timestamps) {
+		const mainRendition = this.videoRendition;
+		const scrubRendition = this.getScrubVideoRendition();
+		const rendition = mainRendition || scrubRendition;
+		if (!rendition) return timestamps.map(() => null);
+		return this.thumbnailExtractor.extractThumbnails(timestamps, rendition, this.durationMs);
+	}
+	convertToSegmentRelativeTimestamps(globalTimestamps, _segmentId, _rendition) {
+		return globalTimestamps.map((timestamp) => timestamp / 1e3);
+	}
 };
 export { JitMediaEngine };

package/dist/elements/EFMedia/audioTasks/makeAudioBufferTask.js

@@ -22,6 +22,7 @@ const makeAudioBufferTask = (host) => {
 		task: async ([seekTimeMs], { signal }) => {
 			if (EF_RENDERING()) return currentState;
 			const mediaEngine = await getLatestMediaEngine(host, signal);
+			if (!mediaEngine.audioRendition) return currentState;
 			const engineConfig = mediaEngine.getBufferConfig();
 			const bufferDurationMs = engineConfig.audioBufferDurationMs;
 			const maxParallelFetches = engineConfig.maxAudioBufferFetches;
@@ -47,7 +48,7 @@ const makeAudioBufferTask = (host) => {
 				getRendition: async () => {
 					const mediaEngine$1 = await getLatestMediaEngine(host, signal);
 					const audioRendition = mediaEngine$1.audioRendition;
-					if (!audioRendition) throw new Error("Audio rendition not available");
+					if (!audioRendition) throw new Error("No audio track available in source");
 					return audioRendition;
 				},
 				logError: console.error

package/dist/elements/EFMedia/audioTasks/makeAudioFrequencyAnalysisTask.js

@@ -51,6 +51,8 @@ function makeAudioFrequencyAnalysisTask(element) {
 		],
 		task: async (_, { signal }) => {
 			if (element.currentSourceTimeMs < 0) return null;
+			const mediaEngine = element.mediaEngineTask.value;
+			if (!mediaEngine?.audioRendition) return null;
 			const currentTimeMs = element.currentSourceTimeMs;
 			const frameIntervalMs = 1e3 / 30;
 			const earliestFrameMs = currentTimeMs - (element.fftDecay - 1) * frameIntervalMs;

package/dist/elements/EFMedia/audioTasks/makeAudioInitSegmentFetchTask.d.ts

@@ -1,4 +1,4 @@
 import { Task } from '@lit/task';
 import { MediaEngine } from '../../../transcoding/types';
 import { EFMedia } from '../../EFMedia';
-export declare const makeAudioInitSegmentFetchTask: (host: EFMedia) => Task<readonly [MediaEngine | undefined], ArrayBuffer>;
+export declare const makeAudioInitSegmentFetchTask: (host: EFMedia) => Task<readonly [MediaEngine | undefined], ArrayBuffer | undefined>;

package/dist/elements/EFMedia/audioTasks/makeAudioInitSegmentFetchTask.js

@@ -9,7 +9,9 @@ const makeAudioInitSegmentFetchTask = (host) => {
 		onComplete: (_value) => {},
 		task: async ([_mediaEngine], { signal }) => {
 			const mediaEngine = await getLatestMediaEngine(host, signal);
-			return mediaEngine.fetchInitSegment(mediaEngine.getAudioRendition(), signal);
+			const audioRendition = mediaEngine.audioRendition;
+			if (!audioRendition) return void 0;
+			return mediaEngine.fetchInitSegment(audioRendition, signal);
 		}
 	});
 };

package/dist/elements/EFMedia/audioTasks/makeAudioInputTask.js

@@ -13,7 +13,7 @@ const makeAudioInputTask = (host) => {
 			signal.throwIfAborted();
 			const segment = await host.audioSegmentFetchTask.taskComplete;
 			signal.throwIfAborted();
-			if (!initSegment || !segment) throw new Error("Init segment or segment is not available");
+			if (!initSegment || !segment) throw new Error("No audio track available in source");
 			const mediaEngine = await host.mediaEngineTask.taskComplete;
 			const audioRendition = mediaEngine?.audioRendition;
 			const startTimeOffsetMs = audioRendition?.startTimeOffsetMs;

package/dist/elements/EFMedia/audioTasks/makeAudioSegmentFetchTask.d.ts

@@ -1,4 +1,4 @@
 import { Task } from '@lit/task';
 import { MediaEngine } from '../../../transcoding/types';
 import { EFMedia } from '../../EFMedia';
-export declare const makeAudioSegmentFetchTask: (host: EFMedia) => Task<readonly [MediaEngine | undefined, number | undefined], ArrayBuffer>;
+export declare const makeAudioSegmentFetchTask: (host: EFMedia) => Task<readonly [MediaEngine | undefined, number | undefined], ArrayBuffer | undefined>;

package/dist/elements/EFMedia/audioTasks/makeAudioSegmentFetchTask.js

@@ -9,19 +9,20 @@ const makeAudioSegmentFetchTask = (host) => {
 		onComplete: (_value) => {},
 		task: async (_, { signal }) => {
 			const mediaEngine = await getLatestMediaEngine(host, signal);
+			const audioRendition = mediaEngine.audioRendition;
+			if (!audioRendition) return void 0;
 			const segmentId = await host.audioSegmentIdTask.taskComplete;
 			if (segmentId === void 0) {
-				const rendition = mediaEngine.audioRendition;
 				const debugInfo = {
-					hasRendition: !!rendition,
-					segmentDurationMs: rendition?.segmentDurationMs,
-					segmentDurationsMs: rendition?.segmentDurationsMs?.length || 0,
+					hasRendition: true,
+					segmentDurationMs: audioRendition.segmentDurationMs,
+					segmentDurationsMs: audioRendition.segmentDurationsMs?.length || 0,
 					desiredSeekTimeMs: host.desiredSeekTimeMs,
 					intrinsicDurationMs: host.intrinsicDurationMs
 				};
 				throw new Error(`Segment ID is not available for audio. Debug info: ${JSON.stringify(debugInfo)}`);
 			}
-			return mediaEngine.fetchMediaSegment(segmentId, mediaEngine.getAudioRendition(), signal);
+			return mediaEngine.fetchMediaSegment(segmentId, audioRendition, signal);
 		}
 	});
 };

package/dist/elements/EFMedia/audioTasks/makeAudioSegmentIdTask.js

@@ -10,7 +10,9 @@ const makeAudioSegmentIdTask = (host) => {
 		task: async ([, targetSeekTimeMs], { signal }) => {
 			const mediaEngine = await getLatestMediaEngine(host, signal);
 			signal.throwIfAborted();
-			return mediaEngine.computeSegmentId(targetSeekTimeMs, mediaEngine.getAudioRendition());
+			const audioRendition = mediaEngine.audioRendition;
+			if (!audioRendition) return void 0;
+			return mediaEngine.computeSegmentId(targetSeekTimeMs, audioRendition);
 		}
 	});
 };

package/dist/elements/EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.js

@@ -18,6 +18,8 @@ function makeAudioTimeDomainAnalysisTask(element) {
 		],
 		task: async (_, { signal }) => {
 			if (element.currentSourceTimeMs < 0) return null;
+			const mediaEngine = element.mediaEngineTask.value;
+			if (!mediaEngine?.audioRendition) return null;
 			const currentTimeMs = element.currentSourceTimeMs;
 			const frameIntervalMs = 1e3 / 30;
 			const earliestFrameMs = currentTimeMs - (element.fftDecay - 1) * frameIntervalMs;

package/dist/elements/EFMedia/shared/AudioSpanUtils.js

@@ -4,7 +4,7 @@
 */
 const fetchAudioSegmentData = async (segmentIds, mediaEngine, signal) => {
 	const audioRendition = mediaEngine.audioRendition;
-	if (!audioRendition) throw new Error("Audio rendition not available");
+	if (!audioRendition) throw new Error("No audio track available in source");
 	const segmentData = /* @__PURE__ */ new Map();
 	const fetchPromises = segmentIds.map(async (segmentId) => {
 		const arrayBuffer = await mediaEngine.fetchMediaSegment(segmentId, audioRendition, signal);
@@ -31,7 +31,7 @@ const fetchAudioSpanningTime = async (host, fromMs, toMs, signal) => {
 	if (fromMs >= toMs || fromMs < 0) throw new Error(`Invalid time range: fromMs=${fromMs}, toMs=${toMs}`);
 	const mediaEngine = await host.mediaEngineTask.taskComplete;
 	const initSegment = await host.audioInitSegmentFetchTask.taskComplete;
-	if (!mediaEngine?.audioRendition) throw new Error("Audio rendition not available");
+	if (!mediaEngine?.audioRendition) throw new Error("No audio track available in source");
 	if (!initSegment) throw new Error("Audio init segment is not available");
 	const segmentRanges = mediaEngine.calculateAudioSegmentRange(fromMs, toMs, mediaEngine.audioRendition, host.intrinsicDurationMs || 1e4);
 	if (segmentRanges.length === 0) throw new Error(`No segments found for time range ${fromMs}-${toMs}ms`);

package/dist/elements/EFMedia/shared/GlobalInputCache.d.ts

@@ -0,0 +1,39 @@
+import { Input } from 'mediabunny';
+/**
+ * Global cache for MediaBunny Input instances
+ * Shared across all MediaEngine instances to prevent duplicate decoding
+ * of the same segment data
+ */
+declare class GlobalInputCache {
+    private cache;
+    /**
+     * Generate standardized cache key for Input objects
+     * Format: "input:{src}:{segmentId}:{renditionId}"
+     */
+    private generateKey;
+    /**
+     * Get cached Input object
+     */
+    get(src: string, segmentId: number, renditionId?: string): Input | undefined;
+    /**
+     * Cache Input object
+     */
+    set(src: string, segmentId: number, input: Input, renditionId?: string): void;
+    /**
+     * Check if Input is cached
+     */
+    has(src: string, segmentId: number, renditionId?: string): boolean;
+    /**
+     * Clear all cached Input objects
+     */
+    clear(): void;
+    /**
+     * Get cache statistics for debugging
+     */
+    getStats(): {
+        size: number;
+        cachedKeys: unknown[];
+    };
+}
+export declare const globalInputCache: GlobalInputCache;
+export {};

package/dist/elements/EFMedia/shared/GlobalInputCache.js

@@ -0,0 +1,57 @@
+import { LRUCache } from "../../../utils/LRUCache.js";
+/**
+* Global cache for MediaBunny Input instances
+* Shared across all MediaEngine instances to prevent duplicate decoding
+* of the same segment data
+*/
+var GlobalInputCache = class {
+	constructor() {
+		this.cache = new LRUCache(50);
+	}
+	/**
+	* Generate standardized cache key for Input objects
+	* Format: "input:{src}:{segmentId}:{renditionId}"
+	*/
+	generateKey(src, segmentId, renditionId) {
+		return `input:${src}:${segmentId}:${renditionId || "default"}`;
+	}
+	/**
+	* Get cached Input object
+	*/
+	get(src, segmentId, renditionId) {
+		const key = this.generateKey(src, segmentId, renditionId);
+		return this.cache.get(key);
+	}
+	/**
+	* Cache Input object
+	*/
+	set(src, segmentId, input, renditionId) {
+		const key = this.generateKey(src, segmentId, renditionId);
+		this.cache.set(key, input);
+	}
+	/**
+	* Check if Input is cached
+	*/
+	has(src, segmentId, renditionId) {
+		const key = this.generateKey(src, segmentId, renditionId);
+		return this.cache.has(key);
+	}
+	/**
+	* Clear all cached Input objects
+	*/
+	clear() {
+		this.cache.clear();
+	}
+	/**
+	* Get cache statistics for debugging
+	*/
+	getStats() {
+		return {
+			size: this.cache.size,
+			cachedKeys: Array.from(this.cache.cache.keys())
+		};
+	}
+};
+const globalInputCache = new GlobalInputCache();
+globalThis.debugInputCache = globalInputCache;
+export { globalInputCache };

package/dist/elements/EFMedia/shared/ThumbnailExtractor.d.ts

@@ -0,0 +1,27 @@
+import { ThumbnailResult, VideoRendition } from '../../../transcoding/types/index.js';
+import { BaseMediaEngine } from '../BaseMediaEngine.js';
+/**
+ * Shared thumbnail extraction logic for all MediaEngine implementations
+ * Eliminates code duplication and provides consistent behavior
+ */
+export declare class ThumbnailExtractor {
+    private mediaEngine;
+    constructor(mediaEngine: BaseMediaEngine);
+    /**
+     * Extract thumbnails at multiple timestamps efficiently using segment batching
+     */
+    extractThumbnails(timestamps: number[], rendition: VideoRendition, durationMs: number): Promise<(ThumbnailResult | null)[]>;
+    /**
+     * Group timestamps by segment ID for efficient batch processing
+     */
+    private groupTimestampsBySegment;
+    /**
+     * Extract thumbnails for a specific segment using CanvasSink
+     */
+    private extractSegmentThumbnails;
+    /**
+     * Convert global timestamps to segment-relative timestamps for mediabunny
+     * This is where the main difference between JIT and Asset engines lies
+     */
+    private convertToSegmentRelativeTimestamps;
+}

package/dist/elements/EFMedia/shared/ThumbnailExtractor.js

@@ -0,0 +1,106 @@
+import { globalInputCache } from "./GlobalInputCache.js";
+import { ALL_FORMATS, BlobSource, CanvasSink, Input } from "mediabunny";
+/**
+* Shared thumbnail extraction logic for all MediaEngine implementations
+* Eliminates code duplication and provides consistent behavior
+*/
+var ThumbnailExtractor = class {
+	constructor(mediaEngine) {
+		this.mediaEngine = mediaEngine;
+	}
+	/**
+	* Extract thumbnails at multiple timestamps efficiently using segment batching
+	*/
+	async extractThumbnails(timestamps, rendition, durationMs) {
+		if (timestamps.length === 0) return [];
+		const validTimestamps = timestamps.filter((timeMs) => timeMs >= 0 && timeMs <= durationMs);
+		if (validTimestamps.length === 0) {
+			console.warn(`ThumbnailExtractor: All timestamps out of bounds (0-${durationMs}ms)`);
+			return timestamps.map(() => null);
+		}
+		const segmentGroups = this.groupTimestampsBySegment(validTimestamps, rendition);
+		const results = /* @__PURE__ */ new Map();
+		for (const [segmentId, segmentTimestamps] of segmentGroups) try {
+			const segmentResults = await this.extractSegmentThumbnails(segmentId, segmentTimestamps, rendition);
+			for (const [timestamp, thumbnail] of segmentResults) results.set(timestamp, thumbnail);
+		} catch (error) {
+			console.warn(`ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`, error);
+			for (const timestamp of segmentTimestamps) results.set(timestamp, null);
+		}
+		return timestamps.map((t) => {
+			if (t < 0 || t > durationMs) return null;
+			return results.get(t) || null;
+		});
+	}
+	/**
+	* Group timestamps by segment ID for efficient batch processing
+	*/
+	groupTimestampsBySegment(timestamps, rendition) {
+		const segmentGroups = /* @__PURE__ */ new Map();
+		for (const timeMs of timestamps) try {
+			const segmentId = this.mediaEngine.computeSegmentId(timeMs, rendition);
+			if (segmentId !== void 0) {
+				if (!segmentGroups.has(segmentId)) segmentGroups.set(segmentId, []);
+				const segmentGroup = segmentGroups.get(segmentId) ?? [];
+				if (!segmentGroup) segmentGroups.set(segmentId, []);
+				segmentGroup.push(timeMs);
+			}
+		} catch (error) {
+			console.warn(`ThumbnailExtractor: Could not compute segment for timestamp ${timeMs}:`, error);
+		}
+		return segmentGroups;
+	}
+	/**
+	* Extract thumbnails for a specific segment using CanvasSink
+	*/
+	async extractSegmentThumbnails(segmentId, timestamps, rendition) {
+		const results = /* @__PURE__ */ new Map();
+		try {
+			const abortController = new AbortController();
+			const [initSegment, mediaSegment] = await Promise.all([this.mediaEngine.fetchInitSegment(rendition, abortController.signal), this.mediaEngine.fetchMediaSegment(segmentId, rendition)]);
+			const segmentBlob = new Blob([initSegment, mediaSegment]);
+			let input = globalInputCache.get(rendition.src, segmentId, rendition.id);
+			if (!input) {
+				input = new Input({
+					formats: ALL_FORMATS,
+					source: new BlobSource(segmentBlob)
+				});
+				globalInputCache.set(rendition.src, segmentId, input, rendition.id);
+			}
+			const videoTrack = await input.getPrimaryVideoTrack();
+			if (!videoTrack) {
+				for (const timestamp of timestamps) results.set(timestamp, null);
+				return results;
+			}
+			const sink = new CanvasSink(videoTrack);
+			const relativeTimestamps = this.convertToSegmentRelativeTimestamps(timestamps, segmentId, rendition);
+			const timestampResults = [];
+			for await (const result of sink.canvasesAtTimestamps(relativeTimestamps)) timestampResults.push(result);
+			for (let i = 0; i < timestamps.length; i++) {
+				const globalTimestamp = timestamps[i];
+				if (globalTimestamp === void 0) continue;
+				const result = timestampResults[i];
+				if (result?.canvas) {
+					const canvas = result.canvas;
+					if (canvas instanceof HTMLCanvasElement || canvas instanceof OffscreenCanvas) results.set(globalTimestamp, {
+						timestamp: globalTimestamp,
+						thumbnail: canvas
+					});
+					else results.set(globalTimestamp, null);
+				} else results.set(globalTimestamp, null);
+			}
+		} catch (error) {
+			console.error(`ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`, error);
+			for (const timestamp of timestamps) results.set(timestamp, null);
+		}
+		return results;
+	}
+	/**
+	* Convert global timestamps to segment-relative timestamps for mediabunny
+	* This is where the main difference between JIT and Asset engines lies
+	*/
+	convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition) {
+		return this.mediaEngine.convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition);
+	}
+};
+export { ThumbnailExtractor };

package/dist/elements/EFMedia/tasks/makeMediaEngineTask.js

@@ -11,7 +11,7 @@ const getLatestMediaEngine = async (host, signal) => {
 };
 const getVideoRendition = (mediaEngine) => {
 	const videoRendition = mediaEngine.videoRendition;
-	if (!videoRendition) throw new Error("Video rendition is not available");
+	if (!videoRendition) throw new Error("No video track available in source");
 	return videoRendition;
 };
 /**

package/dist/elements/EFMedia.d.ts

@@ -58,8 +58,8 @@ export declare class EFMedia extends EFMedia_base {
     get urlGenerator(): UrlGenerator;
     mediaEngineTask: import('@lit/task').Task<readonly [string, string | null], import('../transcoding/types/index.ts').MediaEngine>;
     audioSegmentIdTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
-    audioInitSegmentFetchTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
-    audioSegmentFetchTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    audioInitSegmentFetchTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer | undefined>;
+    audioSegmentFetchTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer | undefined>;
     audioInputTask: import('./EFMedia/shared/MediaTaskUtils.ts').InputTask;
     audioSeekTask: import('@lit/task').Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
     audioBufferTask: import('@lit/task').Task<readonly [number], import('./EFMedia/audioTasks/makeAudioBufferTask.ts').AudioBufferState>;

package/dist/elements/EFMedia.js

@@ -1,3 +1,4 @@
+import { isContextMixin } from "../gui/ContextMixin.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
 import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.js";
 import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.js";
@@ -64,7 +65,9 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 			"asset-id",
 			"audio-buffer-duration",
 			"max-audio-buffer-fetches",
-			"enable-audio-buffering"
+			"enable-audio-buffering",
+			"sourcein",
+			"sourceout"
 		];
 	}
 	static {
@@ -105,6 +108,27 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 		const newCurrentSourceTimeMs = this.currentSourceTimeMs;
 		if (newCurrentSourceTimeMs !== this.desiredSeekTimeMs) this.executeSeek(newCurrentSourceTimeMs);
 		if (changedProperties.has("ownCurrentTimeMs")) this.executeSeek(this.currentSourceTimeMs);
+		const durationAffectingProps = [
+			"_trimStartMs",
+			"_trimEndMs",
+			"_sourceInMs",
+			"_sourceOutMs"
+		];
+		const hasDurationChange = durationAffectingProps.some((prop) => changedProperties.has(prop));
+		if (hasDurationChange) {
+			if (this.parentTimegroup) {
+				this.parentTimegroup.requestUpdate("durationMs");
+				this.parentTimegroup.requestUpdate("currentTime");
+				let parent = this.parentNode;
+				while (parent) {
+					if (isContextMixin(parent)) {
+						parent.dispatchEvent(new CustomEvent("child-duration-changed", { detail: { source: this } }));
+						break;
+					}
+					parent = parent.parentNode;
+				}
+			}
+		}
 	}
 	get hasOwnDuration() {
 		return true;

package/dist/elements/EFSurface.d.ts

@@ -0,0 +1,30 @@
+import { Task } from '@lit/task';
+import { LitElement } from 'lit';
+import { ContextMixinInterface } from '../gui/ContextMixin.ts';
+export declare class EFSurface extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    targetElement: ContextMixinInterface | null;
+    target: string;
+    render(): import('lit-html').TemplateResult<1>;
+    get rootTimegroup(): any;
+    get currentTimeMs(): number;
+    get durationMs(): number;
+    get startTimeMs(): number;
+    get endTimeMs(): number;
+    /**
+     * Minimal integration with EFTimegroup's frame scheduling:
+     * - Waits for the target video element's frameTask to complete (ensuring it painted)
+     * - Copies the target's canvas into this element's canvas
+     */
+    frameTask: Task<readonly [ContextMixinInterface | null], void>;
+    protected updated(): void;
+    private getSourceCanvas;
+    private copyFromTarget;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-surface": EFSurface;
+    }
+}