@editframe/elements 0.19.2-beta.0 → 0.19.4-beta.0

package/dist/elements/EFTimegroup.d.ts

@@ -33,12 +33,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
     getPendingFrameTasks(signal?: AbortSignal): Promise<Task<readonly unknown[], unknown>[]>;
     waitForNestedUpdates(signal?: AbortSignal): Promise<void>;
     waitForFrameTasks(): Promise<void>;
-    /**
-     * Wait for all media elements to load their initial segments.
-     * Ideally we would only need the extracted index json data, but
-     * that caused issues with constructing audio data. We had negative durations
-     * in calculations and it was not clear why.
-     */
+    mediaDurationsPromise: Promise<void> | undefined;
     waitForMediaDurations(): Promise<void>;
     get childTemporals(): import('./EFTemporal.js').TemporalMixinInterface[];
     get contextProvider(): import('../gui/ContextMixin.js').ContextMixinInterface | null;

package/dist/elements/EFTimegroup.js

@@ -32,6 +32,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		this._mode = "contain";
 		this._overlapMs = 0;
 		this.fit = "none";
+		this.mediaDurationsPromise = void 0;
 		this.frameTask = new Task(this, {
 			autoRun: false,
 			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
@@ -90,17 +91,16 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	#pendingSeekTime;
 	#processingPendingSeek = false;
 	set currentTime(time) {
+		time = Math.max(0, time);
 		if (!this.isRootTimegroup) return;
 		if (Number.isNaN(time)) return;
 		if (time === this.#currentTime && !this.#processingPendingSeek) return;
 		if (this.#pendingSeekTime === time) return;
 		if (this.#seekInProgress) {
-			console.trace("pending seek to", time);
 			this.#pendingSeekTime = time;
 			this.#currentTime = time;
 			return;
 		}
-		console.trace("seeking to", time);
 		this.#currentTime = time;
 		this.#seekInProgress = true;
 		this.seekTask.run().finally(() => {
@@ -161,9 +161,12 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.id) this.waitForMediaDurations().then(() => {
-			const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
-			if (maybeLoadedTime !== void 0) this.currentTime = maybeLoadedTime;
+		this.waitForMediaDurations().then(() => {
+			if (this.id) {
+				const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
+				if (maybeLoadedTime !== void 0) this.currentTime = maybeLoadedTime;
+			}
+			if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) this.seekTask.run();
 		});
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
@@ -256,13 +259,17 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			return element.frameTask.run();
 		}));
 	}
+	async waitForMediaDurations() {
+		if (!this.mediaDurationsPromise) this.mediaDurationsPromise = this.#waitForMediaDurations();
+		return this.mediaDurationsPromise;
+	}
 	/**
 	* Wait for all media elements to load their initial segments.
 	* Ideally we would only need the extracted index json data, but
 	* that caused issues with constructing audio data. We had negative durations
 	* in calculations and it was not clear why.
 	*/
-	async waitForMediaDurations() {
+	async #waitForMediaDurations() {
 		await this.updateComplete;
 		const mediaElements = deepGetMediaElements(this);
 		await Promise.all(mediaElements.map((m) => m.mediaEngineTask.value ? Promise.resolve() : m.mediaEngineTask.run()));

package/dist/elements/updateAnimations.js

@@ -1,5 +1,5 @@
 import { deepGetTemporalElements, isEFTemporal } from "./EFTemporal.js";
-const ANIMATION_PRECISION_OFFSET = Number.EPSILON;
+const ANIMATION_PRECISION_OFFSET = .001;
 const DEFAULT_ANIMATION_ITERATIONS = 1;
 const PROGRESS_PROPERTY = "--ef-progress";
 const DURATION_PROPERTY = "--ef-duration";

package/package.json

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

package/src/elements/EFTimegroup.ts

@@ -106,6 +106,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
+    time = Math.max(0, time);
     if (!this.isRootTimegroup) {
       return;
     }
@@ -120,12 +121,10 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
 
     if (this.#seekInProgress) {
-      console.trace("pending seek to", time);
       this.#pendingSeekTime = time;
       this.#currentTime = time;
       return;
     }
-    console.trace("seeking to", time);
 
     this.#currentTime = time;
     // This will be set to false in the seekTask
@@ -212,14 +211,17 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   connectedCallback() {
     super.connectedCallback();
-    if (this.id) {
-      this.waitForMediaDurations().then(() => {
+    this.waitForMediaDurations().then(() => {
+      if (this.id) {
         const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
         if (maybeLoadedTime !== undefined) {
           this.currentTime = maybeLoadedTime;
         }
-      });
-    }
+      }
+      if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) {
+        this.seekTask.run();
+      }
+    });
 
     if (this.parentTimegroup) {
       new TimegroupController(this.parentTimegroup, this);
@@ -376,13 +378,22 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     );
   }
 
+  mediaDurationsPromise: Promise<void> | undefined = undefined;
+
+  async waitForMediaDurations() {
+    if (!this.mediaDurationsPromise) {
+      this.mediaDurationsPromise = this.#waitForMediaDurations();
+    }
+    return this.mediaDurationsPromise;
+  }
+
   /**
    * Wait for all media elements to load their initial segments.
    * Ideally we would only need the extracted index json data, but
    * that caused issues with constructing audio data. We had negative durations
    * in calculations and it was not clear why.
    */
-  async waitForMediaDurations() {
+  async #waitForMediaDurations() {
     // We must await updateComplete to ensure all media elements inside this are connected
     // and will match deepGetMediaElements
     await this.updateComplete;

package/src/elements/updateAnimations.browsertest.ts

@@ -7,8 +7,6 @@ import {
 
 import "./EFTimegroup.js";
 
-// Import the constant for tests that need to check animation precision
-
 beforeEach(() => {
   // Clean up DOM
   while (document.body.children.length) {
@@ -415,6 +413,35 @@ describe("Timeline Element Synchronizer", () => {
 
       assert.equal(animation.playState, "paused");
     });
+
+    test("keeps completed animations available for scrubbing", async () => {
+      // Create a timegroup with 10s duration
+      const timegroup = document.createElement("ef-timegroup") as EFTimegroup;
+      timegroup.setAttribute("mode", "fixed");
+      timegroup.setAttribute("duration", "10000ms");
+      document.body.appendChild(timegroup);
+
+      // Create a child element with a 5s animation
+      const child = document.createElement("div");
+      timegroup.appendChild(child);
+
+      child.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 5000, // 5s animation
+        iterations: 1,
+        delay: 0,
+      });
+      timegroup.currentTime = 6;
+      await timegroup.seekTask.run();
+
+      // Animation should still be available even though timeline (6s) > animation duration (5s)
+      // This prevents animations from being removed, enabling scrubbing backwards
+      const animations = timegroup.getAnimations({ subtree: true });
+      assert.equal(
+        animations.length,
+        1,
+        "REGRESSION TEST: Animation should remain available for scrubbing. This would fail with Number.EPSILON due to insufficient precision offset.",
+      );
+    });
   });
 
   describe("edge cases", () => {

package/src/elements/updateAnimations.ts

@@ -8,7 +8,7 @@ import {
 export type AnimatableElement = TemporalMixinInterface & HTMLElement;
 
 // Constants
-const ANIMATION_PRECISION_OFFSET = Number.EPSILON;
+const ANIMATION_PRECISION_OFFSET = 0.001;
 const DEFAULT_ANIMATION_ITERATIONS = 1;
 const PROGRESS_PROPERTY = "--ef-progress";
 const DURATION_PROPERTY = "--ef-duration";