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

package/dist/EF_FRAMEGEN.js

@@ -96,7 +96,7 @@ var EFFramegen = class {
 		BRIDGE.onInitialize(async (renderOptions, traceContext, otelEndpoint) => {
 			if (renderOptions.enableTracing && otelEndpoint) {
 				enableTracing();
-				setupBrowserTracing({
+				await setupBrowserTracing({
 					otelEndpoint,
 					serviceName: "telecine-browser",
 					bridge: BRIDGE,
@@ -136,8 +136,7 @@ var EFFramegen = class {
 			});
 		});
 		BRIDGE.onTriggerCanvas((traceContext) => {
-			const parentContext = extractParentContext(traceContext);
-			withSpan("browser.canvas.trigger", {}, parentContext, async () => {
+			withSpan("browser.canvas.trigger", {}, extractParentContext(traceContext), async () => {
 				this.triggerCanvas.trigger();
 			}).catch((error) => {
 				console.error("[EF_FRAMEGEN.triggerCanvas] error:", error);

package/dist/attachContextRoot.d.ts

@@ -0,0 +1 @@
+export declare const attachContextRoot: () => void;

package/dist/attachContextRoot.js

@@ -0,0 +1,9 @@
+import { ContextRoot } from "@lit/context";
+var contextRoot = null;
+const attachContextRoot = () => {
+	if (typeof window === "undefined") return;
+	if (contextRoot !== null) return;
+	contextRoot = new ContextRoot();
+	contextRoot.attach(document.body);
+};
+export { attachContextRoot };

package/dist/elements/ContextProxiesController.d.ts

@@ -20,7 +20,7 @@ export type ContextProxyConfig = {
  *   // @ts-expect-error controller is intentionally not referenced directly
  *   #contextProxyController = new ContextProxyController(this, {
  *     target: () => this.targetElement,
- *     contexts: [playingContext, loopContext, targetTimegroupContext]
+ *     contexts: [playingContext, loopContext, targetTemporalContext]
  *   });
  * }
  * ```
@@ -28,7 +28,6 @@ export type ContextProxyConfig = {
 export declare class ContextProxyController implements ReactiveController {
     private host;
     private proxyMap;
-    private boundHandler;
     private pendingRequests;
     constructor(host: LitElement, config: ContextProxyConfig);
     hostConnected(): void;

package/dist/elements/EFAudio.js

@@ -1,7 +1,7 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
-import { EFMedia } from "./EFMedia.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { TWMixin } from "../gui/TWMixin2.js";
+import { EFMedia } from "./EFMedia.js";
 import { Task } from "@lit/task";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/elements/EFCaptions.d.ts

@@ -66,8 +66,6 @@ export declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
 declare const EFCaptions_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 EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
-    displayMode: "word" | "segment" | "context";
-    contextWords: number;
     targetSelector: string;
     set target(value: string);
     wordStyle: string;
@@ -100,7 +98,7 @@ export declare class EFCaptions extends EFCaptions_base {
     private customCaptionsDataTask;
     private transcriptionFragmentDataTask;
     unifiedCaptionsDataTask: Task<readonly [Caption | null | undefined, Caption | null | undefined], Caption | null | undefined>;
-    frameTask: Task<TaskStatus[], void>;
+    frameTask: Task<readonly [TaskStatus, number], void>;
     connectedCallback(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     updateTextContainers(): void;

package/dist/elements/EFCaptions.js

@@ -1,7 +1,7 @@
 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 { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { EFTemporal, flushStartTimeMsCache } from "./EFTemporal.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { flushSequenceDurationCache } from "./EFTimegroup.js";
 import { EFAudio } from "./EFAudio.js";
@@ -30,11 +30,12 @@ var EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitEl
 		this.styles = [css`
       :host {
         display: inline-block;
-        white-space: pre;
-        transform-origin: center;
+        white-space: normal;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `];
 	}
@@ -46,7 +47,7 @@ var EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitEl
 		this.hidden = false;
 		const seedValue = this.wordIndex * 9007 % 233 / 233;
 		this.style.setProperty("--ef-word-seed", seedValue.toString());
-		return html` ${this.wordText.trim()} `;
+		return html`${this.wordText}`;
 	}
 	get startTimeMs() {
 		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.wordStartMs || 0);
@@ -90,10 +91,9 @@ var EFCaptionsSegment = class EFCaptionsSegment$1 extends EFTemporal(LitElement)
 	static {
 		this.styles = [css`
       :host {
-        display: block;
-      }
-      :host([hidden]) {
-        display: none;
+        display: inline-block;
+        white-space: normal;
+        line-height: 1;
       }
     `];
 	}
@@ -145,9 +145,11 @@ var EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCa
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `];
 	}
@@ -157,7 +159,9 @@ var EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCa
 			return;
 		}
 		this.hidden = false;
-		return html` ${this.segmentText}`;
+		const activeWord = this.closest("ef-captions")?.querySelector("ef-captions-active-word");
+		const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
+		return html`${this.segmentText}${hasActiveWord ? " " : ""}`;
 	}
 	get startTimeMs() {
 		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
@@ -199,9 +203,11 @@ var EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCapt
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `];
 	}
@@ -211,7 +217,8 @@ var EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCapt
 			return;
 		}
 		this.hidden = false;
-		return html`${this.segmentText} `;
+		const activeWord = this.closest("ef-captions")?.querySelector("ef-captions-active-word");
+		return html`${activeWord?.wordText && !activeWord.hidden ? " " : ""}${this.segmentText}`;
 	}
 	get startTimeMs() {
 		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
@@ -243,8 +250,6 @@ EFCaptionsAfterActiveWord = __decorate([customElement("ef-captions-after-active-
 var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), { assetType: "caption_files" }) {
 	constructor(..._args5) {
 		super(..._args5);
-		this.displayMode = "segment";
-		this.contextWords = 3;
 		this.targetSelector = "";
 		this.wordStyle = "";
 		this.captionsSrc = "";
@@ -259,8 +264,7 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			args: () => [this.target, this.fetch],
 			task: async ([_target, fetch], { signal }) => {
 				if (!this.targetElement) return null;
-				const md5Path = `/@ef-asset/${this.targetElement.src ?? ""}`;
-				return (await fetch(md5Path, {
+				return (await fetch(`/@ef-asset/${this.targetElement.src ?? ""}`, {
 					method: "HEAD",
 					signal
 				})).headers.get("etag") ?? void 0;
@@ -323,8 +327,7 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			],
 			task: async ([transcription, fragmentIndex, fetch], { signal }) => {
 				if (transcription === null || transcription === void 0 || fragmentIndex === null || fragmentIndex === void 0) return null;
-				const fragmentPath = this.transcriptionFragmentPath(transcription.id, fragmentIndex);
-				return (await fetch(fragmentPath, { signal })).json();
+				return (await fetch(this.transcriptionFragmentPath(transcription.id, fragmentIndex), { signal })).json();
 			}
 		});
 		this.unifiedCaptionsDataTask = new Task(this, {
@@ -338,9 +341,10 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		});
 		this.frameTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
-			args: () => [this.unifiedCaptionsDataTask.status],
+			args: () => [this.unifiedCaptionsDataTask.status, this.ownCurrentTimeMs],
 			task: async () => {
 				await this.unifiedCaptionsDataTask.taskComplete;
+				this.updateTextContainers();
 			}
 		});
 	}
@@ -348,22 +352,15 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.styles = [css`
       :host {
         display: inline-flex;
-        width: fit-content;
-        align-items: baseline;
+        white-space: normal;
+        line-height: 1;
+        gap: 0;
       }
       ::slotted(*) {
+        display: inline-block;
         margin: 0;
         padding: 0;
       }
-      ::slotted(ef-captions-active-word) {
-        min-width: 0.5ch; /* Maintain minimum width when empty */
-        min-height: 1em; /* Maintain height for baseline alignment */
-      }
-      ::slotted(ef-captions-active-word[hidden]) {
-        opacity: 0; /* Hide when empty but maintain layout */
-        min-width: 0.5ch;
-        min-height: 1em;
-      }
     `];
 	}
 	set target(value) {
@@ -390,6 +387,16 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		const target = this.targetSelector ? document.getElementById(this.targetSelector) : null;
 		if (target && (target instanceof EFAudio || target instanceof EFVideo)) new CrossUpdateController(target, this);
 		else if (this.hasCustomCaptionsData && this.rootTimegroup) new CrossUpdateController(this.rootTimegroup, this);
+		new MutationObserver(() => {
+			if (this.style.display === "none") {
+				this.style.removeProperty("display");
+				this.style.opacity = "0";
+				this.style.pointerEvents = "none";
+			}
+		}).observe(this, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
 	}
 	updated(changedProperties) {
 		this.updateTextContainers();
@@ -407,7 +414,7 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	updateTextContainers() {
 		const captionsData = this.unifiedCaptionsDataTask.value;
 		if (!captionsData) return;
-		const currentTimeSec = (this.targetElement ? this.targetElement.currentSourceTimeMs : this.ownCurrentTimeMs) / 1e3;
+		const currentTimeSec = this.ownCurrentTimeMs / 1e3;
 		const currentWord = captionsData.word_segments.find((word) => currentTimeSec >= word.start && currentTimeSec < word.end);
 		const currentSegment = captionsData.segments.find((segment) => currentTimeSec >= segment.start && currentTimeSec < segment.end);
 		for (const wordContainer of this.activeWordContainers) if (currentWord) {
@@ -423,14 +430,17 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			wordContainer.wordEndMs = 0;
 			wordContainer.requestUpdate();
 		}
-		for (const segmentContainer of this.segmentContainers) if (currentSegment) {
-			segmentContainer.segmentText = currentSegment.text;
-			segmentContainer.segmentStartMs = currentSegment.start * 1e3;
-			segmentContainer.segmentEndMs = currentSegment.end * 1e3;
-		} else {
-			segmentContainer.segmentText = "";
-			segmentContainer.segmentStartMs = 0;
-			segmentContainer.segmentEndMs = 0;
+		for (const segmentContainer of this.segmentContainers) {
+			if (currentSegment) {
+				segmentContainer.segmentText = currentSegment.text;
+				segmentContainer.segmentStartMs = currentSegment.start * 1e3;
+				segmentContainer.segmentEndMs = currentSegment.end * 1e3;
+			} else {
+				segmentContainer.segmentText = "";
+				segmentContainer.segmentStartMs = 0;
+				segmentContainer.segmentEndMs = 0;
+			}
+			segmentContainer.requestUpdate();
 		}
 		if (currentWord && currentSegment) {
 			const segmentWords = captionsData.word_segments.filter((word) => word.start >= currentSegment.start && word.end <= currentSegment.end);
@@ -442,11 +452,13 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 					container.segmentText = beforeWords;
 					container.segmentStartMs = currentWord.start * 1e3;
 					container.segmentEndMs = currentWord.end * 1e3;
+					container.requestUpdate();
 				}
 				for (const container of this.afterActiveWordContainers) {
 					container.segmentText = afterWords;
 					container.segmentStartMs = currentWord.start * 1e3;
 					container.segmentEndMs = currentWord.end * 1e3;
+					container.requestUpdate();
 				}
 			}
 		} else if (currentSegment) {
@@ -458,11 +470,13 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 					container.segmentText = "";
 					container.segmentStartMs = currentSegment.start * 1e3;
 					container.segmentEndMs = currentSegment.end * 1e3;
+					container.requestUpdate();
 				}
 				for (const container of this.afterActiveWordContainers) {
 					container.segmentText = allWords;
 					container.segmentStartMs = currentSegment.start * 1e3;
 					container.segmentEndMs = currentSegment.end * 1e3;
+					container.requestUpdate();
 				}
 			} else {
 				const allCompletedWords = segmentWords.map((w) => w.text.trim()).join(" ");
@@ -470,11 +484,13 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 					container.segmentText = allCompletedWords;
 					container.segmentStartMs = currentSegment.start * 1e3;
 					container.segmentEndMs = currentSegment.end * 1e3;
+					container.requestUpdate();
 				}
 				for (const container of this.afterActiveWordContainers) {
 					container.segmentText = "";
 					container.segmentStartMs = currentSegment.start * 1e3;
 					container.segmentEndMs = currentSegment.end * 1e3;
+					container.requestUpdate();
 				}
 			}
 		} else {
@@ -482,11 +498,13 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 				container.segmentText = "";
 				container.segmentStartMs = 0;
 				container.segmentEndMs = 0;
+				container.requestUpdate();
 			}
 			for (const container of this.afterActiveWordContainers) {
 				container.segmentText = "";
 				container.segmentStartMs = 0;
 				container.segmentEndMs = 0;
+				container.requestUpdate();
 			}
 		}
 	}
@@ -518,16 +536,6 @@ var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		return !!(this.captionsData || this.captionsScript || this.customCaptionsDataTask.value);
 	}
 };
-__decorate([property({
-	type: String,
-	attribute: "display-mode",
-	reflect: true
-})], EFCaptions.prototype, "displayMode", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "context-words",
-	reflect: true
-})], EFCaptions.prototype, "contextWords", void 0);
 __decorate([property({
 	type: String,
 	attribute: "target",

package/dist/elements/EFImage.js

@@ -1,7 +1,7 @@
 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 { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { EFTemporal } from "./EFTemporal.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";

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 data = await (await host.fetch(url)).json();
-		return new AssetIdMediaEngine(host, assetId, data, apiHost);
+		return new AssetIdMediaEngine(host, assetId, await (await host.fetch(url)).json(), apiHost);
 	}
 	constructor(host, assetId, data, apiHost) {
 		super(host, assetId);

package/dist/elements/EFMedia/AssetMediaEngine.js

@@ -135,9 +135,7 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 		const track = this.data[rendition.trackId];
 		if (!track) throw new Error("Track not found");
 		const { timescale, segments } = track;
-		const startTimeOffsetMs = "startTimeOffsetMs" in rendition && rendition.startTimeOffsetMs || 0;
-		const offsetSeekTimeMs = roundToMilliseconds(seekTimeMs + startTimeOffsetMs);
-		const scaledSeekTime = convertToScaledTime(offsetSeekTimeMs, timescale);
+		const scaledSeekTime = convertToScaledTime(roundToMilliseconds(seekTimeMs + ("startTimeOffsetMs" in rendition && rendition.startTimeOffsetMs || 0)), timescale);
 		for (let i = segments.length - 1; i >= 0; i--) {
 			const segment = segments[i];
 			const segmentEndTime = segment.cts + segment.duration;

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

@@ -37,7 +37,7 @@ export declare class BufferedSeekingInput {
     getVideoTrack(trackId: number): Promise<InputVideoTrack>;
     getFirstVideoTrack(): Promise<InputVideoTrack | undefined>;
     getFirstAudioTrack(): Promise<InputAudioTrack | undefined>;
-    getTrackIterator(track: InputTrack): AsyncIterator<MediaSample, any, undefined>;
+    getTrackIterator(track: InputTrack): AsyncIterator<MediaSample, any, any>;
     createTrackSampleSink(track: InputTrack): AudioSampleSink | VideoSampleSink;
     createTrackIterator(track: InputTrack): AsyncGenerator<import('mediabunny').VideoSample, void, unknown> | AsyncGenerator<import('mediabunny').AudioSample, void, unknown>;
     createTrackBuffer(track: InputTrack): SampleBuffer;

package/dist/elements/EFMedia/BufferedSeekingInput.js

@@ -14,9 +14,8 @@ var BufferedSeekingInput = class {
 		this.trackBuffers = /* @__PURE__ */ new Map();
 		this.trackIteratorCreationPromises = /* @__PURE__ */ new Map();
 		this.trackSeekPromises = /* @__PURE__ */ new Map();
-		const bufferSource = new BufferSource(arrayBuffer);
 		this.input = new Input({
-			source: bufferSource,
+			source: new BufferSource(arrayBuffer),
 			formats: [MP4]
 		});
 		this.options = {
@@ -99,8 +98,7 @@ var BufferedSeekingInput = class {
 			timeMs,
 			startTimeOffsetMs: this.startTimeOffsetMs
 		}, void 0, async (span) => {
-			const mediaTimeMs = timeMs + this.startTimeOffsetMs;
-			const roundedMediaTimeMs = roundToMilliseconds(mediaTimeMs);
+			const roundedMediaTimeMs = roundToMilliseconds(timeMs + this.startTimeOffsetMs);
 			span.setAttribute("roundedMediaTimeMs", roundedMediaTimeMs);
 			const existingSeek = this.trackSeekPromises.get(trackId);
 			if (existingSeek) {

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

@@ -24,14 +24,11 @@ const makeAudioBufferTask = (host) => {
 			const mediaEngine = await getLatestMediaEngine(host, signal);
 			if (!mediaEngine.audioRendition) return currentState;
 			const engineConfig = mediaEngine.getBufferConfig();
-			const bufferDurationMs = engineConfig.audioBufferDurationMs;
-			const maxParallelFetches = engineConfig.maxAudioBufferFetches;
-			const currentConfig = {
-				bufferDurationMs,
-				maxParallelFetches,
+			return manageMediaBuffer(seekTimeMs, {
+				bufferDurationMs: engineConfig.audioBufferDurationMs,
+				maxParallelFetches: engineConfig.maxAudioBufferFetches,
 				enableBuffering: host.enableAudioBuffering
-			};
-			return manageMediaBuffer(seekTimeMs, currentConfig, currentState, host.intrinsicDurationMs || 1e4, signal, {
+			}, currentState, host.intrinsicDurationMs || 1e4, signal, {
 				computeSegmentId: async (timeMs, rendition) => {
 					return (await getLatestMediaEngine(host, signal)).computeSegmentId(timeMs, rendition);
 				},

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

@@ -13,8 +13,7 @@ function processFFTData(fftData, zeroThresholdPercent = .1) {
 		break;
 	}
 	if (cutoffIndex < zeroThresholdCount) return fftData;
-	const goodData = fftData.slice(0, cutoffIndex);
-	const resampledData = interpolateData(goodData, fftData.length);
+	const resampledData = interpolateData(fftData.slice(0, cutoffIndex), fftData.length);
 	const attenuationStartIndex = Math.floor(totalBins * .9);
 	for (let i = attenuationStartIndex; i < totalBins; i++) {
 		const attenuationProgress = (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + .2;

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

@@ -3,8 +3,7 @@ var fetchAudioSegmentData = async (segmentIds, mediaEngine, signal) => {
 	if (!audioRendition) throw new Error("Audio rendition not available");
 	const segmentData = /* @__PURE__ */ new Map();
 	const fetchPromises = segmentIds.map(async (segmentId) => {
-		const arrayBuffer = await mediaEngine.fetchMediaSegment(segmentId, audioRendition, signal);
-		return [segmentId, arrayBuffer];
+		return [segmentId, await mediaEngine.fetchMediaSegment(segmentId, audioRendition, signal)];
 	});
 	const fetchedSegments = await Promise.all(fetchPromises);
 	signal.throwIfAborted();
@@ -25,17 +24,14 @@ const fetchAudioSpanningTime = async (host, fromMs, toMs, signal) => {
 	if (segmentRanges.length === 0) throw new Error(`No segments found for time range ${fromMs}-${toMs}ms`);
 	const segmentIds = segmentRanges.map((r) => r.segmentId);
 	const segmentData = await fetchAudioSegmentData(segmentIds, mediaEngine, signal);
-	const orderedSegments = segmentIds.map((id) => {
+	const blob = createAudioSpanBlob(initSegment, segmentIds.map((id) => {
 		const segment = segmentData.get(id);
 		if (!segment) throw new Error(`Missing segment data for segment ID ${id}`);
 		return segment;
-	});
-	const blob = createAudioSpanBlob(initSegment, orderedSegments);
-	const actualStartMs = Math.min(...segmentRanges.map((r) => r.startMs));
-	const actualEndMs = Math.max(...segmentRanges.map((r) => r.endMs));
+	}));
 	return {
-		startMs: actualStartMs,
-		endMs: actualEndMs,
+		startMs: Math.min(...segmentRanges.map((r) => r.startMs)),
+		endMs: Math.max(...segmentRanges.map((r) => r.endMs)),
 		blob
 	};
 };

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

@@ -19,9 +19,7 @@ const manageMediaBuffer = async (seekTimeMs, config, currentState, durationMs, s
 	if (!config.enableBuffering) return currentState;
 	const rendition = await deps.getRendition();
 	if (!rendition) return currentState;
-	const endTimeMs = seekTimeMs + config.bufferDurationMs;
-	const uncachedSegments = (await computeSegmentRangeAsync(seekTimeMs, endTimeMs, durationMs, rendition, deps.computeSegmentId)).filter((segmentId) => !deps.isSegmentCached(segmentId, rendition));
-	const newQueue = computeBufferQueue(uncachedSegments, currentState.requestedSegments);
+	const newQueue = computeBufferQueue((await computeSegmentRangeAsync(seekTimeMs, seekTimeMs + config.bufferDurationMs, durationMs, rendition, deps.computeSegmentId)).filter((segmentId) => !deps.isSegmentCached(segmentId, rendition)), currentState.requestedSegments);
 	const newRequestedSegments = new Set(currentState.requestedSegments);
 	const newActiveRequests = new Set(currentState.activeRequests);
 	const remainingQueue = [...newQueue];

package/dist/elements/EFMedia/videoTasks/makeVideoBufferTask.js

@@ -22,14 +22,11 @@ const makeVideoBufferTask = (host) => {
 		task: async ([seekTimeMs], { signal }) => {
 			if (EF_RENDERING()) return currentState;
 			const engineConfig = (await getLatestMediaEngine(host, signal)).getBufferConfig();
-			const bufferDurationMs = engineConfig.videoBufferDurationMs;
-			const maxParallelFetches = engineConfig.maxVideoBufferFetches;
-			const currentConfig = {
-				bufferDurationMs,
-				maxParallelFetches,
+			return manageMediaBuffer(seekTimeMs, {
+				bufferDurationMs: engineConfig.videoBufferDurationMs,
+				maxParallelFetches: engineConfig.maxVideoBufferFetches,
 				enableBuffering: host.enableVideoBuffering
-			};
-			return manageMediaBuffer(seekTimeMs, currentConfig, currentState, host.intrinsicDurationMs || 1e4, signal, {
+			}, currentState, host.intrinsicDurationMs || 1e4, signal, {
 				computeSegmentId: async (timeMs, rendition) => {
 					return (await getLatestMediaEngine(host, signal)).computeSegmentId(timeMs, rendition);
 				},

package/dist/elements/EFMedia.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValueMap } from 'lit';
+import { ControllableInterface } from '../gui/Controllable.js';
 import { AudioSpan } from '../transcoding/types/index.ts';
 import { UrlGenerator } from '../transcoding/utils/UrlGenerator.ts';
 declare global {
@@ -9,6 +10,7 @@ export declare class IgnorableError extends Error {
 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 {
+    get efContext(): ControllableInterface | null;
     static readonly VIDEO_SAMPLE_BUFFER_SIZE = 30;
     static readonly AUDIO_SAMPLE_BUFFER_SIZE = 120;
     static get observedAttributes(): string[];
@@ -84,5 +86,22 @@ export declare class EFMedia extends EFMedia_base {
      * Returns undefined if no audio rendition is available
      */
     fetchAudioSpanningTime(fromMs: number, toMs: number, signal?: AbortSignal): Promise<AudioSpan | undefined>;
+    /**
+     * Wait for media engine to load and determine duration
+     * Ensures media is ready for playback
+     */
+    waitForMediaDurations(): Promise<void>;
+    /**
+     * Returns media elements for playback audio rendering
+     * For standalone media, returns [this]; for timegroups, returns all descendants
+     * Used by PlaybackController for audio-driven playback
+     */
+    getMediaElements(): EFMedia[];
+    /**
+     * Render audio buffer for playback
+     * Called by PlaybackController during live playback
+     * Delegates to shared renderTemporalAudio utility for consistent behavior
+     */
+    renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
 }
 export {};

package/dist/elements/EFMedia.js

@@ -1,4 +1,6 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { efContext } from "../gui/efContext.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
 import { withSpan } from "../otel/tracingHelpers.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
@@ -13,9 +15,10 @@ import { makeAudioSegmentIdTask } from "./EFMedia/audioTasks/makeAudioSegmentIdT
 import { makeAudioTimeDomainAnalysisTask } from "./EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.js";
 import { fetchAudioSpanningTime } from "./EFMedia/shared/AudioSpanUtils.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
+import { renderTemporalAudio } from "./renderTemporalAudio.js";
 import { EFTargetable } from "./TargetController.js";
+import { provide } from "@lit/context";
 import { LitElement, css } from "lit";
 import { property, state } from "lit/decorators.js";
 var freqWeightsCache = /* @__PURE__ */ new Map();
@@ -48,6 +51,9 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 		this.assetId = null;
 		this._desiredSeekTimeMs = 0;
 	}
+	get efContext() {
+		return this.rootTimegroup ?? this;
+	}
 	static {
 		this.VIDEO_SAMPLE_BUFFER_SIZE = 30;
 	}
@@ -152,7 +158,18 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 			return fetchAudioSpanningTime(this, fromMs, toMs, signal);
 		});
 	}
+	async waitForMediaDurations() {
+		if (this.mediaEngineTask.value) return;
+		await this.mediaEngineTask.run();
+	}
+	getMediaElements() {
+		return [this];
+	}
+	async renderAudio(fromMs, toMs) {
+		return renderTemporalAudio(this, fromMs, toMs);
+	}
 };
+__decorate([provide({ context: efContext })], EFMedia.prototype, "efContext", null);
 __decorate([property({
 	type: Number,
 	attribute: "audio-buffer-duration"

package/dist/elements/EFSourceMixin.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { Task } from "@lit/task";
 import { property } from "lit/decorators/property.js";
 function EFSourceMixin(superClass, options) {

package/dist/elements/EFSurface.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { TargetController } from "./TargetController.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";

package/dist/elements/EFTemporal.browsertest.d.ts

@@ -8,4 +8,15 @@ declare global {
         "ten-seconds": TenSeconds;
     }
 }
+declare const TestLifecycleChild_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
+declare class TestLifecycleChild extends TestLifecycleChild_base {
+    role: "root" | "child" | null;
+    didBecomeRoot(): void;
+    didBecomeChild(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-root-lifecycle": TestLifecycleChild;
+    }
+}
 export {};