@editframe/elements 0.11.0-beta.8 → 0.12.0-beta.1

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/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;

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 { LitElement } from 'lit';
-import { EFVideo } from './EFVideo.ts';
 import { Task } from '@lit/task';
+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: never[];
-    svgRef: Ref<SVGElement>;
+    static styles: import('lit').CSSResult[];
+    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([]));