@editframe/elements 0.5.0-beta.9 → 0.6.0-beta.1

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.mjs → EFAudio.js}

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { property, customElement } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia.mjs";
+import { EFMedia } from "./EFMedia.js";
 import { Task } from "@lit/task";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -0,0 +1,171 @@
+"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() {
+    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
+      return this.src.replace("isobmff", "caption");
+    }
+    return `/@ef-captions/${this.targetElement.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.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) {
+        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;
+          }
+        });
+      }
+    }
+    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,39 @@
+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>;
+    productionSrc(): string;
+    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[] | undefined;
+    get targetElement(): EFAudio | EFVideo;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-captions": EFCaptions;
+        "ef-captions-active-word": EFCaptionsActiveWord;
+    }
+}
+export {};

package/dist/packages/elements/src/elements/{EFCaptions.mjs → EFCaptions.js}

@@ -1,13 +1,13 @@
-import { EFAudio } from "./EFAudio.mjs";
+import { EFAudio } from "./EFAudio.js";
 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";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
+import { EFVideo } from "./EFVideo.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { FetchMixin } from "./FetchMixin.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -124,9 +124,9 @@ let EFCaptions = class extends EFSourceMixin(
       return;
     }
     const words = [];
-    let startMs;
-    let endMs;
-    caption.segments.forEach((segment) => {
+    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) {
         return segment.words.map((word) => {
           if (this.targetElement.ownCurrentTimeMs >= word.start * 1e3 && this.targetElement.ownCurrentTimeMs <= word.end * 1e3) {
@@ -136,12 +136,12 @@ let EFCaptions = class extends EFSourceMixin(
           }
         });
       }
-    });
-    Array.from(this.activeWordContainers).forEach((container) => {
+    }
+    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") ?? "");

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const task = require("@lit/task");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+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.EFImage = class EFImage extends EFSourceMixin.EFSourceMixin(FetchMixin.FetchMixin(lit.LitElement), {
+  assetType: "image_files"
+}) {
+  constructor() {
+    super(...arguments);
+    this.imageRef = ref_js.createRef();
+    this.canvasRef = ref_js.createRef();
+    this.fetchImage = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.assetPath(), this.fetch],
+      task: async ([assetPath, fetch], { signal }) => {
+        const response = await fetch(assetPath, { signal });
+        const image = new Image();
+        image.src = URL.createObjectURL(await response.blob());
+        await new Promise((resolve) => {
+          image.onload = resolve;
+        });
+        if (!this.canvasRef.value) throw new Error("Canvas not ready");
+        const ctx = this.canvasRef.value.getContext("2d");
+        if (!ctx) throw new Error("Canvas 2d context not ready");
+        this.canvasRef.value.width = image.width;
+        this.canvasRef.value.height = image.height;
+        ctx.drawImage(image, 0, 0);
+      }
+    });
+    this.frameTask = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.fetchImage.status],
+      task: async () => {
+        await this.fetchImage.taskComplete;
+      }
+    });
+  }
+  render() {
+    return lit.html`<canvas ${ref_js.ref(this.canvasRef)}></canvas>`;
+  }
+  assetPath() {
+    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
+      return this.src;
+    }
+    return `/@ef-image/${this.src}`;
+  }
+};
+exports.EFImage.styles = [
+  lit.css`
+      :host {
+        display: block;
+      }
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+        object-position: center;
+      }
+    `
+];
+exports.EFImage = __decorateClass([
+  decorators_js.customElement("ef-image")
+], exports.EFImage);

package/dist/packages/elements/src/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').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+export declare class EFImage extends EFImage_base {
+    static styles: import('lit').CSSResult[];
+    imageRef: import('lit-html/directives/ref').Ref<HTMLImageElement>;
+    canvasRef: import('lit-html/directives/ref').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/packages/elements/src/elements/{EFImage.mjs → EFImage.js}

@@ -2,9 +2,9 @@ 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";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
+import { FetchMixin } from "./FetchMixin.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -32,9 +32,11 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
         await new Promise((resolve) => {
           image.onload = resolve;
         });
+        if (!this.canvasRef.value) throw new Error("Canvas not ready");
+        const ctx = this.canvasRef.value.getContext("2d");
+        if (!ctx) throw new Error("Canvas 2d context not ready");
         this.canvasRef.value.width = image.width;
         this.canvasRef.value.height = image.height;
-        const ctx = this.canvasRef.value.getContext("2d");
         ctx.drawImage(image, 0, 0);
       }
     });