@editframe/elements 0.7.0-beta.10 → 0.7.0-beta.12

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/EFVideo.cjs

@@ -1,109 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lit = require("lit");
-const task = require("@lit/task");
-const ref_js = require("lit/directives/ref.js");
-const decorators_js = require("lit/decorators.js");
-const EFMedia = require("./EFMedia.cjs");
-const TWMixin = require("../gui/TWMixin.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"), 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 _decoderLock;
-exports.EFVideo = class EFVideo extends TWMixin.TWMixin(EFMedia.EFMedia) {
-  constructor() {
-    super(...arguments);
-    this.canvasRef = ref_js.createRef();
-    __privateAdd(this, _decoderLock, false);
-    this.frameTask = new task.Task(this, {
-      args: () => [
-        this.trackFragmentIndexLoader.status,
-        this.initSegmentsLoader.status,
-        this.seekTask.status,
-        this.fetchSeekTask.status,
-        this.videoAssetTask.status,
-        this.paintTask.status
-      ],
-      task: async () => {
-        await this.trackFragmentIndexLoader.taskComplete;
-        await this.initSegmentsLoader.taskComplete;
-        await this.seekTask.taskComplete;
-        await this.fetchSeekTask.taskComplete;
-        await this.videoAssetTask.taskComplete;
-        await this.paintTask.taskComplete;
-      }
-    });
-    this.paintTask = new task.Task(this, {
-      args: () => [this.videoAssetTask.value, this.desiredSeekTimeMs],
-      task: async ([videoAsset, seekToMs], {
-        signal: _signal
-      }) => {
-        if (!videoAsset) {
-          return;
-        }
-        if (__privateGet(this, _decoderLock)) {
-          return;
-        }
-        try {
-          __privateSet(this, _decoderLock, true);
-          const frame = await videoAsset.seekToTime(seekToMs / 1e3);
-          if (!this.canvasElement) {
-            return;
-          }
-          const ctx = this.canvasElement.getContext("2d");
-          if (!(frame && ctx)) {
-            return;
-          }
-          this.canvasElement.width = frame?.codedWidth;
-          this.canvasElement.height = frame?.codedHeight;
-          ctx.drawImage(
-            frame,
-            0,
-            0,
-            this.canvasElement.width,
-            this.canvasElement.height
-          );
-          return seekToMs;
-        } catch (error) {
-          console.trace("Unexpected error while seeking video", error);
-        } finally {
-          __privateSet(this, _decoderLock, false);
-        }
-      }
-    });
-  }
-  render() {
-    return lit.html` <canvas
-      class="h-full w-full object-fill"
-      ${ref_js.ref(this.canvasRef)}
-    ></canvas>`;
-  }
-  get canvasElement() {
-    return this.canvasRef.value;
-  }
-};
-_decoderLock = /* @__PURE__ */ new WeakMap();
-exports.EFVideo.styles = [
-  lit.css`
-      :host {
-        display: block;
-      }
-    `
-];
-exports.EFVideo = __decorateClass([
-  decorators_js.customElement("ef-video")
-], exports.EFVideo);