@editframe/elements 0.5.0-beta.7 → 0.5.0-beta.9

package/dist/{editor/util/EncodedAsset → lib/av}/EncodedAsset.mjs

@@ -1,15 +1,14 @@
-import { memoize } from "../../../util/memoize.mjs";
 import * as MP4Box from "mp4box";
-import { MP4File } from "../MP4File.mjs";
+import { memoize } from "../util/memoize.mjs";
+import { MP4File } from "./MP4File.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;
+  var result = __getOwnPropDesc(target, key);
   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);
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const BUFFER_SIZE = 10;
@@ -49,7 +48,7 @@ class ISOFileAsset extends FileAsset {
 }
 __decorateClass([
   memoize
-], ISOFileAsset.prototype, "fileInfo", 1);
+], ISOFileAsset.prototype, "fileInfo");
 const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
   constructor(localName, mp4boxFile, file) {
     super(localName, file, mp4boxFile);
@@ -117,6 +116,7 @@ const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
     });
     this.decodedFrames = [];
     this.lastDecodedSample = void 0;
+    this.lastSoughtFrame?.close();
     this.lastSoughtFrame = void 0;
   }
   addEventListener(type, callback) {
@@ -268,7 +268,6 @@ const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
       codec: this.defaultVideoTrack.codec,
       codedWidth: this.defaultVideoTrack.track_width,
       codedHeight: this.defaultVideoTrack.track_height,
-      // hardwareAcceleration: "prefer-hardware",
       optimizeForLatency: true,
       description
     };
@@ -406,6 +405,9 @@ const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
     }
     this.removeEventListener("frame", maybeFrame);
     if (frame) {
+      if (this.lastSoughtFrame && !this.decodedFrames.includes(this.lastSoughtFrame)) {
+        this.lastSoughtFrame.close();
+      }
       this.lastSoughtFrame = frame;
     }
     return frame;
@@ -422,25 +424,25 @@ const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
 };
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "editsOffset", 1);
+], _VideoAsset.prototype, "editsOffset");
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "timescale", 1);
+], _VideoAsset.prototype, "timescale");
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "samples", 1);
+], _VideoAsset.prototype, "samples");
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "displayOrderedSamples", 1);
+], _VideoAsset.prototype, "displayOrderedSamples");
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "defaultVideoTrack", 1);
+], _VideoAsset.prototype, "defaultVideoTrack");
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "defaultVideoTrak", 1);
+], _VideoAsset.prototype, "defaultVideoTrak");
 __decorateClass([
   memoize
-], _VideoAsset.prototype, "duration", 1);
+], _VideoAsset.prototype, "duration");
 let VideoAsset = _VideoAsset;
 const _AudioAsset = class _AudioAsset2 extends ISOFileAsset {
   static async createFromReadableStream(id, stream, file) {
@@ -493,19 +495,19 @@ const _AudioAsset = class _AudioAsset2 extends ISOFileAsset {
 };
 __decorateClass([
   memoize
-], _AudioAsset.prototype, "defaultAudioTrack", 1);
+], _AudioAsset.prototype, "defaultAudioTrack");
 __decorateClass([
   memoize
-], _AudioAsset.prototype, "defaultAudioTrak", 1);
+], _AudioAsset.prototype, "defaultAudioTrak");
 __decorateClass([
   memoize
-], _AudioAsset.prototype, "audioCodec", 1);
+], _AudioAsset.prototype, "audioCodec");
 __decorateClass([
   memoize
-], _AudioAsset.prototype, "samplerate", 1);
+], _AudioAsset.prototype, "samplerate");
 __decorateClass([
   memoize
-], _AudioAsset.prototype, "channelCount", 1);
+], _AudioAsset.prototype, "channelCount");
 const _ImageAsset = class _ImageAsset2 extends FileAsset {
   static async createFromReadableStream(id, file) {
     if (file.size === 0) {
@@ -525,10 +527,10 @@ const _ImageAsset = class _ImageAsset2 extends FileAsset {
 };
 __decorateClass([
   memoize
-], _ImageAsset.prototype, "objectUrl", 1);
+], _ImageAsset.prototype, "objectUrl");
 __decorateClass([
   memoize
-], _ImageAsset.prototype, "format", 1);
+], _ImageAsset.prototype, "format");
 export {
   AssetNotAvailableLocally,
   FileAsset,

package/dist/{editor/util → lib/av}/MP4File.mjs

@@ -82,60 +82,59 @@ class MP4File extends MP4Box.ISOFile {
         if (trak.samples === void 0) {
           throw new Error("trak.samples is undefined");
         }
-        eachSample:
-          while (trak.nextSample < trak.samples.length) {
-            let result = void 0;
-            if (trak?.samples[trak.nextSample]) {
-              fragmentStartSamples[fragTrak.id] ||= trak.samples[trak.nextSample];
-            }
-            try {
-              result = this.createFragment(
-                fragTrak.id,
-                trak.nextSample,
-                fragTrak.segmentStream
-              );
-            } catch (error) {
-              console.log("Failed to createFragment", error);
-            }
-            if (result) {
-              fragTrak.segmentStream = result;
-              trak.nextSample++;
-            } else {
-              finishedReading = await this.waitForMoreSamples();
-              break eachSample;
-            }
-            const nextSample = trak.samples[trak.nextSample];
-            const emitSegment = (
-              // if rapAlignement is true, we emit a fragment when we have a rap sample coming up next
-              fragTrak.rapAlignement === true && nextSample?.is_sync || // if rapAlignement is false, we emit a fragment when we have the required number of samples
-              !fragTrak.rapAlignement && trak.nextSample % fragTrak.nb_samples === 0 || // // if this is the last sample, we emit the fragment
-              // finished ||
-              // if we have more samples than the number of samples requested, we emit the fragment
-              trak.nextSample >= trak.samples.length
+        eachSample: while (trak.nextSample < trak.samples.length) {
+          let result = void 0;
+          if (trak?.samples[trak.nextSample]) {
+            fragmentStartSamples[fragTrak.id] ||= trak.samples[trak.nextSample];
+          }
+          try {
+            result = this.createFragment(
+              fragTrak.id,
+              trak.nextSample,
+              fragTrak.segmentStream
             );
-            if (emitSegment) {
-              if (trak.nextSample >= trak.samples.length) {
-                trackInfo[fragTrak.id].complete = true;
-              }
-              const startSample = fragmentStartSamples[fragTrak.id];
-              const endSample = trak.samples[trak.nextSample - 1];
-              if (!startSample || !endSample) {
-                throw new Error("startSample or endSample is undefined");
-              }
-              yield {
-                track: fragTrak.id,
-                segment: trackInfo[fragTrak.id].index,
-                data: fragTrak.segmentStream.buffer,
-                complete: trackInfo[fragTrak.id].complete,
-                cts: startSample.cts,
-                dts: startSample.dts,
-                duration: endSample.dts - startSample.dts + endSample.duration
-              };
-              trackInfo[fragTrak.id].index += 1;
-              fragTrak.segmentStream = null;
-              delete fragmentStartSamples[fragTrak.id];
+          } catch (error) {
+            console.log("Failed to createFragment", error);
+          }
+          if (result) {
+            fragTrak.segmentStream = result;
+            trak.nextSample++;
+          } else {
+            finishedReading = await this.waitForMoreSamples();
+            break eachSample;
+          }
+          const nextSample = trak.samples[trak.nextSample];
+          const emitSegment = (
+            // if rapAlignement is true, we emit a fragment when we have a rap sample coming up next
+            fragTrak.rapAlignement === true && nextSample?.is_sync || // if rapAlignement is false, we emit a fragment when we have the required number of samples
+            !fragTrak.rapAlignement && trak.nextSample % fragTrak.nb_samples === 0 || // // if this is the last sample, we emit the fragment
+            // finished ||
+            // if we have more samples than the number of samples requested, we emit the fragment
+            trak.nextSample >= trak.samples.length
+          );
+          if (emitSegment) {
+            if (trak.nextSample >= trak.samples.length) {
+              trackInfo[fragTrak.id].complete = true;
             }
+            const startSample = fragmentStartSamples[fragTrak.id];
+            const endSample = trak.samples[trak.nextSample - 1];
+            if (!startSample || !endSample) {
+              throw new Error("startSample or endSample is undefined");
+            }
+            yield {
+              track: fragTrak.id,
+              segment: trackInfo[fragTrak.id].index,
+              data: fragTrak.segmentStream.buffer,
+              complete: trackInfo[fragTrak.id].complete,
+              cts: startSample.cts,
+              dts: startSample.dts,
+              duration: endSample.dts - startSample.dts + endSample.duration
+            };
+            trackInfo[fragTrak.id].index += 1;
+            fragTrak.segmentStream = null;
+            delete fragmentStartSamples[fragTrak.id];
           }
+        }
       }
       finishedReading = await this.waitForMoreSamples();
     }

package/dist/{util → lib/util}/memoize.mjs

@@ -1,7 +1,6 @@
 const memoize = (_target, _propertyKey, descriptor) => {
   const get = descriptor.get;
-  if (!get)
-    return;
+  if (!get) return;
   const memoized = /* @__PURE__ */ new WeakMap();
   descriptor.get = function() {
     if (!memoized.has(this)) {

package/dist/packages/elements/src/EF_FRAMEGEN.mjs

@@ -0,0 +1,183 @@
+import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.mjs";
+import { awaitMicrotask } from "../../../lib/util/awaitMicrotask.mjs";
+import { TaskStatus } from "@lit/task";
+import { shallowGetTimegroups } from "./elements/EFTimegroup.mjs";
+class TriggerCanvas {
+  constructor() {
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 1;
+    this.canvas.height = 1;
+    Object.assign(this.canvas.style, {
+      position: "fixed",
+      top: "0px",
+      left: "0px",
+      width: `1px`,
+      height: `1px`,
+      zIndex: "100000"
+    });
+    document.body.prepend(this.canvas);
+    this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+    this.ctx.fillStyle = "black";
+  }
+  trigger() {
+    console.log("TRIGGERING CANVAS");
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+}
+class EfFramegen {
+  constructor() {
+    this.time = 0;
+    this.frameDurationMs = 0;
+    this.initialBusyTasks = Promise.resolve([]);
+    this.frameBox = document.createElement("div");
+    this.BRIDGE = window.FRAMEGEN_BRIDGE;
+    this.triggerCanvas = new TriggerCanvas();
+    if (this.BRIDGE) {
+      this.connectToBridge();
+    }
+  }
+  log(...args) {
+    console.log("[EF_FRAMEGEN]", ...args);
+  }
+  trace(...args) {
+    console.trace("[EF_FRAMEGEN]", ...args);
+  }
+  connectToBridge() {
+    const BRIDGE = this.BRIDGE;
+    if (!BRIDGE) {
+      throw new Error("No BRIDGE when attempting to connect to bridge");
+    }
+    BRIDGE.onInitialize(async (renderId, renderOptions) => {
+      this.log("BRIDGE.onInitialize", renderId, renderOptions);
+      await this.initialize(renderId, renderOptions);
+      BRIDGE.initialized(renderId);
+    });
+    BRIDGE.onBeginFrame((renderId, frameNumber, isLast) => {
+      this.log("BRIDGE.onBeginFrame", renderId, frameNumber, isLast);
+      this.beginFrame(renderId, frameNumber, isLast);
+    });
+  }
+  async initialize(renderId, renderOptions) {
+    addEventListener("unhandledrejection", (event) => {
+      this.trace("Unhandled rejection:", event.reason);
+      if (this.BRIDGE) {
+        this.BRIDGE.error(renderId, event.reason);
+      }
+    });
+    addEventListener("error", (event) => {
+      this.trace("Uncaught error", event.error);
+      if (this.BRIDGE) {
+        this.BRIDGE.error(renderId, event.error);
+      }
+    });
+    this.renderOptions = renderOptions;
+    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;
+    this.frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
+    this.initialBusyTasks = Promise.all(
+      temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => temporal.frameTask).map((task) => task.taskComplete)
+    );
+    this.time = 0;
+    if (renderOptions.showFrameBox) {
+      Object.assign(this.frameBox.style, {
+        width: "200px",
+        height: "100px",
+        font: "30px Arial",
+        backgroundColor: "white",
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        zIndex: "100000"
+      });
+      document.body.prepend(this.frameBox);
+    }
+    this.audioBufferPromise = firstGroup.renderAudio(
+      renderOptions.encoderOptions.alignedFromUs / 1e3,
+      renderOptions.encoderOptions.alignedToUs / 1e3
+      // renderOptions.encoderOptions.fromMs,
+      // renderOptions.encoderOptions.toMs,
+    );
+    this.log("Initialized");
+  }
+  async beginFrame(renderId, frameNumber, isLast) {
+    if (this.renderOptions?.showFrameBox) {
+      this.frameBox.innerHTML = `
+        <div>Frame #${frameNumber}</div>
+        <div>${this.time.toFixed(4)}</div>
+      `;
+    }
+    const workbench = document.querySelector("ef-workbench");
+    workbench.rendering = true;
+    const timegroups = shallowGetTimegroups(workbench);
+    const temporals = deepGetElementsWithFrameTasks(workbench);
+    const firstGroup = timegroups[0];
+    this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
+    firstGroup.currentTimeMs = this.time;
+    await this.initialBusyTasks;
+    await awaitMicrotask();
+    const now = performance.now();
+    await Promise.all(
+      temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => {
+        return temporal.frameTask;
+      }).map((task) => task.taskComplete)
+    );
+    console.log(
+      `frame:${frameNumber} All tasks complete ${performance.now() - now}ms`
+    );
+    if (isLast && this.audioBufferPromise) {
+      const renderedAudio = await this.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
+          );
+        }
+      }
+      if (this.BRIDGE) {
+        this.triggerCanvas.trigger();
+        this.BRIDGE.frameReady(
+          renderId,
+          frameNumber,
+          interleavedSamples.buffer
+        );
+      } else {
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));
+        await new Promise((resolve, reject) => {
+          fileReader.onload = resolve;
+          fileReader.onerror = reject;
+        });
+        return fileReader.result;
+      }
+    } else {
+      if (this.BRIDGE) {
+        this.triggerCanvas.trigger();
+        this.BRIDGE.frameReady(renderId, frameNumber, new ArrayBuffer(0));
+      } else {
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(new Blob([]));
+        await new Promise((resolve, reject) => {
+          fileReader.onload = resolve;
+          fileReader.onerror = reject;
+        });
+        return fileReader.result;
+      }
+    }
+  }
+}
+window.EF_FRAMEGEN = new EfFramegen();
+export {
+  EfFramegen
+};

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

@@ -10,8 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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;
 };
 let EFAudio = class extends EFMedia {
@@ -28,13 +27,11 @@ let EFAudio = class extends EFMedia {
         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();
       }
     });

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

@@ -15,8 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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;
 };
 let EFCaptionsActiveWord = class extends EFTemporal(LitElement) {
@@ -68,7 +67,7 @@ let EFCaptions = class extends EFSourceMixin(
       autoRun: false,
       args: () => [this.target],
       task: async ([], { signal }) => {
-        const md5Path = `/@ef-asset/${this.targetElement.getAttribute("src") ?? ""}`;
+        const md5Path = `/@ef-asset/${this.targetElement.src ?? ""}`;
         const response = await fetch(md5Path, { method: "HEAD", signal });
         return response.headers.get("etag") ?? void 0;
       }
@@ -90,11 +89,10 @@ let EFCaptions = class extends EFSourceMixin(
     });
   }
   captionsPath() {
-    const src = this.targetElement.getAttribute("src");
-    if (src?.startsWith("http")) {
-      return src.replace("isobmff", "caption");
+    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
+      return this.src.replace("isobmff", "caption");
     }
-    return `/@ef-captions/${this.targetElement.getAttribute("src") ?? ""}`;
+    return `/@ef-captions/${this.targetElement.src ?? ""}`;
   }
   productionSrc() {
     if (!this.md5SumLoader.value) {

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

@@ -12,8 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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;
 };
 let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
@@ -51,7 +50,7 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
     return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
   assetPath() {
-    if (this.src.startsWith("http")) {
+    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
       return this.src;
     }
     return `/@ef-image/${this.src}`;

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

@@ -3,27 +3,25 @@ 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 "../../../../lib/av/MP4File.mjs";
 import { getStartTimeMs } from "./util.mjs";
-import { VideoAsset } from "../../../editor/util/EncodedAsset/EncodedAsset.mjs";
+import { VideoAsset } from "../../../../lib/av/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) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0;
   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);
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const deepGetMediaElements = (element, medias = []) => {
-  for (const child of element.children) {
+  for (const child of Array.from(element.children)) {
     if (child instanceof EFMedia) {
       medias.push(child);
     } else {
@@ -41,7 +39,6 @@ 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();
       },
@@ -54,7 +51,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       autoRun: EF_INTERACTIVE,
       args: () => [this.trackFragmentIndexLoader.value, this.src, this.fetch],
       task: async ([fragmentIndex, _src, fetch], { signal }) => {
-        console.log("EFMedia initSegmentsLoader");
         if (!fragmentIndex) {
           return;
         }
@@ -85,7 +81,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         this.initSegmentsLoader.value
       ],
       task: async ([seekToMs, fragmentIndex, initSegments], { signal }) => {
-        console.log("EFMedia seekTask");
         if (fragmentIndex === void 0) {
           return;
         }
@@ -114,7 +109,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       argsEqual: deepArrayEquals,
       args: () => [this.initSegmentsLoader.value, this.seekTask.value, this.fetch],
       task: async ([initSegments, seekResult, fetch], { signal }) => {
-        console.log("EFMedia fetchSeekTask");
         if (!initSegments) {
           return;
         }
@@ -145,7 +139,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       autoRun: EF_INTERACTIVE,
       args: () => [this.fetchSeekTask.value],
       task: async ([files], { signal }) => {
-        console.log("EFMedia videoAssetTask");
         if (!files) {
           return;
         }
@@ -156,6 +149,10 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         if (!videoFile) {
           return;
         }
+        this.videoAssetTask.value?.decodedFrames.forEach(
+          (frame) => frame.close()
+        );
+        this.videoAssetTask.value?.videoDecoder?.close();
         return await VideoAsset.createFromReadableStream(
           "video.mp4",
           videoFile.stream(),
@@ -169,7 +166,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       autoRun: EF_INTERACTIVE,
       args: () => [this.fetchSeekTask.value, this.seekTask.value],
       task: async ([files, segments], { signal }) => {
-        console.log("EFMedia audioBufferTask", this.outerHTML);
         if (!files) {
           return;
         }
@@ -207,20 +203,17 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     `
     ];
   }
-  // get requiredAssets() {
-  //   return { [this.md5SumLoader.value]: this.requiredAssetsPath.value ?? [] };
-  // }
   fragmentIndexPath() {
-    if (this.getAttribute("src")?.startsWith("http")) {
-      return this.getAttribute("src") + "/index";
+    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
+      return this.src + "/index";
     }
     return `/@ef-track-fragment-index/${this.getAttribute("src") ?? ""}`;
   }
   fragmentTrackPath(trackId) {
-    if (this.getAttribute("src")?.startsWith("http")) {
-      return this.getAttribute("src").replace("files", "tracks") + `/${trackId}`;
+    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
+      return this.src.replace("files", "tracks") + `/${trackId}`;
     }
-    return `/@ef-track/${this.getAttribute("src") ?? ""}?trackId=${trackId}`;
+    return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
   }
   get defaultVideoTrackId() {
     return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
@@ -290,12 +283,10 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         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)),
       {
@@ -318,14 +309,14 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 }
 __decorateClass([
   property({ type: Number })
-], EFMedia.prototype, "currentTimeMs", 2);
+], EFMedia.prototype, "currentTimeMs");
 __decorateClass([
   consume({ context: apiHostContext, subscribe: true }),
   state()
-], EFMedia.prototype, "efHost", 2);
+], EFMedia.prototype, "efHost");
 __decorateClass([
   state()
-], EFMedia.prototype, "desiredSeekTimeMs", 2);
+], EFMedia.prototype, "desiredSeekTimeMs");
 export {
   EFMedia,
   deepGetMediaElements