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

package/src/elements/TargetController.browsertest.ts

@@ -1,230 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { afterEach, describe, expect, test } from "vitest";
-import { EFTargetable, TargetController } from "./TargetController.ts";
-
-let id = 0;
-
-const nextId = () => {
-  return `targetable-test-${id++}`;
-};
-
-@customElement("targetable-test")
-class TargetableTest extends EFTargetable(LitElement) {
-  @property()
-  value = "initial";
-
-  render() {
-    return html`<div>${this.value}</div>`;
-  }
-}
-
-@customElement("targeter-test")
-class TargeterTest extends LitElement {
-  // @ts-expect-error this controller is needed, but never referenced
-  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects
-  private targetController: TargetController = new TargetController(this);
-
-  @state()
-  targetElement: Element | null = null;
-
-  @property()
-  target = "";
-
-  render() {
-    const target = this.targetElement;
-    return html`
-      <div>
-        ${target ? html`Found: ${target.tagName}` : html`Finding target...`}
-      </div>
-    `;
-  }
-}
-
-describe("target", () => {
-  afterEach(() => {
-    // Clean up all test elements from the document body
-    document.body.innerHTML = "";
-  });
-
-  test("should be able to get the target element", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id = nextId();
-    target.id = id;
-    element.target = id;
-
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-  });
-
-  test("should update when document changes", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(element);
-
-    const id = nextId();
-    element.target = id;
-
-    expect(element.targetElement).toBe(null);
-
-    target.id = id;
-    document.body.appendChild(target);
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-  });
-
-  test("should update when attribute changes", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(element);
-    document.body.appendChild(target);
-
-    const id = nextId();
-    target.id = id;
-    element.target = id;
-
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-
-    target.id = nextId();
-    await element.updateComplete;
-    expect(element.targetElement).toBe(null);
-  });
-
-  test("should update when target is set before id exists", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id = nextId();
-    element.target = id;
-    expect(element.targetElement).toBe(null);
-
-    target.id = id;
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-  });
-
-  test("should update when target changes to match existing id", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id = nextId();
-    target.id = id;
-    expect(element.targetElement).toBe(null);
-
-    element.target = id;
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-  });
-
-  test("should handle target being cleared", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id = nextId();
-    target.id = id;
-    element.target = id;
-
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-
-    element.target = "";
-    await element.updateComplete;
-    expect(element.targetElement).toBe(null);
-  });
-
-  test("should handle multiple elements targeting the same id", async () => {
-    const target = document.createElement("targetable-test");
-    const element1 = document.createElement("targeter-test");
-    const element2 = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element1);
-    document.body.appendChild(element2);
-
-    const id = nextId();
-    target.id = id;
-    element1.target = id;
-    element2.target = id;
-
-    await Promise.all([element1.updateComplete, element2.updateComplete]);
-    expect(element1.targetElement).toBe(target);
-    expect(element2.targetElement).toBe(target);
-  });
-
-  test("should handle element removal from DOM", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id = nextId();
-    target.id = id;
-    element.target = id;
-
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-
-    document.body.removeChild(target);
-    await element.updateComplete;
-    expect(element.targetElement).toBe(null);
-  });
-
-  test("should handle rapid target id changes", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id1 = nextId();
-    const id2 = nextId();
-    const id3 = nextId();
-
-    target.id = id1;
-    element.target = id1;
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-
-    target.id = id2;
-    target.id = id3; // Immediately change again
-    await element.updateComplete;
-    expect(element.targetElement).toBe(null);
-  });
-
-  test("should not trigger unnecessary updates when setting same id multiple times", async () => {
-    const target = document.createElement("targetable-test");
-    const element = document.createElement("targeter-test");
-    document.body.appendChild(target);
-    document.body.appendChild(element);
-
-    const id = nextId();
-    target.id = id;
-    element.target = id;
-
-    await element.updateComplete;
-    expect(element.targetElement).toBe(target);
-
-    // Set the same ID again
-    target.id = id;
-    await element.updateComplete;
-
-    // The target element should remain stable
-    expect(element.targetElement).toBe(target);
-  });
-});
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "targetable-test": TargetableTest & Element;
-    "targeter-test": TargeterTest & Element;
-  }
-}

package/src/elements/TargetController.ts

@@ -1,224 +0,0 @@
-import { LitElement, type ReactiveController } from "lit";
-
-type Constructor<T = {}> = new (...args: any[]) => T;
-
-// Symbol to identify elements that can be targeted
-const EF_TARGETABLE = Symbol("EF_TARGETABLE");
-
-class TargetRegistry {
-  private idMap = new Map<string, LitElement>();
-  private callbacks = new Map<
-    string,
-    Set<(target: LitElement | undefined) => void>
-  >();
-
-  subscribe(id: string, callback: (target: LitElement | undefined) => void) {
-    this.callbacks.set(id, this.callbacks.get(id) ?? new Set());
-    this.callbacks.get(id)?.add(callback);
-  }
-
-  unsubscribe(
-    id: string | null,
-    callback: (target: LitElement | undefined) => void,
-  ) {
-    if (id === null) {
-      return;
-    }
-    this.callbacks.get(id)?.delete(callback);
-    if (this.callbacks.get(id)?.size === 0) {
-      this.callbacks.delete(id);
-    }
-  }
-
-  get(id: string) {
-    return this.idMap.get(id);
-  }
-
-  register(id: string, target: LitElement) {
-    this.idMap.set(id, target);
-    for (const callback of this.callbacks.get(id) ?? []) {
-      callback(target);
-    }
-  }
-
-  unregister(id: string, target: LitElement) {
-    if (this.idMap.get(id) !== target) {
-      // Avoid unregistering a target that is not the current target
-      return;
-    }
-    for (const callback of this.callbacks.get(id) ?? []) {
-      callback(undefined);
-    }
-    this.idMap.delete(id);
-    this.callbacks.delete(id);
-  }
-}
-
-// Map of root nodes to their target registries
-const documentRegistries = new WeakMap<Node, TargetRegistry>();
-
-const getRegistry = (root: Node) => {
-  let registry = documentRegistries.get(root);
-  if (!registry) {
-    registry = new TargetRegistry();
-    documentRegistries.set(root, registry);
-  }
-  return registry;
-};
-
-export declare class TargetableMixinInterface {
-  id: string;
-}
-
-export const isEFTargetable = (obj: any): obj is TargetableMixinInterface =>
-  obj[EF_TARGETABLE];
-
-export const EFTargetable = <T extends Constructor<LitElement>>(
-  superClass: T,
-) => {
-  class TargetableElement extends superClass {
-    #registry: TargetRegistry | null = null;
-
-    static get observedAttributes(): string[] {
-      // Get parent's observed attributes
-      const parentAttributes = (superClass as any).observedAttributes || [];
-      // Add 'id' if not already present
-      return [...new Set([...parentAttributes, "id"])];
-    }
-
-    private updateRegistry(oldValue: string, newValue: string) {
-      if (!this.#registry) return;
-      if (oldValue === newValue) return;
-
-      if (oldValue) {
-        this.#registry.unregister(oldValue, this);
-      }
-      if (newValue) {
-        this.#registry.register(newValue, this);
-      }
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.#registry = getRegistry(this.getRootNode());
-      const initialId = this.getAttribute("id");
-      if (initialId) {
-        this.updateRegistry("", initialId);
-      }
-    }
-
-    attributeChangedCallback(
-      name: string,
-      old: string | null,
-      value: string | null,
-    ) {
-      super.attributeChangedCallback(name, old, value);
-      if (name === "id") {
-        this.updateRegistry(old ?? "", value ?? "");
-      }
-    }
-
-    disconnectedCallback() {
-      if (this.#registry) {
-        this.updateRegistry(this.id, "");
-        this.#registry = null;
-      }
-      super.disconnectedCallback();
-    }
-  }
-
-  Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {
-    value: true,
-  });
-
-  return TargetableElement as T;
-};
-
-class TargetUpdateController implements ReactiveController {
-  constructor(private host: LitElement) {}
-
-  hostConnected() {
-    this.host.requestUpdate();
-  }
-
-  hostDisconnected() {
-    this.host.requestUpdate();
-  }
-
-  hostUpdate() {
-    this.host.requestUpdate();
-  }
-}
-
-export class TargetController implements ReactiveController {
-  private host: LitElement & { targetElement: Element | null; target: string };
-  private targetController: ReactiveController | null = null;
-  private currentTargetString: string | null = null;
-
-  constructor(
-    host: LitElement & { targetElement: Element | null; target: string },
-  ) {
-    this.host = host;
-    this.host.addController(this);
-    this.currentTargetString = this.host.target;
-    if (this.currentTargetString) {
-      this.registry.subscribe(this.currentTargetString, this.registryCallback);
-    }
-  }
-
-  private registryCallback = (target: LitElement | undefined) => {
-    this.host.targetElement = target ?? null;
-  };
-
-  private updateTarget() {
-    const newTarget = this.registry.get(this.host.target);
-    if (this.host.targetElement !== newTarget) {
-      this.disconnectFromTarget();
-      this.host.targetElement = newTarget ?? (null as Element | null);
-      this.connectToTarget();
-      this.host.requestUpdate("targetElement");
-    }
-  }
-
-  private connectToTarget() {
-    if (this.host.targetElement instanceof LitElement) {
-      this.targetController = new TargetUpdateController(this.host);
-      this.host.targetElement.addController(this.targetController);
-    }
-  }
-
-  private disconnectFromTarget() {
-    if (
-      this.host.targetElement instanceof LitElement &&
-      this.targetController
-    ) {
-      this.host.targetElement.removeController(this.targetController);
-      this.targetController = null;
-    }
-  }
-
-  private get registry() {
-    const root = this.host.getRootNode();
-    return getRegistry(root);
-  }
-
-  hostDisconnected() {
-    this.disconnectFromTarget();
-  }
-
-  hostConnected() {
-    this.updateTarget();
-  }
-
-  hostUpdate() {
-    if (this.currentTargetString !== this.host.target) {
-      this.registry.unsubscribe(
-        this.currentTargetString,
-        this.registryCallback,
-      );
-      this.registry.subscribe(this.host.target, this.registryCallback);
-      this.updateTarget();
-      this.currentTargetString = this.host.target;
-    }
-  }
-}

package/src/elements/TimegroupController.ts

@@ -1,26 +0,0 @@
-import type { LitElement, ReactiveController } from "lit";
-import type { EFTimegroup } from "./EFTimegroup.js";
-
-export class TimegroupController implements ReactiveController {
-  constructor(
-    private host: EFTimegroup,
-    private child: { currentTimeMs: number; startTimeMs?: number } & LitElement,
-  ) {
-    this.host.addController(this);
-  }
-
-  remove() {
-    this.host.removeController(this);
-  }
-
-  hostDisconnected(): void {
-    this.host.removeController(this);
-  }
-
-  hostUpdated(): void {
-    this.child.requestUpdate();
-    const newChildTimeMs =
-      this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
-    this.child.currentTimeMs = newChildTimeMs;
-  }
-}

package/src/elements/durationConverter.ts

@@ -1,35 +0,0 @@
-import { parseTimeToMs } from "./parseTimeToMs.js";
-
-export const durationConverter = {
-  fromAttribute: (value: string | null) =>
-    value === null ? null : parseTimeToMs(value),
-  toAttribute: (value: number | null) => (value === null ? null : `${value}s`),
-};
-
-const positiveDurationConverter = (error: string) => {
-  return {
-    fromAttribute: (value: string | null): number | null => {
-      if (value === null) {
-        return null;
-      }
-      if (value.startsWith("-")) {
-        throw new Error(error);
-      }
-      return parseTimeToMs(value);
-    },
-    toAttribute: (value: number | null) =>
-      value === null ? null : `${value}s`,
-  };
-};
-
-export const trimDurationConverter = positiveDurationConverter(
-  "Trimstart & trimend must be a positive value in milliseconds or seconds (1s, 1000ms)",
-);
-
-export const imageDurationConverter = positiveDurationConverter(
-  "Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)",
-);
-
-export const sourceDurationConverter = positiveDurationConverter(
-  "Sourcein & sourceout must be a positive value in milliseconds or seconds (1s, 1000ms)",
-);

package/src/elements/parseTimeToMs.ts

@@ -1,9 +0,0 @@
-export const parseTimeToMs = (time: string) => {
-  if (time.endsWith("ms")) {
-    return Number.parseFloat(time);
-  }
-  if (time.endsWith("s")) {
-    return Number.parseFloat(time) * 1000;
-  }
-  throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
-};

package/src/elements/printTaskStatus.ts

@@ -1,16 +0,0 @@
-import { TaskStatus } from "@lit/task";
-
-export const printTaskStatus = (status: TaskStatus) => {
-  switch (status) {
-    case TaskStatus.INITIAL:
-      return "INITIAL";
-    case TaskStatus.ERROR:
-      return "ERROR";
-    case TaskStatus.PENDING:
-      return "PENDING";
-    case TaskStatus.COMPLETE:
-      return "COMPLETE";
-    default:
-      return "UNKNOWN";
-  }
-};

package/src/elements/renderTemporalAudio.ts

@@ -1,108 +0,0 @@
-import type { EFMedia } from "./EFMedia.js";
-
-interface TemporalAudioHost {
-  startTimeMs: number;
-  endTimeMs: number;
-  durationMs: number;
-  getMediaElements(): EFMedia[];
-  waitForMediaDurations?(): Promise<void>;
-}
-
-export async function renderTemporalAudio(
-  host: TemporalAudioHost,
-  fromMs: number,
-  toMs: number,
-): Promise<AudioBuffer> {
-  const durationMs = toMs - fromMs;
-  const duration = durationMs / 1000;
-  const exactSamples = 48000 * duration;
-  const aacFrames = exactSamples / 1024;
-  const alignedFrames = Math.round(aacFrames);
-  const contextSize = alignedFrames * 1024;
-
-  if (contextSize <= 0) {
-    throw new Error(
-      `Duration must be greater than 0 when rendering audio. ${contextSize}ms`,
-    );
-  }
-
-  const audioContext = new OfflineAudioContext(2, contextSize, 48000);
-
-  if (host.waitForMediaDurations) {
-    await host.waitForMediaDurations();
-  }
-
-  const abortController = new AbortController();
-
-  await Promise.all(
-    host.getMediaElements().map(async (mediaElement) => {
-      if (mediaElement.mute) {
-        return;
-      }
-
-      const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-      const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-      const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-      if (!mediaOverlaps) {
-        return;
-      }
-
-      const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
-      const mediaLocalToMs = Math.min(
-        mediaElement.endTimeMs - mediaElement.startTimeMs,
-        toMs - mediaElement.startTimeMs,
-      );
-
-      if (mediaLocalFromMs >= mediaLocalToMs) {
-        return;
-      }
-
-      const sourceInMs =
-        mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
-      const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
-      const mediaSourceToMs = mediaLocalToMs + sourceInMs;
-
-      const audio = await mediaElement.fetchAudioSpanningTime(
-        mediaSourceFromMs,
-        mediaSourceToMs,
-        abortController.signal,
-      );
-      if (!audio) {
-        return;
-      }
-
-      const bufferSource = audioContext.createBufferSource();
-      bufferSource.buffer = await audioContext.decodeAudioData(
-        await audio.blob.arrayBuffer(),
-      );
-      bufferSource.connect(audioContext.destination);
-
-      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-
-      const requestedSourceFromMs = mediaSourceFromMs;
-      const actualSourceStartMs = audio.startMs;
-      const offsetInBufferMs = requestedSourceFromMs - actualSourceStartMs;
-
-      const safeOffsetMs = Math.max(0, offsetInBufferMs);
-
-      const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;
-      const availableAudioMs = audio.endMs - audio.startMs;
-      const actualDurationMs = Math.min(
-        requestedDurationMs,
-        availableAudioMs - safeOffsetMs,
-      );
-
-      if (actualDurationMs <= 0) {
-        return;
-      }
-
-      bufferSource.start(
-        ctxStartMs / 1000,
-        safeOffsetMs / 1000,
-        actualDurationMs / 1000,
-      );
-    }),
-  );
-
-  return audioContext.startRendering();
-}