@editframe/elements 0.6.0-beta.9 → 0.7.0-beta.1

package/dist/packages/elements/src/elements/EFTimegroup.cjs

@@ -0,0 +1,350 @@
+"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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _currentTime, _EFTimegroup_instances, addAudioToContext_fn;
+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 groups;
+};
+exports.EFTimegroup = class EFTimegroup extends EFTemporal.EFTemporal(lit.LitElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _EFTimegroup_instances);
+    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) {
+          localStorage.setItem(this.storageKey, time.toString());
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to save time to localStorage", error);
+    }
+  }
+  get currentTime() {
+    return __privateGet(this, _currentTime);
+  }
+  get currentTimeMs() {
+    return this.currentTime * 1e3;
+  }
+  set currentTimeMs(ms) {
+    this.currentTime = ms / 1e3;
+  }
+  render() {
+    return lit.html`<slot></slot> `;
+  }
+  maybeLoadTimeFromLocalStorage() {
+    if (this.id) {
+      try {
+        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) {
+      __privateSet(this, _currentTime, this.maybeLoadTimeFromLocalStorage());
+    }
+    if (this.parentTimegroup) {
+      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() {
+    const parentTimeGroup = this.parentTimegroup;
+    if (!parentTimeGroup || !this.nextElementSibling) {
+      return 0;
+    }
+    return parentTimeGroup.crossoverMs;
+  }
+  get durationMs() {
+    switch (this.mode) {
+      case "fixed":
+        return super.durationMs || 0;
+      case "sequence": {
+        let duration = 0;
+        for (const node of this.childTemporals) {
+          duration += node.durationMs;
+        }
+        return duration;
+      }
+      case "contain": {
+        let maxDuration = 0;
+        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(
+      EFMedia.deepGetMediaElements(this).map(
+        (media) => media.trackFragmentIndexLoader.taskComplete
+      )
+    );
+  }
+  get childTemporals() {
+    return EFTemporal.shallowGetTemporalElements(this);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    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`
+      );
+      for (const animation of animations) {
+        if (animation.playState === "running") {
+          animation.pause();
+        }
+        const effect = animation.effect;
+        if (!(effect && effect instanceof KeyframeEffect)) {
+          return;
+        }
+        const target = effect.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)
+          );
+          if (Number.isNaN(newTime)) {
+            return;
+          }
+          animation.currentTime = newTime;
+        } else if (target) {
+          const nearestTimegroup = target.closest("ef-timegroup");
+          if (!nearestTimegroup) {
+            return;
+          }
+          const timing = effect.getTiming();
+          const duration = Number(timing.duration) ?? 0;
+          const delay = Number(timing.delay);
+          const newTime = Math.floor(
+            Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay)
+          );
+          if (Number.isNaN(newTime)) {
+            return;
+          }
+          animation.currentTime = newTime;
+        }
+      }
+    }
+  }
+  shouldWrapWithWorkbench() {
+    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);
+    if (!this.hasAttribute("id")) {
+      this.setAttribute("id", "root-this");
+    }
+    this.setAttribute("slot", "canvas");
+    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"
+      )
+    );
+  }
+  async renderAudio(fromMs, toMs) {
+    const durationMs = toMs - fromMs;
+    const audioContext = new OfflineAudioContext(
+      2,
+      Math.round(48e3 * durationMs / 1e3),
+      48e3
+    );
+    await __privateMethod(this, _EFTimegroup_instances, addAudioToContext_fn).call(this, audioContext, fromMs, toMs);
+    return await audioContext.startRendering();
+  }
+  async loadMd5Sums() {
+    const efElements = this.efElements;
+    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());
+      }
+    });
+  }
+};
+_currentTime = /* @__PURE__ */ new WeakMap();
+_EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
+addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
+  await this.waitForMediaDurations();
+  const durationMs = toMs - fromMs;
+  await Promise.all(
+    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 === 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;
+      const bufferSource = audioContext.createBufferSource();
+      bufferSource.buffer = await audioContext.decodeAudioData(
+        await audio.blob.arrayBuffer()
+      );
+      bufferSource.connect(audioContext.destination);
+      bufferSource.start(
+        ctxStartMs / 1e3,
+        offset / 1e3,
+        ctxDurationMs / 1e3
+      );
+    })
+  );
+};
+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/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 {};