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

package/src/gui/EFScrubber.ts

@@ -3,14 +3,15 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { ref } from "lit/directives/ref.js";
-import type { ContextMixinInterface } 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 { playingContext } from "./playingContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 
 @customElement("ef-scrubber")
-export class EFScrubber extends LitElement {
+export class EFScrubber extends TargetOrContextMixin(LitElement, efContext) {
   static styles = [
     css`
     :host {
@@ -58,9 +59,6 @@ export class EFScrubber extends LitElement {
     `,
   ];
 
-  @consume({ context: efContext, subscribe: true })
-  context?: ContextMixinInterface | null;
-
   @consume({ context: playingContext, subscribe: true })
   playing = false;
 
@@ -70,6 +68,10 @@ export class EFScrubber extends LitElement {
   @consume({ context: durationContext, subscribe: true })
   durationMs = 0;
 
+  get context(): ControllableInterface | null {
+    return this.effectiveContext;
+  }
+
   @state()
   private scrubProgress = 0;
 

package/src/gui/EFTimeDisplay.browsertest.ts

@@ -103,25 +103,24 @@ describe("EFTimeDisplay", () => {
   test("formats time correctly with valid values", async () => {
     const { timeDisplay } = renderTimeDisplay(
       html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
+        <ef-timegroup mode="fixed" duration="3s"></ef-timegroup>
         <ef-time-display></ef-time-display>
       </ef-preview>`,
     );
 
     const context = timeDisplay.closest("ef-preview")!;
+    const timegroup = context.querySelector("ef-timegroup") as EFTimegroup;
 
-    // Create a mock timegroup with duration
-    const mockTimegroup = document.createElement("ef-timegroup") as EFTimegroup;
-    mockTimegroup.setAttribute("mode", "fixed");
-    mockTimegroup.setAttribute("duration", "3s");
+    await timegroup.updateComplete;
+    await timegroup.seek(1500); // 1.5 seconds = 0:01
 
-    context.targetTimegroup = mockTimegroup;
-    context.currentTimeMs = 1500; // 1.5 seconds = 0:01
+    // Wait for context to update and propagate to time display
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await context.updateComplete;
     await timeDisplay.updateComplete;
 
-    await vi.waitUntil(
-      () => timeDisplay.shadowRoot?.textContent?.trim() === "0:01 / 0:03",
-    );
+    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(timeText, "0:01 / 0:03");
   });
 
   test("formats minutes correctly", async () => {
@@ -154,22 +153,23 @@ describe("EFTimeDisplay", () => {
     );
 
     const context = timeDisplay.closest("ef-preview")!;
+    const timegroup = context.querySelector("ef-timegroup") as EFTimegroup;
 
-    const mockTimegroup = document.createElement("ef-timegroup") as EFTimegroup;
-    mockTimegroup.setAttribute("mode", "fixed");
-    mockTimegroup.setAttribute("duration", "10s");
-
-    context.targetTimegroup = mockTimegroup;
+    await timegroup.updateComplete;
 
     // Initial time
-    context.currentTimeMs = 2000; // 2 seconds = 0:02
+    await timegroup.seek(2000); // 2 seconds = 0:02
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await context.updateComplete;
     await timeDisplay.updateComplete;
 
     let timeText = timeDisplay.shadowRoot?.textContent?.trim();
     assert.equal(timeText, "0:02 / 0:10");
 
     // Update time
-    context.currentTimeMs = 7000; // 7 seconds = 0:07
+    await timegroup.seek(7000); // 7 seconds = 0:07
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await context.updateComplete;
     await timeDisplay.updateComplete;
 
     timeText = timeDisplay.shadowRoot?.textContent?.trim();
@@ -185,9 +185,9 @@ describe("EFTimeDisplay", () => {
     );
 
     const context = timeDisplay.closest("ef-preview")!;
-    const timegroup = context.targetTimegroup!;
+    const timegroup = context.targetTemporal!;
 
-    timegroup.setAttribute("duration", "0s");
+    (timegroup as unknown as Element).setAttribute("duration", "0s");
     assert.equal(timegroup.durationMs, 0);
 
     await timegroup.updateComplete;

package/src/gui/EFTimeDisplay.ts

@@ -3,9 +3,11 @@ import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
+import { efContext } from "./efContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 
 @customElement("ef-time-display")
-export class EFTimeDisplay extends LitElement {
+export class EFTimeDisplay extends TargetOrContextMixin(LitElement, efContext) {
   static styles = css`
     :host {
       display: inline-block;

package/src/gui/EFToggleLoop.ts

@@ -1,20 +1,21 @@
-import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import type { ContextMixinInterface } from "./ContextMixin.js";
+import type { ControllableInterface } from "./Controllable.js";
 import { efContext } from "./efContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 
 @customElement("ef-toggle-loop")
-export class EFToggleLoop extends LitElement {
+export class EFToggleLoop extends TargetOrContextMixin(LitElement, efContext) {
   static styles = [
     css`
       :host {}
     `,
   ];
 
-  @consume({ context: efContext })
-  context?: ContextMixinInterface | null;
+  get context(): ControllableInterface | null {
+    return this.effectiveContext;
+  }
 
   render() {
     return html`

package/src/gui/EFTogglePlay.ts

@@ -1,13 +1,16 @@
 import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import type { ContextMixinInterface } from "./ContextMixin.js";
+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-toggle-play")
-export class EFTogglePlay extends LitElement {
+export class EFTogglePlay extends TargetOrContextMixin(LitElement, efContext) {
   static styles = [
     css`
       :host {}
@@ -17,25 +20,29 @@ export class EFTogglePlay extends LitElement {
     `,
   ];
 
-  @consume({ context: efContext, subscribe: true })
-  context?: ContextMixinInterface | null;
-
   @consume({ context: playingContext, subscribe: true })
+  @state()
   playing = false;
 
+  get efContext(): ControllableInterface | null {
+    return this.effectiveContext;
+  }
+
+  // Attach click listener to host
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.togglePlay);
+  }
+
+  // Detach click listener from host
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.togglePlay);
+  }
+
   render() {
     return html`
-      <div
-        @click=${() => {
-          if (this.context) {
-            if (this.playing) {
-              this.context.pause();
-            } else {
-              this.context.play();
-            }
-          }
-        }}
-      >
+      <div>
         ${
           this.playing
             ? html`<slot name="pause"></slot>`
@@ -45,15 +52,15 @@ export class EFTogglePlay extends LitElement {
     `;
   }
 
-  togglePlay() {
-    if (this.context) {
+  togglePlay = () => {
+    if (this.efContext) {
       if (this.playing) {
-        this.context.pause();
+        this.efContext.pause();
       } else {
-        this.context.play();
+        this.efContext.play();
       }
     }
-  }
+  };
 }
 
 declare global {