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

package/dist/elements/src/elements/EFCaptions.js

@@ -1,14 +1,14 @@
-import { html, css, LitElement } from "lit";
 import { Task } from "@lit/task";
+import { html, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
 import { EFAudio } from "./EFAudio.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { CrossUpdateController } from "./CrossUpdateController.js";
+import { EFVideo } from "./EFVideo.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { EF_RENDERING } from "../EF_RENDERING.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,15 +19,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const stopWords = /* @__PURE__ */ new Set(["", ".", "!", "?", ","]);
 let EFCaptionsActiveWord = class extends EFTemporal(LitElement) {
   constructor() {
     super(...arguments);
     this.wordStartMs = 0;
     this.wordEndMs = 0;
     this.wordText = "";
+    this.hidden = false;
   }
   render() {
-    return html`${this.wordText}`;
+    if (stopWords.has(this.wordText)) {
+      this.hidden = true;
+      return void 0;
+    }
+    this.hidden = false;
+    return html` ${this.wordText.trim()} `;
   }
   get startTimeMs() {
     return this.wordStartMs || 0;
@@ -40,6 +47,10 @@ EFCaptionsActiveWord.styles = [
   css`
       :host {
         display: inline-block;
+        white-space: pre;
+      }
+      :host([hidden]) {
+        display: none;
       }
     `
 ];
@@ -52,18 +63,176 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: false })
 ], EFCaptionsActiveWord.prototype, "wordText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], EFCaptionsActiveWord.prototype, "hidden", 2);
 EFCaptionsActiveWord = __decorateClass([
   customElement("ef-captions-active-word")
 ], EFCaptionsActiveWord);
+let EFCaptionsSegment = class extends EFTemporal(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.segmentStartMs = 0;
+    this.segmentEndMs = 0;
+    this.segmentText = "";
+    this.hidden = false;
+  }
+  render() {
+    if (stopWords.has(this.segmentText)) {
+      this.hidden = true;
+      return void 0;
+    }
+    this.hidden = false;
+    return html`${this.segmentText}`;
+  }
+  get startTimeMs() {
+    return this.segmentStartMs || 0;
+  }
+  get durationMs() {
+    return this.segmentEndMs - this.segmentStartMs;
+  }
+};
+EFCaptionsSegment.styles = [
+  css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number, attribute: false })
+], EFCaptionsSegment.prototype, "segmentStartMs", 2);
+__decorateClass([
+  property({ type: Number, attribute: false })
+], EFCaptionsSegment.prototype, "segmentEndMs", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], EFCaptionsSegment.prototype, "segmentText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], EFCaptionsSegment.prototype, "hidden", 2);
+EFCaptionsSegment = __decorateClass([
+  customElement("ef-captions-segment")
+], EFCaptionsSegment);
+let EFCaptionsBeforeActiveWord = class extends EFCaptionsSegment {
+  constructor() {
+    super(...arguments);
+    this.hidden = false;
+    this.segmentText = "";
+    this.segmentStartMs = 0;
+    this.segmentEndMs = 0;
+  }
+  render() {
+    if (stopWords.has(this.segmentText)) {
+      this.hidden = true;
+      return void 0;
+    }
+    this.hidden = false;
+    return html` ${this.segmentText}`;
+  }
+  get startTimeMs() {
+    return this.segmentStartMs || 0;
+  }
+  get durationMs() {
+    return this.segmentEndMs - this.segmentStartMs;
+  }
+};
+EFCaptionsBeforeActiveWord.styles = [
+  css`
+      :host {
+        display: inline-block;
+        white-space: pre;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], EFCaptionsBeforeActiveWord.prototype, "hidden", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], EFCaptionsBeforeActiveWord.prototype, "segmentText", 2);
+__decorateClass([
+  property({ type: Number, attribute: false })
+], EFCaptionsBeforeActiveWord.prototype, "segmentStartMs", 2);
+__decorateClass([
+  property({ type: Number, attribute: false })
+], EFCaptionsBeforeActiveWord.prototype, "segmentEndMs", 2);
+EFCaptionsBeforeActiveWord = __decorateClass([
+  customElement("ef-captions-before-active-word")
+], EFCaptionsBeforeActiveWord);
+let EFCaptionsAfterActiveWord = class extends EFCaptionsSegment {
+  constructor() {
+    super(...arguments);
+    this.hidden = false;
+    this.segmentText = "";
+    this.segmentStartMs = 0;
+    this.segmentEndMs = 0;
+  }
+  render() {
+    if (stopWords.has(this.segmentText)) {
+      this.hidden = true;
+      return void 0;
+    }
+    this.hidden = false;
+    return html`${this.segmentText} `;
+  }
+  get startTimeMs() {
+    return this.segmentStartMs || 0;
+  }
+  get durationMs() {
+    return this.segmentEndMs - this.segmentStartMs;
+  }
+};
+EFCaptionsAfterActiveWord.styles = [
+  css`
+      :host {
+        display: inline-block;
+        white-space: pre;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], EFCaptionsAfterActiveWord.prototype, "hidden", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], EFCaptionsAfterActiveWord.prototype, "segmentText", 2);
+__decorateClass([
+  property({ type: Number, attribute: false })
+], EFCaptionsAfterActiveWord.prototype, "segmentStartMs", 2);
+__decorateClass([
+  property({ type: Number, attribute: false })
+], EFCaptionsAfterActiveWord.prototype, "segmentEndMs", 2);
+EFCaptionsAfterActiveWord = __decorateClass([
+  customElement("ef-captions-after-active-word")
+], EFCaptionsAfterActiveWord);
 let EFCaptions = class extends EFSourceMixin(
   EFTemporal(FetchMixin(LitElement)),
   { assetType: "caption_files" }
 ) {
   constructor() {
     super(...arguments);
+    this.displayMode = "segment";
+    this.contextWords = 3;
     this.targetSelector = "";
     this.wordStyle = "";
     this.activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
+    this.segmentContainers = this.getElementsByTagName("ef-captions-segment");
+    this.beforeActiveWordContainers = this.getElementsByTagName(
+      "ef-captions-before-active-word"
+    );
+    this.afterActiveWordContainers = this.getElementsByTagName(
+      "ef-captions-after-active-word"
+    );
     this.md5SumLoader = new Task(this, {
       autoRun: false,
       args: () => [this.target, this.fetch],
@@ -73,25 +242,72 @@ let EFCaptions = class extends EFSourceMixin(
         return response.headers.get("etag") ?? void 0;
       }
     });
-    this.captionsDataTask = new Task(this, {
+    this.transcriptionDataTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
+      args: () => [this.transcriptionsPath(), this.fetch],
+      task: async ([transcriptionsPath, fetch], { signal }) => {
+        if (!transcriptionsPath) {
+          return null;
+        }
+        const response = await fetch(transcriptionsPath, { signal });
+        return response.json();
+      }
+    });
+    this.fragmentIndexTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
+      args: () => [this.transcriptionDataTask.value, this.ownCurrentTimeMs],
+      task: async ([transcription, ownCurrentTimeMs]) => {
+        if (!transcription) {
+          return null;
+        }
+        const fragmentIndex = Math.floor(
+          ownCurrentTimeMs / transcription.work_slice_ms
+        );
+        return fragmentIndex;
+      }
+    });
+    this.transcriptionFragmentDataTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
-      args: () => [this.captionsPath(), this.fetch],
-      task: async ([captionsPath, fetch], { signal }) => {
-        const response = await fetch(captionsPath, { signal });
+      args: () => [
+        this.transcriptionDataTask.value,
+        this.fragmentIndexTask.value,
+        this.fetch
+      ],
+      task: async ([transcription, fragmentIndex, fetch], { signal }) => {
+        if (transcription === null || transcription === void 0 || fragmentIndex === null || fragmentIndex === void 0) {
+          return null;
+        }
+        const fragmentPath = this.transcriptionFragmentPath(
+          transcription.id,
+          fragmentIndex
+        );
+        const response = await fetch(fragmentPath, { signal });
         return response.json();
       }
     });
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
-      args: () => [this.captionsDataTask.status],
+      args: () => [this.transcriptionFragmentDataTask.status],
       task: async () => {
-        await this.captionsDataTask.taskComplete;
+        await this.transcriptionFragmentDataTask.taskComplete;
       }
     });
   }
   set target(value) {
     this.targetSelector = value;
   }
+  render() {
+    return html`<slot></slot>`;
+  }
+  transcriptionsPath() {
+    if (this.targetElement.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;
+      }
+      return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;
+    }
+    return null;
+  }
   captionsPath() {
     if (this.targetElement.assetId) {
       if (EF_RENDERING()) {
@@ -102,45 +318,66 @@ let EFCaptions = class extends EFSourceMixin(
     const targetSrc = this.targetElement.src;
     return `/@ef-captions/${targetSrc}`;
   }
+  transcriptionFragmentPath(transcriptionId, fragmentIndex) {
+    return `${this.apiHost}/api/v1/transcriptions/${transcriptionId}/fragments/${fragmentIndex}`;
+  }
   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();
+    this.updateTextContainers();
   }
-  updateActiveWord() {
-    const caption = this.captionsDataTask.value;
-    if (!caption) {
+  updateTextContainers() {
+    const transcriptionFragment = this.transcriptionFragmentDataTask.value;
+    if (!transcriptionFragment) {
       return;
     }
-    const words = [];
-    let startMs = 0;
-    let endMs = 0;
-    for (const segment of caption.segments) {
-      if (this.targetElement.trimAdjustedOwnCurrentTimeMs >= segment.start * 1e3 && this.targetElement.trimAdjustedOwnCurrentTimeMs <= segment.end * 1e3) {
-        for (const word of segment.words) {
-          if (this.targetElement.trimAdjustedOwnCurrentTimeMs >= word.start * 1e3 && this.targetElement.trimAdjustedOwnCurrentTimeMs <= word.end * 1e3) {
-            words.push(word.text);
-            startMs = word.start * 1e3;
-            endMs = word.end * 1e3;
-          }
-        }
+    const currentTimeMs = this.targetElement.trimAdjustedOwnCurrentTimeMs;
+    const currentTimeSec = currentTimeMs / 1e3;
+    const currentWord = transcriptionFragment.word_segments.find(
+      (word) => currentTimeSec >= word.start && currentTimeSec <= word.end
+    );
+    const currentSegment = transcriptionFragment.segments.find(
+      (segment) => currentTimeSec >= segment.start && currentTimeSec <= segment.end
+    );
+    for (const wordContainer of this.activeWordContainers) {
+      if (currentWord) {
+        wordContainer.wordText = currentWord.text;
+        wordContainer.wordStartMs = currentWord.start * 1e3;
+        wordContainer.wordEndMs = currentWord.end * 1e3;
       }
     }
-    for (const container of Array.from(this.activeWordContainers)) {
-      container.wordText = words.join(" ");
-      container.wordStartMs = startMs;
-      container.wordEndMs = endMs;
+    for (const segmentContainer of this.segmentContainers) {
+      if (currentSegment) {
+        segmentContainer.segmentText = currentSegment.text;
+        segmentContainer.segmentStartMs = currentSegment.start * 1e3;
+        segmentContainer.segmentEndMs = currentSegment.end * 1e3;
+      }
+    }
+    if (currentWord && currentSegment) {
+      const segmentWords = transcriptionFragment.word_segments.filter(
+        (word) => word.start >= currentSegment.start && word.end <= currentSegment.end
+      );
+      const currentWordIndex = segmentWords.findIndex(
+        (word) => word.start === currentWord.start && word.end === currentWord.end
+      );
+      if (currentWordIndex !== -1) {
+        const beforeWords = segmentWords.slice(0, currentWordIndex).map((w) => w.text.trim()).join(" ");
+        const afterWords = segmentWords.slice(currentWordIndex + 1).map((w) => w.text.trim()).join(" ");
+        for (const container of this.beforeActiveWordContainers) {
+          container.segmentText = beforeWords;
+          container.segmentStartMs = currentSegment.start * 1e3;
+          container.segmentEndMs = currentWord.start * 1e3;
+        }
+        for (const container of this.afterActiveWordContainers) {
+          container.segmentText = afterWords;
+          container.segmentStartMs = currentWord.end * 1e3;
+          container.segmentEndMs = currentSegment.end * 1e3;
+        }
+      }
     }
   }
   get targetElement() {
@@ -154,10 +391,23 @@ let EFCaptions = class extends EFSourceMixin(
 EFCaptions.styles = [
   css`
       :host {
-        display: block;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        width: fit-content;
+      }
+      ::slotted(*) {
+        margin: 0;
+        padding: 0;
       }
     `
 ];
+__decorateClass([
+  property({ type: String, attribute: "display-mode", reflect: true })
+], EFCaptions.prototype, "displayMode", 2);
+__decorateClass([
+  property({ type: Number, attribute: "context-words", reflect: true })
+], EFCaptions.prototype, "contextWords", 2);
 __decorateClass([
   property({ type: String, attribute: "target", reflect: true })
 ], EFCaptions.prototype, "targetSelector", 2);
@@ -169,5 +419,8 @@ EFCaptions = __decorateClass([
 ], EFCaptions);
 export {
   EFCaptions,
-  EFCaptionsActiveWord
+  EFCaptionsActiveWord,
+  EFCaptionsAfterActiveWord,
+  EFCaptionsBeforeActiveWord,
+  EFCaptionsSegment
 };

package/dist/elements/src/elements/EFImage.js

@@ -2,10 +2,10 @@ import { Task } from "@lit/task";
 import { html, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { FetchMixin } from "./FetchMixin.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { FetchMixin } from "./FetchMixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -59,12 +59,6 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
     });
   }
   set assetId(value) {
-    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
-      console.error(`EFMedia ${value} is not valid asset-id`);
-      throw new Error(
-        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)"
-      );
-    }
     __privateSet(this, _assetId, value);
   }
   get assetId() {
@@ -90,11 +84,7 @@ EFImage.styles = [
         display: block;
       }
       canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-        object-position: center;
+        all: inherit
       }
     `
 ];

package/dist/elements/src/elements/EFMedia.js

@@ -230,11 +230,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   }
   #assetId;
   set assetId(value) {
-    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
-      throw new Error(
-        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)"
-      );
-    }
     this.#assetId = value;
   }
   get assetId() {

package/dist/elements/src/elements/EFTemporal.js

@@ -18,15 +18,6 @@ const timegroupContext = createContext(
 );
 const isEFTemporal = (obj) => obj[EF_TEMPORAL];
 const EF_TEMPORAL = Symbol("EF_TEMPORAL");
-const deepGetTemporalElements = (element, temporals = []) => {
-  for (const child of element.children) {
-    if (isEFTemporal(child)) {
-      temporals.push(child);
-    }
-    deepGetTemporalElements(child, temporals);
-  }
-  return temporals;
-};
 const deepGetElementsWithFrameTasks = (element, elements = []) => {
   for (const child of element.children) {
     if ("frameTask" in child && child.frameTask instanceof Task) {
@@ -115,10 +106,20 @@ const EFTemporal = (superClass) => {
     get parentTimegroup() {
       return this.#parentTimegroup;
     }
+    set duration(value) {
+      if (value !== void 0) {
+        this.setAttribute("duration", value);
+      } else {
+        this.removeAttribute("duration");
+      }
+    }
     get trimStartMs() {
       return this._trimStartMs;
     }
     set trimStartMs(value) {
+      if (this._trimStartMs === value) {
+        return;
+      }
       this._trimStartMs = value;
       this.setAttribute(
         "trimstart",
@@ -136,6 +137,9 @@ const EFTemporal = (superClass) => {
       return this._trimEndMs;
     }
     set trimEndMs(value) {
+      if (this._trimEndMs === value) {
+        return;
+      }
       this._trimEndMs = value;
       this.setAttribute("trimend", durationConverter.toAttribute(value / 1e3));
     }
@@ -366,7 +370,6 @@ export {
   EFTemporal,
   OwnCurrentTimeController,
   deepGetElementsWithFrameTasks,
-  deepGetTemporalElements,
   isEFTemporal,
   shallowGetTemporalElements,
   timegroupContext

package/dist/elements/src/elements/EFTimegroup.js

@@ -1,12 +1,13 @@
-import { html, css, LitElement } from "lit";
 import { provide } from "@lit/context";
 import { Task } from "@lit/task";
-import { property, customElement } from "lit/decorators.js";
 import debug from "debug";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
-import { TimegroupController } from "./TimegroupController.js";
+import { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
+import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
+import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -138,10 +139,16 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         throw new Error(`Invalid time mode: ${this.mode}`);
     }
   }
+  /**
+   * 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.
+   */
   async waitForMediaDurations() {
     return await Promise.all(
       deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete
+        (media) => media.initSegmentsLoader.taskComplete
       )
     );
   }
@@ -212,8 +219,28 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       }
     }
   }
+  get contextProvider() {
+    let parent = this.parentNode;
+    while (parent) {
+      if (isContextMixin(parent)) {
+        return parent;
+      }
+      parent = parent.parentNode;
+    }
+    return 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() {
-    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-workbench") === null && this.closest("ef-preview") === null;
+    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
   }
   wrapWithWorkbench() {
     const workbench = document.createElement("ef-workbench");
@@ -270,10 +297,8 @@ _currentTime = /* @__PURE__ */ new WeakMap();
 _EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
 addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
   await this.waitForMediaDurations();
-  const durationMs = toMs - fromMs;
   await Promise.all(
     deepGetMediaElements(this).map(async (mediaElement) => {
-      await mediaElement.trackFragmentIndexLoader.taskComplete;
       const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
       const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
       const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
@@ -284,15 +309,15 @@ addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
       if (!audio) {
         throw new Error("Failed to fetch audio");
       }
-      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-      const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-      const ctxDurationMs = ctxEndMs - ctxStartMs;
-      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
       const bufferSource = audioContext.createBufferSource();
       bufferSource.buffer = await audioContext.decodeAudioData(
         await audio.blob.arrayBuffer()
       );
       bufferSource.connect(audioContext.destination);
+      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+      const ctxEndMs = mediaElement.endTimeMs - fromMs;
+      const ctxDurationMs = ctxEndMs - ctxStartMs;
+      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
       bufferSource.start(
         ctxStartMs / 1e3,
         offset / 1e3,

package/dist/elements/src/elements/EFVideo.js

@@ -1,9 +1,9 @@
-import { css, html } from "lit";
 import { Task } from "@lit/task";
-import { createRef, ref } from "lit/directives/ref.js";
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { TWMixin } from "../gui/TWMixin.js";
+import { EFMedia } from "./EFMedia.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -85,10 +85,7 @@ let EFVideo = class extends TWMixin(EFMedia) {
     });
   }
   render() {
-    return html` <canvas
-      class="h-full w-full object-fill"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
+    return html` <canvas ${ref(this.canvasRef)}></canvas>`;
   }
   get canvasElement() {
     return this.canvasRef.value;
@@ -100,6 +97,9 @@ EFVideo.styles = [
       :host {
         display: block;
       }
+      canvas {
+        all: inherit;
+      }
     `
 ];
 EFVideo = __decorateClass([