@editframe/elements 0.26.3-beta.0 → 0.30.0-beta.13

package/src/gui/EFFitScale.ts

@@ -1,152 +0,0 @@
-import { LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { createRef } from "lit/directives/ref.js";
-
-@customElement("ef-fit-scale")
-export class EFFitScale extends LitElement {
-  containerRef = createRef<HTMLDivElement>();
-  contentRef = createRef<HTMLSlotElement>();
-
-  createRenderRoot() {
-    Object.assign(this.style, {
-      display: "grid",
-      width: "100%",
-      height: "100%",
-      gridTemplateColumns: "100%",
-      gridTemplateRows: "100%",
-      overflow: "hidden",
-      boxSizing: "border-box",
-      contain: "strict",
-      position: "relative",
-    });
-    this.id = `${this.uniqueId}`;
-    return this;
-  }
-
-  uniqueId = Math.random().toString(36).substring(2, 15);
-
-  @state()
-  private scale = 1;
-
-  private animationFrameId?: number;
-
-  get contentChild() {
-    const firstElement = this.children[0];
-    if (!firstElement) return null;
-
-    let current: Element = firstElement;
-    while (current) {
-      if (current instanceof HTMLSlotElement) {
-        const assigned = current.assignedElements()[0];
-        if (!assigned) break;
-        current = assigned;
-        continue;
-      }
-
-      const display = window.getComputedStyle(current).display;
-      if (display !== "contents" && display !== "none") {
-        return current as HTMLElement;
-      }
-      const firstChild = current.children[0];
-      if (!firstChild) break;
-      current = firstChild;
-    }
-    return firstElement as HTMLElement; // Fallback to first element if no non-contents found
-  }
-
-  get scaleInfo() {
-    if (!this.contentChild) {
-      return {
-        scale: 1,
-        containerWidth: 0,
-        containerHeight: 0,
-        contentWidth: 0,
-        contentHeight: 0,
-      };
-    }
-
-    const containerWidth = this.clientWidth;
-    const containerHeight = this.clientHeight;
-    const contentWidth = this.contentChild.clientWidth;
-    const contentHeight = this.contentChild.clientHeight;
-
-    const containerRatio = containerWidth / containerHeight;
-    const contentRatio = contentWidth / contentHeight;
-
-    const scale =
-      containerRatio > contentRatio
-        ? containerHeight / contentHeight
-        : containerWidth / contentWidth;
-
-    return {
-      scale,
-      containerWidth,
-      containerHeight,
-      contentWidth,
-      contentHeight,
-    };
-  }
-
-  scaleLastSetOn: HTMLElement | null = null;
-
-  setScale = () => {
-    if (this.isConnected) {
-      const { scale } = this.scaleInfo;
-      if (this.contentChild) {
-        const containerRect = this.getBoundingClientRect();
-        const contentRect = this.contentChild.getBoundingClientRect();
-
-        const unscaledWidth = contentRect.width / this.scale;
-        const unscaledHeight = contentRect.height / this.scale;
-        const scaledWidth = unscaledWidth * scale;
-        const scaledHeight = unscaledHeight * scale;
-        const translateX = (containerRect.width - scaledWidth) / 2;
-        const translateY = (containerRect.height - scaledHeight) / 2;
-
-        // In the rare event that the content child is changed, we need to remove the scale
-        // because we don't want to have a scale on the old content child that is somewhere else in the DOM
-        if (this.scaleLastSetOn !== this.contentChild) {
-          this.removeScale();
-        }
-        // Use toFixed to avoid floating point precision issues
-        // this will update every frame with sub-pixel changes if we don't pin it down
-        Object.assign(this.contentChild.style, {
-          transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,
-          transformOrigin: "top left",
-        });
-        this.scale = scale;
-        this.scaleLastSetOn = this.contentChild;
-      }
-      this.animationFrameId = requestAnimationFrame(this.setScale);
-    }
-  };
-
-  removeScale = () => {
-    if (this.scaleLastSetOn) {
-      Object.assign(this.scaleLastSetOn.style, {
-        transform: "",
-        transformOrigin: "",
-      });
-      this.scaleLastSetOn = null;
-    }
-  };
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.animationFrameId = requestAnimationFrame(this.setScale);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.removeScale();
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-fit-scale": EFFitScale;
-  }
-}

package/src/gui/EFFocusOverlay.ts

@@ -1,79 +0,0 @@
-import { consume } from "@lit/context";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { focusedElementContext } from "./focusedElementContext.js";
-
-@customElement("ef-focus-overlay")
-export class EFFocusOverlay extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-    .overlay {
-      position: fixed;
-      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
-      background: var(--ef-focus-overlay-background, rgb(59, 130, 246));
-      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
-      mix-blend-mode: multiply;
-      opacity: 0.4;
-      display: none;
-    }
-  `;
-
-  @consume({ context: focusedElementContext, subscribe: true })
-  focusedElement?: HTMLElement | null;
-
-  overlay = createRef<HTMLDivElement>();
-
-  private animationFrame?: number;
-
-  drawOverlay = () => {
-    const overlay = this.overlay.value;
-    if (overlay) {
-      if (this.focusedElement) {
-        overlay.style.display = "block";
-        const rect = this.focusedElement.getBoundingClientRect();
-        Object.assign(overlay.style, {
-          top: `${rect.top}px`,
-          left: `${rect.left}px`,
-          width: `${rect.width}px`,
-          height: `${rect.height}px`,
-        });
-        this.animationFrame = requestAnimationFrame(this.drawOverlay);
-      } else {
-        overlay.style.display = "none";
-      }
-    }
-  };
-
-  render() {
-    return html`<div ${ref(this.overlay)} class="overlay"></div>`;
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.drawOverlay();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this.animationFrame) {
-      cancelAnimationFrame(this.animationFrame);
-    }
-  }
-
-  protected updated(): void {
-    this.drawOverlay();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-focus-overlay": EFFocusOverlay;
-  }
-}

package/src/gui/EFPause.browsertest.ts

@@ -1,202 +0,0 @@
-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 "./EFPause.js";
-import "./EFPreview.js";
-
-describe("EFPause", () => {
-  beforeEach(() => {
-    while (document.body.children.length) {
-      document.body.children[0]?.remove();
-    }
-  });
-
-  afterEach(() => {
-    const elements = document.querySelectorAll("ef-pause");
-    for (const element of elements) {
-      element.remove();
-    }
-  });
-
-  test("should be defined", () => {
-    const element = document.createElement("ef-pause");
-    expect(element).toBeDefined();
-    expect(element.tagName).toBe("EF-PAUSE");
-  });
-
-  test("should be hidden 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-pause>Pause Button</ef-pause>
-          </ef-preview>
-        </ef-configuration>
-      `,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const pause = container.querySelector("ef-pause") as any;
-    const preview = container.querySelector("ef-preview") as any;
-    const video = container.querySelector("ef-video") as any;
-
-    await pause.updateComplete;
-    await preview.updateComplete;
-    await video.updateComplete;
-
-    await video.mediaEngineTask.run();
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    await pause.updateComplete;
-
-    expect(pause.playing).toBe(false);
-    expect(getComputedStyle(pause).display).toBe("none");
-
-    container.remove();
-  });
-
-  test("should be visible 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-pause>Pause Button</ef-pause>
-          </ef-preview>
-        </ef-configuration>
-      `,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const pause = container.querySelector("ef-pause") as any;
-    const preview = container.querySelector("ef-preview") as any;
-    const video = container.querySelector("ef-video") as any;
-
-    await pause.updateComplete;
-    await preview.updateComplete;
-    await video.updateComplete;
-
-    await video.mediaEngineTask.run();
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    await pause.updateComplete;
-
-    expect(getComputedStyle(pause).display).toBe("none");
-
-    // Manually trigger playing state change to test visibility mechanism
-    pause.playing = true;
-    await pause.updateComplete;
-
-    expect(getComputedStyle(pause).display).not.toBe("none");
-
-    container.remove();
-  });
-
-  test("should call pause() 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-pause>Pause Button</ef-pause>
-          </ef-preview>
-        </ef-configuration>
-      `,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const pause = container.querySelector("ef-pause") as any;
-    const preview = container.querySelector("ef-preview") as any;
-    const video = container.querySelector("ef-video") as any;
-
-    await pause.updateComplete;
-    await preview.updateComplete;
-    await video.updateComplete;
-
-    await video.mediaEngineTask.run();
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    await pause.updateComplete;
-
-    const pauseSpy = vi.spyOn(video.playbackController, "pause");
-
-    pause.click();
-
-    expect(pauseSpy).toHaveBeenCalledTimes(1);
-
-    pauseSpy.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-pause><span id="pause-content">⏸ Pause</span></ef-pause>
-          </ef-preview>
-        </ef-configuration>
-      `,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const pause = container.querySelector("ef-pause") as any;
-    const content = container.querySelector("#pause-content");
-
-    await pause.updateComplete;
-
-    expect(content).toBeDefined();
-    expect(content?.textContent).toBe("⏸ Pause");
-
-    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-pause target="test-preview">Pause Button</ef-pause>
-        </ef-configuration>
-      `,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const pause = container.querySelector("ef-pause") as any;
-    const preview = container.querySelector("ef-preview") as any;
-    const video = container.querySelector("ef-video") as any;
-
-    await pause.updateComplete;
-    await preview.updateComplete;
-    await video.updateComplete;
-
-    await video.mediaEngineTask.run();
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    await pause.updateComplete;
-
-    expect(pause.efContext).toBe(preview);
-
-    const pauseSpy = vi.spyOn(video.playbackController, "pause");
-
-    pause.click();
-
-    expect(pauseSpy).toHaveBeenCalledTimes(1);
-
-    pauseSpy.mockRestore();
-    container.remove();
-  }, 1000);
-});

package/src/gui/EFPause.ts

@@ -1,73 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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);
-});