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

package/src/elements/EFMedia.browsertest.ts

@@ -12,6 +12,7 @@ import { EFMedia } from "./EFMedia.js";
 import "./EFTimegroup.js";
 import type { EFTimegroup } from "./EFTimegroup.js";
 import "./EFVideo.js";
+import type { EFPreview } from "../gui/EFPreview.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
 import { AssetMediaEngine } from "./EFMedia/AssetMediaEngine.js";
 import type { EFVideo } from "./EFVideo.js";
@@ -42,11 +43,16 @@ declare global {
 
 const test = baseTest.extend<{
   timegroup: EFTimegroup;
+  preview: EFPreview;
   jitVideo: EFVideo;
   configuration: EFConfiguration;
   urlGenerator: UrlGenerator;
   host: EFVideo;
 }>({
+  preview: async ({}, use) => {
+    const preview = document.createElement("ef-preview");
+    await use(preview);
+  },
   timegroup: async ({}, use) => {
     const timegroup = document.createElement("ef-timegroup");
     timegroup.setAttribute("mode", "contain");
@@ -59,6 +65,7 @@ const test = baseTest.extend<{
     const apiHost = `${window.location.protocol}//${window.location.host}`;
     configuration.setAttribute("api-host", apiHost);
     configuration.apiHost = apiHost;
+    configuration.signingURL = "";
     document.body.appendChild(configuration);
     await use(configuration);
   },
@@ -74,9 +81,10 @@ const test = baseTest.extend<{
     host.src = "http://web:3000/head-moov-480p.mp4";
     await use(host);
   },
-  jitVideo: async ({ configuration, timegroup, host }, use) => {
+  jitVideo: async ({ configuration, timegroup, host, preview }, use) => {
     timegroup.append(host);
-    configuration.append(timegroup);
+    configuration.append(preview);
+    preview.append(timegroup);
     await host.mediaEngineTask.run();
     await use(host);
   },
@@ -98,8 +106,7 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
-      await timegroup.waitForMediaDurations();
-      timegroup.currentTimeMs = 2200;
+      timegroup.currentTime = 2.2;
       await timegroup.seekTask.taskComplete;
       const sample = await jitVideo.unifiedVideoSeekTask.taskComplete;
       expect(sample?.timestamp).toBeCloseTo(2.2, 1);
@@ -373,6 +380,7 @@ describe("EFMedia", () => {
           const apiHost = `${window.location.protocol}//${window.location.host}`;
           configuration.setAttribute("api-host", apiHost);
           configuration.apiHost = apiHost;
+          configuration.signingURL = ""; // Disable URL signing for tests
           document.body.appendChild(configuration);
           await use(configuration);
           // configuration.remove();
@@ -529,6 +537,7 @@ describe("EFMedia", () => {
         const apiHost = `${window.location.protocol}//${window.location.host}`;
         configuration.setAttribute("api-host", apiHost);
         configuration.apiHost = apiHost;
+        configuration.signingURL = ""; // Disable URL signing for tests
         document.body.appendChild(configuration);
         await use(configuration);
       },

package/src/elements/EFMedia.ts

@@ -17,7 +17,6 @@ import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFTargetable } from "./TargetController.ts";
-import { updateAnimations } from "./updateAnimations.ts";
 
 // EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts
 declare global {
@@ -78,9 +77,6 @@ export class EFMedia extends EFTargetable(
     `,
   ];
 
-  @property({ type: Number })
-  currentTimeMs = 0;
-
   /**
    * Duration in milliseconds for audio buffering ahead of current time
    * @domAttribute "audio-buffer-duration"
@@ -216,12 +212,12 @@ export class EFMedia extends EFTargetable(
     if (changedProperties.has("ownCurrentTimeMs")) {
       this.executeSeek(this.currentSourceTimeMs);
     }
-    if (
-      changedProperties.has("currentTime") ||
-      changedProperties.has("ownCurrentTimeMs")
-    ) {
-      updateAnimations(this);
-    }
+    // if (
+    //   changedProperties.has("currentTime") ||
+    //   changedProperties.has("ownCurrentTimeMs")
+    // ) {
+    //   updateAnimations(this);
+    // }
   }
 
   get hasOwnDuration() {

package/src/elements/EFTemporal.ts

@@ -1,6 +1,6 @@
 import { consume, createContext } from "@lit/context";
 import { Task } from "@lit/task";
-import type { LitElement, PropertyValueMap, ReactiveController } from "lit";
+import type { LitElement, ReactiveController } from "lit";
 import { property, state } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { durationConverter } from "./durationConverter.js";
@@ -149,6 +149,13 @@ export declare class TemporalMixinInterface {
    * played.
    */
   get ownCurrentTimeMs(): number;
+
+  /**
+   * Element's current time for progress calculation.
+   * For timegroups: their timeline currentTimeMs
+   * For other temporal elements: their ownCurrentTimeMs
+   */
+  get currentTimeMs(): number;
   /**
    * The current time of the element in milliseconds, adjusted for trimming.
    *
@@ -211,11 +218,11 @@ const EF_TEMPORAL = Symbol("EF_TEMPORAL");
 
 export const deepGetTemporalElements = (
   element: Element,
-  temporals: TemporalMixinInterface[] = [],
+  temporals: Array<TemporalMixinInterface & HTMLElement> = [],
 ) => {
   for (const child of element.children) {
     if (isEFTemporal(child)) {
-      temporals.push(child);
+      temporals.push(child as TemporalMixinInterface & HTMLElement);
     }
     deepGetTemporalElements(child, temporals);
   }
@@ -224,11 +231,11 @@ export const deepGetTemporalElements = (
 
 export const deepGetElementsWithFrameTasks = (
   element: Element,
-  elements: Array<HTMLElement & { frameTask: Task }> = [],
+  elements: Array<TemporalMixinInterface & HTMLElement> = [],
 ) => {
   for (const child of element.children) {
     if ("frameTask" in child && child.frameTask instanceof Task) {
-      elements.push(child as HTMLElement & { frameTask: Task });
+      elements.push(child as TemporalMixinInterface & HTMLElement);
     }
     deepGetElementsWithFrameTasks(child, elements);
   }
@@ -236,7 +243,7 @@ export const deepGetElementsWithFrameTasks = (
 };
 
 let temporalCache: Map<Element, TemporalMixinInterface[]>;
-const resetTemporalCache = () => {
+export const resetTemporalCache = () => {
   temporalCache = new Map();
   if (typeof requestAnimationFrame !== "undefined") {
     requestAnimationFrame(resetTemporalCache);
@@ -597,6 +604,14 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return 0;
     }
 
+    /**
+     * Element's current time for progress calculation.
+     * Non-timegroup temporal elements use their local time (ownCurrentTimeMs)
+     */
+    get currentTimeMs() {
+      return this.ownCurrentTimeMs;
+    }
+
     /**
      * Used to calculate the internal currentTimeMs of the element. This is useful
      * for mapping to internal media time codes for audio/video elements.
@@ -616,26 +631,6 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
         }
       },
     });
-
-    protected updated(
-      changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
-    ): void {
-      super.updated(changedProperties);
-      if (
-        changedProperties.has("currentTime") ||
-        changedProperties.has("ownCurrentTimeMs")
-      ) {
-        const timelineTimeMs = (this.rootTimegroup ?? this).ownCurrentTimeMs;
-        if (
-          this.startTimeMs > timelineTimeMs ||
-          this.endTimeMs < timelineTimeMs
-        ) {
-          this.style.display = "none";
-          return;
-        }
-        this.style.display = "";
-      }
-    }
   }
 
   Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {

package/src/elements/EFTimegroup.browsertest.ts

@@ -12,6 +12,12 @@ import { ContextMixin } from "../gui/ContextMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 // Need workbench to make workbench wrapping occurs
 import "../gui/EFWorkbench.js";
+// Additional imports for sequence boundary test
+import "./EFVideo.js";
+import "../gui/EFConfiguration.js";
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../transcoding/types/index.js";
+import { EFMedia } from "./EFMedia.js";
 
 beforeEach(() => {
   for (let i = 0; i < localStorage.length; i++) {
@@ -27,6 +33,61 @@ beforeEach(() => {
 @customElement("test-context")
 class TestContext extends ContextMixin(LitElement) {}
 
+@customElement("timegroup-test-media")
+class TimegroupTestMedia extends EFMedia {
+  mediaEngineTaskCount = 0;
+  mediaEngineTask = new Task(this, {
+    autoRun: false,
+    args: () => ["source", null] as const,
+    task: () => {
+      this.mediaEngineTaskCount++;
+      return Promise.resolve({} as unknown as MediaEngine);
+    },
+  });
+}
+
+@customElement("test-frame-task-a")
+class TestFrameTaskA extends EFTemporal(LitElement) {
+  frameTaskCount = 0;
+
+  frameTask = new Task(this, {
+    autoRun: false,
+    args: () => [],
+    task: () => {
+      this.frameTaskCount++;
+      return Promise.resolve();
+    },
+  });
+}
+
+@customElement("test-frame-task-b")
+class TestFrameTaskB extends EFTemporal(LitElement) {
+  frameTaskCount = 0;
+
+  frameTask = new Task(this, {
+    autoRun: false,
+    args: () => [],
+    task: () => {
+      this.frameTaskCount++;
+      return Promise.resolve();
+    },
+  });
+}
+
+@customElement("test-frame-task-c")
+class TestFrameTaskC extends EFTemporal(LitElement) {
+  frameTaskCount = 0;
+
+  frameTask = new Task(this, {
+    autoRun: false,
+    args: () => [],
+    task: () => {
+      this.frameTaskCount++;
+      return Promise.resolve();
+    },
+  });
+}
+
 @customElement("test-temporal")
 class TestTemporal extends EFTemporal(LitElement) {
   get hasOwnDuration(): boolean {
@@ -38,20 +99,24 @@ declare global {
   interface HTMLElementTagNameMap {
     "test-temporal": TestTemporal;
     "test-context": TestContext;
+    "timegroup-test-media": TimegroupTestMedia;
+    "test-frame-task-a": TestFrameTaskA;
+    "test-frame-task-b": TestFrameTaskB;
+    "test-frame-task-c": TestFrameTaskC;
   }
 }
 
 const renderTimegroup = (result: TemplateResult) => {
   const container = document.createElement("div");
   litRender(result, container);
-  const firstChild = container.firstElementChild;
+  const firstChild = container.querySelector("ef-timegroup");
   if (!firstChild) {
     throw new Error("No first child found");
   }
   if (!(firstChild instanceof EFTimegroup)) {
     throw new Error("First child is not an EFTimegroup");
   }
-  document.body.appendChild(firstChild);
+  document.body.appendChild(container);
   return firstChild;
 };
 
@@ -436,3 +501,122 @@ describe("DOM nodes", () => {
     assert.equal(timegroup.durationMs, 10_000);
   });
 });
+
+describe("Dynamic content updates", () => {
+  test("updates duration when new child temporal elements are added dynamically", async () => {
+    // Create a sequence timegroup with initial children
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup mode="sequence">
+        <ef-timegroup mode="fixed" duration="3s"></ef-timegroup>
+        <ef-timegroup mode="fixed" duration="2s"></ef-timegroup>
+      </ef-timegroup>`,
+    );
+
+    // Initial duration should be 5 seconds (3s + 2s)
+    assert.equal(timegroup.durationMs, 5_000);
+    assert.equal(timegroup.childTemporals.length, 2);
+
+    // Dynamically add a new child element
+    const newChild = document.createElement("ef-timegroup");
+    newChild.setAttribute("mode", "fixed");
+    newChild.setAttribute("duration", "4s");
+    timegroup.appendChild(newChild);
+
+    // Wait for slot change event to process
+    await timegroup.updateComplete;
+
+    // Duration should now include the new child (3s + 2s + 4s = 9s)
+    assert.equal(timegroup.durationMs, 9_000);
+    assert.equal(timegroup.childTemporals.length, 3);
+  });
+
+  test("updates duration when child temporal elements are removed dynamically", async () => {
+    // Create a contain timegroup with initial children
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup mode="contain">
+        <ef-timegroup id="child1" mode="fixed" duration="5s"></ef-timegroup>
+        <ef-timegroup id="child2" mode="fixed" duration="8s"></ef-timegroup>
+        <ef-timegroup id="child3" mode="fixed" duration="3s"></ef-timegroup>
+      </ef-timegroup>`,
+    );
+
+    // Initial duration should be max of children (8s)
+    assert.equal(timegroup.durationMs, 8_000);
+    assert.equal(timegroup.childTemporals.length, 3);
+
+    // Remove the longest duration child
+    const child2 = timegroup.querySelector("#child2");
+    child2?.remove();
+
+    // Wait for slot change event to process
+    await timegroup.updateComplete;
+
+    // Duration should now be max of remaining children (5s)
+    assert.equal(timegroup.durationMs, 5_000);
+    assert.equal(timegroup.childTemporals.length, 2);
+  });
+
+  describe("frameTask", () => {
+    test("executes all nested frame tasks", async () => {
+      const timegroup = renderTimegroup(
+        html`<ef-timegroup mode="sequence">
+          <test-frame-task-a duration="1s"></test-frame-task-a>
+          <div>
+            <test-frame-task-b duration="1s">
+              <test-frame-task-c duration="1s"></test-frame-task-c>
+            </test-frame-task-b>
+          </div>
+        </ef-timegroup>`,
+      );
+      const frameTaskA = timegroup.querySelector("test-frame-task-a")!;
+      const frameTaskB = timegroup.querySelector("test-frame-task-b")!;
+      const frameTaskC = timegroup.querySelector("test-frame-task-c")!;
+
+      assert.equal(frameTaskA.frameTaskCount, 0);
+      assert.equal(frameTaskB.frameTaskCount, 0);
+      assert.equal(frameTaskC.frameTaskCount, 0);
+
+      await timegroup.frameTask.run();
+
+      // At timeline time 0ms:
+      // - frameTaskA (0-1000ms) should run
+      // - frameTaskB (1000-2000ms) should NOT run
+      // - frameTaskC (0-1000ms) should run (inherits root positioning)
+      assert.equal(frameTaskA.frameTaskCount, 1);
+      assert.equal(frameTaskB.frameTaskCount, 0); // Not visible at time 0
+      assert.equal(frameTaskC.frameTaskCount, 1); // Nested in B but inherits root positioning
+    });
+  });
+
+  describe("seekTask", () => {
+    test("does not execute if not the root timegroup", async () => {
+      const timegroup = renderTimegroup(
+        html`<ef-timegroup mode="sequence">
+            <ef-timegroup mode="fixed" duration="3s">
+              <test-frame-task-a></test-frame-task-a>
+            </ef-timegroup>
+          </ef-timegroup>`,
+      );
+      const nonRootTimegroup = timegroup.querySelector("ef-timegroup")!;
+      const frameTaskA = timegroup.querySelector("test-frame-task-a")!;
+      assert.equal(frameTaskA.frameTaskCount, 0);
+      await nonRootTimegroup.seekTask.run();
+      assert.equal(frameTaskA.frameTaskCount, 0);
+    });
+
+    test("waits for media durations", async () => {
+      const timegroup = renderTimegroup(
+        html`
+        <ef-preview>
+          <ef-timegroup mode="sequence">
+            <timegroup-test-media></timegroup-test-media>
+          </ef-timegroup>
+        </ef-preview>`,
+      );
+      const media = timegroup.querySelector("timegroup-test-media")!;
+      assert.equal(media.mediaEngineTaskCount, 0);
+      await timegroup.seekTask.run();
+      assert.equal(media.mediaEngineTaskCount, 1);
+    });
+  });
+});