@editframe/elements 0.6.0-beta.19 → 0.6.0-beta.22

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

@@ -0,0 +1,200 @@
+import { TaskStatus } from "@lit/task";
+import { awaitMicrotask } from "../../../lib/util/awaitMicrotask.js";
+import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
+import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
+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);
+    const ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) throw new Error("Canvas 2d context not ready");
+    this.ctx = ctx;
+    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");
+    if (!workbench) {
+      throw new Error("No workbench found");
+    }
+    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 === void 0) {
+      throw new Error("No renderOptions");
+    }
+    if (this.renderOptions.showFrameBox) {
+      this.frameBox.innerHTML = `
+        <div>Frame #${frameNumber}</div>
+        <div>${this.time.toFixed(4)}</div>
+      `;
+    }
+    const workbench = document.querySelector("ef-workbench");
+    if (!workbench) {
+      throw new Error("No workbench found");
+    }
+    workbench.rendering = true;
+    const timegroups = shallowGetTimegroups(workbench);
+    const temporals = deepGetElementsWithFrameTasks(workbench);
+    const firstGroup = timegroups[0];
+    if (!firstGroup) {
+      throw new Error("No temporal elements found");
+    }
+    this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
+    firstGroup.currentTimeMs = this.time;
+    console.log("Awaiting initialBusyTasks");
+    await this.initialBusyTasks;
+    console.log("Awaiting microtask");
+    await awaitMicrotask();
+    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)
+    );
+    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/packages/elements/src/EF_INTERACTIVE.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EF_INTERACTIVE = !window.location.search.includes("EF_NONINTERACTIVE");
+exports.EF_INTERACTIVE = EF_INTERACTIVE;

package/dist/packages/elements/src/EF_INTERACTIVE.d.ts

@@ -0,0 +1 @@
+export declare const EF_INTERACTIVE: boolean;

package/dist/packages/elements/src/EF_INTERACTIVE.js

@@ -0,0 +1,4 @@
+const EF_INTERACTIVE = !window.location.search.includes("EF_NONINTERACTIVE");
+export {
+  EF_INTERACTIVE
+};

package/dist/packages/elements/src/elements/CrossUpdateController.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class CrossUpdateController {
+  constructor(host, target) {
+    this.host = host;
+    this.target = target;
+    this.host.addController(this);
+  }
+  hostUpdate() {
+    this.target.requestUpdate();
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+}
+exports.CrossUpdateController = CrossUpdateController;

package/dist/packages/elements/src/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/packages/elements/src/elements/CrossUpdateController.js

@@ -0,0 +1,16 @@
+class CrossUpdateController {
+  constructor(host, target) {
+    this.host = host;
+    this.target = target;
+    this.host.addController(this);
+  }
+  hostUpdate() {
+    this.target.requestUpdate();
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+}
+export {
+  CrossUpdateController
+};

package/dist/packages/elements/src/elements/EFAudio.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const ref_js = require("lit/directives/ref.js");
+const decorators_js = require("lit/decorators.js");
+const EFMedia = require("./EFMedia.cjs");
+const task = require("@lit/task");
+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;
+  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);
+  return result;
+};
+exports.EFAudio = class EFAudio extends EFMedia.EFMedia {
+  constructor() {
+    super(...arguments);
+    this.audioElementRef = ref_js.createRef();
+    this.src = "";
+    this.frameTask = new task.Task(this, {
+      args: () => [
+        this.trackFragmentIndexLoader.status,
+        this.initSegmentsLoader.status,
+        this.seekTask.status,
+        this.fetchSeekTask.status,
+        this.videoAssetTask.status
+      ],
+      task: async () => {
+        await this.trackFragmentIndexLoader.taskComplete;
+        await this.initSegmentsLoader.taskComplete;
+        await this.seekTask.taskComplete;
+        await this.fetchSeekTask.taskComplete;
+        await this.videoAssetTask.taskComplete;
+        this.rootTimegroup?.requestUpdate();
+      }
+    });
+  }
+  render() {
+    return lit.html`<audio ${ref_js.ref(this.audioElementRef)}></audio>`;
+  }
+  get audioElement() {
+    return this.audioElementRef.value;
+  }
+};
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.EFAudio.prototype, "src", 2);
+exports.EFAudio = __decorateClass([
+  decorators_js.customElement("ef-audio")
+], exports.EFAudio);

package/dist/packages/elements/src/elements/EFAudio.d.ts

@@ -0,0 +1,10 @@
+import { EFMedia } from './EFMedia';
+import { Task } from '@lit/task';
+
+export declare class EFAudio extends EFMedia {
+    audioElementRef: import('lit-html/directives/ref').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/packages/elements/src/elements/EFAudio.js

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { property, customElement } from "lit/decorators.js";
+import { EFMedia } from "./EFMedia.js";
+import { Task } from "@lit/task";
+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;
+  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);
+  return result;
+};
+let EFAudio = class extends EFMedia {
+  constructor() {
+    super(...arguments);
+    this.audioElementRef = createRef();
+    this.src = "";
+    this.frameTask = new Task(this, {
+      args: () => [
+        this.trackFragmentIndexLoader.status,
+        this.initSegmentsLoader.status,
+        this.seekTask.status,
+        this.fetchSeekTask.status,
+        this.videoAssetTask.status
+      ],
+      task: async () => {
+        await this.trackFragmentIndexLoader.taskComplete;
+        await this.initSegmentsLoader.taskComplete;
+        await this.seekTask.taskComplete;
+        await this.fetchSeekTask.taskComplete;
+        await this.videoAssetTask.taskComplete;
+        this.rootTimegroup?.requestUpdate();
+      }
+    });
+  }
+  render() {
+    return html`<audio ${ref(this.audioElementRef)}></audio>`;
+  }
+  get audioElement() {
+    return this.audioElementRef.value;
+  }
+};
+__decorateClass([
+  property({ type: String })
+], EFAudio.prototype, "src", 2);
+EFAudio = __decorateClass([
+  customElement("ef-audio")
+], EFAudio);
+export {
+  EFAudio
+};

package/dist/packages/elements/src/elements/EFCaptions.cjs

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EFAudio = require("./EFAudio.cjs");
+const lit = require("lit");
+const task = require("@lit/task");
+const decorators_js = require("lit/decorators.js");
+const EFVideo = require("./EFVideo.cjs");
+const EFTemporal = require("./EFTemporal.cjs");
+const CrossUpdateController = require("./CrossUpdateController.cjs");
+const FetchMixin = require("./FetchMixin.cjs");
+const EFSourceMixin = require("./EFSourceMixin.cjs");
+const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
+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;
+  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);
+  return result;
+};
+exports.EFCaptionsActiveWord = class EFCaptionsActiveWord extends EFTemporal.EFTemporal(lit.LitElement) {
+  constructor() {
+    super(...arguments);
+    this.wordStartMs = 0;
+    this.wordEndMs = 0;
+    this.wordText = "";
+  }
+  render() {
+    return lit.html`${this.wordText}`;
+  }
+  get startTimeMs() {
+    return this.wordStartMs || 0;
+  }
+  get durationMs() {
+    return this.wordEndMs - this.wordStartMs;
+  }
+};
+exports.EFCaptionsActiveWord.styles = [
+  lit.css`
+      :host {
+        display: inline-block;
+      }
+    `
+];
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: false })
+], exports.EFCaptionsActiveWord.prototype, "wordStartMs", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: false })
+], exports.EFCaptionsActiveWord.prototype, "wordEndMs", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.EFCaptionsActiveWord.prototype, "wordText", 2);
+exports.EFCaptionsActiveWord = __decorateClass([
+  decorators_js.customElement("ef-captions-active-word")
+], exports.EFCaptionsActiveWord);
+exports.EFCaptions = class EFCaptions extends EFSourceMixin.EFSourceMixin(
+  EFTemporal.EFTemporal(FetchMixin.FetchMixin(lit.LitElement)),
+  { assetType: "caption_files" }
+) {
+  constructor() {
+    super(...arguments);
+    this.target = null;
+    this.wordStyle = "";
+    this.activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
+    this.md5SumLoader = new task.Task(this, {
+      autoRun: false,
+      args: () => [this.target],
+      task: async ([], { signal }) => {
+        const md5Path = `/@ef-asset/${this.targetElement.src ?? ""}`;
+        const response = await fetch(md5Path, { method: "HEAD", signal });
+        return response.headers.get("etag") ?? void 0;
+      }
+    });
+    this.captionsDataTask = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.captionsPath(), this.fetch],
+      task: async ([captionsPath, fetch2], { signal }) => {
+        const response = await fetch2(captionsPath, { signal });
+        return response.json();
+      }
+    });
+    this.frameTask = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.captionsDataTask.status],
+      task: async () => {
+        await this.captionsDataTask.taskComplete;
+      }
+    });
+  }
+  captionsPath() {
+    const targetSrc = this.targetElement.src;
+    if (targetSrc.startsWith("editframe://") || targetSrc.startsWith("http")) {
+      return targetSrc.replace("isobmff", "caption");
+    }
+    return `/@ef-captions/${targetSrc}`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.targetElement) {
+      new CrossUpdateController.CrossUpdateController(this.targetElement, this);
+    }
+  }
+  render() {
+    return this.captionsDataTask.render({
+      pending: () => lit.html`<div>Generating captions data...</div>`,
+      error: () => lit.html`<div>🚫 Error generating captions data</div>`,
+      complete: () => lit.html`<slot></slot>`
+    });
+  }
+  updated(_changedProperties) {
+    this.updateActiveWord();
+  }
+  updateActiveWord() {
+    const caption = this.captionsDataTask.value;
+    if (!caption) {
+      return;
+    }
+    const words = [];
+    let startMs = 0;
+    let endMs = 0;
+    for (const segment of caption.segments) {
+      if (this.targetElement.ownCurrentTimeMs >= segment.start * 1e3 && this.targetElement.ownCurrentTimeMs <= segment.end * 1e3) {
+        for (const word of segment.words) {
+          if (this.targetElement.ownCurrentTimeMs >= word.start * 1e3 && this.targetElement.ownCurrentTimeMs <= word.end * 1e3) {
+            words.push(word.text);
+            startMs = word.start * 1e3;
+            endMs = word.end * 1e3;
+          }
+        }
+      }
+    }
+    for (const container of Array.from(this.activeWordContainers)) {
+      container.wordText = words.join(" ");
+      container.wordStartMs = startMs;
+      container.wordEndMs = endMs;
+    }
+  }
+  get targetElement() {
+    const target = document.querySelector(this.getAttribute("target") ?? "");
+    if (target instanceof EFAudio.EFAudio || target instanceof EFVideo.EFVideo) {
+      return target;
+    }
+    throw new Error("Invalid target, must be an EFAudio  or EFVideo element");
+  }
+};
+exports.EFCaptions.styles = [
+  lit.css`
+      :host {
+        display: block;
+      }
+    `
+];
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "target" })
+], exports.EFCaptions.prototype, "target", 2);
+__decorateClass([
+  decorators_js.property({ attribute: "word-style" })
+], exports.EFCaptions.prototype, "wordStyle", 2);
+exports.EFCaptions = __decorateClass([
+  decorators_js.customElement("ef-captions")
+], exports.EFCaptions);

package/dist/packages/elements/src/elements/EFCaptions.d.ts

@@ -0,0 +1,38 @@
+import { EFAudio } from './EFAudio';
+import { LitElement, PropertyValueMap } from 'lit';
+import { Task } from '@lit/task';
+import { EFVideo } from './EFVideo';
+
+declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal').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').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin').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], 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 {};