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

package/src/elements/EFMedia/tasks/makeMediaEngineTask.ts

@@ -21,7 +21,7 @@ export const getLatestMediaEngine = async (
 export const getVideoRendition = (mediaEngine: MediaEngine): VideoRendition => {
   const videoRendition = mediaEngine.videoRendition;
   if (!videoRendition) {
-    throw new Error("Video rendition is not available");
+    throw new Error("No video track available in source");
   }
   return videoRendition;
 };

package/src/elements/EFMedia.ts

@@ -1,6 +1,6 @@
 import { css, LitElement, type PropertyValueMap } from "lit";
 import { property, state } from "lit/decorators.js";
-
+import { isContextMixin } from "../gui/ContextMixin.js";
 import type { AudioSpan } from "../transcoding/types/index.ts";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.ts";
 import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.ts";
@@ -64,6 +64,8 @@ export class EFMedia extends EFTargetable(
       "audio-buffer-duration",
       "max-audio-buffer-fetches",
       "enable-audio-buffering",
+      "sourcein",
+      "sourceout",
     ];
   }
 
@@ -212,6 +214,41 @@ export class EFMedia extends EFTargetable(
     if (changedProperties.has("ownCurrentTimeMs")) {
       this.executeSeek(this.currentSourceTimeMs);
     }
+
+    // Check if trim/source properties changed that affect duration
+    const durationAffectingProps = [
+      "_trimStartMs",
+      "_trimEndMs",
+      "_sourceInMs",
+      "_sourceOutMs",
+    ];
+
+    const hasDurationChange = durationAffectingProps.some((prop) =>
+      changedProperties.has(prop),
+    );
+
+    if (hasDurationChange) {
+      // Notify parent timegroup to recalculate its duration (same pattern as EFCaptions)
+      if (this.parentTimegroup) {
+        this.parentTimegroup.requestUpdate("durationMs");
+        this.parentTimegroup.requestUpdate("currentTime");
+
+        // Also find and directly notify any context provider (ContextMixin)
+        let parent = this.parentNode;
+        while (parent) {
+          if (isContextMixin(parent)) {
+            parent.dispatchEvent(
+              new CustomEvent("child-duration-changed", {
+                detail: { source: this },
+              }),
+            );
+            break;
+          }
+          parent = parent.parentNode;
+        }
+      }
+    }
+
     // if (
     //   changedProperties.has("currentTime") ||
     //   changedProperties.has("ownCurrentTimeMs")

package/src/elements/EFSurface.browsertest.ts

@@ -0,0 +1,155 @@
+import { html, render } from "lit";
+import { beforeEach, describe } from "vitest";
+
+import { test as baseTest } from "../../test/useMSW.js";
+
+import "./EFVideo.js";
+import "./EFTimegroup.js";
+import "../gui/EFPreview.js";
+import "../gui/EFWorkbench.js";
+import "./EFSurface.js";
+
+import type { EFSurface } from "./EFSurface.js";
+import type { EFTimegroup } from "./EFTimegroup.js";
+import type { EFVideo } from "./EFVideo.js";
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+const surfaceTest = baseTest.extend<{
+  timegroup: EFTimegroup;
+  video: EFVideo;
+  surface: EFSurface;
+}>({
+  timegroup: async ({}, use) => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315">
+          <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>
+              <ef-surface id="surf" target="vid" style="position: absolute; inset: 0;"></ef-surface>
+            </ef-timegroup>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      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);
+    container.remove();
+  },
+  video: async ({ timegroup }, use) => {
+    const video = timegroup.querySelector("#vid") as EFVideo;
+    await video.updateComplete;
+    await use(video);
+  },
+  surface: async ({ timegroup }, use) => {
+    const surface = timegroup.querySelector("#surf") as unknown as EFSurface;
+    await surface.updateComplete;
+    await use(surface);
+  },
+});
+
+describe("EFSurface", () => {
+  surfaceTest("defines and renders a canvas", async ({ expect }) => {
+    const el = document.createElement("ef-surface");
+    document.body.appendChild(el);
+    await (el as any).updateComplete;
+    const canvas = el.shadowRoot?.querySelector("canvas");
+    expect(canvas).toBeTruthy();
+    expect((canvas as HTMLCanvasElement).tagName).toBe("CANVAS");
+    el.remove();
+  });
+
+  surfaceTest(
+    "mirrors video canvas after a seek via EFTimegroup",
+    async ({ timegroup, video, surface, expect }) => {
+      // Ensure media engine initialized
+      await video.mediaEngineTask.run();
+
+      // Seek to a known time through timegroup (triggers frame tasks)
+      timegroup.currentTimeMs = 3000;
+      await timegroup.seekTask.taskComplete;
+
+      // After scheduling, surface should have mirrored pixel dimensions
+      const videoCanvas = (video as any).canvasElement as
+        | HTMLCanvasElement
+        | undefined;
+      const surfaceCanvas =
+        (surface.shadowRoot?.querySelector("canvas") as HTMLCanvasElement) ??
+        undefined;
+
+      expect(videoCanvas).toBeTruthy();
+      expect(surfaceCanvas).toBeTruthy();
+      expect(videoCanvas!.width).toBeGreaterThan(0);
+      expect(videoCanvas!.height).toBeGreaterThan(0);
+
+      // Surface copies pixel dimensions
+      expect(surfaceCanvas!.width).toBe(videoCanvas!.width);
+      expect(surfaceCanvas!.height).toBe(videoCanvas!.height);
+    },
+  );
+
+  surfaceTest(
+    "supports multiple surfaces mirroring the same source",
+    async ({ expect }) => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-configuration api-host="http://localhost:63315">
+          <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>
+              <ef-surface id="s1" target="v" style="position: absolute; inset: 0;"></ef-surface>
+              <ef-surface id="s2" target="v" style="position: absolute; inset: 0;"></ef-surface>
+            </ef-timegroup>
+          </ef-preview>
+        </ef-configuration>
+      `,
+        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;
+      const s2 = container.querySelector("#s2") as unknown as EFSurface;
+      await timegroup.updateComplete;
+      await video.mediaEngineTask.run();
+
+      timegroup.currentTimeMs = 1000;
+      await timegroup.seekTask.taskComplete;
+
+      const vCanvas = (video as any).canvasElement as HTMLCanvasElement;
+      const c1 = s1.shadowRoot!.querySelector("canvas") as HTMLCanvasElement;
+      const c2 = s2.shadowRoot!.querySelector("canvas") as HTMLCanvasElement;
+
+      expect(vCanvas.width).toBeGreaterThan(0);
+      expect(c1.width).toBe(vCanvas.width);
+      expect(c2.width).toBe(vCanvas.width);
+      expect(c1.height).toBe(vCanvas.height);
+      expect(c2.height).toBe(vCanvas.height);
+
+      container.remove();
+    },
+  );
+
+  surfaceTest(
+    "handles missing video gracefully (no throw)",
+    async ({ expect }) => {
+      const el = document.createElement("ef-surface") as any;
+      document.body.appendChild(el);
+      await el.updateComplete;
+      await expect(el.frameTask.run()).resolves.toBeUndefined();
+      el.remove();
+    },
+  );
+});

package/src/elements/EFSurface.ts

@@ -0,0 +1,141 @@
+import { Task } from "@lit/task";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import type { ContextMixinInterface } from "../gui/ContextMixin.ts";
+import { TargetController } from "./TargetController.ts";
+
+@customElement("ef-surface")
+export class EFSurface extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+      canvas {
+        all: inherit;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    `,
+  ];
+
+  canvasRef = createRef<HTMLCanvasElement>();
+
+  // @ts-expect-error controller is intentionally not referenced directly
+  #targetController: TargetController = new TargetController(this);
+
+  @state()
+  targetElement: ContextMixinInterface | null = null;
+
+  @property({ type: String })
+  target = "";
+
+  render() {
+    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
+  }
+
+  // Provide minimal temporal-like properties so EFTimegroup can schedule us
+  get rootTimegroup(): any {
+    // Prefer the target element's root timegroup if available
+    const target: any = this.targetElement;
+    if (target && "rootTimegroup" in target) {
+      return target.rootTimegroup;
+    }
+    // Fallback: nearest containing timegroup if any
+    let root: any = this.closest("ef-timegroup");
+    while (root?.parentTimegroup) {
+      root = root.parentTimegroup;
+    }
+    return root;
+  }
+
+  get currentTimeMs(): number {
+    return this.rootTimegroup?.currentTimeMs ?? 0;
+  }
+
+  get durationMs(): number {
+    return this.rootTimegroup?.durationMs ?? 0;
+  }
+
+  get startTimeMs(): number {
+    return this.rootTimegroup?.startTimeMs ?? 0;
+  }
+
+  get endTimeMs(): number {
+    return this.startTimeMs + this.durationMs;
+  }
+
+  /**
+   * Minimal integration with EFTimegroup's frame scheduling:
+   * - Waits for the target video element's frameTask to complete (ensuring it painted)
+   * - Copies the target's canvas into this element's canvas
+   */
+  frameTask = new Task(this, {
+    autoRun: false,
+    args: () => [this.targetElement] as const,
+    task: async ([target]) => {
+      if (!target) return;
+
+      // Ensure the target has painted its frame for this tick
+      try {
+        const maybeTask = (target as any).frameTask;
+        if (maybeTask && typeof maybeTask.run === "function") {
+          // Run (idempotent) and then wait for completion
+          maybeTask.run();
+          await maybeTask.taskComplete;
+        }
+      } catch (_err) {
+        // Best-effort; continue to attempt copy
+      }
+
+      this.copyFromTarget(target);
+    },
+  });
+
+  protected updated(): void {
+    if (this.targetElement) {
+      this.copyFromTarget(this.targetElement);
+    }
+  }
+
+  // Target resolution is handled by TargetController. No implicit discovery.
+
+  private getSourceCanvas(from: Element): HTMLCanvasElement | null {
+    const anyEl = from as any;
+    if ("canvasElement" in anyEl) {
+      return anyEl.canvasElement ?? null;
+    }
+    const sr = (from as HTMLElement).shadowRoot;
+    if (sr) {
+      const c = sr.querySelector("canvas");
+      return (c as HTMLCanvasElement) ?? null;
+    }
+    return null;
+  }
+
+  private copyFromTarget(target: Element) {
+    const dst = this.canvasRef.value;
+    const src = this.getSourceCanvas(target);
+    if (!dst || !src) return;
+    if (!src.width || !src.height) return;
+
+    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS
+    if (dst.width !== src.width || dst.height !== src.height) {
+      dst.width = src.width;
+      dst.height = src.height;
+    }
+
+    const ctx = dst.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(src, 0, 0, dst.width, dst.height);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-surface": EFSurface;
+  }
+}

package/src/elements/EFTemporal.ts

@@ -469,7 +469,7 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     }
 
     get hasOwnDuration() {
-      return false;
+      return this.intrinsicDurationMs !== undefined || this.hasExplicitDuration;
     }
 
     get intrinsicDurationMs() {
@@ -477,15 +477,21 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     }
 
     get durationMs() {
-      if (this.intrinsicDurationMs === undefined) {
-        return this._durationMs || this.parentTimegroup?.durationMs || 0;
+      // Get the base duration - either intrinsic or explicit
+      const baseDurationMs =
+        this.intrinsicDurationMs ??
+        this._durationMs ??
+        this.parentTimegroup?.durationMs ??
+        0;
+
+      if (baseDurationMs === 0) {
+        return 0;
       }
 
+      // Apply trimming logic to any duration source
       if (this.trimStartMs || this.trimEndMs) {
         const trimmedDurationMs =
-          this.intrinsicDurationMs -
-          (this.trimStartMs ?? 0) -
-          (this.trimEndMs ?? 0);
+          baseDurationMs - (this.trimStartMs ?? 0) - (this.trimEndMs ?? 0);
         if (trimmedDurationMs < 0) {
           return 0;
         }
@@ -494,14 +500,14 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
 
       if (this.sourceInMs || this.sourceOutMs) {
         const sourceInMs = this.sourceInMs ?? 0;
-        const sourceOutMs = this.sourceOutMs ?? this.intrinsicDurationMs;
+        const sourceOutMs = this.sourceOutMs ?? baseDurationMs;
         if (sourceInMs >= sourceOutMs) {
           return 0;
         }
         return sourceOutMs - sourceInMs;
       }
 
-      return this.intrinsicDurationMs;
+      return baseDurationMs;
     }
 
     get sourceStartMs() {