@editframe/elements 0.38.1 → 0.40.0

package/dist/elements/EFVideo.js

@@ -64,40 +64,23 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
         top: 0;
         left: 0;
         right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.6);
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        height: 2px;
+        overflow: hidden;
         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;
+        pointer-events: none;
+        background: var(--ef-color-loading-spinner-track, rgba(255, 255, 255, 0.1));
       }
-      @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+      .loading-bar {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 40%;
+        background: var(--ef-color-loading-spinner-fill, rgba(255, 255, 255, 0.8));
+        animation: loading-sweep 1.4s ease-in-out infinite;
       }
-      .loading-message {
-        font-size: 12px;
-        opacity: 0.8;
+      @keyframes loading-sweep {
+        0% { left: -40%; }
+        100% { left: 140%; }
       }
     `];
 	}
@@ -117,6 +100,17 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	*/
 	#standaloneUpgradeController = null;
 	/**
+	* Set to true while renderToVideo is executing to suppress background
+	* quality upgrade tasks that would race with the render pipeline.
+	*/
+	#renderingToVideo = false;
+	/**
+	* Stable per-instance identifier for the quality upgrade scheduler.
+	* Uses this.id when available; falls back to a generated unique string so
+	* elements without an id attribute never collide with each other.
+	*/
+	#upgradeOwnerId = crypto.randomUUID();
+	/**
 	* Current rendition being displayed (for observability).
 	*/
 	#currentRenditionId = void 0;
@@ -155,30 +149,35 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	async prepareFrame(_timeMs, signal) {
 		signal.throwIfAborted();
 		this.unifiedVideoSeekTask.begin();
-		const sourceTimeMs = this.currentSourceTimeMs;
-		const mediaEngine = await this.getMediaEngine(signal);
-		if (!mediaEngine) {
-			this.#cachedVideoSample = void 0;
-			this.#cachedVideoSampleTimeMs = sourceTimeMs;
-			this.unifiedVideoSeekTask.complete(void 0);
-			return;
-		}
-		signal.throwIfAborted();
+		this.#delayedLoadingState.startLoading("prepare-frame", "");
 		try {
-			const videoSample = await this.#fetchVideoSampleForFrame(mediaEngine, sourceTimeMs, signal);
+			const sourceTimeMs = this.currentSourceTimeMs;
+			const mediaEngine = await this.getMediaEngine(signal);
+			if (!mediaEngine) {
+				this.#cachedVideoSample = void 0;
+				this.#cachedVideoSampleTimeMs = sourceTimeMs;
+				this.unifiedVideoSeekTask.complete(void 0);
+				return;
+			}
 			signal.throwIfAborted();
-			this.#cachedVideoSample = videoSample;
-			this.#cachedVideoSampleTimeMs = sourceTimeMs;
-			this.unifiedVideoSeekTask.complete(videoSample);
-		} catch (error) {
-			if (error instanceof DOMException && error.name === "AbortError") {
-				this.unifiedVideoSeekTask.abort();
-				throw error;
+			try {
+				const videoSample = await this.#fetchVideoSampleForFrame(mediaEngine, sourceTimeMs, signal);
+				signal.throwIfAborted();
+				this.#cachedVideoSample = videoSample;
+				this.#cachedVideoSampleTimeMs = sourceTimeMs;
+				this.unifiedVideoSeekTask.complete(videoSample);
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") {
+					this.unifiedVideoSeekTask.abort();
+					throw error;
+				}
+				console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);
+				this.#cachedVideoSample = void 0;
+				this.#cachedVideoSampleTimeMs = sourceTimeMs;
+				this.unifiedVideoSeekTask.complete(void 0);
 			}
-			console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);
-			this.#cachedVideoSample = void 0;
-			this.#cachedVideoSampleTimeMs = sourceTimeMs;
-			this.unifiedVideoSeekTask.complete(void 0);
+		} finally {
+			this.#delayedLoadingState.clearLoading("prepare-frame");
 		}
 	}
 	/**
@@ -209,10 +208,10 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* - If main track segment is already cached: use it (avoid redundant lower-quality fetch)
 	*/
 	async #fetchVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal) {
-		const mainRendition = mediaEngine.videoRendition;
-		if (mainRendition) {
-			const mainSegmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, mainRendition);
-			if (mainSegmentId !== void 0 && mediaEngine.isSegmentCached(mainSegmentId, mainRendition)) {
+		const mainTrack = mediaEngine.tracks.video;
+		if (mainTrack) {
+			const mainSegmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, mainTrack);
+			if (mainSegmentId !== void 0 && mediaEngine.transport.isCached(mainSegmentId, mainTrack)) {
 				this.#currentRenditionId = "main";
 				return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
 			}
@@ -221,7 +220,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			this.#currentRenditionId = "main";
 			return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
 		}
-		if (mediaEngine.getScrubVideoRendition?.()) {
+		if (mediaEngine.tracks.scrub) {
 			const scrubSample = await this.#getScrubVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);
 			if (scrubSample) {
 				this.#currentRenditionId = "scrub";
@@ -237,20 +236,16 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* Used in preview mode for faster response during timeline scrubbing.
 	*/
 	async #getScrubVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal) {
-		const scrubRendition = mediaEngine.getScrubVideoRendition?.();
-		if (!scrubRendition) return;
-		const scrubRenditionWithSrc = {
-			...scrubRendition,
-			src: mediaEngine.src
-		};
-		const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, scrubRenditionWithSrc);
+		const scrubTrack = mediaEngine.tracks.scrub;
+		if (!scrubTrack) return;
+		const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, scrubTrack);
 		if (segmentId === void 0) return;
 		const scrubInput = await scrubInputCache.getOrCreateInput(mediaEngine.src, segmentId, async () => {
 			let initSegment;
 			let mediaSegment;
 			try {
-				const initP = mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal);
-				const mediaP = mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc, signal);
+				const initP = mediaEngine.transport.fetchInitSegment(scrubTrack, signal);
+				const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack, signal);
 				initP.catch(() => {});
 				mediaP.catch(() => {});
 				[initSegment, mediaSegment] = await Promise.all([initP, mediaP]);
@@ -268,7 +263,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			return new BufferedSeekingInput(arrayBuffer, {
 				videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
 				audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-				startTimeOffsetMs: scrubRendition.startTimeOffsetMs
+				startTimeOffsetMs: scrubTrack.startTimeOffsetMs
 			});
 		});
 		if (!scrubInput) return;
@@ -282,16 +277,16 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* Get main video sample for a given time.
 	*/
 	async #getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal) {
-		const videoRendition = mediaEngine.getVideoRendition?.() ?? mediaEngine.videoRendition;
-		if (!videoRendition) return;
-		const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, videoRendition);
+		const videoTrack = mediaEngine.tracks.video;
+		if (!videoTrack) return;
+		const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, videoTrack);
 		if (segmentId === void 0) return;
-		const mainInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, videoRendition.id, async () => {
+		const mainInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, String(videoTrack.id), async () => {
 			let initSegment;
 			let mediaSegment;
 			try {
-				const initP = mediaEngine.fetchInitSegment(videoRendition, signal);
-				const mediaP = mediaEngine.fetchMediaSegment(segmentId, videoRendition, signal);
+				const initP = mediaEngine.transport.fetchInitSegment(videoTrack, signal);
+				const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack, signal);
 				initP.catch(() => {});
 				mediaP.catch(() => {});
 				[initSegment, mediaSegment] = await Promise.all([initP, mediaP]);
@@ -310,15 +305,15 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			return new BufferedSeekingInput(arrayBuffer, {
 				videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
 				audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-				startTimeOffsetMs: videoRendition.startTimeOffsetMs
+				startTimeOffsetMs: videoTrack.startTimeOffsetMs
 			});
 		});
 		if (!mainInput) return;
 		signal.throwIfAborted();
-		const videoTrack = await mainInput.getFirstVideoTrack();
-		if (!videoTrack) return;
+		const videoTrackInfo = await mainInput.getFirstVideoTrack();
+		if (!videoTrackInfo) return;
 		signal.throwIfAborted();
-		return await mainInput.seek(videoTrack.id, desiredSeekTimeMs);
+		return await mainInput.seek(videoTrackInfo.id, desiredSeekTimeMs);
 	}
 	/**
 	* Delayed loading state manager for user feedback
@@ -333,34 +328,47 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			operation: null,
 			message: ""
 		};
-		this.#delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
+		this.#delayedLoadingState = new DelayedLoadingState(100, (isLoading, message) => {
 			this.setLoadingState(isLoading, null, message);
 		});
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has("src") || changedProperties.has("fileId")) this.#invalidateUpgradeState("src-change");
+		if (changedProperties.has("src") || changedProperties.has("fileId")) {
+			this.#invalidateUpgradeState("src-change");
+			this.#prewarmQualityUpgrade();
+		}
 		if ([
 			"_trimStartMs",
 			"_trimEndMs",
 			"_sourceInMs",
 			"_sourceOutMs"
-		].some((prop) => changedProperties.has(prop))) this.#invalidateUpgradeState("bounds-change");
+		].some((prop) => changedProperties.has(prop))) {
+			this.#invalidateUpgradeState("bounds-change");
+			this.#prewarmQualityUpgrade();
+		}
+	}
+	/**
+	* Eagerly load the media engine and pre-warm main-quality segments for the
+	* start of this clip. Called when src/fileId or source bounds change so that
+	* segments are already in cache by the time the element first becomes visible.
+	*
+	* Without pre-warming, quality upgrade only begins after the first scrub frame
+	* is displayed, causing ~12 frames of blur at the cold-start of every clip.
+	*/
+	#prewarmQualityUpgrade() {
+		if (this.isInProductionRenderingMode()) return;
+		if (!this.src && !this.fileId) return;
+		this.getMediaEngine().then((engine) => {
+			if (!engine) return;
+			const sourceInMs = this.sourceInMs ?? 0;
+			this.#maybeScheduleQualityUpgrade(engine, sourceInMs);
+		}).catch(() => {});
 	}
 	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>
-      ` : ""}
+      ${this.loadingState.isLoading ? html`<div class="loading-overlay"><div class="loading-bar"></div></div>` : ""}
     `;
 	}
 	get canvasElement() {
@@ -548,79 +556,80 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		const { quality = "auto", signal: providedSignal } = options;
 		const signal = providedSignal ?? new AbortController().signal;
 		signal.throwIfAborted();
-		const mediaEngine = await this.getMediaEngine(signal);
-		signal.throwIfAborted();
-		if (!mediaEngine) throw new Error("No media engine available for frame capture");
-		const useMainTrack = quality === "main" || quality === "auto" && this.isInProductionRenderingMode();
-		let videoSample;
-		const { BufferedSeekingInput } = await import("./EFMedia/BufferedSeekingInput.js");
-		signal.throwIfAborted();
-		if (useMainTrack) {
-			const videoRendition = mediaEngine.getVideoRendition?.() || mediaEngine.videoRendition;
-			if (!videoRendition) throw new Error("No video rendition available");
-			const segmentId = mediaEngine.computeSegmentId(sourceTimeMs, videoRendition);
-			if (segmentId === void 0) throw new Error(`Cannot compute segment ID for time ${sourceTimeMs}ms`);
-			const seekingInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, videoRendition.id, async () => {
-				const initP = mediaEngine.fetchInitSegment(videoRendition, signal);
-				const mediaP = mediaEngine.fetchMediaSegment(segmentId, videoRendition, signal);
-				initP.catch(() => {});
-				mediaP.catch(() => {});
-				const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);
-				if (!initSegment || !mediaSegment) return;
-				return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
-					videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-					audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-					startTimeOffsetMs: videoRendition.startTimeOffsetMs
-				});
-			});
-			signal.throwIfAborted();
-			if (!seekingInput) throw new Error(`Failed to fetch video segments for time ${sourceTimeMs}ms`);
-			const videoTrack = await seekingInput.getFirstVideoTrack();
+		this.playbackController?.suspendSelfRender();
+		try {
+			const mediaEngine = await this.getMediaEngine(signal);
 			signal.throwIfAborted();
-			if (!videoTrack) throw new Error("No video track found in segment");
-			videoSample = await seekingInput.seek(videoTrack.id, sourceTimeMs);
+			if (!mediaEngine) throw new Error("No media engine available for frame capture");
+			const useMainTrack = quality === "main" || quality === "auto" && this.isInProductionRenderingMode();
+			let videoSample;
+			const { BufferedSeekingInput } = await import("./EFMedia/BufferedSeekingInput.js");
 			signal.throwIfAborted();
-		} else {
-			const scrubRendition = mediaEngine.getScrubVideoRendition?.();
-			if (!scrubRendition) return this.getVideoFrameAtSourceTime(sourceTimeMs, {
-				quality: "main",
-				signal
-			});
-			const scrubRenditionWithSrc = {
-				...scrubRendition,
-				src: mediaEngine.src
-			};
-			const segmentId = mediaEngine.computeSegmentId(sourceTimeMs, scrubRenditionWithSrc);
-			if (segmentId === void 0) throw new Error(`Cannot compute scrub segment ID for time ${sourceTimeMs}ms`);
-			const seekingInput = await scrubInputCache.getOrCreateInput(mediaEngine.src, segmentId, async () => {
-				const initP = mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal);
-				const mediaP = mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc, signal);
-				initP.catch(() => {});
-				mediaP.catch(() => {});
-				const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);
-				if (!initSegment || !mediaSegment) return;
-				return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
-					videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-					audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-					startTimeOffsetMs: scrubRendition.startTimeOffsetMs
+			if (useMainTrack) {
+				const videoTrack = mediaEngine.tracks.video;
+				if (!videoTrack) throw new Error("No video rendition available");
+				const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, videoTrack);
+				if (segmentId === void 0) throw new Error(`Cannot compute segment ID for time ${sourceTimeMs}ms`);
+				const seekingInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, String(videoTrack.id), async () => {
+					const initP = mediaEngine.transport.fetchInitSegment(videoTrack, signal);
+					const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack, signal);
+					initP.catch(() => {});
+					mediaP.catch(() => {});
+					const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);
+					if (!initSegment || !mediaSegment) return;
+					return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
+						videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+						audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+						startTimeOffsetMs: videoTrack.startTimeOffsetMs
+					});
 				});
-			});
-			signal.throwIfAborted();
-			if (!seekingInput) return this.getVideoFrameAtSourceTime(sourceTimeMs, {
-				quality: "main",
-				signal
-			});
-			const videoTrack = await seekingInput.getFirstVideoTrack();
-			signal.throwIfAborted();
-			if (!videoTrack) return this.getVideoFrameAtSourceTime(sourceTimeMs, {
-				quality: "main",
-				signal
-			});
-			videoSample = await seekingInput.seek(videoTrack.id, sourceTimeMs);
-			signal.throwIfAborted();
+				signal.throwIfAborted();
+				if (!seekingInput) throw new Error(`Failed to fetch video segments for time ${sourceTimeMs}ms`);
+				const seekingVideoTrack = await seekingInput.getFirstVideoTrack();
+				signal.throwIfAborted();
+				if (!seekingVideoTrack) throw new Error("No video track found in segment");
+				videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);
+				signal.throwIfAborted();
+			} else {
+				const scrubTrack = mediaEngine.tracks.scrub;
+				if (!scrubTrack) return this.getVideoFrameAtSourceTime(sourceTimeMs, {
+					quality: "main",
+					signal
+				});
+				const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, scrubTrack);
+				if (segmentId === void 0) throw new Error(`Cannot compute scrub segment ID for time ${sourceTimeMs}ms`);
+				const seekingInput = await scrubInputCache.getOrCreateInput(mediaEngine.src, segmentId, async () => {
+					const initP = mediaEngine.transport.fetchInitSegment(scrubTrack, signal);
+					const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack, signal);
+					initP.catch(() => {});
+					mediaP.catch(() => {});
+					const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);
+					if (!initSegment || !mediaSegment) return;
+					return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
+						videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+						audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+						startTimeOffsetMs: scrubTrack.startTimeOffsetMs
+					});
+				});
+				signal.throwIfAborted();
+				if (!seekingInput) return this.getVideoFrameAtSourceTime(sourceTimeMs, {
+					quality: "main",
+					signal
+				});
+				const seekingVideoTrack = await seekingInput.getFirstVideoTrack();
+				signal.throwIfAborted();
+				if (!seekingVideoTrack) return this.getVideoFrameAtSourceTime(sourceTimeMs, {
+					quality: "main",
+					signal
+				});
+				videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);
+				signal.throwIfAborted();
+			}
+			if (!videoSample) throw new Error(`No video sample found at ${sourceTimeMs}ms`);
+			return videoSample.toVideoFrame();
+		} finally {
+			this.playbackController?.resumeSelfRender();
 		}
-		if (!videoSample) throw new Error(`No video sample found at ${sourceTimeMs}ms`);
-		return videoSample.toVideoFrame();
 	}
 	/**
 	* Capture a video frame directly at a source media timestamp.
@@ -684,18 +693,14 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			log("prefetchScrubSegments: no media engine available");
 			return;
 		}
-		const scrubRendition = mediaEngine.getScrubVideoRendition();
-		if (!scrubRendition) {
+		const scrubTrack = mediaEngine.tracks.scrub;
+		if (!scrubTrack) {
 			log("prefetchScrubSegments: no scrub rendition available");
 			return;
 		}
-		const scrubRenditionWithSrc = {
-			...scrubRendition,
-			src: mediaEngine.src
-		};
 		const segmentIds = /* @__PURE__ */ new Set();
 		for (const ts of timestamps) {
-			const segmentId = mediaEngine.computeSegmentId(ts, scrubRenditionWithSrc);
+			const segmentId = mediaEngine.index.segmentAt(ts, scrubTrack);
 			if (segmentId !== void 0) segmentIds.add(segmentId);
 		}
 		if (segmentIds.size === 0) {
@@ -703,7 +708,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			return;
 		}
 		const firstSegmentId = Array.from(segmentIds)[0];
-		if (mediaEngine.isSegmentCached(firstSegmentId, scrubRenditionWithSrc)) {
+		if (mediaEngine.transport.isCached(firstSegmentId, scrubTrack)) {
 			log("prefetchScrubSegments: scrub track already cached");
 			return;
 		}
@@ -722,7 +727,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		}));
 		const fetchSignal = signal ?? new AbortController().signal;
 		try {
-			await mediaEngine.fetchMediaSegment(firstSegmentId, scrubRenditionWithSrc, fetchSignal);
+			await mediaEngine.transport.fetchMediaSegment(firstSegmentId, scrubTrack, fetchSignal);
 			log(`prefetchScrubSegments: scrub track loaded`);
 		} catch (error) {
 			log(`prefetchScrubSegments: failed to load scrub track`, error);
@@ -746,25 +751,32 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* Called when returning a scrub sample - checks if state has changed and submits tasks.
 	*/
 	#maybeScheduleQualityUpgrade(mediaEngine, sourceTimeMs) {
-		const mainRendition = mediaEngine.videoRendition;
-		if (!mainRendition) return;
-		const segmentId = mediaEngine.computeSegmentId(sourceTimeMs, mainRendition);
+		if (this.#renderingToVideo) return;
+		const mainTrack = mediaEngine.tracks.video;
+		if (!mainTrack) return;
+		const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, mainTrack);
 		if (segmentId === void 0) return;
 		const startTimeMs = this.startTimeMs;
-		if (!(this.#upgradeState === null || this.#upgradeState.segmentId !== segmentId || this.#upgradeState.startTimeMs !== startTimeMs)) return;
-		const segments = this.#computeLookaheadSegments(mediaEngine, sourceTimeMs, mainRendition);
+		if (!(this.#upgradeState === null || this.#upgradeState.segmentId !== segmentId || this.#upgradeState.startTimeMs !== startTimeMs)) {
+			const currentTaskKey = `${this.#upgradeOwnerId}:${segmentId}:${mainTrack.id}`;
+			const scheduler$1 = this.rootTimegroup?.qualityUpgradeScheduler;
+			if (scheduler$1?.isActive(currentTaskKey) || scheduler$1?.isPending(currentTaskKey)) return;
+			this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);
+			this.#upgradeState = null;
+		}
+		const segments = this.#computeLookaheadSegments(mediaEngine, sourceTimeMs, mainTrack);
 		if (segments.length === 0) return;
 		const tasks = segments.map((seg) => ({
-			key: `${this.id}:${seg.segmentId}:${mainRendition.id}`,
+			key: `${this.#upgradeOwnerId}:${seg.segmentId}:${mainTrack.id}`,
 			fetch: async (signal) => {
-				await mediaEngine.fetchInitSegment(mainRendition, signal);
-				await mediaEngine.fetchMediaSegment(seg.segmentId, mainRendition, signal);
+				await mediaEngine.transport.fetchInitSegment(mainTrack, signal);
+				await mediaEngine.transport.fetchMediaSegment(seg.segmentId, mainTrack, signal);
 			},
 			deadlineMs: seg.deadlineMs,
-			owner: this.id
+			owner: this.#upgradeOwnerId
 		}));
 		const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;
-		if (scheduler) scheduler.replaceForOwner(this.id, tasks);
+		if (scheduler) scheduler.replaceForOwner(this.#upgradeOwnerId, tasks);
 		else this.#fetchStandalone(tasks);
 		this.#upgradeState = {
 			sourceTimeMs,
@@ -776,24 +788,24 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	/**
 	* Compute lookahead segments with deadlines in timeline space.
 	*/
-	#computeLookaheadSegments(mediaEngine, currentSourceTimeMs, rendition, maxLookahead = 5) {
+	#computeLookaheadSegments(mediaEngine, currentSourceTimeMs, track, maxLookahead = 5) {
 		const results = [];
 		const playheadMs = this.rootTimegroup?.currentTimeMs ?? 0;
 		const seen = /* @__PURE__ */ new Set();
 		let probeTimeMs = currentSourceTimeMs;
 		while (seen.size < maxLookahead) {
-			const segmentId = mediaEngine.computeSegmentId(probeTimeMs, rendition);
+			const segmentId = mediaEngine.index.segmentAt(probeTimeMs, track);
 			if (segmentId === void 0) break;
 			if (seen.has(segmentId)) break;
 			seen.add(segmentId);
-			if (!mediaEngine.isSegmentCached(segmentId, rendition)) {
+			if (!mediaEngine.transport.isCached(segmentId, track)) {
 				const deadlineMs = playheadMs + (probeTimeMs - currentSourceTimeMs);
 				results.push({
 					segmentId,
 					deadlineMs
 				});
 			}
-			const thisDuration = rendition.segmentDurationsMs?.[segmentId - 1] ?? rendition.segmentDurationMs ?? 2e3;
+			const thisDuration = track.segmentDurationsMs?.[segmentId - 1] ?? track.segmentDurationMs ?? 2e3;
 			probeTimeMs += thisDuration;
 		}
 		return results;
@@ -812,14 +824,14 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 					await task.fetch(signal);
 				} catch {}
 			}
-			if (!signal.aborted) this.playbackController?.runThrottledFrameTask();
+			if (!signal.aborted) this.playbackController?.runThrottledFrameTask().catch(() => {});
 		})().catch(() => {});
 	}
 	/**
 	* Invalidate upgrade state and optionally cancel queued tasks.
 	*/
 	#invalidateUpgradeState(reason) {
-		if (reason === "src-change" || reason === "disconnect") this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.id);
+		if (reason === "src-change" || reason === "disconnect") this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);
 		this.#upgradeState = null;
 	}
 	/**
@@ -862,8 +874,13 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	* @public
 	*/
 	async renderToVideo(options) {
-		const { renderVideoToVideo } = await import("../preview/renderVideoToVideo.js");
-		return renderVideoToVideo(this, options);
+		this.#renderingToVideo = true;
+		try {
+			const { renderVideoToVideo } = await import("../preview/renderVideoToVideo.js");
+			return await renderVideoToVideo(this, options);
+		} finally {
+			this.#renderingToVideo = false;
+		}
 	}
 };
 __decorate([state()], EFVideo.prototype, "loadingState", void 0);