@editframe/elements 0.11.0-beta.9 → 0.12.0-beta.10

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

@@ -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() {

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

@@ -10,9 +10,8 @@ import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { apiHostContext } from "../gui/apiHostContext.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
+import { EFTemporal, isEFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { getStartTimeMs } from "./util.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -62,10 +61,10 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         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 end = track.initSegment.offset + track.initSegment.size;
             const response = await fetch(this.fragmentTrackPath(trackId), {
               signal,
-              headers: { Range: `bytes=${start}-${end}` }
+              headers: { Range: `bytes=${start}-${end - 1}` }
             });
             const buffer = await response.arrayBuffer();
             buffer.fileStart = 0;
@@ -131,14 +130,14 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           const end = segment.offset + segment.size;
           const response = await fetch(this.fragmentTrackPath(trackId), {
             signal,
-            headers: { Range: `bytes=${start}-${end}` }
+            headers: { Range: `bytes=${start}-${end - 1}` }
           });
           if (nextSegment) {
             const nextStart = nextSegment.offset;
             const nextEnd = nextSegment.offset + nextSegment.size;
             fetch(this.fragmentTrackPath(trackId), {
               signal,
-              headers: { Range: `bytes=${nextStart}-${nextEnd}` }
+              headers: { Range: `bytes=${nextStart}-${nextEnd - 1}` }
             }).then(() => {
               log("Prefetched next segment");
             }).catch((error) => {
@@ -230,11 +229,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() {
@@ -275,6 +269,67 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (changedProperties.has("ownCurrentTimeMs")) {
       this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
     }
+    if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
+      const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
+      if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
+        this.style.display = "none";
+        return;
+      }
+      this.style.display = "";
+      const animations = this.getAnimations({ subtree: true });
+      this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
+      this.style.setProperty(
+        "--ef-transition--duration",
+        `${this.parentTimegroup?.overlapMs ?? 0}ms`
+      );
+      this.style.setProperty(
+        "--ef-transition-out-start",
+        `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`
+      );
+      for (const animation of animations) {
+        if (animation.playState === "running") {
+          animation.pause();
+        }
+        const effect = animation.effect;
+        if (!(effect && effect instanceof KeyframeEffect)) {
+          return;
+        }
+        const target = effect.target;
+        if (!target) {
+          return;
+        }
+        if (target.closest("ef-video, ef-audio") !== this) {
+          return;
+        }
+        if (isEFTemporal(target)) {
+          const timing = effect.getTiming();
+          const duration = Number(timing.duration) ?? 0;
+          const delay = Number(timing.delay);
+          const newTime = Math.floor(
+            Math.min(target.ownCurrentTimeMs, duration - 1 + delay)
+          );
+          if (Number.isNaN(newTime)) {
+            return;
+          }
+          animation.currentTime = newTime;
+        } else if (target) {
+          const nearestTimegroup = target.closest("ef-timegroup");
+          if (!nearestTimegroup) {
+            return;
+          }
+          const timing = effect.getTiming();
+          const duration = Number(timing.duration) ?? 0;
+          const delay = Number(timing.delay);
+          const newTime = Math.floor(
+            Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay)
+          );
+          if (Number.isNaN(newTime)) {
+            return;
+          }
+          animation.currentTime = newTime;
+        }
+      }
+    }
   }
   get hasOwnDuration() {
     return true;
@@ -305,9 +360,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     }
     return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
-  get startTimeMs() {
-    return getStartTimeMs(this);
-  }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
     if (this.sourceInMs) {
@@ -330,11 +382,11 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       return;
     }
     const start = audioTrackIndex.initSegment.offset;
-    const end = audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size - 1;
+    const end = audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size;
     const audioInitFragmentRequest = this.fetch(
       this.fragmentTrackPath(String(audioTrackId)),
       {
-        headers: { Range: `bytes=${start}-${end}` }
+        headers: { Range: `bytes=${start}-${end - 1}` }
       }
     );
     const fragments = Object.values(audioTrackIndex.segments).filter(
@@ -355,11 +407,11 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       return;
     }
     const fragmentStart = firstFragment.offset;
-    const fragmentEnd = lastFragment.offset + lastFragment.size - 1;
+    const fragmentEnd = lastFragment.offset + lastFragment.size;
     const audioFragmentRequest = this.fetch(
       this.fragmentTrackPath(String(audioTrackId)),
       {
-        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd}` }
+        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd - 1}` }
       }
     );
     const initResponse = await audioInitFragmentRequest;

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