@editframe/elements 0.7.0-beta.8 → 0.7.0-beta.9

package/dist/packages/elements/src/elements/EFTemporal.js

@@ -1,199 +0,0 @@
-import { createContext, consume } from "@lit/context";
-import { property, state } from "lit/decorators.js";
-import { durationConverter } from "./durationConverter.js";
-import { Task } from "@lit/task";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-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;
-};
-const timegroupContext = createContext(
-  Symbol("timeGroupContext")
-);
-const isEFTemporal = (obj) => obj[EF_TEMPORAL];
-const EF_TEMPORAL = Symbol("EF_TEMPORAL");
-const deepGetTemporalElements = (element, temporals = []) => {
-  for (const child of element.children) {
-    if (isEFTemporal(child)) {
-      temporals.push(child);
-    }
-    deepGetTemporalElements(child, temporals);
-  }
-  return temporals;
-};
-const deepGetElementsWithFrameTasks = (element, elements = []) => {
-  for (const child of element.children) {
-    if ("frameTask" in child && child.frameTask instanceof Task) {
-      elements.push(child);
-    }
-    deepGetElementsWithFrameTasks(child, elements);
-  }
-  return elements;
-};
-const shallowGetTemporalElements = (element, temporals = []) => {
-  for (const child of element.children) {
-    if (isEFTemporal(child)) {
-      temporals.push(child);
-    } else {
-      shallowGetTemporalElements(child, temporals);
-    }
-  }
-  return temporals;
-};
-class OwnCurrentTimeController {
-  constructor(host, temporal) {
-    this.host = host;
-    this.temporal = temporal;
-    host.addController(this);
-  }
-  hostUpdated() {
-    this.temporal.requestUpdate("ownCurrentTimeMs");
-  }
-  remove() {
-    this.host.removeController(this);
-  }
-}
-const EFTemporal = (superClass) => {
-  class TemporalMixinClass extends superClass {
-    constructor() {
-      super(...arguments);
-      this._offsetMs = 0;
-      this.rootTimegroup = this.getRootTimegroup();
-      this.frameTask = new Task(this, {
-        autoRun: EF_INTERACTIVE,
-        args: () => [this.ownCurrentTimeMs],
-        task: async ([], { signal: _signal }) => {
-          let fullyUpdated = await this.updateComplete;
-          while (!fullyUpdated) {
-            fullyUpdated = await this.updateComplete;
-          }
-        }
-      });
-    }
-    #parentTimegroup;
-    set parentTimegroup(value) {
-      this.#parentTimegroup = value;
-      this.ownCurrentTimeController?.remove();
-      this.rootTimegroup = this.getRootTimegroup();
-      if (this.rootTimegroup) {
-        this.ownCurrentTimeController = new OwnCurrentTimeController(
-          this.rootTimegroup,
-          this
-        );
-      }
-    }
-    get parentTimegroup() {
-      return this.#parentTimegroup;
-    }
-    getRootTimegroup() {
-      let parent = this.tagName === "EF-TIMEGROUP" ? this : this.parentTimegroup;
-      while (parent?.parentTimegroup) {
-        parent = parent.parentTimegroup;
-      }
-      return parent;
-    }
-    get hasOwnDuration() {
-      return false;
-    }
-    // Defining this as a getter to a private property allows us to
-    // override it classes that include this mixin.
-    get durationMs() {
-      return this._durationMs || this.parentTimegroup?.durationMs || 0;
-    }
-    get offsetMs() {
-      return this._offsetMs || 0;
-    }
-    get parentTemporal() {
-      let parent = this.parentElement;
-      while (parent && !isEFTemporal(parent)) {
-        parent = parent.parentElement;
-      }
-      return parent;
-    }
-    get startTimeWithinParentMs() {
-      if (!this.parentTemporal) {
-        return 0;
-      }
-      return this.startTimeMs - this.parentTemporal.startTimeMs;
-    }
-    get startTimeMs() {
-      const parentTimegroup = this.parentTimegroup;
-      if (!parentTimegroup) {
-        return 0;
-      }
-      switch (parentTimegroup.mode) {
-        case "sequence": {
-          const siblingTemorals = shallowGetTemporalElements(parentTimegroup);
-          const ownIndex = siblingTemorals.indexOf(
-            this
-          );
-          if (ownIndex === 0) {
-            return parentTimegroup.startTimeMs;
-          }
-          const previous = siblingTemorals[ownIndex - 1];
-          if (!previous) {
-            throw new Error("Previous temporal element not found");
-          }
-          return previous.startTimeMs + previous.durationMs;
-        }
-        case "contain":
-        case "fixed":
-          return parentTimegroup.startTimeMs + this.offsetMs;
-        default:
-          throw new Error(`Invalid time mode: ${parentTimegroup.mode}`);
-      }
-    }
-    get endTimeMs() {
-      return this.startTimeMs + this.durationMs;
-    }
-    get ownCurrentTimeMs() {
-      if (this.rootTimegroup) {
-        return Math.min(
-          Math.max(0, this.rootTimegroup.currentTimeMs - this.startTimeMs),
-          this.durationMs
-        );
-      }
-      return 0;
-    }
-  }
-  __decorateClass([
-    consume({ context: timegroupContext, subscribe: true }),
-    property({ attribute: false })
-  ], TemporalMixinClass.prototype, "parentTimegroup", 1);
-  __decorateClass([
-    property({
-      type: String,
-      attribute: "offset",
-      converter: durationConverter
-    })
-  ], TemporalMixinClass.prototype, "_offsetMs", 2);
-  __decorateClass([
-    property({
-      type: Number,
-      attribute: "duration",
-      converter: durationConverter
-    })
-  ], TemporalMixinClass.prototype, "_durationMs", 2);
-  __decorateClass([
-    state()
-  ], TemporalMixinClass.prototype, "rootTimegroup", 2);
-  Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {
-    value: true
-  });
-  return TemporalMixinClass;
-};
-export {
-  EFTemporal,
-  OwnCurrentTimeController,
-  deepGetElementsWithFrameTasks,
-  deepGetTemporalElements,
-  isEFTemporal,
-  shallowGetTemporalElements,
-  timegroupContext
-};

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

@@ -1,12 +0,0 @@
-import { LitElement } from 'lit';
-
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
-declare class TestTemporal extends TestTemporal_base {
-    get hasOwnDuration(): boolean;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "test-temporal": TestTemporal;
-    }
-}
-export {};

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

@@ -1,352 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lit = require("lit");
-const context = require("@lit/context");
-const task = require("@lit/task");
-const decorators_js = require("lit/decorators.js");
-const debug = require("debug");
-const EFTemporal = require("./EFTemporal.cjs");
-const TimegroupController = require("./TimegroupController.cjs");
-const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
-const EFMedia = require("./EFMedia.cjs");
-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 log = debug("ef:elements:EFTimegroup");
-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) {
-      log("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) {
-        log("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;
-      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

@@ -1,39 +0,0 @@
-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 {};