@editframe/elements 0.38.1 → 0.40.0

package/dist/EF_FRAMEGEN.js

@@ -178,6 +178,7 @@ var EFFramegen = class {
 		const startingTimeMs = renderOptions.encoderOptions.fromMs;
 		await firstGroup.waitForMediaDurations();
 		setupTemporalHierarchy(searchRoot, firstGroup);
+		firstGroup.setAttribute("data-no-playback-controller", "");
 		await firstGroup.seekForRender(startingTimeMs);
 		this.frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
 		this.time = startingTimeMs;

package/dist/EF_FRAMEGEN.js.map

@@ -1 +1 @@
-{"version":3,"file":"EF_FRAMEGEN.js","names":[],"sources":["../src/EF_FRAMEGEN.ts"],"sourcesContent":["import type { VideoRenderOptions } from \"@editframe/assets\";\n\nimport { shallowGetTimegroups } from \"./elements/EFTimegroup.js\";\nimport { setupTemporalHierarchy } from \"./elements/setupTemporalHierarchy.js\";\n\nimport { setupBrowserTracing } from \"./otel/setupBrowserTracing.js\";\nimport {\n  clearCurrentFrameSpan,\n  enableTracing,\n  extractParentContext,\n  setCurrentFrameSpan,\n  type TraceContext,\n  withSpan,\n  withSpanAndContext,\n} from \"./otel/tracingHelpers.js\";\n\ninterface Bridge {\n  onInitialize: (\n    callback: (\n      renderOptions: VideoRenderOptions,\n      traceContext?: TraceContext,\n      otelEndpoint?: string,\n    ) => void,\n  ) => void;\n\n  initialized(): void;\n\n  onBeginFrame(\n    callback: (\n      frameNumber: number,\n      isLast: boolean,\n      traceContext?: TraceContext,\n    ) => void,\n  ): void;\n\n  onTriggerCanvas(callback: (traceContext?: TraceContext) => void): void;\n\n  frameReady(frameNumber: number, audioSamples: ArrayBuffer): void;\n\n  error(error: Error): void;\n\n  syncLog(sequence: number, message: string, callback: () => void): void;\n\n  exportSpans?: (endpoint: string, payload: string) => void;\n}\n\ndeclare global {\n  interface Window {\n    EF_FRAMEGEN?: EFFramegen;\n    FRAMEGEN_BRIDGE?: Bridge;\n    FRAMEGEN_BINDING?: any;\n    FRAMEGEN_BINDING_error?: (error: Error) => void;\n    EF_RENDERING?: () => boolean;\n  }\n}\n\nclass TriggerCanvas {\n  private canvas: HTMLCanvasElement;\n  private ctx: CanvasRenderingContext2D;\n\n  private canvasInitialized = false;\n\n  constructor() {\n    this.canvas = document.createElement(\"canvas\");\n    const ctx = this.canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n    this.ctx = ctx;\n    this.ctx.fillStyle = \"transparent\";\n  }\n\n  initialize() {\n    if (this.canvasInitialized) return;\n    this.canvasInitialized = true;\n    this.canvas.width = 1;\n    this.canvas.height = 1;\n    Object.assign(this.canvas.style, {\n      position: \"fixed\",\n      top: \"0px\",\n      left: \"0px\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: \"100000\",\n    });\n    document.body.appendChild(this.canvas);\n  }\n\n  trigger() {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n  }\n}\n\nexport class EFFramegen {\n  time = 0;\n  frameDurationMs = 0;\n  audioBufferPromise?: Promise<AudioBuffer>;\n  renderOptions?: VideoRenderOptions;\n  frameBox = document.createElement(\"div\");\n  BRIDGE: typeof window.FRAMEGEN_BRIDGE;\n  triggerCanvas = new TriggerCanvas();\n  verificationCanvas?: HTMLCanvasElement;\n  verificationCtx?: CanvasRenderingContext2D;\n  private logSequence = 0;\n\n  // Frame sequence coordination\n  public frameTasksInProgress = false;\n  public currentFrameNumber = 0;\n\n  trace(...args: any[]) {\n    console.trace(\"[EF_FRAMEGEN]\", ...args);\n  }\n\n  async syncLog(...args: any[]): Promise<void> {\n    if (!this.BRIDGE) {\n      // Fallback to regular console.log if no bridge\n      console.log(\"[EF_FRAMEGEN]\", ...args);\n      return;\n    }\n\n    const sequence = ++this.logSequence;\n    const message = args\n      .map((arg) =>\n        typeof arg === \"object\" ? JSON.stringify(arg) : String(arg),\n      )\n      .join(\" \");\n\n    return new Promise<void>((resolve) => {\n      // biome-ignore lint/style/noNonNullAssertion: We know BRIDGE is set due to the guard above\n      this.BRIDGE!.syncLog(sequence, message, () => {\n        resolve();\n      });\n    });\n  }\n\n  private initializeVerificationCanvas() {\n    if (this.verificationCanvas) {\n      return;\n    }\n\n    this.verificationCanvas = document.createElement(\"canvas\");\n    const ctx = this.verificationCanvas.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Verification canvas 2d context not ready\");\n    this.verificationCtx = ctx;\n\n    // Size to match the workbench width, or fall back to renderOptions dimensions.\n    // Without ef-workbench (e.g. API renders), the canvas was never sized or appended,\n    // causing frame verification to fail on every frame.\n    const workbench = document.querySelector(\"ef-workbench\") as HTMLElement;\n    const canvasWidth = workbench\n      ? workbench.clientWidth\n      : (this.renderOptions?.encoderOptions.video.width ?? 0);\n\n    if (canvasWidth > 0) {\n      this.verificationCanvas.width = canvasWidth;\n      this.verificationCanvas.height = 1;\n\n      Object.assign(this.verificationCanvas.style, {\n        position: \"fixed\",\n        left: \"0px\",\n        bottom: \"0px\",\n        width: `${canvasWidth}px`,\n        height: \"1px\",\n        zIndex: \"99999\",\n      });\n\n      document.body.appendChild(this.verificationCanvas);\n    }\n  }\n\n  private drawVerificationStrip(frameNumber: number) {\n    this.initializeVerificationCanvas();\n\n    if (!this.verificationCanvas || !this.verificationCtx) {\n      return;\n    }\n\n    const width = this.verificationCanvas.width;\n    const height = this.verificationCanvas.height;\n\n    // Clear the strip\n    this.verificationCtx.clearRect(0, 0, width, height);\n\n    // Encode frame number into RGB (24-bit)\n    // R=high byte, G=middle byte, B=low byte\n    const red = Math.floor(frameNumber / (256 * 256)) % 256;\n    const green = Math.floor(frameNumber / 256) % 256;\n    const blue = frameNumber % 256;\n\n    // Fill the entire strip with the encoded frame number\n    this.verificationCtx.fillStyle = `rgb(${red}, ${green}, ${blue})`;\n    this.verificationCtx.fillRect(0, 0, width, height);\n  }\n\n  constructor() {\n    this.BRIDGE = window.FRAMEGEN_BRIDGE;\n    if (this.BRIDGE) {\n      this.connectToBridge();\n    }\n  }\n\n  /**\n   * Helper method to get the workbench and set its rendering state.\n   * This ensures consistent state management across the framegen lifecycle.\n   */\n  private setWorkbenchRendering(isRendering: boolean) {\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      workbench.rendering = isRendering;\n    }\n  }\n\n  connectToBridge() {\n    const BRIDGE = this.BRIDGE;\n    if (!BRIDGE) {\n      throw new Error(\"No BRIDGE when attempting to connect to bridge\");\n    }\n\n    BRIDGE.onInitialize(async (renderOptions, traceContext, otelEndpoint) => {\n      // Only enable tracing if explicitly requested in renderOptions\n      if (renderOptions.enableTracing && otelEndpoint) {\n        enableTracing();\n        await setupBrowserTracing({\n          otelEndpoint,\n          serviceName: \"telecine-browser\",\n          bridge: BRIDGE,\n          useBatching: true, // Batch spans to reduce overhead during rendering\n        });\n      }\n\n      const parentContext = extractParentContext(traceContext);\n\n      await withSpan(\n        \"browser.initialize\",\n        {\n          width: renderOptions.encoderOptions.video.width,\n          height: renderOptions.encoderOptions.video.height,\n          fps: renderOptions.encoderOptions.video.framerate,\n          durationMs:\n            renderOptions.encoderOptions.toMs -\n            renderOptions.encoderOptions.fromMs,\n        },\n        parentContext,\n        async () => {\n          try {\n            await this.initialize(renderOptions);\n          } catch (error) {\n            // If initialization fails, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            console.error(\n              \"[EF_FRAMEGEN.connectToBridge] error initializing\",\n              error,\n            );\n            throw error;\n          }\n        },\n      );\n\n      BRIDGE.initialized();\n    });\n\n    BRIDGE.onBeginFrame((frameNumber, isLast, traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n      withSpanAndContext(\n        \"browser.frame.render\",\n        {\n          frameNumber,\n          isLast,\n        },\n        parentContext,\n        async (span, _spanContext) => {\n          // Store the span itself for child operations\n          // This allows spans created in Lit Tasks to use it as their parent\n          setCurrentFrameSpan(span);\n\n          try {\n            await this.beginFrame(frameNumber, isLast);\n          } catch (error) {\n            // If an error occurs during rendering, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            throw error;\n          } finally {\n            clearCurrentFrameSpan();\n          }\n        },\n      ).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.beginFrame] error:\", error);\n        // Ensure rendering state is cleared on error\n        this.setWorkbenchRendering(false);\n        clearCurrentFrameSpan();\n        throw error;\n      });\n    });\n\n    BRIDGE.onTriggerCanvas((traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n\n      withSpan(\"browser.canvas.trigger\", {}, parentContext, async () => {\n        this.triggerCanvas.trigger();\n      }).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.triggerCanvas] error:\", error);\n      });\n    });\n  }\n\n  get showFrameBox() {\n    return this.renderOptions?.showFrameBox ?? false;\n  }\n\n  async initialize(renderOptions: VideoRenderOptions) {\n    this.renderOptions = renderOptions;\n\n    // Workbench is optional - look for it but don't require it\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      this.setWorkbenchRendering(true);\n      workbench.playing = false;\n    }\n\n    // Find timegroups either in workbench or directly in document\n    const searchRoot = workbench || document.body;\n    const timegroups = shallowGetTimegroups(searchRoot);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n    const startingTimeMs = renderOptions.encoderOptions.fromMs;\n    await firstGroup.waitForMediaDurations();\n\n    // CRITICAL: Manually wire up temporal hierarchy since Lit Context fails with our connection order\n    // When loading via loadURL(), elements connect depth-first (children before parents), causing\n    // children to miss the context-request event since parents aren't listening yet.\n    // See setupTemporalHierarchy.ts for detailed explanation.\n    setupTemporalHierarchy(searchRoot, firstGroup);\n\n    // Use seekForRender for proper time seeking during rendering\n    await firstGroup.seekForRender(startingTimeMs);\n\n    this.frameDurationMs = 1000 / renderOptions.encoderOptions.video.framerate;\n\n    this.time = startingTimeMs;\n    if (this.showFrameBox) {\n      Object.assign(this.frameBox.style, {\n        width: \"200px\",\n        height: \"100px\",\n        font: \"10px Arial\",\n        backgroundColor: \"white\",\n        position: \"absolute\",\n        top: \"0px\",\n        right: \"0px\",\n        zIndex: \"100000\",\n      });\n      document.body.prepend(this.frameBox);\n    }\n\n    this.triggerCanvas.initialize();\n\n    // These times are aligned to the audio frame boundaries\n    // And they include padding if any.\n    this.audioBufferPromise = firstGroup.renderAudio(\n      renderOptions.encoderOptions.alignedFromUs / 1000,\n      renderOptions.encoderOptions.alignedToUs / 1000,\n    );\n    // Suppress unhandled rejection while the promise sits in storage before being awaited.\n    this.audioBufferPromise.catch(() => {});\n  }\n\n  async beginFrame(frameNumber: number, isLast: boolean) {\n    if (this.renderOptions === undefined) {\n      throw new Error(\"No renderOptions\");\n    }\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      this.setWorkbenchRendering(true);\n    }\n    const searchRoot = workbench || document.body;\n    const timegroups = shallowGetTimegroups(searchRoot);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n\n    // Calculate base frame time using normal progression\n    const frameTime =\n      this.renderOptions.encoderOptions.fromMs +\n      frameNumber * this.frameDurationMs;\n    const frameTimeMs = Number(Number(frameTime).toFixed(5));\n\n    // Use seekForRender for proper time seeking during rendering\n    await firstGroup.seekForRender(frameTimeMs);\n    if (this.showFrameBox) {\n      this.frameBox.innerHTML = `\n        <div>🖼️   Frame: ${frameNumber}</div>\n        <div>🕛 Segment: ${this.time.toFixed(4)}</div>\n        <div>🕛   Frame: ${firstGroup.currentTimeMs.toFixed(4)}</div>\n        <div>  from-to: ${this.renderOptions.encoderOptions.fromMs.toFixed(4)} - ${this.renderOptions.encoderOptions.toMs.toFixed(4)}</div>\n      `;\n    }\n\n    // Draw verification pixel strip for frame verification\n    this.drawVerificationStrip(frameNumber);\n\n    if (isLast && this.audioBufferPromise) {\n      // Currently we emit the audio in one belch at the end of the render.\n      // This is not ideal, but it's the simplest thing that could possibly work.\n      // We could either emit it slices, or in parallel with the video.\n      // But in any case, it's fine for now.\n      const renderedAudio = await this.audioBufferPromise;\n\n      const channelCount = renderedAudio.numberOfChannels;\n\n      const interleavedSamples = new Float32Array(\n        channelCount * renderedAudio.length,\n      );\n\n      for (let i = 0; i < renderedAudio.length; i++) {\n        for (let j = 0; j < channelCount; j++) {\n          interleavedSamples.set(\n            renderedAudio.getChannelData(j).slice(i, i + 1),\n            i * channelCount + j,\n          );\n        }\n      }\n\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, interleavedSamples.buffer);\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n\n      // Rendering is complete after the last frame\n      this.setWorkbenchRendering(false);\n    } else {\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, new ArrayBuffer(0));\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n    }\n  }\n}\n\nif (typeof window !== \"undefined\") {\n  window.EF_FRAMEGEN = new EFFramegen();\n}\n"],"mappings":"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"}
+{"version":3,"file":"EF_FRAMEGEN.js","names":[],"sources":["../src/EF_FRAMEGEN.ts"],"sourcesContent":["import type { VideoRenderOptions } from \"@editframe/assets\";\n\nimport { shallowGetTimegroups } from \"./elements/EFTimegroup.js\";\nimport { setupTemporalHierarchy } from \"./elements/setupTemporalHierarchy.js\";\n\nimport { setupBrowserTracing } from \"./otel/setupBrowserTracing.js\";\nimport {\n  clearCurrentFrameSpan,\n  enableTracing,\n  extractParentContext,\n  setCurrentFrameSpan,\n  type TraceContext,\n  withSpan,\n  withSpanAndContext,\n} from \"./otel/tracingHelpers.js\";\n\ninterface Bridge {\n  onInitialize: (\n    callback: (\n      renderOptions: VideoRenderOptions,\n      traceContext?: TraceContext,\n      otelEndpoint?: string,\n    ) => void,\n  ) => void;\n\n  initialized(): void;\n\n  onBeginFrame(\n    callback: (\n      frameNumber: number,\n      isLast: boolean,\n      traceContext?: TraceContext,\n    ) => void,\n  ): void;\n\n  onTriggerCanvas(callback: (traceContext?: TraceContext) => void): void;\n\n  frameReady(frameNumber: number, audioSamples: ArrayBuffer): void;\n\n  error(error: Error): void;\n\n  syncLog(sequence: number, message: string, callback: () => void): void;\n\n  exportSpans?: (endpoint: string, payload: string) => void;\n}\n\ndeclare global {\n  interface Window {\n    EF_FRAMEGEN?: EFFramegen;\n    FRAMEGEN_BRIDGE?: Bridge;\n    FRAMEGEN_BINDING?: any;\n    FRAMEGEN_BINDING_error?: (error: Error) => void;\n    EF_RENDERING?: () => boolean;\n  }\n}\n\nclass TriggerCanvas {\n  private canvas: HTMLCanvasElement;\n  private ctx: CanvasRenderingContext2D;\n\n  private canvasInitialized = false;\n\n  constructor() {\n    this.canvas = document.createElement(\"canvas\");\n    const ctx = this.canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n    this.ctx = ctx;\n    this.ctx.fillStyle = \"transparent\";\n  }\n\n  initialize() {\n    if (this.canvasInitialized) return;\n    this.canvasInitialized = true;\n    this.canvas.width = 1;\n    this.canvas.height = 1;\n    Object.assign(this.canvas.style, {\n      position: \"fixed\",\n      top: \"0px\",\n      left: \"0px\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: \"100000\",\n    });\n    document.body.appendChild(this.canvas);\n  }\n\n  trigger() {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n  }\n}\n\nexport class EFFramegen {\n  time = 0;\n  frameDurationMs = 0;\n  audioBufferPromise?: Promise<AudioBuffer>;\n  renderOptions?: VideoRenderOptions;\n  frameBox = document.createElement(\"div\");\n  BRIDGE: typeof window.FRAMEGEN_BRIDGE;\n  triggerCanvas = new TriggerCanvas();\n  verificationCanvas?: HTMLCanvasElement;\n  verificationCtx?: CanvasRenderingContext2D;\n  private logSequence = 0;\n\n  // Frame sequence coordination\n  public frameTasksInProgress = false;\n  public currentFrameNumber = 0;\n\n  trace(...args: any[]) {\n    console.trace(\"[EF_FRAMEGEN]\", ...args);\n  }\n\n  async syncLog(...args: any[]): Promise<void> {\n    if (!this.BRIDGE) {\n      // Fallback to regular console.log if no bridge\n      console.log(\"[EF_FRAMEGEN]\", ...args);\n      return;\n    }\n\n    const sequence = ++this.logSequence;\n    const message = args\n      .map((arg) =>\n        typeof arg === \"object\" ? JSON.stringify(arg) : String(arg),\n      )\n      .join(\" \");\n\n    return new Promise<void>((resolve) => {\n      // biome-ignore lint/style/noNonNullAssertion: We know BRIDGE is set due to the guard above\n      this.BRIDGE!.syncLog(sequence, message, () => {\n        resolve();\n      });\n    });\n  }\n\n  private initializeVerificationCanvas() {\n    if (this.verificationCanvas) {\n      return;\n    }\n\n    this.verificationCanvas = document.createElement(\"canvas\");\n    const ctx = this.verificationCanvas.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Verification canvas 2d context not ready\");\n    this.verificationCtx = ctx;\n\n    // Size to match the workbench width, or fall back to renderOptions dimensions.\n    // Without ef-workbench (e.g. API renders), the canvas was never sized or appended,\n    // causing frame verification to fail on every frame.\n    const workbench = document.querySelector(\"ef-workbench\") as HTMLElement;\n    const canvasWidth = workbench\n      ? workbench.clientWidth\n      : (this.renderOptions?.encoderOptions.video.width ?? 0);\n\n    if (canvasWidth > 0) {\n      this.verificationCanvas.width = canvasWidth;\n      this.verificationCanvas.height = 1;\n\n      Object.assign(this.verificationCanvas.style, {\n        position: \"fixed\",\n        left: \"0px\",\n        bottom: \"0px\",\n        width: `${canvasWidth}px`,\n        height: \"1px\",\n        zIndex: \"99999\",\n      });\n\n      document.body.appendChild(this.verificationCanvas);\n    }\n  }\n\n  private drawVerificationStrip(frameNumber: number) {\n    this.initializeVerificationCanvas();\n\n    if (!this.verificationCanvas || !this.verificationCtx) {\n      return;\n    }\n\n    const width = this.verificationCanvas.width;\n    const height = this.verificationCanvas.height;\n\n    // Clear the strip\n    this.verificationCtx.clearRect(0, 0, width, height);\n\n    // Encode frame number into RGB (24-bit)\n    // R=high byte, G=middle byte, B=low byte\n    const red = Math.floor(frameNumber / (256 * 256)) % 256;\n    const green = Math.floor(frameNumber / 256) % 256;\n    const blue = frameNumber % 256;\n\n    // Fill the entire strip with the encoded frame number\n    this.verificationCtx.fillStyle = `rgb(${red}, ${green}, ${blue})`;\n    this.verificationCtx.fillRect(0, 0, width, height);\n  }\n\n  constructor() {\n    this.BRIDGE = window.FRAMEGEN_BRIDGE;\n    if (this.BRIDGE) {\n      this.connectToBridge();\n    }\n  }\n\n  /**\n   * Helper method to get the workbench and set its rendering state.\n   * This ensures consistent state management across the framegen lifecycle.\n   */\n  private setWorkbenchRendering(isRendering: boolean) {\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      workbench.rendering = isRendering;\n    }\n  }\n\n  connectToBridge() {\n    const BRIDGE = this.BRIDGE;\n    if (!BRIDGE) {\n      throw new Error(\"No BRIDGE when attempting to connect to bridge\");\n    }\n\n    BRIDGE.onInitialize(async (renderOptions, traceContext, otelEndpoint) => {\n      // Only enable tracing if explicitly requested in renderOptions\n      if (renderOptions.enableTracing && otelEndpoint) {\n        enableTracing();\n        await setupBrowserTracing({\n          otelEndpoint,\n          serviceName: \"telecine-browser\",\n          bridge: BRIDGE,\n          useBatching: true, // Batch spans to reduce overhead during rendering\n        });\n      }\n\n      const parentContext = extractParentContext(traceContext);\n\n      await withSpan(\n        \"browser.initialize\",\n        {\n          width: renderOptions.encoderOptions.video.width,\n          height: renderOptions.encoderOptions.video.height,\n          fps: renderOptions.encoderOptions.video.framerate,\n          durationMs:\n            renderOptions.encoderOptions.toMs -\n            renderOptions.encoderOptions.fromMs,\n        },\n        parentContext,\n        async () => {\n          try {\n            await this.initialize(renderOptions);\n          } catch (error) {\n            // If initialization fails, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            console.error(\n              \"[EF_FRAMEGEN.connectToBridge] error initializing\",\n              error,\n            );\n            throw error;\n          }\n        },\n      );\n\n      BRIDGE.initialized();\n    });\n\n    BRIDGE.onBeginFrame((frameNumber, isLast, traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n      withSpanAndContext(\n        \"browser.frame.render\",\n        {\n          frameNumber,\n          isLast,\n        },\n        parentContext,\n        async (span, _spanContext) => {\n          // Store the span itself for child operations\n          // This allows spans created in Lit Tasks to use it as their parent\n          setCurrentFrameSpan(span);\n\n          try {\n            await this.beginFrame(frameNumber, isLast);\n          } catch (error) {\n            // If an error occurs during rendering, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            throw error;\n          } finally {\n            clearCurrentFrameSpan();\n          }\n        },\n      ).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.beginFrame] error:\", error);\n        // Ensure rendering state is cleared on error\n        this.setWorkbenchRendering(false);\n        clearCurrentFrameSpan();\n        throw error;\n      });\n    });\n\n    BRIDGE.onTriggerCanvas((traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n\n      withSpan(\"browser.canvas.trigger\", {}, parentContext, async () => {\n        this.triggerCanvas.trigger();\n      }).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.triggerCanvas] error:\", error);\n      });\n    });\n  }\n\n  get showFrameBox() {\n    return this.renderOptions?.showFrameBox ?? false;\n  }\n\n  async initialize(renderOptions: VideoRenderOptions) {\n    this.renderOptions = renderOptions;\n\n    // Workbench is optional - look for it but don't require it\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      this.setWorkbenchRendering(true);\n      workbench.playing = false;\n    }\n\n    // Find timegroups either in workbench or directly in document\n    const searchRoot = workbench || document.body;\n    const timegroups = shallowGetTimegroups(searchRoot);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n    const startingTimeMs = renderOptions.encoderOptions.fromMs;\n    await firstGroup.waitForMediaDurations();\n\n    // CRITICAL: Manually wire up temporal hierarchy since Lit Context fails with our connection order\n    // When loading via loadURL(), elements connect depth-first (children before parents), causing\n    // children to miss the context-request event since parents aren't listening yet.\n    // See setupTemporalHierarchy.ts for detailed explanation.\n    setupTemporalHierarchy(searchRoot, firstGroup);\n\n    // Suppress autonomous re-renders (EFTemporal/EFTimegroup.updated) while\n    // seekForRender is in progress — same protection applied to render clones.\n    firstGroup.setAttribute(\"data-no-playback-controller\", \"\");\n\n    // Use seekForRender for proper time seeking during rendering\n    await firstGroup.seekForRender(startingTimeMs);\n\n    this.frameDurationMs = 1000 / renderOptions.encoderOptions.video.framerate;\n\n    this.time = startingTimeMs;\n    if (this.showFrameBox) {\n      Object.assign(this.frameBox.style, {\n        width: \"200px\",\n        height: \"100px\",\n        font: \"10px Arial\",\n        backgroundColor: \"white\",\n        position: \"absolute\",\n        top: \"0px\",\n        right: \"0px\",\n        zIndex: \"100000\",\n      });\n      document.body.prepend(this.frameBox);\n    }\n\n    this.triggerCanvas.initialize();\n\n    // These times are aligned to the audio frame boundaries\n    // And they include padding if any.\n    this.audioBufferPromise = firstGroup.renderAudio(\n      renderOptions.encoderOptions.alignedFromUs / 1000,\n      renderOptions.encoderOptions.alignedToUs / 1000,\n    );\n    // Suppress unhandled rejection while the promise sits in storage before being awaited.\n    this.audioBufferPromise.catch(() => {});\n  }\n\n  async beginFrame(frameNumber: number, isLast: boolean) {\n    if (this.renderOptions === undefined) {\n      throw new Error(\"No renderOptions\");\n    }\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      this.setWorkbenchRendering(true);\n    }\n    const searchRoot = workbench || document.body;\n    const timegroups = shallowGetTimegroups(searchRoot);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n\n    // Calculate base frame time using normal progression\n    const frameTime =\n      this.renderOptions.encoderOptions.fromMs +\n      frameNumber * this.frameDurationMs;\n    const frameTimeMs = Number(Number(frameTime).toFixed(5));\n\n    // Use seekForRender for proper time seeking during rendering\n    await firstGroup.seekForRender(frameTimeMs);\n    if (this.showFrameBox) {\n      this.frameBox.innerHTML = `\n        <div>🖼️   Frame: ${frameNumber}</div>\n        <div>🕛 Segment: ${this.time.toFixed(4)}</div>\n        <div>🕛   Frame: ${firstGroup.currentTimeMs.toFixed(4)}</div>\n        <div>  from-to: ${this.renderOptions.encoderOptions.fromMs.toFixed(4)} - ${this.renderOptions.encoderOptions.toMs.toFixed(4)}</div>\n      `;\n    }\n\n    // Draw verification pixel strip for frame verification\n    this.drawVerificationStrip(frameNumber);\n\n    if (isLast && this.audioBufferPromise) {\n      // Currently we emit the audio in one belch at the end of the render.\n      // This is not ideal, but it's the simplest thing that could possibly work.\n      // We could either emit it slices, or in parallel with the video.\n      // But in any case, it's fine for now.\n      const renderedAudio = await this.audioBufferPromise;\n\n      const channelCount = renderedAudio.numberOfChannels;\n\n      const interleavedSamples = new Float32Array(\n        channelCount * renderedAudio.length,\n      );\n\n      for (let i = 0; i < renderedAudio.length; i++) {\n        for (let j = 0; j < channelCount; j++) {\n          interleavedSamples.set(\n            renderedAudio.getChannelData(j).slice(i, i + 1),\n            i * channelCount + j,\n          );\n        }\n      }\n\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, interleavedSamples.buffer);\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n\n      // Rendering is complete after the last frame\n      this.setWorkbenchRendering(false);\n    } else {\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, new ArrayBuffer(0));\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n    }\n  }\n}\n\nif (typeof window !== \"undefined\") {\n  window.EF_FRAMEGEN = new EFFramegen();\n}\n"],"mappings":"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"}

package/dist/elements/EFCaptions.d.ts

@@ -5,7 +5,7 @@ import { FetchMixinInterface } from "./FetchMixin.js";
 import { AsyncValue } from "./EFMedia.js";
 import { EFAudio } from "./EFAudio.js";
 import { EFVideo } from "./EFVideo.js";
-import * as lit1 from "lit";
+import * as lit0 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 import * as lit_html0 from "lit-html";
 
@@ -61,7 +61,7 @@ declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
 declare const EFCaptions_base: (new (...args: any[]) => EFSourceMixinInterface) & (new (...args: any[]) => TemporalMixinInterface) & (new (...args: any[]) => FetchMixinInterface) & typeof LitElement;
 declare class EFCaptions extends EFCaptions_base implements FrameRenderable {
   #private;
-  static styles: lit1.CSSResult[];
+  static styles: lit0.CSSResult[];
   targetSelector: string;
   set target(value: string);
   wordStyle: string;

package/dist/elements/EFCaptions.js

@@ -138,7 +138,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		const targetSrc = this.targetElement.src;
 		let normalizedSrc = targetSrc.startsWith("/") ? targetSrc.slice(1) : targetSrc;
 		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
-		return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;
+		return `/api/v1/assets/captions?src=${encodeURIComponent(normalizedSrc)}`;
 	}
 	#captionsDataLoaded = false;
 	#captionsDataPromise = null;

package/dist/elements/EFCaptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#findElementById","#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  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 { flushSequenceDurationCache, EFTimegroup } 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 LitElement {\n  #wordText = \"\";\n  #wordIndex = 0;\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.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      // Add trailing space to maintain consistent spacing with surrounding words\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 LitElement {\n  #segmentText = \"\";\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.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\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  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.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\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  set segmentText(text: string) {\n    // No leading space - active word will add trailing space\n    const finalText = text;\n\n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = finalText;\n    }\n  }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions\n  extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {\n    assetType: \"caption_files\",\n  })\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      ::slotted(*) {\n        display: inline;\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    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}/transcription`;\n    }\n    return null;\n  }\n\n  captionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}`;\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  override shouldAutoReady(): boolean {\n    return false;\n  }\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      this.setContentReadyState(\"ready\");\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.setContentReadyState(\"loading\");\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      this.setContentReadyState(\"ready\");\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      this.setContentReadyState(\"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 = this.#findElementById(this.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 #${this.captionsScript}:`,\n            error,\n          );\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(\n          `Failed to load captions from ${this.captionsSrc}:`,\n          error,\n        );\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 =\n            (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(\n    signal?: AbortSignal,\n  ): Promise<Caption | null> {\n    if (!this.#transcriptionData) return null;\n\n    const fragmentIndex = Math.floor(\n      this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms,\n    );\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  // FrameRenderable Implementation\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 =\n      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      ? this.#findElementById(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      this.emitContentChange(\"source\");\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 = this.targetSelector\n      ? this.#findElementById(this.targetSelector)\n      : null;\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  /**\n   * Find element by ID, searching within clone scope first to avoid cross-boundary references.\n   * @private\n   */\n  #findElementById(id: string): Element | null {\n    // Search within nearest timegroup or configuration container first\n    const container = this.closest(\"ef-timegroup, ef-configuration\");\n    if (container) {\n      const result = container.querySelector(`#${CSS.escape(id)}`);\n      if (result) return result;\n    }\n\n    // Fall back to document-wide search\n    return document.getElementById(id);\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 = this.#findElementById(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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"}
+{"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#findElementById","#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  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 { flushSequenceDurationCache, EFTimegroup } 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 LitElement {\n  #wordText = \"\";\n  #wordIndex = 0;\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.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      // Add trailing space to maintain consistent spacing with surrounding words\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 LitElement {\n  #segmentText = \"\";\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.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\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  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.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\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  set segmentText(text: string) {\n    // No leading space - active word will add trailing space\n    const finalText = text;\n\n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = finalText;\n    }\n  }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions\n  extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {\n    assetType: \"caption_files\",\n  })\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      ::slotted(*) {\n        display: inline;\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    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}/transcription`;\n    }\n    return null;\n  }\n\n  captionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}`;\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/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  override shouldAutoReady(): boolean {\n    return false;\n  }\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      this.setContentReadyState(\"ready\");\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.setContentReadyState(\"loading\");\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      this.setContentReadyState(\"ready\");\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      this.setContentReadyState(\"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 = this.#findElementById(this.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 #${this.captionsScript}:`,\n            error,\n          );\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(\n          `Failed to load captions from ${this.captionsSrc}:`,\n          error,\n        );\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 =\n            (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(\n    signal?: AbortSignal,\n  ): Promise<Caption | null> {\n    if (!this.#transcriptionData) return null;\n\n    const fragmentIndex = Math.floor(\n      this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms,\n    );\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  // FrameRenderable Implementation\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 =\n      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      ? this.#findElementById(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      this.emitContentChange(\"source\");\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 = this.targetSelector\n      ? this.#findElementById(this.targetSelector)\n      : null;\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  /**\n   * Find element by ID, searching within clone scope first to avoid cross-boundary references.\n   * @private\n   */\n  #findElementById(id: string): Element | null {\n    // Search within nearest timegroup or configuration container first\n    const container = this.closest(\"ef-timegroup, ef-configuration\");\n    if (container) {\n      const result = container.querySelector(`#${CSS.escape(id)}`);\n      if (result) return result;\n    }\n\n    // Fall back to document-wide search\n    return document.getElementById(id);\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 = this.#findElementById(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.js

@@ -86,14 +86,13 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 	}
 	isDirectUrl(src) {
 		if (this.fileId) return false;
-		return src.startsWith("http://") || src.startsWith("https://") || src.startsWith("data:");
+		return src.startsWith("data:");
 	}
 	assetPath() {
 		if (this.fileId) return `${this.apiHost}/api/v1/files/${this.fileId}`;
 		if (this.isDirectUrl(this.src)) return this.src;
-		let normalizedSrc = this.src.startsWith("/") ? this.src.slice(1) : this.src;
-		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
-		return `/api/v1/assets/local/image?src=${encodeURIComponent(normalizedSrc)}`;
+		const normalizedSrc = this.src.startsWith("/") ? this.src.replace(/^\/+/, "") : this.src;
+		return `/api/v1/assets/image?src=${encodeURIComponent(normalizedSrc)}`;
 	}
 	get hasOwnDuration() {
 		return this.hasExplicitDuration;

package/dist/elements/EFImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFImage.js","names":["EFImage","#renderVersion","#hasAlpha","#fileId","#imageLoaded","#lastLoadedPath","#imageLoadPromise","#waitForImageElement","#doLoadImage","#currentObjectUrl"],"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  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\n  extends EFTemporal(\n    EFSourceMixin(FetchMixin(LitElement), {\n      assetType: \"image_files\",\n    }),\n  )\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        object-fit: contain;\n        object-position: center;\n      }\n      canvas, img {\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n      }\n    `,\n  ];\n\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: We need to access super\n    const parentAttributes = super.observedAttributes || [];\n    return [...parentAttributes, \"asset-id\"];\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ): void {\n    if (name === \"asset-id\") {\n      this.fileId = newValue;\n      return;\n    }\n    super.attributeChangedCallback(name, oldValue, newValue);\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 fileId changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  /**\n   * Whether the loaded image has an alpha channel.\n   * JPEG images don't have alpha, PNG/WebP may have alpha.\n   */\n  #hasAlpha = true; // Default to true (preserve alpha) until we know otherwise\n\n  /**\n   * Get whether the image has an alpha channel.\n   * Used to determine if we should encode as PNG (alpha) or JPEG (no alpha).\n   * @public\n   */\n  get hasAlpha(): boolean {\n    return this.#hasAlpha;\n  }\n\n  #fileId: string | null = null;\n\n  @property({ type: String, attribute: \"file-id\", reflect: true })\n  set fileId(value: string | null) {\n    this.#fileId = value;\n  }\n\n  get fileId() {\n    return (\n      this.#fileId ??\n      this.getAttribute(\"file-id\") ??\n      this.getAttribute(\"asset-id\")\n    );\n  }\n\n  /** @deprecated Use fileId instead */\n  get assetId(): string | null {\n    return this.fileId;\n  }\n  set assetId(value: string | null) {\n    this.fileId = value;\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    // For file-id based URLs (via apiHost), always use fetch+canvas instead of img element\n    // This ensures proper rendering in all contexts (server, browser-full-video, browser-frame-by-frame)\n    if (this.fileId) {\n      return false;\n    }\n    return (\n      src.startsWith(\"http://\") ||\n      src.startsWith(\"https://\") ||\n      src.startsWith(\"data:\")\n    );\n  }\n\n  assetPath() {\n    if (this.fileId) {\n      const path = `${this.apiHost}/api/v1/files/${this.fileId}`;\n      return path;\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(\"/\") ? this.src.slice(1) : 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  #currentObjectUrl: string | null = null;\n\n  override shouldAutoReady(): boolean {\n    return !this.src && !this.fileId;\n  }\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.fileId) {\n      return;\n    }\n\n    // Return cached if path hasn't changed\n    if (this.#imageLoaded && this.#lastLoadedPath === assetPath) {\n      this.setContentReadyState(\"ready\");\n      return;\n    }\n\n    // Return in-flight promise\n    if (this.#imageLoadPromise && this.#lastLoadedPath === assetPath) {\n      return this.#imageLoadPromise;\n    }\n\n    this.setContentReadyState(\"loading\");\n\n    // For direct URLs, wait for the img element to load\n    if (this.isDirectUrl(assetPath)) {\n      this.#lastLoadedPath = assetPath;\n      this.#imageLoadPromise = this.#waitForImageElement(signal);\n\n      try {\n        await this.#imageLoadPromise;\n        this.#imageLoaded = true;\n        this.setContentReadyState(\"ready\");\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFImage img element load error\", error);\n        this.setContentReadyState(\"error\");\n        throw error;\n      } finally {\n        this.#imageLoadPromise = null;\n      }\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      this.setContentReadyState(\"ready\");\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      this.setContentReadyState(\"error\");\n    } finally {\n      this.#imageLoadPromise = null;\n    }\n  }\n\n  async #waitForImageElement(signal?: AbortSignal): Promise<void> {\n    if (!this.imageRef.value) {\n      throw new Error(\"Image element not ready\");\n    }\n\n    const img = this.imageRef.value;\n\n    // If already loaded (cached), return immediately\n    if (img.complete && img.naturalHeight !== 0) {\n      return;\n    }\n\n    return new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n\n      const abortHandler = () => {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n\n      img.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      img.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        reject(error);\n      };\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    // Detect if image has alpha channel based on MIME type\n    // JPEG images don't have alpha, PNG/WebP may have alpha\n    const mimeType = blob.type.toLowerCase();\n    this.#hasAlpha = !mimeType.includes(\"jpeg\") && !mimeType.includes(\"jpg\");\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      willReadFrequently: true,\n    });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n\n    // Determine canvas dimensions\n    // For SVG images without explicit dimensions, image.width/height may be 0\n    // In that case, fall back to naturalWidth/naturalHeight or element's computed size\n    let canvasWidth = image.width || image.naturalWidth;\n    let canvasHeight = image.height || image.naturalHeight;\n\n    // If still zero (common with SVGs that only have viewBox), use element's computed size\n    if (canvasWidth === 0 || canvasHeight === 0) {\n      const computedStyle = getComputedStyle(this);\n      const elementWidth = parseFloat(computedStyle.width);\n      const elementHeight = parseFloat(computedStyle.height);\n\n      // Use element dimensions if available, otherwise use a reasonable default\n      if (elementWidth > 0 && elementHeight > 0) {\n        canvasWidth = elementWidth;\n        canvasHeight = elementHeight;\n      } else {\n        // Default to 300x150 (standard canvas default size)\n        canvasWidth = 300;\n        canvasHeight = 150;\n      }\n    }\n\n    this.canvasRef.value.width = canvasWidth;\n    this.canvasRef.value.height = canvasHeight;\n\n    // Ensure the image is fully decoded before drawing\n    // This is especially important for SVGs\n    try {\n      await image.decode();\n    } catch (decodeError) {\n      // Image decode failed, attempting to draw anyway\n    }\n\n    // Clear canvas first to ensure we're starting fresh\n    ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n\n    try {\n      ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);\n    } catch (drawError) {\n      console.error(`[EFImage] drawImage failed:`, drawError);\n      throw drawError;\n    }\n\n    // DON'T revoke the URL yet - keep it alive in case we need to redraw\n    // URL.revokeObjectURL(image.src);\n\n    // Store the object URL for cleanup later\n    if (this.#currentObjectUrl && this.#currentObjectUrl !== image.src) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n    }\n    this.#currentObjectUrl = image.src;\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\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(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n      this.#imageLoaded = false;\n      if (\n        changedProperties.get(\"src\") !== undefined ||\n        changedProperties.get(\"fileId\") !== undefined\n      ) {\n        this.emitContentChange(\"source\");\n      }\n      this.loadImage().catch(() => {});\n      this.#renderVersion++;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Clean up object URL when element is removed\n    if (this.#currentObjectUrl) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n      this.#currentObjectUrl = null;\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","#hasAlpha","#fileId","#imageLoaded","#lastLoadedPath","#imageLoadPromise","#waitForImageElement","#doLoadImage","#currentObjectUrl"],"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  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\n  extends EFTemporal(\n    EFSourceMixin(FetchMixin(LitElement), {\n      assetType: \"image_files\",\n    }),\n  )\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        object-fit: contain;\n        object-position: center;\n      }\n      canvas, img {\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n      }\n    `,\n  ];\n\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: We need to access super\n    const parentAttributes = super.observedAttributes || [];\n    return [...parentAttributes, \"asset-id\"];\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ): void {\n    if (name === \"asset-id\") {\n      this.fileId = newValue;\n      return;\n    }\n    super.attributeChangedCallback(name, oldValue, newValue);\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 fileId changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  /**\n   * Whether the loaded image has an alpha channel.\n   * JPEG images don't have alpha, PNG/WebP may have alpha.\n   */\n  #hasAlpha = true; // Default to true (preserve alpha) until we know otherwise\n\n  /**\n   * Get whether the image has an alpha channel.\n   * Used to determine if we should encode as PNG (alpha) or JPEG (no alpha).\n   * @public\n   */\n  get hasAlpha(): boolean {\n    return this.#hasAlpha;\n  }\n\n  #fileId: string | null = null;\n\n  @property({ type: String, attribute: \"file-id\", reflect: true })\n  set fileId(value: string | null) {\n    this.#fileId = value;\n  }\n\n  get fileId() {\n    return (\n      this.#fileId ??\n      this.getAttribute(\"file-id\") ??\n      this.getAttribute(\"asset-id\")\n    );\n  }\n\n  /** @deprecated Use fileId instead */\n  get assetId(): string | null {\n    return this.fileId;\n  }\n  set assetId(value: string | null) {\n    this.fileId = value;\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    if (this.fileId) {\n      return false;\n    }\n    return src.startsWith(\"data:\");\n  }\n\n  assetPath() {\n    if (this.fileId) {\n      const path = `${this.apiHost}/api/v1/files/${this.fileId}`;\n      return path;\n    }\n    if (this.isDirectUrl(this.src)) {\n      return this.src;\n    }\n    // Normalize local paths: remove leading slashes (remote URLs are passed as-is)\n    const normalizedSrc = this.src.startsWith(\"/\")\n      ? this.src.replace(/^\\/+/, \"\")\n      : this.src;\n    return `/api/v1/assets/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  #currentObjectUrl: string | null = null;\n\n  override shouldAutoReady(): boolean {\n    return !this.src && !this.fileId;\n  }\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.fileId) {\n      return;\n    }\n\n    // Return cached if path hasn't changed\n    if (this.#imageLoaded && this.#lastLoadedPath === assetPath) {\n      this.setContentReadyState(\"ready\");\n      return;\n    }\n\n    // Return in-flight promise\n    if (this.#imageLoadPromise && this.#lastLoadedPath === assetPath) {\n      return this.#imageLoadPromise;\n    }\n\n    this.setContentReadyState(\"loading\");\n\n    // For direct URLs, wait for the img element to load\n    if (this.isDirectUrl(assetPath)) {\n      this.#lastLoadedPath = assetPath;\n      this.#imageLoadPromise = this.#waitForImageElement(signal);\n\n      try {\n        await this.#imageLoadPromise;\n        this.#imageLoaded = true;\n        this.setContentReadyState(\"ready\");\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFImage img element load error\", error);\n        this.setContentReadyState(\"error\");\n        throw error;\n      } finally {\n        this.#imageLoadPromise = null;\n      }\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      this.setContentReadyState(\"ready\");\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      this.setContentReadyState(\"error\");\n    } finally {\n      this.#imageLoadPromise = null;\n    }\n  }\n\n  async #waitForImageElement(signal?: AbortSignal): Promise<void> {\n    if (!this.imageRef.value) {\n      throw new Error(\"Image element not ready\");\n    }\n\n    const img = this.imageRef.value;\n\n    // If already loaded (cached), return immediately\n    if (img.complete && img.naturalHeight !== 0) {\n      return;\n    }\n\n    return new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n\n      const abortHandler = () => {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n\n      img.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      img.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        reject(error);\n      };\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    // Detect if image has alpha channel based on MIME type\n    // JPEG images don't have alpha, PNG/WebP may have alpha\n    const mimeType = blob.type.toLowerCase();\n    this.#hasAlpha = !mimeType.includes(\"jpeg\") && !mimeType.includes(\"jpg\");\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      willReadFrequently: true,\n    });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n\n    // Determine canvas dimensions\n    // For SVG images without explicit dimensions, image.width/height may be 0\n    // In that case, fall back to naturalWidth/naturalHeight or element's computed size\n    let canvasWidth = image.width || image.naturalWidth;\n    let canvasHeight = image.height || image.naturalHeight;\n\n    // If still zero (common with SVGs that only have viewBox), use element's computed size\n    if (canvasWidth === 0 || canvasHeight === 0) {\n      const computedStyle = getComputedStyle(this);\n      const elementWidth = parseFloat(computedStyle.width);\n      const elementHeight = parseFloat(computedStyle.height);\n\n      // Use element dimensions if available, otherwise use a reasonable default\n      if (elementWidth > 0 && elementHeight > 0) {\n        canvasWidth = elementWidth;\n        canvasHeight = elementHeight;\n      } else {\n        // Default to 300x150 (standard canvas default size)\n        canvasWidth = 300;\n        canvasHeight = 150;\n      }\n    }\n\n    this.canvasRef.value.width = canvasWidth;\n    this.canvasRef.value.height = canvasHeight;\n\n    // Ensure the image is fully decoded before drawing\n    // This is especially important for SVGs\n    try {\n      await image.decode();\n    } catch (decodeError) {\n      // Image decode failed, attempting to draw anyway\n    }\n\n    // Clear canvas first to ensure we're starting fresh\n    ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n\n    try {\n      ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);\n    } catch (drawError) {\n      console.error(`[EFImage] drawImage failed:`, drawError);\n      throw drawError;\n    }\n\n    // DON'T revoke the URL yet - keep it alive in case we need to redraw\n    // URL.revokeObjectURL(image.src);\n\n    // Store the object URL for cleanup later\n    if (this.#currentObjectUrl && this.#currentObjectUrl !== image.src) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n    }\n    this.#currentObjectUrl = image.src;\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\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(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n      this.#imageLoaded = false;\n      if (\n        changedProperties.get(\"src\") !== undefined ||\n        changedProperties.get(\"fileId\") !== undefined\n      ) {\n        this.emitContentChange(\"source\");\n      }\n      this.loadImage().catch(() => {});\n      this.#renderVersion++;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Clean up object URL when element is removed\n    if (this.#currentObjectUrl) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n      this.#currentObjectUrl = null;\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/BufferedSeekingInput.js

@@ -1,6 +1,6 @@
 import { withSpan } from "../../otel/tracingHelpers.js";
-import { DEFAULT_MEDIABUNNY_TIMEOUT_MS, withTimeout } from "./shared/timeoutUtils.js";
 import { roundToMilliseconds } from "./shared/PrecisionUtils.js";
+import { DEFAULT_MEDIABUNNY_TIMEOUT_MS, withTimeout } from "./shared/timeoutUtils.js";
 import { SampleBuffer } from "../SampleBuffer.js";
 import { AudioSampleSink, BufferSource, Input, InputAudioTrack, InputVideoTrack, MP4, VideoSampleSink } from "mediabunny";
 

package/dist/elements/EFMedia/CachedFetcher.js

@@ -0,0 +1,99 @@
+import { withSpan } from "../../otel/tracingHelpers.js";
+import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator.js";
+import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
+
+//#region src/elements/EFMedia/CachedFetcher.ts
+const mediaCache = new SizeAwareLRUCache(100 * 1024 * 1024);
+const globalRequestDeduplicator = new RequestDeduplicator();
+var CachedFetcher = class {
+	#fetchFn;
+	constructor(fetchFn) {
+		this.#fetchFn = fetchFn;
+	}
+	has(key) {
+		return mediaCache.has(key);
+	}
+	async fetchArrayBuffer(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.#fetchWithCache(url, {
+			responseType: "arrayBuffer",
+			signal
+		});
+	}
+	async fetchJson(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.#fetchWithCache(url, {
+			responseType: "json",
+			signal
+		});
+	}
+	async #fetchWithCache(url, options) {
+		return withSpan("cachedFetcher.fetchWithCache", {
+			url: url.length > 100 ? `${url.substring(0, 100)}...` : url,
+			responseType: options.responseType
+		}, void 0, async (span) => {
+			const { responseType, headers, signal } = options;
+			const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+			const cached = mediaCache.get(cacheKey);
+			if (cached) {
+				span.setAttribute("cacheHit", true);
+				if (signal) return this.#handleAbortForCachedRequest(cached, signal);
+				return cached;
+			}
+			span.setAttribute("cacheHit", false);
+			const promise = globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+				try {
+					const response = await this.#fetchFn(url, {
+						headers,
+						signal
+					});
+					const contentType = response.headers.get("content-type");
+					if (responseType === "json") {
+						if (!response.ok || contentType && !contentType.includes("application/json") && !contentType.includes("text/json")) {
+							const text = await response.clone().text();
+							if (!response.ok) throw new Error(`Failed to fetch: ${response.status} ${text.substring(0, 100)}`);
+							throw new Error(`Expected JSON but got ${contentType}: ${text.substring(0, 100)}`);
+						}
+						try {
+							return await response.json();
+						} catch (error) {
+							throw new Error(`Failed to parse JSON response: ${error instanceof Error ? error.message : String(error)}`);
+						}
+					}
+					if (!response.ok) {
+						const text = await response.clone().text();
+						throw new Error(`Failed to fetch: ${response.status} ${text.substring(0, 100)}`);
+					}
+					const buffer = await response.arrayBuffer();
+					span.setAttribute("sizeBytes", buffer.byteLength);
+					return buffer;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+					throw error;
+				}
+			});
+			mediaCache.set(cacheKey, promise);
+			promise.catch((error) => {
+				if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+			});
+			if (signal) return this.#handleAbortForCachedRequest(promise, signal);
+			return promise;
+		});
+	}
+	#handleAbortForCachedRequest(promise, signal) {
+		if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+		const abortPromise = new Promise((_, reject) => {
+			signal.addEventListener("abort", () => {
+				reject(new DOMException("Aborted", "AbortError"));
+			});
+		});
+		abortPromise.catch(() => {});
+		const racePromise = Promise.race([promise, abortPromise]);
+		racePromise.catch(() => {});
+		return racePromise;
+	}
+};
+
+//#endregion
+export { CachedFetcher };
+//# sourceMappingURL=CachedFetcher.js.map

package/dist/elements/EFMedia/CachedFetcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CachedFetcher.js","names":["#fetchFn","#fetchWithCache","#handleAbortForCachedRequest"],"sources":["../../../src/elements/EFMedia/CachedFetcher.ts"],"sourcesContent":["import { withSpan } from \"../../otel/tracingHelpers.js\";\nimport { RequestDeduplicator } from \"../../transcoding/cache/RequestDeduplicator.js\";\nimport { SizeAwareLRUCache } from \"../../utils/LRUCache.js\";\n\nexport const mediaCache = new SizeAwareLRUCache<string>(100 * 1024 * 1024);\nexport const globalRequestDeduplicator = new RequestDeduplicator();\n\nexport interface FetchFn {\n  (\n    url: string,\n    init?: { headers?: Record<string, string>; signal?: AbortSignal },\n  ): Promise<Response>;\n}\n\nexport class CachedFetcher {\n  #fetchFn: FetchFn;\n\n  constructor(fetchFn: FetchFn) {\n    this.#fetchFn = fetchFn;\n  }\n\n  has(key: string): boolean {\n    return mediaCache.has(key);\n  }\n\n  async fetchArrayBuffer(\n    url: string,\n    signal?: AbortSignal,\n  ): Promise<ArrayBuffer> {\n    if (signal?.aborted) {\n      throw new DOMException(\"Aborted\", \"AbortError\");\n    }\n    return this.#fetchWithCache(url, { responseType: \"arrayBuffer\", signal });\n  }\n\n  async fetchJson(url: string, signal?: AbortSignal): Promise<any> {\n    if (signal?.aborted) {\n      throw new DOMException(\"Aborted\", \"AbortError\");\n    }\n    return this.#fetchWithCache(url, { responseType: \"json\", signal });\n  }\n\n  async #fetchWithCache(\n    url: string,\n    options: {\n      responseType: \"arrayBuffer\" | \"json\";\n      headers?: Record<string, string>;\n      signal?: AbortSignal;\n    },\n  ): Promise<any> {\n    return withSpan(\n      \"cachedFetcher.fetchWithCache\",\n      {\n        url: url.length > 100 ? `${url.substring(0, 100)}...` : url,\n        responseType: options.responseType,\n      },\n      undefined,\n      async (span) => {\n        const { responseType, headers, signal } = options;\n\n        const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;\n\n        const cached = mediaCache.get(cacheKey);\n        if (cached) {\n          span.setAttribute(\"cacheHit\", true);\n          if (signal) {\n            return this.#handleAbortForCachedRequest(cached, signal);\n          }\n          return cached;\n        }\n\n        span.setAttribute(\"cacheHit\", false);\n\n        const promise = globalRequestDeduplicator.executeRequest(\n          cacheKey,\n          async () => {\n            try {\n              const response = await this.#fetchFn(url, { headers, signal });\n              const contentType = response.headers.get(\"content-type\");\n\n              if (responseType === \"json\") {\n                if (\n                  !response.ok ||\n                  (contentType &&\n                    !contentType.includes(\"application/json\") &&\n                    !contentType.includes(\"text/json\"))\n                ) {\n                  const text = await response.clone().text();\n                  if (!response.ok) {\n                    throw new Error(\n                      `Failed to fetch: ${response.status} ${text.substring(0, 100)}`,\n                    );\n                  }\n                  throw new Error(\n                    `Expected JSON but got ${contentType}: ${text.substring(0, 100)}`,\n                  );\n                }\n                try {\n                  return await response.json();\n                } catch (error) {\n                  throw new Error(\n                    `Failed to parse JSON response: ${error instanceof Error ? error.message : String(error)}`,\n                  );\n                }\n              }\n\n              if (!response.ok) {\n                const text = await response.clone().text();\n                throw new Error(\n                  `Failed to fetch: ${response.status} ${text.substring(0, 100)}`,\n                );\n              }\n\n              const buffer = await response.arrayBuffer();\n              span.setAttribute(\"sizeBytes\", buffer.byteLength);\n              return buffer;\n            } catch (error) {\n              if (\n                error instanceof DOMException &&\n                error.name === \"AbortError\"\n              ) {\n                mediaCache.delete(cacheKey);\n              }\n              throw error;\n            }\n          },\n        );\n\n        mediaCache.set(cacheKey, promise);\n\n        promise.catch((error) => {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            mediaCache.delete(cacheKey);\n          }\n        });\n\n        if (signal) {\n          return this.#handleAbortForCachedRequest(promise, signal);\n        }\n\n        return promise;\n      },\n    );\n  }\n\n  #handleAbortForCachedRequest<T>(\n    promise: Promise<T>,\n    signal: AbortSignal,\n  ): Promise<T> {\n    if (signal.aborted) {\n      throw new DOMException(\"Aborted\", \"AbortError\");\n    }\n\n    const abortPromise = new Promise<never>((_, reject) => {\n      signal.addEventListener(\"abort\", () => {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      });\n    });\n    abortPromise.catch(() => {});\n\n    const racePromise = Promise.race([promise, abortPromise]);\n    racePromise.catch(() => {});\n    return racePromise;\n  }\n}\n"],"mappings":";;;;;AAIA,MAAa,aAAa,IAAI,kBAA0B,MAAM,OAAO,KAAK;AAC1E,MAAa,4BAA4B,IAAI,qBAAqB;AASlE,IAAa,gBAAb,MAA2B;CACzB;CAEA,YAAY,SAAkB;AAC5B,QAAKA,UAAW;;CAGlB,IAAI,KAAsB;AACxB,SAAO,WAAW,IAAI,IAAI;;CAG5B,MAAM,iBACJ,KACA,QACsB;AACtB,MAAI,QAAQ,QACV,OAAM,IAAI,aAAa,WAAW,aAAa;AAEjD,SAAO,MAAKC,eAAgB,KAAK;GAAE,cAAc;GAAe;GAAQ,CAAC;;CAG3E,MAAM,UAAU,KAAa,QAAoC;AAC/D,MAAI,QAAQ,QACV,OAAM,IAAI,aAAa,WAAW,aAAa;AAEjD,SAAO,MAAKA,eAAgB,KAAK;GAAE,cAAc;GAAQ;GAAQ,CAAC;;CAGpE,OAAMA,eACJ,KACA,SAKc;AACd,SAAO,SACL,gCACA;GACE,KAAK,IAAI,SAAS,MAAM,GAAG,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO;GACxD,cAAc,QAAQ;GACvB,EACD,QACA,OAAO,SAAS;GACd,MAAM,EAAE,cAAc,SAAS,WAAW;GAE1C,MAAM,WAAW,UAAU,GAAG,IAAI,GAAG,KAAK,UAAU,QAAQ,KAAK;GAEjE,MAAM,SAAS,WAAW,IAAI,SAAS;AACvC,OAAI,QAAQ;AACV,SAAK,aAAa,YAAY,KAAK;AACnC,QAAI,OACF,QAAO,MAAKC,4BAA6B,QAAQ,OAAO;AAE1D,WAAO;;AAGT,QAAK,aAAa,YAAY,MAAM;GAEpC,MAAM,UAAU,0BAA0B,eACxC,UACA,YAAY;AACV,QAAI;KACF,MAAM,WAAW,MAAM,MAAKF,QAAS,KAAK;MAAE;MAAS;MAAQ,CAAC;KAC9D,MAAM,cAAc,SAAS,QAAQ,IAAI,eAAe;AAExD,SAAI,iBAAiB,QAAQ;AAC3B,UACE,CAAC,SAAS,MACT,eACC,CAAC,YAAY,SAAS,mBAAmB,IACzC,CAAC,YAAY,SAAS,YAAY,EACpC;OACA,MAAM,OAAO,MAAM,SAAS,OAAO,CAAC,MAAM;AAC1C,WAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MACR,oBAAoB,SAAS,OAAO,GAAG,KAAK,UAAU,GAAG,IAAI,GAC9D;AAEH,aAAM,IAAI,MACR,yBAAyB,YAAY,IAAI,KAAK,UAAU,GAAG,IAAI,GAChE;;AAEH,UAAI;AACF,cAAO,MAAM,SAAS,MAAM;eACrB,OAAO;AACd,aAAM,IAAI,MACR,kCAAkC,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACzF;;;AAIL,SAAI,CAAC,SAAS,IAAI;MAChB,MAAM,OAAO,MAAM,SAAS,OAAO,CAAC,MAAM;AAC1C,YAAM,IAAI,MACR,oBAAoB,SAAS,OAAO,GAAG,KAAK,UAAU,GAAG,IAAI,GAC9D;;KAGH,MAAM,SAAS,MAAM,SAAS,aAAa;AAC3C,UAAK,aAAa,aAAa,OAAO,WAAW;AACjD,YAAO;aACA,OAAO;AACd,SACE,iBAAiB,gBACjB,MAAM,SAAS,aAEf,YAAW,OAAO,SAAS;AAE7B,WAAM;;KAGX;AAED,cAAW,IAAI,UAAU,QAAQ;AAEjC,WAAQ,OAAO,UAAU;AACvB,QAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,YAAW,OAAO,SAAS;KAE7B;AAEF,OAAI,OACF,QAAO,MAAKE,4BAA6B,SAAS,OAAO;AAG3D,UAAO;IAEV;;CAGH,6BACE,SACA,QACY;AACZ,MAAI,OAAO,QACT,OAAM,IAAI,aAAa,WAAW,aAAa;EAGjD,MAAM,eAAe,IAAI,SAAgB,GAAG,WAAW;AACrD,UAAO,iBAAiB,eAAe;AACrC,WAAO,IAAI,aAAa,WAAW,aAAa,CAAC;KACjD;IACF;AACF,eAAa,YAAY,GAAG;EAE5B,MAAM,cAAc,QAAQ,KAAK,CAAC,SAAS,aAAa,CAAC;AACzD,cAAY,YAAY,GAAG;AAC3B,SAAO"}

package/dist/elements/EFMedia/MediaEngine.d.ts

@@ -0,0 +1,19 @@
+import { SegmentIndex, TrackSet } from "./SegmentIndex.js";
+import { SegmentTransport } from "./SegmentTransport.js";
+import { TimingModel } from "./TimingModel.js";
+import { ThumbnailResult } from "../../transcoding/types/index.js";
+import "@editframe/assets";
+
+//#region src/elements/EFMedia/MediaEngine.d.ts
+interface MediaEngine {
+  readonly durationMs: number;
+  readonly src: string;
+  readonly index: SegmentIndex;
+  readonly transport: SegmentTransport;
+  readonly timing: TimingModel;
+  readonly tracks: TrackSet;
+  extractThumbnails(timestamps: number[], signal?: AbortSignal): Promise<(ThumbnailResult | null)[]>;
+}
+//#endregion
+export { MediaEngine };
+//# sourceMappingURL=MediaEngine.d.ts.map