@editframe/elements 0.19.2-beta.0 → 0.20.0-beta.0

package/src/elements/EFCaptions.ts

@@ -1,4 +1,4 @@
-import { Task } from "@lit/task";
+import { Task, TaskStatus } from "@lit/task";
 import { css, html, LitElement, type PropertyValueMap } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import type { GetISOBMFFFileTranscriptionResult } from "../../../api/src/index.js";
@@ -6,23 +6,24 @@ import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { EFAudio } from "./EFAudio.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
+import { EFTemporal, flushStartTimeMsCache } from "./EFTemporal.js";
+import { flushSequenceDurationCache } from "./EFTimegroup.js";
 import { EFVideo } from "./EFVideo.js";
 import { FetchMixin } from "./FetchMixin.js";
 
-interface WordSegment {
+export interface WordSegment {
   text: string;
   start: number;
   end: number;
 }
 
-interface Segment {
+export interface Segment {
   start: number;
   end: number;
   text: string;
 }
 
-interface Caption {
+export interface Caption {
   segments: Segment[];
   word_segments: WordSegment[];
 }
@@ -36,6 +37,7 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
       :host {
         display: inline-block;
         white-space: pre;
+        transform-origin: center;
       }
       :host([hidden]) {
         display: none;
@@ -49,6 +51,12 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
       return undefined;
     }
     this.hidden = false;
+
+    // Set deterministic --ef-word-seed value based on word index
+    const seed = (this.wordIndex * 9007) % 233; // Prime numbers for better distribution
+    const seedValue = seed / 233; // Normalize to 0-1 range
+    this.style.setProperty("--ef-word-seed", seedValue.toString());
+
     return html` ${this.wordText.trim()} `;
   }
 
@@ -61,11 +69,23 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
   @property({ type: String, attribute: false })
   wordText = "";
 
+  @property({ type: Number, attribute: false })
+  wordIndex = 0;
+
   @property({ type: Boolean, reflect: true })
   hidden = false;
 
   get startTimeMs() {
-    return this.wordStartMs || 0;
+    // Get parent captions element's absolute start time, then add our local offset
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.wordStartMs || 0);
+  }
+
+  get endTimeMs() {
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.wordEndMs || 0);
   }
 
   get durationMs(): number {
@@ -108,7 +128,16 @@ export class EFCaptionsSegment extends EFTemporal(LitElement) {
   hidden = false;
 
   get startTimeMs() {
-    return this.segmentStartMs || 0;
+    // Get parent captions element's absolute start time, then add our local offset
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.segmentStartMs || 0);
+  }
+
+  get endTimeMs() {
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.segmentEndMs || 0);
   }
 
   get durationMs(): number {
@@ -152,7 +181,16 @@ export class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
   segmentEndMs = 0;
 
   get startTimeMs() {
-    return this.segmentStartMs || 0;
+    // Get parent captions element's absolute start time, then add our local offset
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.segmentStartMs || 0);
+  }
+
+  get endTimeMs() {
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.segmentEndMs || 0);
   }
 
   get durationMs(): number {
@@ -196,7 +234,16 @@ export class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
   segmentEndMs = 0;
 
   get startTimeMs() {
-    return this.segmentStartMs || 0;
+    // Get parent captions element's absolute start time, then add our local offset
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.segmentStartMs || 0);
+  }
+
+  get endTimeMs() {
+    const parentCaptions = this.closest("ef-captions") as EFCaptions;
+    const parentStartTime = parentCaptions?.startTimeMs || 0;
+    return parentStartTime + (this.segmentEndMs || 0);
   }
 
   get durationMs(): number {
@@ -212,15 +259,23 @@ export class EFCaptions extends EFSourceMixin(
   static styles = [
     css`
       :host {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
+        display: inline-flex;
         width: fit-content;
+        align-items: baseline;
       }
       ::slotted(*) {
         margin: 0;
         padding: 0;
       }
+      ::slotted(ef-captions-active-word) {
+        min-width: 0.5ch; /* Maintain minimum width when empty */
+        min-height: 1em; /* Maintain height for baseline alignment */
+      }
+      ::slotted(ef-captions-active-word[hidden]) {
+        opacity: 0; /* Hide when empty but maintain layout */
+        min-width: 0.5ch;
+        min-height: 1em;
+      }
     `,
   ];
 
@@ -240,6 +295,27 @@ export class EFCaptions extends EFSourceMixin(
   @property({ attribute: "word-style" })
   wordStyle = "";
 
+  /**
+   * URL or path to a JSON file containing custom captions data.
+   * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.
+   */
+  @property({ type: String, attribute: "captions-src", reflect: true })
+  captionsSrc = "";
+
+  /**
+   * Direct captions data object. Takes priority over captions-src and captions-script.
+   * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.
+   */
+  @property({ type: Object, attribute: false })
+  captionsData: Caption | null = null;
+
+  /**
+   * ID of a <script> element containing JSON captions data.
+   * The script's textContent should be valid JSON conforming to the Caption interface.
+   */
+  @property({ type: String, attribute: "captions-script", reflect: true })
+  captionsScript = "";
+
   activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
   segmentContainers = this.getElementsByTagName("ef-captions-segment");
   beforeActiveWordContainers = this.getElementsByTagName(
@@ -254,6 +330,9 @@ export class EFCaptions extends EFSourceMixin(
   }
 
   transcriptionsPath() {
+    if (!this.targetElement) {
+      return null;
+    }
     if (this.targetElement.assetId) {
       return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;
     }
@@ -261,6 +340,9 @@ export class EFCaptions extends EFSourceMixin(
   }
 
   captionsPath() {
+    if (!this.targetElement) {
+      return null;
+    }
     if (this.targetElement.assetId) {
       return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;
     }
@@ -272,6 +354,9 @@ export class EFCaptions extends EFSourceMixin(
     autoRun: false,
     args: () => [this.target, this.fetch] as const,
     task: async ([_target, fetch], { signal }) => {
+      if (!this.targetElement) {
+        return null;
+      }
       const md5Path = `/@ef-asset/${this.targetElement.src ?? ""}`;
       const response = await fetch(md5Path, { method: "HEAD", signal });
       return response.headers.get("etag") ?? undefined;
@@ -280,9 +365,15 @@ export class EFCaptions extends EFSourceMixin(
 
   private transcriptionDataTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.transcriptionsPath(), this.fetch] as const,
-    task: async ([transcriptionsPath, fetch], { signal }) => {
-      if (!transcriptionsPath) {
+    args: () =>
+      [
+        this.transcriptionsPath(),
+        this.fetch,
+        this.hasCustomCaptionsData,
+      ] as const,
+    task: async ([transcriptionsPath, fetch, hasCustomData], { signal }) => {
+      // Skip transcription if we have custom captions data
+      if (hasCustomData || !transcriptionsPath) {
         return null;
       }
       const response = await fetch(transcriptionsPath, { signal });
@@ -312,6 +403,53 @@ export class EFCaptions extends EFSourceMixin(
     },
   });
 
+  private customCaptionsDataTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    args: () =>
+      [
+        this.captionsSrc,
+        this.captionsData,
+        this.captionsScript,
+        this.fetch,
+      ] as const,
+    task: async (
+      [captionsSrc, captionsData, captionsScript, fetch],
+      { signal },
+    ) => {
+      // Priority: direct data > script reference > URL source
+      if (captionsData) {
+        return captionsData;
+      }
+
+      if (captionsScript) {
+        const scriptElement = document.getElementById(captionsScript);
+        if (scriptElement?.textContent) {
+          try {
+            return JSON.parse(scriptElement.textContent) as Caption;
+          } catch (error) {
+            console.error(
+              `Failed to parse captions from script #${captionsScript}:`,
+              error,
+            );
+            return null;
+          }
+        }
+      }
+
+      if (captionsSrc) {
+        try {
+          const response = await fetch(captionsSrc, { signal });
+          return (await response.json()) as Caption;
+        } catch (error) {
+          console.error(`Failed to load captions from ${captionsSrc}:`, error);
+          return null;
+        }
+      }
+
+      return null;
+    },
+  });
+
   private transcriptionFragmentDataTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () =>
@@ -338,46 +476,104 @@ export class EFCaptions extends EFSourceMixin(
     },
   });
 
+  unifiedCaptionsDataTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    args: () =>
+      [
+        this.customCaptionsDataTask.value,
+        this.transcriptionFragmentDataTask.value,
+      ] as const,
+    task: async ([_customData, _transcriptionData]) => {
+      if (this.customCaptionsDataTask.status === TaskStatus.PENDING) {
+        await this.customCaptionsDataTask.taskComplete;
+      }
+      if (this.transcriptionFragmentDataTask.status === TaskStatus.PENDING) {
+        await this.transcriptionFragmentDataTask.taskComplete;
+      }
+      return (
+        this.customCaptionsDataTask.value ||
+        this.transcriptionFragmentDataTask.value
+      );
+    },
+  });
+
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.transcriptionFragmentDataTask.status],
+    args: () => [this.unifiedCaptionsDataTask.status],
     task: async () => {
-      await this.transcriptionFragmentDataTask.taskComplete;
+      await this.unifiedCaptionsDataTask.taskComplete;
     },
   });
 
   connectedCallback() {
     super.connectedCallback();
-    if (this.targetElement) {
-      new CrossUpdateController(this.targetElement, this);
+
+    // Try to get target element safely
+    const target = this.targetSelector
+      ? document.getElementById(this.targetSelector)
+      : null;
+    if (target && (target instanceof EFAudio || target instanceof EFVideo)) {
+      new CrossUpdateController(target, this);
+    }
+    // For standalone captions with custom data, ensure proper timeline sync
+    else if (this.hasCustomCaptionsData && this.rootTimegroup) {
+      new CrossUpdateController(this.rootTimegroup, this);
     }
   }
 
   protected updated(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
     this.updateTextContainers();
+
+    // Force duration recalculation when custom captions data changes
+    if (
+      changedProperties.has("captionsData") ||
+      changedProperties.has("captionsSrc") ||
+      changedProperties.has("captionsScript")
+    ) {
+      this.requestUpdate("intrinsicDurationMs");
+
+      // Flush sequence duration cache and notify parent timegroups that child duration has changed
+      flushSequenceDurationCache();
+      flushStartTimeMsCache();
+
+      // Notify parent timegroup to recalculate its duration
+      if (this.parentTimegroup) {
+        this.parentTimegroup.requestUpdate("durationMs");
+        this.parentTimegroup.requestUpdate("currentTime");
+      }
+    }
+
+    // Update captions when timeline position changes
+    if (changedProperties.has("ownCurrentTimeMs")) {
+      this.updateTextContainers();
+    }
   }
 
   updateTextContainers() {
-    const transcriptionFragment = this.transcriptionFragmentDataTask
-      .value as Caption;
-    if (!transcriptionFragment) {
+    const captionsData = this.unifiedCaptionsDataTask.value as Caption;
+    if (!captionsData) {
       return;
     }
 
-    const currentTimeMs = this.targetElement.currentSourceTimeMs;
+    // Get current time from target element or parent timegroup
+    const currentTimeMs = this.targetElement
+      ? this.targetElement.currentSourceTimeMs
+      : this.ownCurrentTimeMs;
     const currentTimeSec = currentTimeMs / 1000;
 
     // Find the current word from word_segments
-    const currentWord = transcriptionFragment.word_segments.find(
-      (word) => currentTimeSec >= word.start && currentTimeSec <= word.end,
+    // Use exclusive end boundary to prevent overlap at exact boundaries
+    const currentWord = captionsData.word_segments.find(
+      (word) => currentTimeSec >= word.start && currentTimeSec < word.end,
     );
 
     // Find the current segment
-    const currentSegment = transcriptionFragment.segments.find(
+    // Use exclusive end boundary to prevent overlap at exact boundaries
+    const currentSegment = captionsData.segments.find(
       (segment) =>
-        currentTimeSec >= segment.start && currentTimeSec <= segment.end,
+        currentTimeSec >= segment.start && currentTimeSec < segment.end,
     );
 
     for (const wordContainer of this.activeWordContainers) {
@@ -385,6 +581,22 @@ export class EFCaptions extends EFSourceMixin(
         wordContainer.wordText = currentWord.text;
         wordContainer.wordStartMs = currentWord.start * 1000;
         wordContainer.wordEndMs = currentWord.end * 1000;
+        // Set word index for deterministic animation variation
+        const wordIndex = captionsData.word_segments.findIndex(
+          (w) =>
+            w.start === currentWord.start &&
+            w.end === currentWord.end &&
+            w.text === currentWord.text,
+        );
+        wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;
+        // Force re-render to update hidden property
+        wordContainer.requestUpdate();
+      } else {
+        // No active word - maintain layout with invisible placeholder
+        wordContainer.wordText = ""; // Empty when no active word
+        wordContainer.wordStartMs = 0;
+        wordContainer.wordEndMs = 0;
+        wordContainer.requestUpdate();
       }
     }
 
@@ -393,13 +605,18 @@ export class EFCaptions extends EFSourceMixin(
         segmentContainer.segmentText = currentSegment.text;
         segmentContainer.segmentStartMs = currentSegment.start * 1000;
         segmentContainer.segmentEndMs = currentSegment.end * 1000;
+      } else {
+        // No active segment - clear the container
+        segmentContainer.segmentText = "";
+        segmentContainer.segmentStartMs = 0;
+        segmentContainer.segmentEndMs = 0;
       }
     }
 
-    // Only process context if we have both a current word and segment
+    // Process context for both word and segment cases
     if (currentWord && currentSegment) {
       // Find all word segments that fall within the current segment's time range
-      const segmentWords = transcriptionFragment.word_segments.filter(
+      const segmentWords = captionsData.word_segments.filter(
         (word) =>
           word.start >= currentSegment.start && word.end <= currentSegment.end,
       );
@@ -423,19 +640,76 @@ export class EFCaptions extends EFSourceMixin(
           .map((w) => w.text.trim())
           .join(" ");
 
-        // Update before containers
+        // Update before containers - should be visible at the same time as active word
         for (const container of this.beforeActiveWordContainers) {
           container.segmentText = beforeWords;
-          container.segmentStartMs = currentSegment.start * 1000;
-          container.segmentEndMs = currentWord.start * 1000;
+          container.segmentStartMs = currentWord.start * 1000;
+          container.segmentEndMs = currentWord.end * 1000;
         }
 
-        // Update after containers
+        // Update after containers - should be visible at the same time as active word
         for (const container of this.afterActiveWordContainers) {
           container.segmentText = afterWords;
-          container.segmentStartMs = currentWord.end * 1000;
+          container.segmentStartMs = currentWord.start * 1000;
+          container.segmentEndMs = currentWord.end * 1000;
+        }
+      }
+    } else if (currentSegment) {
+      // No active word but we have an active segment
+      const segmentWords = captionsData.word_segments.filter(
+        (word) =>
+          word.start >= currentSegment.start && word.end <= currentSegment.end,
+      );
+
+      // Check if we're before the first word or after the last word
+      const firstWord = segmentWords[0];
+      const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;
+
+      if (isBeforeFirstWord) {
+        // Before first word starts - show all words in "after" container (they're all upcoming)
+        const allWords = segmentWords.map((w) => w.text.trim()).join(" ");
+
+        for (const container of this.beforeActiveWordContainers) {
+          container.segmentText = ""; // Nothing before yet
+          container.segmentStartMs = currentSegment.start * 1000;
+          container.segmentEndMs = currentSegment.end * 1000;
+        }
+
+        for (const container of this.afterActiveWordContainers) {
+          container.segmentText = allWords; // All words are upcoming
+          container.segmentStartMs = currentSegment.start * 1000;
+          container.segmentEndMs = currentSegment.end * 1000;
+        }
+      } else {
+        // After last word ends - show all completed words in "before" container
+        const allCompletedWords = segmentWords
+          .map((w) => w.text.trim())
+          .join(" ");
+
+        for (const container of this.beforeActiveWordContainers) {
+          container.segmentText = allCompletedWords;
+          container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
         }
+
+        for (const container of this.afterActiveWordContainers) {
+          container.segmentText = "";
+          container.segmentStartMs = currentSegment.start * 1000;
+          container.segmentEndMs = currentSegment.end * 1000;
+        }
+      }
+    } else {
+      // No active segment or word - clear all context containers
+      for (const container of this.beforeActiveWordContainers) {
+        container.segmentText = "";
+        container.segmentStartMs = 0;
+        container.segmentEndMs = 0;
+      }
+
+      for (const container of this.afterActiveWordContainers) {
+        container.segmentText = "";
+        container.segmentStartMs = 0;
+        container.segmentEndMs = 0;
       }
     }
   }
@@ -445,7 +719,70 @@ export class EFCaptions extends EFSourceMixin(
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
+    // When using custom captions data, a target is not required
+    if (this.hasCustomCaptionsData) {
+      return null;
+    }
+    return null;
+  }
+
+  get hasCustomCaptionsData(): boolean {
+    return !!(this.captionsData || this.captionsSrc || this.captionsScript);
+  }
+
+  // Follow the exact EFMedia pattern for safe duration integration
+  get intrinsicDurationMs(): number | undefined {
+    // Direct access to custom captions data - avoiding complex task dependencies
+    // Priority: direct data > script reference > external file
+    let captionsData: Caption | null = null;
+
+    if (this.captionsData) {
+      captionsData = this.captionsData;
+    } else if (this.captionsScript) {
+      const scriptElement = document.getElementById(this.captionsScript);
+      if (scriptElement?.textContent) {
+        try {
+          captionsData = JSON.parse(scriptElement.textContent) as Caption;
+        } catch {
+          // Invalid JSON, fall through to return undefined
+        }
+      }
+    } else if (this.customCaptionsDataTask.value) {
+      captionsData = this.customCaptionsDataTask.value as Caption;
+    }
+
+    if (!captionsData) {
+      return undefined;
+    }
+
+    if (
+      captionsData.segments.length === 0 &&
+      captionsData.word_segments.length === 0
+    ) {
+      return 0;
+    }
+
+    // Find the maximum end time from both segments and word_segments
+    const maxSegmentEnd =
+      captionsData.segments.length > 0
+        ? Math.max(...captionsData.segments.map((s) => s.end))
+        : 0;
+    const maxWordEnd =
+      captionsData.word_segments.length > 0
+        ? Math.max(...captionsData.word_segments.map((w) => w.end))
+        : 0;
+
+    return Math.max(maxSegmentEnd, maxWordEnd) * 1000; // Convert to milliseconds
+  }
+
+  // Follow the exact EFMedia pattern for safe duration integration
+  get hasOwnDuration(): boolean {
+    // Simple check - if we have any form of custom captions data, we have our own duration
+    return !!(
+      this.captionsData ||
+      this.captionsScript ||
+      this.customCaptionsDataTask.value
+    );
   }
 }
 

package/src/elements/EFImage.ts

@@ -22,7 +22,10 @@ export class EFImage extends EFTemporal(
         justify-content: center;
       }
       canvas, img {
-        all: inherit;
+        position: static;
+        all: initial;
+        width: 100%;
+        height: 100%;
       }
     `,
   ];

package/src/elements/EFMedia/AssetIdMediaEngine.ts

@@ -1,5 +1,9 @@
 import type { TrackFragmentIndex } from "@editframe/assets";
-import type { InitSegmentPaths, MediaEngine } from "../../transcoding/types";
+import type {
+  InitSegmentPaths,
+  MediaEngine,
+  VideoRendition,
+} from "../../transcoding/types";
 import type { UrlGenerator } from "../../transcoding/utils/UrlGenerator";
 import type { EFMedia } from "../EFMedia";
 import { AssetMediaEngine } from "./AssetMediaEngine";
@@ -76,4 +80,29 @@ export class AssetIdMediaEngine
   buildMediaSegmentUrl(trackId: number, _segmentId: number) {
     return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
   }
+
+  convertToSegmentRelativeTimestamps(
+    globalTimestamps: number[],
+    segmentId: number,
+    rendition: VideoRendition,
+  ): number[] {
+    if (!rendition.trackId) {
+      throw new Error("Track ID is required for asset metadata");
+    }
+    // For AssetMediaEngine, we need to calculate the actual segment start time
+    // using the precise segment boundaries from the track fragment index
+    const trackData = this.data[rendition.trackId];
+    if (!trackData) {
+      throw new Error("Track not found");
+    }
+    const segment = trackData.segments?.[segmentId];
+    if (!segment) {
+      throw new Error("Segment not found");
+    }
+    const segmentStartMs = (segment.cts / trackData.timescale) * 1000;
+
+    return globalTimestamps.map(
+      (globalMs) => (globalMs - segmentStartMs) / 1000,
+    );
+  }
 }

package/src/elements/EFMedia/AssetMediaEngine.ts

@@ -297,4 +297,37 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
       maxAudioBufferFetches: 1,
     };
   }
+
+  // AssetMediaEngine inherits the default extractThumbnails from BaseMediaEngine
+  // which provides a clear warning that this engine type is not supported
+
+  convertToSegmentRelativeTimestamps(
+    globalTimestamps: number[],
+    segmentId: number,
+    rendition: VideoRendition,
+  ): number[] {
+    {
+      // Asset: MediaBunny expects segment-relative timestamps in seconds
+      // This is because Asset segments are independent timeline fragments
+
+      if (!rendition.trackId) {
+        throw new Error("Track ID is required for asset metadata");
+      }
+      // For AssetMediaEngine, we need to calculate the actual segment start time
+      // using the precise segment boundaries from the track fragment index
+      const trackData = this.data[rendition.trackId];
+      if (!trackData) {
+        throw new Error("Track not found");
+      }
+      const segment = trackData.segments?.[segmentId];
+      if (!segment) {
+        throw new Error("Segment not found");
+      }
+      const segmentStartMs = (segment.cts / trackData.timescale) * 1000;
+
+      return globalTimestamps.map(
+        (globalMs) => (globalMs - segmentStartMs) / 1000,
+      );
+    }
+  }
 }