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

package/src/gui/ContextMixin.ts

@@ -4,6 +4,8 @@ import { property, state } from "lit/decorators.js";
 import { EF_RENDERING } from "../EF_RENDERING.ts";
 import type { EFTimegroup } from "../elements/EFTimegroup.js";
 import { globalURLTokenDeduplicator } from "../transcoding/cache/URLTokenDeduplicator.js";
+import { currentTimeContext } from "./currentTimeContext.js";
+import { durationContext } from "./durationContext.js";
 import {
   type EFConfiguration,
   efConfigurationContext,
@@ -74,15 +76,12 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     targetTimegroup: EFTimegroup | null = null;
 
     // Add reactive properties that depend on the targetTimegroup
-    @state()
-    get durationMs(): number {
-      return this.targetTimegroup?.durationMs ?? 0;
-    }
+    @provide({ context: durationContext })
+    @property({ type: Number })
+    durationMs = 0;
 
-    @state()
-    get endTimeMs(): number {
-      return this.targetTimegroup?.endTimeMs ?? 0;
-    }
+    @property({ type: Number })
+    endTimeMs = 0;
 
     @provide({ context: fetchContext })
     fetch = async (url: string, init: RequestInit = {}) => {
@@ -248,7 +247,8 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @property({ type: Boolean })
     rendering = false;
 
-    @state()
+    @provide({ context: currentTimeContext })
+    @property({ type: Number })
     currentTimeMs = Number.NaN;
 
     #FPS = 30;
@@ -273,11 +273,24 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           }
         } else if (mutation.type === "attributes") {
           // Watch for attribute changes that might affect duration
+          const durationAffectingAttributes = [
+            "duration",
+            "mode",
+            "trimstart",
+            "trimend",
+            "sourcein",
+            "sourceout",
+          ];
+
           if (
-            mutation.attributeName === "duration" ||
-            mutation.attributeName === "mode" ||
+            durationAffectingAttributes.includes(
+              mutation.attributeName || "",
+            ) ||
             (mutation.target instanceof Element &&
               (mutation.target.tagName === "EF-TIMEGROUP" ||
+                mutation.target.tagName === "EF-VIDEO" ||
+                mutation.target.tagName === "EF-AUDIO" ||
+                mutation.target.tagName === "EF-CAPTIONS" ||
                 mutation.target.closest("ef-timegroup")))
           ) {
             shouldUpdate = true;
@@ -289,6 +302,8 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         // Trigger an update to ensure reactive properties recalculate
         // Use a microtask to ensure DOM updates are complete
         queueMicrotask(() => {
+          // Recalculate duration and endTime when timegroup changes
+          this.updateDurationProperties();
           this.requestUpdate();
           // Also ensure the targetTimegroup updates its computed properties
           if (this.targetTimegroup) {
@@ -298,11 +313,29 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       }
     });
 
+    /**
+     * Update duration properties when timegroup changes
+     */
+    updateDurationProperties(): void {
+      const newDuration = this.targetTimegroup?.durationMs ?? 0;
+      const newEndTime = this.targetTimegroup?.endTimeMs ?? 0;
+
+      if (this.durationMs !== newDuration) {
+        this.durationMs = newDuration;
+      }
+
+      if (this.endTimeMs !== newEndTime) {
+        this.endTimeMs = newEndTime;
+      }
+    }
+
     connectedCallback(): void {
       super.connectedCallback();
 
       // Initialize targetTimegroup
       this.targetTimegroup = this.querySelector("ef-timegroup");
+      // Initialize duration properties
+      this.updateDurationProperties();
 
       this.#timegroupObserver.observe(this, {
         childList: true,
@@ -342,15 +375,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
               return;
             }
             this.targetTimegroup.currentTimeMs = this.currentTimeMs;
-            this.dispatchEvent(
-              new CustomEvent("timeupdate", {
-                detail: {
-                  currentTimeMs: this.currentTimeMs,
-                  progress:
-                    this.currentTimeMs / this.targetTimegroup.durationMs,
-                },
-              }),
-            );
           }
         }
       }

package/src/gui/EFControls.browsertest.ts

@@ -0,0 +1,175 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { beforeEach, 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)) {
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+beforeEach(() => {
+  // 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();
+  }
+});
+
+describe("EFControls", () => {
+  test("should be defined", () => {
+    expect(EFControls).toBeDefined();
+  });
+
+  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);
+
+    // 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 = document.createElement("ef-controls");
+    controls.target = "nonexistent-preview";
+    document.body.appendChild(controls);
+
+    // 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);
+
+    // 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";
+
+    // 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;
+    preview.id = "test-preview";
+
+    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";
+    document.body.appendChild(controls);
+
+    // Wait for both elements to complete their updates
+    await preview.updateComplete;
+    await controls.updateComplete;
+
+    // Should be connected
+    expect(controls.targetElement).toBe(preview);
+
+    // Disconnect the controls
+    document.body.removeChild(controls);
+
+    // 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("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";
+
+    const togglePlay = document.createElement("ef-toggle-play");
+    controls.appendChild(togglePlay);
+
+    document.body.appendChild(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

@@ -0,0 +1,84 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+import { ContextProxyController } from "../elements/ContextProxiesController.js";
+import { TargetController } from "../elements/TargetController.js";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { targetTimegroupContext } from "./ContextMixin.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 { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
+
+/**
+ * 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;
+    }
+  `;
+
+  /**
+   * The ID of the ef-preview element to control
+   */
+  @property({ type: String })
+  target = "";
+
+  /**
+   * The target element (set by TargetController)
+   */
+  @state()
+  targetElement: ContextMixinInterface | null = null;
+
+  // @ts-expect-error controller is intentionally not referenced directly
+  #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>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-controls": EFControls;
+  }
+}