@editframe/elements 0.33.0-beta → 0.34.5-beta

package/dist/elements/EFCaptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","EFCaptionsSegment","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#rootTimegroupUpdateController","#cachedIntrinsicDurationMs","captionsData: Caption | null","result: number"],"sources":["../../src/elements/EFCaptions.ts"],"sourcesContent":["import { Task, TaskStatus } from \"@lit/task\";\nimport { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { ReactiveController } from \"lit\";\nimport type { GetISOBMFFFileTranscriptionResult } from \"../../../api/src/index.js\";\nimport { EF_INTERACTIVE } from \"../EF_INTERACTIVE.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport { EFAudio } from \"./EFAudio.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal, flushStartTimeMsCache } from \"./EFTemporal.js\";\nimport {\n  flushSequenceDurationCache,\n  EFTimegroup,\n} from \"./EFTimegroup.js\";\nimport { EFVideo } from \"./EFVideo.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\nexport interface WordSegment {\n  text: string;\n  start: number;\n  end: number;\n}\n\nexport interface Segment {\n  start: number;\n  end: number;\n  text: string;\n}\n\nexport interface Caption {\n  segments: Segment[];\n  word_segments: WordSegment[];\n}\n\nconst stopWords = new Set([\"\", \".\", \"!\", \"?\", \",\"]);\n\n@customElement(\"ef-captions-active-word\")\nexport class EFCaptionsActiveWord extends EFTemporal(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        white-space: normal;\n        line-height: 1;\n      }\n      :host([hidden]) {\n        opacity: 0;\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  render() {\n    if (stopWords.has(this.wordText)) {\n      this.hidden = true;\n      return undefined;\n    }\n    this.hidden = false;\n\n    // Set deterministic --ef-word-seed value based on word index\n    const seed = (this.wordIndex * 9007) % 233; // Prime numbers for better distribution\n    const seedValue = seed / 233; // Normalize to 0-1 range\n    this.style.setProperty(\"--ef-word-seed\", seedValue.toString());\n\n    return html`${this.wordText}`;\n  }\n\n  @property({ type: Number, attribute: false })\n  wordStartMs = 0;\n\n  @property({ type: Number, attribute: false })\n  wordEndMs = 0;\n\n  @property({ type: String, attribute: false })\n  wordText = \"\";\n\n  @property({ type: Number, attribute: false })\n  wordIndex = 0;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  get startTimeMs() {\n    // Get parent captions element's absolute start time, then add our local offset\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.wordStartMs || 0);\n  }\n\n  get endTimeMs() {\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.wordEndMs || 0);\n  }\n\n  get durationMs(): number {\n    return this.wordEndMs - this.wordStartMs;\n  }\n}\n\n@customElement(\"ef-captions-segment\")\nexport class EFCaptionsSegment extends EFTemporal(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        white-space: normal;\n        line-height: 1;\n      }\n    `,\n  ];\n\n  render() {\n    if (stopWords.has(this.segmentText)) {\n      this.hidden = true;\n      return undefined;\n    }\n    this.hidden = false;\n    return html`${this.segmentText}`;\n  }\n\n  @property({ type: Number, attribute: false })\n  segmentStartMs = 0;\n\n  @property({ type: Number, attribute: false })\n  segmentEndMs = 0;\n\n  @property({ type: String, attribute: false })\n  segmentText = \"\";\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  get startTimeMs() {\n    // Get parent captions element's absolute start time, then add our local offset\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.segmentStartMs || 0);\n  }\n\n  get endTimeMs() {\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.segmentEndMs || 0);\n  }\n\n  get durationMs(): number {\n    return this.segmentEndMs - this.segmentStartMs;\n  }\n}\n\n@customElement(\"ef-captions-before-active-word\")\nexport class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        white-space: pre;\n        line-height: 1;\n      }\n      :host([hidden]) {\n        opacity: 0;\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  render() {\n    if (stopWords.has(this.segmentText)) {\n      this.hidden = true;\n      return undefined;\n    }\n    this.hidden = false;\n\n    // Check if there's an active word by looking for sibling active word element\n    const activeWord = this.closest(\"ef-captions\")?.querySelector(\n      \"ef-captions-active-word\",\n    );\n    const hasActiveWord = activeWord?.wordText && !activeWord.hidden;\n\n    return html`${this.segmentText}${hasActiveWord ? \" \" : \"\"}`;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  @property({ type: String, attribute: false })\n  segmentText = \"\";\n\n  @property({ type: Number, attribute: false })\n  segmentStartMs = 0;\n\n  @property({ type: Number, attribute: false })\n  segmentEndMs = 0;\n\n  get startTimeMs() {\n    // Get parent captions element's absolute start time, then add our local offset\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.segmentStartMs || 0);\n  }\n\n  get endTimeMs() {\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.segmentEndMs || 0);\n  }\n\n  get durationMs(): number {\n    return this.segmentEndMs - this.segmentStartMs;\n  }\n}\n\n@customElement(\"ef-captions-after-active-word\")\nexport class EFCaptionsAfterActiveWord extends EFCaptionsSegment {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        white-space: pre;\n        line-height: 1;\n      }\n      :host([hidden]) {\n        opacity: 0;\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  render() {\n    if (stopWords.has(this.segmentText)) {\n      this.hidden = true;\n      return undefined;\n    }\n    this.hidden = false;\n\n    // Check if there's an active word by looking for sibling active word element\n    const activeWord = this.closest(\"ef-captions\")?.querySelector(\n      \"ef-captions-active-word\",\n    );\n    const hasActiveWord = activeWord?.wordText && !activeWord.hidden;\n\n    return html`${hasActiveWord ? \" \" : \"\"}${this.segmentText}`;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  @property({ type: String, attribute: false })\n  segmentText = \"\";\n\n  @property({ type: Number, attribute: false })\n  segmentStartMs = 0;\n\n  @property({ type: Number, attribute: false })\n  segmentEndMs = 0;\n\n  get startTimeMs() {\n    // Get parent captions element's absolute start time, then add our local offset\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.segmentStartMs || 0);\n  }\n\n  get endTimeMs() {\n    const parentCaptions = this.closest(\"ef-captions\") as EFCaptions;\n    const parentStartTime = parentCaptions?.startTimeMs || 0;\n    return parentStartTime + (this.segmentEndMs || 0);\n  }\n\n  get durationMs(): number {\n    return this.segmentEndMs - this.segmentStartMs;\n  }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions extends EFSourceMixin(\n  EFTemporal(FetchMixin(LitElement)),\n  { assetType: \"caption_files\" },\n) {\n  static styles = [\n    css`\n      :host {\n        display: inline-flex;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      ::slotted(*) {\n        display: inline-block;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String, attribute: \"target\", reflect: true })\n  targetSelector = \"\";\n\n  set target(value: string) {\n    this.targetSelector = value;\n  }\n\n  @property({ attribute: \"word-style\" })\n  wordStyle = \"\";\n\n  /**\n   * URL or path to a JSON file containing custom captions data.\n   * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: String, attribute: \"captions-src\", reflect: true })\n  captionsSrc = \"\";\n\n  /**\n   * Direct captions data object. Takes priority over captions-src and captions-script.\n   * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: Object, attribute: false })\n  captionsData: Caption | null = null;\n\n  /**\n   * ID of a <script> element containing JSON captions data.\n   * The script's textContent should be valid JSON conforming to the Caption interface.\n   */\n  @property({ type: String, attribute: \"captions-script\", reflect: true })\n  captionsScript = \"\";\n\n  activeWordContainers = this.getElementsByTagName(\"ef-captions-active-word\");\n  segmentContainers = this.getElementsByTagName(\"ef-captions-segment\");\n  beforeActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-before-active-word\",\n  );\n  afterActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-after-active-word\",\n  );\n\n  // Cache for intrinsicDurationMs to avoid expensive O(n) recalculation every frame\n  #cachedIntrinsicDurationMs: number | undefined | null = null; // null = not computed, undefined = no duration\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  transcriptionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    if (this.targetElement.assetId) {\n      return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;\n    }\n    return null;\n  }\n\n  captionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    if (this.targetElement.assetId) {\n      return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;\n    }\n    const targetSrc = this.targetElement.src;\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = targetSrc.startsWith(\"/\")\n      ? targetSrc.slice(1)\n      : targetSrc;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  protected md5SumLoader = new Task(this, {\n    autoRun: false,\n    args: () => [this.target, this.fetch] as const,\n    task: async ([_target, fetch], { signal }) => {\n      if (!this.targetElement) {\n        return null;\n      }\n      // Normalize the path: remove leading slash and any double slashes\n      const src = this.targetElement.src ?? \"\";\n      let normalizedSrc = src.startsWith(\"/\")\n        ? src.slice(1)\n        : src;\n      normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n      // Use production API format for local files\n      const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;\n      const response = await fetch(md5Path, { signal });\n      if (!response.ok) {\n        return undefined;\n      }\n      const data = await response.json();\n      return data.md5 ?? undefined;\n    },\n  });\n\n  private transcriptionDataTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.transcriptionsPath(),\n        this.fetch,\n        this.hasCustomCaptionsData,\n      ] as const,\n    task: async ([transcriptionsPath, fetch, hasCustomData], { signal }) => {\n      // Skip transcription if we have custom captions data\n      if (hasCustomData || !transcriptionsPath) {\n        return null;\n      }\n      const response = await fetch(transcriptionsPath, { signal });\n      return response.json() as any as GetISOBMFFFileTranscriptionResult;\n    },\n  });\n\n  private transcriptionFragmentPath(\n    transcriptionId: string,\n    fragmentIndex: number,\n  ) {\n    return `${this.apiHost}/api/v1/transcriptions/${transcriptionId}/fragments/${fragmentIndex}`;\n  }\n\n  private fragmentIndexTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [this.transcriptionDataTask.value, this.ownCurrentTimeMs] as const,\n    task: async ([transcription, ownCurrentTimeMs], { signal }) => {\n      signal?.throwIfAborted();\n      if (!transcription) {\n        return null;\n      }\n      const fragmentIndex = Math.floor(\n        ownCurrentTimeMs / transcription.work_slice_ms,\n      );\n      return fragmentIndex;\n    },\n  });\n\n  private customCaptionsDataTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.captionsSrc,\n        this.captionsData,\n        this.captionsScript,\n        this.fetch,\n      ] as const,\n    task: async (\n      [captionsSrc, captionsData, captionsScript, fetch],\n      { signal },\n    ) => {\n      // Priority: direct data > script reference > URL source\n      if (captionsData) {\n        return captionsData;\n      }\n\n      if (captionsScript) {\n        const scriptElement = document.getElementById(captionsScript);\n        if (scriptElement?.textContent) {\n          try {\n            return JSON.parse(scriptElement.textContent) as Caption;\n          } catch (error) {\n            console.error(\n              `Failed to parse captions from script #${captionsScript}:`,\n              error,\n            );\n            return null;\n          }\n        }\n      }\n\n      if (captionsSrc) {\n        try {\n          const response = await fetch(captionsSrc, { signal });\n          return (await response.json()) as Caption;\n        } catch (error) {\n          console.error(`Failed to load captions from ${captionsSrc}:`, error);\n          return null;\n        }\n      }\n\n      return null;\n    },\n  });\n\n  private transcriptionFragmentDataTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.transcriptionDataTask.value,\n        this.fragmentIndexTask.value,\n        this.fetch,\n      ] as const,\n    task: async ([transcription, fragmentIndex, fetch], { signal }) => {\n      if (\n        transcription === null ||\n        transcription === undefined ||\n        fragmentIndex === null ||\n        fragmentIndex === undefined\n      ) {\n        return null;\n      }\n      const fragmentPath = this.transcriptionFragmentPath(\n        transcription.id,\n        fragmentIndex,\n      );\n      const response = await fetch(fragmentPath, { signal });\n      return response.json() as any as Caption;\n    },\n  });\n\n  unifiedCaptionsDataTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.customCaptionsDataTask.value,\n        this.transcriptionFragmentDataTask.value,\n      ] as const,\n    task: async ([_customData, _transcriptionData], { signal }) => {\n      // Check abort before starting\n      signal?.throwIfAborted();\n      \n      if (this.customCaptionsDataTask.status === TaskStatus.PENDING) {\n        await this.customCaptionsDataTask.taskComplete;\n        // Check abort after async operation\n        signal?.throwIfAborted();\n      }\n      if (this.transcriptionFragmentDataTask.status === TaskStatus.PENDING) {\n        await this.transcriptionFragmentDataTask.taskComplete;\n        // Check abort after async operation\n        signal?.throwIfAborted();\n      }\n      return (\n        this.customCaptionsDataTask.value ||\n        this.transcriptionFragmentDataTask.value\n      );\n    },\n  });\n\n  frameTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () => [this.unifiedCaptionsDataTask.status, this.ownCurrentTimeMs],\n    onError: (error) => {\n      // CRITICAL: Attach .catch() handler to prevent unhandled rejection\n      this.frameTask.taskComplete.catch(() => {});\n      \n      // Don't log AbortErrors - these are expected when element is disconnected\n      const isAbortError = \n        error instanceof DOMException && error.name === \"AbortError\" ||\n        error instanceof Error && (\n          error.name === \"AbortError\" ||\n          error.message?.includes(\"signal is aborted\") ||\n          error.message?.includes(\"The user aborted a request\")\n        );\n      \n      if (isAbortError) {\n        return;\n      }\n      console.error(\"EFCaptions frameTask error\", error);\n    },\n    task: async ([_status, _ownCurrentTimeMs], { signal }) => {\n      try {\n        await this.unifiedCaptionsDataTask.taskComplete;\n      } catch (error) {\n        // Handle AbortError from dependent task gracefully\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      // Trigger updateTextContainers when data is ready or time changes\n      this.updateTextContainers();\n    },\n  });\n\n  #rootTimegroupUpdateController?: ReactiveController;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Try to get target element safely\n    const target = this.targetSelector\n      ? document.getElementById(this.targetSelector)\n      : null;\n    if (target && (target instanceof EFAudio || target instanceof EFVideo)) {\n      new CrossUpdateController(target, this);\n    }\n    // For standalone captions with custom data, ensure proper timeline sync\n    else if (this.hasCustomCaptionsData && this.rootTimegroup) {\n      new CrossUpdateController(this.rootTimegroup, this);\n    }\n\n    // Ensure captions update when root timegroup's currentTimeMs changes\n    // This is critical for sequence mode where timegroups become inactive\n    // and then active again when scrubbing\n    if (this.rootTimegroup) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          // Always update captions when root timegroup updates\n          // ownCurrentTimeMs is a getter that reads rootTimegroup.currentTimeMs,\n          // so it will always read the latest value when updateTextContainers() is called\n          // This ensures captions update even when ownCurrentTimeMs appears\n          // unchanged due to clamping in inactive timegroups\n          // Use microtask to ensure root timegroup's update completes first\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Prevent display:none from being set on caption elements\n    // This maintains constant width in the parent flex container\n    const observer = new MutationObserver(() => {\n      if (this.style.display === \"none\") {\n        // Remove the display:none and use opacity instead\n        this.style.removeProperty(\"display\");\n        this.style.opacity = \"0\";\n        this.style.pointerEvents = \"none\";\n      } else if (!this.style.display || this.style.display === \"\") {\n        // When display is removed (element becomes visible), reset opacity\n        this.style.removeProperty(\"opacity\");\n        this.style.removeProperty(\"pointer-events\");\n      }\n    });\n    observer.observe(this, { attributes: true, attributeFilter: [\"style\"] });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.#rootTimegroupUpdateController && this.rootTimegroup) {\n      this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);\n      this.#rootTimegroupUpdateController = undefined;\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // Set up root timegroup controller if rootTimegroup is now available\n    // (it might not have been available in connectedCallback)\n    if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          // Always update captions when root timegroup updates\n          // ownCurrentTimeMs is a getter that reads rootTimegroup.currentTimeMs,\n          // so it will always read the latest value when updateTextContainers() is called\n          // This ensures captions update even when ownCurrentTimeMs appears\n          // unchanged due to clamping in inactive timegroups\n          // Use microtask to ensure root timegroup's update completes first\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Clean up controller if rootTimegroup changed\n    if (\n      changedProperties.has(\"rootTimegroup\") &&\n      this.#rootTimegroupUpdateController\n    ) {\n      const oldRootTimegroup = changedProperties.get(\"rootTimegroup\") as\n        | EFTimegroup\n        | undefined;\n      if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {\n        oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);\n        this.#rootTimegroupUpdateController = undefined;\n      }\n    }\n\n    this.updateTextContainers();\n\n    // Force duration recalculation when custom captions data changes\n    if (\n      changedProperties.has(\"captionsData\") ||\n      changedProperties.has(\"captionsSrc\") ||\n      changedProperties.has(\"captionsScript\")\n    ) {\n      // Invalidate the intrinsicDurationMs cache\n      this.#cachedIntrinsicDurationMs = null;\n      this.requestUpdate(\"intrinsicDurationMs\");\n\n      // Flush sequence duration cache and notify parent timegroups that child duration has changed\n      flushSequenceDurationCache();\n      flushStartTimeMsCache();\n\n      // Notify parent timegroup to recalculate its duration\n      if (this.parentTimegroup) {\n        this.parentTimegroup.requestUpdate(\"durationMs\");\n        this.parentTimegroup.requestUpdate(\"currentTime\");\n      }\n    }\n\n    // Update captions when timeline position changes\n    if (changedProperties.has(\"ownCurrentTimeMs\")) {\n      this.updateTextContainers();\n    }\n  }\n\n  updateTextContainers() {\n    const captionsData = this.unifiedCaptionsDataTask.value as Caption;\n    if (!captionsData) {\n      return;\n    }\n\n    // For captions with custom data, try to use the video's source time\n    // This ensures correct timing when clips don't start at the beginning of the source video\n    let currentTimeMs = this.ownCurrentTimeMs;\n    if (this.hasCustomCaptionsData && this.parentTimegroup) {\n      // Find video element in the same parent timegroup\n      const videoElement = Array.from(this.parentTimegroup.children).find(\n        (child): child is EFVideo => child instanceof EFVideo,\n      );\n      if (videoElement) {\n        const sourceInMs = videoElement.sourceInMs ?? 0;\n        // Use video's source time minus sourceIn to get time relative to clip start\n        // This matches the adjusted captions data timestamps (which are relative to clip.start)\n        currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;\n        // Clamp to valid range\n        currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));\n      }\n    }\n\n    const currentTimeSec = currentTimeMs / 1000;\n\n    // Find the current word from word_segments\n    // Use exclusive end boundary to prevent overlap at exact boundaries\n    const currentWord = captionsData.word_segments.find(\n      (word) => currentTimeSec >= word.start && currentTimeSec < word.end,\n    );\n\n    // Find the current segment\n    // Use exclusive end boundary to prevent overlap at exact boundaries\n    const currentSegment = captionsData.segments.find(\n      (segment) =>\n        currentTimeSec >= segment.start && currentTimeSec < segment.end,\n    );\n\n    for (const wordContainer of this.activeWordContainers) {\n      if (currentWord) {\n        wordContainer.wordText = currentWord.text;\n        wordContainer.wordStartMs = currentWord.start * 1000;\n        wordContainer.wordEndMs = currentWord.end * 1000;\n        // Set word index for deterministic animation variation\n        const wordIndex = captionsData.word_segments.findIndex(\n          (w) =>\n            w.start === currentWord.start &&\n            w.end === currentWord.end &&\n            w.text === currentWord.text,\n        );\n        wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;\n        // Force re-render to update hidden property\n        wordContainer.requestUpdate();\n      } else {\n        // No active word - maintain layout with invisible placeholder\n        wordContainer.wordText = \"\"; // Empty when no active word\n        wordContainer.wordStartMs = 0;\n        wordContainer.wordEndMs = 0;\n        wordContainer.requestUpdate();\n      }\n    }\n\n    for (const segmentContainer of this.segmentContainers) {\n      if (currentSegment) {\n        segmentContainer.segmentText = currentSegment.text;\n        segmentContainer.segmentStartMs = currentSegment.start * 1000;\n        segmentContainer.segmentEndMs = currentSegment.end * 1000;\n      } else {\n        // No active segment - clear the container\n        segmentContainer.segmentText = \"\";\n        segmentContainer.segmentStartMs = 0;\n        segmentContainer.segmentEndMs = 0;\n      }\n      segmentContainer.requestUpdate();\n    }\n\n    // Process context for both word and segment cases\n    if (currentWord && currentSegment) {\n      // Find all word segments that fall within the current segment's time range\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      // Find the index of the current word within the segment's word segments\n      const currentWordIndex = segmentWords.findIndex(\n        (word) =>\n          word.start === currentWord.start && word.end === currentWord.end,\n      );\n\n      if (currentWordIndex !== -1) {\n        // Get words before the current word\n        const beforeWords = segmentWords\n          .slice(0, currentWordIndex)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        // Get words after the current word\n        const afterWords = segmentWords\n          .slice(currentWordIndex + 1)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        // Update before containers - should be visible at the same time as active word\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = beforeWords;\n          container.segmentStartMs = currentWord.start * 1000;\n          container.segmentEndMs = currentWord.end * 1000;\n          container.requestUpdate();\n        }\n\n        // Update after containers - should be visible at the same time as active word\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = afterWords;\n          container.segmentStartMs = currentWord.start * 1000;\n          container.segmentEndMs = currentWord.end * 1000;\n          container.requestUpdate();\n        }\n      }\n    } else if (currentSegment) {\n      // No active word but we have an active segment\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      // Check if we're before the first word or after the last word\n      const firstWord = segmentWords[0];\n      const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;\n\n      if (isBeforeFirstWord) {\n        // Before first word starts - show all words in \"after\" container (they're all upcoming)\n        const allWords = segmentWords.map((w) => w.text.trim()).join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = \"\"; // Nothing before yet\n          container.segmentStartMs = currentSegment.start * 1000;\n          container.segmentEndMs = currentSegment.end * 1000;\n          container.requestUpdate();\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = allWords; // All words are upcoming\n          container.segmentStartMs = currentSegment.start * 1000;\n          container.segmentEndMs = currentSegment.end * 1000;\n          container.requestUpdate();\n        }\n      } else {\n        // After last word ends - show all completed words in \"before\" container\n        const allCompletedWords = segmentWords\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = allCompletedWords;\n          container.segmentStartMs = currentSegment.start * 1000;\n          container.segmentEndMs = currentSegment.end * 1000;\n          container.requestUpdate();\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = \"\";\n          container.segmentStartMs = currentSegment.start * 1000;\n          container.segmentEndMs = currentSegment.end * 1000;\n          container.requestUpdate();\n        }\n      }\n    } else {\n      // No active segment or word - clear all context containers\n      for (const container of this.beforeActiveWordContainers) {\n        container.segmentText = \"\";\n        container.segmentStartMs = 0;\n        container.segmentEndMs = 0;\n        container.requestUpdate();\n      }\n\n      for (const container of this.afterActiveWordContainers) {\n        container.segmentText = \"\";\n        container.segmentStartMs = 0;\n        container.segmentEndMs = 0;\n        container.requestUpdate();\n      }\n    }\n  }\n\n  get targetElement() {\n    const target = document.getElementById(this.targetSelector ?? \"\");\n    if (target instanceof EFAudio || target instanceof EFVideo) {\n      return target;\n    }\n    // When using custom captions data, a target is not required\n    if (this.hasCustomCaptionsData) {\n      return null;\n    }\n    return null;\n  }\n\n  get hasCustomCaptionsData(): boolean {\n    return !!(this.captionsData || this.captionsSrc || this.captionsScript);\n  }\n\n  // Follow the exact EFMedia pattern for safe duration integration\n  get intrinsicDurationMs(): number | undefined {\n    // Return cached value if available (null means not computed yet)\n    if (this.#cachedIntrinsicDurationMs !== null) {\n      return this.#cachedIntrinsicDurationMs;\n    }\n\n    // Direct access to custom captions data - avoiding complex task dependencies\n    // Priority: direct data > script reference > external file\n    let captionsData: Caption | null = null;\n\n    if (this.captionsData) {\n      captionsData = this.captionsData;\n    } else if (this.captionsScript) {\n      const scriptElement = document.getElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          captionsData = JSON.parse(scriptElement.textContent) as Caption;\n        } catch {\n          // Invalid JSON, fall through to return undefined\n        }\n      }\n    } else if (this.customCaptionsDataTask.value) {\n      captionsData = this.customCaptionsDataTask.value as Caption;\n    }\n\n    if (!captionsData) {\n      // Don't cache undefined when data hasn't loaded yet - it may load later\n      // Only cache once we have confirmed no data source\n      if (!this.captionsData && !this.captionsScript && !this.captionsSrc) {\n        this.#cachedIntrinsicDurationMs = undefined;\n      }\n      return undefined;\n    }\n\n    let result: number;\n    if (\n      captionsData.segments.length === 0 &&\n      captionsData.word_segments.length === 0\n    ) {\n      result = 0;\n    } else {\n      // Find the maximum end time from both segments and word_segments\n      // Use reduce instead of Math.max(...array) to avoid creating intermediate arrays\n      const maxSegmentEnd =\n        captionsData.segments.length > 0\n          ? captionsData.segments.reduce(\n              (max, s) => (s.end > max ? s.end : max),\n              0,\n            )\n          : 0;\n      const maxWordEnd =\n        captionsData.word_segments.length > 0\n          ? captionsData.word_segments.reduce(\n              (max, w) => (w.end > max ? w.end : max),\n              0,\n            )\n          : 0;\n\n      result = Math.max(maxSegmentEnd, maxWordEnd) * 1000; // Convert to milliseconds\n    }\n\n    // Cache the computed result\n    this.#cachedIntrinsicDurationMs = result;\n    return result;\n  }\n\n  // Follow the exact EFMedia pattern for safe duration integration\n  get hasOwnDuration(): boolean {\n    // Simple check - if we have any form of custom captions data, we have our own duration\n    return !!(\n      this.captionsData ||\n      this.captionsScript ||\n      this.customCaptionsDataTask.value\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-captions\": EFCaptions;\n    \"ef-captions-active-word\": EFCaptionsActiveWord;\n    \"ef-captions-segment\": EFCaptionsSegment;\n    \"ef-captions-before-active-word\": EFCaptionsBeforeActiveWord;\n    \"ef-captions-after-active-word\": EFCaptionsAfterActiveWord;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#transcriptionData","#loadTranscriptionFragment","#rootTimegroupUpdateController","#cachedIntrinsicDurationMs","captionsData: Caption | null","result: number"],"sources":["../../src/elements/EFCaptions.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { ReactiveController } from \"lit\";\nimport type { GetISOBMFFFileTranscriptionResult } from \"../../../api/src/index.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  createFrameTaskWrapper,\n  PRIORITY_CAPTIONS,\n} from \"../preview/FrameController.js\";\nimport { AsyncValue } from \"./EFMedia.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport { EFAudio } from \"./EFAudio.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal, flushStartTimeMsCache } from \"./EFTemporal.js\";\nimport {\n  flushSequenceDurationCache,\n  EFTimegroup,\n} from \"./EFTimegroup.js\";\nimport { EFVideo } from \"./EFVideo.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\nexport interface WordSegment {\n  text: string;\n  start: number;\n  end: number;\n}\n\nexport interface Segment {\n  start: number;\n  end: number;\n  text: string;\n}\n\nexport interface Caption {\n  segments: Segment[];\n  word_segments: WordSegment[];\n}\n\nconst stopWords = new Set([\"\", \".\", \"!\", \"?\", \",\"]);\n\n/**\n * Caption active word element - displays the currently spoken word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-active-word\")\nexport class EFCaptionsActiveWord extends HTMLElement {\n  #wordText = \"\";\n  #wordIndex = 0;\n  \n  constructor() {\n    super();\n    // Apply default styles via inline style\n    this.style.display = \"inline-block\";\n    this.style.whiteSpace = \"normal\";\n    this.style.lineHeight = \"1\";\n  }\n  \n  set wordText(text: string) {\n    this.#wordText = text;\n    // Hide element if no content or only stop words\n    if (!text || stopWords.has(text)) {\n      this.style.display = \"none\";\n      this.textContent = \"\";\n    } else {\n      this.style.display = \"inline-block\";\n      this.textContent = text;\n    }\n  }\n  \n  get wordText(): string {\n    return this.#wordText;\n  }\n  \n  set wordIndex(index: number) {\n    this.#wordIndex = index;\n    // Set deterministic --ef-word-seed value based on word index\n    const seed = (index * 9007) % 233; // Prime numbers for better distribution\n    const seedValue = seed / 233; // Normalize to 0-1 range\n    this.style.setProperty(\"--ef-word-seed\", seedValue.toString());\n  }\n  \n  get wordIndex(): number {\n    return this.#wordIndex;\n  }\n}\n\n/**\n * Caption segment element - displays a full caption segment.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-segment\")\nexport class EFCaptionsSegment extends HTMLElement {\n  #segmentText = \"\";\n  \n  constructor() {\n    super();\n    // Apply default styles via inline style\n    this.style.display = \"inline-block\";\n    this.style.whiteSpace = \"normal\";\n    this.style.lineHeight = \"1\";\n  }\n  \n  set segmentText(text: string) {\n    this.#segmentText = text;\n    // Hide element if no content or only stop words\n    if (!text || stopWords.has(text)) {\n      this.style.display = \"none\";\n      this.textContent = \"\";\n    } else {\n      this.style.display = \"inline-block\";\n      this.textContent = text;\n    }\n  }\n  \n  get segmentText(): string {\n    return this.#segmentText;\n  }\n}\n\n/**\n * Caption before-active-word element - displays words before the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-before-active-word\")\nexport class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {\n  constructor() {\n    super();\n    // Override whiteSpace to preserve spacing\n    this.style.whiteSpace = \"pre\";\n  }\n  \n  set segmentText(text: string) {\n    // Check if there's an active word by looking for sibling active word element\n    const activeWord = this.closest(\"ef-captions\")?.querySelector(\n      \"ef-captions-active-word\",\n    ) as EFCaptionsActiveWord;\n    const hasActiveWord = activeWord?.wordText;\n    \n    // Add trailing space if there's an active word coming after us\n    const finalText = text && hasActiveWord ? text + \" \" : text;\n    \n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.style.display = \"none\";\n      this.textContent = \"\";\n    } else {\n      this.style.display = \"inline-block\";\n      this.textContent = finalText;\n    }\n  }\n}\n\n/**\n * Caption after-active-word element - displays words after the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-after-active-word\")\nexport class EFCaptionsAfterActiveWord extends EFCaptionsSegment {\n  constructor() {\n    super();\n    // Override whiteSpace to preserve spacing\n    this.style.whiteSpace = \"pre\";\n  }\n  \n  set segmentText(text: string) {\n    // Add leading space if there's text\n    const finalText = text ? \" \" + text : text;\n    \n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.style.display = \"none\";\n      this.textContent = \"\";\n    } else {\n      this.style.display = \"inline-block\";\n      this.textContent = finalText;\n    }\n  }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions extends EFSourceMixin(\n  EFTemporal(FetchMixin(LitElement)),\n  { assetType: \"caption_files\" },\n) implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: inline-flex;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      ::slotted(*) {\n        display: inline-block;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String, attribute: \"target\", reflect: true })\n  targetSelector = \"\";\n\n  set target(value: string) {\n    this.targetSelector = value;\n  }\n\n  @property({ attribute: \"word-style\" })\n  wordStyle = \"\";\n\n  /**\n   * URL or path to a JSON file containing custom captions data.\n   * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: String, attribute: \"captions-src\", reflect: true })\n  captionsSrc = \"\";\n\n  /**\n   * Direct captions data object. Takes priority over captions-src and captions-script.\n   * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: Object, attribute: false })\n  captionsData: Caption | null = null;\n\n  /**\n   * ID of a <script> element containing JSON captions data.\n   * The script's textContent should be valid JSON conforming to the Caption interface.\n   */\n  @property({ type: String, attribute: \"captions-script\", reflect: true })\n  captionsScript = \"\";\n\n  activeWordContainers = this.getElementsByTagName(\"ef-captions-active-word\");\n  segmentContainers = this.getElementsByTagName(\"ef-captions-segment\");\n  beforeActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-before-active-word\",\n  );\n  afterActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-after-active-word\",\n  );\n\n  // Cache for intrinsicDurationMs to avoid expensive O(n) recalculation every frame\n  #cachedIntrinsicDurationMs: number | undefined | null = null; // null = not computed, undefined = no duration\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  transcriptionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    if (this.targetElement.assetId) {\n      return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;\n    }\n    return null;\n  }\n\n  captionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    if (this.targetElement.assetId) {\n      return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;\n    }\n    const targetSrc = this.targetElement.src;\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = targetSrc.startsWith(\"/\")\n      ? targetSrc.slice(1)\n      : targetSrc;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  // ============================================================================\n  // Captions Data Loading - async methods instead of Tasks\n  // ============================================================================\n\n  #captionsDataLoaded = false;\n  #captionsDataPromise: Promise<Caption | null> | null = null;\n  #captionsDataValue: Caption | null = null;\n  #transcriptionData: GetISOBMFFFileTranscriptionResult | null = null;\n\n  /**\n   * AsyncValue wrapper for backwards compatibility\n   */\n  unifiedCaptionsDataTask = new AsyncValue<Caption | null>();\n\n  /**\n   * Load captions data from all possible sources\n   */\n  async loadCaptionsData(signal?: AbortSignal): Promise<Caption | null> {\n    // Return cached if already loaded\n    if (this.#captionsDataLoaded && this.#captionsDataValue) {\n      return this.#captionsDataValue;\n    }\n\n    // Return in-flight promise\n    if (this.#captionsDataPromise) {\n      return this.#captionsDataPromise;\n    }\n\n    this.unifiedCaptionsDataTask.startPending();\n    this.#captionsDataPromise = this.#doLoadCaptionsData(signal);\n\n    try {\n      this.#captionsDataValue = await this.#captionsDataPromise;\n      this.#captionsDataLoaded = true;\n      if (this.#captionsDataValue) {\n        this.unifiedCaptionsDataTask.setValue(this.#captionsDataValue);\n      }\n      return this.#captionsDataValue;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      console.error(\"Failed to load captions data:\", error);\n      return null;\n    } finally {\n      this.#captionsDataPromise = null;\n    }\n  }\n\n  async #doLoadCaptionsData(signal?: AbortSignal): Promise<Caption | null> {\n    // Priority 1: Direct captionsData property\n    if (this.captionsData) {\n      return this.captionsData;\n    }\n\n    // Priority 2: Script element reference\n    if (this.captionsScript) {\n      const scriptElement = document.getElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          return JSON.parse(scriptElement.textContent) as Caption;\n        } catch (error) {\n          console.error(`Failed to parse captions from script #${this.captionsScript}:`, error);\n        }\n      }\n    }\n\n    // Priority 3: External captions file\n    if (this.captionsSrc) {\n      try {\n        const response = await this.fetch(this.captionsSrc, { signal });\n        return await response.json() as Caption;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(`Failed to load captions from ${this.captionsSrc}:`, error);\n      }\n    }\n\n    // Priority 4: Transcription from target element\n    if (this.targetElement && !this.hasCustomCaptionsData) {\n      const transcriptionPath = this.transcriptionsPath();\n      if (transcriptionPath) {\n        try {\n          const response = await this.fetch(transcriptionPath, { signal });\n          this.#transcriptionData = await response.json() as GetISOBMFFFileTranscriptionResult;\n          signal?.throwIfAborted();\n\n          // Load fragment for current time\n          if (this.#transcriptionData) {\n            return this.#loadTranscriptionFragment(signal);\n          }\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          // Transcription not available - not an error\n        }\n      }\n    }\n\n    return null;\n  }\n\n  async #loadTranscriptionFragment(signal?: AbortSignal): Promise<Caption | null> {\n    if (!this.#transcriptionData) return null;\n\n    const fragmentIndex = Math.floor(this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms);\n    const fragmentPath = `${this.apiHost}/api/v1/transcriptions/${this.#transcriptionData.id}/fragments/${fragmentIndex}`;\n\n    try {\n      const response = await this.fetch(fragmentPath, { signal });\n      return await response.json() as Caption;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      console.error(\"Failed to load transcription fragment:\", error);\n      return null;\n    }\n  }\n\n  /**\n   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.\n   * This is a compatibility wrapper that delegates to the new system.\n   */\n  frameTask = createFrameTaskWrapper(this);\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // Centralized frame control - no Lit Tasks\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Check if captions data is loaded\n    const hasData = this.#captionsDataLoaded && this.#captionsDataValue !== null;\n\n    return {\n      needsPreparation: !hasData,\n      isReady: hasData,\n      priority: PRIORITY_CAPTIONS,\n    };\n  }\n\n  /**\n   * Async preparation - waits for captions data to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    await this.loadCaptionsData(signal);\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - updates caption text containers.\n   * Sets textContent directly on child elements (light DOM).\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Update text containers by setting properties\n    // Child elements update their textContent directly (light DOM)\n    this.updateTextContainers();\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  #rootTimegroupUpdateController?: ReactiveController;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Start loading captions data\n    this.loadCaptionsData().catch(() => {});\n\n    // Try to get target element safely\n    const target = this.targetSelector\n      ? document.getElementById(this.targetSelector)\n      : null;\n    if (target && (target instanceof EFAudio || target instanceof EFVideo)) {\n      new CrossUpdateController(target, this);\n    }\n    // For standalone captions with custom data, ensure proper timeline sync\n    else if (this.hasCustomCaptionsData && this.rootTimegroup) {\n      new CrossUpdateController(this.rootTimegroup, this);\n    }\n\n    // Ensure captions update when root timegroup's currentTimeMs changes\n    if (this.rootTimegroup) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Prevent display:none from being set on the parent caption element.\n    // IMPORTANT: This only applies to the parent <ef-captions> element, NOT to\n    // caption child elements (<ef-captions-segment>, <ef-captions-active-word>, etc.).\n    // Child elements MUST respect display:none for proper temporal visibility\n    // in video rendering. Video export relies on display:none to hide elements\n    // outside their time range.\n    const observer = new MutationObserver(() => {\n      if (this.style.display === \"none\") {\n        this.style.removeProperty(\"display\");\n        this.style.opacity = \"0\";\n        this.style.pointerEvents = \"none\";\n      } else if (!this.style.display || this.style.display === \"\") {\n        this.style.removeProperty(\"opacity\");\n        this.style.removeProperty(\"pointer-events\");\n      }\n    });\n    observer.observe(this, { attributes: true, attributeFilter: [\"style\"] });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.#rootTimegroupUpdateController && this.rootTimegroup) {\n      this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);\n      this.#rootTimegroupUpdateController = undefined;\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // Set up root timegroup controller if rootTimegroup is now available\n    if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Clean up controller if rootTimegroup changed\n    if (\n      changedProperties.has(\"rootTimegroup\") &&\n      this.#rootTimegroupUpdateController\n    ) {\n      const oldRootTimegroup = changedProperties.get(\"rootTimegroup\") as\n        | EFTimegroup\n        | undefined;\n      if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {\n        oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);\n        this.#rootTimegroupUpdateController = undefined;\n      }\n    }\n\n    this.updateTextContainers();\n\n    // Force duration recalculation when custom captions data changes\n    if (\n      changedProperties.has(\"captionsData\") ||\n      changedProperties.has(\"captionsSrc\") ||\n      changedProperties.has(\"captionsScript\")\n    ) {\n      // Invalidate caches and reload\n      this.#cachedIntrinsicDurationMs = null;\n      this.#captionsDataLoaded = false;\n      this.#captionsDataValue = null;\n      this.loadCaptionsData().catch(() => {});\n\n      this.requestUpdate(\"intrinsicDurationMs\");\n\n      flushSequenceDurationCache();\n      flushStartTimeMsCache();\n\n      if (this.parentTimegroup) {\n        this.parentTimegroup.requestUpdate(\"durationMs\");\n        this.parentTimegroup.requestUpdate(\"currentTime\");\n      }\n    }\n\n    // Update captions when timeline position changes\n    if (changedProperties.has(\"ownCurrentTimeMs\")) {\n      this.updateTextContainers();\n    }\n  }\n\n  updateTextContainers() {\n    const captionsData = this.#captionsDataValue;\n    if (!captionsData) {\n      return;\n    }\n\n    // For captions with custom data, try to use the video's source time\n    let currentTimeMs = this.ownCurrentTimeMs;\n    if (this.hasCustomCaptionsData && this.parentTimegroup) {\n      const videoElement = Array.from(this.parentTimegroup.children).find(\n        (child): child is EFVideo => child instanceof EFVideo,\n      );\n      if (videoElement) {\n        const sourceInMs = videoElement.sourceInMs ?? 0;\n        currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;\n        currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));\n      }\n    }\n\n    const currentTimeSec = currentTimeMs / 1000;\n\n    // Find the current word from word_segments\n    const currentWord = captionsData.word_segments.find(\n      (word) => currentTimeSec >= word.start && currentTimeSec < word.end,\n    );\n\n    // Find the current segment\n    const currentSegment = captionsData.segments.find(\n      (segment) =>\n        currentTimeSec >= segment.start && currentTimeSec < segment.end,\n    );\n\n    for (const wordContainer of this.activeWordContainers) {\n      if (currentWord) {\n        const wordIndex = captionsData.word_segments.findIndex(\n          (w) =>\n            w.start === currentWord.start &&\n            w.end === currentWord.end &&\n            w.text === currentWord.text,\n        );\n        wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;\n        wordContainer.wordText = currentWord.text; // Sets textContent directly\n      } else {\n        wordContainer.wordText = \"\"; // Hides element\n      }\n    }\n\n    for (const segmentContainer of this.segmentContainers) {\n      if (currentSegment) {\n        segmentContainer.segmentText = currentSegment.text; // Sets textContent directly\n      } else {\n        segmentContainer.segmentText = \"\"; // Hides element\n      }\n    }\n\n    // Process context for both word and segment cases\n    if (currentWord && currentSegment) {\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      const currentWordIndex = segmentWords.findIndex(\n        (word) =>\n          word.start === currentWord.start && word.end === currentWord.end,\n      );\n\n      if (currentWordIndex !== -1) {\n        const beforeWords = segmentWords\n          .slice(0, currentWordIndex)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        const afterWords = segmentWords\n          .slice(currentWordIndex + 1)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = beforeWords; // Sets textContent directly\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = afterWords; // Sets textContent directly\n        }\n      }\n    } else if (currentSegment) {\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      const firstWord = segmentWords[0];\n      const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;\n\n      if (isBeforeFirstWord) {\n        const allWords = segmentWords.map((w) => w.text.trim()).join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = \"\"; // Hides element\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = allWords; // Sets textContent directly\n        }\n      } else {\n        const allCompletedWords = segmentWords\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = allCompletedWords; // Sets textContent directly\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = \"\"; // Hides element\n        }\n      }\n    } else {\n      for (const container of this.beforeActiveWordContainers) {\n        container.segmentText = \"\"; // Hides element\n      }\n\n      for (const container of this.afterActiveWordContainers) {\n        container.segmentText = \"\"; // Hides element\n      }\n    }\n  }\n\n  get targetElement() {\n    const target = document.getElementById(this.targetSelector ?? \"\");\n    if (target instanceof EFAudio || target instanceof EFVideo) {\n      return target;\n    }\n    if (this.hasCustomCaptionsData) {\n      return null;\n    }\n    return null;\n  }\n\n  get hasCustomCaptionsData(): boolean {\n    return !!(this.captionsData || this.captionsSrc || this.captionsScript);\n  }\n\n  get intrinsicDurationMs(): number | undefined {\n    if (this.#cachedIntrinsicDurationMs !== null) {\n      return this.#cachedIntrinsicDurationMs;\n    }\n\n    let captionsData: Caption | null = null;\n\n    if (this.captionsData) {\n      captionsData = this.captionsData;\n    } else if (this.captionsScript) {\n      const scriptElement = document.getElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          captionsData = JSON.parse(scriptElement.textContent) as Caption;\n        } catch {\n          // Invalid JSON\n        }\n      }\n    } else if (this.#captionsDataValue) {\n      captionsData = this.#captionsDataValue;\n    }\n\n    if (!captionsData) {\n      if (!this.captionsData && !this.captionsScript && !this.captionsSrc) {\n        this.#cachedIntrinsicDurationMs = undefined;\n      }\n      return undefined;\n    }\n\n    let result: number;\n    if (\n      captionsData.segments.length === 0 &&\n      captionsData.word_segments.length === 0\n    ) {\n      result = 0;\n    } else {\n      const maxSegmentEnd =\n        captionsData.segments.length > 0\n          ? captionsData.segments.reduce(\n              (max, s) => (s.end > max ? s.end : max),\n              0,\n            )\n          : 0;\n      const maxWordEnd =\n        captionsData.word_segments.length > 0\n          ? captionsData.word_segments.reduce(\n              (max, w) => (w.end > max ? w.end : max),\n              0,\n            )\n          : 0;\n\n      result = Math.max(maxSegmentEnd, maxWordEnd) * 1000;\n    }\n\n    this.#cachedIntrinsicDurationMs = result;\n    return result;\n  }\n\n  get hasOwnDuration(): boolean {\n    return !!(\n      this.captionsData ||\n      this.captionsScript ||\n      this.#captionsDataValue\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-captions\": EFCaptions;\n    \"ef-captions-active-word\": EFCaptionsActiveWord;\n    \"ef-captions-segment\": EFCaptionsSegment;\n    \"ef-captions-before-active-word\": EFCaptionsBeforeActiveWord;\n    \"ef-captions-after-active-word\": EFCaptionsAfterActiveWord;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFImage.d.ts

@@ -1,28 +1,56 @@
+import { FrameRenderable, FrameState, FrameTask } from "../preview/FrameController.js";
 import { EFSourceMixinInterface } from "./EFSourceMixin.js";
 import { TemporalMixinInterface } from "./EFTemporal.js";
 import { FetchMixinInterface } from "./FetchMixin.js";
-import * as _lit_task0 from "@lit/task";
-import { Task } from "@lit/task";
 import * as lit0 from "lit";
-import { LitElement } from "lit";
+import { LitElement, PropertyValueMap } from "lit";
 import * as lit_html0 from "lit-html";
 import * as lit_html_directives_ref_js0 from "lit-html/directives/ref.js";
 
 //#region src/elements/EFImage.d.ts
 declare const EFImage_base: (new (...args: any[]) => TemporalMixinInterface) & (new (...args: any[]) => EFSourceMixinInterface) & (new (...args: any[]) => FetchMixinInterface) & typeof LitElement;
-declare class EFImage extends EFImage_base {
+declare class EFImage extends EFImage_base implements FrameRenderable {
   #private;
   static styles: lit0.CSSResult[];
   imageRef: lit_html_directives_ref_js0.Ref<HTMLImageElement>;
   canvasRef: lit_html_directives_ref_js0.Ref<HTMLCanvasElement>;
+  /**
+   * Get the current render version.
+   * Version increments when src or assetId changes.
+   * @public
+   */
+  get renderVersion(): number;
   set assetId(value: string | null);
   get assetId(): string | null;
   render(): lit_html0.TemplateResult<1>;
   private isDirectUrl;
   assetPath(): string;
   get hasOwnDuration(): boolean;
-  fetchImage: Task<readonly [string, typeof fetch, string, string | null], void>;
-  frameTask: Task<readonly [_lit_task0.TaskStatus], void>;
+  /**
+   * Load image from the configured source
+   */
+  loadImage(signal?: AbortSignal): Promise<void>;
+  /**
+   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.
+   * This is a compatibility wrapper that delegates to the new system.
+   */
+  frameTask: FrameTask;
+  /**
+   * Query readiness state for a given time.
+   * @implements FrameRenderable
+   */
+  getFrameState(_timeMs: number): FrameState;
+  /**
+   * Async preparation - waits for image to load.
+   * @implements FrameRenderable
+   */
+  prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void>;
+  /**
+   * Synchronous render - image is already displayed via img element or canvas.
+   * @implements FrameRenderable
+   */
+  renderFrame(_timeMs: number): void;
+  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   /**
    * Get the natural dimensions of the image.
    * Returns null if the image hasn't loaded yet.

package/dist/elements/EFImage.js

@@ -1,9 +1,8 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { EFTemporal } from "./EFTemporal.js";
+import { PRIORITY_IMAGE, createFrameTaskWrapper } from "../preview/FrameController.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -14,82 +13,7 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 		super(..._args);
 		this.imageRef = createRef();
 		this.canvasRef = createRef();
-		this.fetchImage = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [
-				this.assetPath(),
-				this.fetch,
-				this.src,
-				this.assetId
-			],
-			onError: (error) => {
-				this.fetchImage.taskComplete.catch(() => {});
-				const isAbortError = error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"));
-				const isCanvasNotReady = error instanceof Error && error.message === "Canvas not ready";
-				if (isAbortError || isCanvasNotReady) return;
-				console.error("EFImage fetchImage error", error);
-			},
-			task: async ([assetPath, fetch, src, assetId], { signal }) => {
-				if (!src && !assetId) return;
-				if (this.isDirectUrl(assetPath)) return;
-				const response = await fetch(assetPath, { signal });
-				signal?.throwIfAborted();
-				const image = new Image();
-				const blob = await response.blob();
-				signal?.throwIfAborted();
-				image.src = URL.createObjectURL(blob);
-				await new Promise((resolve, reject) => {
-					if (signal?.aborted) {
-						URL.revokeObjectURL(image.src);
-						reject(new DOMException("Aborted", "AbortError"));
-						return;
-					}
-					const abortHandler = () => {
-						URL.revokeObjectURL(image.src);
-						reject(new DOMException("Aborted", "AbortError"));
-					};
-					signal?.addEventListener("abort", abortHandler, { once: true });
-					image.onload = () => {
-						signal?.removeEventListener("abort", abortHandler);
-						resolve();
-					};
-					image.onerror = (error) => {
-						signal?.removeEventListener("abort", abortHandler);
-						URL.revokeObjectURL(image.src);
-						reject(error);
-					};
-				});
-				signal?.throwIfAborted();
-				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);
-				URL.revokeObjectURL(image.src);
-			}
-		});
-		this.frameTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [this.fetchImage.status],
-			onError: (error) => {
-				this.frameTask.taskComplete.catch(() => {});
-				if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
-				console.error("EFImage frameTask error", error);
-			},
-			task: async ([_status], { signal }) => {
-				try {
-					await this.fetchImage.taskComplete;
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") {
-						signal?.throwIfAborted();
-						return;
-					}
-					throw error;
-				}
-				signal?.throwIfAborted();
-			}
-		});
+		this.frameTask = createFrameTaskWrapper(this);
 	}
 	static {
 		this.styles = [css`
@@ -107,6 +31,19 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
       }
     `];
 	}
+	/**
+	* Render version counter - increments when visual content changes.
+	* Used by RenderContext to cache rendered dataURLs.
+	*/
+	#renderVersion = 0;
+	/**
+	* Get the current render version.
+	* Version increments when src or assetId changes.
+	* @public
+	*/
+	get renderVersion() {
+		return this.#renderVersion;
+	}
 	#assetId = null;
 	set assetId(value) {
 		this.#assetId = value;
@@ -131,6 +68,104 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 	get hasOwnDuration() {
 		return this.hasExplicitDuration;
 	}
+	#imageLoaded = false;
+	#imageLoadPromise = null;
+	#lastLoadedPath = null;
+	/**
+	* Load image from the configured source
+	*/
+	async loadImage(signal) {
+		const assetPath = this.assetPath();
+		if (!this.src && !this.assetId) return;
+		if (this.#imageLoaded && this.#lastLoadedPath === assetPath) return;
+		if (this.#imageLoadPromise && this.#lastLoadedPath === assetPath) return this.#imageLoadPromise;
+		if (this.isDirectUrl(assetPath)) {
+			this.#imageLoaded = true;
+			this.#lastLoadedPath = assetPath;
+			return;
+		}
+		this.#lastLoadedPath = assetPath;
+		this.#imageLoadPromise = this.#doLoadImage(assetPath, signal);
+		try {
+			await this.#imageLoadPromise;
+			this.#imageLoaded = true;
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") throw error;
+			if (error instanceof Error && error.message === "Canvas not ready") return;
+			console.error("EFImage load error", error);
+		} finally {
+			this.#imageLoadPromise = null;
+		}
+	}
+	async #doLoadImage(assetPath, signal) {
+		const response = await this.fetch(assetPath, { signal });
+		signal?.throwIfAborted();
+		const image = new Image();
+		const blob = await response.blob();
+		signal?.throwIfAborted();
+		image.src = URL.createObjectURL(blob);
+		await new Promise((resolve, reject) => {
+			if (signal?.aborted) {
+				URL.revokeObjectURL(image.src);
+				reject(new DOMException("Aborted", "AbortError"));
+				return;
+			}
+			const abortHandler = () => {
+				URL.revokeObjectURL(image.src);
+				reject(new DOMException("Aborted", "AbortError"));
+			};
+			signal?.addEventListener("abort", abortHandler, { once: true });
+			image.onload = () => {
+				signal?.removeEventListener("abort", abortHandler);
+				resolve();
+			};
+			image.onerror = (error) => {
+				signal?.removeEventListener("abort", abortHandler);
+				URL.revokeObjectURL(image.src);
+				reject(error);
+			};
+		});
+		signal?.throwIfAborted();
+		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);
+		URL.revokeObjectURL(image.src);
+	}
+	/**
+	* Query readiness state for a given time.
+	* @implements FrameRenderable
+	*/
+	getFrameState(_timeMs) {
+		return {
+			needsPreparation: !this.#imageLoaded,
+			isReady: this.#imageLoaded,
+			priority: PRIORITY_IMAGE
+		};
+	}
+	/**
+	* Async preparation - waits for image to load.
+	* @implements FrameRenderable
+	*/
+	async prepareFrame(_timeMs, signal) {
+		await this.loadImage(signal);
+		signal.throwIfAborted();
+	}
+	/**
+	* Synchronous render - image is already displayed via img element or canvas.
+	* @implements FrameRenderable
+	*/
+	renderFrame(_timeMs) {}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("src") || changedProperties.has("assetId")) {
+			this.#imageLoaded = false;
+			this.loadImage().catch(() => {});
+		}
+		if (changedProperties.size > 0) this.#renderVersion++;
+	}
 	/**
 	* Get the natural dimensions of the image.
 	* Returns null if the image hasn't loaded yet.

package/dist/elements/EFImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFImage.js","names":["EFImage","#assetId"],"sources":["../../src/elements/EFImage.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { EF_INTERACTIVE } from \"../EF_INTERACTIVE.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\n@customElement(\"ef-image\")\nexport class EFImage extends EFTemporal(\n  EFSourceMixin(FetchMixin(LitElement), {\n    assetType: \"image_files\",\n  }),\n) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      canvas, img {\n        position: static;\n        all: initial;\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  imageRef = createRef<HTMLImageElement>();\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  #assetId: string | null = null;\n  @property({ type: String, attribute: \"asset-id\", reflect: true })\n  set assetId(value: string | null) {\n    this.#assetId = value;\n  }\n\n  get assetId() {\n    return this.#assetId ?? this.getAttribute(\"asset-id\");\n  }\n\n  render() {\n    const assetPath = this.assetPath();\n    const isDirectUrl = this.isDirectUrl(assetPath);\n    return isDirectUrl\n      ? html`<img ${ref(this.imageRef)} src=${assetPath} />`\n      : html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  private isDirectUrl(src: string): boolean {\n    return src.startsWith(\"http://\") || src.startsWith(\"https://\") || src.startsWith(\"data:\");\n  }\n\n  assetPath() {\n    if (this.assetId) {\n      return `${this.apiHost}/api/v1/image_files/${this.assetId}`;\n    }\n    if (this.isDirectUrl(this.src)) {\n      return this.src;\n    }\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = this.src.startsWith(\"/\")\n      ? this.src.slice(1)\n      : this.src;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/local/image?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  get hasOwnDuration() {\n    return this.hasExplicitDuration;\n  }\n\n  fetchImage = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () => [this.assetPath(), this.fetch, this.src, this.assetId] as const,\n    onError: (error) => {\n      // CRITICAL: Attach .catch() handler to prevent unhandled rejection\n      this.fetchImage.taskComplete.catch(() => {});\n      \n      // Don't log AbortErrors - these are expected when element is disconnected\n      const isAbortError = \n        error instanceof DOMException && error.name === \"AbortError\" ||\n        error instanceof Error && (\n          error.name === \"AbortError\" ||\n          error.message?.includes(\"signal is aborted\") ||\n          error.message?.includes(\"The user aborted a request\")\n        );\n      \n      // Also ignore \"Canvas not ready\" errors - happens during element lifecycle\n      const isCanvasNotReady = error instanceof Error && error.message === \"Canvas not ready\";\n      \n      if (isAbortError || isCanvasNotReady) {\n        return;\n      }\n      console.error(\"EFImage fetchImage error\", error);\n    },\n    task: async ([assetPath, fetch, src, assetId], { signal }) => {\n      // Skip if no source is set\n      if (!src && !assetId) {\n        return;\n      }\n\n      // For direct URLs, skip task - src is set directly in render\n      if (this.isDirectUrl(assetPath)) {\n        return;\n      }\n\n      // For asset-id and local files, use canvas as before\n      const response = await fetch(assetPath, { signal });\n      // Check abort after fetch\n      signal?.throwIfAborted();\n      \n      const image = new Image();\n      const blob = await response.blob();\n      // Check abort after blob conversion\n      signal?.throwIfAborted();\n      \n      image.src = URL.createObjectURL(blob);\n\n      await new Promise<void>((resolve, reject) => {\n        // Check abort before setting up image load handlers\n        if (signal?.aborted) {\n          URL.revokeObjectURL(image.src);\n          reject(new DOMException(\"Aborted\", \"AbortError\"));\n          return;\n        }\n        \n        const abortHandler = () => {\n          URL.revokeObjectURL(image.src);\n          reject(new DOMException(\"Aborted\", \"AbortError\"));\n        };\n        signal?.addEventListener(\"abort\", abortHandler, { once: true });\n        \n        image.onload = () => {\n          signal?.removeEventListener(\"abort\", abortHandler);\n          resolve();\n        };\n        image.onerror = (error) => {\n          signal?.removeEventListener(\"abort\", abortHandler);\n          URL.revokeObjectURL(image.src);\n          reject(error);\n        };\n      });\n\n      // Check abort after image load\n      signal?.throwIfAborted();\n\n      if (!this.canvasRef.value) throw new Error(\"Canvas not ready\");\n      const ctx = this.canvasRef.value.getContext(\"2d\");\n      if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n      this.canvasRef.value.width = image.width;\n      this.canvasRef.value.height = image.height;\n      ctx.drawImage(image, 0, 0);\n      \n      // Clean up object URL after use\n      URL.revokeObjectURL(image.src);\n    },\n  });\n\n  frameTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () => [this.fetchImage.status] as const,\n    onError: (error) => {\n      // CRITICAL: Attach .catch() handler to prevent unhandled rejection\n      this.frameTask.taskComplete.catch(() => {});\n      \n      // Don't log AbortErrors - these are expected when element is disconnected\n      const isAbortError = \n        error instanceof DOMException && error.name === \"AbortError\" ||\n        error instanceof Error && (\n          error.name === \"AbortError\" ||\n          error.message?.includes(\"signal is aborted\") ||\n          error.message?.includes(\"The user aborted a request\")\n        );\n      \n      if (isAbortError) {\n        return;\n      }\n      console.error(\"EFImage frameTask error\", error);\n    },\n    task: async ([_status], { signal }) => {\n      try {\n        await this.fetchImage.taskComplete;\n      } catch (error) {\n        // Handle AbortError from fetchImage gracefully\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n    },\n  });\n\n  /**\n   * Get the natural dimensions of the image.\n   * Returns null if the image hasn't loaded yet.\n   *\n   * @public\n   */\n  getNaturalDimensions(): { width: number; height: number } | null {\n    // For direct URLs, check img element\n    const img = this.imageRef.value;\n    if (img && img.naturalWidth > 0 && img.naturalHeight > 0) {\n      return {\n        width: img.naturalWidth,\n        height: img.naturalHeight,\n      };\n    }\n\n    // For canvas-based images, check canvas dimensions\n    const canvas = this.canvasRef.value;\n    if (canvas && canvas.width > 0 && canvas.height > 0) {\n      return {\n        width: canvas.width,\n        height: canvas.height,\n      };\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-image\": EFImage;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFImage.js","names":["EFImage","#renderVersion","#assetId","#imageLoaded","#lastLoadedPath","#imageLoadPromise","#doLoadImage"],"sources":["../../src/elements/EFImage.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  createFrameTaskWrapper,\n  PRIORITY_IMAGE,\n} from \"../preview/FrameController.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\n@customElement(\"ef-image\")\nexport class EFImage extends EFTemporal(\n  EFSourceMixin(FetchMixin(LitElement), {\n    assetType: \"image_files\",\n  }),\n) implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      canvas, img {\n        position: static;\n        all: initial;\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  imageRef = createRef<HTMLImageElement>();\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  /**\n   * Render version counter - increments when visual content changes.\n   * Used by RenderContext to cache rendered dataURLs.\n   */\n  #renderVersion = 0;\n\n  /**\n   * Get the current render version.\n   * Version increments when src or assetId changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  #assetId: string | null = null;\n  @property({ type: String, attribute: \"asset-id\", reflect: true })\n  set assetId(value: string | null) {\n    this.#assetId = value;\n  }\n\n  get assetId() {\n    return this.#assetId ?? this.getAttribute(\"asset-id\");\n  }\n\n  render() {\n    const assetPath = this.assetPath();\n    const isDirectUrl = this.isDirectUrl(assetPath);\n    return isDirectUrl\n      ? html`<img ${ref(this.imageRef)} src=${assetPath} />`\n      : html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  private isDirectUrl(src: string): boolean {\n    return src.startsWith(\"http://\") || src.startsWith(\"https://\") || src.startsWith(\"data:\");\n  }\n\n  assetPath() {\n    if (this.assetId) {\n      return `${this.apiHost}/api/v1/image_files/${this.assetId}`;\n    }\n    if (this.isDirectUrl(this.src)) {\n      return this.src;\n    }\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = this.src.startsWith(\"/\")\n      ? this.src.slice(1)\n      : this.src;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/local/image?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  get hasOwnDuration() {\n    return this.hasExplicitDuration;\n  }\n\n  // ============================================================================\n  // Image Loading - async method instead of Task\n  // ============================================================================\n\n  #imageLoaded = false;\n  #imageLoadPromise: Promise<void> | null = null;\n  #lastLoadedPath: string | null = null;\n\n  /**\n   * Load image from the configured source\n   */\n  async loadImage(signal?: AbortSignal): Promise<void> {\n    const assetPath = this.assetPath();\n\n    // Skip if no source\n    if (!this.src && !this.assetId) {\n      return;\n    }\n\n    // Return cached if path hasn't changed\n    if (this.#imageLoaded && this.#lastLoadedPath === assetPath) {\n      return;\n    }\n\n    // Return in-flight promise\n    if (this.#imageLoadPromise && this.#lastLoadedPath === assetPath) {\n      return this.#imageLoadPromise;\n    }\n\n    // For direct URLs, the img element handles loading\n    if (this.isDirectUrl(assetPath)) {\n      this.#imageLoaded = true;\n      this.#lastLoadedPath = assetPath;\n      return;\n    }\n\n    this.#lastLoadedPath = assetPath;\n    this.#imageLoadPromise = this.#doLoadImage(assetPath, signal);\n\n    try {\n      await this.#imageLoadPromise;\n      this.#imageLoaded = true;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      // Canvas not ready errors are expected during lifecycle\n      if (error instanceof Error && error.message === \"Canvas not ready\") {\n        return;\n      }\n      console.error(\"EFImage load error\", error);\n    } finally {\n      this.#imageLoadPromise = null;\n    }\n  }\n\n  async #doLoadImage(assetPath: string, signal?: AbortSignal): Promise<void> {\n    const response = await this.fetch(assetPath, { signal });\n    signal?.throwIfAborted();\n    \n    const image = new Image();\n    const blob = await response.blob();\n    signal?.throwIfAborted();\n    \n    image.src = URL.createObjectURL(blob);\n\n    await new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        URL.revokeObjectURL(image.src);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n      \n      const abortHandler = () => {\n        URL.revokeObjectURL(image.src);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n      \n      image.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      image.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        URL.revokeObjectURL(image.src);\n        reject(error);\n      };\n    });\n\n    signal?.throwIfAborted();\n\n    if (!this.canvasRef.value) throw new Error(\"Canvas not ready\");\n    const ctx = this.canvasRef.value.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n    this.canvasRef.value.width = image.width;\n    this.canvasRef.value.height = image.height;\n    ctx.drawImage(image, 0, 0);\n    \n    URL.revokeObjectURL(image.src);\n  }\n\n  /**\n   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.\n   * This is a compatibility wrapper that delegates to the new system.\n   */\n  frameTask = createFrameTaskWrapper(this);\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // Centralized frame control - no Lit Tasks\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    return {\n      needsPreparation: !this.#imageLoaded,\n      isReady: this.#imageLoaded,\n      priority: PRIORITY_IMAGE,\n    };\n  }\n\n  /**\n   * Async preparation - waits for image to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    await this.loadImage(signal);\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - image is already displayed via img element or canvas.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Image is already displayed - no explicit render action needed\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n    \n    // Trigger image load when src or assetId changes\n    if (changedProperties.has(\"src\") || changedProperties.has(\"assetId\")) {\n      this.#imageLoaded = false;\n      this.loadImage().catch(() => {});\n    }\n\n    // Increment render version on any property change.\n    if (changedProperties.size > 0) {\n      this.#renderVersion++;\n    }\n  }\n\n  /**\n   * Get the natural dimensions of the image.\n   * Returns null if the image hasn't loaded yet.\n   *\n   * @public\n   */\n  getNaturalDimensions(): { width: number; height: number } | null {\n    // For direct URLs, check img element\n    const img = this.imageRef.value;\n    if (img && img.naturalWidth > 0 && img.naturalHeight > 0) {\n      return {\n        width: img.naturalWidth,\n        height: img.naturalHeight,\n      };\n    }\n\n    // For canvas-based images, check canvas dimensions\n    const canvas = this.canvasRef.value;\n    if (canvas && canvas.width > 0 && canvas.height > 0) {\n      return {\n        width: canvas.width,\n        height: canvas.height,\n      };\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-image\": EFImage;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFMedia/AssetIdMediaEngine.js

@@ -27,8 +27,8 @@ var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 		const engine = new AssetIdMediaEngine(host, assetId, data, apiHost, _urlGenerator);
 		signal?.throwIfAborted();
 		if (signal) {
-			const videoTrack = engine.videoTrackIndex;
-			const audioTrack = engine.audioTrackIndex;
+			const videoTrack = engine.getVideoTrackIndex();
+			const audioTrack = engine.getAudioTrackIndex();
 			const needsVideo = requiredTracks === "video" || requiredTracks === "both";
 			const needsAudio = requiredTracks === "audio" || requiredTracks === "both";
 			if (needsVideo && videoTrack && videoTrack.track !== void 0) try {
@@ -59,27 +59,27 @@ var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 		this.apiHost = apiHost;
 		this.data = data;
 		this.durationMs = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0) * 1e3;
+		this.templates = {
+			initSegment: `${apiHost}/api/v1/isobmff_tracks/${assetId}/{trackId}`,
+			mediaSegment: `${apiHost}/api/v1/isobmff_tracks/${assetId}/{trackId}`
+		};
 	}
-	get initSegmentPaths() {
+	getInitSegmentPaths() {
 		const paths = {};
-		if (this.audioTrackIndex !== void 0) paths.audio = {
-			path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${this.audioTrackIndex.track}`,
-			pos: this.audioTrackIndex.initSegment.offset,
-			size: this.audioTrackIndex.initSegment.size
+		const audioTrack = this.getAudioTrackIndex();
+		const videoTrack = this.getVideoTrackIndex();
+		if (audioTrack !== void 0) paths.audio = {
+			path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${audioTrack.track}`,
+			pos: audioTrack.initSegment.offset,
+			size: audioTrack.initSegment.size
 		};
-		if (this.videoTrackIndex !== void 0) paths.video = {
-			path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${this.videoTrackIndex.track}`,
-			pos: this.videoTrackIndex.initSegment.offset,
-			size: this.videoTrackIndex.initSegment.size
+		if (videoTrack !== void 0) paths.video = {
+			path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${videoTrack.track}`,
+			pos: videoTrack.initSegment.offset,
+			size: videoTrack.initSegment.size
 		};
 		return paths;
 	}
-	get templates() {
-		return {
-			initSegment: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/{trackId}`,
-			mediaSegment: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/{trackId}`
-		};
-	}
 	buildInitSegmentUrl(trackId) {
 		return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
 	}