@editframe/elements 0.21.0-beta.0 → 0.23.7-beta.0

package/src/gui/EFControls.browsertest.ts

@@ -1,22 +1,37 @@
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
-import { beforeEach, describe, expect, test } from "vitest";
+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 { EFControls } from "./EFControls.js";
 import "./EFPreview.js";
-
-@customElement("test-context")
-class TestContext extends EFTargetable(ContextMixin(LitElement)) {
+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>`;
   }
 }
 
-beforeEach(() => {
+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);
@@ -30,28 +45,36 @@ beforeEach(() => {
   }
 });
 
-describe("EFControls", () => {
-  test("should be defined", () => {
-    expect(EFControls).toBeDefined();
-  });
+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 () => {
-    // Create a preview with an ID
-    const preview = document.createElement("ef-preview") as any;
-    preview.id = "test-preview";
-
-    // Add a timegroup to the preview to give it duration
-    const timegroup = document.createElement("ef-timegroup");
-    timegroup.mode = "fixed";
-    timegroup.duration = "10s";
-    preview.appendChild(timegroup);
-
-    document.body.appendChild(preview);
-
-    // Create controls targeting the preview
-    const controls = document.createElement("ef-controls");
-    controls.target = "test-preview";
-    document.body.appendChild(controls);
+    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;
@@ -62,62 +85,49 @@ describe("EFControls", () => {
   });
 
   test("handles missing target gracefully", async () => {
-    const controls = document.createElement("ef-controls");
-    controls.target = "nonexistent-preview";
-    document.body.appendChild(controls);
+    const controls = makeElement(
+      "ef-controls",
+      { target: "nonexistent-preview" },
+      document.body,
+    );
 
-    // Wait for the controller to attempt connection
     await controls.updateComplete;
 
-    // Should have no target but not crash
     expect(controls.targetElement).toBe(null);
-    // Note: EFControls with context proxying doesn't have playing property
-    // It only proxies context requests to the target element
   });
 
   test("updates when target is set after connection", async () => {
-    const controls = document.createElement("ef-controls") as EFControls;
-    document.body.appendChild(controls);
+    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);
 
-    // Create preview
-    const preview = document.createElement("test-context") as TestContext;
-    preview.id = "test-preview";
-
-    const timegroup = document.createElement("ef-timegroup");
-    timegroup.mode = "fixed";
-    timegroup.duration = "10s";
-    preview.appendChild(timegroup);
-
-    document.body.appendChild(preview);
-
-    // Set target after both are connected
     controls.target = "test-preview";
+    preview.id = "test-preview";
 
-    // Wait for both elements to complete their updates
     await preview.updateComplete;
     await controls.updateComplete;
 
-    // The controls should have found and connected to the target
     expect(controls.targetElement).toBe(preview);
   });
 
   test("disconnects from target when removed", async () => {
-    const preview = document.createElement("test-context") as TestContext;
+    const preview = makeElement("ef-controls-test-context", {}, document.body);
     preview.id = "test-preview";
 
-    const timegroup = document.createElement("ef-timegroup");
-    timegroup.mode = "fixed";
-    timegroup.duration = "10s";
-    preview.appendChild(timegroup);
+    makeElement("ef-timegroup", { mode: "fixed", duration: "10s" }, preview);
 
-    document.body.appendChild(preview);
-
-    const controls = document.createElement("ef-controls") as EFControls;
+    const controls = makeElement(
+      "ef-controls",
+      { target: "test-preview" },
+      document.body,
+    );
     controls.target = "test-preview";
-    document.body.appendChild(controls);
 
     // Wait for both elements to complete their updates
     await preview.updateComplete;
@@ -126,36 +136,240 @@ describe("EFControls", () => {
     // Should be connected
     expect(controls.targetElement).toBe(preview);
 
-    // Disconnect the controls
-    document.body.removeChild(controls);
+    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);
   });
 
-  test.skip("works with child control elements - EFTogglePlay", async () => {
-    // Import the control element
-    await import("./EFTogglePlay.js");
-
-    const preview = document.createElement("test-context") as TestContext;
-    preview.id = "test-preview";
-    preview.playing = false;
-
-    const timegroup = document.createElement("ef-timegroup");
-    timegroup.mode = "fixed";
-    timegroup.duration = "10s";
-    preview.appendChild(timegroup);
-
-    document.body.appendChild(preview);
-
-    const controls = document.createElement("ef-controls") as EFControls;
-    controls.target = "test-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);
+      },
+    );
+  });
 
-    const togglePlay = document.createElement("ef-toggle-play");
-    controls.appendChild(togglePlay);
+  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");
+      },
+    );
+  });
 
-    document.body.appendChild(controls);
+  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;

package/src/gui/EFControls.ts

@@ -1,19 +1,82 @@
-import { css, html, LitElement } from "lit";
+import { type Context, createContext, provide } from "@lit/context";
+import { css, LitElement, type PropertyValueMap } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-
-import { ContextProxyController } from "../elements/ContextProxiesController.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import { TargetController } from "../elements/TargetController.js";
-import type { ContextMixinInterface } from "./ContextMixin.js";
-import { targetTimegroupContext } from "./ContextMixin.js";
+import { targetTemporalContext } from "./ContextMixin.js";
+import type { ControllableInterface } from "./Controllable.js";
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
-import { efConfigurationContext } from "./EFConfiguration.js";
 import { efContext } from "./efContext.js";
-import { fetchContext } from "./fetchContext.js";
-import { focusContext } from "./focusContext.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.
@@ -40,6 +103,10 @@ export class EFControls extends LitElement {
     }
   `;
 
+  createRenderRoot() {
+    return this;
+  }
+
   /**
    * The ID of the ef-preview element to control
    */
@@ -49,31 +116,75 @@ export class EFControls extends LitElement {
   /**
    * 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()
-  targetElement: ContextMixinInterface | null = null;
+  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);
 
-  // @ts-expect-error controller is intentionally not referenced directly
-  #contextProxyController = new ContextProxyController(this, {
-    target: () => this.targetElement,
-    contexts: [
-      playingContext,
-      loopContext,
-      currentTimeContext,
-      durationContext,
-      targetTimegroupContext,
-      focusedElementContext,
-      efContext,
-      fetchContext,
-      focusContext,
-      efConfigurationContext,
-    ],
-  });
-
-  render() {
-    return html`<slot></slot>`;
+  #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();
   }
 }