@editframe/elements 0.5.0-beta.6 → 0.5.0-beta.8

package/dist/elements/src/EF_FRAMEGEN.mjs

@@ -0,0 +1,130 @@
+import { shallowGetTimegroups, deepGetElementsWithFrameTasks } from "./elements/EFTemporal.mjs";
+import { awaitAnimationFrame } from "../../util/awaitAnimationFrame.mjs";
+import { awaitMicrotask } from "../../util/awaitMicrotask.mjs";
+class TriggerCanvas {
+  constructor() {
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 1;
+    this.canvas.height = 1;
+    Object.assign(this.canvas.style, {
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      width: `1px`,
+      height: `1px`,
+      zIndex: "100000"
+    });
+    document.body.prepend(this.canvas);
+    this.ctx = this.canvas.getContext("2d");
+  }
+  trigger() {
+    console.log("Triggering");
+    this.ctx.fillStyle = "rgba(50, 0, 0, .8)";
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+}
+if (window.EF_FRAMEGEN !== void 0) {
+  const EF_FRAMEGEN = window.EF_FRAMEGEN;
+  EF_FRAMEGEN.onRender((renderId, traceCarrier, renderOptions) => {
+    const crashOnUnhandledError = (error) => {
+      EF_FRAMEGEN.error(renderId, error);
+    };
+    window.addEventListener("error", (error) => {
+      console.warn("Crashing due to unhandled error", error);
+      crashOnUnhandledError(error.message);
+    });
+    window.addEventListener("unhandledrejection", (error) => {
+      console.warn("Crashing due to unhandled rejection", error);
+      crashOnUnhandledError(error.reason);
+    });
+    const triggerCanvas = new TriggerCanvas();
+    EF_FRAMEGEN.onPaint(async () => {
+      triggerCanvas.trigger();
+      await awaitAnimationFrame();
+      await awaitAnimationFrame();
+      EF_FRAMEGEN.didPaint(renderId);
+    });
+    const workbench = document.querySelector("ef-workbench");
+    workbench.rendering = true;
+    const timegroups = shallowGetTimegroups(workbench);
+    const temporals = deepGetElementsWithFrameTasks(workbench);
+    const firstGroup = timegroups[0];
+    if (!firstGroup) {
+      throw new Error("No temporal elements found");
+    }
+    firstGroup.currentTimeMs = renderOptions.encoderOptions.fromMs;
+    const frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
+    const initialBusyTasks = Promise.all(
+      temporals.map((temporal) => temporal.frameTask).map((task) => task.taskComplete)
+    );
+    const frameBox = document.createElement("div");
+    Object.assign(frameBox.style, {
+      width: "200px",
+      height: "100px",
+      font: "30px Arial",
+      backgroundColor: "white",
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      zIndex: "100000"
+    });
+    let time = 0;
+    console.log("onRender", renderId, traceCarrier, renderOptions);
+    const audioBufferPromise = firstGroup.renderAudio(
+      renderOptions.encoderOptions.alignedFromUs / 1e3,
+      renderOptions.encoderOptions.alignedToUs / 1e3
+      // renderOptions.encoderOptions.fromMs,
+      // renderOptions.encoderOptions.toMs,
+    );
+    EF_FRAMEGEN.onBegin(async (traceCarrier2, frame, isLast) => {
+      time = firstGroup.currentTimeMs = renderOptions.encoderOptions.fromMs + frame * frameDurationMs;
+      console.log("FRAME #", frame);
+      frameBox.innerHTML = `
+      <div>Frame #${frame}</div>
+      <div>${time.toFixed(4)}</div>
+      `;
+      await initialBusyTasks;
+      console.log("TIME", time.toFixed(4));
+      await awaitMicrotask();
+      console.log("After microtask");
+      const now = performance.now();
+      console.log(`frame:${frame} Awaiting busyTasks`);
+      await Promise.all(
+        temporals.map((temporal) => {
+          console.log(
+            "Awaiting",
+            temporal.tagName,
+            temporal.frameTask.status,
+            temporal.frameTask.taskComplete
+          );
+          return temporal.frameTask;
+        }).map((task) => task.taskComplete)
+      );
+      console.log(
+        `frame:${frame} All tasks complete ${performance.now() - now}ms`
+      );
+      await awaitAnimationFrame();
+      await awaitAnimationFrame();
+      triggerCanvas.trigger();
+      if (isLast) {
+        const renderedAudio = await audioBufferPromise;
+        const channelCount = renderedAudio.numberOfChannels;
+        const interleavedSamples = new Float32Array(
+          channelCount * renderedAudio.length
+        );
+        for (let i = 0; i < renderedAudio.length; i++) {
+          for (let j = 0; j < channelCount; j++) {
+            interleavedSamples.set(
+              renderedAudio.getChannelData(j).slice(i, i + 1),
+              i * channelCount + j
+            );
+          }
+        }
+        EF_FRAMEGEN.frameReady(renderId, frame, interleavedSamples.buffer);
+      } else {
+        EF_FRAMEGEN.frameReady(renderId, frame, new Float32Array(0).buffer);
+      }
+    });
+  });
+}

package/dist/elements/src/EF_INTERACTIVE.mjs

@@ -0,0 +1,4 @@
+const EF_INTERACTIVE = !window.location.search.includes("EF_NONINTERACTIVE");
+export {
+  EF_INTERACTIVE
+};

package/dist/elements/{elements → src/elements}/EFAudio.mjs

@@ -2,6 +2,7 @@ import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { property, customElement } from "lit/decorators.js";
 import { EFMedia } from "./EFMedia.mjs";
+import { Task } from "@lit/task";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,6 +19,25 @@ let EFAudio = class extends EFMedia {
     super(...arguments);
     this.audioElementRef = createRef();
     this.src = "";
+    this.frameTask = new Task(this, {
+      args: () => [
+        this.trackFragmentIndexLoader.status,
+        this.initSegmentsLoader.status,
+        this.seekTask.status,
+        this.fetchSeekTask.status,
+        this.videoAssetTask.status
+      ],
+      task: async () => {
+        console.log("EFAudio frameTask", this.ownCurrentTimeMs);
+        await this.trackFragmentIndexLoader.taskComplete;
+        await this.initSegmentsLoader.taskComplete;
+        await this.seekTask.taskComplete;
+        await this.fetchSeekTask.taskComplete;
+        await this.videoAssetTask.taskComplete;
+        console.log("EFAudio frameTask complete", this.ownCurrentTimeMs);
+        this.rootTimegroup?.requestUpdate();
+      }
+    });
   }
   render() {
     return html`<audio ${ref(this.audioElementRef)}></audio>`;

package/dist/elements/{elements → src/elements}/EFCaptions.mjs

@@ -7,6 +7,7 @@ import { EFTemporal } from "./EFTemporal.mjs";
 import { CrossUpdateController } from "./CrossUpdateController.mjs";
 import { FetchMixin } from "./FetchMixin.mjs";
 import { EFSourceMixin } from "./EFSourceMixin.mjs";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -73,6 +74,7 @@ let EFCaptions = class extends EFSourceMixin(
       }
     });
     this.captionsDataTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.captionsPath(), this.fetch],
       task: async ([captionsPath, fetch2], { signal }) => {
         const response = await fetch2(captionsPath, { signal });
@@ -80,6 +82,7 @@ let EFCaptions = class extends EFSourceMixin(
       }
     });
     this.frameTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.captionsDataTask.status],
       task: async () => {
         await this.captionsDataTask.taskComplete;

package/dist/elements/{elements → src/elements}/EFImage.mjs

@@ -4,6 +4,7 @@ import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FetchMixin } from "./FetchMixin.mjs";
 import { EFSourceMixin } from "./EFSourceMixin.mjs";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,14 +22,25 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
   constructor() {
     super(...arguments);
     this.imageRef = createRef();
+    this.canvasRef = createRef();
     this.fetchImage = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.assetPath(), this.fetch],
       task: async ([assetPath, fetch], { signal }) => {
         const response = await fetch(assetPath, { signal });
-        return URL.createObjectURL(await response.blob());
+        const image = new Image();
+        image.src = URL.createObjectURL(await response.blob());
+        await new Promise((resolve) => {
+          image.onload = resolve;
+        });
+        this.canvasRef.value.width = image.width;
+        this.canvasRef.value.height = image.height;
+        const ctx = this.canvasRef.value.getContext("2d");
+        ctx.drawImage(image, 0, 0);
       }
     });
     this.frameTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.fetchImage.status],
       task: async () => {
         await this.fetchImage.taskComplete;
@@ -36,7 +48,7 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
     });
   }
   render() {
-    return html`<img ${ref(this.imageRef)} src="${this.fetchImage.value}" />`;
+    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
   assetPath() {
     if (this.src.startsWith("http")) {
@@ -50,7 +62,7 @@ EFImage.styles = [
       :host {
         display: block;
       }
-      img {
+      canvas {
         display: block;
         width: 100%;
         height: 100%;

package/dist/elements/{elements → src/elements}/EFMedia.mjs

@@ -3,13 +3,14 @@ import { EFTemporal } from "./EFTemporal.mjs";
 import { property, state } from "lit/decorators.js";
 import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import { Task } from "@lit/task";
-import { MP4File } from "../../editor/util/MP4File.mjs";
+import { MP4File } from "../../../editor/util/MP4File.mjs";
 import { getStartTimeMs } from "./util.mjs";
-import { VideoAsset } from "../../editor/util/EncodedAsset/EncodedAsset.mjs";
+import { VideoAsset } from "../../../editor/util/EncodedAsset/EncodedAsset.mjs";
 import { FetchMixin } from "./FetchMixin.mjs";
 import { apiHostContext } from "../gui/EFWorkbench.mjs";
 import { consume } from "@lit/context";
 import { EFSourceMixin } from "./EFSourceMixin.mjs";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,6 +22,16 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const deepGetMediaElements = (element, medias = []) => {
+  for (const child of element.children) {
+    if (child instanceof EFMedia) {
+      medias.push(child);
+    } else {
+      deepGetMediaElements(child, medias);
+    }
+  }
+  return medias;
+};
 class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   assetType: "isobmff_files"
 }) {
@@ -30,6 +41,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     this.trackFragmentIndexLoader = new Task(this, {
       args: () => [this.fragmentIndexPath(), this.fetch],
       task: async ([fragmentIndexPath, fetch], { signal }) => {
+        console.log("EFMedia trackFragmentIndexLoader");
         const response = await fetch(fragmentIndexPath, { signal });
         return await response.json();
       },
@@ -39,8 +51,10 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       }
     });
     this.initSegmentsLoader = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.trackFragmentIndexLoader.value, this.src, this.fetch],
       task: async ([fragmentIndex, _src, fetch], { signal }) => {
+        console.log("EFMedia initSegmentsLoader");
         if (!fragmentIndex) {
           return;
         }
@@ -64,12 +78,14 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       }
     });
     this.seekTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [
         this.desiredSeekTimeMs,
         this.trackFragmentIndexLoader.value,
         this.initSegmentsLoader.value
       ],
       task: async ([seekToMs, fragmentIndex, initSegments], { signal }) => {
+        console.log("EFMedia seekTask");
         if (fragmentIndex === void 0) {
           return;
         }
@@ -94,9 +110,11 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       }
     });
     this.fetchSeekTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       argsEqual: deepArrayEquals,
       args: () => [this.initSegmentsLoader.value, this.seekTask.value, this.fetch],
       task: async ([initSegments, seekResult, fetch], { signal }) => {
+        console.log("EFMedia fetchSeekTask");
         if (!initSegments) {
           return;
         }
@@ -124,8 +142,10 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       }
     });
     this.videoAssetTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.fetchSeekTask.value],
       task: async ([files], { signal }) => {
+        console.log("EFMedia videoAssetTask");
         if (!files) {
           return;
         }
@@ -144,10 +164,12 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       }
     });
     this.desiredSeekTimeMs = 0;
-    this.#audioContext = new OfflineAudioContext(1, 48e3 / 30, 48e3);
+    this.#audioContext = new OfflineAudioContext(2, 48e3 / 30, 48e3);
     this.audioBufferTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
       args: () => [this.fetchSeekTask.value, this.seekTask.value],
       task: async ([files, segments], { signal }) => {
+        console.log("EFMedia audioBufferTask", this.outerHTML);
         if (!files) {
           return;
         }
@@ -239,6 +261,60 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     return getStartTimeMs(this);
   }
   #audioContext;
+  async fetchAudioSpanningTime(fromMs, toMs) {
+    fromMs -= this.startTimeMs;
+    toMs -= this.startTimeMs;
+    await this.trackFragmentIndexLoader.taskComplete;
+    const audioTrackId = this.defaultAudioTrackId;
+    if (!audioTrackId) {
+      console.warn("No audio track found");
+      return;
+    }
+    const audioTrackIndex = this.trackFragmentIndexLoader.value?.[audioTrackId];
+    if (!audioTrackIndex) {
+      console.warn("No audio track found");
+      return;
+    }
+    const start = audioTrackIndex.initSegment.offset;
+    const end = audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size - 1;
+    const audioInitFragmentRequest = this.fetch(
+      this.fragmentTrackPath(String(audioTrackId)),
+      {
+        headers: { Range: `bytes=${start}-${end}` }
+      }
+    );
+    const fragments = Object.values(audioTrackIndex.segments).filter(
+      (segment) => {
+        const segmentStartsBeforeEnd = segment.dts <= toMs * audioTrackIndex.timescale / 1e3;
+        const segmentEndsAfterStart = segment.dts + segment.duration >= fromMs * audioTrackIndex.timescale / 1e3;
+        return segmentStartsBeforeEnd && segmentEndsAfterStart;
+      }
+    );
+    console.log("FRAGMENTS SPANNING TIME", JSON.stringify(fragments));
+    const firstFragment = fragments[0];
+    const lastFragment = fragments[fragments.length - 1];
+    const fragmentStart = firstFragment.offset;
+    const fragmentEnd = lastFragment.offset + lastFragment.size - 1;
+    console.log("FETCHING BYTES", `bytes=${fragmentStart}-${fragmentEnd}`);
+    const audioFragmentRequest = this.fetch(
+      this.fragmentTrackPath(String(audioTrackId)),
+      {
+        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd}` }
+      }
+    );
+    const initResponse = await audioInitFragmentRequest;
+    const dataResponse = await audioFragmentRequest;
+    const initBuffer = await initResponse.arrayBuffer();
+    const dataBuffer = await dataResponse.arrayBuffer();
+    const audioBlob = new Blob([initBuffer, dataBuffer], {
+      type: "audio/mp4"
+    });
+    return {
+      blob: audioBlob,
+      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3,
+      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3
+    };
+  }
 }
 __decorateClass([
   property({ type: Number })
@@ -251,5 +327,6 @@ __decorateClass([
   state()
 ], EFMedia.prototype, "desiredSeekTimeMs", 2);
 export {
-  EFMedia
+  EFMedia,
+  deepGetMediaElements
 };

package/dist/elements/{elements → src/elements}/EFTemporal.mjs

@@ -3,6 +3,7 @@ import { property, state } from "lit/decorators.js";
 import { EFTimegroup } from "./EFTimegroup.mjs";
 import { durationConverter } from "./durationConverter.mjs";
 import { Task } from "@lit/task";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,6 +29,15 @@ const deepGetTemporalElements = (element, 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)) {
@@ -68,9 +78,13 @@ const EFTemporal = (superClass) => {
       this._offsetMs = 0;
       this.rootTimegroup = this.getRootTimegroup();
       this.frameTask = new Task(this, {
-        autoRun: false,
+        autoRun: EF_INTERACTIVE,
         args: () => [this.ownCurrentTimeMs],
         task: async ([], { signal }) => {
+          let fullyUpdated = await this.updateComplete;
+          while (!fullyUpdated) {
+            fullyUpdated = await this.updateComplete;
+          }
         }
       });
     }
@@ -111,6 +125,19 @@ const EFTemporal = (superClass) => {
     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) {
@@ -178,6 +205,7 @@ const EFTemporal = (superClass) => {
 export {
   EFTemporal,
   OwnCurrentTimeController,
+  deepGetElementsWithFrameTasks,
   deepGetTemporalElements,
   isEFTemporal,
   shallowGetTemporalElements,

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

@@ -3,6 +3,9 @@ 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 { Task } from "@lit/task";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -40,6 +43,16 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     __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 }) => {
+        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)));
@@ -83,6 +96,9 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     if (this.parentTimegroup) {
       new TimegroupController(this.parentTimegroup, this);
     }
+    if (this.shouldWrapWithWorkbench()) {
+      this.wrapWithWorkbench();
+    }
   }
   get storageKey() {
     if (!this.id) {
@@ -126,12 +142,20 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         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")) {
+      console.log("Updating animations to time", this.ownCurrentTimeMs);
       const animations = this.getAnimations({ subtree: true });
       this.style.setProperty(
         "--ef-duration",
@@ -176,9 +200,109 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       });
     }
   }
+  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) {
+    await this.waitForMediaDurations();
+    const durationMs = toMs - fromMs;
+    const audioContext = new OfflineAudioContext(
+      2,
+      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;
+        const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
+        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);
+        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;
+        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()
+        );
+        bufferSource.connect(audioContext.destination);
+        bufferSource.start(
+          ctxStartMs / 1e3,
+          offset / 1e3,
+          ctxDurationMs / 1e3
+        );
+      })
+    );
+    return await audioContext.startRendering();
+  }
+  async loadMd5Sums() {
+    const efElements = this.efElements;
+    const loaderTasks = [];
+    efElements.forEach((el) => {
+      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.styles = css`

package/dist/elements/{elements → src/elements}/EFVideo.mjs

@@ -49,12 +49,14 @@ 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();
       }
     });
@@ -63,6 +65,7 @@ let EFVideo = class extends TWMixin(EFMedia) {
       task: async ([videoAsset, seekToMs], {
         signal: _signal
       }) => {
+        console.log(`EFVideo paintTask decoderLock=${__privateGet(this, _decoderLock)}`);
         if (!videoAsset) {
           return;
         }
@@ -72,6 +75,13 @@ 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;
           }