@editframe/elements 0.6.0-beta.18 → 0.6.0-beta.19

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

@@ -1,351 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { provide } from "@lit/context";
-import { property, customElement } from "lit/decorators.js";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
-import { TimegroupController } from "./TimegroupController.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { deepGetMediaElements } from "./EFMedia.js";
-import { Task } from "@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 EFTimegroup) {
-      groups.push(child);
-    } else {
-      shallowGetTimegroups(child, groups);
-    }
-  }
-  return groups;
-};
-let EFTimegroup = class extends EFTemporal(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(this, {
-      autoRun: 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 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(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(
-      deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete
-      )
-    );
-  }
-  get childTemporals() {
-    return 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 (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 && 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) {
-        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(
-    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
-      );
-    })
-  );
-};
-EFTimegroup.styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: relative;
-      top: 0;
-    }
-  `;
-__decorateClass([
-  provide({ context: timegroupContext })
-], EFTimegroup.prototype, "_timeGroupContext", 2);
-__decorateClass([
-  property({
-    type: String,
-    attribute: "mode"
-  })
-], EFTimegroup.prototype, "mode", 2);
-__decorateClass([
-  property({ type: Number })
-], EFTimegroup.prototype, "currentTime", 1);
-__decorateClass([
-  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`
-    }
-  })
-], EFTimegroup.prototype, "crossoverMs", 2);
-EFTimegroup = __decorateClass([
-  customElement("ef-timegroup")
-], EFTimegroup);
-export {
-  EFTimegroup,
-  shallowGetTimegroups
-};

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-class EFTimeline extends HTMLElement {
-  get durationMs() {
-    let duration = 0;
-    for (const node of this.childNodes) {
-      if ("durationMs" in node && typeof node.durationMs === "number") {
-        duration += node.durationMs;
-      }
-    }
-    return duration;
-  }
-}
-window.customElements.define("ef-timeline", EFTimeline);
-exports.EFTimeline = EFTimeline;

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

@@ -1,3 +0,0 @@
-export declare class EFTimeline extends HTMLElement {
-    get durationMs(): number;
-}

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

@@ -1,15 +0,0 @@
-class EFTimeline extends HTMLElement {
-  get durationMs() {
-    let duration = 0;
-    for (const node of this.childNodes) {
-      if ("durationMs" in node && typeof node.durationMs === "number") {
-        duration += node.durationMs;
-      }
-    }
-    return duration;
-  }
-}
-window.customElements.define("ef-timeline", EFTimeline);
-export {
-  EFTimeline
-};

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);

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

@@ -1,14 +0,0 @@
-import { Task } from '@lit/task';
-import { EFMedia } from './EFMedia';
-
-declare const EFVideo_base: typeof EFMedia;
-export declare class EFVideo extends EFVideo_base {
-    #private;
-    static styles: import('lit').CSSResult[];
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
-    render(): import('lit-html').TemplateResult<1>;
-    get canvasElement(): HTMLCanvasElement | undefined;
-    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
-    paintTask: Task<readonly [import('../../../../lib/av/EncodedAsset').VideoAsset | undefined, number], number | undefined>;
-}
-export {};

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

@@ -1,110 +0,0 @@
-import { css, html } from "lit";
-import { Task } from "@lit/task";
-import { createRef, ref } from "lit/directives/ref.js";
-import { customElement } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia.js";
-import { TWMixin } from "../gui/TWMixin.js";
-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;
-let EFVideo = class extends TWMixin(EFMedia) {
-  constructor() {
-    super(...arguments);
-    this.canvasRef = createRef();
-    __privateAdd(this, _decoderLock, false);
-    this.frameTask = new 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(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 html` <canvas
-      class="h-full w-full object-fill"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
-  }
-  get canvasElement() {
-    return this.canvasRef.value;
-  }
-};
-_decoderLock = /* @__PURE__ */ new WeakMap();
-EFVideo.styles = [
-  css`
-      :host {
-        display: block;
-      }
-    `
-];
-EFVideo = __decorateClass([
-  customElement("ef-video")
-], EFVideo);
-export {
-  EFVideo
-};