@editframe/elements 0.7.0-beta.9 → 0.8.0-beta.1

package/dist/assets/dist/MP4File.js

@@ -0,0 +1,170 @@
+import * as MP4Box from "mp4box";
+import debug from "debug";
+const log = debug("ef:av:mp4file");
+class MP4File extends MP4Box.ISOFile {
+  constructor() {
+    super(...arguments);
+    this.readyPromise = new Promise((resolve, reject) => {
+      this.onReady = () => resolve();
+      this.onError = reject;
+    });
+    this.waitingForSamples = [];
+    this._hasSeenLastSamples = false;
+    this._arrayBufferFileStart = 0;
+  }
+  setSegmentOptions(id, user, options) {
+    const trak = this.getTrackById(id);
+    if (trak) {
+      trak.nextSample = 0;
+      this.fragmentedTracks.push({
+        id,
+        user,
+        trak,
+        segmentStream: null,
+        nb_samples: "nbSamples" in options && options.nbSamples || 1e3,
+        rapAlignement: ("rapAlignement" in options && options.rapAlignement) ?? true
+      });
+    }
+  }
+  /**
+   * Fragments all tracks in a file into separate array buffers.
+   */
+  async fragmentAllTracks() {
+    const trackBuffers = {};
+    for await (const segment of this.fragmentIterator()) {
+      (trackBuffers[segment.track] ??= []).push(segment.data);
+    }
+    return trackBuffers;
+  }
+  async *fragmentIterator() {
+    await this.readyPromise;
+    const trackInfo = {};
+    for (const videoTrack of this.getInfo().videoTracks) {
+      trackInfo[videoTrack.id] = { index: 0, complete: false };
+      this.setSegmentOptions(videoTrack.id, null, {
+        rapAlignement: true
+      });
+    }
+    for (const audioTrack of this.getInfo().audioTracks) {
+      trackInfo[audioTrack.id] = { index: 0, complete: false };
+      const sampleRate = audioTrack.audio.sample_rate;
+      const probablePacketSize = 1024;
+      const probableFourSecondsOfSamples = Math.ceil(
+        sampleRate / probablePacketSize * 4
+      );
+      this.setSegmentOptions(audioTrack.id, null, {
+        nbSamples: probableFourSecondsOfSamples
+      });
+    }
+    const initSegments = this.initializeSegmentation();
+    for (const initSegment of initSegments) {
+      yield {
+        track: initSegment.id,
+        segment: "init",
+        data: initSegment.buffer,
+        complete: false
+      };
+    }
+    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())) {
+      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;
+          const fragTrakNextSample = trak.samples[trak.nextSample];
+          if (fragTrakNextSample) {
+            fragmentStartSamples[fragTrak.id] ||= fragTrakNextSample;
+          }
+          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 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) {
+            const trackInfoForFrag = trackInfo[fragTrak.id];
+            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");
+            }
+            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
+            };
+            trackInfoForFrag.index += 1;
+            fragTrak.segmentStream = null;
+            delete fragmentStartSamples[fragTrak.id];
+          }
+        }
+      }
+      finishedReading = await this.waitForMoreSamples();
+    }
+  }
+  waitForMoreSamples() {
+    if (this._hasSeenLastSamples) {
+      return Promise.resolve(true);
+    }
+    return new Promise((resolve) => {
+      this.waitingForSamples.push(resolve);
+    });
+  }
+  processSamples(last) {
+    this._hasSeenLastSamples = last;
+    for (const observer of this.waitingForSamples) {
+      observer(last);
+    }
+    this.waitingForSamples = [];
+  }
+}
+export {
+  MP4File
+};

package/dist/assets/dist/memoize.js

@@ -0,0 +1,14 @@
+const memoize = (_target, _propertyKey, descriptor) => {
+  const get = descriptor.get;
+  if (!get) return;
+  const memoized = /* @__PURE__ */ new WeakMap();
+  descriptor.get = function() {
+    if (!memoized.has(this)) {
+      memoized.set(this, get.call(this));
+    }
+    return memoized.get(this);
+  };
+};
+export {
+  memoize
+};

package/dist/elements/CrossUpdateController.d.ts

@@ -0,0 +1,9 @@
+import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+
+export declare class CrossUpdateController implements ReactiveController {
+    private host;
+    private target;
+    constructor(host: ReactiveControllerHost, target: LitElement);
+    hostUpdate(): void;
+    remove(): void;
+}

package/dist/elements/EFAudio.d.ts

@@ -0,0 +1,10 @@
+import { EFMedia } from './EFMedia.ts';
+import { Task } from '@lit/task';
+
+export declare class EFAudio extends EFMedia {
+    audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
+    src: string;
+    render(): import('lit-html').TemplateResult<1>;
+    get audioElement(): HTMLAudioElement | undefined;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
+}

package/dist/elements/EFCaptions.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { Task } from '@lit/task';
+import { EFVideo } from './EFVideo.ts';
+import { EFAudio } from './EFAudio.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>;
+    wordStartMs: number;
+    wordEndMs: number;
+    wordText: string;
+    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[];
+    target: null;
+    wordStyle: string;
+    activeWordContainers: HTMLCollectionOf<EFCaptionsActiveWord>;
+    captionsPath(): string;
+    protected md5SumLoader: Task<readonly [null, typeof fetch], string | undefined>;
+    private captionsDataTask;
+    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;
+    get targetElement(): EFAudio | EFVideo;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-captions": EFCaptions;
+        "ef-captions-active-word": EFCaptionsActiveWord;
+    }
+}
+export {};

package/dist/elements/EFImage.d.ts

@@ -0,0 +1,14 @@
+import { Task } from '@lit/task';
+import { LitElement } from 'lit';
+
+declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+export declare class EFImage extends EFImage_base {
+    static styles: import('lit').CSSResult[];
+    imageRef: import('lit-html/directives/ref.js').Ref<HTMLImageElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
+    render(): import('lit-html').TemplateResult<1>;
+    assetPath(): string;
+    fetchImage: Task<readonly [string, typeof fetch], void>;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
+}
+export {};

package/dist/elements/EFMedia.d.ts

@@ -0,0 +1,61 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { Task } from '@lit/task';
+import { TrackFragmentIndex, TrackSegment } from '../../../assets/src';
+import { MP4File } from '../../../assets/MP4File.js/src';
+import { VideoAsset } from '../../../assets/EncodedAsset.js/src';
+
+import type * as MP4Box from "mp4box";
+export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
+declare const EFMedia_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 EFMedia extends EFMedia_base {
+    #private;
+    static styles: import('lit').CSSResult[];
+    currentTimeMs: number;
+    efHost?: string;
+    fragmentIndexPath(): string;
+    fragmentTrackPath(trackId: string): string;
+    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex> | undefined>;
+    protected initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
+        trackId: string;
+        buffer: MP4Box.MP4ArrayBuffer;
+        mp4File: MP4File;
+    }[] | undefined>;
+    get defaultVideoTrackId(): number | undefined;
+    get defaultAudioTrackId(): number | undefined;
+    seekTask: Task<readonly [number, Record<number, TrackFragmentIndex> | undefined, {
+        trackId: string;
+        buffer: MP4Box.MP4ArrayBuffer;
+        mp4File: MP4File;
+    }[] | undefined], Record<string, {
+        segment: TrackSegment;
+        track: MP4Box.TrackInfo;
+    }> | undefined>;
+    fetchSeekTask: Task<readonly [{
+        trackId: string;
+        buffer: MP4Box.MP4ArrayBuffer;
+        mp4File: MP4File;
+    }[] | undefined, Record<string, {
+        segment: TrackSegment;
+        track: MP4Box.TrackInfo;
+    }> | undefined, typeof fetch], Record<string, File> | undefined>;
+    videoAssetTask: Task<readonly [Record<string, File> | undefined], VideoAsset | undefined>;
+    desiredSeekTimeMs: number;
+    protected executeSeek(seekToMs: number): Promise<void>;
+    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;
+    }> | undefined], {
+        buffer: AudioBuffer;
+        startOffsetMs: number;
+    } | undefined>;
+    fetchAudioSpanningTime(fromMs: number, toMs: number): Promise<{
+        blob: Blob;
+        startMs: number;
+        endMs: number;
+    } | undefined>;
+}
+export {};

package/dist/elements/EFSourceMixin.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+
+export declare class EFSourceMixinInterface {
+    productionSrc(): string;
+    src: string;
+}
+interface EFSourceMixinOptions {
+    assetType: string;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare function EFSourceMixin<T extends Constructor<LitElement>>(superClass: T, options: EFSourceMixinOptions): Constructor<EFSourceMixinInterface> & T;
+export {};

package/dist/elements/EFTemporal.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, ReactiveController } from 'lit';
+import { EFTimegroup } from './EFTimegroup.ts';
+import { Task } from '@lit/task';
+
+export declare const timegroupContext: {
+    __context__: EFTimegroup;
+};
+export declare class TemporalMixinInterface {
+    get hasOwnDuration(): boolean;
+    get durationMs(): number;
+    get startTimeMs(): number;
+    get startTimeWithinParentMs(): number;
+    get endTimeMs(): number;
+    get ownCurrentTimeMs(): number;
+    set duration(value: string);
+    get duration(): string;
+    parentTimegroup?: EFTimegroup;
+    rootTimegroup?: EFTimegroup;
+    frameTask: Task<readonly unknown[], unknown>;
+}
+export declare const isEFTemporal: (obj: any) => obj is TemporalMixinInterface;
+export declare const deepGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
+export declare const deepGetElementsWithFrameTasks: (element: Element, elements?: Array<HTMLElement & {
+    frameTask: Task;
+}>) => (HTMLElement & {
+    frameTask: Task;
+})[];
+export declare const shallowGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
+export declare class OwnCurrentTimeController implements ReactiveController {
+    private host;
+    private temporal;
+    constructor(host: EFTimegroup, temporal: TemporalMixinInterface & LitElement);
+    hostUpdated(): void;
+    remove(): void;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const EFTemporal: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TemporalMixinInterface> & T;
+export {};

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

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare class TestTemporal extends TestTemporal_base {
+    get hasOwnDuration(): boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-temporal": TestTemporal;
+    }
+}
+export {};

package/dist/elements/EFTimegroup.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { Task } from '@lit/task';
+
+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 {
+    #private;
+    static styles: import('lit').CSSResult;
+    _timeGroupContext: this;
+    mode: "fixed" | "sequence" | "contain";
+    set currentTime(time: number);
+    get currentTime(): number;
+    get currentTimeMs(): number;
+    set currentTimeMs(ms: number);
+    crossoverMs: number;
+    render(): import('lit-html').TemplateResult<1>;
+    maybeLoadTimeFromLocalStorage(): number;
+    connectedCallback(): void;
+    get storageKey(): string;
+    get crossoverStartMs(): number;
+    get crossoverEndMs(): number;
+    get durationMs(): number;
+    waitForMediaDurations(): Promise<(Record<number, import('packages/assets/dist/Probe.js').TrackFragmentIndex> | undefined)[]>;
+    get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    shouldWrapWithWorkbench(): boolean;
+    wrapWithWorkbench(): void;
+    get hasOwnDuration(): boolean;
+    get efElements(): Element[];
+    renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
+    loadMd5Sums(): Promise<void>;
+    frameTask: Task<readonly [number, number], void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-timegroup": EFTimegroup & Element;
+    }
+}
+export {};

package/dist/elements/EFVideo.d.ts

@@ -0,0 +1,14 @@
+import { Task } from '@lit/task';
+import { EFMedia } from './EFMedia.ts';
+
+declare const EFVideo_base: typeof EFMedia;
+export declare class EFVideo extends EFVideo_base {
+    #private;
+    static styles: import('lit').CSSResult[];
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
+    render(): import('lit-html').TemplateResult<1>;
+    get canvasElement(): HTMLCanvasElement | undefined;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
+    paintTask: Task<readonly [import('packages/assets/dist/EncodedAsset.js').VideoAsset | undefined, number], number | undefined>;
+}
+export {};

package/dist/elements/EFWaveform.d.ts

@@ -0,0 +1,30 @@
+import { EFAudio } from './EFAudio.ts';
+import { LitElement } from 'lit';
+import { EFVideo } from './EFVideo.ts';
+import { Task } from '@lit/task';
+import { Ref } from 'lit/directives/ref.js';
+
+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>;
+    createRenderRoot(): this;
+    render(): import('lit-html').TemplateResult<1>;
+    mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
+    color: string;
+    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;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
+    protected updated(): Promise<void>;
+    get targetElement(): EFAudio | EFVideo;
+}
+export {};

package/dist/elements/FetchMixin.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+
+export declare class FetchMixinInterface {
+    fetch: typeof fetch;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare function FetchMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FetchMixinInterface> & T;
+export {};

package/dist/elements/TimegroupController.d.ts

@@ -0,0 +1,14 @@
+import { ReactiveController, LitElement } from 'lit';
+import { EFTimegroup } from './EFTimegroup.ts';
+
+export declare class TimegroupController implements ReactiveController {
+    private host;
+    private child;
+    constructor(host: EFTimegroup, child: {
+        currentTimeMs: number;
+        startTimeMs?: number;
+    } & LitElement);
+    remove(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}

package/dist/elements/durationConverter.d.ts

@@ -0,0 +1,4 @@
+export declare const durationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};

package/dist/elements/parseTimeToMs.d.ts

@@ -0,0 +1 @@
+export declare const parseTimeToMs: (time: string) => number;