@editframe/elements 0.18.7-beta.0 → 0.18.19-beta.0

package/dist/elements/EFAudio.d.ts

@@ -2,8 +2,7 @@ import { Task } from '@lit/task';
 import { EFMedia } from './EFMedia.js';
 declare const EFAudio_base: typeof EFMedia;
 export declare class EFAudio extends EFAudio_base {
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    private _propertyHack;
     audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
     render(): import('lit-html').TemplateResult<1>;
     frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;

package/dist/elements/EFAudio.js

@@ -2,12 +2,13 @@ import { EFMedia } from "./EFMedia.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { Task } from "@lit/task";
 import { html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
 let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 	constructor(..._args) {
 		super(..._args);
+		this._propertyHack = false;
 		this.audioElementRef = createRef();
 		this.frameTask = new Task(this, {
 			args: () => [
@@ -25,14 +26,6 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 			}
 		});
 	}
-	static get observedAttributes() {
-		const parentAttributes = super.observedAttributes || [];
-		return [...parentAttributes];
-	}
-	attributeChangedCallback(name, old, value) {
-		super.attributeChangedCallback(name, old, value);
-		if (name === "asset-id") this.assetId = value;
-	}
 	render() {
 		return html`<audio ${ref(this.audioElementRef)}></audio>`;
 	}
@@ -61,5 +54,9 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 		return this.audioBufferTask;
 	}
 };
+_decorate([property({
+	type: Boolean,
+	attribute: "dummy-property"
+})], EFAudio.prototype, "_propertyHack", void 0);
 EFAudio = _decorate([customElement("ef-audio")], EFAudio);
 export { EFAudio };

package/dist/elements/EFMedia/AssetIdMediaEngine.js

@@ -7,9 +7,12 @@ var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 		return new AssetIdMediaEngine(host, assetId, data, apiHost);
 	}
 	constructor(host, assetId, data, apiHost) {
-		super(host, assetId, data);
+		super(host, assetId);
 		this.assetId = assetId;
 		this.apiHost = apiHost;
+		this.data = data;
+		const longestFragment = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
+		this.durationMs = longestFragment * 1e3;
 	}
 	get initSegmentPaths() {
 		const paths = {};

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

@@ -5,12 +5,11 @@ import { EFMedia } from '../EFMedia';
 import { BaseMediaEngine } from './BaseMediaEngine';
 import { MediaRendition } from './shared/MediaTaskUtils';
 export declare class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
-    host: EFMedia;
     src: string;
     protected data: Record<number, TrackFragmentIndex>;
-    static fetch(host: EFMedia, urlGenerator: UrlGenerator, src: string): Promise<AssetMediaEngine>;
     durationMs: number;
-    constructor(host: EFMedia, src: string, data: Record<number, TrackFragmentIndex>);
+    constructor(host: EFMedia, src: string);
+    static fetch(host: EFMedia, urlGenerator: UrlGenerator, src: string): Promise<AssetMediaEngine>;
     get audioTrackIndex(): import('../../../../assets/src/index.ts').AudioTrackFragmentIndex | undefined;
     get videoTrackIndex(): import('../../../../assets/src/index.ts').VideoTrackFragmentIndex | undefined;
     get videoRendition(): {
@@ -33,7 +32,7 @@ export declare class AssetMediaEngine extends BaseMediaEngine implements MediaEn
         trackId: number | undefined;
         src: string;
     }, signal: AbortSignal): Promise<ArrayBuffer>;
-    fetchMediaSegmentImpl(segmentId: number, rendition: {
+    fetchMediaSegment(segmentId: number, rendition: {
         trackId: number | undefined;
         src: string;
     }, signal?: AbortSignal): Promise<ArrayBuffer>;

package/dist/elements/EFMedia/AssetMediaEngine.js

@@ -1,20 +1,21 @@
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
 import { convertToScaledTime, roundToMilliseconds } from "./shared/PrecisionUtils.js";
 var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
+	constructor(host, src) {
+		super(host);
+		this.data = {};
+		this.durationMs = 0;
+		this.src = src;
+	}
 	static async fetch(host, urlGenerator, src) {
+		const engine = new AssetMediaEngine(host, src);
 		const url = urlGenerator.generateTrackFragmentIndexUrl(src);
-		const response = await host.fetch(url);
-		const data = await response.json();
-		if (src.startsWith("/")) src = src.slice(1);
-		return new AssetMediaEngine(host, src, data);
-	}
-	constructor(host, src, data) {
-		super();
-		this.host = host;
-		this.src = src;
-		this.data = data;
-		const longestFragment = Object.values(data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
-		this.durationMs = longestFragment * 1e3;
+		const data = await engine.fetchManifest(url);
+		engine.data = data;
+		const longestFragment = Object.values(engine.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
+		engine.durationMs = longestFragment * 1e3;
+		if (src.startsWith("/")) engine.src = src.slice(1);
+		return engine;
 	}
 	get audioTrackIndex() {
 		return Object.values(this.data).find((track) => track.type === "audio");
@@ -67,24 +68,30 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 		const initSegment = this.data[rendition.trackId]?.initSegment;
 		if (!initSegment) throw new Error("Init segment not found");
 		const headers = { Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}` };
-		return this.fetchMediaCacheWithHeaders(url, headers, signal);
+		return this.fetchMediaWithHeaders(url, headers, signal);
 	}
-	async fetchMediaSegmentImpl(segmentId, rendition, signal) {
+	async fetchMediaSegment(segmentId, rendition, signal) {
 		if (!rendition.trackId) throw new Error("Track ID is required for asset metadata");
 		if (segmentId === void 0) throw new Error("Segment ID is not available");
 		const url = this.buildMediaSegmentUrl(rendition.trackId, segmentId);
 		const mediaSegment = this.data[rendition.trackId]?.segments[segmentId];
 		if (!mediaSegment) throw new Error("Media segment not found");
 		const headers = { Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}` };
-		return this.fetchMediaCacheWithHeaders(url, headers, signal);
+		return this.fetchMediaWithHeaders(url, headers, signal);
 	}
 	/**
 	* Calculate audio segments for variable-duration segments using track fragment index
 	*/
 	calculateAudioSegmentRange(fromMs, toMs, rendition, _durationMs) {
-		if (fromMs >= toMs || !rendition.trackId) return [];
+		if (fromMs >= toMs || !rendition.trackId) {
+			console.warn(`calculateAudioSegmentRange: invalid fromMs ${fromMs} toMs ${toMs} rendition ${JSON.stringify(rendition)}`);
+			return [];
+		}
 		const track = this.data[rendition.trackId];
-		if (!track) return [];
+		if (!track) {
+			console.warn(`calculateAudioSegmentRange: track not found for rendition ${JSON.stringify(rendition)}`);
+			return [];
+		}
 		const { timescale, segments } = track;
 		const segmentRanges = [];
 		for (let i = 0; i < segments.length; i++) {
@@ -99,6 +106,10 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 				endMs: segmentEndMs
 			});
 		}
+		if (segmentRanges.length === 0) console.warn(`calculateAudioSegmentRange: no segments found for fromMs ${fromMs} toMs ${toMs} rendition ${JSON.stringify({
+			rendition,
+			track
+		})}`);
 		return segmentRanges;
 	}
 	computeSegmentId(desiredSeekTimeMs, rendition) {

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

@@ -1,28 +1,53 @@
+import { RequestDeduplicator } from '../../transcoding/cache/RequestDeduplicator.js';
 import { AudioRendition, SegmentTimeRange, VideoRendition } from '../../transcoding/types';
+import { SizeAwareLRUCache } from '../../utils/LRUCache.js';
 import { EFMedia } from '../EFMedia.js';
+export declare const mediaCache: SizeAwareLRUCache<string>;
+export declare const globalRequestDeduplicator: RequestDeduplicator;
 export declare abstract class BaseMediaEngine {
-    private requestDeduplicator;
+    protected host: EFMedia;
+    constructor(host: EFMedia);
     abstract get videoRendition(): VideoRendition | undefined;
     abstract get audioRendition(): AudioRendition | undefined;
-    abstract get host(): EFMedia;
     getVideoRendition(): VideoRendition;
     getAudioRendition(): AudioRendition;
     /**
      * Generate cache key for segment requests
      */
     private getSegmentCacheKey;
+    /**
+     * Unified fetch method with caching and global deduplication
+     * All requests (media, manifest, init segments) go through this method
+     */
+    protected fetchWithCache(url: string, options: {
+        responseType: "arrayBuffer" | "json";
+        headers?: Record<string, string>;
+        signal?: AbortSignal;
+    }): Promise<any>;
+    /**
+     * Handles abort logic for a cached request without affecting the underlying fetch
+     * This allows multiple instances to share the same cached request while each
+     * manages their own abort behavior
+     */
+    private handleAbortForCachedRequest;
+    fetchMedia(url: string, signal?: AbortSignal): Promise<ArrayBuffer>;
+    fetchManifest(url: string, signal?: AbortSignal): Promise<any>;
+    fetchMediaWithHeaders(url: string, headers: Record<string, string>, signal?: AbortSignal): Promise<ArrayBuffer>;
+    fetchMediaCache(url: string, signal?: AbortSignal): Promise<ArrayBuffer>;
+    fetchManifestCache(url: string, signal?: AbortSignal): Promise<any>;
+    fetchMediaCacheWithHeaders(url: string, headers: Record<string, string>, signal?: AbortSignal): Promise<ArrayBuffer>;
     /**
      * Abstract method for actual segment fetching - implemented by subclasses
      */
-    abstract fetchMediaSegmentImpl(segmentId: number, rendition: {
+    abstract fetchMediaSegment(segmentId: number, rendition: {
         trackId: number | undefined;
         src: string;
     }): Promise<ArrayBuffer>;
     /**
      * Fetch media segment with built-in deduplication
-     * Eliminates the need for separate coordinators - cleaner architecture
+     * Now uses global deduplication for all requests
      */
-    fetchMediaSegment(segmentId: number, rendition: {
+    fetchMediaSegmentWithDeduplication(segmentId: number, rendition: {
         trackId: number | undefined;
         src: string;
     }, _signal?: AbortSignal): Promise<ArrayBuffer>;
@@ -41,12 +66,6 @@ export declare abstract class BaseMediaEngine {
      * Cancel all active segment requests (for cleanup)
      */
     cancelAllSegmentRequests(): void;
-    fetchMediaCache(mediaUrl: string): Promise<ArrayBuffer>;
-    /**
-     * Enhanced caching method that supports custom headers (e.g., Range requests)
-     * Cache key includes both URL and headers for proper cache isolation
-     */
-    fetchMediaCacheWithHeaders(mediaUrl: string, headers?: Record<string, string>, signal?: AbortSignal): Promise<ArrayBuffer>;
     /**
      * Calculate audio segments needed for a time range
      * Each media engine implements this based on their segment structure

package/dist/elements/EFMedia/BaseMediaEngine.js

@@ -1,9 +1,10 @@
 import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator.js";
 import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
 const mediaCache = new SizeAwareLRUCache(100 * 1024 * 1024);
+const globalRequestDeduplicator = new RequestDeduplicator();
 var BaseMediaEngine = class {
-	constructor() {
-		this.requestDeduplicator = new RequestDeduplicator();
+	constructor(host) {
+		this.host = host;
 	}
 	getVideoRendition() {
 		if (!this.videoRendition) throw new Error("No video rendition available");
@@ -20,13 +21,86 @@ var BaseMediaEngine = class {
 		return `${rendition.src}-${rendition.id}-${segmentId}-${rendition.trackId}`;
 	}
 	/**
+	* Unified fetch method with caching and global deduplication
+	* All requests (media, manifest, init segments) go through this method
+	*/
+	async fetchWithCache(url, options) {
+		const { responseType, headers, signal } = options;
+		const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+		const cached = mediaCache.get(cacheKey);
+		if (cached) {
+			if (signal) return this.handleAbortForCachedRequest(cached, signal);
+			return cached;
+		}
+		const promise = globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+			try {
+				const response = await this.host.fetch(url, { headers });
+				if (responseType === "json") return response.json();
+				return response.arrayBuffer();
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+				throw error;
+			}
+		});
+		mediaCache.set(cacheKey, promise);
+		promise.catch((error) => {
+			if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+		});
+		if (signal) return this.handleAbortForCachedRequest(promise, signal);
+		return promise;
+	}
+	/**
+	* Handles abort logic for a cached request without affecting the underlying fetch
+	* This allows multiple instances to share the same cached request while each
+	* manages their own abort behavior
+	*/
+	handleAbortForCachedRequest(promise, signal) {
+		if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+		return Promise.race([promise, new Promise((_, reject) => {
+			signal.addEventListener("abort", () => {
+				reject(new DOMException("Aborted", "AbortError"));
+			});
+		})]);
+	}
+	async fetchMedia(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.fetchWithCache(url, {
+			responseType: "arrayBuffer",
+			signal
+		});
+	}
+	async fetchManifest(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.fetchWithCache(url, {
+			responseType: "json",
+			signal
+		});
+	}
+	async fetchMediaWithHeaders(url, headers, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.fetchWithCache(url, {
+			responseType: "arrayBuffer",
+			headers,
+			signal
+		});
+	}
+	async fetchMediaCache(url, signal) {
+		return this.fetchMedia(url, signal);
+	}
+	async fetchManifestCache(url, signal) {
+		return this.fetchManifest(url, signal);
+	}
+	async fetchMediaCacheWithHeaders(url, headers, signal) {
+		return this.fetchMediaWithHeaders(url, headers, signal);
+	}
+	/**
 	* Fetch media segment with built-in deduplication
-	* Eliminates the need for separate coordinators - cleaner architecture
+	* Now uses global deduplication for all requests
 	*/
-	async fetchMediaSegment(segmentId, rendition, _signal) {
+	async fetchMediaSegmentWithDeduplication(segmentId, rendition, _signal) {
 		const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
-		return this.requestDeduplicator.executeRequest(cacheKey, async () => {
-			return this.fetchMediaSegmentImpl(segmentId, rendition);
+		return globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+			return this.fetchMediaSegment(segmentId, rendition);
 		});
 	}
 	/**
@@ -34,41 +108,19 @@ var BaseMediaEngine = class {
 	*/
 	isSegmentBeingFetched(segmentId, rendition) {
 		const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
-		return this.requestDeduplicator.isPending(cacheKey);
+		return globalRequestDeduplicator.isPending(cacheKey);
 	}
 	/**
 	* Get count of active segment requests (for debugging/monitoring)
 	*/
 	getActiveSegmentRequestCount() {
-		return this.requestDeduplicator.getPendingCount();
+		return globalRequestDeduplicator.getPendingCount();
 	}
 	/**
 	* Cancel all active segment requests (for cleanup)
 	*/
 	cancelAllSegmentRequests() {
-		this.requestDeduplicator.clear();
-	}
-	async fetchMediaCache(mediaUrl) {
-		const cached = mediaCache.get(mediaUrl);
-		if (cached) return cached;
-		const promise = this.host.fetch(mediaUrl).then((response) => response.arrayBuffer());
-		mediaCache.set(mediaUrl, promise);
-		return promise;
-	}
-	/**
-	* Enhanced caching method that supports custom headers (e.g., Range requests)
-	* Cache key includes both URL and headers for proper cache isolation
-	*/
-	async fetchMediaCacheWithHeaders(mediaUrl, headers, signal) {
-		const cacheKey = headers ? `${mediaUrl}:${JSON.stringify(headers)}` : mediaUrl;
-		const cached = mediaCache.get(cacheKey);
-		if (cached) return cached;
-		const promise = this.host.fetch(mediaUrl, {
-			headers,
-			signal
-		}).then((response) => response.arrayBuffer());
-		mediaCache.set(cacheKey, promise);
-		return promise;
+		globalRequestDeduplicator.clear();
 	}
 	/**
 	* Calculate audio segments needed for a time range

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

@@ -1,14 +1,12 @@
 import { AudioRendition, MediaEngine, RenditionId, VideoRendition } from '../../transcoding/types';
-import { ManifestResponse } from '../../transcoding/types/index.js';
 import { UrlGenerator } from '../../transcoding/utils/UrlGenerator';
 import { EFMedia } from '../EFMedia.js';
 import { BaseMediaEngine } from './BaseMediaEngine';
 export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
-    host: EFMedia;
     private urlGenerator;
     private data;
     static fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string): Promise<JitMediaEngine>;
-    constructor(host: EFMedia, urlGenerator: UrlGenerator, data: ManifestResponse);
+    constructor(host: EFMedia, urlGenerator: UrlGenerator);
     get durationMs(): number;
     get src(): string;
     get audioRendition(): AudioRendition | undefined;
@@ -22,7 +20,7 @@ export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngi
         trackId: number | undefined;
         src: string;
     }, signal: AbortSignal): Promise<ArrayBuffer>;
-    fetchMediaSegmentImpl(segmentId: number, rendition: {
+    fetchMediaSegment(segmentId: number, rendition: {
         id?: RenditionId;
         trackId: number | undefined;
         src: string;

package/dist/elements/EFMedia/JitMediaEngine.js

@@ -1,15 +1,15 @@
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
 var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	static async fetch(host, urlGenerator, url) {
-		const response = await host.fetch(url);
-		const data = await response.json();
-		return new JitMediaEngine(host, urlGenerator, data);
+		const engine = new JitMediaEngine(host, urlGenerator);
+		const data = await engine.fetchManifest(url);
+		engine.data = data;
+		return engine;
 	}
-	constructor(host, urlGenerator, data) {
-		super();
-		this.host = host;
+	constructor(host, urlGenerator) {
+		super(host);
+		this.data = {};
 		this.urlGenerator = urlGenerator;
-		this.data = data;
 	}
 	get durationMs() {
 		return this.data.durationMs;
@@ -18,6 +18,7 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 		return this.data.sourceUrl;
 	}
 	get audioRendition() {
+		if (!this.data.audioRenditions || this.data.audioRenditions.length === 0) return void 0;
 		const rendition = this.data.audioRenditions[0];
 		if (!rendition) return void 0;
 		return {
@@ -29,6 +30,7 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 		};
 	}
 	get videoRendition() {
+		if (!this.data.videoRenditions || this.data.videoRenditions.length === 0) return void 0;
 		const rendition = this.data.videoRenditions[0];
 		if (!rendition) return void 0;
 		return {
@@ -45,14 +47,12 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	async fetchInitSegment(rendition, signal) {
 		if (!rendition.id) throw new Error("Rendition ID is required for JIT metadata");
 		const url = this.urlGenerator.generateSegmentUrl("init", rendition.id, this);
-		const response = await this.host.fetch(url, { signal });
-		const arrayBuffer = await response.arrayBuffer();
-		return arrayBuffer;
+		return this.fetchMedia(url, signal);
 	}
-	async fetchMediaSegmentImpl(segmentId, rendition) {
+	async fetchMediaSegment(segmentId, rendition) {
 		if (!rendition.id) throw new Error("Rendition ID is required for JIT metadata");
 		const url = this.urlGenerator.generateSegmentUrl(segmentId, rendition.id, this);
-		return this.fetchMediaCache(url);
+		return this.fetchMedia(url);
 	}
 	computeSegmentId(desiredSeekTimeMs, rendition) {
 		if (desiredSeekTimeMs > this.durationMs) return void 0;

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

@@ -4,8 +4,13 @@ const makeAudioSeekTask = (host) => {
 	return new Task(host, {
 		args: () => [host.desiredSeekTimeMs, host.audioInputTask.value],
 		onError: (error) => {
-			if (error instanceof IgnorableError) console.info("audioSeekTask aborted");
-			console.error("audioSeekTask error", error);
+			if (error instanceof IgnorableError) {
+				console.info("audioSeekTask aborted");
+				return;
+			}
+			if (error instanceof DOMException) console.error(`audioSeekTask error: ${error.message} ${error.name} ${error.code}`);
+			else if (error instanceof Error) console.error(`audioSeekTask error ${error.name}: ${error.message}`);
+			else console.error("audioSeekTask unknown error", error);
 		},
 		onComplete: (_value) => {},
 		task: async ([targetSeekTimeMs], { signal }) => {

package/dist/elements/EFVideo.d.ts

@@ -11,7 +11,6 @@ interface LoadingState {
 }
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
-    static get observedAttributes(): string[];
     static styles: import('lit').CSSResult[];
     canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
     /**

package/dist/elements/EFVideo.js

@@ -15,15 +15,6 @@ import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
 const log = debug("ef:elements:EFVideo");
 let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
-	static get observedAttributes() {
-		const parentAttributes = EFMedia.observedAttributes || [];
-		return [
-			...parentAttributes,
-			"video-buffer-duration",
-			"max-video-buffer-fetches",
-			"enable-video-buffering"
-		];
-	}
 	static {
 		this.styles = [css`
       :host {

package/dist/elements/TargetController.js

@@ -21,7 +21,8 @@ var TargetRegistry = class {
 		this.idMap.set(id, target);
 		for (const callback of this.callbacks.get(id) ?? []) callback(target);
 	}
-	unregister(id) {
+	unregister(id, target) {
+		if (this.idMap.get(id) !== target) return;
 		for (const callback of this.callbacks.get(id) ?? []) callback(void 0);
 		this.idMap.delete(id);
 		this.callbacks.delete(id);
@@ -46,7 +47,7 @@ const EFTargetable = (superClass) => {
 		updateRegistry(oldValue, newValue) {
 			if (!this.#registry) return;
 			if (oldValue === newValue) return;
-			if (oldValue) this.#registry.unregister(oldValue);
+			if (oldValue) this.#registry.unregister(oldValue, this);
 			if (newValue) this.#registry.register(newValue, this);
 		}
 		connectedCallback() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.18.7-beta.0",
+  "version": "0.18.19-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.18.7-beta.0",
+    "@editframe/assets": "0.18.19-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFAudio.ts

@@ -1,31 +1,18 @@
 import { Task } from "@lit/task";
 import { html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { EFMedia } from "./EFMedia.js";
 
 @customElement("ef-audio")
 export class EFAudio extends TWMixin(EFMedia) {
-  static get observedAttributes() {
-    // biome-ignore lint/complexity/noThisInStatic: We need to access super
-    const parentAttributes = super.observedAttributes || [];
-    return [...parentAttributes];
-  }
-
-  attributeChangedCallback(
-    name: string,
-    old: string | null,
-    value: string | null,
-  ) {
-    super.attributeChangedCallback(name, old, value);
-
-    // Explicitly handle asset-id attribute to property conversion
-    // EFVideo works without this fix, but EFAudio requires it due to some fundamental difference
-    if (name === "asset-id") {
-      this.assetId = value;
-    }
-  }
+  // HACK: This dummy property is needed to activate Lit's property processing system
+  // Without it, inherited properties from EFMedia don't work correctly
+  // TODO: Remove this as soon as we have an audio-specific property that needs @property
+  @property({ type: Boolean, attribute: "dummy-property" })
+  // @ts-expect-error - This is a hack to activate Lit's property processing system
+  private _propertyHack = false;
 
   audioElementRef = createRef<HTMLAudioElement>();
 

package/src/elements/EFMedia/AssetIdMediaEngine.ts

@@ -27,7 +27,16 @@ export class AssetIdMediaEngine
     private apiHost: string,
   ) {
     // Pass assetId as src to parent constructor for compatibility
-    super(host, assetId, data);
+    super(host, assetId);
+    // Initialize data after parent constructor
+    this.data = data;
+
+    // Calculate duration from the data
+    const longestFragment = Object.values(this.data).reduce(
+      (max, fragment) => Math.max(max, fragment.duration / fragment.timescale),
+      0,
+    );
+    this.durationMs = longestFragment * 1000;
   }
 
   // Override URL-building methods to use API endpoints instead of file paths