@editframe/elements 0.5.0-beta.4 → 0.5.0-beta.5

package/dist/elements/elements/EFTemporal.mjs

@@ -0,0 +1,186 @@
+import { createContext, consume } from "@lit/context";
+import { property, state } from "lit/decorators.js";
+import { EFTimegroup } from "./EFTimegroup.mjs";
+import { durationConverter } from "./durationConverter.mjs";
+import { Task } from "@lit/task";
+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 shallowGetTemporalElements = (element, temporals = []) => {
+  for (const child of element.children) {
+    if (isEFTemporal(child)) {
+      temporals.push(child);
+    } else {
+      shallowGetTemporalElements(child, temporals);
+    }
+  }
+  return temporals;
+};
+const shallowGetTimegroups = (element, groups = []) => {
+  for (const child of element.children) {
+    if (child instanceof EFTimegroup) {
+      groups.push(child);
+    } else {
+      shallowGetTimegroups(child, groups);
+    }
+  }
+  return groups;
+};
+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: false,
+        args: () => [this.ownCurrentTimeMs],
+        task: async ([], { signal }) => {
+        }
+      });
+    }
+    #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;
+    }
+    get offsetAppliesToDuration() {
+      return !(this.parentTimegroup?.mode === "sequence");
+    }
+    getRootTimegroup() {
+      let parent = this instanceof EFTimegroup ? 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() {
+      let durationMs = this._durationMs || this.parentTimegroup?.durationMs || 0;
+      return durationMs || 0;
+    }
+    get offsetMs() {
+      return this._offsetMs || 0;
+    }
+    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,
+  deepGetTemporalElements,
+  isEFTemporal,
+  shallowGetTemporalElements,
+  shallowGetTimegroups,
+  timegroupContext
+};

package/dist/elements/elements/EFTimegroup.mjs

@@ -0,0 +1,230 @@
+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.mjs";
+import { TimegroupController } from "./TimegroupController.mjs";
+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;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw 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");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _currentTime;
+let EFTimegroup = class extends EFTemporal(LitElement) {
+  constructor() {
+    super(...arguments);
+    this._timeGroupContext = this;
+    __privateAdd(this, _currentTime, 0);
+    this.mode = "sequence";
+    this.crossoverMs = 0;
+  }
+  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 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);
+    }
+  }
+  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;
+        this.childTemporals.forEach((node) => {
+          duration += node.durationMs;
+        });
+        return duration;
+      case "contain":
+        let maxDuration = 0;
+        this.childTemporals.forEach((node) => {
+          if (node.hasOwnDuration) {
+            maxDuration = Math.max(maxDuration, node.durationMs);
+          }
+        });
+        return maxDuration;
+      default:
+        throw new Error(`Invalid time mode: ${this.mode}`);
+    }
+  }
+  get childTemporals() {
+    return shallowGetTemporalElements(this);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
+      const animations = this.getAnimations({ subtree: true });
+      this.style.setProperty(
+        "--ef-duration",
+        `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`
+      );
+      animations.forEach((animation) => {
+        if (animation.playState === "running") {
+          animation.pause();
+        }
+        const effect = animation.effect;
+        if (!(effect && effect instanceof KeyframeEffect)) {
+          return;
+        }
+        const target = effect.target;
+        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;
+        }
+      });
+    }
+  }
+  get hasOwnDuration() {
+    return true;
+  }
+};
+_currentTime = /* @__PURE__ */ new WeakMap();
+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 parseFloat(value);
+        }
+        if (value.endsWith("s")) {
+          return parseFloat(value) * 1e3;
+        } else {
+          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
+};

package/dist/elements/elements/EFTimeline.mjs

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

package/dist/elements/elements/EFVideo.mjs

@@ -0,0 +1,123 @@
+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.mjs";
+import { TWMixin } from "../gui/TWMixin.mjs";
+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;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw 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");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return 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.rootTimegroup?.requestUpdate();
+      }
+    });
+    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
+};