@editframe/elements 0.5.0-beta.8 → 0.6.0-beta.1

package/{src/elements/EFTimegroup.ts → dist/packages/elements/src/elements/EFTimegroup.cjs}

@@ -1,65 +1,61 @@
-import { LitElement, html, css, PropertyValueMap } from "lit";
-import { provide } from "@lit/context";
-import { customElement, property } from "lit/decorators.js";
-import {
-  EFTemporal,
-  isEFTemporal,
-  shallowGetTemporalElements,
-  timegroupContext,
-} from "./EFTemporal";
-import { TimegroupController } from "./TimegroupController";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
-import { deepGetMediaElements } from "./EFMedia";
-import { Task } from "@lit/task";
-
-function audioBufferToFloat32(buffer: AudioBuffer) {
-  const numOfChan = buffer.numberOfChannels;
-  const length = buffer.length * numOfChan * 4; // 4 bytes per sample for 32-bit float
-  const resultBuffer = new ArrayBuffer(length);
-  const view = new DataView(resultBuffer);
-  const channels = [];
-
-  for (let i = 0; i < numOfChan; i++) {
-    channels.push(buffer.getChannelData(i));
-  }
-
-  let offset = 0;
-  for (let i = 0; i < buffer.length; i++) {
-    for (let channel = 0; channel < numOfChan; channel++) {
-      view.setFloat32(offset, channels[channel][i], true); // true for little-endian
-      offset += 4;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const context = require("@lit/context");
+const decorators_js = require("lit/decorators.js");
+const EFTemporal = require("./EFTemporal.cjs");
+const TimegroupController = require("./TimegroupController.cjs");
+const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
+const EFMedia = require("./EFMedia.cjs");
+const task = require("@lit/task");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _currentTime;
+const shallowGetTimegroups = (element, groups = []) => {
+  for (const child of Array.from(element.children)) {
+    if (child instanceof exports.EFTimegroup) {
+      groups.push(child);
+    } else {
+      shallowGetTimegroups(child, groups);
     }
   }
-
-  return new Blob([resultBuffer], { type: "application/octet-stream" });
-}
-
-@customElement("ef-timegroup")
-export class EFTimegroup extends EFTemporal(LitElement) {
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: relative;
-      top: 0;
-    }
-  `;
-
-  @provide({ context: timegroupContext })
-  _timeGroupContext = this;
-
-  #currentTime = 0;
-
-  @property({
-    type: String,
-    attribute: "mode",
-  })
-  mode: "fixed" | "sequence" | "contain" = "sequence";
-
-  @property({ type: Number })
-  set currentTime(time: number) {
-    this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1000));
+  return groups;
+};
+exports.EFTimegroup = class EFTimegroup extends EFTemporal.EFTemporal(lit.LitElement) {
+  constructor() {
+    super(...arguments);
+    this._timeGroupContext = this;
+    __privateAdd(this, _currentTime, 0);
+    this.mode = "sequence";
+    this.crossoverMs = 0;
+    this.frameTask = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
+      task: async ([], { signal: _signal }) => {
+        let fullyUpdated = await this.updateComplete;
+        while (!fullyUpdated) {
+          fullyUpdated = await this.updateComplete;
+        }
+      }
+    });
+  }
+  set currentTime(time) {
+    __privateSet(this, _currentTime, Math.max(0, Math.min(time, this.durationMs / 1e3)));
     try {
       if (this.id) {
         if (this.isConnected) {
@@ -71,78 +67,50 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
   get currentTime() {
-    return this.#currentTime;
+    return __privateGet(this, _currentTime);
   }
   get currentTimeMs() {
-    return this.currentTime * 1000;
+    return this.currentTime * 1e3;
   }
-  set currentTimeMs(ms: number) {
-    this.currentTime = ms / 1000;
+  set currentTimeMs(ms) {
+    this.currentTime = ms / 1e3;
   }
-
-  @property({
-    attribute: "crossover",
-    converter: {
-      fromAttribute: (value: string): number => {
-        if (value.endsWith("ms")) {
-          return parseFloat(value);
-        }
-        if (value.endsWith("s")) {
-          return parseFloat(value) * 1000;
-        } else {
-          throw new Error(
-            "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)",
-          );
-        }
-      },
-      toAttribute: (value: number) => `${value}ms`,
-    },
-  })
-  crossoverMs = 0;
-
   render() {
-    return html`<slot></slot> `;
+    return lit.html`<slot></slot> `;
   }
-
   maybeLoadTimeFromLocalStorage() {
     if (this.id) {
       try {
-        return parseFloat(localStorage.getItem(this.storageKey) || "0");
+        return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
       } catch (error) {
         console.warn("Failed to load time from localStorage", error);
       }
     }
     return 0;
   }
-
   connectedCallback() {
     super.connectedCallback();
     if (this.id) {
-      this.#currentTime = this.maybeLoadTimeFromLocalStorage();
+      __privateSet(this, _currentTime, this.maybeLoadTimeFromLocalStorage());
     }
-
     if (this.parentTimegroup) {
-      new TimegroupController(this.parentTimegroup, this);
+      new TimegroupController.TimegroupController(this.parentTimegroup, this);
     }
-
     if (this.shouldWrapWithWorkbench()) {
       this.wrapWithWorkbench();
     }
   }
-
   get storageKey() {
     if (!this.id) {
       throw new Error("Timegroup must have an id to use localStorage.");
     }
     return `ef-timegroup-${this.id}`;
   }
-
   get crossoverStartMs() {
     const parentTimeGroup = this.parentTimegroup;
     if (!parentTimeGroup || !this.previousElementSibling) {
       return 0;
     }
-
     return parentTimeGroup.crossoverMs;
   }
   get crossoverEndMs() {
@@ -150,60 +118,57 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     if (!parentTimeGroup || !this.nextElementSibling) {
       return 0;
     }
-
     return parentTimeGroup.crossoverMs;
   }
-
   get durationMs() {
     switch (this.mode) {
       case "fixed":
         return super.durationMs || 0;
-      case "sequence":
+      case "sequence": {
         let duration = 0;
-        this.childTemporals.forEach((node) => {
+        for (const node of this.childTemporals) {
           duration += node.durationMs;
-        });
+        }
         return duration;
-      case "contain":
+      }
+      case "contain": {
         let maxDuration = 0;
-        this.childTemporals.forEach((node) => {
+        for (const node of this.childTemporals) {
           if (node.hasOwnDuration) {
             maxDuration = Math.max(maxDuration, node.durationMs);
           }
-        });
+        }
         return maxDuration;
+      }
       default:
         throw new Error(`Invalid time mode: ${this.mode}`);
     }
   }
-
   async waitForMediaDurations() {
     return await Promise.all(
-      deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete,
-      ),
+      EFMedia.deepGetMediaElements(this).map(
+        (media) => media.trackFragmentIndexLoader.taskComplete
+      )
     );
   }
-
   get childTemporals() {
-    return shallowGetTemporalElements(this);
+    return EFTemporal.shallowGetTemporalElements(this);
   }
-
-  protected updated(
-    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
-  ): void {
+  updated(changedProperties) {
     super.updated(changedProperties);
-    if (
-      changedProperties.has("currentTime") ||
-      changedProperties.has("ownCurrentTimeMs")
-    ) {
-      console.log("Updating animations to time", this.ownCurrentTimeMs);
+    if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
+      const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
+      if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
+        this.style.display = "none";
+        return;
+      }
+      this.style.display = "";
       const animations = this.getAnimations({ subtree: true });
       this.style.setProperty(
         "--ef-duration",
-        `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`,
+        `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`
       );
-      animations.forEach((animation) => {
+      for (const animation of animations) {
         if (animation.playState === "running") {
           animation.pause();
         }
@@ -212,14 +177,18 @@ export class EFTimegroup extends EFTemporal(LitElement) {
           return;
         }
         const target = effect.target;
-        // Important to avoid going to the end of the animation
-        // or it will reset awkwardly.
-        if (isEFTemporal(target)) {
+        if (!target) {
+          return;
+        }
+        if (target.closest("ef-timegroup") !== this) {
+          return;
+        }
+        if (EFTemporal.isEFTemporal(target)) {
           const timing = effect.getTiming();
           const duration = Number(timing.duration) ?? 0;
           const delay = Number(timing.delay);
           const newTime = Math.floor(
-            Math.min(target.ownCurrentTimeMs, duration - 1 + delay),
+            Math.min(target.ownCurrentTimeMs, duration - 1 + delay)
           );
           if (Number.isNaN(newTime)) {
             return;
@@ -234,26 +203,19 @@ export class EFTimegroup extends EFTemporal(LitElement) {
           const duration = Number(timing.duration) ?? 0;
           const delay = Number(timing.delay);
           const newTime = Math.floor(
-            Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay),
+            Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay)
           );
-
           if (Number.isNaN(newTime)) {
             return;
           }
           animation.currentTime = newTime;
         }
-      });
+      }
     }
   }
-
   shouldWrapWithWorkbench() {
-    return (
-      EF_INTERACTIVE &&
-      this.closest("ef-timegroup") === this &&
-      this.closest("ef-workbench") === null
-    );
+    return EF_INTERACTIVE.EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-workbench") === null;
   }
-
   wrapWithWorkbench() {
     const workbench = document.createElement("ef-workbench");
     document.body.append(workbench);
@@ -261,134 +223,121 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       this.setAttribute("id", "root-this");
     }
     this.setAttribute("slot", "canvas");
-    workbench.append(this as unknown as Element);
-
+    workbench.append(this);
     const filmstrip = document.createElement("ef-filmstrip");
     filmstrip.setAttribute("slot", "timeline");
     filmstrip.setAttribute("target", `#${this.id}`);
     workbench.append(filmstrip);
   }
-
   get hasOwnDuration() {
     return true;
   }
-
   get efElements() {
     return Array.from(
       this.querySelectorAll(
-        "ef-audio, ef-video, ef-image, ef-captions, ef-waveform",
-      ),
+        "ef-audio, ef-video, ef-image, ef-captions, ef-waveform"
+      )
     );
   }
-
-  async renderAudio(fromMs: number, toMs: number) {
+  async renderAudio(fromMs, toMs) {
     await this.waitForMediaDurations();
-
     const durationMs = toMs - fromMs;
     const audioContext = new OfflineAudioContext(
       2,
-      Math.round((48000 * durationMs) / 1000),
-      48000,
+      Math.round(48e3 * durationMs / 1e3),
+      48e3
     );
-
-    console.log("RENDERING AUDIO");
-    console.log(
-      `renderAudio fromMs=${fromMs} toMs=${toMs} durationMs=${durationMs} ctxSize=${audioContext.length}`,
-    );
-
     await Promise.all(
-      deepGetMediaElements(this).map(async (mediaElement) => {
+      EFMedia.deepGetMediaElements(this).map(async (mediaElement) => {
         await mediaElement.trackFragmentIndexLoader.taskComplete;
-
         const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
         const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
         const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-        if (!mediaOverlaps || mediaElement.defaultAudioTrackId === undefined) {
-          console.log("Skipping audio element due to lack of overlap");
+        if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
           return;
         }
-
         const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
         if (!audio) {
           throw new Error("Failed to fetch audio");
         }
-
         const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
         const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
         const ctxDurationMs = ctxEndMs - ctxStartMs;
-
-        const offset =
-          Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-
-        // console.log("Fetching audio spanning time", audio.startMs, audio.endMs);
-        console.log(
-          "AUDIO SPAN",
-          JSON.stringify({
-            fromMs,
-            toMs,
-            audio: {
-              startMs: audio.startMs,
-              endMs: audio.endMs,
-            },
-            elementStart: mediaElement.startTimeMs,
-            elementEnd: mediaElement.endTimeMs,
-            ctxStart: ctxStartMs,
-            ctxEnd: ctxEndMs,
-            offset,
-          }),
-        );
-
+        const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
         const bufferSource = audioContext.createBufferSource();
         bufferSource.buffer = await audioContext.decodeAudioData(
-          await audio.blob.arrayBuffer(),
+          await audio.blob.arrayBuffer()
         );
         bufferSource.connect(audioContext.destination);
-
         bufferSource.start(
-          ctxStartMs / 1000,
-          offset / 1000,
-          ctxDurationMs / 1000,
+          ctxStartMs / 1e3,
+          offset / 1e3,
+          ctxDurationMs / 1e3
         );
-      }),
+      })
     );
-
     return await audioContext.startRendering();
   }
-
   async loadMd5Sums() {
     const efElements = this.efElements;
-    const loaderTasks: Promise<any>[] = [];
-    efElements.forEach((el) => {
-      const md5SumLoader = (el as any).md5SumLoader;
-      if (md5SumLoader instanceof Task) {
+    const loaderTasks = [];
+    for (const el of efElements) {
+      const md5SumLoader = el.md5SumLoader;
+      if (md5SumLoader instanceof task.Task) {
         md5SumLoader.run();
         loaderTasks.push(md5SumLoader.taskComplete);
       }
-    });
-
+    }
     await Promise.all(loaderTasks);
-
     efElements.map((el) => {
       if ("productionSrc" in el && el.productionSrc instanceof Function) {
         el.setAttribute("src", el.productionSrc());
       }
     });
   }
-
-  frameTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.ownCurrentTimeMs, this.currentTimeMs] as const,
-    task: async ([], { signal }) => {
-      let fullyUpdated = await this.updateComplete;
-      while (!fullyUpdated) {
-        fullyUpdated = await this.updateComplete;
-      }
-    },
-  });
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-timegroup": EFTimegroup & Element;
-  }
-}
+};
+_currentTime = /* @__PURE__ */ new WeakMap();
+exports.EFTimegroup.styles = lit.css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      top: 0;
+    }
+  `;
+__decorateClass([
+  context.provide({ context: EFTemporal.timegroupContext })
+], exports.EFTimegroup.prototype, "_timeGroupContext", 2);
+__decorateClass([
+  decorators_js.property({
+    type: String,
+    attribute: "mode"
+  })
+], exports.EFTimegroup.prototype, "mode", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.EFTimegroup.prototype, "currentTime", 1);
+__decorateClass([
+  decorators_js.property({
+    attribute: "crossover",
+    converter: {
+      fromAttribute: (value) => {
+        if (value.endsWith("ms")) {
+          return Number.parseFloat(value);
+        }
+        if (value.endsWith("s")) {
+          return Number.parseFloat(value) * 1e3;
+        }
+        throw new Error(
+          "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
+        );
+      },
+      toAttribute: (value) => `${value}ms`
+    }
+  })
+], exports.EFTimegroup.prototype, "crossoverMs", 2);
+exports.EFTimegroup = __decorateClass([
+  decorators_js.customElement("ef-timegroup")
+], exports.EFTimegroup);
+exports.shallowGetTimegroups = shallowGetTimegroups;

package/dist/packages/elements/src/elements/EFTimegroup.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { Task } from '@lit/task';
+
+export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
+declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+export declare class EFTimegroup extends EFTimegroup_base {
+    #private;
+    static styles: import('lit').CSSResult;
+    _timeGroupContext: this;
+    mode: "fixed" | "sequence" | "contain";
+    set currentTime(time: number);
+    get currentTime(): number;
+    get currentTimeMs(): number;
+    set currentTimeMs(ms: number);
+    crossoverMs: number;
+    render(): import('lit-html').TemplateResult<1>;
+    maybeLoadTimeFromLocalStorage(): number;
+    connectedCallback(): void;
+    get storageKey(): string;
+    get crossoverStartMs(): number;
+    get crossoverEndMs(): number;
+    get durationMs(): number;
+    waitForMediaDurations(): Promise<Record<number, import('../../../assets/dist/packages/assets/src').TrackFragmentIndex>[]>;
+    get childTemporals(): import('./EFTemporal').TemporalMixinInterface[];
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    shouldWrapWithWorkbench(): boolean;
+    wrapWithWorkbench(): void;
+    get hasOwnDuration(): boolean;
+    get efElements(): Element[];
+    renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
+    loadMd5Sums(): Promise<void>;
+    frameTask: Task<readonly [number, number], void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-timegroup": EFTimegroup & Element;
+    }
+}
+export {};