@editframe/elements 0.5.0-beta.3 → 0.5.0-beta.5

package/dist/elements/elements/CrossUpdateController.mjs

@@ -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/elements/elements/EFAudio.mjs

@@ -0,0 +1,37 @@
+import { html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { property, customElement } from "lit/decorators.js";
+import { EFMedia } from "./EFMedia.mjs";
+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 = "";
+  }
+  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/elements/elements/EFCaptions.mjs

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

package/dist/elements/elements/EFImage.mjs

@@ -0,0 +1,67 @@
+import { Task } from "@lit/task";
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { FetchMixin } from "./FetchMixin.mjs";
+import { EFSourceMixin } from "./EFSourceMixin.mjs";
+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 EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
+  assetType: "image_files"
+}) {
+  constructor() {
+    super(...arguments);
+    this.imageRef = createRef();
+    this.fetchImage = new Task(this, {
+      args: () => [this.assetPath(), this.fetch],
+      task: async ([assetPath, fetch], { signal }) => {
+        const response = await fetch(assetPath, { signal });
+        return URL.createObjectURL(await response.blob());
+      }
+    });
+    this.frameTask = new Task(this, {
+      args: () => [this.fetchImage.status],
+      task: async () => {
+        await this.fetchImage.taskComplete;
+      }
+    });
+  }
+  render() {
+    return html`<img ${ref(this.imageRef)} src="${this.fetchImage.value}" />`;
+  }
+  assetPath() {
+    if (this.src.startsWith("http")) {
+      return this.src;
+    }
+    return `/@ef-image/${this.src}`;
+  }
+};
+EFImage.styles = [
+  css`
+      :host {
+        display: block;
+      }
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+        object-position: center;
+      }
+    `
+];
+EFImage = __decorateClass([
+  customElement("ef-image")
+], EFImage);
+export {
+  EFImage
+};

package/dist/elements/elements/EFMedia.mjs

@@ -0,0 +1,255 @@
+import { css, LitElement } from "lit";
+import { EFTemporal } from "./EFTemporal.mjs";
+import { property, state } from "lit/decorators.js";
+import { deepArrayEquals } from "@lit/task/deep-equals.js";
+import { Task } from "@lit/task";
+import { MP4File } from "../../editor/util/MP4File.mjs";
+import { getStartTimeMs } from "./util.mjs";
+import { VideoAsset } from "../../editor/util/EncodedAsset/EncodedAsset.mjs";
+import { FetchMixin } from "./FetchMixin.mjs";
+import { apiHostContext } from "../gui/EFWorkbench.mjs";
+import { consume } from "@lit/context";
+import { EFSourceMixin } from "./EFSourceMixin.mjs";
+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;
+};
+class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
+  assetType: "isobmff_files"
+}) {
+  constructor() {
+    super(...arguments);
+    this.currentTimeMs = 0;
+    this.trackFragmentIndexLoader = new Task(this, {
+      args: () => [this.fragmentIndexPath(), this.fetch],
+      task: async ([fragmentIndexPath, fetch], { signal }) => {
+        const response = await fetch(fragmentIndexPath, { signal });
+        return await response.json();
+      },
+      onComplete: () => {
+        this.requestUpdate("ownCurrentTimeMs");
+        this.parentTimegroup?.requestUpdate("ownCurrentTimeMs");
+      }
+    });
+    this.initSegmentsLoader = new Task(this, {
+      args: () => [this.trackFragmentIndexLoader.value, this.src, this.fetch],
+      task: async ([fragmentIndex, _src, fetch], { signal }) => {
+        if (!fragmentIndex) {
+          return;
+        }
+        return await Promise.all(
+          Object.entries(fragmentIndex).map(async ([trackId, track]) => {
+            const start = track.initSegment.offset;
+            const end = track.initSegment.offset + track.initSegment.size - 1;
+            const response = await fetch(this.fragmentTrackPath(trackId), {
+              signal,
+              headers: { Range: `bytes=${start}-${end}` }
+            });
+            const buffer = await response.arrayBuffer();
+            buffer.fileStart = 0;
+            const mp4File = new MP4File();
+            mp4File.appendBuffer(buffer, true);
+            mp4File.flush();
+            await mp4File.readyPromise;
+            return { trackId, buffer, mp4File };
+          })
+        );
+      }
+    });
+    this.seekTask = new Task(this, {
+      args: () => [
+        this.desiredSeekTimeMs,
+        this.trackFragmentIndexLoader.value,
+        this.initSegmentsLoader.value
+      ],
+      task: async ([seekToMs, fragmentIndex, initSegments], { signal }) => {
+        if (fragmentIndex === void 0) {
+          return;
+        }
+        if (initSegments === void 0) {
+          return;
+        }
+        const result = {};
+        Object.values(fragmentIndex).forEach((index) => {
+          const track = initSegments.find((segment2) => segment2.trackId === String(index.track))?.mp4File.getInfo().tracks[0];
+          if (!track) {
+            throw new Error("Could not finding matching track");
+          }
+          const segment = index.segments.toReversed().find((segment2) => {
+            return segment2.dts / track.timescale * 1e3 <= seekToMs;
+          });
+          if (!segment) {
+            return;
+          }
+          result[index.track] = { segment, track };
+        });
+        return result;
+      }
+    });
+    this.fetchSeekTask = new Task(this, {
+      argsEqual: deepArrayEquals,
+      args: () => [this.initSegmentsLoader.value, this.seekTask.value, this.fetch],
+      task: async ([initSegments, seekResult, fetch], { signal }) => {
+        if (!initSegments) {
+          return;
+        }
+        if (!seekResult) {
+          return;
+        }
+        const files = {};
+        for (const [trackId, { segment, track }] of Object.entries(seekResult)) {
+          const start = segment.offset;
+          const end = segment.offset + segment.size;
+          const response = await fetch(this.fragmentTrackPath(trackId), {
+            signal,
+            headers: { Range: `bytes=${start}-${end}` }
+          });
+          const initSegment = Object.values(initSegments).find(
+            (initSegment2) => initSegment2.trackId === String(track.id)
+          );
+          const initBuffer = initSegment.buffer;
+          const mediaBuffer = await response.arrayBuffer();
+          files[trackId] = new File([initBuffer, mediaBuffer], "video.mp4", {
+            type: "video/mp4"
+          });
+        }
+        return files;
+      }
+    });
+    this.videoAssetTask = new Task(this, {
+      args: () => [this.fetchSeekTask.value],
+      task: async ([files], { signal }) => {
+        if (!files) {
+          return;
+        }
+        if (!this.defaultVideoTrackId) {
+          return;
+        }
+        const videoFile = files[this.defaultVideoTrackId];
+        if (!videoFile) {
+          return;
+        }
+        return await VideoAsset.createFromReadableStream(
+          "video.mp4",
+          videoFile.stream(),
+          videoFile
+        );
+      }
+    });
+    this.desiredSeekTimeMs = 0;
+    this.#audioContext = new OfflineAudioContext(1, 48e3 / 30, 48e3);
+    this.audioBufferTask = new Task(this, {
+      args: () => [this.fetchSeekTask.value, this.seekTask.value],
+      task: async ([files, segments], { signal }) => {
+        if (!files) {
+          return;
+        }
+        if (!segments) {
+          return;
+        }
+        if (!this.defaultAudioTrackId) {
+          return;
+        }
+        const segment = segments[this.defaultAudioTrackId];
+        if (!segment) {
+          return;
+        }
+        const audioFile = files[this.defaultAudioTrackId];
+        if (!audioFile) {
+          return;
+        }
+        return {
+          buffer: await this.#audioContext.decodeAudioData(
+            await audioFile.arrayBuffer()
+          ),
+          startOffsetMs: segment.segment.cts / segment.track.timescale * 1e3
+        };
+      }
+    });
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+      }
+    `
+    ];
+  }
+  // get requiredAssets() {
+  //   return { [this.md5SumLoader.value]: this.requiredAssetsPath.value ?? [] };
+  // }
+  fragmentIndexPath() {
+    if (this.getAttribute("src")?.startsWith("http")) {
+      return this.getAttribute("src") + "/index";
+    }
+    return `/@ef-track-fragment-index/${this.getAttribute("src") ?? ""}`;
+  }
+  fragmentTrackPath(trackId) {
+    if (this.getAttribute("src")?.startsWith("http")) {
+      return this.getAttribute("src").replace("files", "tracks") + `/${trackId}`;
+    }
+    return `/@ef-track/${this.getAttribute("src") ?? ""}?trackId=${trackId}`;
+  }
+  get defaultVideoTrackId() {
+    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
+      (track) => track.type === "video"
+    )?.track;
+  }
+  get defaultAudioTrackId() {
+    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
+      (track) => track.type === "audio"
+    )?.track;
+  }
+  async executeSeek(seekToMs) {
+    this.desiredSeekTimeMs = seekToMs;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("ownCurrentTimeMs")) {
+      this.executeSeek(this.ownCurrentTimeMs);
+    }
+  }
+  get hasOwnDuration() {
+    return true;
+  }
+  get durationMs() {
+    if (!this.trackFragmentIndexLoader.value) {
+      return 0;
+    }
+    const durations = Object.values(this.trackFragmentIndexLoader.value).map(
+      (track) => {
+        return track.duration / track.timescale * 1e3;
+      }
+    );
+    if (durations.length === 0) {
+      return 0;
+    }
+    return Math.max(...durations);
+  }
+  get startTimeMs() {
+    return getStartTimeMs(this);
+  }
+  #audioContext;
+}
+__decorateClass([
+  property({ type: Number })
+], EFMedia.prototype, "currentTimeMs", 2);
+__decorateClass([
+  consume({ context: apiHostContext, subscribe: true }),
+  state()
+], EFMedia.prototype, "efHost", 2);
+__decorateClass([
+  state()
+], EFMedia.prototype, "desiredSeekTimeMs", 2);
+export {
+  EFMedia
+};

package/dist/elements/elements/EFSourceMixin.mjs

@@ -0,0 +1,57 @@
+import { consume } from "@lit/context";
+import { apiHostContext } from "../gui/EFWorkbench.mjs";
+import { state } from "lit/decorators/state.js";
+import { Task } from "@lit/task";
+import { property } from "lit/decorators/property.js";
+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;
+};
+function EFSourceMixin(superClass, options) {
+  class EFSourceElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.src = "";
+      this.md5SumLoader = new Task(this, {
+        autoRun: false,
+        args: () => [this.src],
+        task: async ([src], { signal }) => {
+          const md5Path = `/@ef-asset/${src}`;
+          const response = await fetch(md5Path, { method: "HEAD", signal });
+          return response.headers.get("etag") ?? void 0;
+        }
+      });
+    }
+    productionSrc() {
+      if (!this.md5SumLoader.value) {
+        throw new Error(
+          `MD5 sum not available for ${this}. Cannot generate production URL`
+        );
+      }
+      if (!this.efHost) {
+        throw new Error(
+          `efHost not available for ${this}. Cannot generate production URL`
+        );
+      }
+      return `${this.efHost}/api/video2/${options.assetType}/${this.md5SumLoader.value}`;
+    }
+  }
+  __decorateClass([
+    consume({ context: apiHostContext, subscribe: true }),
+    state()
+  ], EFSourceElement.prototype, "efHost", 2);
+  __decorateClass([
+    property({ type: String })
+  ], EFSourceElement.prototype, "src", 2);
+  return EFSourceElement;
+}
+export {
+  EFSourceMixin
+};