@editframe/elements 0.18.20-beta.0 → 0.18.22-beta.0

package/dist/elements/EFTimegroup.js

@@ -25,17 +25,28 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._timeGroupContext = this;
-		this.isFrameUpdateInProgress = false;
-		this.queuedTimeUpdate = null;
 		this.mode = "contain";
 		this.overlapMs = 0;
 		this.fit = "none";
 		this.frameTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
 			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-			task: async ([], { signal: _signal }) => {
-				let fullyUpdated = await this.updateComplete;
-				while (!fullyUpdated) fullyUpdated = await this.updateComplete;
+			task: async ([], { signal }) => {
+				if (this.isRootTimegroup) await this.waitForFrameTasks(signal);
+			}
+		});
+		this.seekTask = new Task(this, {
+			args: () => [this.#pendingSeekTime ?? this.#currentTime],
+			task: async ([targetTime], { signal }) => {
+				const newTime = Math.max(0, Math.min(targetTime, this.durationMs / 1e3));
+				this.#currentTime = newTime;
+				this.requestUpdate("currentTime");
+				await this.updateComplete;
+				signal.throwIfAborted();
+				const videoElements = this.querySelectorAll("ef-video");
+				for (const video of videoElements) if (video.videoSeekTask) video.videoSeekTask.run();
+				await this.frameTask.run();
+				this.#saveTimeToLocalStorage(newTime);
 			}
 		});
 	}
@@ -53,18 +64,23 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	#currentTime = 0;
 	#resizeObserver;
-	#childObserver;
+	#seekInProgress = false;
+	#pendingSeekTime;
 	set currentTime(time) {
-		const newTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
-		if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
-			this.queuedTimeUpdate = newTime;
+		if (this.#seekInProgress) {
+			this.#pendingSeekTime = time;
 			return;
 		}
-		if (this.isRootTimegroup) this.#executeTimeUpdate(newTime);
-		else {
-			this.#currentTime = newTime;
-			this.#saveTimeToLocalStorage(newTime);
-		}
+		this.#seekInProgress = true;
+		this.#pendingSeekTime = time;
+		this.seekTask.run().finally(() => {
+			this.#seekInProgress = false;
+			if (this.#pendingSeekTime !== void 0 && this.#pendingSeekTime !== time) {
+				const pendingTime = this.#pendingSeekTime;
+				this.#pendingSeekTime = void 0;
+				this.currentTime = pendingTime;
+			} else this.#pendingSeekTime = void 0;
+		});
 	}
 	get currentTime() {
 		return this.#currentTime;
@@ -82,26 +98,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		return this.closest("ef-timegroup") === this;
 	}
 	/**
-	* Executes time update with frame locking for root timegroups
-	*/
-	async #executeTimeUpdate(time) {
-		this.isFrameUpdateInProgress = true;
-		this.#currentTime = time;
-		try {
-			this.#saveTimeToLocalStorage(time);
-			await this.waitForFrameTasks();
-		} catch (error) {
-			console.error("⚠️ [TIME_UPDATE_ERROR] Error during frame update:", error);
-		} finally {
-			this.isFrameUpdateInProgress = false;
-			if (this.queuedTimeUpdate !== null && this.queuedTimeUpdate !== time) {
-				const nextTime = this.queuedTimeUpdate;
-				this.queuedTimeUpdate = null;
-				setTimeout(() => this.#executeTimeUpdate(nextTime), 0);
-			}
-		}
-	}
-	/**
 	* Saves time to localStorage (extracted for reuse)
 	*/
 	#saveTimeToLocalStorage(time) {
@@ -129,25 +125,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
-		this.#childObserver = new MutationObserver((mutations) => {
-			let shouldUpdate = false;
-			for (const mutation of mutations) if (mutation.type === "childList") shouldUpdate = true;
-			else if (mutation.type === "attributes") {
-				if (mutation.attributeName === "duration" || mutation.attributeName === "mode") shouldUpdate = true;
-			}
-			if (shouldUpdate) {
-				import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
-					clearTemporalCacheForElement(this);
-				});
-				this.requestUpdate();
-			}
-		});
-		this.#childObserver.observe(this, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			attributeFilter: ["duration", "mode"]
-		});
 		requestAnimationFrame(() => {
 			this.updateAnimations();
 		});
@@ -155,7 +132,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver?.disconnect();
-		this.#childObserver?.disconnect();
 	}
 	get storageKey() {
 		if (!this.id) throw new Error("Timegroup must have an id to use localStorage.");
@@ -196,21 +172,37 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			default: throw new Error(`Invalid time mode: ${this.mode}`);
 		}
 	}
-	async getPendingFrameTasks() {
-		await this.updateComplete;
+	async getPendingFrameTasks(signal) {
+		await this.waitForNestedUpdates(signal);
+		signal?.throwIfAborted();
 		const temporals = deepGetElementsWithFrameTasks(this);
 		return temporals.map((temporal) => temporal.frameTask).filter((task) => task.status < TaskStatus.COMPLETE);
 	}
-	async waitForFrameTasks() {
+	async waitForNestedUpdates(signal) {
+		const limit = 10;
+		let steps = 0;
+		let isComplete = true;
+		while (true) {
+			steps++;
+			if (steps > limit) throw new Error("Reached update depth limit.");
+			isComplete = await this.updateComplete;
+			signal?.throwIfAborted();
+			if (isComplete) break;
+		}
+	}
+	async waitForFrameTasks(signal) {
 		const limit = 10;
 		let step = 0;
-		await this.updateComplete;
+		await this.waitForNestedUpdates(signal);
 		while (step < limit) {
 			step++;
-			let pendingTasks = await this.getPendingFrameTasks();
+			let pendingTasks = await this.getPendingFrameTasks(signal);
+			signal?.throwIfAborted();
 			await Promise.all(pendingTasks.map((task) => task.taskComplete));
+			signal?.throwIfAborted();
 			await this.updateComplete;
-			pendingTasks = await this.getPendingFrameTasks();
+			signal?.throwIfAborted();
+			pendingTasks = await this.getPendingFrameTasks(signal);
 			if (pendingTasks.length === 0) break;
 		}
 	}

package/dist/elements/EFVideo.d.ts

@@ -78,42 +78,11 @@ export declare class EFVideo extends EFVideo_base {
      * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
      */
     private isFrameRenderingActive;
-    /**
-     * Effective mode - always returns "asset" for EFVideo
-     */
-    get effectiveMode(): string;
-    /**
-     * Legacy getter for asset index loader (maps to mediaEngine task)
-     */
-    get assetIndexLoader(): Task<readonly [string, string | null], import('../transcoding/types/index.ts').MediaEngine>;
     /**
      * Legacy getter for fragment index task (maps to videoSegmentIdTask)
+     * Still used by EFCaptions
      */
     get fragmentIndexTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
-    /**
-     * Legacy getter for seek task (maps to videoSeekTask)
-     */
-    get seekTask(): Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
-    /**
-     * Legacy getter for media segments task (maps to videoSegmentFetchTask)
-     */
-    get mediaSegmentsTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
-    /**
-     * Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
-     */
-    get assetSegmentKeysTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
-    /**
-     * Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
-     */
-    get assetInitSegmentsTask(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
-    /**
-     * Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
-     */
-    get assetSegmentLoader(): Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
-    /**
-     * Legacy getter for video asset task (maps to videoBufferTask)
-     */
-    get videoAssetTask(): Task<readonly [number], import('./EFMedia/videoTasks/makeVideoBufferTask.ts').VideoBufferState>;
     /**
      * Clean up resources when component is disconnected
      */

package/dist/elements/EFVideo.js

@@ -1,3 +1,4 @@
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EFMedia } from "./EFMedia.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
@@ -94,6 +95,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			message: ""
 		};
 		this.frameTask = new Task(this, {
+			autoRun: EF_INTERACTIVE,
 			args: () => [this.desiredSeekTimeMs],
 			onError: (error) => {
 				console.error("frameTask error", error);
@@ -117,8 +119,11 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 				const sample = this.videoSeekTask.value;
 				if (sample) {
 					const videoFrame = sample.toVideoFrame();
-					this.displayFrame(videoFrame, _seekToMs);
-					videoFrame.close();
+					try {
+						this.displayFrame(videoFrame, _seekToMs);
+					} finally {
+						videoFrame.close();
+					}
 				}
 				if (!isProductionRendering) {
 					if (!this.rootTimegroup || this.rootTimegroup.currentTimeMs === 0 && this.desiredSeekTimeMs === 0) return;
@@ -150,7 +155,11 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
     `;
 	}
 	get canvasElement() {
-		return this.canvasRef.value;
+		const referencedCanvas = this.canvasRef.value;
+		if (referencedCanvas) return referencedCanvas;
+		const shadowCanvas = this.shadowRoot?.querySelector("canvas");
+		if (shadowCanvas) return shadowCanvas;
+		return void 0;
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
@@ -234,60 +243,13 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		return currentTime >= renderStartTime;
 	}
 	/**
-	* Effective mode - always returns "asset" for EFVideo
-	*/
-	get effectiveMode() {
-		return "asset";
-	}
-	/**
-	* Legacy getter for asset index loader (maps to mediaEngine task)
-	*/
-	get assetIndexLoader() {
-		return this.mediaEngineTask;
-	}
-	/**
 	* Legacy getter for fragment index task (maps to videoSegmentIdTask)
+	* Still used by EFCaptions
 	*/
 	get fragmentIndexTask() {
 		return this.videoSegmentIdTask;
 	}
 	/**
-	* Legacy getter for seek task (maps to videoSeekTask)
-	*/
-	get seekTask() {
-		return this.videoSeekTask;
-	}
-	/**
-	* Legacy getter for media segments task (maps to videoSegmentFetchTask)
-	*/
-	get mediaSegmentsTask() {
-		return this.videoSegmentFetchTask;
-	}
-	/**
-	* Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
-	*/
-	get assetSegmentKeysTask() {
-		return this.videoSegmentIdTask;
-	}
-	/**
-	* Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
-	*/
-	get assetInitSegmentsTask() {
-		return this.videoInitSegmentFetchTask;
-	}
-	/**
-	* Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
-	*/
-	get assetSegmentLoader() {
-		return this.videoSegmentFetchTask;
-	}
-	/**
-	* Legacy getter for video asset task (maps to videoBufferTask)
-	*/
-	get videoAssetTask() {
-		return this.videoBufferTask;
-	}
-	/**
 	* Clean up resources when component is disconnected
 	*/
 	disconnectedCallback() {

package/dist/elements/SampleBuffer.js

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

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -4,7 +4,7 @@ declare class TestContext extends TestContext_base {
 }
 declare const TestContextElement_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContextElement extends TestContextElement_base {
-    render(): import('../elements/EFTimegroup.js').EFTimegroup & Element;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/gui/ContextMixin.js

@@ -149,7 +149,7 @@ function ContextMixin(superClass) {
 				if (newTimegroup !== this.targetTimegroup) {
 					this.targetTimegroup = newTimegroup;
 					shouldUpdate = true;
-				}
+				} else if (mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			} else if (mutation.type === "attributes") {
 				if (mutation.attributeName === "duration" || mutation.attributeName === "mode" || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			}

package/package.json

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

package/src/elements/EFAudio.browsertest.ts

@@ -237,9 +237,6 @@ describe("EFAudio", () => {
 
       // Should coordinate the expected tasks
       expect(audio.fragmentIndexTask).toBeDefined();
-      expect(audio.mediaSegmentsTask).toBeDefined();
-      expect(audio.seekTask).toBeDefined();
-      expect(audio.videoAssetTask).toBeDefined();
     });
 
     test("frameTask handles missing dependencies", ({ expect }) => {

package/src/elements/EFAudio.ts

@@ -2,6 +2,7 @@ import { Task } from "@lit/task";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { EFMedia } from "./EFMedia.js";
 
@@ -21,6 +22,7 @@ export class EFAudio extends TWMixin(EFMedia) {
   }
 
   frameTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
     args: () =>
       [
         this.audioBufferTask.status,
@@ -37,34 +39,13 @@ export class EFAudio extends TWMixin(EFMedia) {
     },
   });
 
-  // Getter properties for backward compatibility with tests
   /**
    * Legacy getter for fragment index task (maps to audioSegmentIdTask)
+   * Still used by EFCaptions
    */
   get fragmentIndexTask() {
     return this.audioSegmentIdTask;
   }
-
-  /**
-   * Legacy getter for media segments task (maps to audioSegmentFetchTask)
-   */
-  get mediaSegmentsTask() {
-    return this.audioSegmentFetchTask;
-  }
-
-  /**
-   * Legacy getter for seek task (maps to audioSeekTask)
-   */
-  get seekTask() {
-    return this.audioSeekTask;
-  }
-
-  /**
-   * Legacy getter for audio asset task (maps to audioBufferTask)
-   */
-  get videoAssetTask() {
-    return this.audioBufferTask;
-  }
 }
 
 declare global {

package/src/elements/EFMedia/AssetMediaEngine.browsertest.ts

@@ -40,7 +40,7 @@ describe("AssetMediaEngine", () => {
     mediaEngine,
     expect,
   }) => {
-    expect(mediaEngine.durationMs).toBeCloseTo(10023, 0); // Updated: improved mediabunny processing changed duration
+    expect(mediaEngine.durationMs).toBeCloseTo(10031, 0); // Updated: improved mediabunny processing changed duration
   });
 
   test("provides source URL from constructor", async ({
@@ -97,4 +97,42 @@ describe("AssetMediaEngine", () => {
     expect(mediaEngine.computeSegmentId(500, audio as any)).toBe(0);
     expect(mediaEngine.computeSegmentId(1500, audio as any)).toBe(0);
   });
+
+  describe("bars n tone segment id computation", () => {
+    test("computes 0ms is 0", ({ expect, mediaEngine }) => {
+      expect(
+        mediaEngine.computeSegmentId(0, mediaEngine.getVideoRendition()),
+      ).toBe(0);
+    });
+
+    test("computes 2000 is 1", ({ expect, mediaEngine }) => {
+      expect(
+        mediaEngine.computeSegmentId(2000, mediaEngine.getVideoRendition()),
+      ).toBe(1);
+    });
+
+    test("computes 4000 is 2", ({ expect, mediaEngine }) => {
+      expect(
+        mediaEngine.computeSegmentId(4000, mediaEngine.getVideoRendition()),
+      ).toBe(2);
+    });
+
+    test("computes 6000 is 3", ({ expect, mediaEngine }) => {
+      expect(
+        mediaEngine.computeSegmentId(6000, mediaEngine.getVideoRendition()),
+      ).toBe(3);
+    });
+
+    test("computes 8000 is 4", ({ expect, mediaEngine }) => {
+      expect(
+        mediaEngine.computeSegmentId(8000, mediaEngine.getVideoRendition()),
+      ).toBe(4);
+    });
+
+    test("computes 7975 is  3", ({ expect, mediaEngine }) => {
+      expect(
+        mediaEngine.computeSegmentId(7975, mediaEngine.getVideoRendition()),
+      ).toBe(3);
+    });
+  });
 });

package/src/elements/EFMedia/AssetMediaEngine.ts

@@ -214,7 +214,7 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
     return segmentRanges;
   }
 
-  computeSegmentId(desiredSeekTimeMs: number, rendition: MediaRendition) {
+  computeSegmentId(seekTimeMs: number, rendition: MediaRendition) {
     if (!rendition.trackId) {
       throw new Error("Track ID is required for asset metadata");
     }
@@ -227,11 +227,12 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
     // Apply startTimeOffsetMs to map user timeline to media timeline for segment selection
     const startTimeOffsetMs =
       ("startTimeOffsetMs" in rendition && rendition.startTimeOffsetMs) || 0;
-    const mediaTimeMs = roundToMilliseconds(
-      desiredSeekTimeMs + startTimeOffsetMs,
+
+    const offsetSeekTimeMs = roundToMilliseconds(
+      seekTimeMs + startTimeOffsetMs,
     );
     // Convert to timescale units using consistent precision
-    const scaledSeekTime = convertToScaledTime(mediaTimeMs, timescale);
+    const scaledSeekTime = convertToScaledTime(offsetSeekTimeMs, timescale);
 
     // Find the segment that contains the actual seek time
     for (let i = segments.length - 1; i >= 0; i--) {