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

package/src/gui/EFControls.browsertest.ts

@@ -1,389 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { afterEach, describe, expect, test } from "vitest";
-
-import "../elements/EFTimegroup.js";
-import { EFTargetable } from "../elements/TargetController.js";
-import { ContextMixin } from "./ContextMixin.js";
-import "./EFControls.js";
-import "./EFPreview.js";
-import "./EFTogglePlay.js";
-import "./EFPreview.js";
-import "./EFTogglePlay.js";
-import "./EFTimeDisplay.js";
-import type { EFTimegroup } from "../elements/EFTimegroup.js";
-import type { EFConfiguration } from "./EFConfiguration.js";
-import type { EFControls } from "./EFControls.js";
-import type { EFPreview } from "./EFPreview.js";
-import type { EFTimeDisplay } from "./EFTimeDisplay.js";
-import type { EFTogglePlay } from "./EFTogglePlay.js";
-
-@customElement("ef-controls-test-context")
-class EFControlsTestContext extends EFTargetable(ContextMixin(LitElement)) {
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-controls-test-context": EFControlsTestContext;
-  }
-}
-
-afterEach(() => {
-  // Clean up localStorage
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-    if (typeof key !== "string") continue;
-    localStorage.removeItem(key);
-  }
-
-  // Clean up DOM
-  while (document.body.children.length) {
-    document.body.children[0]?.remove();
-  }
-});
-
-const makeElement = <
-  TagName extends keyof HTMLElementTagNameMap,
-  T extends HTMLElementTagNameMap[TagName],
->(
-  tagName: TagName,
-  attributes: Record<string, string> = {},
-  target: Element | null = null,
-) => {
-  const element = document.createElement(tagName);
-  for (const [key, value] of Object.entries(attributes)) {
-    element.setAttribute(key, value);
-  }
-  if (target) {
-    target.appendChild(element);
-  }
-  return element as T;
-};
-
-describe("EFControls", () => {
-  test("can find and connect to target preview by ID", async () => {
-    const preview = makeElement(
-      "ef-preview",
-      { id: "test-preview", mode: "fixed", duration: "10s" },
-      document.body,
-    );
-    const controls = makeElement(
-      "ef-controls",
-      { target: "test-preview" },
-      document.body,
-    );
-
-    // Wait for both elements to complete their updates
-    await preview.updateComplete;
-    await controls.updateComplete;
-
-    // The controls should have found and connected to the preview
-    expect(controls.targetElement).toBe(preview);
-  });
-
-  test("handles missing target gracefully", async () => {
-    const controls = makeElement(
-      "ef-controls",
-      { target: "nonexistent-preview" },
-      document.body,
-    );
-
-    await controls.updateComplete;
-
-    expect(controls.targetElement).toBe(null);
-  });
-
-  test("updates when target is set after connection", async () => {
-    const preview = makeElement(
-      "ef-preview",
-      { mode: "fixed", duration: "10s" },
-      document.body,
-    );
-    const controls = makeElement("ef-controls", {}, document.body);
-
-    // Initially no target
-    expect(controls.targetElement).toBe(null);
-
-    controls.target = "test-preview";
-    preview.id = "test-preview";
-
-    await preview.updateComplete;
-    await controls.updateComplete;
-
-    expect(controls.targetElement).toBe(preview);
-  });
-
-  test("disconnects from target when removed", async () => {
-    const preview = makeElement("ef-controls-test-context", {}, document.body);
-    preview.id = "test-preview";
-
-    makeElement("ef-timegroup", { mode: "fixed", duration: "10s" }, preview);
-
-    const controls = makeElement(
-      "ef-controls",
-      { target: "test-preview" },
-      document.body,
-    );
-    controls.target = "test-preview";
-
-    // Wait for both elements to complete their updates
-    await preview.updateComplete;
-    await controls.updateComplete;
-
-    // Should be connected
-    expect(controls.targetElement).toBe(preview);
-
-    controls.remove();
-
-    // After disconnection, targetElement persists but should have no effect
-    // (TargetController only clears targetElement when target is removed, not when consumer disconnects)
-    expect(controls.targetElement).toBe(preview);
-  });
-
-  describe("html as text", () => {
-    const htmlTest = test.extend<{
-      markup: string;
-      container: HTMLElement;
-      preview: EFPreview;
-      timegroup: EFTimegroup;
-      togglePlay: EFTogglePlay;
-      timeDisplay: EFTimeDisplay;
-      configuration: EFConfiguration;
-      controls: EFControls;
-    }>({
-      container: async ({ markup }, use) => {
-        const container = makeElement("div", {}, document.body);
-        container.innerHTML = markup;
-        await use(container);
-        container.remove();
-      },
-      markup: async ({}, use) => {
-        const markup = `
-          <ef-configuration>
-            <ef-preview id="test-preview-html">
-              <ef-timegroup mode="fixed" duration="10s" id="test-timegroup">
-                <ef-video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
-              </ef-timegroup>
-            </ef-preview>
-            <ef-controls target="test-preview-html">
-              <ef-toggle-play></ef-toggle-play>
-              <ef-time-display></ef-time-display>
-            </ef-controls>
-          </ef-configuration>
-        `;
-        use(markup);
-      },
-      preview: async ({ container }, use) => {
-        const preview = container.querySelector("ef-preview")!;
-        await use(preview);
-      },
-      timegroup: async ({ container }, use) => {
-        const timegroup = container.querySelector("ef-timegroup")!;
-        await use(timegroup);
-      },
-      togglePlay: async ({ container }, use) => {
-        const togglePlay = container.querySelector("ef-toggle-play")!;
-        await use(togglePlay);
-      },
-      timeDisplay: async ({ container }, use) => {
-        const timeDisplay = container.querySelector("ef-time-display")!;
-        await use(timeDisplay);
-      },
-      configuration: async ({ container }, use) => {
-        const configuration = container.querySelector("ef-configuration")!;
-        await use(configuration);
-      },
-      controls: async ({ container }, use) => {
-        const controls = container.querySelector("ef-controls")!;
-        await use(controls);
-      },
-    });
-
-    htmlTest(
-      "can find and connect to target preview by ID",
-      async ({ preview, controls, togglePlay }) => {
-        expect(controls.targetElement).toBe(preview);
-        expect(togglePlay.efContext).toBe(preview);
-      },
-    );
-  });
-
-  describe("context propagation", () => {
-    const contextTest = test.extend<{
-      context: EFControlsTestContext;
-      controls: EFControls;
-      togglePlay: EFTogglePlay;
-      timeDisplay: EFTimeDisplay;
-      configuration: EFConfiguration;
-    }>({
-      configuration: async ({}, use) => {
-        const configuration = makeElement(
-          "ef-configuration",
-          {},
-          document.body,
-        );
-        use(configuration);
-      },
-      context: async ({ configuration }, use) => {
-        const context = makeElement(
-          "ef-controls-test-context",
-          { id: "test-preview" },
-          configuration,
-        );
-        makeElement(
-          "ef-timegroup",
-          { mode: "fixed", duration: "10s" },
-          context,
-        );
-        use(context);
-      },
-      controls: async ({ configuration }, use) => {
-        const controls = makeElement(
-          "ef-controls",
-          { target: "test-preview" },
-          configuration,
-        );
-        use(controls);
-      },
-      togglePlay: async ({ controls }, use) => {
-        const togglePlay = makeElement("ef-toggle-play", {}, controls);
-        use(togglePlay);
-      },
-      timeDisplay: async ({ controls }, use) => {
-        const timeDisplay = makeElement("ef-time-display", {}, controls);
-        use(timeDisplay);
-      },
-    });
-
-    contextTest(
-      "propagates changes to play state",
-      async ({ context, controls, togglePlay }) => {
-        context.play();
-        await context.updateComplete;
-        await controls.updateComplete;
-        await togglePlay.updateComplete;
-        expect(togglePlay.playing).toBe(true);
-        context.pause();
-      },
-    );
-
-    contextTest(
-      "propagates changes from toggle play button",
-      async ({ context, togglePlay }) => {
-        context.play();
-        await togglePlay.updateComplete;
-        await context.updateComplete;
-        expect(togglePlay.playing).toBe(true);
-        togglePlay.click();
-        await togglePlay.updateComplete;
-        expect(context.playing).toBe(false);
-      },
-    );
-
-    contextTest(
-      "efContext is consumed by toggle-play",
-      async ({ controls, context, togglePlay }) => {
-        await togglePlay.updateComplete;
-        expect(togglePlay.efContext).toBe(context);
-
-        controls.setAttribute("target", "no-target");
-        await togglePlay.updateComplete;
-        expect(togglePlay.efContext).toBeNull();
-
-        controls.setAttribute("target", "test-preview");
-        await togglePlay.updateComplete;
-        expect(togglePlay.efContext).toBe(context);
-      },
-    );
-
-    contextTest(
-      "propagates context from controls to toggle-play",
-      async ({ context, controls, togglePlay }) => {
-        context.play();
-        await controls.updateComplete;
-        await togglePlay.updateComplete;
-        expect(togglePlay.efContext).toBe(context);
-
-        // Pause before disconnecting to ensure clean state
-        context.pause();
-        await context.updateComplete;
-        await togglePlay.updateComplete;
-
-        controls.setAttribute("target", "no-target");
-        // Wait for context changes to propagate through multiple cycles
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        await controls.updateComplete;
-        await togglePlay.updateComplete;
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        await controls.updateComplete;
-        await togglePlay.updateComplete;
-        expect(controls.targetElement).toBeNull();
-        expect(togglePlay.efContext).toBeNull();
-        expect(togglePlay.playing).toBe(false);
-        // Test to ensure play context is no longer updated
-        context.pause();
-        await context.updateComplete;
-        context.play();
-        await context.updateComplete;
-        await togglePlay.updateComplete;
-        expect(togglePlay.playing).toBe(false);
-      },
-    );
-
-    contextTest(
-      "propagates changes to time display",
-      async ({ context, timeDisplay }) => {
-        await context.updateComplete;
-        await timeDisplay.updateComplete;
-        expect(timeDisplay.shadowRoot?.textContent?.trim()).toBe("0:00 / 0:10");
-
-        const timegroup = context.querySelector("ef-timegroup");
-        if (timegroup) {
-          await timegroup.seek(1000);
-        } else {
-          context.currentTimeMs = 1000;
-        }
-
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        await context.updateComplete;
-        await timeDisplay.updateComplete;
-        expect(timeDisplay.shadowRoot?.textContent?.trim()).toBe("0:01 / 0:10");
-      },
-    );
-  });
-
-  test("works with child control elements - EFTogglePlay", async () => {
-    const preview = makeElement(
-      "ef-controls-test-context",
-      { id: "test-preview" },
-      document.body,
-    );
-    makeElement("ef-timegroup", { mode: "fixed", duration: "10s" }, preview);
-
-    const controls = makeElement(
-      "ef-controls",
-      { target: "test-preview" },
-      document.body,
-    );
-
-    const togglePlay = makeElement("ef-toggle-play", {}, controls);
-
-    // Wait for all elements to complete their updates
-    await preview.updateComplete;
-    await controls.updateComplete;
-    await togglePlay.updateComplete;
-
-    // The toggle play should be connected to the controls' context (which syncs with preview)
-    expect((togglePlay as any).playing).toBe(false);
-
-    // Test that clicking the toggle affects the preview
-    preview.playing = true;
-    await preview.updateComplete;
-    await togglePlay.updateComplete;
-
-    expect((togglePlay as any).playing).toBe(true);
-  });
-});

package/src/gui/EFControls.ts

@@ -1,195 +0,0 @@
-import { type Context, createContext, provide } from "@lit/context";
-import { css, LitElement, type PropertyValueMap } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { attachContextRoot } from "../attachContextRoot.js";
-import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
-import { TargetController } from "../elements/TargetController.js";
-import { targetTemporalContext } from "./ContextMixin.js";
-import type { ControllableInterface } from "./Controllable.js";
-import { currentTimeContext } from "./currentTimeContext.js";
-import { durationContext } from "./durationContext.js";
-import { efContext } from "./efContext.js";
-import { type FocusContext, focusContext } from "./focusContext.js";
-import { focusedElementContext } from "./focusedElementContext.js";
-import { loopContext, playingContext } from "./playingContext.js";
-
-attachContextRoot();
-
-class ContextRequestEvent extends Event {
-  context: Context<any, any>;
-  contextTarget: Element;
-  callback: (proxy: EFControls, value: any) => void;
-  subscribe: boolean;
-
-  constructor(
-    context: Context<any, any>,
-    contextTarget: Element,
-    callback: (proxy: EFControls, value: any) => void,
-    subscribe: boolean,
-  ) {
-    super("context-request", { bubbles: true, composed: true });
-    this.context = context;
-    this.contextTarget = contextTarget;
-    this.callback = callback;
-    this.subscribe = subscribe ?? false;
-  }
-}
-
-const proxiedContexts = [
-  [
-    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-    (proxy: EFControls, value: boolean) => (proxy.playing = value),
-    playingContext,
-  ],
-  [
-    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-    (proxy: EFControls, value: boolean) => (proxy.loop = value),
-    loopContext,
-  ],
-  [
-    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-    (proxy: EFControls, value: number) => (proxy.currentTimeMs = value),
-    currentTimeContext,
-  ],
-  [
-    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-    (proxy: EFControls, value: number) => (proxy.durationMs = value),
-    durationContext,
-  ],
-  [
-    (proxy: EFControls, value: TemporalMixinInterface) =>
-      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-      (proxy.targetTemporal = value),
-    targetTemporalContext,
-  ],
-  [
-    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-    (proxy: EFControls, value: HTMLElement) => (proxy.focusedElement = value),
-    focusedElementContext,
-  ],
-  [
-    (proxy: EFControls, value: HTMLElement) =>
-      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback
-      (proxy.focusContext.focusedElement = value),
-    focusContext,
-  ],
-] as const;
-
-export const testContext = createContext<string | null>("test");
-
-/**
- * EFControls provides a way to control an ef-preview element that is not a direct ancestor.
- * It bridges the contexts from a target preview element to its children controls.
- *
- * Usage:
- * ```html
- * <ef-preview id="my-preview">...</ef-preview>
- *
- * <ef-controls target="my-preview">
- *   <ef-toggle-play>
- *     <button slot="play">Play</button>
- *     <button slot="pause">Pause</button>
- *   </ef-toggle-play>
- *   <ef-scrubber></ef-scrubber>
- *   <ef-time-display></ef-time-display>
- * </ef-controls>
- * ```
- */
-@customElement("ef-controls")
-export class EFControls extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-  `;
-
-  createRenderRoot() {
-    return this;
-  }
-
-  /**
-   * The ID of the ef-preview element to control
-   */
-  @property({ type: String })
-  target = "";
-
-  /**
-   * The target element (set by TargetController)
-   */
-  @provide({ context: efContext })
-  @state()
-  targetElement: ControllableInterface | null = null;
-
-  @provide({ context: playingContext })
-  @state()
-  playing = false;
-
-  @provide({ context: loopContext })
-  @state()
-  loop = false;
-
-  @provide({ context: currentTimeContext })
-  @state()
-  currentTimeMs = 0;
-
-  @provide({ context: durationContext })
-  @state()
-  durationMs = 0;
-
-  @provide({ context: targetTemporalContext })
-  @state()
-  targetTemporal: TemporalMixinInterface | null = null;
-
-  @provide({ context: focusedElementContext })
-  @state()
-  focusedElement?: HTMLElement;
-
-  @provide({ context: focusContext })
-  focusContext = this as FocusContext;
-
-  // @ts-expect-error controller is intentionally not referenced directly
-  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects
-  #targetController = new TargetController(this);
-
-  #proxyUnsubscribeMap = new Map<Context<any, any>, () => void>();
-
-  #unsubscribe() {
-    for (const unsubscribe of this.#proxyUnsubscribeMap.values()) {
-      unsubscribe();
-    }
-    this.#proxyUnsubscribeMap.clear();
-  }
-
-  updated(changedProperties: PropertyValueMap<this>) {
-    super.updated(changedProperties);
-    if (changedProperties.has("targetElement")) {
-      this.#unsubscribe();
-
-      if (this.targetElement) {
-        for (const [callback, context] of proxiedContexts) {
-          const event = new ContextRequestEvent(
-            context,
-            this,
-            (value, unsubscribe) => {
-              callback(this, value as never);
-              this.#proxyUnsubscribeMap.set(context, unsubscribe);
-            },
-            true,
-          );
-          this.targetElement.dispatchEvent(event);
-        }
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#unsubscribe();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-controls": EFControls;
-  }
-}

package/src/gui/EFDial.browsertest.ts

@@ -1,84 +0,0 @@
-import { html, render } from "lit";
-import { afterEach, describe, expect, test } from "vitest";
-import type { EFDial } from "./EFDial";
-import "./EFDial";
-
-describe("EFDial", () => {
-  afterEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  test("should render with default value", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    render(html`<ef-dial></ef-dial>`, container);
-    const el = container.querySelector<EFDial>("ef-dial")!;
-    await el.updateComplete;
-
-    const centerText = el.shadowRoot!.querySelector(
-      ".center-text",
-    ) as HTMLDivElement;
-    expect(centerText.textContent).to.equal("0°");
-  });
-
-  test("should render with provided value", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    render(html`<ef-dial .value=${45}></ef-dial>`, container);
-    const el = container.querySelector<EFDial>("ef-dial")!;
-    await el.updateComplete;
-
-    const centerText = el.shadowRoot!.querySelector(
-      ".center-text",
-    ) as HTMLDivElement;
-    expect(centerText.textContent).to.equal("45°");
-  });
-
-  test("should update value on drag and emit 'change' event", async () => {
-    const container = document.createElement("div");
-    container.style.width = "200px";
-    container.style.height = "200px";
-    document.body.appendChild(container);
-    render(html`<ef-dial></ef-dial>`, container);
-    const el = container.querySelector<EFDial>("ef-dial")!;
-    await el.updateComplete;
-
-    let changedValue: number | undefined;
-    el.addEventListener("change", (e) => {
-      changedValue = (e as CustomEvent).detail.value;
-    });
-
-    const dial = el.shadowRoot!.querySelector(
-      ".dial-container",
-    ) as HTMLDivElement;
-    const pointerId = 1;
-    const downEvent = new PointerEvent("pointerdown", {
-      clientX: 100,
-      clientY: 20,
-      bubbles: true,
-      composed: true,
-      pointerId,
-    });
-    dial.dispatchEvent(downEvent);
-
-    const moveEvent = new PointerEvent("pointermove", {
-      clientX: 180,
-      clientY: 100,
-      bubbles: true,
-      composed: true,
-      pointerId,
-    });
-    dial.dispatchEvent(moveEvent);
-    await el.updateComplete;
-
-    expect(el.value).to.be.closeTo(90, 0.1); // Expect a value around 90 degrees
-    expect(changedValue).to.be.closeTo(el.value, 0.1);
-
-    // Test normalization to 0-360
-    el.value = -10; // Set a negative value
-    expect(el.value).to.be.closeTo(350, 0.1); // Should normalize to 350
-
-    el.value = 370; // Set a value > 360
-    expect(el.value).to.be.closeTo(10, 0.1); // Should normalize to 10
-  });
-});