@editframe/elements 0.11.0-beta.9 → 0.12.0-beta.10

package/dist/EF_FRAMEGEN.d.ts

@@ -3,12 +3,12 @@ declare global {
     interface Window {
         EF_FRAMEGEN?: EfFramegen;
         FRAMEGEN_BRIDGE?: {
-            onInitialize: (callback: (renderId: string, renderOptions: VideoRenderOptions) => void) => void;
-            initialized(renderId: string): void;
-            onBeginFrame(callback: (renderId: string, frameNumber: number, isLast: boolean) => void): void;
+            onInitialize: (callback: (renderOptions: VideoRenderOptions) => void) => void;
+            initialized(): void;
+            onBeginFrame(callback: (frameNumber: number, isLast: boolean) => void): void;
             onTriggerCanvas(callback: () => void): void;
-            frameReady(renderId: string, frameNumber: number, audioSamples: ArrayBuffer): void;
-            error(renderId: string, error: Error): void;
+            frameReady(frameNumber: number, audioSamples: ArrayBuffer): void;
+            error(error: Error): void;
         };
     }
 }
@@ -25,19 +25,12 @@ export declare class EfFramegen {
     audioBufferPromise?: Promise<AudioBuffer>;
     renderOptions?: VideoRenderOptions;
     frameBox: HTMLDivElement;
-    BRIDGE: {
-        onInitialize: (callback: (renderId: string, renderOptions: VideoRenderOptions) => void) => void;
-        initialized(renderId: string): void;
-        onBeginFrame(callback: (renderId: string, frameNumber: number, isLast: boolean) => void): void;
-        onTriggerCanvas(callback: () => void): void;
-        frameReady(renderId: string, frameNumber: number, audioSamples: ArrayBuffer): void;
-        error(renderId: string, error: Error): void;
-    } | undefined;
+    BRIDGE: typeof window.FRAMEGEN_BRIDGE;
     triggerCanvas: TriggerCanvas;
     trace(...args: any[]): void;
     constructor();
     connectToBridge(): void;
-    initialize(renderId: string, renderOptions: VideoRenderOptions): Promise<void>;
-    beginFrame(renderId: string, frameNumber: number, isLast: boolean): Promise<string | ArrayBuffer | null | undefined>;
+    initialize(renderOptions: VideoRenderOptions): Promise<void>;
+    beginFrame(frameNumber: number, isLast: boolean): Promise<string | ArrayBuffer | null | undefined>;
 }
 export {};

package/dist/assets/src/MP4File.js

@@ -40,13 +40,13 @@ class MP4File extends MP4Box.ISOFile {
     await this.readyPromise;
     const trackInfo = {};
     for (const videoTrack of this.getInfo().videoTracks) {
-      trackInfo[videoTrack.id] = { index: 0, complete: false };
+      trackInfo[videoTrack.id] = { index: 0 };
       this.setSegmentOptions(videoTrack.id, null, {
         rapAlignement: true
       });
     }
     for (const audioTrack of this.getInfo().audioTracks) {
-      trackInfo[audioTrack.id] = { index: 0, complete: false };
+      trackInfo[audioTrack.id] = { index: 0 };
       const sampleRate = audioTrack.audio.sample_rate;
       const probablePacketSize = 1024;
       const probableFourSecondsOfSamples = Math.ceil(
@@ -61,21 +61,12 @@ class MP4File extends MP4Box.ISOFile {
       yield {
         track: initSegment.id,
         segment: "init",
-        data: initSegment.buffer,
-        complete: false
+        data: initSegment.buffer
       };
     }
     const fragmentStartSamples = {};
     let finishedReading = false;
-    const allTracksFinished = () => {
-      for (const fragmentedTrack of this.fragmentedTracks) {
-        if (!trackInfo[fragmentedTrack.id]?.complete) {
-          return false;
-        }
-      }
-      return true;
-    };
-    while (!(finishedReading && allTracksFinished())) {
+    do {
       for (const fragTrak of this.fragmentedTracks) {
         const trak = fragTrak.trak;
         if (trak.nextSample === void 0) {
@@ -84,6 +75,8 @@ class MP4File extends MP4Box.ISOFile {
         if (trak.samples === void 0) {
           throw new Error("trak.samples is undefined");
         }
+        log("trak.nextSample", fragTrak.id, trak.nextSample);
+        log("trak.samples.length", fragTrak.id, trak.samples.length);
         while (trak.nextSample < trak.samples.length) {
           let result = void 0;
           const fragTrakNextSample = trak.samples[trak.nextSample];
@@ -120,22 +113,20 @@ class MP4File extends MP4Box.ISOFile {
             if (!trackInfoForFrag) {
               throw new Error("trackInfoForFrag is undefined");
             }
-            if (trak.nextSample >= trak.samples.length) {
-              trackInfoForFrag.complete = true;
-            }
-            log(
-              `Yielding fragment #${trackInfoForFrag.index} for track=${fragTrak.id}`
-            );
             const startSample = fragmentStartSamples[fragTrak.id];
             const endSample = trak.samples[trak.nextSample - 1];
             if (!startSample || !endSample) {
               throw new Error("startSample or endSample is undefined");
             }
+            log(
+              `Yielding fragment #${trackInfoForFrag.index} for track=${fragTrak.id}`,
+              `startTime=${startSample.cts}`,
+              `endTime=${endSample.cts + endSample.duration}`
+            );
             yield {
               track: fragTrak.id,
               segment: trackInfoForFrag.index,
               data: fragTrak.segmentStream.buffer,
-              complete: trackInfoForFrag.complete,
               cts: startSample.cts,
               dts: startSample.dts,
               duration: endSample.cts - startSample.cts + endSample.duration
@@ -147,6 +138,68 @@ class MP4File extends MP4Box.ISOFile {
         }
       }
       finishedReading = await this.waitForMoreSamples();
+    } while (!finishedReading);
+    for (const fragTrak of this.fragmentedTracks) {
+      const trak = fragTrak.trak;
+      if (trak.nextSample === void 0) {
+        throw new Error("trak.nextSample is undefined");
+      }
+      if (trak.samples === void 0) {
+        throw new Error("trak.samples is undefined");
+      }
+      while (trak.nextSample < trak.samples.length) {
+        let result = void 0;
+        try {
+          result = this.createFragment(
+            fragTrak.id,
+            trak.nextSample,
+            fragTrak.segmentStream
+          );
+        } catch (error) {
+          console.error("Failed to createFragment", error);
+        }
+        if (result) {
+          fragTrak.segmentStream = result;
+          trak.nextSample++;
+        } else {
+          finishedReading = await this.waitForMoreSamples();
+          break;
+        }
+        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 we have more samples than the number of samples requested, we emit the fragment
+          trak.nextSample >= trak.samples.length
+        );
+        if (emitSegment) {
+          const trackInfoForFrag = trackInfo[fragTrak.id];
+          if (!trackInfoForFrag) {
+            throw new Error("trackInfoForFrag is undefined");
+          }
+          const startSample = fragmentStartSamples[fragTrak.id];
+          const endSample = trak.samples[trak.nextSample - 1];
+          if (!startSample || !endSample) {
+            throw new Error("startSample or endSample is undefined");
+          }
+          log(
+            `Yielding fragment #${trackInfoForFrag.index} for track=${fragTrak.id}`,
+            `startTime=${startSample.cts}`,
+            `endTime=${endSample.cts + endSample.duration}`
+          );
+          yield {
+            track: fragTrak.id,
+            segment: trackInfoForFrag.index,
+            data: fragTrak.segmentStream.buffer,
+            cts: startSample.cts,
+            dts: startSample.dts,
+            duration: endSample.cts - startSample.cts + endSample.duration
+          };
+          trackInfoForFrag.index += 1;
+          fragTrak.segmentStream = null;
+          delete fragmentStartSamples[fragTrak.id];
+        }
+      }
     }
   }
   waitForMoreSamples() {

package/dist/elements/EFCaptions.d.ts

@@ -1,38 +1,82 @@
-import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
-import { EFVideo } from './EFVideo.ts';
+import { LitElement, PropertyValueMap } from 'lit';
 import { EFAudio } from './EFAudio.ts';
+import { EFVideo } from './EFVideo.ts';
 declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1> | undefined;
     wordStartMs: number;
     wordEndMs: number;
     wordText: string;
+    hidden: boolean;
+    get startTimeMs(): number;
+    get durationMs(): number;
+}
+declare const EFCaptionsSegment_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+export declare class EFCaptionsSegment extends EFCaptionsSegment_base {
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1> | undefined;
+    segmentStartMs: number;
+    segmentEndMs: number;
+    segmentText: string;
+    hidden: boolean;
+    get startTimeMs(): number;
+    get durationMs(): number;
+}
+export declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1> | undefined;
+    hidden: boolean;
+    segmentText: string;
+    segmentStartMs: number;
+    segmentEndMs: number;
+    get startTimeMs(): number;
+    get durationMs(): number;
+}
+export declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1> | undefined;
+    hidden: boolean;
+    segmentText: string;
+    segmentStartMs: number;
+    segmentEndMs: number;
     get startTimeMs(): number;
     get durationMs(): number;
 }
 declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
+    displayMode: "word" | "segment" | "context";
+    contextWords: number;
     targetSelector: string;
     set target(value: string);
     wordStyle: string;
     activeWordContainers: HTMLCollectionOf<EFCaptionsActiveWord>;
+    segmentContainers: HTMLCollectionOf<EFCaptionsSegment>;
+    beforeActiveWordContainers: HTMLCollectionOf<EFCaptionsBeforeActiveWord>;
+    afterActiveWordContainers: HTMLCollectionOf<EFCaptionsAfterActiveWord>;
+    render(): import('lit-html').TemplateResult<1>;
+    transcriptionsPath(): string | null;
     captionsPath(): string;
     protected md5SumLoader: Task<readonly [string, typeof fetch], string | undefined>;
-    private captionsDataTask;
+    private transcriptionDataTask;
+    private transcriptionFragmentPath;
+    private fragmentIndexTask;
+    private transcriptionFragmentDataTask;
     frameTask: Task<import('@lit/task').TaskStatus[], void>;
     connectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1> | undefined;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    updateActiveWord(): void;
+    updateTextContainers(): void;
     get targetElement(): EFAudio | EFVideo;
 }
 declare global {
     interface HTMLElementTagNameMap {
         "ef-captions": EFCaptions;
         "ef-captions-active-word": EFCaptionsActiveWord;
+        "ef-captions-segment": EFCaptionsSegment;
+        "ef-captions-before-active-word": EFCaptionsBeforeActiveWord;
+        "ef-captions-after-active-word": EFCaptionsAfterActiveWord;
     }
 }
 export {};

package/dist/elements/EFMedia.d.ts

@@ -16,7 +16,7 @@ export declare class EFMedia extends EFMedia_base {
     fragmentIndexPath(): string;
     fragmentTrackPath(trackId: string): string;
     trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex>>;
-    protected initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
+    initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
         trackId: string;
         buffer: MP4Box.MP4ArrayBuffer;
         mp4File: MP4File;
@@ -47,7 +47,6 @@ export declare class EFMedia extends EFMedia_base {
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     get hasOwnDuration(): boolean;
     get durationMs(): number;
-    get startTimeMs(): number;
     audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;

package/dist/elements/EFTimegroup.browsertest.d.ts

@@ -1,4 +1,7 @@
 import { LitElement } from 'lit';
+declare const TestContext_base: (new (...args: any[]) => import('../gui/ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare class TestContext extends TestContext_base {
+}
 declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
     get hasOwnDuration(): boolean;
@@ -6,6 +9,7 @@ declare class TestTemporal extends TestTemporal_base {
 declare global {
     interface HTMLElementTagNameMap {
         "test-temporal": TestTemporal;
+        "test-context": TestContext;
     }
 }
 export {};

package/dist/elements/EFTimegroup.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
+import { LitElement, PropertyValueMap } from 'lit';
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
 declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
@@ -17,9 +17,30 @@ export declare class EFTimegroup extends EFTimegroup_base {
     connectedCallback(): void;
     get storageKey(): string;
     get durationMs(): number;
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex>[]>;
+    /**
+     * Wait for all media elements to load their initial segments.
+     * Ideally we would only need the extracted index json data, but
+     * that caused issues with constructing audio data. We had negative durations
+     * in calculations and it was not clear why.
+     */
+    waitForMediaDurations(): Promise<({
+        trackId: string;
+        buffer: import('mp4box').MP4ArrayBuffer;
+        mp4File: import('../../../assets/src/MP4File.ts').MP4File;
+    }[] | undefined)[]>;
     get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    get contextProvider(): import('../gui/ContextMixin.ts').ContextMixinInterface | null;
+    /**
+     * Returns true if the timegroup should be wrapped with a workbench.
+     *
+     * A timegroup should be wrapped with a workbench if it is the root-most timegroup
+     * and EF_INTERACTIVE is true.
+     *
+     * If the timegroup is already wrappedin a context provider like ef-preview,
+     * it should NOT be wrapped in a workbench.
+     *
+     */
     shouldWrapWithWorkbench(): boolean;
     wrapWithWorkbench(): void;
     get hasOwnDuration(): boolean;

package/dist/elements/EFWaveform.d.ts

@@ -1,12 +1,13 @@
 import { EFAudio } from './EFAudio.ts';
 import { Task } from '@lit/task';
-import { LitElement } from 'lit';
+import { LitElement, PropertyValueMap } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
 import { EFVideo } from './EFVideo.ts';
 declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
     static styles: import('lit').CSSResult[];
-    svgRef: Ref<SVGElement>;
+    canvasRef: Ref<HTMLCanvasElement>;
+    private ctx;
     createRenderRoot(): this;
     render(): import('lit-html').TemplateResult<1>;
     mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
@@ -14,16 +15,19 @@ export declare class EFWaveform extends EFWaveform_base {
     targetSelector: string;
     set target(value: string);
     connectedCallback(): void;
-    protected drawBars(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawBricks(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawLine(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawRoundBars(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawEqualizer(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawCurve(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawPixel(svg: SVGElement, frequencyData: Uint8Array): void;
-    protected drawWave(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected initCanvas(): CanvasRenderingContext2D | null;
+    protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawEqualizer(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    private lastFrameTime;
     frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
-    protected updated(): Promise<void>;
+    get durationMs(): number;
     get targetElement(): EFAudio | EFVideo;
+    protected updated(changedProperties: PropertyValueMap<this>): void;
 }
 export {};

package/dist/elements/src/EF_FRAMEGEN.js

@@ -1,8 +1,6 @@
-import debug from "debug";
 import { TaskStatus } from "@lit/task";
 import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
-const log = debug("ef:elements:EF_FRAMEGEN");
 class TriggerCanvas {
   constructor() {
     this.canvas = document.createElement("canvas");
@@ -23,7 +21,7 @@ class TriggerCanvas {
     this.ctx.fillStyle = "black";
   }
   trigger() {
-    log("TRIGGERING CANVAS");
+    console.log("TRIGGERING CANVAS");
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
 }
@@ -33,9 +31,10 @@ class EfFramegen {
     this.frameDurationMs = 0;
     this.initialBusyTasks = Promise.resolve([]);
     this.frameBox = document.createElement("div");
-    this.BRIDGE = window.FRAMEGEN_BRIDGE;
     this.triggerCanvas = new TriggerCanvas();
+    this.BRIDGE = window.FRAMEGEN_BRIDGE;
     if (this.BRIDGE) {
+      console.log("BRIDGE.constructor (connecting to bridge)");
       this.connectToBridge();
     }
   }
@@ -47,27 +46,28 @@ class EfFramegen {
     if (!BRIDGE) {
       throw new Error("No BRIDGE when attempting to connect to bridge");
     }
-    BRIDGE.onInitialize(async (renderId, renderOptions) => {
-      log("BRIDGE.onInitialize", renderId, renderOptions);
-      await this.initialize(renderId, renderOptions);
-      BRIDGE.initialized(renderId);
+    console.log("BRIDGE.connectToBridge");
+    BRIDGE.onInitialize(async (renderOptions) => {
+      console.log("BRIDGE.onInitialize", renderOptions);
+      await this.initialize(renderOptions);
+      BRIDGE.initialized();
     });
-    BRIDGE.onBeginFrame((renderId, frameNumber, isLast) => {
-      log("BRIDGE.onBeginFrame", renderId, frameNumber, isLast);
-      this.beginFrame(renderId, frameNumber, isLast);
+    BRIDGE.onBeginFrame((frameNumber, isLast) => {
+      console.log("BRIDGE.onBeginFrame", frameNumber, isLast);
+      this.beginFrame(frameNumber, isLast);
     });
   }
-  async initialize(renderId, renderOptions) {
+  async initialize(renderOptions) {
     addEventListener("unhandledrejection", (event) => {
       this.trace("Unhandled rejection:", event.reason);
       if (this.BRIDGE) {
-        this.BRIDGE.error(renderId, event.reason);
+        this.BRIDGE.error(event.reason);
       }
     });
     addEventListener("error", (event) => {
       this.trace("Uncaught error", event.error);
       if (this.BRIDGE) {
-        this.BRIDGE.error(renderId, event.error);
+        this.BRIDGE.error(event.error);
       }
     });
     this.renderOptions = renderOptions;
@@ -107,9 +107,9 @@ class EfFramegen {
       // renderOptions.encoderOptions.fromMs,
       // renderOptions.encoderOptions.toMs,
     );
-    log("Initialized");
+    console.log("Initialized");
   }
-  async beginFrame(renderId, frameNumber, isLast) {
+  async beginFrame(frameNumber, isLast) {
     if (this.renderOptions === void 0) {
       throw new Error("No renderOptions");
     }
@@ -132,18 +132,20 @@ class EfFramegen {
     }
     this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
     firstGroup.currentTimeMs = this.time;
-    log("Awaiting initialBusyTasks");
+    console.log("Awaiting initialBusyTasks");
     await this.initialBusyTasks;
-    log("Awaiting microtask");
+    console.log("Awaiting microtask");
     await new Promise(queueMicrotask);
-    log("Awaiting frame tasks");
+    console.log("Awaiting frame tasks");
     const now = performance.now();
     await Promise.all(
       temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => {
         return temporal.frameTask;
       }).map((task) => task.taskComplete)
     );
-    log(`frame:${frameNumber} All tasks complete ${performance.now() - now}ms`);
+    console.log(
+      `frame:${frameNumber} All tasks complete ${performance.now() - now}ms`
+    );
     if (isLast && this.audioBufferPromise) {
       const renderedAudio = await this.audioBufferPromise;
       const channelCount = renderedAudio.numberOfChannels;
@@ -160,11 +162,7 @@ class EfFramegen {
       }
       if (this.BRIDGE) {
         this.triggerCanvas.trigger();
-        this.BRIDGE.frameReady(
-          renderId,
-          frameNumber,
-          interleavedSamples.buffer
-        );
+        this.BRIDGE.frameReady(frameNumber, interleavedSamples.buffer);
       } else {
         const fileReader = new FileReader();
         fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));
@@ -177,7 +175,7 @@ class EfFramegen {
     } else {
       if (this.BRIDGE) {
         this.triggerCanvas.trigger();
-        this.BRIDGE.frameReady(renderId, frameNumber, new ArrayBuffer(0));
+        this.BRIDGE.frameReady(frameNumber, new ArrayBuffer(0));
       } else {
         const fileReader = new FileReader();
         fileReader.readAsDataURL(new Blob([]));