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

package/dist/elements/EFVideo.d.ts

@@ -93,10 +93,20 @@ export declare class EFVideo extends EFVideo_base {
      * Still used by EFCaptions - maps to unified video seek task
      */
     get fragmentIndexTask(): Task<readonly [number], import('mediabunny').VideoSample | undefined>;
+    /**
+     * Helper method for tests: wait for the current frame to be ready
+     * This encapsulates the complexity of ensuring the video has updated
+     * and its frameTask has completed.
+     *
+     * @returns Promise that resolves when the frame is ready
+     */
+    waitForFrameReady(): Promise<void>;
     /**
      * Clean up resources when component is disconnected
      */
     disconnectedCallback(): void;
+    didBecomeRoot(): void;
+    didBecomeChild(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/elements/EFVideo.js

@@ -1,7 +1,8 @@
-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 { TWMixin } from "../gui/TWMixin2.js";
 import { withSpan, withSpanSync } from "../otel/tracingHelpers.js";
 import { EFMedia } from "./EFMedia.js";
-import { TWMixin } from "../gui/TWMixin2.js";
+import { updateAnimations } from "./updateAnimations.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
 import { makeScrubVideoBufferTask } from "./EFMedia/videoTasks/makeScrubVideoBufferTask.js";
 import { makeScrubVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.js";
@@ -125,6 +126,8 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 						span.setAttribute("aborted", true);
 						return;
 					}
+					this.paint(this.desiredSeekTimeMs, span);
+					if (!this.parentTimegroup) updateAnimations(this);
 					const t4 = performance.now();
 					this.paint(_desiredSeekTimeMs, span);
 					const t5 = performance.now();
@@ -303,10 +306,20 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	get fragmentIndexTask() {
 		return this.unifiedVideoSeekTask;
 	}
+	async waitForFrameReady() {
+		await this.updateComplete;
+		await this.frameTask.run();
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.delayedLoadingState.clearAllLoading();
 	}
+	didBecomeRoot() {
+		super.didBecomeRoot();
+	}
+	didBecomeChild() {
+		super.didBecomeChild();
+	}
 };
 __decorate([property({
 	type: Number,

package/dist/elements/EFWaveform.js

@@ -1,8 +1,8 @@
 import { EF_RENDERING } from "../EF_RENDERING.js";
-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 { TargetController } from "./TargetController.js";
 import { TWMixin } from "../gui/TWMixin2.js";
+import { TargetController } from "./TargetController.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
@@ -271,13 +271,11 @@ var EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		frequencyData.forEach((value, i) => {
 			const normalizedValue = Math.min(value / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * waveHeight;
-			const y = (waveHeight - barHeight) / 2;
+			const y = (waveHeight - normalizedValue * waveHeight) / 2;
 			if (i === 0) path.moveTo(x, y);
 			else {
 				const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
-				const prevBarHeight = Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1) * waveHeight;
-				const prevY = (waveHeight - prevBarHeight) / 2;
+				const prevY = (waveHeight - Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1) * waveHeight) / 2;
 				const xc = (prevX + x) / 2;
 				const yc = (prevY + y) / 2;
 				path.quadraticCurveTo(prevX, prevY, xc, yc);
@@ -286,13 +284,11 @@ var EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		for (let i = frequencyData.length - 1; i >= 0; i--) {
 			const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * waveHeight;
-			const y = (waveHeight + barHeight) / 2;
+			const y = (waveHeight + normalizedValue * waveHeight) / 2;
 			if (i === frequencyData.length - 1) path.lineTo(x, y);
 			else {
 				const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
-				const nextBarHeight = Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1) * waveHeight;
-				const nextY = (waveHeight + nextBarHeight) / 2;
+				const nextY = (waveHeight + Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1) * waveHeight) / 2;
 				const xc = (nextX + x) / 2;
 				const yc = (nextY + y) / 2;
 				path.quadraticCurveTo(nextX, nextY, xc, yc);
@@ -319,13 +315,11 @@ var EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		frequencyData.forEach((value, i) => {
 			const normalizedValue = Math.min(value / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * (waveHeight / 2);
-			const y = (waveHeight - barHeight * 2) / 2;
+			const y = (waveHeight - normalizedValue * (waveHeight / 2) * 2) / 2;
 			if (i === 0) path.moveTo(x, y);
 			else {
 				const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
-				const prevBarHeight = (frequencyData[i - 1] ?? 0) / 255 * (waveHeight / 2);
-				const prevY = (waveHeight - prevBarHeight * 2) / 2;
+				const prevY = (waveHeight - (frequencyData[i - 1] ?? 0) / 255 * (waveHeight / 2) * 2) / 2;
 				const xc = (prevX + x) / 2;
 				const yc = (prevY + y) / 2;
 				path.quadraticCurveTo(prevX, prevY, xc, yc);
@@ -334,13 +328,11 @@ var EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		for (let i = frequencyData.length - 1; i >= 0; i--) {
 			const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * (waveHeight / 2);
-			const y = (waveHeight + barHeight * 2) / 2;
+			const y = (waveHeight + normalizedValue * (waveHeight / 2) * 2) / 2;
 			if (i === frequencyData.length - 1) path.lineTo(x, y);
 			else {
 				const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
-				const nextBarHeight = (frequencyData[i + 1] ?? 0) / 255 * (waveHeight / 2);
-				const nextY = (waveHeight + nextBarHeight * 2) / 2;
+				const nextY = (waveHeight + (frequencyData[i + 1] ?? 0) / 255 * (waveHeight / 2) * 2) / 2;
 				const xc = (nextX + x) / 2;
 				const yc = (nextY + y) / 2;
 				path.quadraticCurveTo(nextX, nextY, xc, yc);

package/dist/elements/SampleBuffer.js

@@ -31,8 +31,7 @@ var SampleBuffer = class {
 		const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);
 		for (const sample of currentBuffer) {
 			const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1e3);
-			const sampleDurationMs = roundToMilliseconds((sample.duration || 0) * 1e3);
-			const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);
+			const sampleEndMs = roundToMilliseconds(sampleStartMs + roundToMilliseconds((sample.duration || 0) * 1e3));
 			if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) return sample;
 		}
 	}

package/dist/elements/TargetController.js

@@ -103,6 +103,7 @@ var TargetController = class {
 			this.disconnectFromTarget();
 			this.host.targetElement = newTarget ?? null;
 			this.connectToTarget();
+			this.host.requestUpdate("targetElement");
 		}
 	}
 	connectToTarget() {
@@ -118,8 +119,7 @@ var TargetController = class {
 		}
 	}
 	get registry() {
-		const root = this.host.getRootNode();
-		return getRegistry(root);
+		return getRegistry(this.host.getRootNode());
 	}
 	hostDisconnected() {
 		this.disconnectFromTarget();

package/dist/elements/renderTemporalAudio.d.ts

@@ -0,0 +1,10 @@
+import { EFMedia } from './EFMedia.js';
+interface TemporalAudioHost {
+    startTimeMs: number;
+    endTimeMs: number;
+    durationMs: number;
+    getMediaElements(): EFMedia[];
+    waitForMediaDurations?(): Promise<void>;
+}
+export declare function renderTemporalAudio(host: TemporalAudioHost, fromMs: number, toMs: number): Promise<AudioBuffer>;
+export {};

package/dist/elements/renderTemporalAudio.js

@@ -0,0 +1,35 @@
+async function renderTemporalAudio(host, fromMs, toMs) {
+	const aacFrames = 48e3 * ((toMs - fromMs) / 1e3) / 1024;
+	const contextSize = Math.round(aacFrames) * 1024;
+	if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
+	const audioContext = new OfflineAudioContext(2, contextSize, 48e3);
+	if (host.waitForMediaDurations) await host.waitForMediaDurations();
+	const abortController = new AbortController();
+	await Promise.all(host.getMediaElements().map(async (mediaElement) => {
+		if (mediaElement.mute) return;
+		const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
+		const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
+		if (!(mediaStartsBeforeEnd && mediaEndsAfterStart)) return;
+		const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
+		const mediaLocalToMs = Math.min(mediaElement.endTimeMs - mediaElement.startTimeMs, toMs - mediaElement.startTimeMs);
+		if (mediaLocalFromMs >= mediaLocalToMs) return;
+		const sourceInMs = mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
+		const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
+		const mediaSourceToMs = mediaLocalToMs + sourceInMs;
+		const audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, abortController.signal);
+		if (!audio) return;
+		const bufferSource = audioContext.createBufferSource();
+		bufferSource.buffer = await audioContext.decodeAudioData(await audio.blob.arrayBuffer());
+		bufferSource.connect(audioContext.destination);
+		const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+		const offsetInBufferMs = mediaSourceFromMs - audio.startMs;
+		const safeOffsetMs = Math.max(0, offsetInBufferMs);
+		const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;
+		const availableAudioMs = audio.endMs - audio.startMs;
+		const actualDurationMs = Math.min(requestedDurationMs, availableAudioMs - safeOffsetMs);
+		if (actualDurationMs <= 0) return;
+		bufferSource.start(ctxStartMs / 1e3, safeOffsetMs / 1e3, actualDurationMs / 1e3);
+	}));
+	return audioContext.startRendering();
+}
+export { renderTemporalAudio };

package/dist/elements/updateAnimations.js

@@ -5,25 +5,23 @@ var PROGRESS_PROPERTY = "--ef-progress";
 var DURATION_PROPERTY = "--ef-duration";
 var TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
 var TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
-var TIMEGROUP_TAGNAME = "ef-timegroup";
 const evaluateTemporalState = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
 	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
-	const useInclusiveEnd = element.tagName.toLowerCase() === TIMEGROUP_TAGNAME && !element.parentTimegroup;
-	const isVisible = element.startTimeMs <= timelineTimeMs && (useInclusiveEnd ? element.endTimeMs >= timelineTimeMs : element.endTimeMs > timelineTimeMs);
+	const isRootElement = !element.parentTimegroup;
+	const isLastElementInComposition = element.endTimeMs === element.rootTimegroup?.endTimeMs;
+	const useInclusiveEnd = isRootElement || isLastElementInComposition;
 	return {
 		progress,
-		isVisible,
+		isVisible: element.startTimeMs <= timelineTimeMs && (useInclusiveEnd ? element.endTimeMs >= timelineTimeMs : element.endTimeMs > timelineTimeMs),
 		timelineTimeMs
 	};
 };
 const evaluateTemporalStateForAnimation = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
-	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
-	const isVisible = element.startTimeMs <= timelineTimeMs && element.endTimeMs >= timelineTimeMs;
 	return {
-		progress,
-		isVisible,
+		progress: element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)),
+		isVisible: element.startTimeMs <= timelineTimeMs && element.endTimeMs >= timelineTimeMs,
 		timelineTimeMs
 	};
 };
@@ -72,8 +70,7 @@ var coordinateAnimationsForSingleElement = (element) => {
 const updateAnimations = (element) => {
 	const temporalState = evaluateTemporalState(element);
 	deepGetTemporalElements(element).forEach((temporalElement) => {
-		const temporalState$1 = evaluateTemporalState(temporalElement);
-		updateVisualState(temporalElement, temporalState$1);
+		updateVisualState(temporalElement, evaluateTemporalState(temporalElement));
 	});
 	updateVisualState(element, temporalState);
 	if (evaluateTemporalStateForAnimation(element).isVisible) coordinateAnimationsForSingleElement(element);

package/dist/gui/ContextMixin.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
-import { EFTimegroup } from '../elements/EFTimegroup.js';
-export declare const targetTimegroupContext: {
-    __context__: EFTimegroup | null;
+import { TemporalMixinInterface } from '../elements/EFTemporal.js';
+export declare const targetTemporalContext: {
+    __context__: TemporalMixinInterface | null;
 };
 export declare class ContextMixinInterface extends LitElement {
     signingURL?: string;
@@ -11,8 +11,8 @@ export declare class ContextMixinInterface extends LitElement {
     loop: boolean;
     currentTimeMs: number;
     focusedElement?: HTMLElement;
-    targetTimegroup: EFTimegroup | null;
-    play(): void;
+    targetTemporal: TemporalMixinInterface | null;
+    play(): Promise<void>;
     pause(): void;
 }
 export declare function isContextMixin(value: any): value is ContextMixinInterface;

package/dist/gui/ContextMixin.js

@@ -1,17 +1,18 @@
 import { EF_RENDERING } from "../EF_RENDERING.js";
-import { globalURLTokenDeduplicator } from "../transcoding/cache/URLTokenDeduplicator.js";
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { loopContext, playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { isEFTemporal } from "../elements/EFTemporal.js";
+import { globalURLTokenDeduplicator } from "../transcoding/cache/URLTokenDeduplicator.js";
 import { efConfigurationContext } from "./EFConfiguration.js";
 import { efContext } from "./efContext.js";
 import { fetchContext } from "./fetchContext.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
-import { loopContext, playingContext } from "./playingContext.js";
-import { consume, createContext, provide } from "@lit/context";
+import { ContextProvider, consume, createContext, provide } from "@lit/context";
 import { property, state } from "lit/decorators.js";
-const targetTimegroupContext = createContext("target-timegroup");
+const targetTemporalContext = createContext(Symbol("target-temporal"));
 var contextMixinSymbol = Symbol("contextMixin");
 function isContextMixin(value) {
 	return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
@@ -23,7 +24,6 @@ function ContextMixin(superClass) {
 			this.efConfiguration = null;
 			this.focusContext = this;
 			this.efContext = this;
-			this.targetTimegroup = null;
 			this.durationMs = 0;
 			this.endTimeMs = 0;
 			this.fetch = async (url, init = {}) => {
@@ -53,14 +53,16 @@ function ContextMixin(superClass) {
 					throw error;
 				}
 			};
-			this.playing = false;
-			this.loop = false;
 			this.rendering = false;
-			this.currentTimeMs = NaN;
 		}
 		static {
 			this[contextMixinSymbol] = true;
 		}
+		#playingProvider;
+		#loopProvider;
+		#currentTimeMsProvider;
+		#targetTemporalProvider;
+		#loop = false;
 		#apiHost;
 		get apiHost() {
 			return this.#apiHost ?? this.efConfiguration?.apiHost ?? "";
@@ -68,6 +70,56 @@ function ContextMixin(superClass) {
 		set apiHost(value) {
 			this.#apiHost = value;
 		}
+		#targetTemporal = null;
+		get targetTemporal() {
+			return this.#targetTemporal;
+		}
+		#controllerSubscribed = false;
+		findRootTemporal() {
+			const findRecursive = (element) => {
+				if (isEFTemporal(element)) return element;
+				for (const child of element.children) {
+					const found = findRecursive(child);
+					if (found) return found;
+				}
+				return null;
+			};
+			for (const child of this.children) {
+				const found = findRecursive(child);
+				if (found) return found;
+			}
+			return null;
+		}
+		set targetTemporal(value) {
+			if (this.#targetTemporal === value) return;
+			if (this.#targetTemporal?.playbackController) {
+				this.#targetTemporal.playbackController.removeListener(this.#onControllerUpdate);
+				this.#controllerSubscribed = false;
+			}
+			this.#targetTemporal = value;
+			this.#targetTemporalProvider?.setValue(value);
+			this.requestUpdate("targetTemporal");
+			this.requestUpdate("playing");
+			this.requestUpdate("loop");
+			this.requestUpdate("currentTimeMs");
+			if (value?.playbackController && this.#loop) value.playbackController.setLoop(this.#loop);
+			if (value && !value.playbackController) value.updateComplete?.then(() => {
+				if (value === this.#targetTemporal && !this.#controllerSubscribed) this.requestUpdate();
+			});
+		}
+		#onControllerUpdate = (event) => {
+			switch (event.property) {
+				case "playing":
+					this.#playingProvider.setValue(event.value);
+					break;
+				case "loop":
+					this.#loopProvider.setValue(event.value);
+					break;
+				case "currentTimeMs":
+					this.#currentTimeMsProvider.setValue(event.value);
+					break;
+			}
+		};
 		#getTokenCacheKey(url) {
 			try {
 				const urlObj = new URL(url);
@@ -120,16 +172,35 @@ function ContextMixin(superClass) {
 		set signingURL(value) {
 			this.#signingURL = value;
 		}
-		#FPS = 30;
-		#MS_PER_FRAME = 1e3 / this.#FPS;
+		get playing() {
+			return this.targetTemporal?.playbackController?.playing ?? false;
+		}
+		set playing(value) {
+			if (this.targetTemporal?.playbackController) this.targetTemporal.playbackController.setPlaying(value);
+		}
+		get loop() {
+			return this.targetTemporal?.playbackController?.loop ?? this.#loop;
+		}
+		set loop(value) {
+			const oldValue = this.#loop;
+			this.#loop = value;
+			if (this.targetTemporal?.playbackController) this.targetTemporal.playbackController.setLoop(value);
+			this.requestUpdate("loop", oldValue);
+		}
+		get currentTimeMs() {
+			return this.targetTemporal?.playbackController?.currentTimeMs ?? NaN;
+		}
+		set currentTimeMs(value) {
+			if (this.targetTemporal?.playbackController) this.targetTemporal.playbackController.setCurrentTimeMs(value);
+		}
 		#timegroupObserver = new MutationObserver((mutations) => {
 			let shouldUpdate = false;
 			for (const mutation of mutations) if (mutation.type === "childList") {
-				const newTimegroup = this.querySelector("ef-timegroup");
-				if (newTimegroup !== this.targetTimegroup) {
-					this.targetTimegroup = newTimegroup;
+				const newTemporal = this.findRootTemporal();
+				if (newTemporal !== this.targetTemporal) {
+					this.targetTemporal = newTemporal;
 					shouldUpdate = true;
-				} else if (mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
+				} else if (mutation.target instanceof Element && isEFTemporal(mutation.target)) shouldUpdate = true;
 			} else if (mutation.type === "attributes") {
 				if ([
 					"duration",
@@ -138,128 +209,90 @@ function ContextMixin(superClass) {
 					"trimend",
 					"sourcein",
 					"sourceout"
-				].includes(mutation.attributeName || "") || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.tagName === "EF-VIDEO" || mutation.target.tagName === "EF-AUDIO" || mutation.target.tagName === "EF-CAPTIONS" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
+				].includes(mutation.attributeName || "") || mutation.target instanceof Element && isEFTemporal(mutation.target)) shouldUpdate = true;
 			}
 			if (shouldUpdate) queueMicrotask(() => {
 				this.updateDurationProperties();
 				this.requestUpdate();
-				if (this.targetTimegroup) this.targetTimegroup.requestUpdate();
+				if (this.targetTemporal) this.targetTemporal.requestUpdate();
 			});
 		});
 		updateDurationProperties() {
-			const newDuration = this.targetTimegroup?.durationMs ?? 0;
-			const newEndTime = this.targetTimegroup?.endTimeMs ?? 0;
+			const newDuration = this.targetTemporal?.durationMs ?? 0;
+			const newEndTime = this.targetTemporal?.endTimeMs ?? 0;
 			if (this.durationMs !== newDuration) this.durationMs = newDuration;
 			if (this.endTimeMs !== newEndTime) this.endTimeMs = newEndTime;
 		}
 		connectedCallback() {
 			super.connectedCallback();
-			this.targetTimegroup = this.querySelector("ef-timegroup");
+			this.#playingProvider = new ContextProvider(this, {
+				context: playingContext,
+				initialValue: this.playing
+			});
+			this.#loopProvider = new ContextProvider(this, {
+				context: loopContext,
+				initialValue: this.loop
+			});
+			this.#currentTimeMsProvider = new ContextProvider(this, {
+				context: currentTimeContext,
+				initialValue: this.currentTimeMs
+			});
+			this.#targetTemporalProvider = new ContextProvider(this, {
+				context: targetTemporalContext,
+				initialValue: this.targetTemporal
+			});
+			this.targetTemporal = this.findRootTemporal();
 			this.updateDurationProperties();
 			this.#timegroupObserver.observe(this, {
 				childList: true,
 				subtree: true,
 				attributes: true
 			});
-			if (this.playing) this.startPlayback();
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.#timegroupObserver.disconnect();
-			this.stopPlayback();
-		}
-		update(changedProperties) {
-			if (changedProperties.has("playing")) if (this.playing) this.startPlayback();
-			else this.stopPlayback();
-			if (changedProperties.has("currentTimeMs") && this.targetTimegroup && !Number.isNaN(this.currentTimeMs)) {
-				if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
-					if (this.isConnected) {
-						if (this.targetTimegroup.currentTimeMs === this.currentTimeMs) return;
-						this.targetTimegroup.currentTimeMs = this.currentTimeMs;
-					}
-				}
+			if (this.#targetTemporal?.playbackController) {
+				this.#targetTemporal.playbackController.removeListener(this.#onControllerUpdate);
+				this.#controllerSubscribed = false;
 			}
-			super.update(changedProperties);
-		}
-		play() {
-			this.playing = true;
+			this.pause();
 		}
-		pause() {
-			this.playing = false;
-		}
-		#playbackAudioContext = null;
-		#playbackAnimationFrameRequest = null;
-		#AUDIO_PLAYBACK_SLICE_MS = 47 * 1024 / 48e3 * 1e3;
-		#syncPlayheadToAudioContext(target, startMs) {
-			const rawTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
-			const nextTimeMs = Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
-			if (nextTimeMs !== this.currentTimeMs) this.currentTimeMs = nextTimeMs;
-			this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
-				this.#syncPlayheadToAudioContext(target, startMs);
-			});
-		}
-		async stopPlayback() {
-			if (this.#playbackAudioContext) {
-				if (this.#playbackAudioContext.state !== "closed") await this.#playbackAudioContext.close();
+		updated(changedProperties) {
+			super.updated?.(changedProperties);
+			if (!this.#controllerSubscribed && this.#targetTemporal?.playbackController) {
+				this.#targetTemporal.playbackController.addListener(this.#onControllerUpdate);
+				this.#controllerSubscribed = true;
+				if (this.#loop) this.#targetTemporal.playbackController.setLoop(this.#loop);
+				this.#playingProvider.setValue(this.playing);
+				this.#loopProvider.setValue(this.loop);
+				this.#currentTimeMsProvider.setValue(this.currentTimeMs);
 			}
-			if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-			this.#playbackAudioContext = null;
-			this.#playbackAnimationFrameRequest = null;
 		}
-		async startPlayback() {
-			await this.stopPlayback();
-			const timegroup = this.targetTimegroup;
-			if (!timegroup) return;
-			await timegroup.waitForMediaDurations();
-			let currentMs = timegroup.currentTimeMs;
-			const fromMs = currentMs;
-			const toMs = timegroup.endTimeMs;
-			if (fromMs >= toMs) {
-				this.pause();
-				return;
+		async play() {
+			if (!this.targetTemporal) {
+				const potentialTemporalTags = Array.from(this.children).map((el) => el.tagName.toLowerCase()).filter((tag) => tag.startsWith("ef-"));
+				await Promise.all(potentialTemporalTags.map((tag) => customElements.whenDefined(tag).catch(() => {})));
+				const foundTemporal = this.findRootTemporal();
+				if (foundTemporal) {
+					this.targetTemporal = foundTemporal;
+					await foundTemporal.updateComplete;
+				} else {
+					console.warn("No temporal element found to play");
+					return;
+				}
 			}
-			let bufferCount = 0;
-			this.#playbackAudioContext = new AudioContext({ latencyHint: "playback" });
-			if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-			this.#syncPlayheadToAudioContext(timegroup, currentMs);
-			const playbackContext = this.#playbackAudioContext;
-			if (playbackContext.state === "suspended") {
-				console.warn("AudioContext is suspended, media playback will not work until user has interacted with page.");
-				this.playing = false;
-				return;
+			if (!this.targetTemporal.playbackController) {
+				await this.targetTemporal.updateComplete;
+				if (!this.targetTemporal.playbackController) {
+					console.warn("PlaybackController not available for temporal element");
+					return;
+				}
 			}
-			await playbackContext.suspend();
-			const fillBuffer = async () => {
-				if (bufferCount > 2) return;
-				if (await queueBufferSource()) fillBuffer();
-			};
-			const queueBufferSource = async () => {
-				if (currentMs >= toMs) return false;
-				const startMs = currentMs;
-				const endMs = currentMs + this.#AUDIO_PLAYBACK_SLICE_MS;
-				currentMs += this.#AUDIO_PLAYBACK_SLICE_MS;
-				const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-				bufferCount++;
-				const source = playbackContext.createBufferSource();
-				source.buffer = audioBuffer;
-				source.connect(playbackContext.destination);
-				source.start((startMs - fromMs) / 1e3);
-				source.onended = () => {
-					bufferCount--;
-					if (endMs >= toMs) {
-						this.pause();
-						if (this.loop) this.updateComplete.then(() => {
-							this.currentTimeMs = 0;
-							this.updateComplete.then(() => {
-								this.play();
-							});
-						});
-					} else fillBuffer();
-				};
-				return true;
-			};
-			await fillBuffer();
-			await playbackContext.resume();
+			this.targetTemporal.playbackController.play();
+		}
+		pause() {
+			if (this.targetTemporal?.playbackController) this.targetTemporal.playbackController.pause();
 		}
 	}
 	__decorate([consume({
@@ -273,7 +306,7 @@ function ContextMixin(superClass) {
 		attribute: "api-host"
 	})], ContextElement.prototype, "apiHost", null);
 	__decorate([provide({ context: efContext })], ContextElement.prototype, "efContext", void 0);
-	__decorate([provide({ context: targetTimegroupContext }), state()], ContextElement.prototype, "targetTimegroup", void 0);
+	__decorate([state()], ContextElement.prototype, "targetTemporal", null);
 	__decorate([provide({ context: durationContext }), property({ type: Number })], ContextElement.prototype, "durationMs", void 0);
 	__decorate([property({ type: Number })], ContextElement.prototype, "endTimeMs", void 0);
 	__decorate([provide({ context: fetchContext })], ContextElement.prototype, "fetch", void 0);
@@ -281,16 +314,17 @@ function ContextMixin(superClass) {
 		type: String,
 		attribute: "signing-url"
 	})], ContextElement.prototype, "signingURL", null);
-	__decorate([provide({ context: playingContext }), property({
+	__decorate([property({
 		type: Boolean,
 		reflect: true
-	})], ContextElement.prototype, "playing", void 0);
-	__decorate([provide({ context: loopContext }), property({
+	})], ContextElement.prototype, "playing", null);
+	__decorate([property({
 		type: Boolean,
-		reflect: true
-	})], ContextElement.prototype, "loop", void 0);
+		reflect: true,
+		attribute: "loop"
+	})], ContextElement.prototype, "loop", null);
 	__decorate([property({ type: Boolean })], ContextElement.prototype, "rendering", void 0);
-	__decorate([provide({ context: currentTimeContext }), property({ type: Number })], ContextElement.prototype, "currentTimeMs", void 0);
+	__decorate([property({ type: Number })], ContextElement.prototype, "currentTimeMs", null);
 	return ContextElement;
 }
-export { ContextMixin, isContextMixin, targetTimegroupContext };
+export { ContextMixin, isContextMixin, targetTemporalContext };