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

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() {