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

package/src/gui/EFPause.ts

@@ -0,0 +1,73 @@
+import { consume } from "@lit/context";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import type { ControllableInterface } from "./Controllable.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+
+attachContextRoot();
+
+@customElement("ef-pause")
+export class EFPause extends TargetOrContextMixin(LitElement, efContext) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      div {
+        all: inherit;
+      }
+    `,
+  ];
+
+  @consume({ context: playingContext, subscribe: true })
+  @state()
+  playing = false;
+
+  get efContext(): ControllableInterface | null {
+    return this.effectiveContext;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("playing")) {
+      this.style.display = this.playing ? "" : "none";
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  handleClick = () => {
+    if (this.efContext) {
+      this.efContext.pause();
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-pause": EFPause;
+  }
+}

package/src/gui/EFPlay.browsertest.ts

@@ -0,0 +1,202 @@
+import { html, render } from "lit";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import "../elements/EFTimegroup.js";
+import "../elements/EFVideo.js";
+import "./EFConfiguration.js";
+import "./EFPlay.js";
+import "./EFPreview.js";
+
+describe("EFPlay", () => {
+  beforeEach(() => {
+    while (document.body.children.length) {
+      document.body.children[0]?.remove();
+    }
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll("ef-play");
+    for (const element of elements) {
+      element.remove();
+    }
+  });
+
+  test("should be defined", () => {
+    const element = document.createElement("ef-play");
+    expect(element).toBeDefined();
+    expect(element.tagName).toBe("EF-PLAY");
+  });
+
+  test("should be visible when not playing", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-play>Play Button</ef-play>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const play = container.querySelector("ef-play") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await play.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await play.updateComplete;
+
+    expect(play.playing).toBe(false);
+    expect(getComputedStyle(play).display).not.toBe("none");
+
+    container.remove();
+  });
+
+  test("should be hidden when playing", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-play id="play-btn">Play Button</ef-play>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const play = container.querySelector("ef-play") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await play.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await play.updateComplete;
+
+    expect(getComputedStyle(play).display).not.toBe("none");
+
+    // Manually trigger playing state change to test visibility mechanism
+    play.playing = true;
+    await play.updateComplete;
+
+    expect(getComputedStyle(play).display).toBe("none");
+
+    container.remove();
+  });
+
+  test("should call play() when clicked", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-play>Play Button</ef-play>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const play = container.querySelector("ef-play") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await play.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await play.updateComplete;
+
+    const playSpy = vi.spyOn(video.playbackController, "play");
+
+    play.click();
+
+    expect(playSpy).toHaveBeenCalledTimes(1);
+
+    playSpy.mockRestore();
+    container.remove();
+  }, 1000);
+
+  test("should pass through children with default slot", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-play><span id="play-content">▶ Play</span></ef-play>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const play = container.querySelector("ef-play") as any;
+    const content = container.querySelector("#play-content");
+
+    await play.updateComplete;
+
+    expect(content).toBeDefined();
+    expect(content?.textContent).toBe("▶ Play");
+
+    container.remove();
+  });
+
+  test("should work with target attribute", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+          </ef-preview>
+          <ef-play target="test-preview">Play Button</ef-play>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const play = container.querySelector("ef-play") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await play.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await play.updateComplete;
+
+    expect(play.efContext).toBe(preview);
+
+    const playSpy = vi.spyOn(video.playbackController, "play");
+
+    play.click();
+
+    expect(playSpy).toHaveBeenCalledTimes(1);
+
+    playSpy.mockRestore();
+    container.remove();
+  }, 1000);
+});

package/src/gui/EFPlay.ts

@@ -0,0 +1,73 @@
+import { consume } from "@lit/context";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import type { ControllableInterface } from "./Controllable.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+
+attachContextRoot();
+
+@customElement("ef-play")
+export class EFPlay extends TargetOrContextMixin(LitElement, efContext) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      div {
+        all: inherit;
+      }
+    `,
+  ];
+
+  @consume({ context: playingContext, subscribe: true })
+  @state()
+  playing = false;
+
+  get efContext(): ControllableInterface | null {
+    return this.effectiveContext;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("playing")) {
+      this.style.display = this.playing ? "none" : "";
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  handleClick = () => {
+    if (this.efContext) {
+      this.efContext.play();
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-play": EFPlay;
+  }
+}

package/src/gui/EFPreview.ts

@@ -1,6 +1,7 @@
 import { provide } from "@lit/context";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
+import { isEFTemporal } from "../elements/EFTemporal.js";
 import { EFTargetable } from "../elements/TargetController.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { focusedElementContext } from "./focusedElementContext.js";
@@ -21,26 +22,40 @@ export class EFPreview extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
   @provide({ context: focusedElementContext })
   focusedElement?: HTMLElement;
 
+  /**
+   * Find the closest temporal element (timegroup, video, audio, etc.)
+   */
+  private findClosestTemporal(element: HTMLElement | null): HTMLElement | null {
+    let current = element;
+    while (current && current !== this) {
+      if (isEFTemporal(current)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
   constructor() {
     super();
     this.addEventListener("mouseover", (e) => {
       const target = e.target as HTMLElement;
-      const timegroup = target.closest("ef-timegroup");
-      if (target !== this && timegroup) {
+      const temporal = this.findClosestTemporal(target);
+      if (target !== this && temporal) {
         this.focusedElement = target;
       }
     });
     this.addEventListener("mouseout", (e) => {
       const relatedTarget = e.relatedTarget as HTMLElement;
-      const targetingTimegroup = relatedTarget?.closest("ef-timegroup");
+      const targetingTemporal = this.findClosestTemporal(relatedTarget);
       // Clear focus if:
       // 1. Moving outside the preview entirely, or
       // 2. Moving to the preview itself, or
-      // 3. Moving to an element that's not within a timegroup
+      // 3. Moving to an element that's not within a temporal
       if (
         !this.contains(relatedTarget) ||
         relatedTarget === this ||
-        !targetingTimegroup
+        !targetingTemporal
       ) {
         this.focusedElement = undefined;
       }

package/src/gui/EFResizableBox.browsertest.ts

@@ -0,0 +1,79 @@
+import { html, render } from "lit";
+import { afterEach, describe, expect, test } from "vitest";
+import type { EFResizableBox } from "./EFResizableBox";
+import "./EFResizableBox";
+
+describe("EFResizableBox", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("should render with default bounds", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    render(html`<ef-resizable-box></ef-resizable-box>`, container);
+    const el = container.querySelector<EFResizableBox>("ef-resizable-box")!;
+    await el.updateComplete;
+
+    const box = el.shadowRoot!.querySelector(".box") as HTMLDivElement;
+    expect(box).to.exist;
+    expect(box.style.left).to.equal("0px");
+    expect(box.style.top).to.equal("0px");
+    expect(box.style.width).to.equal("100px");
+    expect(box.style.height).to.equal("100px");
+  });
+
+  test("should render with provided bounds", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const bounds = { x: 50, y: 50, width: 200, height: 150 };
+    render(
+      html`<ef-resizable-box .bounds=${bounds}></ef-resizable-box>`,
+      container,
+    );
+    const el = container.querySelector<EFResizableBox>("ef-resizable-box")!;
+    await el.updateComplete;
+
+    const box = el.shadowRoot!.querySelector(".box") as HTMLDivElement;
+    expect(box.style.left).to.equal("50px");
+    expect(box.style.top).to.equal("50px");
+    expect(box.style.width).to.equal("200px");
+    expect(box.style.height).to.equal("150px");
+  });
+
+  test("should be constrained by its parent", async () => {
+    const container = document.createElement("div");
+    container.style.width = "300px";
+    container.style.height = "300px";
+    container.style.position = "relative";
+    document.body.appendChild(container);
+    const bounds = { x: 250, y: 250, width: 100, height: 100 };
+    render(
+      html`<ef-resizable-box .bounds=${bounds}></ef-resizable-box>`,
+      container,
+    );
+    const el = container.querySelector<EFResizableBox>("ef-resizable-box")!;
+    await el.updateComplete;
+
+    const box = el.shadowRoot!.querySelector(".box") as HTMLDivElement;
+    const downEvent = new PointerEvent("pointerdown", {
+      clientX: 260,
+      clientY: 260,
+      bubbles: true,
+      composed: true,
+    });
+    box.dispatchEvent(downEvent);
+
+    const moveEvent = new PointerEvent("pointermove", {
+      clientX: 350,
+      clientY: 350,
+      bubbles: true,
+      composed: true,
+    });
+    document.dispatchEvent(moveEvent);
+    await el.updateComplete;
+
+    expect(el.bounds.x).to.be.lessThanOrEqual(200);
+    expect(el.bounds.y).to.be.lessThanOrEqual(200);
+  });
+});