@editframe/elements 0.14.0-beta.3 → 0.15.0-beta.3

package/dist/elements/TargetController.js

@@ -0,0 +1,164 @@
+import { LitElement } from "lit";
+const EF_TARGETABLE = Symbol("EF_TARGETABLE");
+class TargetRegistry {
+  constructor() {
+    this.idMap = /* @__PURE__ */ new Map();
+    this.callbacks = /* @__PURE__ */ new Map();
+  }
+  subscribe(id, callback) {
+    this.callbacks.set(id, this.callbacks.get(id) ?? /* @__PURE__ */ new Set());
+    this.callbacks.get(id)?.add(callback);
+  }
+  unsubscribe(id, callback) {
+    if (id === null) {
+      return;
+    }
+    this.callbacks.get(id)?.delete(callback);
+    if (this.callbacks.get(id)?.size === 0) {
+      this.callbacks.delete(id);
+    }
+  }
+  get(id) {
+    return this.idMap.get(id);
+  }
+  register(id, target) {
+    this.idMap.set(id, target);
+    for (const callback of this.callbacks.get(id) ?? []) {
+      callback(target);
+    }
+  }
+  unregister(id) {
+    for (const callback of this.callbacks.get(id) ?? []) {
+      callback(void 0);
+    }
+    this.idMap.delete(id);
+    this.callbacks.delete(id);
+  }
+}
+const documentRegistries = /* @__PURE__ */ new WeakMap();
+const getRegistry = (root) => {
+  let registry = documentRegistries.get(root);
+  if (!registry) {
+    registry = new TargetRegistry();
+    documentRegistries.set(root, registry);
+  }
+  return registry;
+};
+const EFTargetable = (superClass) => {
+  class TargetableElement extends superClass {
+    #registry = null;
+    static get observedAttributes() {
+      const parentAttributes = superClass.observedAttributes || [];
+      return [.../* @__PURE__ */ new Set([...parentAttributes, "id"])];
+    }
+    updateRegistry(oldValue, newValue) {
+      if (!this.#registry) return;
+      if (oldValue === newValue) return;
+      if (oldValue) {
+        this.#registry.unregister(oldValue);
+      }
+      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, old, value) {
+      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;
+};
+class TargetUpdateController {
+  constructor(host) {
+    this.host = host;
+  }
+  hostConnected() {
+    this.host.requestUpdate();
+  }
+  hostDisconnected() {
+    this.host.requestUpdate();
+  }
+  hostUpdate() {
+    this.host.requestUpdate();
+  }
+}
+class TargetController {
+  constructor(host) {
+    this.targetController = null;
+    this.currentTargetString = null;
+    this.registryCallback = (target) => {
+      this.host.targetElement = target ?? null;
+    };
+    this.host = host;
+    this.host.addController(this);
+    this.currentTargetString = this.host.target;
+    if (this.currentTargetString) {
+      this.registry.subscribe(this.currentTargetString, this.registryCallback);
+    }
+  }
+  updateTarget() {
+    const newTarget = this.registry.get(this.host.target);
+    if (this.host.targetElement !== newTarget) {
+      this.disconnectFromTarget();
+      this.host.targetElement = newTarget ?? null;
+      this.connectToTarget();
+    }
+  }
+  connectToTarget() {
+    if (this.host.targetElement instanceof LitElement) {
+      this.targetController = new TargetUpdateController(this.host);
+      this.host.targetElement.addController(this.targetController);
+    }
+  }
+  disconnectFromTarget() {
+    if (this.host.targetElement instanceof LitElement && this.targetController) {
+      this.host.targetElement.removeController(this.targetController);
+      this.targetController = null;
+    }
+  }
+  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;
+    }
+  }
+}
+export {
+  EFTargetable,
+  TargetController
+};

package/dist/elements/TargetController.test.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+declare const TargetableTest_base: typeof LitElement;
+declare class TargetableTest extends TargetableTest_base {
+    value: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare class TargeterTest extends LitElement {
+    private targetController;
+    targetElement: Element | null;
+    target: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "targetable-test": TargetableTest & Element;
+        "targeter-test": TargeterTest & Element;
+    }
+}
+export {};

package/dist/gui/EFPreview.d.ts

@@ -1,9 +1,9 @@
 import { LitElement } from 'lit';
 declare const EFPreview_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 export declare class EFPreview extends EFPreview_base {
+    static styles: import('lit').CSSResult[];
     focusedElement?: HTMLElement;
     constructor();
-    static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/gui/EFPreview.js

@@ -39,6 +39,7 @@ let EFPreview = class extends ContextMixin(TWMixin(LitElement)) {
 EFPreview.styles = [
   css`
       :host {
+        position: relative;
         display: block;
         cursor: crosshair;
       }

package/dist/gui/EFWorkbench.js

@@ -62,7 +62,7 @@ let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
           focusOverlay.style.display = "block";
           const rect = this.focusedElement.getBoundingClientRect();
           Object.assign(focusOverlay.style, {
-            position: "absolute",
+            position: "fixed",
             top: `${rect.top}px`,
             left: `${rect.left}px`,
             width: `${rect.width}px`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.14.0-beta.3",
+  "version": "0.15.0-beta.3",
   "description": "",
   "exports": {
     ".": {
@@ -21,7 +21,8 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.14.0-beta.3",
+    "@bramus/style-observer": "^1.3.0",
+    "@editframe/assets": "0.15.0-beta.3",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFAudio.ts

@@ -1,6 +1,6 @@
 import { Task } from "@lit/task";
 import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EFMedia } from "./EFMedia.js";
 
@@ -8,9 +8,6 @@ import { EFMedia } from "./EFMedia.js";
 export class EFAudio extends EFMedia {
   audioElementRef = createRef<HTMLAudioElement>();
 
-  @property({ type: String })
-  src = "";
-
   render() {
     return html`<audio ${ref(this.audioElementRef)}></audio>`;
   }

package/src/elements/EFCaptions.ts

@@ -373,7 +373,7 @@ export class EFCaptions extends EFSourceMixin(
       return;
     }
 
-    const currentTimeMs = this.targetElement.trimAdjustedOwnCurrentTimeMs;
+    const currentTimeMs = this.targetElement.currentSourceTimeMs;
     const currentTimeSec = currentTimeMs / 1000;
 
     // Find the current word from word_segments

package/src/elements/EFImage.browsertest.ts

@@ -18,9 +18,9 @@ describe("EFImage", () => {
       const workbench = document.createElement("ef-workbench");
       const element = document.createElement("ef-image");
       workbench.appendChild(element);
-      element.assetId = "550e8400-e29b-41d4-a716-446655440000:example.jpg";
+      element.assetId = "550e8400-e29b-41d4-a716-446655440000";
       expect(element.assetPath()).toBe(
-        "editframe://api/v1/image_files/550e8400-e29b-41d4-a716-446655440000:example.jpg",
+        "editframe://api/v1/image_files/550e8400-e29b-41d4-a716-446655440000",
       );
     });
   });
@@ -46,4 +46,35 @@ describe("EFImage", () => {
       expect(image.assetPath()).toBe(`test:///api/v1/image_files/${id}`);
     });
   });
+
+  describe("hasOwnDuration", () => {
+    test("is false by default", () => {
+      const image = document.createElement("ef-image");
+      expect(image.hasOwnDuration).toBe(false);
+    });
+
+    test("is true when duration is set", () => {
+      const image = document.createElement("ef-image");
+      image.setAttribute("duration", "1s");
+      expect(image.hasOwnDuration).toBe(true);
+    });
+  });
+
+  describe("durationMs", () => {
+    test("Can be set on element directly", () => {
+      const image = document.createElement("ef-image");
+      image.src =
+        "https://editframe.dev/api/v1/image_files/550e8400-e29b-41d4-a716-446655440000";
+      image.duration = "1s";
+      expect(image.durationMs).toBe(1000);
+    });
+
+    test("Can be set through setAttribute", () => {
+      const image = document.createElement("ef-image");
+      image.src =
+        "https://editframe.dev/api/v1/image_files/550e8400-e29b-41d4-a716-446655440000";
+      image.setAttribute("duration", "1s");
+      expect(image.durationMs).toBe(1000);
+    });
+  });
 });

package/src/elements/EFImage.ts

@@ -5,12 +5,15 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
+import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 
 @customElement("ef-image")
-export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
-  assetType: "image_files",
-}) {
+export class EFImage extends EFTemporal(
+  EFSourceMixin(FetchMixin(LitElement), {
+    assetType: "image_files",
+  }),
+) {
   static styles = [
     css`
       :host {
@@ -52,6 +55,10 @@ export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
     return `/@ef-image/${this.src}`;
   }
 
+  get hasOwnDuration() {
+    return this.hasExplicitDuration;
+  }
+
   fetchImage = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () => [this.assetPath(), this.fetch] as const,

package/src/elements/EFMedia.ts

@@ -14,9 +14,44 @@ import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal, isEFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
+import { EFTargetable } from "./TargetController.ts";
 
 const log = debug("ef:elements:EFMedia");
 
+const freqWeightsCache = new Map<number, Float32Array>();
+
+class LRUCache<K, V> {
+  private cache = new Map<K, V>();
+  private readonly maxSize: number;
+
+  constructor(maxSize: number) {
+    this.maxSize = maxSize;
+  }
+
+  get(key: K): V | undefined {
+    const value = this.cache.get(key);
+    if (value) {
+      // Refresh position by removing and re-adding
+      this.cache.delete(key);
+      this.cache.set(key, value);
+    }
+    return value;
+  }
+
+  set(key: K, value: V): void {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      // Remove oldest entry (first item in map)
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+}
+
 export const deepGetMediaElements = (
   element: Element,
   medias: EFMedia[] = [],
@@ -31,9 +66,11 @@ export const deepGetMediaElements = (
   return medias;
 };
 
-export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
-  assetType: "isobmff_files",
-}) {
+export class EFMedia extends EFTargetable(
+  EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
+    assetType: "isobmff_files",
+  }),
+) {
   static styles = [
     css`
       :host {
@@ -284,7 +321,8 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     },
   });
 
-  @state() desiredSeekTimeMs = 0;
+  @state()
+  desiredSeekTimeMs = 0;
 
   protected async executeSeek(seekToMs: number) {
     this.desiredSeekTimeMs = seekToMs;
@@ -294,7 +332,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
     if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
+      this.executeSeek(this.currentSourceTimeMs);
     }
     // TODO: this is copied straight from EFTimegroup.ts
     // and should be refactored to be shared/reduce bad duplication of
@@ -312,7 +350,6 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         return;
       }
       this.style.display = "";
-
       const animations = this.getAnimations({ subtree: true });
 
       this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
@@ -546,4 +583,148 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         this.trimEndMs,
     };
   }
+
+  @property({ type: Number })
+  fftSize = 512; // Default FFT size
+
+  @property({ type: Number })
+  fftDecay = 8; // Default number of frames to analyze
+
+  private static readonly MIN_DB = -90;
+  private static readonly MAX_DB = -20;
+  private static readonly DECAY_WEIGHT = 0.7;
+
+  // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
+  get FREQ_WEIGHTS() {
+    if (freqWeightsCache.has(this.fftSize)) {
+      // biome-ignore lint/style/noNonNullAssertion: Will exist due to prior has check
+      return freqWeightsCache.get(this.fftSize)!;
+    }
+
+    const weights = new Float32Array(this.fftSize / 2).map((_, i) => {
+      const frequency = (i * 48000) / this.fftSize;
+      if (frequency < 60) return 0.3;
+      if (frequency < 250) return 0.4;
+      if (frequency < 500) return 0.6;
+      if (frequency < 2000) return 0.8;
+      if (frequency < 4000) return 1.2;
+      if (frequency < 8000) return 1.6;
+      return 2.0;
+    });
+
+    freqWeightsCache.set(this.fftSize, weights);
+    return weights;
+  }
+
+  #frequencyDataCache = new LRUCache<string, Uint8Array>(100);
+
+  frequencyDataTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    args: () =>
+      [
+        this.audioBufferTask.status,
+        this.currentSourceTimeMs,
+        this.fftSize, // Add fftSize to dependency array
+        this.fftDecay, // Add fftDecay to dependency array
+      ] as const,
+    task: async () => {
+      await this.audioBufferTask.taskComplete;
+      if (!this.audioBufferTask.value) return null;
+      if (this.currentSourceTimeMs <= 0) return null;
+
+      const currentTimeMs = this.currentSourceTimeMs;
+      const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
+      const audioBuffer = this.audioBufferTask.value.buffer;
+      const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
+
+      const cachedSmoothedData = this.#frequencyDataCache.get(smoothedKey);
+      if (cachedSmoothedData) {
+        return cachedSmoothedData;
+      }
+
+      const framesData = await Promise.all(
+        Array.from({ length: this.fftDecay }, async (_, i) => {
+          const frameOffset = i * (1000 / 30);
+          const startTime = Math.max(
+            0,
+            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
+          );
+
+          // Cache key for this specific frame
+          const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
+
+          // Check cache for this specific frame
+          const cachedFrame = this.#frequencyDataCache.get(cacheKey);
+          if (cachedFrame) {
+            return cachedFrame;
+          }
+
+          const audioContext = new OfflineAudioContext(
+            2,
+            48000 * (1 / 30),
+            48000,
+          );
+          const analyser = audioContext.createAnalyser();
+          analyser.fftSize = this.fftSize;
+          analyser.minDecibels = EFMedia.MIN_DB;
+          analyser.maxDecibels = EFMedia.MAX_DB;
+
+          const audioBufferSource = audioContext.createBufferSource();
+          audioBufferSource.buffer = audioBuffer;
+
+          audioBufferSource.connect(analyser);
+          analyser.connect(audioContext.destination);
+
+          audioBufferSource.start(0, startTime, 1 / 30);
+
+          try {
+            await audioContext.startRendering();
+            const frameData = new Uint8Array(this.fftSize / 2);
+            analyser.getByteFrequencyData(frameData);
+
+            // Cache this frame's analysis
+            this.#frequencyDataCache.set(cacheKey, frameData);
+            return frameData;
+          } finally {
+            audioBufferSource.disconnect();
+            analyser.disconnect();
+          }
+        }),
+      );
+
+      const frameLength = framesData[0]?.length ?? 0;
+
+      // Combine frames with decay
+      const smoothedData = new Uint8Array(frameLength);
+      for (let i = 0; i < frameLength; i++) {
+        let weightedSum = 0;
+        let weightSum = 0;
+
+        framesData.forEach((frame, frameIndex) => {
+          const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
+          // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
+          weightedSum += frame[i]! * decayWeight;
+          weightSum += decayWeight;
+        });
+
+        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
+      }
+
+      // Apply frequency weights using instance FREQ_WEIGHTS
+      smoothedData.forEach((value, i) => {
+        // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
+        const freqWeight = this.FREQ_WEIGHTS[i]!;
+        smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
+      });
+
+      // Only return the lower half of the frequency data
+      // The top half is zeroed out, which makes for aesthetically unpleasing waveforms
+      const slicedData = smoothedData.slice(
+        0,
+        Math.floor(smoothedData.length / 2),
+      );
+      this.#frequencyDataCache.set(smoothedKey, slicedData);
+      return slicedData;
+    },
+  });
 }

package/src/elements/EFTemporal.ts

@@ -1,5 +1,5 @@
 import { consume, createContext } from "@lit/context";
-import type { LitElement, ReactiveController } from "lit";
+import type { LitElement, PropertyValueMap, ReactiveController } from "lit";
 import { property, state } from "lit/decorators.js";
 import type { EFTimegroup } from "./EFTimegroup.js";
 
@@ -13,6 +13,10 @@ export const timegroupContext = createContext<EFTimegroup>(
 
 export declare class TemporalMixinInterface {
   get hasOwnDuration(): boolean;
+  /**
+   * Whether the element has a duration set as an attribute.
+   */
+  get hasExplicitDuration(): boolean;
 
   /**
    * Used to trim the start of the media.
@@ -147,18 +151,18 @@ export declare class TemporalMixinInterface {
    * elements.
    *
    * For example, if the media has a `sourcein` value of 10s, when `ownCurrentTimeMs` is 0s,
-   * `trimAdjustedOwnCurrentTimeMs` will be 10s.
+   * `currentSourceTimeMs` will be 10s.
    *
    *            sourcein=10s     sourceout=10s
    * /         /                /
    * |--------|=================|---------|
    *          ^
    *          |_
-   *            trimAdjustedOwnCurrentTimeMs === 10s
+   *            currentSourceTimeMs === 10s
    *          |_
    *            ownCurrentTimeMs === 0s
    */
-  get trimAdjustedOwnCurrentTimeMs(): number;
+  get currentSourceTimeMs(): number;
 
   set duration(value: string);
   get duration(): string;
@@ -461,6 +465,10 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return parent as EFTimegroup | undefined;
     }
 
+    get hasExplicitDuration() {
+      return this._durationMs !== undefined;
+    }
+
     get hasOwnDuration() {
       return false;
     }
@@ -559,6 +567,10 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return this.startTimeMs + this.durationMs;
     }
 
+    /**
+     * The current time of the element within itself.
+     * Compare with `currentTimeMs` to see the current time with respect to the root timegroup
+     */
     get ownCurrentTimeMs() {
       if (this.rootTimegroup) {
         return Math.min(
@@ -573,7 +585,7 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
      * Used to calculate the internal currentTimeMs of the element. This is useful
      * for mapping to internal media time codes for audio/video elements.
      */
-    get trimAdjustedOwnCurrentTimeMs() {
+    get currentSourceTimeMs() {
       if (this.rootTimegroup) {
         if (this.sourceInMs && this.sourceOutMs) {
           return Math.min(
@@ -613,6 +625,26 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
         }
       },
     });
+
+    protected updated(
+      changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+    ): void {
+      super.updated(changedProperties);
+      if (
+        changedProperties.has("currentTime") ||
+        changedProperties.has("ownCurrentTimeMs")
+      ) {
+        const timelineTimeMs = (this.rootTimegroup ?? this).ownCurrentTimeMs;
+        if (
+          this.startTimeMs > timelineTimeMs ||
+          this.endTimeMs < timelineTimeMs
+        ) {
+          this.style.display = "none";
+          return;
+        }
+        this.style.display = "";
+      }
+    }
   }
 
   Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {