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

package/dist/elements/TargetController.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, ReactiveController } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class TargetableMixinInterface {
+    id: string;
+}
+export declare const isEFTargetable: (obj: any) => obj is TargetableMixinInterface;
+export declare const EFTargetable: <T extends Constructor<LitElement>>(superClass: T) => T;
+export declare class TargetController implements ReactiveController {
+    private host;
+    private targetController;
+    private currentTargetString;
+    constructor(host: LitElement & {
+        targetElement: Element | null;
+        target: string;
+    });
+    private registryCallback;
+    private updateTarget;
+    private connectToTarget;
+    private disconnectFromTarget;
+    private get registry();
+    hostDisconnected(): void;
+    hostConnected(): void;
+    hostUpdate(): void;
+}
+export {};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.15.0-beta.1",
+  "version": "0.15.0-beta.3",
   "description": "",
   "exports": {
     ".": {
@@ -22,7 +22,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.15.0-beta.1",
+    "@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/EFMedia.ts

@@ -14,6 +14,7 @@ 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");
 
@@ -43,15 +44,14 @@ class LRUCache<K, V> {
     } else if (this.cache.size >= this.maxSize) {
       // Remove oldest entry (first item in map)
       const firstKey = this.cache.keys().next().value;
-      this.cache.delete(firstKey);
+      if (firstKey) {
+        this.cache.delete(firstKey);
+      }
     }
     this.cache.set(key, value);
   }
 }
 
-// Cache individual frame analyses
-const frequencyDataCache = new LRUCache<string, Uint8Array>(100);
-
 export const deepGetMediaElements = (
   element: Element,
   medias: EFMedia[] = [],
@@ -66,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 {
@@ -319,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;
@@ -329,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
@@ -344,13 +347,9 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         this.endTimeMs < timelineTimeMs
       ) {
         this.style.display = "none";
-        // this.style.zIndex = "";
-        // this.style.opacity = "0";
         return;
       }
       this.style.display = "";
-      // this.style.zIndex = "100000";
-      // this.style.opacity = "";
       const animations = this.getAnimations({ subtree: true });
 
       this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
@@ -617,18 +616,31 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     return weights;
   }
 
+  #frequencyDataCache = new LRUCache<string, Uint8Array>(100);
+
   frequencyDataTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () =>
-      [this.audioBufferTask.status, this.trimAdjustedOwnCurrentTimeMs] as const,
+      [
+        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.trimAdjustedOwnCurrentTimeMs <= 0) return null;
+      if (this.currentSourceTimeMs <= 0) return null;
 
-      const currentTimeMs = this.trimAdjustedOwnCurrentTimeMs;
+      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) => {
@@ -639,10 +651,10 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           );
 
           // Cache key for this specific frame
-          const cacheKey = `${startOffsetMs},${startTime}`;
+          const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
 
           // Check cache for this specific frame
-          const cachedFrame = frequencyDataCache.get(cacheKey);
+          const cachedFrame = this.#frequencyDataCache.get(cacheKey);
           if (cachedFrame) {
             return cachedFrame;
           }
@@ -667,11 +679,11 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
           try {
             await audioContext.startRendering();
-            const frameData = new Uint8Array(analyser.frequencyBinCount);
+            const frameData = new Uint8Array(this.fftSize / 2);
             analyser.getByteFrequencyData(frameData);
 
             // Cache this frame's analysis
-            frequencyDataCache.set(cacheKey, frameData);
+            this.#frequencyDataCache.set(cacheKey, frameData);
             return frameData;
           } finally {
             audioBufferSource.disconnect();
@@ -700,12 +712,19 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
       // Apply frequency weights using instance FREQ_WEIGHTS
       smoothedData.forEach((value, i) => {
-        // biome-ignore lint/style/noNonNullAssertion: Trusting FREQ_WEIGHTS to be the correct length
+        // 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));
       });
 
-      return smoothedData;
+      // 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

@@ -151,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;
@@ -567,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(
@@ -581,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(
@@ -632,17 +636,13 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       ) {
         const timelineTimeMs = (this.rootTimegroup ?? this).ownCurrentTimeMs;
         if (
-          this.startTimeMs >= timelineTimeMs ||
-          this.endTimeMs <= timelineTimeMs
+          this.startTimeMs > timelineTimeMs ||
+          this.endTimeMs < timelineTimeMs
         ) {
           this.style.display = "none";
-          // this.style.zIndex = "";
-          // this.style.opacity = "0";
           return;
         }
         this.style.display = "";
-        // this.style.zIndex = "100000";
-        // this.style.opacity = "";
       }
     }
   }

package/src/elements/EFTimegroup.ts

@@ -53,7 +53,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     type: String,
     attribute: "mode",
   })
-  mode: "fixed" | "sequence" | "contain" = "sequence";
+  mode: "fixed" | "sequence" | "contain" = "contain";
 
   @property({
     type: Number,
@@ -67,7 +67,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   #resizeObserver?: ResizeObserver;
 
-  @property({ type: Number })
+  @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
     this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1000));
     try {
@@ -227,10 +227,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
    * in calculations and it was not clear why.
    */
   async waitForMediaDurations() {
+    const mediaElements = deepGetMediaElements(this);
     return await Promise.all(
-      deepGetMediaElements(this).map(
-        (media) => media.initSegmentsLoader.taskComplete,
-      ),
+      mediaElements.map((m) => m.trackFragmentIndexLoader.taskComplete),
     );
   }
 
@@ -258,13 +257,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
     if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
       this.style.display = "none";
-      // this.style.zIndex = "";
-      // this.style.opacity = "0";
       return;
     }
     this.style.display = "";
-    // this.style.zIndex = "100000";
-    // this.style.opacity = "";
     const animations = this.getAnimations({ subtree: true });
     this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
     this.style.setProperty(