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

package/dist/elements/updateAnimations.js

@@ -1,44 +1,31 @@
 import { deepGetTemporalElements } from "./EFTemporal.js";
-const ANIMATION_PRECISION_OFFSET = .1;
-const DEFAULT_ANIMATION_ITERATIONS = 1;
-const PROGRESS_PROPERTY = "--ef-progress";
-const DURATION_PROPERTY = "--ef-duration";
-const TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
-const TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
-const TIMEGROUP_TAGNAME = "ef-timegroup";
-/**
-* Evaluates what the element's state should be based on the timeline
-*/
+var ANIMATION_PRECISION_OFFSET = .1;
+var DEFAULT_ANIMATION_ITERATIONS = 1;
+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";
 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 isRootTimegroup = element.tagName.toLowerCase() === TIMEGROUP_TAGNAME && !element.parentTimegroup;
-	const useInclusiveEnd = isRootTimegroup;
-	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
 	};
 };
-/**
-* Evaluates element visibility specifically for animation coordination
-* Uses inclusive end boundaries to prevent animation jumps at exact boundaries
-*/
 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
 	};
 };
-/**
-* Updates the visual state (CSS + display) to match temporal state
-*/
-const updateVisualState = (element, state) => {
+var updateVisualState = (element, state) => {
 	element.style.setProperty(PROGRESS_PROPERTY, `${state.progress * 100}%`);
 	if (!state.isVisible) {
 		if (element.style.display !== "none") element.style.display = "none";
@@ -49,17 +36,13 @@ const updateVisualState = (element, state) => {
 	element.style.setProperty(TRANSITION_DURATION_PROPERTY, `${element.parentTimegroup?.overlapMs ?? 0}ms`);
 	element.style.setProperty(TRANSITION_OUT_START_PROPERTY, `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
 };
-/**
-* Coordinates animations for a single element and its subtree, using the element as the time source
-*/
-const coordinateAnimationsForSingleElement = (element) => {
+var coordinateAnimationsForSingleElement = (element) => {
 	const animations = element.getAnimations({ subtree: true });
 	for (const animation of animations) {
 		if (animation.playState === "running") animation.pause();
 		const effect = animation.effect;
 		if (!(effect && effect instanceof KeyframeEffect)) continue;
-		const target = effect.target;
-		if (!target) continue;
+		if (!effect.target) continue;
 		const timing = effect.getTiming();
 		const duration = Number(timing.duration) || 0;
 		const delay = Number(timing.delay) || 0;
@@ -76,8 +59,7 @@ const coordinateAnimationsForSingleElement = (element) => {
 		const adjustedTime = currentTime - delay;
 		const currentIteration = Math.floor(adjustedTime / duration);
 		const currentIterationTime = adjustedTime % duration;
-		const totalAnimationLength = delay + duration * iterations;
-		const maxSafeCurrentTime = totalAnimationLength - ANIMATION_PRECISION_OFFSET;
+		const maxSafeCurrentTime = delay + duration * iterations - ANIMATION_PRECISION_OFFSET;
 		if (currentIteration >= iterations) animation.currentTime = maxSafeCurrentTime;
 		else {
 			const proposedCurrentTime = Math.min(currentIterationTime, duration - ANIMATION_PRECISION_OFFSET) + delay;
@@ -85,21 +67,15 @@ const coordinateAnimationsForSingleElement = (element) => {
 		}
 	}
 };
-/**
-* Main function: synchronizes DOM element with timeline
-*/
 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);
-	const animationState = evaluateTemporalStateForAnimation(element);
-	if (animationState.isVisible) coordinateAnimationsForSingleElement(element);
+	if (evaluateTemporalStateForAnimation(element).isVisible) coordinateAnimationsForSingleElement(element);
 	deepGetTemporalElements(element).forEach((temporalElement) => {
-		const childAnimationState = evaluateTemporalStateForAnimation(temporalElement);
-		if (childAnimationState.isVisible) coordinateAnimationsForSingleElement(temporalElement);
+		if (evaluateTemporalStateForAnimation(temporalElement).isVisible) coordinateAnimationsForSingleElement(temporalElement);
 	});
 };
 export { evaluateTemporalStateForAnimation, updateAnimations };

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,18 +1,19 @@
 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 { 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";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
-const targetTimegroupContext = createContext("target-timegroup");
-const contextMixinSymbol = Symbol("contextMixin");
+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 = {}) => {
@@ -37,10 +37,7 @@ function ContextMixin(superClass) {
 								method: "POST",
 								body: JSON.stringify(signingPayload)
 							});
-							if (response.ok) {
-								const tokenData = await response.json();
-								return tokenData.token;
-							}
+							if (response.ok) return (await response.json()).token;
 							throw new Error(`Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`);
 						} catch (error) {
 							console.error("ContextMixin urlToken fetch error", url, error);
@@ -56,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 ?? "";
@@ -71,15 +70,56 @@ function ContextMixin(superClass) {
 		set apiHost(value) {
 			this.#apiHost = value;
 		}
-		/**
-		* Generate a cache key for URL token based on signing strategy
-		*
-		* Uses unified prefix + parameter matching approach:
-		* - For transcode URLs: signs base "/api/v1/transcode" + params like {url: "source.mp4"}
-		* - For regular URLs: signs full URL with empty params {}
-		* - All validation uses prefix matching + exhaustive parameter matching
-		* - Multiple transcode segments with same source share one token (reduces round-trips)
-		*/
+		#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);
@@ -87,9 +127,8 @@ function ContextMixin(superClass) {
 					const urlParam = urlObj.searchParams.get("url");
 					if (urlParam) {
 						const basePath = `${urlObj.origin}/api/v1/transcode`;
-						const cacheKey = `${basePath}?url=${urlParam}`;
 						return {
-							cacheKey,
+							cacheKey: `${basePath}?url=${urlParam}`,
 							signingPayload: {
 								url: basePath,
 								params: { url: urlParam }
@@ -108,11 +147,6 @@ function ContextMixin(superClass) {
 				};
 			}
 		}
-		/**
-		* Parse JWT token to extract safe expiration time (with buffer)
-		* @param token JWT token string
-		* @returns Safe expiration timestamp in milliseconds (actual expiry minus buffer), or 0 if parsing fails
-		*/
 		#parseTokenExpiration(token) {
 			try {
 				const parts = token.split(".");
@@ -124,202 +158,173 @@ function ContextMixin(superClass) {
 				const exp = parsed.exp;
 				const iat = parsed.iat;
 				if (!exp) return 0;
-				const lifetimeSeconds = iat ? exp - iat : 3600;
-				const tenPercentBufferMs = lifetimeSeconds * .1 * 1e3;
-				const fiveMinutesMs = 5 * 60 * 1e3;
-				const bufferMs = Math.min(fiveMinutesMs, tenPercentBufferMs);
+				const tenPercentBufferMs = (iat ? exp - iat : 3600) * .1 * 1e3;
+				const bufferMs = Math.min(300 * 1e3, tenPercentBufferMs);
 				return exp * 1e3 - bufferMs;
 			} catch {
 				return 0;
 			}
 		}
 		#signingURL;
-		/**
-		* A URL that will be used to generated signed tokens for accessing media files from the
-		* editframe API. This is used to authenticate media requests per-user.
-		*/
 		get signingURL() {
 			return this.#signingURL ?? this.efConfiguration?.signingURL ?? "";
 		}
 		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") {
-				const durationAffectingAttributes = [
+				if ([
 					"duration",
 					"mode",
 					"trimstart",
 					"trimend",
 					"sourcein",
 					"sourceout"
-				];
-				if (durationAffectingAttributes.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();
 			});
 		});
-		/**
-		* Update duration properties when timegroup changes
-		*/
 		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;
-		}
-		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);
-			});
+			this.pause();
 		}
-		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;
-				const canFillBuffer = await queueBufferSource();
-				if (canFillBuffer) 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({
+	__decorate([consume({
 		context: efConfigurationContext,
 		subscribe: true
 	})], ContextElement.prototype, "efConfiguration", void 0);
-	_decorate([provide({ context: focusContext })], ContextElement.prototype, "focusContext", void 0);
-	_decorate([provide({ context: focusedElementContext }), state()], ContextElement.prototype, "focusedElement", void 0);
-	_decorate([property({
+	__decorate([provide({ context: focusContext })], ContextElement.prototype, "focusContext", void 0);
+	__decorate([provide({ context: focusedElementContext }), state()], ContextElement.prototype, "focusedElement", void 0);
+	__decorate([property({
 		type: String,
 		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([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);
-	_decorate([property({
+	__decorate([provide({ context: efContext })], ContextElement.prototype, "efContext", 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);
+	__decorate([property({
 		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);
-	_decorate([property({ type: Boolean })], ContextElement.prototype, "rendering", void 0);
-	_decorate([provide({ context: currentTimeContext }), property({ type: Number })], ContextElement.prototype, "currentTimeMs", void 0);
+		reflect: true,
+		attribute: "loop"
+	})], ContextElement.prototype, "loop", null);
+	__decorate([property({ type: Boolean })], ContextElement.prototype, "rendering", void 0);
+	__decorate([property({ type: Number })], ContextElement.prototype, "currentTimeMs", null);
 	return ContextElement;
 }
-export { ContextMixin, isContextMixin, targetTimegroupContext };
+export { ContextMixin, isContextMixin, targetTemporalContext };

package/dist/gui/Controllable.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { TemporalMixinInterface } from '../elements/EFTemporal.js';
+import { ContextMixinInterface } from './ContextMixin.js';
+export declare class ControllableInterface extends LitElement {
+    playing: boolean;
+    loop: boolean;
+    currentTimeMs: number;
+    durationMs: number;
+    play(): void | Promise<void>;
+    pause(): void;
+}
+export declare function isControllable(value: any): value is ControllableInterface;
+export type ControllableElement = ContextMixinInterface | (TemporalMixinInterface & {
+    playbackController: NonNullable<TemporalMixinInterface["playbackController"]>;
+});

package/dist/gui/Controllable.js

@@ -0,0 +1,9 @@
+import { isEFTemporal } from "../elements/EFTemporal.js";
+import { isContextMixin } from "./ContextMixin.js";
+function isControllable(value) {
+	if (!value || typeof value !== "object") return false;
+	if (isContextMixin(value)) return true;
+	if (isEFTemporal(value)) return value.playbackController !== void 0;
+	return false;
+}
+export { isControllable };

package/dist/gui/EFConfiguration.js

@@ -1,9 +1,9 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { createContext, provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 const efConfigurationContext = createContext(Symbol("efConfigurationContext"));
-let EFConfiguration = class EFConfiguration$1 extends LitElement {
+var EFConfiguration = class EFConfiguration$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.efConfiguration = this;
@@ -21,18 +21,18 @@ let EFConfiguration = class EFConfiguration$1 extends LitElement {
 		return html`<slot></slot>`;
 	}
 };
-_decorate([provide({ context: efConfigurationContext })], EFConfiguration.prototype, "efConfiguration", void 0);
-_decorate([property({
+__decorate([provide({ context: efConfigurationContext })], EFConfiguration.prototype, "efConfiguration", void 0);
+__decorate([property({
 	type: String,
 	attribute: "api-host"
 })], EFConfiguration.prototype, "apiHost", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "signing-url"
 })], EFConfiguration.prototype, "signingURL", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "media-engine"
 })], EFConfiguration.prototype, "mediaEngine", void 0);
-EFConfiguration = _decorate([customElement("ef-configuration")], EFConfiguration);
+EFConfiguration = __decorate([customElement("ef-configuration")], EFConfiguration);
 export { EFConfiguration, efConfigurationContext };