@editframe/elements 0.15.0-beta.17 → 0.15.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.15.0-beta.17",
+  "version": "0.15.0-beta.5",
   "description": "",
   "exports": {
     ".": {
@@ -10,31 +10,26 @@
       }
     },
     "./styles.css": "./dist/style.css",
-    "./types.json": {
-      "import": {
-        "default": "./types.json"
-      }
-    }
+    "./types.json": "./dist/types.json"
   },
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "typedoc": "typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json"
+    "typedoc": "typedoc --json ./dist/types.json --plugin typedoc-plugin-zod --excludeExternals ./src && jq -c . ./dist/types.json > ./dist/types.tmp.json && mv ./dist/types.tmp.json ./dist/types.json"
   },
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.15.0-beta.17",
+    "@editframe/assets": "0.15.0-beta.5",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",
     "debug": "^4.3.5",
     "lit": "^3.1.4",
-    "mp4box": "^0.5.2",
-    "zod": "^3.24.1"
+    "mp4box": "^0.5.2"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/elements/EFMedia.ts

@@ -126,14 +126,8 @@ export class EFMedia extends EFTargetable(
   public trackFragmentIndexLoader = new Task(this, {
     args: () => [this.fragmentIndexPath(), this.fetch] as const,
     task: async ([fragmentIndexPath, fetch], { signal }) => {
-      try {
-        const response = await fetch(fragmentIndexPath, { signal });
-
-        return (await response.json()) as Record<number, TrackFragmentIndex>;
-      } catch (error) {
-        log("Failed to load track fragment index", error);
-        return undefined;
-      }
+      const response = await fetch(fragmentIndexPath, { signal });
+      return (await response.json()) as Record<number, TrackFragmentIndex>;
     },
     onComplete: () => {
       this.requestUpdate("ownCurrentTimeMs");
@@ -590,33 +584,14 @@ export class EFMedia extends EFTargetable(
     };
   }
 
-  set fftSize(value: number) {
-    const oldValue = this.fftSize;
-    this.setAttribute("fft-size", String(value));
-    this.requestUpdate("fft-size", oldValue);
-  }
-
-  set fftDecay(value: number) {
-    const oldValue = this.fftDecay;
-    this.setAttribute("fft-decay", String(value));
-    this.requestUpdate("fft-decay", oldValue);
-  }
-
-  get fftSize() {
-    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
-  }
-
-  get fftDecay() {
-    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
-  }
+  @property({ type: Number })
+  fftSize = 512; // Default FFT size
 
-  get shouldInterpolateFrequencies() {
-    if (this.hasAttribute("interpolate-frequencies")) {
-      return this.getAttribute("interpolate-frequencies") !== "false";
-    }
-    return false;
-  }
+  @property({ type: Number })
+  fftDecay = 8; // Default number of frames to analyze
 
+  private static readonly MIN_DB = -90;
+  private static readonly MAX_DB = -20;
   private static readonly DECAY_WEIGHT = 0.7;
 
   // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
@@ -641,130 +616,6 @@ export class EFMedia extends EFTargetable(
     return weights;
   }
 
-  #byteTimeDomainCache = new LRUCache<string, Uint8Array>(100);
-
-  byteTimeDomainTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-      ] as const,
-    task: async () => {
-      await this.audioBufferTask.taskComplete;
-      if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs <= 0) return null;
-
-      const currentTimeMs = this.currentSourceTimeMs;
-      const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
-      const audioBuffer = this.audioBufferTask.value.buffer;
-
-      const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
-      const cachedData = this.#byteTimeDomainCache.get(smoothedKey);
-      if (cachedData) return cachedData;
-
-      // Process multiple frames with decay, similar to the reference code
-      const framesData = await Promise.all(
-        Array.from({ length: this.fftDecay }, async (_, frameIndex) => {
-          const frameOffset = frameIndex * (1000 / 30);
-          const startTime = Math.max(
-            0,
-            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
-          );
-
-          const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
-          const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
-          if (cachedFrame) return cachedFrame;
-
-          const audioContext = new OfflineAudioContext(
-            2,
-            48000 * (1 / 30),
-            48000,
-          );
-
-          const source = audioContext.createBufferSource();
-          source.buffer = audioBuffer;
-
-          // Create analyzer for PCM data
-          const analyser = audioContext.createAnalyser();
-          analyser.fftSize = this.fftSize; // Ensure enough samples
-          analyser.minDecibels = -90;
-          analyser.maxDecibels = -20;
-
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = 2.0; // Amplify the signal
-
-          source.connect(gainNode);
-          gainNode.connect(analyser);
-          analyser.connect(audioContext.destination);
-
-          source.start(0, startTime, 1 / 30);
-
-          const dataLength = analyser.fftSize / 2;
-          try {
-            await audioContext.startRendering();
-            const frameData = new Uint8Array(dataLength);
-            analyser.getByteTimeDomainData(frameData);
-
-            // const points = frameData;
-            // Calculate RMS and midpoint values
-            const points = new Uint8Array(dataLength);
-            for (let i = 0; i < dataLength; i++) {
-              const pointSamples = frameData.slice(
-                i * (frameData.length / dataLength),
-                (i + 1) * (frameData.length / dataLength),
-              );
-
-              // Calculate RMS while preserving sign
-              const rms = Math.sqrt(
-                pointSamples.reduce((sum, sample) => {
-                  const normalized = (sample - 128) / 128;
-                  return sum + normalized * normalized;
-                }, 0) / pointSamples.length,
-              );
-
-              // Get average sign of the samples to determine direction
-              const avgSign = Math.sign(
-                pointSamples.reduce((sum, sample) => sum + (sample - 128), 0),
-              );
-
-              // Convert RMS back to byte range, preserving direction
-              points[i] = Math.min(255, Math.round(128 + avgSign * rms * 128));
-            }
-
-            this.#byteTimeDomainCache.set(cacheKey, points);
-            return points;
-          } finally {
-            source.disconnect();
-            analyser.disconnect();
-          }
-        }),
-      );
-
-      // Combine frames with decay weighting
-      const frameLength = framesData[0]?.length ?? 0;
-      const smoothedData = new Uint8Array(frameLength);
-
-      for (let i = 0; i < frameLength; i++) {
-        let weightedSum = 0;
-        let weightSum = 0;
-
-        framesData.forEach((frame, frameIndex) => {
-          const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          weightedSum += (frame[i] ?? 0) * decayWeight;
-          weightSum += decayWeight;
-        });
-
-        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
-      }
-
-      this.#byteTimeDomainCache.set(smoothedKey, smoothedData);
-      return smoothedData;
-    },
-  });
-
   #frequencyDataCache = new LRUCache<string, Uint8Array>(100);
 
   frequencyDataTask = new Task(this, {
@@ -815,23 +666,13 @@ export class EFMedia extends EFTargetable(
           );
           const analyser = audioContext.createAnalyser();
           analyser.fftSize = this.fftSize;
-          analyser.minDecibels = -90;
-          analyser.maxDecibels = -10;
-
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = 3.0;
-
-          const filter = audioContext.createBiquadFilter();
-          filter.type = "bandpass";
-          filter.frequency.value = 15000;
-          filter.Q.value = 0.05;
+          analyser.minDecibels = EFMedia.MIN_DB;
+          analyser.maxDecibels = EFMedia.MAX_DB;
 
           const audioBufferSource = audioContext.createBufferSource();
           audioBufferSource.buffer = audioBuffer;
 
-          audioBufferSource.connect(filter);
-          filter.connect(gainNode);
-          gainNode.connect(analyser);
+          audioBufferSource.connect(analyser);
           analyser.connect(audioContext.destination);
 
           audioBufferSource.start(0, startTime, 1 / 30);
@@ -861,7 +702,7 @@ export class EFMedia extends EFTargetable(
 
         framesData.forEach((frame, frameIndex) => {
           const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
+          // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
           weightedSum += frame[i]! * decayWeight;
           weightSum += decayWeight;
         });
@@ -871,7 +712,7 @@ export class EFMedia extends EFTargetable(
 
       // Apply frequency weights using instance FREQ_WEIGHTS
       smoothedData.forEach((value, i) => {
-        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
+        // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
         const freqWeight = this.FREQ_WEIGHTS[i]!;
         smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
       });
@@ -882,70 +723,8 @@ export class EFMedia extends EFTargetable(
         0,
         Math.floor(smoothedData.length / 2),
       );
-      const processedData = this.shouldInterpolateFrequencies
-        ? processFFTData(slicedData)
-        : slicedData;
-      this.#frequencyDataCache.set(smoothedKey, processedData);
-      return processedData;
+      this.#frequencyDataCache.set(smoothedKey, slicedData);
+      return slicedData;
     },
   });
 }
-
-function processFFTData(fftData: Uint8Array, zeroThresholdPercent = 0.1) {
-  // Step 1: Determine the threshold for zeros
-  const totalBins = fftData.length;
-  const zeroThresholdCount = Math.floor(totalBins * zeroThresholdPercent);
-
-  // Step 2: Interrogate the FFT output to find the cutoff point
-  let zeroCount = 0;
-  let cutoffIndex = totalBins; // Default to the end of the array
-
-  for (let i = totalBins - 1; i >= 0; i--) {
-    // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-    if (fftData[i]! < 10) {
-      zeroCount++;
-    } else {
-      // If we encounter a non-zero value, we can stop
-      if (zeroCount >= zeroThresholdCount) {
-        cutoffIndex = i + 1; // Include this index
-        break;
-      }
-    }
-  }
-
-  if (cutoffIndex < zeroThresholdCount) {
-    return fftData;
-  }
-
-  // Step 3: Resample the "good" portion of the data
-  const goodData = fftData.slice(0, cutoffIndex);
-  const resampledData = interpolateData(goodData, fftData.length);
-
-  return resampledData;
-}
-
-function interpolateData(data: Uint8Array, targetSize: number) {
-  const resampled = new Uint8Array(targetSize);
-  const dataLength = data.length;
-
-  for (let i = 0; i < targetSize; i++) {
-    // Calculate the corresponding index in the original data
-    const ratio = (i / (targetSize - 1)) * (dataLength - 1);
-    const index = Math.floor(ratio);
-    const fraction = ratio - index;
-
-    // Handle edge cases
-    if (index >= dataLength - 1) {
-      // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-      resampled[i] = data[dataLength - 1]!; // Last value
-    } else {
-      // Linear interpolation
-      resampled[i] = Math.round(
-        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-        data[index]! * (1 - fraction) + data[index + 1]! * fraction,
-      );
-    }
-  }
-
-  return resampled;
-}

package/src/elements/EFWaveform.ts

@@ -45,15 +45,8 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     type: String,
     attribute: "mode",
   })
-  mode:
-    | "roundBars"
-    | "bars"
-    | "bricks"
-    | "line"
-    | "curve"
-    | "pixel"
-    | "wave"
-    | "spikes" = "bars";
+  mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave" | "spikes" =
+    "bars";
 
   @property({ type: String })
   color = "currentColor";
@@ -164,7 +157,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
+      const normalizedValue = Math.min((value / 255) * 2, 1);
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -190,7 +183,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
+      const normalizedValue = Math.min((value / 255) * 2, 1);
       const brickCount = Math.floor(normalizedValue * maxBricks);
 
       for (let j = 0; j < brickCount; j++) {
@@ -225,7 +218,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
+      const normalizedValue = Math.min((value / 255) * 2, 1);
       const height = normalizedValue * waveHeight; // Use full wave height like in drawBars
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2; // Center vertically
@@ -238,49 +231,52 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.fill(path);
   }
 
-  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
+  protected drawEqualizer(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
+    const baseline = waveHeight / 2;
+    const barWidth = (waveWidth / frequencyData.length) * 0.8;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
-    const path = new Path2D();
 
-    // Sample fewer points to make sharp angles more visible
-    const sampleRate = 1; // Only use every 4th point
+    // Create paths for baseline and bars
+    const baselinePath = new Path2D();
+    const barsPath = new Path2D();
 
-    for (let i = 0; i < frequencyData.length; i += sampleRate) {
-      const x = (i / frequencyData.length) * waveWidth;
-      const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;
+    // Draw baseline
+    baselinePath.moveTo(0, baseline);
+    baselinePath.lineTo(waveWidth, baseline);
 
-      if (i === 0) {
-        path.moveTo(x, y);
-      } else {
-        path.lineTo(x, y);
-      }
-    }
-    // Ensure we draw to the end
-    const lastX = waveWidth;
-    const lastY =
-      (1 - (frequencyData[frequencyData.length - 1] ?? 0) / 255) * waveHeight;
-    path.lineTo(lastX, lastY);
+    // Draw bars
+    frequencyData.forEach((value, i) => {
+      const height = (value / 255) * (waveHeight / 2);
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
+      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
+    });
 
-    ctx.lineWidth = this.lineWidth;
-    ctx.stroke(path);
+    // Render baseline
+    ctx.lineWidth = 2;
+    ctx.stroke(baselinePath);
+
+    // Render bars
+    ctx.fill(barsPath);
   }
 
-  protected drawCurve(
-    ctx: CanvasRenderingContext2D,
-    frequencyData: Uint8Array,
-  ) {
+  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
+
+    // Create a single Path2D object for the curve
     const path = new Path2D();
 
-    // Draw smooth curves between points using quadratic curves
     frequencyData.forEach((value, i) => {
       const x = (i / frequencyData.length) * waveWidth;
       const y = (1 - value / 255) * waveHeight;
@@ -288,11 +284,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
       if (i === 0) {
         path.moveTo(x, y);
       } else {
-        const prevX = ((i - 1) / frequencyData.length) * waveWidth;
-        const prevY = (1 - (frequencyData[i - 1] ?? 0) / 255) * waveHeight;
-        const xc = (prevX + x) / 2;
-        const yc = (prevY + y) / 2;
-        path.quadraticCurveTo(prevX, prevY, xc, yc);
+        path.lineTo(x, y);
       }
     });
 
@@ -314,7 +306,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
+      const normalizedValue = Math.min((value / 255) * 2, 1); // Updated normalization
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways
       const y = baseline - barHeight;
@@ -477,8 +469,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
       if (!ctx) return;
 
       const frequencyData = this.targetElement.frequencyDataTask.value;
-      const byteTimeData = this.targetElement.byteTimeDomainTask.value;
-      if (!frequencyData || !byteTimeData) return;
+      if (!frequencyData) return;
 
       ctx.save();
       if (this.color === "currentColor") {
@@ -499,10 +490,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
           this.drawBricks(ctx, frequencyData);
           break;
         case "line":
-          this.drawLine(ctx, byteTimeData);
-          break;
-        case "curve":
-          this.drawCurve(ctx, byteTimeData);
+          this.drawLine(ctx, frequencyData);
           break;
         case "pixel":
           this.drawPixel(ctx, frequencyData);

package/src/gui/TWMixin.ts

@@ -1,4 +1,4 @@
-import type { CSSResult, LitElement } from "lit";
+import type { LitElement } from "lit";
 // @ts-expect-error cannot figure out how to declare this module as a string
 import twStyle from "./TWMixin.css?inline";
 
@@ -21,30 +21,13 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
         );
       }
-
-      const constructorStylesheets: CSSStyleSheet[] = [];
-      const constructorStyles = (("styles" in this.constructor &&
-        this.constructor.styles) ||
-        []) as CSSResult | CSSResult[];
-
-      if (Array.isArray(constructorStyles)) {
-        for (const item of constructorStyles) {
-          if (item.styleSheet) {
-            constructorStylesheets.push(item.styleSheet);
-          }
-        }
-      } else if (constructorStyles.styleSheet) {
-        constructorStylesheets.push(constructorStyles.styleSheet);
-      }
-
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,
           ...renderRoot.adoptedStyleSheets,
-          ...constructorStylesheets,
         ];
       } else {
-        renderRoot.adoptedStyleSheets = [twSheet, ...constructorStylesheets];
+        renderRoot.adoptedStyleSheets = [twSheet];
       }
       return renderRoot;
     }

package/dist/getRenderInfo.d.ts

@@ -1,51 +0,0 @@
-import { z } from 'zod';
-export declare const RenderInfo: z.ZodObject<{
-    width: z.ZodNumber;
-    height: z.ZodNumber;
-    fps: z.ZodNumber;
-    durationMs: z.ZodNumber;
-    assets: z.ZodObject<{
-        efMedia: z.ZodRecord<z.ZodString, z.ZodAny>;
-        efCaptions: z.ZodArray<z.ZodString, "many">;
-        efImage: z.ZodArray<z.ZodString, "many">;
-    }, "strip", z.ZodTypeAny, {
-        efMedia: Record<string, any>;
-        efCaptions: string[];
-        efImage: string[];
-    }, {
-        efMedia: Record<string, any>;
-        efCaptions: string[];
-        efImage: string[];
-    }>;
-}, "strip", z.ZodTypeAny, {
-    width: number;
-    height: number;
-    fps: number;
-    durationMs: number;
-    assets: {
-        efMedia: Record<string, any>;
-        efCaptions: string[];
-        efImage: string[];
-    };
-}, {
-    width: number;
-    height: number;
-    fps: number;
-    durationMs: number;
-    assets: {
-        efMedia: Record<string, any>;
-        efCaptions: string[];
-        efImage: string[];
-    };
-}>;
-export declare const getRenderInfo: () => Promise<{
-    width: number;
-    height: number;
-    fps: number;
-    durationMs: number;
-    assets: {
-        efMedia: Record<string, any>;
-        efCaptions: string[];
-        efImage: string[];
-    };
-}>;

package/dist/getRenderInfo.js

@@ -1,72 +0,0 @@
-import { z } from "zod";
-const RenderInfo = z.object({
-  width: z.number().positive(),
-  height: z.number().positive(),
-  fps: z.number().positive(),
-  durationMs: z.number().positive(),
-  assets: z.object({
-    efMedia: z.record(z.any()),
-    efCaptions: z.array(z.string()),
-    efImage: z.array(z.string())
-  })
-});
-const getRenderInfo = async () => {
-  const rootTimeGroup = document.querySelector("ef-timegroup");
-  if (!rootTimeGroup) {
-    throw new Error("No ef-timegroup found");
-  }
-  console.error("Waiting for media durations", rootTimeGroup);
-  await rootTimeGroup.waitForMediaDurations();
-  const width = rootTimeGroup.clientWidth;
-  const height = rootTimeGroup.clientHeight;
-  const fps = 30;
-  const durationMs = Math.round(rootTimeGroup.durationMs);
-  const elements = document.querySelectorAll(
-    "ef-audio, ef-video, ef-image, ef-captions"
-  );
-  const assets = {
-    efMedia: {},
-    efCaptions: /* @__PURE__ */ new Set(),
-    efImage: /* @__PURE__ */ new Set()
-  };
-  for (const element of elements) {
-    switch (element.tagName) {
-      case "EF-AUDIO":
-      case "EF-VIDEO": {
-        const src = element.src;
-        console.error("Processing element", element.tagName, src);
-        assets.efMedia[src] = element.trackFragmentIndexLoader.value;
-        break;
-      }
-      case "EF-IMAGE": {
-        const src = element.src;
-        console.error("Processing element", element.tagName, src);
-        assets.efImage.add(src);
-        break;
-      }
-      case "EF-CAPTIONS": {
-        const src = element.targetElement?.src;
-        console.error("Processing element", element.tagName, src);
-        assets.efCaptions.add(src);
-        break;
-      }
-    }
-  }
-  const renderInfo = {
-    width,
-    height,
-    fps,
-    durationMs,
-    assets: {
-      efMedia: assets.efMedia,
-      efCaptions: Array.from(assets.efCaptions),
-      efImage: Array.from(assets.efImage)
-    }
-  };
-  console.error("Render info", renderInfo);
-  return renderInfo;
-};
-export {
-  RenderInfo,
-  getRenderInfo
-};