@editframe/elements 0.11.0-beta.9 → 0.12.0-beta.2

package/src/gui/ContextMixin.browsertest.ts

@@ -2,10 +2,13 @@ import { LitElement } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { describe, expect, test, vi } from "vitest";
 
-import { ContextMixin } from "./ContextMixin.ts";
 import { consume } from "@lit/context";
+import { ContextMixin } from "./ContextMixin.ts";
 import { apiHostContext } from "./apiHostContext.ts";
 
+// Required to test timeupdate event, we need a duration, and timegroups are a quick way to do that
+import "../elements/EFTimegroup.ts";
+
 @customElement("test-context")
 class TestContext extends ContextMixin(LitElement) {}
 
@@ -49,7 +52,6 @@ describe("ContextMixin", () => {
       expect(element.apiHost).toBe("test2");
     });
   });
-
   describe("Playback", () => {
     test("should start playback", () => {
       const element = document.createElement("test-context");
@@ -78,4 +80,28 @@ describe("ContextMixin", () => {
       expect(playbackSpy).toHaveBeenCalled();
     });
   });
+
+  test("Time update event when the currentTimeMs changed", async () => {
+    const timegroup = document.createElement("ef-timegroup");
+    timegroup.mode = "fixed";
+    timegroup.duration = "10s";
+
+    const preview = document.createElement("test-context");
+    preview.append(timegroup);
+    document.body.append(preview);
+
+    type CurrentTimeEvent = CustomEvent<{ currentTimeMs: number }>;
+
+    // Expect the timeupdate event to be dispatched
+    const timeupdatePromise = new Promise<CurrentTimeEvent>((resolve) => {
+      preview.addEventListener(
+        "timeupdate",
+        (event: Event) => resolve(event as CurrentTimeEvent),
+        { once: true },
+      );
+    });
+    preview.currentTimeMs = 1000;
+    const event = await timeupdatePromise;
+    expect(event.detail.currentTimeMs).toBe(1000);
+  });
 });

package/src/gui/ContextMixin.ts

@@ -1,17 +1,17 @@
-import type { LitElement } from "lit";
 import { provide } from "@lit/context";
+import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import { focusContext, type FocusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { fetchContext } from "./fetchContext.ts";
 import { createRef } from "lit/directives/ref.js";
-import { loopContext, playingContext } from "./playingContext.ts";
 import type { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { efContext } from "./efContext.ts";
 import { apiHostContext } from "./apiHostContext.ts";
+import { efContext } from "./efContext.ts";
+import { fetchContext } from "./fetchContext.ts";
+import { type FocusContext, focusContext } from "./focusContext.ts";
+import { focusedElementContext } from "./focusedElementContext.ts";
+import { loopContext, playingContext } from "./playingContext.ts";
 
-export declare class ContextMixinInterface {
+export declare class ContextMixinInterface extends LitElement {
   signingURL?: string;
   apiHost?: string;
   rendering: boolean;
@@ -26,9 +26,21 @@ export declare class ContextMixinInterface {
   pause(): void;
 }
 
+const contextMixinSymbol = Symbol("contextMixin");
+
+export function isContextMixin(value: any): value is ContextMixinInterface {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    contextMixinSymbol in value.constructor
+  );
+}
+
 type Constructor<T = {}> = new (...args: any[]) => T;
 export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
   class ContextElement extends superClass {
+    static [contextMixinSymbol] = true;
+
     @provide({ context: focusContext })
     focusContext = this as FocusContext;
 
@@ -70,6 +82,8 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         Object.assign(init.headers, {
           authorization: `Bearer ${urlToken}`,
         });
+      } else {
+        init.credentials = "include";
       }
 
       return fetch(url, init);
@@ -104,6 +118,9 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     stageRef = createRef<HTMLDivElement>();
     canvasRef = createRef<HTMLSlotElement>();
 
+    #FPS = 30;
+    #MS_PER_FRAME = 1000 / this.#FPS;
+
     setStageScale = () => {
       if (this.isConnected && !this.rendering) {
         const canvasElement = this.canvasRef.value;
@@ -164,10 +181,20 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           this.stopPlayback();
         }
       }
-
       if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
         if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
           this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+          if (this.isConnected) {
+            this.dispatchEvent(
+              new CustomEvent("timeupdate", {
+                detail: {
+                  currentTimeMs: this.currentTimeMs,
+                  progress:
+                    this.currentTimeMs / this.targetTimegroup.durationMs,
+                },
+              }),
+            );
+          }
         }
       }
       super.update(changedProperties);
@@ -190,8 +217,13 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     #AUDIO_PLAYBACK_SLICE_MS = 1000;
 
     #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
-      this.currentTimeMs =
+      const rawTimeMs =
         startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1000;
+      const nextTimeMs =
+        Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
+      if (nextTimeMs !== this.currentTimeMs) {
+        this.currentTimeMs = nextTimeMs;
+      }
       this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
         this.#syncPlayheadToAudioContext(target, startMs);
       });

package/src/gui/EFScrubber.ts

@@ -0,0 +1,145 @@
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import { ref } from "lit/directives/ref.js";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+import { efContext } from "./efContext.ts";
+import { playingContext } from "./playingContext.ts";
+
+@customElement("ef-scrubber")
+export class EFScrubber extends LitElement {
+  static styles = [
+    css`
+    :host {
+      --ef-scrubber-height: 4px;
+      --ef-scrubber-background: rgb(209 213 219);
+      --ef-scrubber-progress-color: rgb(37 99 235);
+      --ef-scrubber-handle-size: 12px;
+      display: block;
+      width: 100%;
+    }
+    
+    .scrubber {
+      width: 100%;
+      height: var(--ef-scrubber-height);
+      background: var(--ef-scrubber-background);
+      position: relative;
+      cursor: pointer;
+      border-radius: 2px;
+    }
+
+    .progress {
+      position: absolute;
+      height: 100%;
+      background: var(--ef-scrubber-progress-color);
+      border-radius: 2px;
+    }
+
+    .handle {
+      position: absolute;
+      width: var(--ef-scrubber-handle-size);
+      height: var(--ef-scrubber-handle-size);
+      background: var(--ef-scrubber-progress-color);
+      border-radius: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      cursor: grab;
+    }
+
+    /* Add CSS Shadow Parts */
+    ::part(scrubber) { }
+    ::part(progress) { }
+    ::part(handle) { }
+    `,
+  ];
+
+  @consume({ context: efContext, subscribe: true })
+  context?: ContextMixinInterface | null;
+
+  @consume({ context: playingContext, subscribe: true })
+  playing = false;
+
+  @state()
+  private lastTimeUpdateProgress = 0;
+
+  @state()
+  private scrubProgress = 0;
+
+  @state()
+  private isDragging = false;
+
+  private scrubberRef?: HTMLElement;
+
+  private updateProgress(e: MouseEvent) {
+    if (!this.context || !this.scrubberRef) return;
+
+    const rect = this.scrubberRef.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const progress = Math.max(0, Math.min(1, x / rect.width));
+
+    this.scrubProgress = progress;
+    this.context.currentTimeMs =
+      progress * (this.context.targetTimegroup?.durationMs ?? 0);
+  }
+
+  private boundHandleMouseDown = (e: MouseEvent) => {
+    this.isDragging = true;
+    e.preventDefault();
+    this.updateProgress(e);
+  };
+
+  private boundHandleMouseMove = (e: MouseEvent) => {
+    if (this.isDragging) {
+      this.updateProgress(e);
+    }
+  };
+
+  private boundHandleMouseUp = () => {
+    this.isDragging = false;
+  };
+
+  render() {
+    const displayProgress = this.isDragging
+      ? this.scrubProgress
+      : this.lastTimeUpdateProgress;
+
+    return html`
+      <div 
+        ${ref((el) => {
+          this.scrubberRef = el as HTMLElement;
+        })}
+        part="scrubber"
+        class="scrubber"
+        @mousedown=${this.boundHandleMouseDown}
+      >
+        <div class="progress" style="width: ${displayProgress * 100}%"></div>
+        <div class="handle" style="left: ${displayProgress * 100}%"></div>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("mouseup", this.boundHandleMouseUp);
+    window.addEventListener("mousemove", this.boundHandleMouseMove);
+
+    if (this.context) {
+      this.context.addEventListener("timeupdate", (e: Event) => {
+        this.lastTimeUpdateProgress = (e as CustomEvent).detail.progress;
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("mouseup", this.boundHandleMouseUp);
+    window.removeEventListener("mousemove", this.boundHandleMouseMove);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-scrubber": EFScrubber;
+  }
+}

package/src/gui/EFTimeDisplay.ts

@@ -0,0 +1,81 @@
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+import { efContext } from "./efContext.ts";
+
+@customElement("ef-time-display")
+export class EFTimeDisplay extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--ef-font-family, system-ui);
+      font-size: var(--ef-font-size-xs, 0.75rem);
+      color: var(--ef-text-color, rgb(75 85 99));
+      white-space: nowrap;
+    }
+  `;
+
+  @consume({ context: efContext, subscribe: true })
+  context?: ContextMixinInterface | null;
+
+  private _onTimeUpdate = () => {
+    this.requestUpdate();
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.context?.addEventListener(
+      "timeupdate",
+      this._onTimeUpdate as EventListener,
+    );
+  }
+
+  protected updated(changedProperties: Map<PropertyKey, unknown>): void {
+    if (changedProperties.has("context")) {
+      // Clean up old listener
+      const oldContext = changedProperties.get(
+        "context",
+      ) as ContextMixinInterface | null;
+      oldContext?.removeEventListener(
+        "timeupdate",
+        this._onTimeUpdate as EventListener,
+      );
+
+      // Add new listener
+      this.context?.addEventListener(
+        "timeupdate",
+        this._onTimeUpdate as EventListener,
+      );
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.context?.removeEventListener("timeupdate", this._onTimeUpdate);
+    super.disconnectedCallback();
+  }
+
+  private formatTime(ms: number): string {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+
+  render() {
+    const currentTime = this.context?.currentTimeMs ?? 0;
+    const totalTime = this.context?.targetTimegroup?.durationMs ?? 0;
+
+    return html`
+      <span part="time">
+        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-time-display": EFTimeDisplay;
+  }
+}

package/src/gui/EFTogglePlay.ts

@@ -1,9 +1,10 @@
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 import type { ContextMixinInterface } from "./ContextMixin.ts";
 import { efContext } from "./efContext.ts";
+import { playingContext } from "./playingContext.ts";
 
 @customElement("ef-toggle-play")
 export class EFTogglePlay extends LitElement {
@@ -19,41 +20,40 @@ export class EFTogglePlay extends LitElement {
   @consume({ context: efContext, subscribe: true })
   context?: ContextMixinInterface | null;
 
+  @consume({ context: playingContext, subscribe: true })
+  playing = false;
+
   @property({ type: String })
   play = '<button class="text-2xl cursor-pointer">▶️</button>';
 
   @property({ type: String })
   pause = '<button class="text-2xl cursor-pointer">⏸️</button>';
 
-  @state()
-  playing = false;
-
   render() {
     return html`
       <div
-      @click=${() => {
-        if (this.context) {
-          if (this.context.playing) {
-            this.context.pause();
-            this.playing = false;
-          } else {
-            this.context.play();
-            this.playing = true;
+        @click=${() => {
+          if (this.context) {
+            if (this.playing) {
+              this.context.pause();
+            } else {
+              this.context.play();
+            }
           }
+        }}
+      >
+        ${
+          this.playing
+            ? html`<slot name="pause"></slot>`
+            : html`<slot name="play"></slot>`
         }
-      }}>
-    ${
-      this.playing
-        ? html`<slot name="play"></slot>`
-        : html`<slot name="pause"></slot>`
-    }
-    </div>`;
+      </div>
+    `;
   }
 
   togglePlay() {
-    this.requestUpdate();
     if (this.context) {
-      if (this.context.playing) {
+      if (this.playing) {
         this.context.pause();
       } else {
         this.context.play();

package/src/gui/EFWorkbench.ts

@@ -1,12 +1,9 @@
-import { LitElement, html, css, type PropertyValueMap } from "lit";
-import { TaskStatus } from "@lit/task";
+import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, eventOptions } from "lit/decorators.js";
-import { ref, createRef } from "lit/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
-import { deepGetTemporalElements } from "../elements/EFTemporal.ts";
-import { TWMixin } from "./TWMixin.ts";
-import { shallowGetTimegroups } from "../elements/EFTimegroup.ts";
 import { ContextMixin } from "./ContextMixin.ts";
+import { TWMixin } from "./TWMixin.ts";
 
 @customElement("ef-workbench")
 export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
@@ -96,36 +93,6 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
       </div>
     `;
   }
-
-  async stepThrough() {
-    const stepDurationMs = 1000 / 30;
-    const timegroups = shallowGetTimegroups(this);
-    const firstGroup = timegroups[0];
-    if (!firstGroup) {
-      throw new Error("No temporal elements found");
-    }
-    firstGroup.currentTimeMs = 0;
-
-    const temporals = deepGetTemporalElements(this);
-    const frameCount = Math.ceil(firstGroup.durationMs / stepDurationMs);
-
-    const busyTasks = temporals
-      .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
-      .map((temporal) => temporal.frameTask);
-
-    await Promise.all(busyTasks.map((task) => task.taskComplete));
-
-    for (let i = 0; i < frameCount; i++) {
-      firstGroup.currentTimeMs = i * stepDurationMs;
-      await new Promise<void>(queueMicrotask);
-      const busyTasks = temporals
-        .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
-        .map((temporal) => temporal.frameTask);
-
-      await Promise.all(busyTasks.map((task) => task.taskComplete));
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-    }
-  }
 }
 
 declare global {