@editframe/elements 0.5.0-beta.8 → 0.6.0-beta.1

package/dist/{elements/src/elements/EFTimegroup.mjs → packages/elements/src/elements/EFTimegroup.js}

@@ -1,41 +1,39 @@
 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";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
-import { deepGetMediaElements } from "./EFMedia.mjs";
+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);
+  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 __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 _currentTime;
+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);
@@ -46,7 +44,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-      task: async ([], { signal }) => {
+      task: async ([], { signal: _signal }) => {
         let fullyUpdated = await this.updateComplete;
         while (!fullyUpdated) {
           fullyUpdated = await this.updateComplete;
@@ -81,7 +79,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   maybeLoadTimeFromLocalStorage() {
     if (this.id) {
       try {
-        return parseFloat(localStorage.getItem(this.storageKey) || "0");
+        return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
       } catch (error) {
         console.warn("Failed to load time from localStorage", error);
       }
@@ -124,20 +122,22 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     switch (this.mode) {
       case "fixed":
         return super.durationMs || 0;
-      case "sequence":
+      case "sequence": {
         let duration = 0;
-        this.childTemporals.forEach((node) => {
+        for (const node of this.childTemporals) {
           duration += node.durationMs;
-        });
+        }
         return duration;
-      case "contain":
+      }
+      case "contain": {
         let maxDuration = 0;
-        this.childTemporals.forEach((node) => {
+        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}`);
     }
@@ -155,13 +155,18 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
-      console.log("Updating animations to time", this.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`
       );
-      animations.forEach((animation) => {
+      for (const animation of animations) {
         if (animation.playState === "running") {
           animation.pause();
         }
@@ -170,6 +175,12 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
           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;
@@ -197,7 +208,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
           }
           animation.currentTime = newTime;
         }
-      });
+      }
     }
   }
   shouldWrapWithWorkbench() {
@@ -234,10 +245,6 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       Math.round(48e3 * durationMs / 1e3),
       48e3
     );
-    console.log("RENDERING AUDIO");
-    console.log(
-      `renderAudio fromMs=${fromMs} toMs=${toMs} durationMs=${durationMs} ctxSize=${audioContext.length}`
-    );
     await Promise.all(
       deepGetMediaElements(this).map(async (mediaElement) => {
         await mediaElement.trackFragmentIndexLoader.taskComplete;
@@ -245,7 +252,6 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
         const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
         if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
-          console.log("Skipping audio element due to lack of overlap");
           return;
         }
         const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
@@ -256,22 +262,6 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
         const ctxDurationMs = ctxEndMs - ctxStartMs;
         const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-        console.log(
-          "AUDIO SPAN",
-          JSON.stringify({
-            fromMs,
-            toMs,
-            audio: {
-              startMs: audio.startMs,
-              endMs: audio.endMs
-            },
-            elementStart: mediaElement.startTimeMs,
-            elementEnd: mediaElement.endTimeMs,
-            ctxStart: ctxStartMs,
-            ctxEnd: ctxEndMs,
-            offset
-          })
-        );
         const bufferSource = audioContext.createBufferSource();
         bufferSource.buffer = await audioContext.decodeAudioData(
           await audio.blob.arrayBuffer()
@@ -289,13 +279,13 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   async loadMd5Sums() {
     const efElements = this.efElements;
     const loaderTasks = [];
-    efElements.forEach((el) => {
+    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) {
@@ -332,15 +322,14 @@ __decorateClass([
     converter: {
       fromAttribute: (value) => {
         if (value.endsWith("ms")) {
-          return parseFloat(value);
+          return Number.parseFloat(value);
         }
         if (value.endsWith("s")) {
-          return parseFloat(value) * 1e3;
-        } else {
-          throw new Error(
-            "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
-          );
+          return Number.parseFloat(value) * 1e3;
         }
+        throw new Error(
+          "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
+        );
       },
       toAttribute: (value) => `${value}ms`
     }
@@ -350,5 +339,6 @@ EFTimegroup = __decorateClass([
   customElement("ef-timegroup")
 ], EFTimegroup);
 export {
-  EFTimegroup
+  EFTimegroup,
+  shallowGetTimegroups
 };

package/{src/elements/EFTimeline.ts → dist/packages/elements/src/elements/EFTimeline.cjs}

@@ -1,13 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 class EFTimeline extends HTMLElement {
   get durationMs() {
     let duration = 0;
-    this.childNodes.forEach((node) => {
+    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

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

package/dist/{elements/src/elements/EFTimeline.mjs → packages/elements/src/elements/EFTimeline.js}

@@ -1,12 +1,15 @@
 class EFTimeline extends HTMLElement {
   get durationMs() {
     let duration = 0;
-    this.childNodes.forEach((node) => {
+    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

@@ -0,0 +1,110 @@
+"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.rootTimegroup?.requestUpdate();
+      }
+    });
+    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

@@ -0,0 +1,14 @@
+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/{elements/src/elements/EFVideo.mjs → packages/elements/src/elements/EFVideo.js}

@@ -2,37 +2,25 @@ 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";
+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);
+  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 __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() {
@@ -49,14 +37,12 @@ let EFVideo = class extends TWMixin(EFMedia) {
         this.paintTask.status
       ],
       task: async () => {
-        console.log("EFVideo frameTask", this.ownCurrentTimeMs);
         await this.trackFragmentIndexLoader.taskComplete;
         await this.initSegmentsLoader.taskComplete;
         await this.seekTask.taskComplete;
         await this.fetchSeekTask.taskComplete;
         await this.videoAssetTask.taskComplete;
         await this.paintTask.taskComplete;
-        console.log("EFVideo frameTask complete", this.ownCurrentTimeMs);
         this.rootTimegroup?.requestUpdate();
       }
     });
@@ -65,7 +51,6 @@ let EFVideo = class extends TWMixin(EFMedia) {
       task: async ([videoAsset, seekToMs], {
         signal: _signal
       }) => {
-        console.log(`EFVideo paintTask decoderLock=${__privateGet(this, _decoderLock)}`);
         if (!videoAsset) {
           return;
         }
@@ -75,13 +60,6 @@ let EFVideo = class extends TWMixin(EFMedia) {
         try {
           __privateSet(this, _decoderLock, true);
           const frame = await videoAsset.seekToTime(seekToMs / 1e3);
-          console.log(
-            "Painting frame",
-            "seekToMs",
-            seekToMs,
-            "timestamp",
-            frame?.timestamp
-          );
           if (!this.canvasElement) {
             return;
           }