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

package/src/elements/EFCaptions.ts

@@ -36,11 +36,12 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
     css`
       :host {
         display: inline-block;
-        white-space: pre;
-        transform-origin: center;
+        white-space: normal;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `,
   ];
@@ -57,7 +58,7 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
     const seedValue = seed / 233; // Normalize to 0-1 range
     this.style.setProperty("--ef-word-seed", seedValue.toString());
 
-    return html` ${this.wordText.trim()} `;
+    return html`${this.wordText}`;
   }
 
   @property({ type: Number, attribute: false })
@@ -98,10 +99,9 @@ export class EFCaptionsSegment extends EFTemporal(LitElement) {
   static styles = [
     css`
       :host {
-        display: block;
-      }
-      :host([hidden]) {
-        display: none;
+        display: inline-block;
+        white-space: normal;
+        line-height: 1;
       }
     `,
   ];
@@ -152,9 +152,11 @@ export class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `,
   ];
@@ -165,7 +167,14 @@ export class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
       return undefined;
     }
     this.hidden = false;
-    return html` ${this.segmentText}`;
+
+    // Check if there's an active word by looking for sibling active word element
+    const activeWord = this.closest("ef-captions")?.querySelector(
+      "ef-captions-active-word",
+    );
+    const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
+
+    return html`${this.segmentText}${hasActiveWord ? " " : ""}`;
   }
 
   @property({ type: Boolean, reflect: true })
@@ -205,9 +214,11 @@ export class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `,
   ];
@@ -218,7 +229,14 @@ export class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
       return undefined;
     }
     this.hidden = false;
-    return html`${this.segmentText} `;
+
+    // Check if there's an active word by looking for sibling active word element
+    const activeWord = this.closest("ef-captions")?.querySelector(
+      "ef-captions-active-word",
+    );
+    const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
+
+    return html`${hasActiveWord ? " " : ""}${this.segmentText}`;
   }
 
   @property({ type: Boolean, reflect: true })
@@ -260,31 +278,18 @@ export class EFCaptions extends EFSourceMixin(
     css`
       :host {
         display: inline-flex;
-        width: fit-content;
-        align-items: baseline;
+        white-space: normal;
+        line-height: 1;
+        gap: 0;
       }
       ::slotted(*) {
+        display: inline-block;
         margin: 0;
         padding: 0;
       }
-      ::slotted(ef-captions-active-word) {
-        min-width: 0.5ch; /* Maintain minimum width when empty */
-        min-height: 1em; /* Maintain height for baseline alignment */
-      }
-      ::slotted(ef-captions-active-word[hidden]) {
-        opacity: 0; /* Hide when empty but maintain layout */
-        min-width: 0.5ch;
-        min-height: 1em;
-      }
     `,
   ];
 
-  @property({ type: String, attribute: "display-mode", reflect: true })
-  displayMode: "word" | "segment" | "context" = "segment";
-
-  @property({ type: Number, attribute: "context-words", reflect: true })
-  contextWords = 3;
-
   @property({ type: String, attribute: "target", reflect: true })
   targetSelector = "";
 
@@ -499,9 +504,11 @@ export class EFCaptions extends EFSourceMixin(
 
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.unifiedCaptionsDataTask.status],
+    args: () => [this.unifiedCaptionsDataTask.status, this.ownCurrentTimeMs],
     task: async () => {
       await this.unifiedCaptionsDataTask.taskComplete;
+      // Trigger updateTextContainers when data is ready or time changes
+      this.updateTextContainers();
     },
   });
 
@@ -519,6 +526,18 @@ export class EFCaptions extends EFSourceMixin(
     else if (this.hasCustomCaptionsData && this.rootTimegroup) {
       new CrossUpdateController(this.rootTimegroup, this);
     }
+
+    // Prevent display:none from being set on caption elements
+    // This maintains constant width in the parent flex container
+    const observer = new MutationObserver(() => {
+      if (this.style.display === "none") {
+        // Remove the display:none and use opacity instead
+        this.style.removeProperty("display");
+        this.style.opacity = "0";
+        this.style.pointerEvents = "none";
+      }
+    });
+    observer.observe(this, { attributes: true, attributeFilter: ["style"] });
   }
 
   protected updated(
@@ -557,10 +576,8 @@ export class EFCaptions extends EFSourceMixin(
       return;
     }
 
-    // Get current time from target element or parent timegroup
-    const currentTimeMs = this.targetElement
-      ? this.targetElement.currentSourceTimeMs
-      : this.ownCurrentTimeMs;
+    // Use ownCurrentTimeMs which is synchronized with the timegroup
+    const currentTimeMs = this.ownCurrentTimeMs;
     const currentTimeSec = currentTimeMs / 1000;
 
     // Find the current word from word_segments
@@ -611,6 +628,7 @@ export class EFCaptions extends EFSourceMixin(
         segmentContainer.segmentStartMs = 0;
         segmentContainer.segmentEndMs = 0;
       }
+      segmentContainer.requestUpdate();
     }
 
     // Process context for both word and segment cases
@@ -645,6 +663,7 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = beforeWords;
           container.segmentStartMs = currentWord.start * 1000;
           container.segmentEndMs = currentWord.end * 1000;
+          container.requestUpdate();
         }
 
         // Update after containers - should be visible at the same time as active word
@@ -652,6 +671,7 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = afterWords;
           container.segmentStartMs = currentWord.start * 1000;
           container.segmentEndMs = currentWord.end * 1000;
+          container.requestUpdate();
         }
       }
     } else if (currentSegment) {
@@ -673,12 +693,14 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = ""; // Nothing before yet
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
 
         for (const container of this.afterActiveWordContainers) {
           container.segmentText = allWords; // All words are upcoming
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
       } else {
         // After last word ends - show all completed words in "before" container
@@ -690,12 +712,14 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = allCompletedWords;
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
 
         for (const container of this.afterActiveWordContainers) {
           container.segmentText = "";
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
       }
     } else {
@@ -704,12 +728,14 @@ export class EFCaptions extends EFSourceMixin(
         container.segmentText = "";
         container.segmentStartMs = 0;
         container.segmentEndMs = 0;
+        container.requestUpdate();
       }
 
       for (const container of this.afterActiveWordContainers) {
         container.segmentText = "";
         container.segmentStartMs = 0;
         container.segmentEndMs = 0;
+        container.requestUpdate();
       }
     }
   }

package/src/elements/EFImage.browsertest.ts

@@ -6,11 +6,10 @@ import { v4 } from "uuid";
 describe("EFImage", () => {
   describe("when rendering", () => {
     beforeEach(() => {
-      // @ts-ignore
+      // @ts-expect-error
       window.FRAMEGEN_BRIDGE = true;
     });
     afterEach(() => {
-      // @ts-ignore
       delete window.FRAMEGEN_BRIDGE;
     });
     test("assetPath uses http:// protocol", () => {

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

@@ -55,10 +55,13 @@ const test = baseTest.extend<{
     const apiHost = `${window.location.protocol}//${window.location.host}`;
     configuration.setAttribute("api-host", apiHost);
     configuration.apiHost = apiHost;
+    configuration.signingURL = ""; // Disable URL signing for tests
     const host = document.createElement("ef-video");
     configuration.appendChild(host);
     host.src = "http://web:3000/head-moov-480p.mp4";
+    document.body.appendChild(configuration);
     await use(host);
+    configuration.remove();
   },
   urlGenerator: async ({}, use: any) => {
     // UrlGenerator points to integrated proxy server (same host/port as test runner)

package/src/elements/EFMedia/audioTasks/makeAudioSeekTask.chunkboundary.regression.browsertest.ts

@@ -145,7 +145,7 @@ describe("Audio Seek Task - Chunk Boundary Regression Test", () => {
 
     // Now trigger the localStorage restoration that happens in waitForMediaDurations().then()
     // This will load currentTime = 4.0 from localStorage, jumping from 0ms to 4000ms
-    const loadedTime = timegroup.maybeLoadTimeFromLocalStorage();
+    const loadedTime = timegroup.loadTimeFromLocalStorage();
     if (loadedTime !== undefined) {
       timegroup.currentTime = loadedTime;
     }

package/src/elements/EFMedia.browsertest.ts

@@ -1,6 +1,5 @@
 import { css } from "lit";
 import { customElement } from "lit/decorators.js";
-import type { VideoSample } from "mediabunny";
 import { afterEach, beforeEach, describe, vi } from "vitest";
 import { test as baseTest } from "../../test/useMSW.js";
 
@@ -106,9 +105,8 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
-      timegroup.currentTime = 2.2;
-      await timegroup.seekTask.taskComplete;
-      const sample = await jitVideo.unifiedVideoSeekTask.taskComplete;
+      await timegroup.seek(2200);
+      const sample = jitVideo.unifiedVideoSeekTask.value;
       expect(sample?.timestamp).toBeCloseTo(2.2, 1);
     });
   });
@@ -148,9 +146,8 @@ describe("JIT Media Engine", () => {
       expect,
     }) => {
       await timegroup.waitForMediaDurations();
-      timegroup.currentTimeMs = 3_000;
-      await timegroup.seekTask.taskComplete;
-      const frame = await jitVideo.unifiedVideoSeekTask.taskComplete;
+      await timegroup.seek(3000);
+      const frame = jitVideo.unifiedVideoSeekTask.value;
       expect(frame?.timestamp).toBeCloseTo(3, 1);
     });
 
@@ -160,9 +157,8 @@ describe("JIT Media Engine", () => {
       expect,
     }) => {
       await timegroup.waitForMediaDurations();
-      timegroup.currentTimeMs = 5_000;
-      await timegroup.seekTask.taskComplete;
-      const frame = await jitVideo.unifiedVideoSeekTask.taskComplete;
+      await timegroup.seek(5000);
+      const frame = jitVideo.unifiedVideoSeekTask.value;
       expect(frame?.timestamp).toBeCloseTo(5, 1);
     });
 
@@ -172,17 +168,14 @@ describe("JIT Media Engine", () => {
       expect,
     }) => {
       await timegroup.waitForMediaDurations();
-      timegroup.currentTimeMs = 0;
 
       // Test seeking in larger increments to avoid CI timeouts
       // while still validating incremental seeking works
       const testPoints = [0, 500, 1000, 1500, 2000, 2500, 3000];
-      let frame: VideoSample | undefined;
 
       for (const timeMs of testPoints) {
-        timegroup.currentTimeMs = timeMs;
-        await timegroup.seekTask.taskComplete;
-        frame = await jitVideo.unifiedVideoSeekTask.taskComplete;
+        await timegroup.seek(timeMs);
+        const frame = jitVideo.unifiedVideoSeekTask.value;
         expect(frame).toBeDefined();
         expect(frame?.timestamp).toBeCloseTo(timeMs / 1000, 1);
       }

package/src/elements/EFMedia.ts

@@ -1,6 +1,9 @@
+import { provide } from "@lit/context";
 import { css, LitElement, type PropertyValueMap } from "lit";
 import { property, state } from "lit/decorators.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import type { ControllableInterface } from "../gui/Controllable.js";
+import { efContext } from "../gui/efContext.js";
 import { withSpan } from "../otel/tracingHelpers.js";
 import type { AudioSpan } from "../transcoding/types/index.ts";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.ts";
@@ -17,6 +20,7 @@ import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.ts";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
+import { renderTemporalAudio } from "./renderTemporalAudio.js";
 import { EFTargetable } from "./TargetController.ts";
 
 // EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts
@@ -47,6 +51,11 @@ export class EFMedia extends EFTargetable(
     assetType: "isobmff_files",
   }),
 ) {
+  @provide({ context: efContext })
+  get efContext(): ControllableInterface | null {
+    return this.rootTimegroup ?? this;
+  }
+
   // Sample buffer size configuration
   static readonly VIDEO_SAMPLE_BUFFER_SIZE = 30;
   static readonly AUDIO_SAMPLE_BUFFER_SIZE = 120;
@@ -249,13 +258,6 @@ export class EFMedia extends EFTargetable(
         }
       }
     }
-
-    // if (
-    //   changedProperties.has("currentTime") ||
-    //   changedProperties.has("ownCurrentTimeMs")
-    // ) {
-    //   updateAnimations(this);
-    // }
   }
 
   get hasOwnDuration() {
@@ -307,4 +309,33 @@ export class EFMedia extends EFTargetable(
       },
     );
   }
+
+  /**
+   * Wait for media engine to load and determine duration
+   * Ensures media is ready for playback
+   */
+  async waitForMediaDurations(): Promise<void> {
+    if (this.mediaEngineTask.value) {
+      return;
+    }
+    await this.mediaEngineTask.run();
+  }
+
+  /**
+   * Returns media elements for playback audio rendering
+   * For standalone media, returns [this]; for timegroups, returns all descendants
+   * Used by PlaybackController for audio-driven playback
+   */
+  getMediaElements(): EFMedia[] {
+    return [this];
+  }
+
+  /**
+   * Render audio buffer for playback
+   * Called by PlaybackController during live playback
+   * Delegates to shared renderTemporalAudio utility for consistent behavior
+   */
+  async renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer> {
+    return renderTemporalAudio(this, fromMs, toMs);
+  }
 }

package/src/elements/EFSurface.browsertest.ts

@@ -26,7 +26,7 @@ const surfaceTest = baseTest.extend<{
     const container = document.createElement("div");
     render(
       html`
-        <ef-configuration api-host="http://localhost:63315">
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
           <ef-preview>
             <ef-timegroup id="tg" mode="sequence" class="relative h-[360px] w-[640px] overflow-hidden bg-black">
               <ef-video id="vid" src="bars-n-tone.mp4" style="width: 100%; height: 100%;"></ef-video>
@@ -38,8 +38,6 @@ const surfaceTest = baseTest.extend<{
       container,
     );
     document.body.appendChild(container);
-    const configuration = container.querySelector("ef-configuration") as any;
-    configuration.signingURL = "";
     const tg = container.querySelector("#tg") as EFTimegroup;
     await tg.updateComplete;
     await use(tg);
@@ -103,7 +101,7 @@ describe("EFSurface", () => {
       const container = document.createElement("div");
       render(
         html`
-        <ef-configuration api-host="http://localhost:63315">
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
           <ef-preview>
             <ef-timegroup mode="sequence" class="relative h-[360px] w-[640px] overflow-hidden bg-black">
               <ef-video id="v" src="bars-n-tone.mp4" style="width: 100%; height: 100%;"></ef-video>
@@ -116,8 +114,6 @@ describe("EFSurface", () => {
         container,
       );
       document.body.appendChild(container);
-      const configuration = container.querySelector("ef-configuration") as any;
-      configuration.signingURL = "";
       const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
       const video = container.querySelector("ef-video") as EFVideo;
       const s1 = container.querySelector("#s1") as unknown as EFSurface;

package/src/elements/EFSurface.ts

@@ -25,6 +25,7 @@ export class EFSurface extends LitElement {
   canvasRef = createRef<HTMLCanvasElement>();
 
   // @ts-expect-error controller is intentionally not referenced directly
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects
   #targetController: TargetController = new TargetController(this);
 
   @state()

package/src/elements/EFTemporal.browsertest.ts

@@ -1,7 +1,9 @@
 import { LitElement } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { EFTemporal } from "./EFTemporal.js";
+import "./EFTimegroup.js";
+import { state } from "lit/decorators.js";
 
 @customElement("ten-seconds")
 class TenSeconds extends EFTemporal(LitElement) {
@@ -156,3 +158,58 @@ describe("EFVideo sourcein attribute", () => {
     expect(element2.tagName).toBe("EF-VIDEO");
   });
 });
+
+@customElement("test-root-lifecycle")
+class TestLifecycleChild extends EFTemporal(LitElement) {
+  @state()
+  role: "root" | "child" | null = null;
+
+  didBecomeRoot() {
+    this.role = "root";
+  }
+  didBecomeChild() {
+    this.role = "child";
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-root-lifecycle": TestLifecycleChild;
+  }
+}
+
+describe("Temporal Lifecycle", () => {
+  test("a standalone temporal element becomes a root", async () => {
+    const root = document.createElement("test-root-lifecycle");
+    document.body.append(root);
+    expect(root.role).toBe("root");
+  });
+
+  test("temporal element in a timegroup becomes a child", async () => {
+    const timegroup = document.createElement("ef-timegroup");
+    vi.spyOn(timegroup as any, "didBecomeRoot");
+    vi.spyOn(timegroup as any, "didBecomeChild");
+    const child = document.createElement("test-root-lifecycle");
+    vi.spyOn(child as any, "didBecomeRoot");
+    vi.spyOn(child as any, "didBecomeChild");
+    timegroup.append(child);
+    document.body.append(timegroup);
+    expect((timegroup as any).didBecomeRoot).toHaveBeenCalledOnce();
+    expect((timegroup as any).didBecomeChild).not.toHaveBeenCalled();
+    expect((child as any).didBecomeChild).toHaveBeenCalledOnce();
+  });
+
+  test("timegroup nested in a timegroup becomes a child", async () => {
+    const timegroup = document.createElement("ef-timegroup");
+    const child = document.createElement("ef-timegroup");
+    vi.spyOn(timegroup as any, "didBecomeRoot");
+    vi.spyOn(timegroup as any, "didBecomeChild");
+    vi.spyOn(child as any, "didBecomeRoot");
+    vi.spyOn(child as any, "didBecomeChild");
+    timegroup.append(child);
+    document.body.append(timegroup);
+    expect((timegroup as any).didBecomeRoot).toHaveBeenCalledOnce();
+    expect((timegroup as any).didBecomeChild).not.toHaveBeenCalled();
+    expect((child as any).didBecomeChild).toHaveBeenCalledOnce();
+  });
+});