@editframe/elements 0.45.2 → 0.45.3

package/dist/gui/timeline/tracks/EFThumbnailStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFThumbnailStrip.js","names":["#timestamps","EFThumbnailStrip","#timelineState","#thumbnailDimensions","#effectiveDurationMs","#effectivePixelsPerMs","#hostWidth","#targetController","#resizeObserver","#scheduleRender","#abortController","#cleanupTimegroupGenerator","#detachTargetListeners","#calculateThumbnailDimensions","#attachTargetListeners","#targetReadyStateHandler","#targetContentChangeHandler","thumbnails: ThumbnailDescriptor[]","#previousPixelsPerMs","#thumbnailPhase","#renderRequested","#renderThumbnails","#calculateVisibleThumbnails","#clearCanvas","#lastRequiredTimestamps","#updateVideoCapture","#updateTimegroupCapture","results: ThumbnailResult[]","#thumbnailCache","nearestTimeMs: number | null","#drawThumbnails","#getSourceTimeMs","#updateInProgress","#pendingTimestamps","#retryScheduled","#timegroupGenerator","#timegroupGeneratorAbort","#timegroupQueue","#timegroupClone","#previewContainer","#consumeTimegroupGenerator","#startTimegroupGenerator","updatePromises: Promise<any>[]","textUpdatePromises: Promise<any>[]","imagePromises: Promise<void>[]","#consumerRunning","#canvasContainer"],"sources":["../../../../src/gui/timeline/tracks/EFThumbnailStrip.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref, type Ref } from \"lit/directives/ref.js\";\n\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { TargetController } from \"../../../elements/TargetController.js\";\nimport { ThumbnailExtractor } from \"../../../elements/EFMedia/shared/ThumbnailExtractor.js\";\nimport {\n  generateThumbnailsFromClone,\n  type GeneratedThumbnail,\n  type ThumbnailQueue,\n} from \"../../../preview/renderTimegroupToCanvas.js\";\n\nimport { quantizeToFrameTimeMs } from \"../../../utils/frameTime.js\";\nimport { TWMixin } from \"../../TWMixin.js\";\nimport {\n  timelineStateContext,\n  type TimelineState,\n} from \"../timelineStateContext.js\";\nimport {\n  previewSettingsContext,\n  type PreviewSettings,\n} from \"../../previewSettingsContext.js\";\n\n/** Padding for virtual rendering */\nconst VIRTUAL_RENDER_PADDING_PX = 100;\n\n/**\n * Mutable queue for timestamp generation.\n * Allows updating timestamps while generator is consuming them.\n */\nclass MutableTimestampQueue implements ThumbnailQueue {\n  #timestamps: number[] = [];\n\n  /** Replace entire queue with new timestamps (sorted) */\n  reset(timestamps: number[]): void {\n    this.#timestamps = [...timestamps].sort((a, b) => a - b);\n  }\n\n  /** Keep only these specific timestamps (maintains order) */\n  retainOnly(timestamps: number[]): void {\n    const keep = new Set(timestamps);\n    this.#timestamps = this.#timestamps.filter((t) => keep.has(t));\n  }\n\n  /** Append timestamps to end (sorted) */\n  append(timestamps: number[]): void {\n    this.#timestamps.push(...[...timestamps].sort((a, b) => a - b));\n  }\n\n  /** Get next timestamp (removes from front) */\n  shift(): number | undefined {\n    return this.#timestamps.shift();\n  }\n\n  /** Get remaining timestamps without modifying queue */\n  remaining(): number[] {\n    return [...this.#timestamps];\n  }\n\n  /** Check if queue is empty */\n  isEmpty(): boolean {\n    return this.#timestamps.length === 0;\n  }\n}\n\n/**\n * Descriptor for a thumbnail to render\n */\ninterface ThumbnailDescriptor {\n  timeMs: number;\n  x: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Result of thumbnail rendering (canvas or error)\n */\ninterface ThumbnailResult {\n  canvas: CanvasImageSource | null;\n  error?: Error;\n}\n\n/**\n * Thumbnail strip component that renders thumbnails for video or timegroup elements.\n *\n * Features:\n * - Targets ef-video or root ef-timegroup via target attribute\n * - Batch video thumbnail extraction via ThumbnailExtractor\n * - Canvas rendering for timegroups at low resolution\n * - Viewport-based lazy loading with scroll calculation\n * - Fixed visual spacing (consistent at all zoom levels)\n * - Error indicators for failed thumbnails\n */\n@customElement(\"ef-thumbnail-strip\")\nexport class EFThumbnailStrip extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      .thumbnail-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      .error-message {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        padding: 8px;\n        color: var(--ef-color-error);\n        font-size: 12px;\n        background: color-mix(in srgb, var(--ef-color-error) 10%, transparent);\n      }\n\n      canvas {\n        position: absolute;\n        image-rendering: pixelated;\n        image-rendering: crisp-edges;\n      }\n\n      .shimmer-overlay {\n        display: none;\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(\n          90deg,\n          color-mix(in srgb, var(--ef-color-text, #fafafa) 12%, transparent) 0%,\n          color-mix(in srgb, var(--ef-color-text, #fafafa) 28%, transparent) 50%,\n          color-mix(in srgb, var(--ef-color-text, #fafafa) 12%, transparent) 100%\n        );\n        background-size: 200% 100%;\n        pointer-events: none;\n      }\n\n      .shimmer-overlay.active {\n        display: block;\n        animation: shimmer-strip var(--ef-loading-shimmer-duration, 1.5s) linear infinite;\n      }\n\n      @keyframes shimmer-strip {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  target = \"\";\n\n  @property({ attribute: false })\n  targetElement: Element | null = null;\n\n  @property({ type: Number, attribute: \"thumbnail-height\" })\n  thumbnailHeight = 24;\n\n  @property({ type: Number, attribute: \"thumbnail-spacing-px\" })\n  thumbnailSpacingPx = 48;\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs: number | null = null;\n\n  @property({ type: Boolean, attribute: \"use-intrinsic-duration\" })\n  useIntrinsicDuration = false;\n\n  @consume({ context: timelineStateContext, subscribe: true })\n  @state()\n  timelineState?: TimelineState;\n\n  @consume({ context: previewSettingsContext, subscribe: true })\n  @state()\n  previewSettings?: PreviewSettings;\n\n  @state()\n  thumbnailDimensions = { width: 0, height: 0 };\n\n  @state()\n  _isLoadingThumbnails = false;\n\n  #targetController?: TargetController;\n  #abortController: AbortController | null = null;\n  #renderRequested = false;\n  #canvasContainer: Ref<HTMLDivElement> = createRef();\n  #lastRequiredTimestamps = \"\";\n  #thumbnailCache = new Map<number, CanvasImageSource>();\n\n  // Timegroup thumbnail generation state\n  #timegroupQueue = new MutableTimestampQueue();\n  #timegroupClone: {\n    clone: EFTimegroup;\n    container: HTMLElement;\n    cleanup: () => void;\n  } | null = null;\n  #timegroupGenerator: AsyncGenerator<GeneratedThumbnail> | null = null;\n  #timegroupGeneratorAbort: AbortController | null = null;\n  #previewContainer: HTMLDivElement | null = null;\n  #updateInProgress = false; // Lock to prevent concurrent updates\n  #consumerRunning = false; // Lock to prevent concurrent consumers\n  #pendingTimestamps = new Set<number>(); // Timestamps requested while update in progress\n  #retryScheduled = false; // Flag to prevent duplicate retry schedules\n  #thumbnailPhase: number = 0; // Phase offset for thumbnail grid\n  #previousPixelsPerMs: number | null = null; // Track zoom changes\n  #targetReadyStateHandler: (() => void) | null = null;\n  #targetContentChangeHandler: (() => void) | null = null;\n  #resizeObserver: ResizeObserver | null = null;\n  #hostWidth = 0;\n\n  /**\n   * Check if target is valid (EFVideo or root EFTimegroup)\n   */\n  get isValidTarget(): boolean {\n    const el = this.targetElement;\n    if (!el) return false;\n\n    if (el instanceof EFVideo) return true;\n\n    if (el instanceof EFTimegroup) {\n      // Only root timegroups\n      return (el as any).isRootTimegroup === true;\n    }\n\n    return false;\n  }\n\n  get #timelineState(): TimelineState | undefined {\n    return this.timelineState;\n  }\n\n  get #thumbnailDimensions() {\n    return this.thumbnailDimensions;\n  }\n\n  get #effectiveDurationMs(): number {\n    const element = this.targetElement;\n    if (!element) return 0;\n    if (this.useIntrinsicDuration) {\n      return (\n        (element as any).intrinsicDurationMs ?? (element as any).durationMs ?? 0\n      );\n    }\n    return (element as any).durationMs ?? 0;\n  }\n\n  get #effectivePixelsPerMs(): number {\n    if (this.#timelineState?.pixelsPerMs != null) {\n      return this.#timelineState.pixelsPerMs;\n    }\n    if (this.pixelsPerMs != null) {\n      return this.pixelsPerMs;\n    }\n    const durationMs = this.#effectiveDurationMs;\n    if (this.#hostWidth > 0 && durationMs > 0) {\n      return this.#hostWidth / durationMs;\n    }\n    return 0.04;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Only use TargetController if target is set and targetElement is not directly set\n    if (this.target && !this.targetElement) {\n      this.#targetController = new TargetController(this);\n    }\n    this.#resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n      const width = entry.contentRect.width;\n      if (width !== this.#hostWidth) {\n        this.#hostWidth = width;\n        this.requestUpdate();\n        this.#scheduleRender();\n      }\n    });\n    this.#resizeObserver.observe(this);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#abortController?.abort();\n    this.#cleanupTimegroupGenerator();\n    this.#detachTargetListeners(this.targetElement);\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  protected willUpdate(\n    changedProperties: Map<string | number | symbol, unknown>,\n  ): void {\n    super.willUpdate(changedProperties);\n\n    // Create TargetController if target is set and targetElement is not directly set\n    if (changedProperties.has(\"target\")) {\n      if (this.target && !this.targetElement && !this.#targetController) {\n        this.#targetController = new TargetController(this);\n      }\n    }\n\n    // Recalculate thumbnail dimensions if target changed\n    if (\n      changedProperties.has(\"targetElement\") ||\n      changedProperties.has(\"thumbnailHeight\")\n    ) {\n      this.thumbnailDimensions = this.#calculateThumbnailDimensions();\n    }\n\n    // Manage event listeners when target changes\n    if (changedProperties.has(\"targetElement\")) {\n      const oldTarget = changedProperties.get(\n        \"targetElement\",\n      ) as Element | null;\n      this.#detachTargetListeners(oldTarget);\n      this.#attachTargetListeners(this.targetElement);\n    }\n  }\n\n  #attachTargetListeners(target: Element | null): void {\n    if (!target) return;\n\n    this.#targetReadyStateHandler = () => {\n      this.requestUpdate();\n      this.#scheduleRender();\n    };\n    this.#targetContentChangeHandler = () => {\n      this.requestUpdate();\n      this.#scheduleRender();\n    };\n    target.addEventListener(\"readystatechange\", this.#targetReadyStateHandler);\n    target.addEventListener(\"contentchange\", this.#targetContentChangeHandler);\n\n    // Late-subscriber: if the target already transitioned to \"ready\" before\n    // we attached, the event was missed. The contentReadyState property\n    // serves exactly this purpose — check it and render if needed.\n    if ((target as any).contentReadyState === \"ready\") {\n      this.requestUpdate();\n      this.#scheduleRender();\n    }\n  }\n\n  #detachTargetListeners(target: Element | null): void {\n    if (!target) return;\n    if (this.#targetReadyStateHandler) {\n      target.removeEventListener(\n        \"readystatechange\",\n        this.#targetReadyStateHandler,\n      );\n      this.#targetReadyStateHandler = null;\n    }\n    if (this.#targetContentChangeHandler) {\n      target.removeEventListener(\n        \"contentchange\",\n        this.#targetContentChangeHandler,\n      );\n      this.#targetContentChangeHandler = null;\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has(\"targetElement\") ||\n      changedProperties.has(\"thumbnailSpacingPx\") ||\n      changedProperties.has(\"pixelsPerMs\") ||\n      changedProperties.has(\"thumbnailHeight\") ||\n      changedProperties.has(\"timelineState\")\n    ) {\n      this.#scheduleRender();\n    }\n  }\n\n  /**\n   * Calculate thumbnail dimensions from target element's actual bounds\n   */\n  #calculateThumbnailDimensions(): { width: number; height: number } {\n    const el = this.targetElement;\n    if (!el) return { width: 0, height: 0 };\n\n    // Get actual visible bounds from DOM\n    const bounds = el.getBoundingClientRect();\n    if (bounds.width === 0 || bounds.height === 0) {\n      // Element not yet rendered or no size, use default aspect ratio\n      return {\n        width: this.thumbnailHeight * (16 / 9),\n        height: this.thumbnailHeight,\n      };\n    }\n\n    const aspectRatio = bounds.width / bounds.height;\n    const width = Math.round(this.thumbnailHeight * aspectRatio);\n\n    return { width, height: this.thumbnailHeight };\n  }\n\n  /**\n   * Calculate visible thumbnails based on viewport\n   */\n  #calculateVisibleThumbnails(): ThumbnailDescriptor[] {\n    if (!this.isValidTarget) return [];\n\n    const element = this.targetElement;\n    if (!element) return [];\n\n    const scrollLeft = this.#timelineState?.viewportScrollLeft ?? 0;\n    const viewportWidth =\n      this.#timelineState?.viewportWidth ?? (this.#hostWidth || 800);\n    const pixelsPerMs = this.#effectivePixelsPerMs;\n\n    const durationMs = this.#effectiveDurationMs;\n    if (durationMs === 0) return [];\n\n    const trackWidthPx = durationMs * pixelsPerMs;\n\n    // Get FPS for quantization\n    const fps = (element as any).fps ?? 30;\n\n    const visibleStartPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleEndPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n\n    const thumbnails: ThumbnailDescriptor[] = [];\n    const { width, height } = this.#thumbnailDimensions;\n\n    // Read minimum gap from CSS variable (--ef-thumbnail-gap, default 2px)\n    const gapPx =\n      parseFloat(\n        getComputedStyle(this).getPropertyValue(\"--ef-thumbnail-gap\"),\n      ) || 2;\n    // Stride must be at least thumbnail width + gap to prevent overlap\n    const thumbnailStride = Math.max(this.thumbnailSpacingPx, width + gapPx);\n\n    // Detect zoom by checking if pixelsPerMs changed\n    const isZoom =\n      this.#previousPixelsPerMs !== null &&\n      this.#previousPixelsPerMs !== pixelsPerMs;\n\n    if (this.#previousPixelsPerMs === null) {\n      // First render: align grid to track start (t=0)\n      this.#thumbnailPhase = 0;\n    } else if (isZoom) {\n      // On zoom: snap a thumbnail to near the left edge of viewport\n      // This prevents visual slip during zoom operations\n      this.#thumbnailPhase = scrollLeft % thumbnailStride;\n    } else if (scrollLeft < thumbnailStride) {\n      // When scrolled near the start, realign to t=0 to avoid left gap\n      this.#thumbnailPhase = 0;\n    }\n    // During normal scroll: phase unchanged, grid scrolls naturally with track\n\n    this.#previousPixelsPerMs = pixelsPerMs;\n\n    // Generate thumbnail grid anchored at phase offset\n    // Each thumbnail is at absolute track position: phase + (i * stride)\n    // This means grid is stable in track space (scrolls naturally)\n    const startIndex = Math.max(\n      0,\n      Math.floor((visibleStartPx - this.#thumbnailPhase) / thumbnailStride),\n    );\n    const endIndex = Math.ceil(\n      (visibleEndPx - this.#thumbnailPhase) / thumbnailStride,\n    );\n\n    for (let i = startIndex; i <= endIndex; i++) {\n      const thumbX = this.#thumbnailPhase + i * thumbnailStride;\n\n      // Only include if within track bounds\n      if (thumbX >= 0 && thumbX < trackWidthPx) {\n        // Convert position to time (leading edge)\n        const rawTimeMs = thumbX / pixelsPerMs;\n        const timeMs = quantizeToFrameTimeMs(rawTimeMs, fps);\n\n        if (timeMs >= 0 && timeMs < durationMs) {\n          thumbnails.push({ timeMs, x: thumbX, width, height });\n        }\n      }\n    }\n\n    return thumbnails;\n  }\n\n  /**\n   * Schedule thumbnail render on next frame\n   */\n  #scheduleRender(): void {\n    if (this.#renderRequested) return;\n    this.#renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this.#renderRequested = false;\n      this.#renderThumbnails();\n    });\n  }\n\n  /**\n   * Render thumbnails with cancellation support\n   */\n  async #renderThumbnails(): Promise<void> {\n    // Cancel previous render\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const signal = this.#abortController.signal;\n\n    const visibleThumbnails = this.#calculateVisibleThumbnails();\n    if (visibleThumbnails.length === 0) {\n      this.#clearCanvas();\n      return;\n    }\n\n    // Check if required timestamps changed\n    const requiredTimestamps = visibleThumbnails.map((t) => t.timeMs);\n    const timestampsString = requiredTimestamps.join(\", \");\n    if (timestampsString !== this.#lastRequiredTimestamps) {\n      this.#lastRequiredTimestamps = timestampsString;\n\n      // Update capture queue\n      if (this.targetElement instanceof EFVideo) {\n        this.#updateVideoCapture(requiredTimestamps, signal).catch((error) => {\n          // Ignore AbortErrors - these are expected when renders are cancelled\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            return;\n          }\n          console.error(\"Thumbnail capture error:\", error);\n        });\n      } else if (this.targetElement instanceof EFTimegroup) {\n        this.#updateTimegroupCapture(requiredTimestamps);\n      }\n    }\n\n    if (signal.aborted) return;\n\n    // Draw thumbnails - use nearest neighbor if exact timestamp not cached\n    const maxNeighborDistanceMs = 3000; // Don't use thumbnails more than 3s away\n    const results: ThumbnailResult[] = visibleThumbnails.map((t) => {\n      let canvas = this.#thumbnailCache.get(t.timeMs);\n\n      // If exact match not found, find nearest cached thumbnail\n      if (!canvas) {\n        let nearestTimeMs: number | null = null;\n        let minDistance = Infinity;\n\n        for (const cachedTimeMs of this.#thumbnailCache.keys()) {\n          const distance = Math.abs(cachedTimeMs - t.timeMs);\n          if (distance < minDistance && distance <= maxNeighborDistanceMs) {\n            minDistance = distance;\n            nearestTimeMs = cachedTimeMs;\n          }\n        }\n\n        if (nearestTimeMs !== null) {\n          canvas = this.#thumbnailCache.get(nearestTimeMs);\n        }\n      }\n\n      return { canvas: canvas ?? null };\n    });\n    this.#drawThumbnails(visibleThumbnails, results);\n\n    const hasEmptySlots = results.some((r) => r.canvas === null);\n    if (this._isLoadingThumbnails !== hasEmptySlots) {\n      this._isLoadingThumbnails = hasEmptySlots;\n    }\n  }\n\n  /**\n   * Update video thumbnail capture\n   */\n  async #updateVideoCapture(\n    timestamps: number[],\n    signal: AbortSignal,\n  ): Promise<void> {\n    const video = this.targetElement as EFVideo;\n    if (!video) return;\n\n    // Filter out cached timestamps\n    const uncached = timestamps.filter((t) => !this.#thumbnailCache.has(t));\n    if (uncached.length === 0) return;\n\n    const mediaEngineTask = video.mediaEngineTask;\n    if (!mediaEngineTask) return;\n\n    const mediaEngine = await mediaEngineTask.taskComplete;\n    if (!mediaEngine) return;\n\n    const sourceTimestamps = uncached.map((t) => this.#getSourceTimeMs(t));\n\n    const extractor = new ThumbnailExtractor(mediaEngine);\n    const videoTrack = mediaEngine.tracks.video ?? mediaEngine.tracks.scrub;\n    if (!videoTrack) return;\n\n    const results = await extractor.extractThumbnails(\n      sourceTimestamps,\n      videoTrack,\n      video.durationMs ?? 0,\n      signal,\n    );\n\n    // Store in cache and trigger redraw\n    for (let i = 0; i < uncached.length; i++) {\n      const thumbnail = results[i]?.thumbnail;\n      const timestamp = uncached[i];\n      if (thumbnail && timestamp !== undefined) {\n        this.#thumbnailCache.set(timestamp, thumbnail);\n      }\n    }\n\n    this.#scheduleRender();\n  }\n\n  /**\n   * Update timegroup thumbnail capture using mutable queue\n   */\n  async #updateTimegroupCapture(timestamps: number[]): Promise<void> {\n    const timegroup = this.targetElement as EFTimegroup;\n    if (!timegroup) return;\n\n    // Filter out cached timestamps\n    const uncached = timestamps\n      .filter((t) => !this.#thumbnailCache.has(t))\n      .sort((a, b) => a - b);\n    if (uncached.length === 0) {\n      return;\n    }\n\n    // CRITICAL: If update already in progress, REPLACE pending (not add)\n    // We only want the LATEST required timestamps, not a union of all previous ones\n    if (this.#updateInProgress) {\n      // Clear old pending and replace with latest\n      this.#pendingTimestamps.clear();\n      uncached.forEach((t) => this.#pendingTimestamps.add(t));\n\n      // Schedule a retry (debounced via RAF)\n      if (!this.#retryScheduled) {\n        this.#retryScheduled = true;\n        requestAnimationFrame(() => {\n          this.#retryScheduled = false;\n          if (this.#pendingTimestamps.size > 0) {\n            const pending = Array.from(this.#pendingTimestamps);\n            this.#pendingTimestamps.clear();\n            this.#updateTimegroupCapture(pending);\n          }\n        });\n      }\n      return;\n    }\n    this.#updateInProgress = true;\n\n    try {\n      if (this.#timegroupGenerator) {\n        // Generator is running - abort and reset queue to exactly what we need now\n        // Abort in-flight capture\n        this.#timegroupGeneratorAbort?.abort();\n\n        // Create new abort controller for the updated queue\n        this.#timegroupGeneratorAbort = new AbortController();\n\n        // Reset queue to exactly what we need now\n        this.#timegroupQueue.reset(uncached);\n      } else if (this.#timegroupClone) {\n        // Generator finished, restart with existing clone\n        this.#timegroupQueue.reset(uncached);\n\n        // Create new abort controller\n        this.#timegroupGeneratorAbort = new AbortController();\n\n        this.#timegroupGenerator = generateThumbnailsFromClone(\n          this.#timegroupClone.clone,\n          this.#previewContainer!,\n          this.#timegroupQueue,\n          {\n            scale: 0.25,\n            contentReadyMode: \"blocking\",\n            blockingTimeoutMs: 1000,\n            signal: this.#timegroupGeneratorAbort.signal,\n          },\n        );\n        await this.#consumeTimegroupGenerator();\n      } else {\n        // No generator or clone, start fresh\n        await this.#startTimegroupGenerator(timegroup, uncached);\n      }\n    } finally {\n      this.#updateInProgress = false;\n\n      // Check if there are pending timestamps that need processing\n      // This happens when updates were skipped while this update was in progress\n      if (this.#pendingTimestamps.size > 0 && !this.#retryScheduled) {\n        this.#retryScheduled = true;\n        requestAnimationFrame(() => {\n          this.#retryScheduled = false;\n          if (this.#pendingTimestamps.size > 0) {\n            const pending = Array.from(this.#pendingTimestamps);\n            this.#pendingTimestamps.clear();\n            this.#updateTimegroupCapture(pending);\n          }\n        });\n      }\n    }\n  }\n\n  /**\n   * Start timegroup thumbnail generator\n   */\n  async #startTimegroupGenerator(\n    timegroup: EFTimegroup,\n    timestamps: number[],\n  ): Promise<void> {\n    // Create render clone\n    this.#timegroupClone = await timegroup.createRenderClone();\n\n    // Use the original container from createRenderClone (already configured)\n    this.#previewContainer = this.#timegroupClone.container as HTMLDivElement;\n\n    // CRITICAL: Wait for Lit to process shadow DOM updates after moving to new container\n    await this.#timegroupClone.clone.updateComplete;\n\n    // Also wait for all nested Lit elements to update\n    const litElements = this.#previewContainer.querySelectorAll(\"*\");\n    const updatePromises: Promise<any>[] = [];\n    for (const el of litElements) {\n      if (\"updateComplete\" in el) {\n        updatePromises.push((el as any).updateComplete);\n      }\n    }\n    await Promise.all(updatePromises);\n\n    // Wait AGAIN specifically for text segments (they may need to re-render after move)\n    const textSegments =\n      this.#previewContainer.querySelectorAll(\"ef-text-segment\");\n    const textUpdatePromises: Promise<any>[] = [];\n    for (const seg of textSegments) {\n      if (\"updateComplete\" in seg) {\n        textUpdatePromises.push((seg as any).updateComplete);\n      }\n    }\n    await Promise.all(textUpdatePromises);\n\n    // CRITICAL: Wait for ef-text to split text into segments\n    // EFText.connectedCallback schedules splitText in requestAnimationFrame\n    // We must wait for that RAF to fire before capturing\n    await new Promise((resolve) => requestAnimationFrame(resolve));\n\n    // WARMUP: Do a seek to the first timestamp to \"prime\" the clone\n    // Guard: clone may have been disposed during prior awaits\n    if (!this.#timegroupClone) return;\n    if (timestamps.length > 0) {\n      await this.#timegroupClone.clone.seekForRender(timestamps[0]!);\n    }\n\n    // CRITICAL: Wait for fonts to load\n    // Text won't render correctly if fonts aren't ready\n    await document.fonts.ready;\n\n    // CRITICAL: Wait for all images to load\n    const images = this.#previewContainer.querySelectorAll(\"img\");\n    const imagePromises: Promise<void>[] = [];\n    for (const img of images) {\n      if (!img.complete) {\n        imagePromises.push(\n          new Promise((resolve, _reject) => {\n            img.onload = () => resolve();\n            img.onerror = () => resolve(); // Don't block on errors\n            // Timeout after 5s\n            setTimeout(() => resolve(), 5000);\n          }),\n        );\n      }\n    }\n    await Promise.all(imagePromises);\n\n    // Guard: clone may have been disposed during prior awaits\n    if (!this.#timegroupClone) return;\n\n    // Initialize queue\n    this.#timegroupQueue.reset(timestamps);\n\n    // Create abort controller for this generator\n    this.#timegroupGeneratorAbort = new AbortController();\n\n    // Start generator using the fresh container\n    this.#timegroupGenerator = generateThumbnailsFromClone(\n      this.#timegroupClone.clone,\n      this.#previewContainer,\n      this.#timegroupQueue,\n      {\n        scale: 0.25,\n        contentReadyMode: \"blocking\",\n        blockingTimeoutMs: 1000,\n        signal: this.#timegroupGeneratorAbort.signal,\n      },\n    );\n\n    // Consume generator (CRITICAL: Must await to prevent concurrent consumers)\n    await this.#consumeTimegroupGenerator();\n  }\n\n  /**\n   * Consume generator and handle cleanup\n   */\n  async #consumeTimegroupGenerator(): Promise<void> {\n    // CRITICAL: Prevent concurrent consumers\n    if (this.#consumerRunning) {\n      return;\n    }\n    this.#consumerRunning = true;\n\n    if (!this.#timegroupGenerator) {\n      this.#consumerRunning = false;\n      return;\n    }\n\n    try {\n      for await (const { timeMs, canvas } of this.#timegroupGenerator) {\n        this.#thumbnailCache.set(timeMs, canvas);\n        this.#scheduleRender();\n      }\n    } catch (err) {\n      console.warn(\"Timegroup thumbnail generation error:\", err);\n    } finally {\n      // Generator finished, but keep clone alive for reuse\n      this.#timegroupGenerator = null;\n      this.#consumerRunning = false;\n    }\n  }\n\n  /**\n   * Cleanup timegroup generator and clone\n   */\n  #cleanupTimegroupGenerator(): void {\n    // Abort any in-flight work\n    this.#timegroupGeneratorAbort?.abort();\n    this.#timegroupGeneratorAbort = null;\n\n    this.#timegroupGenerator = null;\n\n    // Remove preview container from DOM\n    if (this.#previewContainer) {\n      this.#previewContainer.remove();\n      this.#previewContainer = null;\n    }\n\n    // Cleanup render clone\n    if (this.#timegroupClone) {\n      this.#timegroupClone.cleanup();\n      this.#timegroupClone = null;\n    }\n  }\n\n  /**\n   * Clear all canvas elements\n   */\n  #clearCanvas(): void {\n    const container = this.#canvasContainer.value;\n    if (container) {\n      container.innerHTML = \"\";\n    }\n  }\n\n  /**\n   * Translate composition time to source time for videos (handles trim)\n   */\n  #getSourceTimeMs(compositionTimeMs: number): number {\n    if (this.useIntrinsicDuration) {\n      return compositionTimeMs;\n    }\n    const el = this.targetElement;\n    if (el instanceof EFVideo) {\n      return compositionTimeMs + (el.sourceStartMs ?? 0);\n    }\n    return compositionTimeMs;\n  }\n\n  /**\n   * Draw thumbnails to canvas elements\n   */\n  #drawThumbnails(\n    thumbnails: ThumbnailDescriptor[],\n    results: ThumbnailResult[],\n  ): void {\n    const container = this.#canvasContainer.value;\n    if (!container) return;\n\n    // Clear existing canvases\n    container.innerHTML = \"\";\n\n    for (let i = 0; i < thumbnails.length; i++) {\n      const thumbnail = thumbnails[i];\n      const result = results[i];\n\n      if (!thumbnail) continue;\n\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = thumbnail.width;\n      canvas.height = thumbnail.height;\n      canvas.style.left = `${thumbnail.x}px`;\n      canvas.style.top = \"0\";\n      canvas.style.width = `${thumbnail.width}px`;\n      canvas.style.height = `${thumbnail.height}px`;\n\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) continue;\n\n      if (result?.canvas) {\n        // Draw actual thumbnail\n        ctx.drawImage(result.canvas, 0, 0, thumbnail.width, thumbnail.height);\n\n        // Draw timestamp overlay if enabled\n        if (this.previewSettings?.showThumbnailTimestamps) {\n          ctx.fillStyle = \"rgba(0, 0, 0, 0.8)\";\n          ctx.fillRect(2, 2, 95, 16);\n          ctx.fillStyle = \"yellow\";\n          ctx.font = \"11px monospace\";\n          ctx.textAlign = \"left\";\n          ctx.textBaseline = \"top\";\n          ctx.fillText(`${Math.round(thumbnail.timeMs)}ms`, 5, 4);\n        }\n      } else {\n        // Draw placeholder with timestamp text\n        const bgColor =\n          getComputedStyle(this)\n            .getPropertyValue(\"--ef-color-bg-inset\")\n            .trim() || \"rgba(100, 100, 100, 0.3)\";\n        ctx.fillStyle = bgColor;\n        ctx.fillRect(0, 0, thumbnail.width, thumbnail.height);\n\n        const borderColor =\n          getComputedStyle(this)\n            .getPropertyValue(\"--ef-color-border-subtle\")\n            .trim() || \"rgba(150, 150, 150, 0.5)\";\n        ctx.strokeStyle = borderColor;\n        ctx.lineWidth = 1;\n        ctx.strokeRect(0, 0, thumbnail.width, thumbnail.height);\n\n        ctx.fillStyle = \"white\";\n        ctx.font = \"10px monospace\";\n        ctx.textAlign = \"center\";\n        ctx.textBaseline = \"middle\";\n        ctx.fillText(\n          `${Math.round(thumbnail.timeMs)}ms`,\n          thumbnail.width / 2,\n          thumbnail.height / 2,\n        );\n      }\n\n      container.appendChild(canvas);\n    }\n  }\n\n  render() {\n    // Error: No target specified (neither target string nor targetElement)\n    if (!this.target && !this.targetElement) {\n      return html`<div class=\"error-message\">No target specified</div>`;\n    }\n\n    // Error: Target element not found (when using target string)\n    if (this.target && !this.targetElement) {\n      return html`<div class=\"error-message\">\n        Target element \"${this.target}\" not found\n      </div>`;\n    }\n\n    // Error: Invalid target type\n    if (!this.isValidTarget) {\n      const elementType =\n        (this.targetElement as any).tagName?.toLowerCase() || \"unknown\";\n      return html`<div class=\"error-message\">\n        Invalid target: \"${elementType}\" must be ef-video or root ef-timegroup\n      </div>`;\n    }\n\n    // Calculate track width to clip thumbnails at track end\n    const durationMs = this.#effectiveDurationMs;\n    const pixelsPerMs = this.#effectivePixelsPerMs;\n    const trackWidthPx = durationMs * pixelsPerMs;\n\n    // Render canvas container with explicit width clipping, plus shimmer overlay\n    return html`\n      <div\n        class=\"thumbnail-container\"\n        style=\"max-width: ${trackWidthPx}px;\"\n        ${ref(this.#canvasContainer)}\n      ></div>\n      <div\n        class=\"shimmer-overlay ${this._isLoadingThumbnails ? \"active\" : \"\"}\"\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-thumbnail-strip\": EFThumbnailStrip;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFThumbnailStrip.js","names":["#timestamps","EFThumbnailStrip","#timelineState","#thumbnailDimensions","#effectiveDurationMs","#effectivePixelsPerMs","#hostWidth","#targetController","#resizeObserver","#scheduleRender","#abortController","#cleanupTimegroupGenerator","#detachTargetListeners","#calculateThumbnailDimensions","#attachTargetListeners","#targetReadyStateHandler","#targetContentChangeHandler","thumbnails: ThumbnailDescriptor[]","#previousPixelsPerMs","#thumbnailPhase","#renderRequested","#renderThumbnails","#calculateVisibleThumbnails","#clearCanvas","#lastRequiredTimestamps","#updateVideoCapture","#updateTimegroupCapture","results: ThumbnailResult[]","#thumbnailCache","nearestTimeMs: number | null","#drawThumbnails","#getSourceTimeMs","#updateInProgress","#pendingTimestamps","#retryScheduled","#timegroupGenerator","#timegroupGeneratorAbort","#timegroupQueue","#timegroupClone","#previewContainer","#consumeTimegroupGenerator","#startTimegroupGenerator","updatePromises: Promise<any>[]","textUpdatePromises: Promise<any>[]","imagePromises: Promise<void>[]","#consumerRunning","#canvasContainer"],"sources":["../../../../src/gui/timeline/tracks/EFThumbnailStrip.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref, type Ref } from \"lit/directives/ref.js\";\n\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { TargetController } from \"../../../elements/TargetController.js\";\nimport { ThumbnailExtractor } from \"../../../elements/EFMedia/shared/ThumbnailExtractor.js\";\nimport {\n  generateThumbnailsFromClone,\n  type GeneratedThumbnail,\n  type ThumbnailQueue,\n} from \"../../../preview/renderTimegroupToCanvas.js\";\n\nimport { quantizeToFrameTimeMs } from \"../../../utils/frameTime.js\";\nimport { TWMixin } from \"../../TWMixin.js\";\nimport { timelineStateContext, type TimelineState } from \"../timelineStateContext.js\";\nimport { previewSettingsContext, type PreviewSettings } from \"../../previewSettingsContext.js\";\n\n/** Padding for virtual rendering */\nconst VIRTUAL_RENDER_PADDING_PX = 100;\n\n/**\n * Mutable queue for timestamp generation.\n * Allows updating timestamps while generator is consuming them.\n */\nclass MutableTimestampQueue implements ThumbnailQueue {\n  #timestamps: number[] = [];\n\n  /** Replace entire queue with new timestamps (sorted) */\n  reset(timestamps: number[]): void {\n    this.#timestamps = [...timestamps].sort((a, b) => a - b);\n  }\n\n  /** Keep only these specific timestamps (maintains order) */\n  retainOnly(timestamps: number[]): void {\n    const keep = new Set(timestamps);\n    this.#timestamps = this.#timestamps.filter((t) => keep.has(t));\n  }\n\n  /** Append timestamps to end (sorted) */\n  append(timestamps: number[]): void {\n    this.#timestamps.push(...[...timestamps].sort((a, b) => a - b));\n  }\n\n  /** Get next timestamp (removes from front) */\n  shift(): number | undefined {\n    return this.#timestamps.shift();\n  }\n\n  /** Get remaining timestamps without modifying queue */\n  remaining(): number[] {\n    return [...this.#timestamps];\n  }\n\n  /** Check if queue is empty */\n  isEmpty(): boolean {\n    return this.#timestamps.length === 0;\n  }\n}\n\n/**\n * Descriptor for a thumbnail to render\n */\ninterface ThumbnailDescriptor {\n  timeMs: number;\n  x: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Result of thumbnail rendering (canvas or error)\n */\ninterface ThumbnailResult {\n  canvas: CanvasImageSource | null;\n  error?: Error;\n}\n\n/**\n * Thumbnail strip component that renders thumbnails for video or timegroup elements.\n *\n * Features:\n * - Targets ef-video or root ef-timegroup via target attribute\n * - Batch video thumbnail extraction via ThumbnailExtractor\n * - Canvas rendering for timegroups at low resolution\n * - Viewport-based lazy loading with scroll calculation\n * - Fixed visual spacing (consistent at all zoom levels)\n * - Error indicators for failed thumbnails\n */\n@customElement(\"ef-thumbnail-strip\")\nexport class EFThumbnailStrip extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      .thumbnail-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      .error-message {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        padding: 8px;\n        color: var(--ef-color-error);\n        font-size: 12px;\n        background: color-mix(in srgb, var(--ef-color-error) 10%, transparent);\n      }\n\n      canvas {\n        position: absolute;\n        image-rendering: pixelated;\n        image-rendering: crisp-edges;\n      }\n\n      .shimmer-overlay {\n        display: none;\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(\n          90deg,\n          color-mix(in srgb, var(--ef-color-text, #fafafa) 12%, transparent) 0%,\n          color-mix(in srgb, var(--ef-color-text, #fafafa) 28%, transparent) 50%,\n          color-mix(in srgb, var(--ef-color-text, #fafafa) 12%, transparent) 100%\n        );\n        background-size: 200% 100%;\n        pointer-events: none;\n      }\n\n      .shimmer-overlay.active {\n        display: block;\n        animation: shimmer-strip var(--ef-loading-shimmer-duration, 1.5s) linear infinite;\n      }\n\n      @keyframes shimmer-strip {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  target = \"\";\n\n  @property({ attribute: false })\n  targetElement: Element | null = null;\n\n  @property({ type: Number, attribute: \"thumbnail-height\" })\n  thumbnailHeight = 24;\n\n  @property({ type: Number, attribute: \"thumbnail-spacing-px\" })\n  thumbnailSpacingPx = 48;\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs: number | null = null;\n\n  @property({ type: Boolean, attribute: \"use-intrinsic-duration\" })\n  useIntrinsicDuration = false;\n\n  @consume({ context: timelineStateContext, subscribe: true })\n  @state()\n  timelineState?: TimelineState;\n\n  @consume({ context: previewSettingsContext, subscribe: true })\n  @state()\n  previewSettings?: PreviewSettings;\n\n  @state()\n  thumbnailDimensions = { width: 0, height: 0 };\n\n  @state()\n  _isLoadingThumbnails = false;\n\n  #targetController?: TargetController;\n  #abortController: AbortController | null = null;\n  #renderRequested = false;\n  #canvasContainer: Ref<HTMLDivElement> = createRef();\n  #lastRequiredTimestamps = \"\";\n  #thumbnailCache = new Map<number, CanvasImageSource>();\n\n  // Timegroup thumbnail generation state\n  #timegroupQueue = new MutableTimestampQueue();\n  #timegroupClone: {\n    clone: EFTimegroup;\n    container: HTMLElement;\n    cleanup: () => void;\n  } | null = null;\n  #timegroupGenerator: AsyncGenerator<GeneratedThumbnail> | null = null;\n  #timegroupGeneratorAbort: AbortController | null = null;\n  #previewContainer: HTMLDivElement | null = null;\n  #updateInProgress = false; // Lock to prevent concurrent updates\n  #consumerRunning = false; // Lock to prevent concurrent consumers\n  #pendingTimestamps = new Set<number>(); // Timestamps requested while update in progress\n  #retryScheduled = false; // Flag to prevent duplicate retry schedules\n  #thumbnailPhase: number = 0; // Phase offset for thumbnail grid\n  #previousPixelsPerMs: number | null = null; // Track zoom changes\n  #targetReadyStateHandler: (() => void) | null = null;\n  #targetContentChangeHandler: (() => void) | null = null;\n  #resizeObserver: ResizeObserver | null = null;\n  #hostWidth = 0;\n\n  /**\n   * Check if target is valid (EFVideo or root EFTimegroup)\n   */\n  get isValidTarget(): boolean {\n    const el = this.targetElement;\n    if (!el) return false;\n\n    if (el instanceof EFVideo) return true;\n\n    if (el instanceof EFTimegroup) {\n      // Only root timegroups\n      return (el as any).isRootTimegroup === true;\n    }\n\n    return false;\n  }\n\n  get #timelineState(): TimelineState | undefined {\n    return this.timelineState;\n  }\n\n  get #thumbnailDimensions() {\n    return this.thumbnailDimensions;\n  }\n\n  get #effectiveDurationMs(): number {\n    const element = this.targetElement;\n    if (!element) return 0;\n    if (this.useIntrinsicDuration) {\n      return (element as any).intrinsicDurationMs ?? (element as any).durationMs ?? 0;\n    }\n    return (element as any).durationMs ?? 0;\n  }\n\n  get #effectivePixelsPerMs(): number {\n    if (this.#timelineState?.pixelsPerMs != null) {\n      return this.#timelineState.pixelsPerMs;\n    }\n    if (this.pixelsPerMs != null) {\n      return this.pixelsPerMs;\n    }\n    const durationMs = this.#effectiveDurationMs;\n    if (this.#hostWidth > 0 && durationMs > 0) {\n      return this.#hostWidth / durationMs;\n    }\n    return 0.04;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Only use TargetController if target is set and targetElement is not directly set\n    if (this.target && !this.targetElement) {\n      this.#targetController = new TargetController(this);\n    }\n    this.#resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n      const width = entry.contentRect.width;\n      if (width !== this.#hostWidth) {\n        this.#hostWidth = width;\n        this.requestUpdate();\n        this.#scheduleRender();\n      }\n    });\n    this.#resizeObserver.observe(this);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#abortController?.abort();\n    this.#cleanupTimegroupGenerator();\n    this.#detachTargetListeners(this.targetElement);\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  protected willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.willUpdate(changedProperties);\n\n    // Create TargetController if target is set and targetElement is not directly set\n    if (changedProperties.has(\"target\")) {\n      if (this.target && !this.targetElement && !this.#targetController) {\n        this.#targetController = new TargetController(this);\n      }\n    }\n\n    // Recalculate thumbnail dimensions if target changed\n    if (changedProperties.has(\"targetElement\") || changedProperties.has(\"thumbnailHeight\")) {\n      this.thumbnailDimensions = this.#calculateThumbnailDimensions();\n    }\n\n    // Manage event listeners when target changes\n    if (changedProperties.has(\"targetElement\")) {\n      const oldTarget = changedProperties.get(\"targetElement\") as Element | null;\n      this.#detachTargetListeners(oldTarget);\n      this.#attachTargetListeners(this.targetElement);\n    }\n  }\n\n  #attachTargetListeners(target: Element | null): void {\n    if (!target) return;\n\n    this.#targetReadyStateHandler = () => {\n      this.requestUpdate();\n      this.#scheduleRender();\n    };\n    this.#targetContentChangeHandler = () => {\n      this.requestUpdate();\n      this.#scheduleRender();\n    };\n    target.addEventListener(\"readystatechange\", this.#targetReadyStateHandler);\n    target.addEventListener(\"contentchange\", this.#targetContentChangeHandler);\n\n    // Late-subscriber: if the target already transitioned to \"ready\" before\n    // we attached, the event was missed. The contentReadyState property\n    // serves exactly this purpose — check it and render if needed.\n    if ((target as any).contentReadyState === \"ready\") {\n      this.requestUpdate();\n      this.#scheduleRender();\n    }\n  }\n\n  #detachTargetListeners(target: Element | null): void {\n    if (!target) return;\n    if (this.#targetReadyStateHandler) {\n      target.removeEventListener(\"readystatechange\", this.#targetReadyStateHandler);\n      this.#targetReadyStateHandler = null;\n    }\n    if (this.#targetContentChangeHandler) {\n      target.removeEventListener(\"contentchange\", this.#targetContentChangeHandler);\n      this.#targetContentChangeHandler = null;\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has(\"targetElement\") ||\n      changedProperties.has(\"thumbnailSpacingPx\") ||\n      changedProperties.has(\"pixelsPerMs\") ||\n      changedProperties.has(\"thumbnailHeight\") ||\n      changedProperties.has(\"timelineState\")\n    ) {\n      this.#scheduleRender();\n    }\n  }\n\n  /**\n   * Calculate thumbnail dimensions from target element's actual bounds\n   */\n  #calculateThumbnailDimensions(): { width: number; height: number } {\n    const el = this.targetElement;\n    if (!el) return { width: 0, height: 0 };\n\n    // Get actual visible bounds from DOM\n    const bounds = el.getBoundingClientRect();\n    if (bounds.width === 0 || bounds.height === 0) {\n      // Element not yet rendered or no size, use default aspect ratio\n      return {\n        width: this.thumbnailHeight * (16 / 9),\n        height: this.thumbnailHeight,\n      };\n    }\n\n    const aspectRatio = bounds.width / bounds.height;\n    const width = Math.round(this.thumbnailHeight * aspectRatio);\n\n    return { width, height: this.thumbnailHeight };\n  }\n\n  /**\n   * Calculate visible thumbnails based on viewport\n   */\n  #calculateVisibleThumbnails(): ThumbnailDescriptor[] {\n    if (!this.isValidTarget) return [];\n\n    const element = this.targetElement;\n    if (!element) return [];\n\n    const scrollLeft = this.#timelineState?.viewportScrollLeft ?? 0;\n    const viewportWidth = this.#timelineState?.viewportWidth ?? (this.#hostWidth || 800);\n    const pixelsPerMs = this.#effectivePixelsPerMs;\n\n    const durationMs = this.#effectiveDurationMs;\n    if (durationMs === 0) return [];\n\n    const trackWidthPx = durationMs * pixelsPerMs;\n\n    // Get FPS for quantization\n    const fps = (element as any).fps ?? 30;\n\n    const visibleStartPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleEndPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n\n    const thumbnails: ThumbnailDescriptor[] = [];\n    const { width, height } = this.#thumbnailDimensions;\n\n    // Read minimum gap from CSS variable (--ef-thumbnail-gap, default 2px)\n    const gapPx = parseFloat(getComputedStyle(this).getPropertyValue(\"--ef-thumbnail-gap\")) || 2;\n    // Stride must be at least thumbnail width + gap to prevent overlap\n    const thumbnailStride = Math.max(this.thumbnailSpacingPx, width + gapPx);\n\n    // Detect zoom by checking if pixelsPerMs changed\n    const isZoom = this.#previousPixelsPerMs !== null && this.#previousPixelsPerMs !== pixelsPerMs;\n\n    if (this.#previousPixelsPerMs === null) {\n      // First render: align grid to track start (t=0)\n      this.#thumbnailPhase = 0;\n    } else if (isZoom) {\n      // On zoom: snap a thumbnail to near the left edge of viewport\n      // This prevents visual slip during zoom operations\n      this.#thumbnailPhase = scrollLeft % thumbnailStride;\n    } else if (scrollLeft < thumbnailStride) {\n      // When scrolled near the start, realign to t=0 to avoid left gap\n      this.#thumbnailPhase = 0;\n    }\n    // During normal scroll: phase unchanged, grid scrolls naturally with track\n\n    this.#previousPixelsPerMs = pixelsPerMs;\n\n    // Generate thumbnail grid anchored at phase offset\n    // Each thumbnail is at absolute track position: phase + (i * stride)\n    // This means grid is stable in track space (scrolls naturally)\n    const startIndex = Math.max(\n      0,\n      Math.floor((visibleStartPx - this.#thumbnailPhase) / thumbnailStride),\n    );\n    const endIndex = Math.ceil((visibleEndPx - this.#thumbnailPhase) / thumbnailStride);\n\n    for (let i = startIndex; i <= endIndex; i++) {\n      const thumbX = this.#thumbnailPhase + i * thumbnailStride;\n\n      // Only include if within track bounds\n      if (thumbX >= 0 && thumbX < trackWidthPx) {\n        // Convert position to time (leading edge)\n        const rawTimeMs = thumbX / pixelsPerMs;\n        const timeMs = quantizeToFrameTimeMs(rawTimeMs, fps);\n\n        if (timeMs >= 0 && timeMs < durationMs) {\n          thumbnails.push({ timeMs, x: thumbX, width, height });\n        }\n      }\n    }\n\n    return thumbnails;\n  }\n\n  /**\n   * Schedule thumbnail render on next frame\n   */\n  #scheduleRender(): void {\n    if (this.#renderRequested) return;\n    this.#renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this.#renderRequested = false;\n      this.#renderThumbnails();\n    });\n  }\n\n  /**\n   * Render thumbnails with cancellation support\n   */\n  async #renderThumbnails(): Promise<void> {\n    // Cancel previous render\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const signal = this.#abortController.signal;\n\n    const visibleThumbnails = this.#calculateVisibleThumbnails();\n    if (visibleThumbnails.length === 0) {\n      this.#clearCanvas();\n      return;\n    }\n\n    // Check if required timestamps changed\n    const requiredTimestamps = visibleThumbnails.map((t) => t.timeMs);\n    const timestampsString = requiredTimestamps.join(\", \");\n    if (timestampsString !== this.#lastRequiredTimestamps) {\n      this.#lastRequiredTimestamps = timestampsString;\n\n      // Update capture queue\n      if (this.targetElement instanceof EFVideo) {\n        this.#updateVideoCapture(requiredTimestamps, signal).catch((error) => {\n          // Ignore AbortErrors - these are expected when renders are cancelled\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            return;\n          }\n          console.error(\"Thumbnail capture error:\", error);\n        });\n      } else if (this.targetElement instanceof EFTimegroup) {\n        this.#updateTimegroupCapture(requiredTimestamps);\n      }\n    }\n\n    if (signal.aborted) return;\n\n    // Draw thumbnails - use nearest neighbor if exact timestamp not cached\n    const maxNeighborDistanceMs = 3000; // Don't use thumbnails more than 3s away\n    const results: ThumbnailResult[] = visibleThumbnails.map((t) => {\n      let canvas = this.#thumbnailCache.get(t.timeMs);\n\n      // If exact match not found, find nearest cached thumbnail\n      if (!canvas) {\n        let nearestTimeMs: number | null = null;\n        let minDistance = Infinity;\n\n        for (const cachedTimeMs of this.#thumbnailCache.keys()) {\n          const distance = Math.abs(cachedTimeMs - t.timeMs);\n          if (distance < minDistance && distance <= maxNeighborDistanceMs) {\n            minDistance = distance;\n            nearestTimeMs = cachedTimeMs;\n          }\n        }\n\n        if (nearestTimeMs !== null) {\n          canvas = this.#thumbnailCache.get(nearestTimeMs);\n        }\n      }\n\n      return { canvas: canvas ?? null };\n    });\n    this.#drawThumbnails(visibleThumbnails, results);\n\n    const hasEmptySlots = results.some((r) => r.canvas === null);\n    if (this._isLoadingThumbnails !== hasEmptySlots) {\n      this._isLoadingThumbnails = hasEmptySlots;\n    }\n  }\n\n  /**\n   * Update video thumbnail capture\n   */\n  async #updateVideoCapture(timestamps: number[], signal: AbortSignal): Promise<void> {\n    const video = this.targetElement as EFVideo;\n    if (!video) return;\n\n    // Filter out cached timestamps\n    const uncached = timestamps.filter((t) => !this.#thumbnailCache.has(t));\n    if (uncached.length === 0) return;\n\n    const mediaEngineTask = video.mediaEngineTask;\n    if (!mediaEngineTask) return;\n\n    const mediaEngine = await mediaEngineTask.taskComplete;\n    if (!mediaEngine) return;\n\n    const sourceTimestamps = uncached.map((t) => this.#getSourceTimeMs(t));\n\n    const extractor = new ThumbnailExtractor(mediaEngine);\n    const videoTrack = mediaEngine.tracks.video ?? mediaEngine.tracks.scrub;\n    if (!videoTrack) return;\n\n    const results = await extractor.extractThumbnails(\n      sourceTimestamps,\n      videoTrack,\n      video.durationMs ?? 0,\n      signal,\n    );\n\n    // Store in cache and trigger redraw\n    for (let i = 0; i < uncached.length; i++) {\n      const thumbnail = results[i]?.thumbnail;\n      const timestamp = uncached[i];\n      if (thumbnail && timestamp !== undefined) {\n        this.#thumbnailCache.set(timestamp, thumbnail);\n      }\n    }\n\n    this.#scheduleRender();\n  }\n\n  /**\n   * Update timegroup thumbnail capture using mutable queue\n   */\n  async #updateTimegroupCapture(timestamps: number[]): Promise<void> {\n    const timegroup = this.targetElement as EFTimegroup;\n    if (!timegroup) return;\n\n    // Filter out cached timestamps\n    const uncached = timestamps.filter((t) => !this.#thumbnailCache.has(t)).sort((a, b) => a - b);\n    if (uncached.length === 0) {\n      return;\n    }\n\n    // CRITICAL: If update already in progress, REPLACE pending (not add)\n    // We only want the LATEST required timestamps, not a union of all previous ones\n    if (this.#updateInProgress) {\n      // Clear old pending and replace with latest\n      this.#pendingTimestamps.clear();\n      uncached.forEach((t) => this.#pendingTimestamps.add(t));\n\n      // Schedule a retry (debounced via RAF)\n      if (!this.#retryScheduled) {\n        this.#retryScheduled = true;\n        requestAnimationFrame(() => {\n          this.#retryScheduled = false;\n          if (this.#pendingTimestamps.size > 0) {\n            const pending = Array.from(this.#pendingTimestamps);\n            this.#pendingTimestamps.clear();\n            this.#updateTimegroupCapture(pending);\n          }\n        });\n      }\n      return;\n    }\n    this.#updateInProgress = true;\n\n    try {\n      if (this.#timegroupGenerator) {\n        // Generator is running - abort and reset queue to exactly what we need now\n        // Abort in-flight capture\n        this.#timegroupGeneratorAbort?.abort();\n\n        // Create new abort controller for the updated queue\n        this.#timegroupGeneratorAbort = new AbortController();\n\n        // Reset queue to exactly what we need now\n        this.#timegroupQueue.reset(uncached);\n      } else if (this.#timegroupClone) {\n        // Generator finished, restart with existing clone\n        this.#timegroupQueue.reset(uncached);\n\n        // Create new abort controller\n        this.#timegroupGeneratorAbort = new AbortController();\n\n        this.#timegroupGenerator = generateThumbnailsFromClone(\n          this.#timegroupClone.clone,\n          this.#previewContainer!,\n          this.#timegroupQueue,\n          {\n            scale: 0.25,\n            contentReadyMode: \"blocking\",\n            blockingTimeoutMs: 1000,\n            signal: this.#timegroupGeneratorAbort.signal,\n          },\n        );\n        await this.#consumeTimegroupGenerator();\n      } else {\n        // No generator or clone, start fresh\n        await this.#startTimegroupGenerator(timegroup, uncached);\n      }\n    } finally {\n      this.#updateInProgress = false;\n\n      // Check if there are pending timestamps that need processing\n      // This happens when updates were skipped while this update was in progress\n      if (this.#pendingTimestamps.size > 0 && !this.#retryScheduled) {\n        this.#retryScheduled = true;\n        requestAnimationFrame(() => {\n          this.#retryScheduled = false;\n          if (this.#pendingTimestamps.size > 0) {\n            const pending = Array.from(this.#pendingTimestamps);\n            this.#pendingTimestamps.clear();\n            this.#updateTimegroupCapture(pending);\n          }\n        });\n      }\n    }\n  }\n\n  /**\n   * Start timegroup thumbnail generator\n   */\n  async #startTimegroupGenerator(timegroup: EFTimegroup, timestamps: number[]): Promise<void> {\n    // Create render clone\n    this.#timegroupClone = await timegroup.createRenderClone();\n\n    // Use the original container from createRenderClone (already configured)\n    this.#previewContainer = this.#timegroupClone.container as HTMLDivElement;\n\n    // CRITICAL: Wait for Lit to process shadow DOM updates after moving to new container\n    await this.#timegroupClone.clone.updateComplete;\n\n    // Also wait for all nested Lit elements to update\n    const litElements = this.#previewContainer.querySelectorAll(\"*\");\n    const updatePromises: Promise<any>[] = [];\n    for (const el of litElements) {\n      if (\"updateComplete\" in el) {\n        updatePromises.push((el as any).updateComplete);\n      }\n    }\n    await Promise.all(updatePromises);\n\n    // Wait AGAIN specifically for text segments (they may need to re-render after move)\n    const textSegments = this.#previewContainer.querySelectorAll(\"ef-text-segment\");\n    const textUpdatePromises: Promise<any>[] = [];\n    for (const seg of textSegments) {\n      if (\"updateComplete\" in seg) {\n        textUpdatePromises.push((seg as any).updateComplete);\n      }\n    }\n    await Promise.all(textUpdatePromises);\n\n    // CRITICAL: Wait for ef-text to split text into segments\n    // EFText.connectedCallback schedules splitText in requestAnimationFrame\n    // We must wait for that RAF to fire before capturing\n    await new Promise((resolve) => requestAnimationFrame(resolve));\n\n    // WARMUP: Do a seek to the first timestamp to \"prime\" the clone\n    // Guard: clone may have been disposed during prior awaits\n    if (!this.#timegroupClone) return;\n    if (timestamps.length > 0) {\n      await this.#timegroupClone.clone.seekForRender(timestamps[0]!);\n    }\n\n    // CRITICAL: Wait for fonts to load\n    // Text won't render correctly if fonts aren't ready\n    await document.fonts.ready;\n\n    // CRITICAL: Wait for all images to load\n    const images = this.#previewContainer.querySelectorAll(\"img\");\n    const imagePromises: Promise<void>[] = [];\n    for (const img of images) {\n      if (!img.complete) {\n        imagePromises.push(\n          new Promise((resolve, _reject) => {\n            img.onload = () => resolve();\n            img.onerror = () => resolve(); // Don't block on errors\n            // Timeout after 5s\n            setTimeout(() => resolve(), 5000);\n          }),\n        );\n      }\n    }\n    await Promise.all(imagePromises);\n\n    // Guard: clone may have been disposed during prior awaits\n    if (!this.#timegroupClone) return;\n\n    // Initialize queue\n    this.#timegroupQueue.reset(timestamps);\n\n    // Create abort controller for this generator\n    this.#timegroupGeneratorAbort = new AbortController();\n\n    // Start generator using the fresh container\n    this.#timegroupGenerator = generateThumbnailsFromClone(\n      this.#timegroupClone.clone,\n      this.#previewContainer,\n      this.#timegroupQueue,\n      {\n        scale: 0.25,\n        contentReadyMode: \"blocking\",\n        blockingTimeoutMs: 1000,\n        signal: this.#timegroupGeneratorAbort.signal,\n      },\n    );\n\n    // Consume generator (CRITICAL: Must await to prevent concurrent consumers)\n    await this.#consumeTimegroupGenerator();\n  }\n\n  /**\n   * Consume generator and handle cleanup\n   */\n  async #consumeTimegroupGenerator(): Promise<void> {\n    // CRITICAL: Prevent concurrent consumers\n    if (this.#consumerRunning) {\n      return;\n    }\n    this.#consumerRunning = true;\n\n    if (!this.#timegroupGenerator) {\n      this.#consumerRunning = false;\n      return;\n    }\n\n    try {\n      for await (const { timeMs, canvas } of this.#timegroupGenerator) {\n        this.#thumbnailCache.set(timeMs, canvas);\n        this.#scheduleRender();\n      }\n    } catch (err) {\n      console.warn(\"Timegroup thumbnail generation error:\", err);\n    } finally {\n      // Generator finished, but keep clone alive for reuse\n      this.#timegroupGenerator = null;\n      this.#consumerRunning = false;\n    }\n  }\n\n  /**\n   * Cleanup timegroup generator and clone\n   */\n  #cleanupTimegroupGenerator(): void {\n    // Abort any in-flight work\n    this.#timegroupGeneratorAbort?.abort();\n    this.#timegroupGeneratorAbort = null;\n\n    this.#timegroupGenerator = null;\n\n    // Remove preview container from DOM\n    if (this.#previewContainer) {\n      this.#previewContainer.remove();\n      this.#previewContainer = null;\n    }\n\n    // Cleanup render clone\n    if (this.#timegroupClone) {\n      this.#timegroupClone.cleanup();\n      this.#timegroupClone = null;\n    }\n  }\n\n  /**\n   * Clear all canvas elements\n   */\n  #clearCanvas(): void {\n    const container = this.#canvasContainer.value;\n    if (container) {\n      container.innerHTML = \"\";\n    }\n  }\n\n  /**\n   * Translate composition time to source time for videos (handles trim)\n   */\n  #getSourceTimeMs(compositionTimeMs: number): number {\n    if (this.useIntrinsicDuration) {\n      return compositionTimeMs;\n    }\n    const el = this.targetElement;\n    if (el instanceof EFVideo) {\n      return compositionTimeMs + (el.sourceStartMs ?? 0);\n    }\n    return compositionTimeMs;\n  }\n\n  /**\n   * Draw thumbnails to canvas elements\n   */\n  #drawThumbnails(thumbnails: ThumbnailDescriptor[], results: ThumbnailResult[]): void {\n    const container = this.#canvasContainer.value;\n    if (!container) return;\n\n    // Clear existing canvases\n    container.innerHTML = \"\";\n\n    for (let i = 0; i < thumbnails.length; i++) {\n      const thumbnail = thumbnails[i];\n      const result = results[i];\n\n      if (!thumbnail) continue;\n\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = thumbnail.width;\n      canvas.height = thumbnail.height;\n      canvas.style.left = `${thumbnail.x}px`;\n      canvas.style.top = \"0\";\n      canvas.style.width = `${thumbnail.width}px`;\n      canvas.style.height = `${thumbnail.height}px`;\n\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) continue;\n\n      if (result?.canvas) {\n        // Draw actual thumbnail\n        ctx.drawImage(result.canvas, 0, 0, thumbnail.width, thumbnail.height);\n\n        // Draw timestamp overlay if enabled\n        if (this.previewSettings?.showThumbnailTimestamps) {\n          ctx.fillStyle = \"rgba(0, 0, 0, 0.8)\";\n          ctx.fillRect(2, 2, 95, 16);\n          ctx.fillStyle = \"yellow\";\n          ctx.font = \"11px monospace\";\n          ctx.textAlign = \"left\";\n          ctx.textBaseline = \"top\";\n          ctx.fillText(`${Math.round(thumbnail.timeMs)}ms`, 5, 4);\n        }\n      } else {\n        // Draw placeholder with timestamp text\n        const bgColor =\n          getComputedStyle(this).getPropertyValue(\"--ef-color-bg-inset\").trim() ||\n          \"rgba(100, 100, 100, 0.3)\";\n        ctx.fillStyle = bgColor;\n        ctx.fillRect(0, 0, thumbnail.width, thumbnail.height);\n\n        const borderColor =\n          getComputedStyle(this).getPropertyValue(\"--ef-color-border-subtle\").trim() ||\n          \"rgba(150, 150, 150, 0.5)\";\n        ctx.strokeStyle = borderColor;\n        ctx.lineWidth = 1;\n        ctx.strokeRect(0, 0, thumbnail.width, thumbnail.height);\n\n        ctx.fillStyle = \"white\";\n        ctx.font = \"10px monospace\";\n        ctx.textAlign = \"center\";\n        ctx.textBaseline = \"middle\";\n        ctx.fillText(\n          `${Math.round(thumbnail.timeMs)}ms`,\n          thumbnail.width / 2,\n          thumbnail.height / 2,\n        );\n      }\n\n      container.appendChild(canvas);\n    }\n  }\n\n  render() {\n    // Error: No target specified (neither target string nor targetElement)\n    if (!this.target && !this.targetElement) {\n      return html`<div class=\"error-message\">No target specified</div>`;\n    }\n\n    // Error: Target element not found (when using target string)\n    if (this.target && !this.targetElement) {\n      return html`<div class=\"error-message\">\n        Target element \"${this.target}\" not found\n      </div>`;\n    }\n\n    // Error: Invalid target type\n    if (!this.isValidTarget) {\n      const elementType = (this.targetElement as any).tagName?.toLowerCase() || \"unknown\";\n      return html`<div class=\"error-message\">\n        Invalid target: \"${elementType}\" must be ef-video or root ef-timegroup\n      </div>`;\n    }\n\n    // Calculate track width to clip thumbnails at track end\n    const durationMs = this.#effectiveDurationMs;\n    const pixelsPerMs = this.#effectivePixelsPerMs;\n    const trackWidthPx = durationMs * pixelsPerMs;\n\n    // Render canvas container with explicit width clipping, plus shimmer overlay\n    return html`\n      <div\n        class=\"thumbnail-container\"\n        style=\"max-width: ${trackWidthPx}px;\"\n        ${ref(this.#canvasContainer)}\n      ></div>\n      <div\n        class=\"shimmer-overlay ${this._isLoadingThumbnails ? \"active\" : \"\"}\"\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-thumbnail-strip\": EFThumbnailStrip;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/timeline/tracks/ImageTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageTrack.js","names":["EFImageTrack"],"sources":["../../../../src/gui/timeline/tracks/ImageTrack.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\n\n@customElement(\"ef-image-track\")\nexport class EFImageTrack extends TrackItem {\n  contents() {\n    const image = this.element as EFImage;\n    if (!(image instanceof EFImage)) {\n      return nothing;\n    }\n\n    // Try to get image src for thumbnail preview\n    const src = image.getAttribute(\"src\") || (image as any).src;\n\n    // Calculate track dimensions - show repeating thumbnails to fill the track\n    const durationMs = image.durationMs ?? 0;\n    const trackWidth = durationMs * this.pixelsPerMs;\n    const thumbnailHeight = 18;\n    const thumbnailWidth = Math.min(32, trackWidth);\n\n    if (!src || thumbnailWidth < 8) {\n      return nothing;\n    }\n\n    // Calculate how many thumbnails can fit\n    const thumbnailCount = Math.max(\n      1,\n      Math.floor((trackWidth - 8) / (thumbnailWidth + 2)),\n    );\n\n    return html`\n      <div style=${styleMap({\n        position: \"absolute\",\n        left: \"4px\",\n        right: \"4px\",\n        top: \"2px\",\n        bottom: \"2px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"2px\",\n        overflow: \"hidden\",\n      })}>\n        ${Array.from(\n          { length: thumbnailCount },\n          () => html`\n          <img\n            src=\"${src}\"\n            alt=\"\"\n            style=${styleMap({\n              height: `${thumbnailHeight}px`,\n              width: `${thumbnailWidth}px`,\n              objectFit: \"cover\",\n              borderRadius: \"2px\",\n              opacity: \"0.75\",\n              pointerEvents: \"none\",\n              flexShrink: \"0\",\n            })}\n          />\n        `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-image-track\": EFImageTrack;\n  }\n}\n"],"mappings":";;;;;;;;AASO,yBAAMA,uBAAqB,UAAU;CAC1C,WAAW;EACT,MAAM,QAAQ,KAAK;AACnB,MAAI,EAAE,iBAAiB,SACrB,QAAO;EAIT,MAAM,MAAM,MAAM,aAAa,MAAM,IAAK,MAAc;EAIxD,MAAM,cADa,MAAM,cAAc,KACP,KAAK;EACrC,MAAM,kBAAkB;EACxB,MAAM,iBAAiB,KAAK,IAAI,IAAI,WAAW;AAE/C,MAAI,CAAC,OAAO,iBAAiB,EAC3B,QAAO;EAIT,MAAM,iBAAiB,KAAK,IAC1B,GACA,KAAK,OAAO,aAAa,MAAM,iBAAiB,GAAG,CACpD;AAED,SAAO,IAAI;mBACI,SAAS;GACpB,UAAU;GACV,MAAM;GACN,OAAO;GACP,KAAK;GACL,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACX,CAAC,CAAC;UACC,MAAM,KACN,EAAE,QAAQ,gBAAgB,QACpB,IAAI;;mBAED,IAAI;;oBAEH,SAAS;GACf,QAAQ,GAAG,gBAAgB;GAC3B,OAAO,GAAG,eAAe;GACzB,WAAW;GACX,cAAc;GACd,SAAS;GACT,eAAe;GACf,YAAY;GACb,CAAC,CAAC;;UAGN,CAAC;;;;;2BAxDT,cAAc,iBAAiB"}
+{"version":3,"file":"ImageTrack.js","names":["EFImageTrack"],"sources":["../../../../src/gui/timeline/tracks/ImageTrack.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\n\n@customElement(\"ef-image-track\")\nexport class EFImageTrack extends TrackItem {\n  contents() {\n    const image = this.element as EFImage;\n    if (!(image instanceof EFImage)) {\n      return nothing;\n    }\n\n    // Try to get image src for thumbnail preview\n    const src = image.getAttribute(\"src\") || (image as any).src;\n\n    // Calculate track dimensions - show repeating thumbnails to fill the track\n    const durationMs = image.durationMs ?? 0;\n    const trackWidth = durationMs * this.pixelsPerMs;\n    const thumbnailHeight = 18;\n    const thumbnailWidth = Math.min(32, trackWidth);\n\n    if (!src || thumbnailWidth < 8) {\n      return nothing;\n    }\n\n    // Calculate how many thumbnails can fit\n    const thumbnailCount = Math.max(1, Math.floor((trackWidth - 8) / (thumbnailWidth + 2)));\n\n    return html`\n      <div style=${styleMap({\n        position: \"absolute\",\n        left: \"4px\",\n        right: \"4px\",\n        top: \"2px\",\n        bottom: \"2px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"2px\",\n        overflow: \"hidden\",\n      })}>\n        ${Array.from(\n          { length: thumbnailCount },\n          () => html`\n          <img\n            src=\"${src}\"\n            alt=\"\"\n            style=${styleMap({\n              height: `${thumbnailHeight}px`,\n              width: `${thumbnailWidth}px`,\n              objectFit: \"cover\",\n              borderRadius: \"2px\",\n              opacity: \"0.75\",\n              pointerEvents: \"none\",\n              flexShrink: \"0\",\n            })}\n          />\n        `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-image-track\": EFImageTrack;\n  }\n}\n"],"mappings":";;;;;;;;AASO,yBAAMA,uBAAqB,UAAU;CAC1C,WAAW;EACT,MAAM,QAAQ,KAAK;AACnB,MAAI,EAAE,iBAAiB,SACrB,QAAO;EAIT,MAAM,MAAM,MAAM,aAAa,MAAM,IAAK,MAAc;EAIxD,MAAM,cADa,MAAM,cAAc,KACP,KAAK;EACrC,MAAM,kBAAkB;EACxB,MAAM,iBAAiB,KAAK,IAAI,IAAI,WAAW;AAE/C,MAAI,CAAC,OAAO,iBAAiB,EAC3B,QAAO;EAIT,MAAM,iBAAiB,KAAK,IAAI,GAAG,KAAK,OAAO,aAAa,MAAM,iBAAiB,GAAG,CAAC;AAEvF,SAAO,IAAI;mBACI,SAAS;GACpB,UAAU;GACV,MAAM;GACN,OAAO;GACP,KAAK;GACL,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACX,CAAC,CAAC;UACC,MAAM,KACN,EAAE,QAAQ,gBAAgB,QACpB,IAAI;;mBAED,IAAI;;oBAEH,SAAS;GACf,QAAQ,GAAG,gBAAgB;GAC3B,OAAO,GAAG,eAAe;GACzB,WAAW;GACX,cAAc;GACd,SAAS;GACT,eAAe;GACf,YAAY;GACb,CAAC,CAAC;;UAGN,CAAC;;;;;2BArDT,cAAc,iBAAiB"}

package/dist/gui/timeline/tracks/TextTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextTrack.js","names":["EFTextTrack","#getTextContent","#canShowSegmentsIndividually","#renderSegments","#renderCompactText","EFTextSegmentTrack"],"sources":["../../../../src/gui/timeline/tracks/TextTrack.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, nothing, type TemplateResult } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../../elements/EFTextSegment.js\";\nimport { currentTimeContext } from \"../../currentTimeContext.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { renderTrackChildren } from \"./renderTrackChildren.js\";\n\n@customElement(\"ef-text-track\")\nexport class EFTextTrack extends TrackItem {\n  @consume({ context: currentTimeContext, subscribe: true })\n  contextCurrentTimeMs = 0;\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .text-segment-block {\n        position: absolute;\n        height: calc(100% - 4px);\n        top: 2px;\n        display: flex;\n        align-items: center;\n        padding: 0 4px;\n        border-radius: 2px;\n        overflow: hidden;\n        background: color-mix(in srgb, var(--ef-color-type-text) 15%, transparent);\n      }\n      \n      .text-segment-block.active {\n        background: color-mix(in srgb, var(--ef-color-type-text) 35%, transparent);\n      }\n      \n      .text-segment-block:hover {\n        z-index: 100;\n        overflow: visible;\n        width: max-content !important;\n        min-width: max-content;\n        background: var(--ef-color-bg-elevated);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n      }\n      \n      .segment-text {\n        font-size: 10px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: var(--ef-color-text);\n      }\n      \n      .text-segment-block:hover .segment-text {\n        overflow: visible;\n        text-overflow: clip;\n      }\n      \n      .text-segment-block.active .segment-text {\n        font-weight: 500;\n        color: white;\n      }\n      \n      /* Compact mode - single block for full text */\n      .text-compact-block {\n        position: absolute;\n        left: 4px;\n        right: 4px;\n        top: 2px;\n        bottom: 2px;\n        display: flex;\n        align-items: center;\n        padding: 0 4px;\n        overflow: hidden;\n        border-radius: 2px;\n        background: color-mix(in srgb, var(--ef-color-type-text) 10%, transparent);\n      }\n      \n      .text-compact-block:hover {\n        overflow: visible;\n        z-index: 100;\n        width: max-content;\n        background: var(--ef-color-bg-elevated);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n      }\n    `,\n  ];\n\n  /**\n   * Get the text content - from segments, direct text nodes, or element textContent\n   */\n  #getTextContent(segments: EFTextSegment[]): string {\n    const text = this.element as EFText;\n\n    // If there are segments, use their text\n    if (segments.length > 0) {\n      return segments.map((s) => s.segmentText).join(\" \");\n    }\n\n    // Try direct text nodes (excluding templates and other elements)\n    const directText = Array.from(text.childNodes)\n      .filter((node) => node.nodeType === Node.TEXT_NODE)\n      .map((node) => node.textContent?.trim())\n      .filter(Boolean)\n      .join(\" \");\n\n    if (directText) return directText;\n\n    // Ultimate fallback: use the element's full text content\n    // (excluding script/style content but including nested text)\n    const fullText = text.textContent?.trim() || \"\";\n    return fullText;\n  }\n\n  /**\n   * Check if segments can fit individually based on track width\n   */\n  #canShowSegmentsIndividually(\n    segments: EFTextSegment[],\n    trackWidthPx: number,\n  ): boolean {\n    if (segments.length === 0) return false;\n    // Need at least 20px per segment\n    return trackWidthPx >= segments.length * 20;\n  }\n\n  render() {\n    const text = this.element as EFText;\n    const segments = Array.from(\n      text.querySelectorAll(\"ef-text-segment\"),\n    ) as EFTextSegment[];\n    const textContent = this.#getTextContent(segments);\n    const durationMs = text.durationMs ?? 0;\n    const trackWidthPx = durationMs * this.pixelsPerMs;\n    const canShowSegments = this.#canShowSegmentsIndividually(\n      segments,\n      trackWidthPx,\n    );\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        class=\"relative\"\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"relative mb-[1px] block h-[1.1rem] text-nowrap border text-sm overflow-visible\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: \"var(--filmstrip-border)\",\n            borderLeftColor: this.getElementTypeColor(),\n            borderLeftWidth: \"3px\",\n          })}\n        >\n          ${\n            segments.length > 0 && canShowSegments\n              ? this.#renderSegments(segments, durationMs)\n              : this.#renderCompactText(textContent)\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  /**\n   * Render segments as positioned blocks (like captions)\n   */\n  #renderSegments(segments: EFTextSegment[], durationMs: number) {\n    const text = this.element as EFText;\n    const currentTimeMs = this.contextCurrentTimeMs || 0;\n    const textLocalTimeMs = currentTimeMs - text.startTimeMs;\n\n    return segments.map((segment, index) => {\n      const staggerOffset = segment.staggerOffsetMs ?? 0;\n      // Segment becomes active at its stagger offset\n      const isActive = textLocalTimeMs >= staggerOffset;\n\n      // Calculate segment width - distribute evenly or use stagger spacing\n      const nextSegment = segments[index + 1];\n      const nextStagger = nextSegment?.staggerOffsetMs ?? durationMs;\n      const segmentWidthMs = nextStagger - staggerOffset;\n      const segmentWidthPx = Math.max(this.pixelsPerMs * segmentWidthMs, 18);\n\n      return html`<div\n        class=\"text-segment-block ${isActive ? \"active\" : \"\"}\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * staggerOffset}px`,\n          width: `${segmentWidthPx}px`,\n        })}\n        title=\"${segment.segmentText}\"\n      >\n        <span class=\"segment-text\">${segment.segmentText}</span>\n      </div>`;\n    });\n  }\n\n  /**\n   * Render compact text (no segments or not enough space)\n   */\n  #renderCompactText(textContent: string) {\n    if (!textContent) return nothing;\n\n    return html`\n      <div class=\"text-compact-block\">\n        <span class=\"segment-text\">${textContent}</span>\n      </div>\n    `;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    const nonSegmentChildren = Array.from(this.element.children).filter(\n      (child) => child.tagName?.toUpperCase() !== \"EF-TEXT-SEGMENT\",\n    );\n\n    if (nonSegmentChildren.length === 0) {\n      return nothing;\n    }\n\n    return renderTrackChildren(\n      nonSegmentChildren,\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.enableTrim,\n    );\n  }\n}\n\n@customElement(\"ef-text-segment-track\")\nexport class EFTextSegmentTrack extends TrackItem {\n  get textTrackStyles() {\n    const parentText = this.element.closest(\"ef-text\") as EFText;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentText?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentText?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    const segment = this.element as EFTextSegment;\n    const parentText = segment.closest(\"ef-text\") as EFText;\n\n    if (!parentText) {\n      return html`<div style=${styleMap(this.textTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        </div>\n      </div>`;\n    }\n\n    const rootTimegroup = parentText.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const textLocalTimeMs = currentTimeMs - parentText.startTimeMs;\n\n    const isCurrentlyActive =\n      textLocalTimeMs >= segment.segmentStartMs &&\n      textLocalTimeMs < segment.segmentEndMs;\n\n    return html`<div style=${styleMap(this.textTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        <div\n          class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n          style=${styleMap({\n            left: `${this.pixelsPerMs * segment.segmentStartMs}px`,\n            width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,\n            height: \"100%\",\n            top: \"0px\",\n            backgroundColor: isCurrentlyActive\n              ? \"var(--filmstrip-caption-bg)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: isCurrentlyActive\n              ? \"var(--filmstrip-caption-border)\"\n              : \"var(--filmstrip-border)\",\n          })}\n          title=\"Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)\"\n        >\n          ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap\" style=\"background-color: var(--filmstrip-caption-bg);\">${segment.segmentText}</span>` : \"\"}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-text-track\": EFTextTrack;\n    \"ef-text-segment-track\": EFTextSegmentTrack;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TextTrack.js","names":["EFTextTrack","#getTextContent","#canShowSegmentsIndividually","#renderSegments","#renderCompactText","EFTextSegmentTrack"],"sources":["../../../../src/gui/timeline/tracks/TextTrack.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, nothing, type TemplateResult } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../../elements/EFTextSegment.js\";\nimport { currentTimeContext } from \"../../currentTimeContext.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { renderTrackChildren } from \"./renderTrackChildren.js\";\n\n@customElement(\"ef-text-track\")\nexport class EFTextTrack extends TrackItem {\n  @consume({ context: currentTimeContext, subscribe: true })\n  contextCurrentTimeMs = 0;\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .text-segment-block {\n        position: absolute;\n        height: calc(100% - 4px);\n        top: 2px;\n        display: flex;\n        align-items: center;\n        padding: 0 4px;\n        border-radius: 2px;\n        overflow: hidden;\n        background: color-mix(in srgb, var(--ef-color-type-text) 15%, transparent);\n      }\n      \n      .text-segment-block.active {\n        background: color-mix(in srgb, var(--ef-color-type-text) 35%, transparent);\n      }\n      \n      .text-segment-block:hover {\n        z-index: 100;\n        overflow: visible;\n        width: max-content !important;\n        min-width: max-content;\n        background: var(--ef-color-bg-elevated);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n      }\n      \n      .segment-text {\n        font-size: 10px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: var(--ef-color-text);\n      }\n      \n      .text-segment-block:hover .segment-text {\n        overflow: visible;\n        text-overflow: clip;\n      }\n      \n      .text-segment-block.active .segment-text {\n        font-weight: 500;\n        color: white;\n      }\n      \n      /* Compact mode - single block for full text */\n      .text-compact-block {\n        position: absolute;\n        left: 4px;\n        right: 4px;\n        top: 2px;\n        bottom: 2px;\n        display: flex;\n        align-items: center;\n        padding: 0 4px;\n        overflow: hidden;\n        border-radius: 2px;\n        background: color-mix(in srgb, var(--ef-color-type-text) 10%, transparent);\n      }\n      \n      .text-compact-block:hover {\n        overflow: visible;\n        z-index: 100;\n        width: max-content;\n        background: var(--ef-color-bg-elevated);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n      }\n    `,\n  ];\n\n  /**\n   * Get the text content - from segments, direct text nodes, or element textContent\n   */\n  #getTextContent(segments: EFTextSegment[]): string {\n    const text = this.element as EFText;\n\n    // If there are segments, use their text\n    if (segments.length > 0) {\n      return segments.map((s) => s.segmentText).join(\" \");\n    }\n\n    // Try direct text nodes (excluding templates and other elements)\n    const directText = Array.from(text.childNodes)\n      .filter((node) => node.nodeType === Node.TEXT_NODE)\n      .map((node) => node.textContent?.trim())\n      .filter(Boolean)\n      .join(\" \");\n\n    if (directText) return directText;\n\n    // Ultimate fallback: use the element's full text content\n    // (excluding script/style content but including nested text)\n    const fullText = text.textContent?.trim() || \"\";\n    return fullText;\n  }\n\n  /**\n   * Check if segments can fit individually based on track width\n   */\n  #canShowSegmentsIndividually(segments: EFTextSegment[], trackWidthPx: number): boolean {\n    if (segments.length === 0) return false;\n    // Need at least 20px per segment\n    return trackWidthPx >= segments.length * 20;\n  }\n\n  render() {\n    const text = this.element as EFText;\n    const segments = Array.from(text.querySelectorAll(\"ef-text-segment\")) as EFTextSegment[];\n    const textContent = this.#getTextContent(segments);\n    const durationMs = text.durationMs ?? 0;\n    const trackWidthPx = durationMs * this.pixelsPerMs;\n    const canShowSegments = this.#canShowSegmentsIndividually(segments, trackWidthPx);\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        class=\"relative\"\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"relative mb-[1px] block h-[1.1rem] text-nowrap border text-sm overflow-visible\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: \"var(--filmstrip-border)\",\n            borderLeftColor: this.getElementTypeColor(),\n            borderLeftWidth: \"3px\",\n          })}\n        >\n          ${\n            segments.length > 0 && canShowSegments\n              ? this.#renderSegments(segments, durationMs)\n              : this.#renderCompactText(textContent)\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  /**\n   * Render segments as positioned blocks (like captions)\n   */\n  #renderSegments(segments: EFTextSegment[], durationMs: number) {\n    const text = this.element as EFText;\n    const currentTimeMs = this.contextCurrentTimeMs || 0;\n    const textLocalTimeMs = currentTimeMs - text.startTimeMs;\n\n    return segments.map((segment, index) => {\n      const staggerOffset = segment.staggerOffsetMs ?? 0;\n      // Segment becomes active at its stagger offset\n      const isActive = textLocalTimeMs >= staggerOffset;\n\n      // Calculate segment width - distribute evenly or use stagger spacing\n      const nextSegment = segments[index + 1];\n      const nextStagger = nextSegment?.staggerOffsetMs ?? durationMs;\n      const segmentWidthMs = nextStagger - staggerOffset;\n      const segmentWidthPx = Math.max(this.pixelsPerMs * segmentWidthMs, 18);\n\n      return html`<div\n        class=\"text-segment-block ${isActive ? \"active\" : \"\"}\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * staggerOffset}px`,\n          width: `${segmentWidthPx}px`,\n        })}\n        title=\"${segment.segmentText}\"\n      >\n        <span class=\"segment-text\">${segment.segmentText}</span>\n      </div>`;\n    });\n  }\n\n  /**\n   * Render compact text (no segments or not enough space)\n   */\n  #renderCompactText(textContent: string) {\n    if (!textContent) return nothing;\n\n    return html`\n      <div class=\"text-compact-block\">\n        <span class=\"segment-text\">${textContent}</span>\n      </div>\n    `;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    const nonSegmentChildren = Array.from(this.element.children).filter(\n      (child) => child.tagName?.toUpperCase() !== \"EF-TEXT-SEGMENT\",\n    );\n\n    if (nonSegmentChildren.length === 0) {\n      return nothing;\n    }\n\n    return renderTrackChildren(\n      nonSegmentChildren,\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.enableTrim,\n    );\n  }\n}\n\n@customElement(\"ef-text-segment-track\")\nexport class EFTextSegmentTrack extends TrackItem {\n  get textTrackStyles() {\n    const parentText = this.element.closest(\"ef-text\") as EFText;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentText?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentText?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    const segment = this.element as EFTextSegment;\n    const parentText = segment.closest(\"ef-text\") as EFText;\n\n    if (!parentText) {\n      return html`<div style=${styleMap(this.textTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        </div>\n      </div>`;\n    }\n\n    const rootTimegroup = parentText.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const textLocalTimeMs = currentTimeMs - parentText.startTimeMs;\n\n    const isCurrentlyActive =\n      textLocalTimeMs >= segment.segmentStartMs && textLocalTimeMs < segment.segmentEndMs;\n\n    return html`<div style=${styleMap(this.textTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        <div\n          class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n          style=${styleMap({\n            left: `${this.pixelsPerMs * segment.segmentStartMs}px`,\n            width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,\n            height: \"100%\",\n            top: \"0px\",\n            backgroundColor: isCurrentlyActive\n              ? \"var(--filmstrip-caption-bg)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: isCurrentlyActive\n              ? \"var(--filmstrip-caption-border)\"\n              : \"var(--filmstrip-border)\",\n          })}\n          title=\"Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)\"\n        >\n          ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap\" style=\"background-color: var(--filmstrip-caption-bg);\">${segment.segmentText}</span>` : \"\"}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-text-track\": EFTextTrack;\n    \"ef-text-segment-track\": EFTextSegmentTrack;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/timeline/tracks/TimegroupTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimegroupTrack.js","names":["EFTimegroupTrack"],"sources":["../../../../src/gui/timeline/tracks/TimegroupTrack.ts"],"sourcesContent":["import { css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { renderTrackChildren } from \"./renderTrackChildren.js\";\nimport \"./EFThumbnailStrip.js\";\n\n/**\n * Check if a timegroup is a root timegroup (has no parent timegroup)\n * Uses the timegroup's own isRootTimegroup property for reliability\n */\nfunction isRootTimegroup(element: Element | null | undefined): boolean {\n  // Handle null/undefined\n  if (!element) {\n    return false;\n  }\n\n  // Check if element has the isRootTimegroup property (most reliable)\n  // EFTimegroup instances have this property that checks parentTimegroup\n  const elem = element as any;\n  if (typeof elem.isRootTimegroup === \"boolean\") {\n    return elem.isRootTimegroup;\n  }\n\n  // Alternative: check parentTimegroup property directly (EFTimegroup has this)\n  if (elem.parentTimegroup !== undefined) {\n    return !elem.parentTimegroup; // Root if no parent timegroup\n  }\n\n  // Fallback: check DOM parent tree (less reliable after DOM moves)\n  let parent = element.parentElement;\n  while (parent) {\n    if (parent.tagName.toLowerCase() === \"ef-timegroup\") {\n      return false;\n    }\n    parent = parent.parentElement;\n  }\n  return true;\n}\n\n/** Height for root timegroup filmstrip row */\nconst FILMSTRIP_ROW_HEIGHT = 48;\n\n@customElement(\"ef-timegroup-track\")\nexport class EFTimegroupTrack extends TrackItem {\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .trim-container {\n        background: linear-gradient(\n          135deg,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 10%, transparent) 0%,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 5%, transparent) 100%\n        ) !important;\n      }\n      \n      :host(:hover) .trim-container {\n        background: linear-gradient(\n          135deg,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 15%, transparent) 0%,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 8%, transparent) 100%\n        ) !important;\n      }\n    `,\n  ];\n\n  /**\n   * When true, children are not rendered (used in unified row architecture\n   * where children get their own rows).\n   */\n  @property({ type: Boolean, attribute: \"skip-children\" })\n  skipChildren = false;\n\n  /**\n   * When true, show filmstrip thumbnails for root timegroups\n   * TODO: Re-enable when thumbnail strip performance is improved\n   */\n  @property({ type: Boolean, attribute: \"show-filmstrip\" })\n  showFilmstrip = false;\n\n  /**\n   * Check if this track should show a filmstrip\n   */\n  private get shouldShowFilmstrip(): boolean {\n    const skipChildren = this.skipChildren;\n    const showFilmstrip = this.showFilmstrip;\n    const hasId = !!this.element?.id;\n    const isRoot = isRootTimegroup(this.element);\n\n    return skipChildren && showFilmstrip && hasId && isRoot;\n  }\n\n  /**\n   * Override trimPortionStyles to use taller height for filmstrip rows\n   */\n  override get trimPortionStyles() {\n    const baseStyles = super.trimPortionStyles;\n    if (this.shouldShowFilmstrip) {\n      return {\n        ...baseStyles,\n        height: `${FILMSTRIP_ROW_HEIGHT}px`,\n      };\n    }\n    return baseStyles;\n  }\n\n  private get modeLabel(): string {\n    const mode = (this.element as any).mode || \"fixed\";\n    const labels: Record<string, string> = {\n      fixed: \"Fixed\",\n      sequence: \"Sequence\",\n      contain: \"Container\",\n      fit: \"Fit\",\n    };\n    return labels[mode] || mode;\n  }\n\n  contents() {\n    // Show filmstrip only for ROOT timegroups (no parent timegroup)\n    const shouldShow = this.shouldShowFilmstrip;\n\n    if (shouldShow) {\n      return html`<ef-thumbnail-strip\n        .targetElement=${this.element}\n        thumbnail-height=${FILMSTRIP_ROW_HEIGHT}\n        thumbnail-spacing-px=\"96\"\n        pixels-per-ms=${this.pixelsPerMs}\n      ></ef-thumbnail-strip>`;\n    }\n\n    if (this.skipChildren) {\n      return html`<span style=\"\n        font-size: 9px;\n        opacity: 0.5;\n        padding-left: 4px;\n        line-height: 14px;\n        pointer-events: none;\n        white-space: nowrap;\n      \">${this.modeLabel}</span>`;\n    }\n    // Wrap children in a fragment for consistent return type\n    // Note: This hierarchical rendering path is only used in tests/sandboxes.\n    // Production code always uses skipChildren=true with flat row architecture.\n    return html`${renderTrackChildren(\n      Array.from(this.element.children || []),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.enableTrim,\n    )}`;\n  }\n\n  /**\n   * Override render to use taller height for filmstrip rows\n   */\n  override render() {\n    const trackHeight = this.shouldShowFilmstrip\n      ? `${FILMSTRIP_ROW_HEIGHT}px`\n      : \"var(--timeline-track-height, 22px)\";\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container relative mb-0 block text-nowrap border text-sm\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: trackHeight,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: this.shouldShowFilmstrip\n              ? \"transparent\"\n              : \"var(--filmstrip-border)\",\n          })}\n        >\n          ${this.animations()}\n          ${this.contents()}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timegroup-track\": EFTimegroupTrack;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAS,gBAAgB,SAA8C;AAErE,KAAI,CAAC,QACH,QAAO;CAKT,MAAM,OAAO;AACb,KAAI,OAAO,KAAK,oBAAoB,UAClC,QAAO,KAAK;AAId,KAAI,KAAK,oBAAoB,OAC3B,QAAO,CAAC,KAAK;CAIf,IAAI,SAAS,QAAQ;AACrB,QAAO,QAAQ;AACb,MAAI,OAAO,QAAQ,aAAa,KAAK,eACnC,QAAO;AAET,WAAS,OAAO;;AAElB,QAAO;;;AAIT,MAAM,uBAAuB;AAGtB,6BAAMA,2BAAyB,UAAU;;;sBA2B/B;uBAOC;;;gBAjCA,CACd,GAAG,UAAU,QACb,GAAG;;;;;;;;;;;;;;;;MAiBJ;;;;;CAmBD,IAAY,sBAA+B;EACzC,MAAM,eAAe,KAAK;EAC1B,MAAM,gBAAgB,KAAK;EAC3B,MAAM,QAAQ,CAAC,CAAC,KAAK,SAAS;EAC9B,MAAM,SAAS,gBAAgB,KAAK,QAAQ;AAE5C,SAAO,gBAAgB,iBAAiB,SAAS;;;;;CAMnD,IAAa,oBAAoB;EAC/B,MAAM,aAAa,MAAM;AACzB,MAAI,KAAK,oBACP,QAAO;GACL,GAAG;GACH,QAAQ,GAAG,qBAAqB;GACjC;AAEH,SAAO;;CAGT,IAAY,YAAoB;EAC9B,MAAM,OAAQ,KAAK,QAAgB,QAAQ;AAO3C,SANuC;GACrC,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACN,CACa,SAAS;;CAGzB,WAAW;AAIT,MAFmB,KAAK,oBAGtB,QAAO,IAAI;yBACQ,KAAK,QAAQ;2BACX,qBAAqB;;wBAExB,KAAK,YAAY;;AAIrC,MAAI,KAAK,aACP,QAAO,IAAI;;;;;;;UAOP,KAAK,UAAU;AAKrB,SAAO,IAAI,GAAG,oBACZ,MAAM,KAAK,KAAK,QAAQ,YAAY,EAAE,CAAC,EACvC,KAAK,aACL,KAAK,eACL,KAAK,eACL,OACA,KAAK,WACN;;;;;CAMH,AAAS,SAAS;EAChB,MAAM,cAAc,KAAK,sBACrB,GAAG,qBAAqB,MACxB;AAEJ,SAAO,IAAI,cAAc,SAAS,KAAK,aAAa,CAAC;;;wBAGjC,KAAK,UAAU;4BACX;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB,KAAK;IAE1C;4BACkB;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB;IAErC;;;0BAGgB,KAAK,UAAU;;kBAEvB,SAAS;GACf,GAAG,KAAK;GACR,QAAQ;GACR,iBAAiB,KAAK,YAClB,kCACA;GACJ,aAAa,KAAK,sBACd,gBACA;GACL,CAAC,CAAC;;YAED,KAAK,YAAY,CAAC;YAClB,KAAK,UAAU,CAAC;;;QAGpB,KAAK,gBAAgB,CAAC;;;;YA5H3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,CAAC;YAOvD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkB,CAAC;+BAlC1D,cAAc,qBAAqB"}
+{"version":3,"file":"TimegroupTrack.js","names":["EFTimegroupTrack"],"sources":["../../../../src/gui/timeline/tracks/TimegroupTrack.ts"],"sourcesContent":["import { css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { renderTrackChildren } from \"./renderTrackChildren.js\";\nimport \"./EFThumbnailStrip.js\";\n\n/**\n * Check if a timegroup is a root timegroup (has no parent timegroup)\n * Uses the timegroup's own isRootTimegroup property for reliability\n */\nfunction isRootTimegroup(element: Element | null | undefined): boolean {\n  // Handle null/undefined\n  if (!element) {\n    return false;\n  }\n\n  // Check if element has the isRootTimegroup property (most reliable)\n  // EFTimegroup instances have this property that checks parentTimegroup\n  const elem = element as any;\n  if (typeof elem.isRootTimegroup === \"boolean\") {\n    return elem.isRootTimegroup;\n  }\n\n  // Alternative: check parentTimegroup property directly (EFTimegroup has this)\n  if (elem.parentTimegroup !== undefined) {\n    return !elem.parentTimegroup; // Root if no parent timegroup\n  }\n\n  // Fallback: check DOM parent tree (less reliable after DOM moves)\n  let parent = element.parentElement;\n  while (parent) {\n    if (parent.tagName.toLowerCase() === \"ef-timegroup\") {\n      return false;\n    }\n    parent = parent.parentElement;\n  }\n  return true;\n}\n\n/** Height for root timegroup filmstrip row */\nconst FILMSTRIP_ROW_HEIGHT = 48;\n\n@customElement(\"ef-timegroup-track\")\nexport class EFTimegroupTrack extends TrackItem {\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .trim-container {\n        background: linear-gradient(\n          135deg,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 10%, transparent) 0%,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 5%, transparent) 100%\n        ) !important;\n      }\n      \n      :host(:hover) .trim-container {\n        background: linear-gradient(\n          135deg,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 15%, transparent) 0%,\n          color-mix(in srgb, var(--ef-color-type-timegroup) 8%, transparent) 100%\n        ) !important;\n      }\n    `,\n  ];\n\n  /**\n   * When true, children are not rendered (used in unified row architecture\n   * where children get their own rows).\n   */\n  @property({ type: Boolean, attribute: \"skip-children\" })\n  skipChildren = false;\n\n  /**\n   * When true, show filmstrip thumbnails for root timegroups\n   * TODO: Re-enable when thumbnail strip performance is improved\n   */\n  @property({ type: Boolean, attribute: \"show-filmstrip\" })\n  showFilmstrip = false;\n\n  /**\n   * Check if this track should show a filmstrip\n   */\n  private get shouldShowFilmstrip(): boolean {\n    const skipChildren = this.skipChildren;\n    const showFilmstrip = this.showFilmstrip;\n    const hasId = !!this.element?.id;\n    const isRoot = isRootTimegroup(this.element);\n\n    return skipChildren && showFilmstrip && hasId && isRoot;\n  }\n\n  /**\n   * Override trimPortionStyles to use taller height for filmstrip rows\n   */\n  override get trimPortionStyles() {\n    const baseStyles = super.trimPortionStyles;\n    if (this.shouldShowFilmstrip) {\n      return {\n        ...baseStyles,\n        height: `${FILMSTRIP_ROW_HEIGHT}px`,\n      };\n    }\n    return baseStyles;\n  }\n\n  private get modeLabel(): string {\n    const mode = (this.element as any).mode || \"fixed\";\n    const labels: Record<string, string> = {\n      fixed: \"Fixed\",\n      sequence: \"Sequence\",\n      contain: \"Container\",\n      fit: \"Fit\",\n    };\n    return labels[mode] || mode;\n  }\n\n  contents() {\n    // Show filmstrip only for ROOT timegroups (no parent timegroup)\n    const shouldShow = this.shouldShowFilmstrip;\n\n    if (shouldShow) {\n      return html`<ef-thumbnail-strip\n        .targetElement=${this.element}\n        thumbnail-height=${FILMSTRIP_ROW_HEIGHT}\n        thumbnail-spacing-px=\"96\"\n        pixels-per-ms=${this.pixelsPerMs}\n      ></ef-thumbnail-strip>`;\n    }\n\n    if (this.skipChildren) {\n      return html`<span style=\"\n        font-size: 9px;\n        opacity: 0.5;\n        padding-left: 4px;\n        line-height: 14px;\n        pointer-events: none;\n        white-space: nowrap;\n      \">${this.modeLabel}</span>`;\n    }\n    // Wrap children in a fragment for consistent return type\n    // Note: This hierarchical rendering path is only used in tests/sandboxes.\n    // Production code always uses skipChildren=true with flat row architecture.\n    return html`${renderTrackChildren(\n      Array.from(this.element.children || []),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.enableTrim,\n    )}`;\n  }\n\n  /**\n   * Override render to use taller height for filmstrip rows\n   */\n  override render() {\n    const trackHeight = this.shouldShowFilmstrip\n      ? `${FILMSTRIP_ROW_HEIGHT}px`\n      : \"var(--timeline-track-height, 22px)\";\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container relative mb-0 block text-nowrap border text-sm\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: trackHeight,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: this.shouldShowFilmstrip ? \"transparent\" : \"var(--filmstrip-border)\",\n          })}\n        >\n          ${this.animations()}\n          ${this.contents()}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timegroup-track\": EFTimegroupTrack;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAS,gBAAgB,SAA8C;AAErE,KAAI,CAAC,QACH,QAAO;CAKT,MAAM,OAAO;AACb,KAAI,OAAO,KAAK,oBAAoB,UAClC,QAAO,KAAK;AAId,KAAI,KAAK,oBAAoB,OAC3B,QAAO,CAAC,KAAK;CAIf,IAAI,SAAS,QAAQ;AACrB,QAAO,QAAQ;AACb,MAAI,OAAO,QAAQ,aAAa,KAAK,eACnC,QAAO;AAET,WAAS,OAAO;;AAElB,QAAO;;;AAIT,MAAM,uBAAuB;AAGtB,6BAAMA,2BAAyB,UAAU;;;sBA2B/B;uBAOC;;;gBAjCA,CACd,GAAG,UAAU,QACb,GAAG;;;;;;;;;;;;;;;;MAiBJ;;;;;CAmBD,IAAY,sBAA+B;EACzC,MAAM,eAAe,KAAK;EAC1B,MAAM,gBAAgB,KAAK;EAC3B,MAAM,QAAQ,CAAC,CAAC,KAAK,SAAS;EAC9B,MAAM,SAAS,gBAAgB,KAAK,QAAQ;AAE5C,SAAO,gBAAgB,iBAAiB,SAAS;;;;;CAMnD,IAAa,oBAAoB;EAC/B,MAAM,aAAa,MAAM;AACzB,MAAI,KAAK,oBACP,QAAO;GACL,GAAG;GACH,QAAQ,GAAG,qBAAqB;GACjC;AAEH,SAAO;;CAGT,IAAY,YAAoB;EAC9B,MAAM,OAAQ,KAAK,QAAgB,QAAQ;AAO3C,SANuC;GACrC,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACN,CACa,SAAS;;CAGzB,WAAW;AAIT,MAFmB,KAAK,oBAGtB,QAAO,IAAI;yBACQ,KAAK,QAAQ;2BACX,qBAAqB;;wBAExB,KAAK,YAAY;;AAIrC,MAAI,KAAK,aACP,QAAO,IAAI;;;;;;;UAOP,KAAK,UAAU;AAKrB,SAAO,IAAI,GAAG,oBACZ,MAAM,KAAK,KAAK,QAAQ,YAAY,EAAE,CAAC,EACvC,KAAK,aACL,KAAK,eACL,KAAK,eACL,OACA,KAAK,WACN;;;;;CAMH,AAAS,SAAS;EAChB,MAAM,cAAc,KAAK,sBACrB,GAAG,qBAAqB,MACxB;AAEJ,SAAO,IAAI,cAAc,SAAS,KAAK,aAAa,CAAC;;;wBAGjC,KAAK,UAAU;4BACX;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB,KAAK;IAE1C;4BACkB;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB;IAErC;;;0BAGgB,KAAK,UAAU;;kBAEvB,SAAS;GACf,GAAG,KAAK;GACR,QAAQ;GACR,iBAAiB,KAAK,YAClB,kCACA;GACJ,aAAa,KAAK,sBAAsB,gBAAgB;GACzD,CAAC,CAAC;;YAED,KAAK,YAAY,CAAC;YAClB,KAAK,UAAU,CAAC;;;QAGpB,KAAK,gBAAgB,CAAC;;;;YA1H3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,CAAC;YAOvD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkB,CAAC;+BAlC1D,cAAc,qBAAqB"}

package/dist/gui/timeline/tracks/TrackItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackItem.js","names":["host: LitElement","track: TrackItem","TrackItem"],"sources":["../../../../src/gui/timeline/tracks/TrackItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValueMap,\n  type ReactiveController,\n  type TemplateResult,\n} from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { type TemporalMixinInterface } from \"../../../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { EFAudio } from \"../../../elements/EFAudio.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { type FocusContext, focusContext } from \"../../focusContext.js\";\nimport { focusedElementContext } from \"../../focusedElementContext.js\";\nimport { TWMixin } from \"../../TWMixin.js\";\nimport { phosphorIcon, ICONS } from \"../../icons.js\";\nimport \"../TrimHandles.js\";\nimport type { TrimChangeDetail } from \"../TrimHandles.js\";\nimport { getElementTypeColor } from \"../../theme.js\";\n\nclass ElementTrackController implements ReactiveController {\n  private lastDuration = 0;\n  private durationCheckFrame?: number;\n\n  constructor(\n    private host: LitElement,\n    private track: TrackItem,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n    if (this.durationCheckFrame) {\n      cancelAnimationFrame(this.durationCheckFrame);\n    }\n  }\n\n  hostDisconnected() {\n    this.host.removeController(this);\n    if (this.durationCheckFrame) {\n      cancelAnimationFrame(this.durationCheckFrame);\n    }\n  }\n\n  hostConnected(): void {\n    // Start watching for duration changes\n    this.lastDuration = (this.host as any).durationMs ?? 0;\n    this.checkDuration();\n  }\n\n  private checkDuration = () => {\n    const currentDuration = (this.host as any).durationMs ?? 0;\n    if (currentDuration !== this.lastDuration) {\n      this.lastDuration = currentDuration;\n      // Duration changed - trigger re-render of the track\n      this.track.requestUpdate();\n    }\n    // Keep checking if duration is still 0 (waiting for media to load)\n    if (currentDuration === 0) {\n      this.durationCheckFrame = requestAnimationFrame(this.checkDuration);\n    }\n  };\n\n  hostUpdated(): void {\n    // TEMPORARILY DISABLED: This causes every TrackItem to re-render on every frame\n    // during playback, even though TrackItem doesn't display currentTimeMs.\n    // Duration changes are now handled separately via checkDuration()\n  }\n}\n\n@customElement(\"ef-track-item\")\nexport class TrackItem extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .trim-container {\n        position: relative;\n        border-radius: 3px;\n        transition: background-color 0.15s ease, box-shadow 0.15s ease;\n      }\n      \n      :host(:hover) .trim-container {\n        box-shadow: inset 0 0 0 1px var(--ef-color-hover);\n      }\n      \n      :host([data-focused]) .trim-container {\n        box-shadow: inset 0 0 0 1px var(--ef-color-primary);\n      }\n    `,\n  ];\n\n  @consume({ context: focusContext, subscribe: true })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  /**\n   * Get element type for styling and icons\n   */\n  protected getElementType():\n    | \"video\"\n    | \"audio\"\n    | \"image\"\n    | \"text\"\n    | \"timegroup\"\n    | \"captions\"\n    | \"unknown\" {\n    // Check for captions element\n    if (\n      (this.element as any).tagName === \"EF-CAPTIONS\" ||\n      (this.element as any).tagName?.toLowerCase() === \"ef-captions\"\n    ) {\n      return \"captions\";\n    }\n    if (this.element instanceof EFVideo) return \"video\";\n    if (this.element instanceof EFAudio) return \"audio\";\n    if (this.element instanceof EFImage) return \"image\";\n    if (this.element instanceof EFText) return \"text\";\n    if (this.element instanceof EFTimegroup) return \"timegroup\";\n    return \"unknown\";\n  }\n\n  /**\n   * Get color for element type using shared theme utility\n   */\n  protected getElementTypeColor(): string {\n    const type = this.getElementType();\n    return getElementTypeColor(type, this);\n  }\n\n  /**\n   * @deprecated Use getElementTypeColor() instead\n   */\n  protected getElementTypeColorOld(): string {\n    const type = this.getElementType();\n    switch (type) {\n      case \"video\":\n        return \"rgb(59, 130, 246)\"; // Blue\n      case \"audio\":\n        return \"rgb(34, 197, 94)\"; // Green\n      case \"image\":\n        return \"rgb(168, 85, 247)\"; // Purple\n      case \"text\":\n        return \"rgb(249, 115, 22)\"; // Orange\n      case \"captions\":\n        return \"rgb(34, 197, 94)\"; // Green (same as audio, but distinct usage)\n      case \"timegroup\":\n        return \"rgb(148, 163, 184)\"; // Gray\n      default:\n        return \"rgb(148, 163, 184)\"; // Gray\n    }\n  }\n\n  /**\n   * Get icon for element type\n   */\n  protected getElementIcon(): TemplateResult | typeof nothing {\n    const type = this.getElementType();\n    switch (type) {\n      case \"video\":\n        return phosphorIcon(ICONS.filmStrip, 14);\n      case \"audio\":\n        return phosphorIcon(ICONS.speakerHigh, 14);\n      case \"image\":\n        return phosphorIcon(ICONS.image, 14);\n      case \"text\":\n        return phosphorIcon(ICONS.textT, 14);\n      case \"captions\":\n        return phosphorIcon(ICONS.subtitles, 14);\n      case \"timegroup\":\n        return phosphorIcon(ICONS.filmSlate, 14);\n      default:\n        return nothing;\n    }\n  }\n\n  /**\n   * Format duration for display\n   */\n  protected formatDuration(ms: number): string {\n    if (ms < 1000) {\n      return `${Math.round(ms)}ms`;\n    }\n    const seconds = (ms / 1000).toFixed(1);\n    return `${seconds}s`;\n  }\n\n  /**\n   * Get tooltip text with element info\n   */\n  protected getTooltipText(): string {\n    const elementId = (this.element as HTMLElement)?.id || \"\";\n    const type = this.getElementType();\n    const duration = this.formatDuration(this.element.durationMs ?? 0);\n    const startTime = this.formatDuration(this.element.startTimeMs ?? 0);\n    const endTime = this.formatDuration(\n      (this.element.startTimeMs ?? 0) + (this.element.durationMs ?? 0),\n    );\n\n    const parts = [];\n    if (elementId) parts.push(elementId);\n    parts.push(`${type} • ${duration}`);\n    if (this.element.startTimeMs > 0) {\n      parts.push(`${startTime} → ${endTime}`);\n    }\n\n    // Add composition mode for timegroups\n    if (type === \"timegroup\") {\n      const mode = (this.element as any).mode || \"fixed\";\n      parts.push(`mode: ${mode}`);\n    }\n\n    return parts.join(\" • \");\n  }\n\n  @property({ type: Object, attribute: false })\n  element: TemporalMixinInterface & LitElement = new EFTimegroup();\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.04;\n\n  @property({ type: Boolean, attribute: \"enable-trim\" })\n  enableTrim = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  get gutterStyles() {\n    // Always use absolute positioning (startTimeMs) for flat row architecture.\n    // startTimeMs already includes the cumulative position from all parent timegroups.\n    const startMs = this.element.startTimeMs;\n    const leftOffset = startMs;\n\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * leftOffset}px`,\n      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,\n    };\n  }\n\n  get trimPortionStyles() {\n    // The trim container starts at 0 relative to the gutter,\n    // which is already positioned at the element's absolute startTimeMs.\n    return {\n      width: `${this.pixelsPerMs * this.element.durationMs}px`,\n      left: \"0px\",\n    };\n  }\n\n  protected handleTrimChange(e: CustomEvent<TrimChangeDetail>): void {\n    const { type, value } = e.detail;\n\n    this.element.trimStartMs = value.startMs;\n    this.element.trimEndMs = value.endMs;\n\n    this.dispatchEvent(\n      new CustomEvent(\"track-trim-change\", {\n        detail: {\n          elementId: this.element.id || \"\",\n          type,\n          value,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  contents(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  animations() {\n    // TEMPORARILY DISABLED: getAnimations() is expensive and called on every render\n    // TODO: Cache animations or only compute when element structure changes\n    return [];\n\n    // const animations = this.element.getAnimations();\n    // return animations.map((animation) => {\n    //   const effect = animation.effect;\n    //   if (!(effect instanceof KeyframeEffect)) {\n    //     return nothing;\n    //   }\n    //   const start = effect.getTiming().delay ?? 0;\n    //   const duration = effect.getTiming().duration;\n    //   if (duration === null) {\n    //     return nothing;\n    //   }\n    //   const keyframes = effect.getKeyframes();\n    //   const firstKeyframe = keyframes[0];\n    //   if (!firstKeyframe) {\n    //     return nothing;\n    //   }\n    //   const properties = new Set(Object.keys(firstKeyframe));\n    //   for (const key of CommonEffectKeys) {\n    //     properties.delete(key);\n    //   }\n\n    //   return html`<div\n    //     class=\"relative h-[5px] opacity-50\"\n    //     label=\"animation\"\n    //     style=${styleMap({\n    //       left: `${this.pixelsPerMs * start}px`,\n    //       width: `${this.pixelsPerMs * Number(duration)}px`,\n    //       backgroundColor: \"var(--filmstrip-animation-bg)\",\n    //     })}\n    //   >\n    //     ${effect.getKeyframes().map((keyframe) => {\n    //       return html`<div\n    //         class=\"absolute top-0 h-full w-1\"\n    //         style=${styleMap({\n    //           left: `${\n    //             this.pixelsPerMs * keyframe.computedOffset * Number(duration)\n    //           }px`,\n    //           backgroundColor: \"var(--filmstrip-keyframe-bg)\",\n    //         })}\n    //       ></div>`;\n    //     })}\n    //   </div>`;\n    // });\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return nothing;\n  }\n\n  render() {\n    const elementId = (this.element as HTMLElement).id || \"\";\n    const trimStartMs = this.element.trimStartMs ?? 0;\n    const trimEndMs = this.element.trimEndMs ?? 0;\n    const intrinsicDurationMs =\n      this.element.intrinsicDurationMs ?? this.element.durationMs;\n\n    const typeColor = this.getElementTypeColor();\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: \"var(--timeline-track-height, 22px)\",\n            backgroundColor: this.isFocused\n              ? \"rgba(59, 130, 246, 0.25)\"\n              : \"rgba(30, 41, 59, 0.8)\",\n            borderLeft: `3px solid ${typeColor}`,\n          })}\n          title=\"${this.getTooltipText()}\"\n        >\n          ${this.animations()}\n          ${this.contents()}\n          ${\n            this.enableTrim\n              ? html`<ef-trim-handles\n                mode=\"track\"\n                element-id=${elementId}\n                pixels-per-ms=${this.pixelsPerMs}\n                trim-start-ms=${trimStartMs}\n                trim-end-ms=${trimEndMs}\n                intrinsic-duration-ms=${intrinsicDurationMs}\n                @trim-change=${this.handleTrimChange}\n              ></ef-trim-handles>`\n              : nothing\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  protected trackController?: ElementTrackController;\n\n  update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    if (\n      changedProperties.has(\"element\") &&\n      this.element instanceof LitElement\n    ) {\n      this.trackController?.remove();\n      this.trackController = new ElementTrackController(this.element, this);\n    }\n    super.update(changedProperties);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-track-item\": TrackItem;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TrackItem.js","names":["host: LitElement","track: TrackItem","TrackItem"],"sources":["../../../../src/gui/timeline/tracks/TrackItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValueMap,\n  type ReactiveController,\n  type TemplateResult,\n} from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { type TemporalMixinInterface } from \"../../../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { EFAudio } from \"../../../elements/EFAudio.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { type FocusContext, focusContext } from \"../../focusContext.js\";\nimport { focusedElementContext } from \"../../focusedElementContext.js\";\nimport { TWMixin } from \"../../TWMixin.js\";\nimport { phosphorIcon, ICONS } from \"../../icons.js\";\nimport \"../TrimHandles.js\";\nimport type { TrimChangeDetail } from \"../TrimHandles.js\";\nimport { getElementTypeColor } from \"../../theme.js\";\n\nclass ElementTrackController implements ReactiveController {\n  private lastDuration = 0;\n  private durationCheckFrame?: number;\n\n  constructor(\n    private host: LitElement,\n    private track: TrackItem,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n    if (this.durationCheckFrame) {\n      cancelAnimationFrame(this.durationCheckFrame);\n    }\n  }\n\n  hostDisconnected() {\n    this.host.removeController(this);\n    if (this.durationCheckFrame) {\n      cancelAnimationFrame(this.durationCheckFrame);\n    }\n  }\n\n  hostConnected(): void {\n    // Start watching for duration changes\n    this.lastDuration = (this.host as any).durationMs ?? 0;\n    this.checkDuration();\n  }\n\n  private checkDuration = () => {\n    const currentDuration = (this.host as any).durationMs ?? 0;\n    if (currentDuration !== this.lastDuration) {\n      this.lastDuration = currentDuration;\n      // Duration changed - trigger re-render of the track\n      this.track.requestUpdate();\n    }\n    // Keep checking if duration is still 0 (waiting for media to load)\n    if (currentDuration === 0) {\n      this.durationCheckFrame = requestAnimationFrame(this.checkDuration);\n    }\n  };\n\n  hostUpdated(): void {\n    // TEMPORARILY DISABLED: This causes every TrackItem to re-render on every frame\n    // during playback, even though TrackItem doesn't display currentTimeMs.\n    // Duration changes are now handled separately via checkDuration()\n  }\n}\n\n@customElement(\"ef-track-item\")\nexport class TrackItem extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .trim-container {\n        position: relative;\n        border-radius: 3px;\n        transition: background-color 0.15s ease, box-shadow 0.15s ease;\n      }\n      \n      :host(:hover) .trim-container {\n        box-shadow: inset 0 0 0 1px var(--ef-color-hover);\n      }\n      \n      :host([data-focused]) .trim-container {\n        box-shadow: inset 0 0 0 1px var(--ef-color-primary);\n      }\n    `,\n  ];\n\n  @consume({ context: focusContext, subscribe: true })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  /**\n   * Get element type for styling and icons\n   */\n  protected getElementType():\n    | \"video\"\n    | \"audio\"\n    | \"image\"\n    | \"text\"\n    | \"timegroup\"\n    | \"captions\"\n    | \"unknown\" {\n    // Check for captions element\n    if (\n      (this.element as any).tagName === \"EF-CAPTIONS\" ||\n      (this.element as any).tagName?.toLowerCase() === \"ef-captions\"\n    ) {\n      return \"captions\";\n    }\n    if (this.element instanceof EFVideo) return \"video\";\n    if (this.element instanceof EFAudio) return \"audio\";\n    if (this.element instanceof EFImage) return \"image\";\n    if (this.element instanceof EFText) return \"text\";\n    if (this.element instanceof EFTimegroup) return \"timegroup\";\n    return \"unknown\";\n  }\n\n  /**\n   * Get color for element type using shared theme utility\n   */\n  protected getElementTypeColor(): string {\n    const type = this.getElementType();\n    return getElementTypeColor(type, this);\n  }\n\n  /**\n   * @deprecated Use getElementTypeColor() instead\n   */\n  protected getElementTypeColorOld(): string {\n    const type = this.getElementType();\n    switch (type) {\n      case \"video\":\n        return \"rgb(59, 130, 246)\"; // Blue\n      case \"audio\":\n        return \"rgb(34, 197, 94)\"; // Green\n      case \"image\":\n        return \"rgb(168, 85, 247)\"; // Purple\n      case \"text\":\n        return \"rgb(249, 115, 22)\"; // Orange\n      case \"captions\":\n        return \"rgb(34, 197, 94)\"; // Green (same as audio, but distinct usage)\n      case \"timegroup\":\n        return \"rgb(148, 163, 184)\"; // Gray\n      default:\n        return \"rgb(148, 163, 184)\"; // Gray\n    }\n  }\n\n  /**\n   * Get icon for element type\n   */\n  protected getElementIcon(): TemplateResult | typeof nothing {\n    const type = this.getElementType();\n    switch (type) {\n      case \"video\":\n        return phosphorIcon(ICONS.filmStrip, 14);\n      case \"audio\":\n        return phosphorIcon(ICONS.speakerHigh, 14);\n      case \"image\":\n        return phosphorIcon(ICONS.image, 14);\n      case \"text\":\n        return phosphorIcon(ICONS.textT, 14);\n      case \"captions\":\n        return phosphorIcon(ICONS.subtitles, 14);\n      case \"timegroup\":\n        return phosphorIcon(ICONS.filmSlate, 14);\n      default:\n        return nothing;\n    }\n  }\n\n  /**\n   * Format duration for display\n   */\n  protected formatDuration(ms: number): string {\n    if (ms < 1000) {\n      return `${Math.round(ms)}ms`;\n    }\n    const seconds = (ms / 1000).toFixed(1);\n    return `${seconds}s`;\n  }\n\n  /**\n   * Get tooltip text with element info\n   */\n  protected getTooltipText(): string {\n    const elementId = (this.element as HTMLElement)?.id || \"\";\n    const type = this.getElementType();\n    const duration = this.formatDuration(this.element.durationMs ?? 0);\n    const startTime = this.formatDuration(this.element.startTimeMs ?? 0);\n    const endTime = this.formatDuration(\n      (this.element.startTimeMs ?? 0) + (this.element.durationMs ?? 0),\n    );\n\n    const parts = [];\n    if (elementId) parts.push(elementId);\n    parts.push(`${type} • ${duration}`);\n    if (this.element.startTimeMs > 0) {\n      parts.push(`${startTime} → ${endTime}`);\n    }\n\n    // Add composition mode for timegroups\n    if (type === \"timegroup\") {\n      const mode = (this.element as any).mode || \"fixed\";\n      parts.push(`mode: ${mode}`);\n    }\n\n    return parts.join(\" • \");\n  }\n\n  @property({ type: Object, attribute: false })\n  element: TemporalMixinInterface & LitElement = new EFTimegroup();\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.04;\n\n  @property({ type: Boolean, attribute: \"enable-trim\" })\n  enableTrim = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  get gutterStyles() {\n    // Always use absolute positioning (startTimeMs) for flat row architecture.\n    // startTimeMs already includes the cumulative position from all parent timegroups.\n    const startMs = this.element.startTimeMs;\n    const leftOffset = startMs;\n\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * leftOffset}px`,\n      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,\n    };\n  }\n\n  get trimPortionStyles() {\n    // The trim container starts at 0 relative to the gutter,\n    // which is already positioned at the element's absolute startTimeMs.\n    return {\n      width: `${this.pixelsPerMs * this.element.durationMs}px`,\n      left: \"0px\",\n    };\n  }\n\n  protected handleTrimChange(e: CustomEvent<TrimChangeDetail>): void {\n    const { type, value } = e.detail;\n\n    this.element.trimStartMs = value.startMs;\n    this.element.trimEndMs = value.endMs;\n\n    this.dispatchEvent(\n      new CustomEvent(\"track-trim-change\", {\n        detail: {\n          elementId: this.element.id || \"\",\n          type,\n          value,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  contents(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  animations() {\n    // TEMPORARILY DISABLED: getAnimations() is expensive and called on every render\n    // TODO: Cache animations or only compute when element structure changes\n    return [];\n\n    // const animations = this.element.getAnimations();\n    // return animations.map((animation) => {\n    //   const effect = animation.effect;\n    //   if (!(effect instanceof KeyframeEffect)) {\n    //     return nothing;\n    //   }\n    //   const start = effect.getTiming().delay ?? 0;\n    //   const duration = effect.getTiming().duration;\n    //   if (duration === null) {\n    //     return nothing;\n    //   }\n    //   const keyframes = effect.getKeyframes();\n    //   const firstKeyframe = keyframes[0];\n    //   if (!firstKeyframe) {\n    //     return nothing;\n    //   }\n    //   const properties = new Set(Object.keys(firstKeyframe));\n    //   for (const key of CommonEffectKeys) {\n    //     properties.delete(key);\n    //   }\n\n    //   return html`<div\n    //     class=\"relative h-[5px] opacity-50\"\n    //     label=\"animation\"\n    //     style=${styleMap({\n    //       left: `${this.pixelsPerMs * start}px`,\n    //       width: `${this.pixelsPerMs * Number(duration)}px`,\n    //       backgroundColor: \"var(--filmstrip-animation-bg)\",\n    //     })}\n    //   >\n    //     ${effect.getKeyframes().map((keyframe) => {\n    //       return html`<div\n    //         class=\"absolute top-0 h-full w-1\"\n    //         style=${styleMap({\n    //           left: `${\n    //             this.pixelsPerMs * keyframe.computedOffset * Number(duration)\n    //           }px`,\n    //           backgroundColor: \"var(--filmstrip-keyframe-bg)\",\n    //         })}\n    //       ></div>`;\n    //     })}\n    //   </div>`;\n    // });\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return nothing;\n  }\n\n  render() {\n    const elementId = (this.element as HTMLElement).id || \"\";\n    const trimStartMs = this.element.trimStartMs ?? 0;\n    const trimEndMs = this.element.trimEndMs ?? 0;\n    const intrinsicDurationMs = this.element.intrinsicDurationMs ?? this.element.durationMs;\n\n    const typeColor = this.getElementTypeColor();\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: \"var(--timeline-track-height, 22px)\",\n            backgroundColor: this.isFocused ? \"rgba(59, 130, 246, 0.25)\" : \"rgba(30, 41, 59, 0.8)\",\n            borderLeft: `3px solid ${typeColor}`,\n          })}\n          title=\"${this.getTooltipText()}\"\n        >\n          ${this.animations()}\n          ${this.contents()}\n          ${\n            this.enableTrim\n              ? html`<ef-trim-handles\n                mode=\"track\"\n                element-id=${elementId}\n                pixels-per-ms=${this.pixelsPerMs}\n                trim-start-ms=${trimStartMs}\n                trim-end-ms=${trimEndMs}\n                intrinsic-duration-ms=${intrinsicDurationMs}\n                @trim-change=${this.handleTrimChange}\n              ></ef-trim-handles>`\n              : nothing\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  protected trackController?: ElementTrackController;\n\n  update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    if (changedProperties.has(\"element\") && this.element instanceof LitElement) {\n      this.trackController?.remove();\n      this.trackController = new ElementTrackController(this.element, this);\n    }\n    super.update(changedProperties);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-track-item\": TrackItem;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,IAAM,yBAAN,MAA2D;CAIzD,YACE,AAAQA,MACR,AAAQC,OACR;EAFQ;EACA;sBALa;6BA8BO;GAC5B,MAAM,kBAAmB,KAAK,KAAa,cAAc;AACzD,OAAI,oBAAoB,KAAK,cAAc;AACzC,SAAK,eAAe;AAEpB,SAAK,MAAM,eAAe;;AAG5B,OAAI,oBAAoB,EACtB,MAAK,qBAAqB,sBAAsB,KAAK,cAAc;;AAhCrE,OAAK,KAAK,cAAc,KAAK;;CAG/B,SAAS;AACP,OAAK,KAAK,iBAAiB,KAAK;AAChC,MAAI,KAAK,mBACP,sBAAqB,KAAK,mBAAmB;;CAIjD,mBAAmB;AACjB,OAAK,KAAK,iBAAiB,KAAK;AAChC,MAAI,KAAK,mBACP,sBAAqB,KAAK,mBAAmB;;CAIjD,gBAAsB;AAEpB,OAAK,eAAgB,KAAK,KAAa,cAAc;AACrD,OAAK,eAAe;;CAgBtB,cAAoB;;AAQf,sBAAMC,oBAAkB,QAAQ,WAAW,CAAC;;;iBAwJF,IAAI,aAAa;qBAGlD;oBAGD;;;gBA7JG,CACd,GAAG;;;;;;;;;;;;;;;;;MAkBJ;;CAQD,IAAI,YAAY;AACd,SAAO,KAAK,WAAW,KAAK,cAAc,mBAAmB,KAAK;;;;;CAMpE,AAAU,iBAOI;AAEZ,MACG,KAAK,QAAgB,YAAY,iBACjC,KAAK,QAAgB,SAAS,aAAa,KAAK,cAEjD,QAAO;AAET,MAAI,KAAK,mBAAmB,QAAS,QAAO;AAC5C,MAAI,KAAK,mBAAmB,QAAS,QAAO;AAC5C,MAAI,KAAK,mBAAmB,QAAS,QAAO;AAC5C,MAAI,KAAK,mBAAmB,OAAQ,QAAO;AAC3C,MAAI,KAAK,mBAAmB,YAAa,QAAO;AAChD,SAAO;;;;;CAMT,AAAU,sBAA8B;AAEtC,SAAO,oBADM,KAAK,gBAAgB,EACD,KAAK;;;;;CAMxC,AAAU,yBAAiC;AAEzC,UADa,KAAK,gBAAgB,EAClC;GACE,KAAK,QACH,QAAO;GACT,KAAK,QACH,QAAO;GACT,KAAK,QACH,QAAO;GACT,KAAK,OACH,QAAO;GACT,KAAK,WACH,QAAO;GACT,KAAK,YACH,QAAO;GACT,QACE,QAAO;;;;;;CAOb,AAAU,iBAAkD;AAE1D,UADa,KAAK,gBAAgB,EAClC;GACE,KAAK,QACH,QAAO,aAAa,MAAM,WAAW,GAAG;GAC1C,KAAK,QACH,QAAO,aAAa,MAAM,aAAa,GAAG;GAC5C,KAAK,QACH,QAAO,aAAa,MAAM,OAAO,GAAG;GACtC,KAAK,OACH,QAAO,aAAa,MAAM,OAAO,GAAG;GACtC,KAAK,WACH,QAAO,aAAa,MAAM,WAAW,GAAG;GAC1C,KAAK,YACH,QAAO,aAAa,MAAM,WAAW,GAAG;GAC1C,QACE,QAAO;;;;;;CAOb,AAAU,eAAe,IAAoB;AAC3C,MAAI,KAAK,IACP,QAAO,GAAG,KAAK,MAAM,GAAG,CAAC;AAG3B,SAAO,IADU,KAAK,KAAM,QAAQ,EAAE,CACpB;;;;;CAMpB,AAAU,iBAAyB;EACjC,MAAM,YAAa,KAAK,SAAyB,MAAM;EACvD,MAAM,OAAO,KAAK,gBAAgB;EAClC,MAAM,WAAW,KAAK,eAAe,KAAK,QAAQ,cAAc,EAAE;EAClE,MAAM,YAAY,KAAK,eAAe,KAAK,QAAQ,eAAe,EAAE;EACpE,MAAM,UAAU,KAAK,gBAClB,KAAK,QAAQ,eAAe,MAAM,KAAK,QAAQ,cAAc,GAC/D;EAED,MAAM,QAAQ,EAAE;AAChB,MAAI,UAAW,OAAM,KAAK,UAAU;AACpC,QAAM,KAAK,GAAG,KAAK,KAAK,WAAW;AACnC,MAAI,KAAK,QAAQ,cAAc,EAC7B,OAAM,KAAK,GAAG,UAAU,KAAK,UAAU;AAIzC,MAAI,SAAS,aAAa;GACxB,MAAM,OAAQ,KAAK,QAAgB,QAAQ;AAC3C,SAAM,KAAK,SAAS,OAAO;;AAG7B,SAAO,MAAM,KAAK,MAAM;;CAkB1B,IAAI,eAAe;EAIjB,MAAM,aADU,KAAK,QAAQ;AAG7B,SAAO;GACL,UAAU;GACV,MAAM,GAAG,KAAK,cAAc,WAAW;GACvC,OAAO,GAAG,KAAK,eAAe,KAAK,QAAQ,uBAAuB,KAAK,QAAQ,YAAY;GAC5F;;CAGH,IAAI,oBAAoB;AAGtB,SAAO;GACL,OAAO,GAAG,KAAK,cAAc,KAAK,QAAQ,WAAW;GACrD,MAAM;GACP;;CAGH,AAAU,iBAAiB,GAAwC;EACjE,MAAM,EAAE,MAAM,UAAU,EAAE;AAE1B,OAAK,QAAQ,cAAc,MAAM;AACjC,OAAK,QAAQ,YAAY,MAAM;AAE/B,OAAK,cACH,IAAI,YAAY,qBAAqB;GACnC,QAAQ;IACN,WAAW,KAAK,QAAQ,MAAM;IAC9B;IACA;IACD;GACD,SAAS;GACT,UAAU;GACX,CAAC,CACH;;CAGH,WAA4C;AAC1C,SAAO;;CAGT,aAAa;AAGX,SAAO,EAAE;;CA+CX,iBAA6E;AAC3E,SAAO;;CAGT,SAAS;EACP,MAAM,YAAa,KAAK,QAAwB,MAAM;EACtD,MAAM,cAAc,KAAK,QAAQ,eAAe;EAChD,MAAM,YAAY,KAAK,QAAQ,aAAa;EAC5C,MAAM,sBAAsB,KAAK,QAAQ,uBAAuB,KAAK,QAAQ;EAE7E,MAAM,YAAY,KAAK,qBAAqB;AAE5C,SAAO,IAAI,cAAc,SAAS,KAAK,aAAa,CAAC;;wBAEjC,KAAK,UAAU;4BACX;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB,KAAK;IAE1C;4BACkB;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB;IAErC;;;0BAGgB,KAAK,UAAU;;kBAEvB,SAAS;GACf,GAAG,KAAK;GACR,QAAQ;GACR,iBAAiB,KAAK,YAAY,6BAA6B;GAC/D,YAAY,aAAa;GAC1B,CAAC,CAAC;mBACM,KAAK,gBAAgB,CAAC;;YAE7B,KAAK,YAAY,CAAC;YAClB,KAAK,UAAU,CAAC;YAEhB,KAAK,aACD,IAAI;;6BAES,UAAU;gCACP,KAAK,YAAY;gCACjB,YAAY;8BACd,UAAU;wCACA,oBAAoB;+BAC7B,KAAK,iBAAiB;qCAErC,QACL;;;QAGH,KAAK,gBAAgB,CAAC;;;CAM5B,OAAO,mBAAsE;AAC3E,MAAI,kBAAkB,IAAI,UAAU,IAAI,KAAK,mBAAmB,YAAY;AAC1E,QAAK,iBAAiB,QAAQ;AAC9B,QAAK,kBAAkB,IAAI,uBAAuB,KAAK,SAAS,KAAK;;AAEvE,QAAM,OAAO,kBAAkB;;;YAhThC,QAAQ;CAAE,SAAS;CAAc,WAAW;CAAM,CAAC;YAGnD,QAAQ;CAAE,SAAS;CAAuB,WAAW;CAAM,CAAC;YA8H5D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC;YAGtD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAe,CAAC;YAGrD,SAAS;CAAE,MAAM;CAAO,WAAW;CAAO,CAAC;YAG3C,SAAS;CAAE,MAAM;CAAO,WAAW;CAAO,CAAC;wBApK7C,cAAc,gBAAgB"}

package/dist/gui/timeline/tracks/VideoTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTrack.js","names":["EFVideoTrack","#checkAndLoadAudioWaveform","#lastSrc","#abortController","#scheduleRender","#renderRequested","#renderAudioOverlay","#drawAudioWaveform","#getTrackHeight"],"sources":["../../../../src/gui/timeline/tracks/VideoTrack.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\n\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { extractWaveformData, type WaveformData } from \"./waveformUtils.js\";\nimport {\n  timelineStateContext,\n  type TimelineState,\n} from \"../timelineStateContext.js\";\nimport \"./EFThumbnailStrip.js\";\n\n/** Padding for virtual rendering */\nconst VIRTUAL_RENDER_PADDING_PX = 100;\n\n/** Height of thumbnail section */\nconst THUMBNAIL_HEIGHT = 24;\n/** Height of audio section when present */\nconst AUDIO_SECTION_HEIGHT = 14;\n\n@customElement(\"ef-video-track\")\nexport class EFVideoTrack extends TrackItem {\n  static override styles = [\n    ...TrackItem.styles,\n    css`\n      .video-content {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n      .thumbnail-section {\n        position: relative;\n        flex: 0 0 ${THUMBNAIL_HEIGHT}px;\n        height: ${THUMBNAIL_HEIGHT}px;\n        background: var(--ef-color-bg-inset);\n      }\n      .audio-section {\n        position: relative;\n        flex: 0 0 ${AUDIO_SECTION_HEIGHT}px;\n        height: ${AUDIO_SECTION_HEIGHT}px;\n        background: var(--ef-color-bg-elevated);\n        border-top: 1px solid var(--ef-color-border-subtle);\n        overflow: hidden;\n      }\n      .audio-section-canvas {\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n    `,\n  ];\n\n  audioCanvasRef = createRef<HTMLCanvasElement>();\n\n  @consume({ context: timelineStateContext, subscribe: true })\n  @state()\n  private _timelineState?: TimelineState;\n\n  @state()\n  private _waveformData: WaveformData | null = null;\n\n  @state()\n  private _hasAudio = false;\n\n  #lastSrc: string | null = null;\n  #abortController: AbortController | null = null;\n  #renderRequested = false;\n\n  /**\n   * Check if video has audio and load waveform data\n   */\n  async #checkAndLoadAudioWaveform(): Promise<void> {\n    const video = this.element as EFVideo;\n    const src = video?.src;\n\n    if (!src || src === this.#lastSrc) {\n      return;\n    }\n\n    this.#lastSrc = src;\n    this._hasAudio = false;\n    this._waveformData = null;\n\n    // Cancel any in-progress load\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n\n    try {\n      // Wait for media engine to determine if video has audio\n      if (video.mediaEngineTask) {\n        const mediaEngine = await video.mediaEngineTask.taskComplete;\n        if (mediaEngine?.tracks.audio) {\n          this._hasAudio = true;\n\n          const waveformData = await extractWaveformData(\n            video,\n            this.#abortController.signal,\n          );\n\n          if (waveformData) {\n            this._waveformData = waveformData;\n            this.#scheduleRender();\n          }\n        }\n      }\n    } catch (error) {\n      if (!(error instanceof DOMException && error.name === \"AbortError\")) {\n        // Silently fail - audio overlay is optional\n      }\n    }\n  }\n\n  #scheduleRender(): void {\n    if (this.#renderRequested) return;\n    this.#renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this.#renderRequested = false;\n      this.#renderAudioOverlay();\n    });\n  }\n\n  #renderAudioOverlay(): void {\n    const canvas = this.audioCanvasRef.value;\n    const waveformData = this._waveformData;\n\n    if (!canvas || !waveformData || !this._hasAudio) return;\n\n    const video = this.element as EFVideo;\n    const durationMs = video.durationMs ?? 0;\n    if (durationMs === 0) return;\n\n    const pixelsPerMs = this._timelineState?.pixelsPerMs ?? this.pixelsPerMs;\n    const trackWidthPx = durationMs * pixelsPerMs;\n    const trackStartMs = video.startTimeMs ?? 0;\n    const trackStartPx = trackStartMs * pixelsPerMs;\n\n    // Get scroll/viewport info\n    const scrollLeft = this._timelineState?.viewportScrollLeft ?? 0;\n    const viewportWidth = this._timelineState?.viewportWidth ?? 800;\n\n    // Calculate visible region\n    const visibleLeftPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleRightPx =\n      scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n    const trackEndPx = trackStartPx + trackWidthPx;\n\n    // Check visibility\n    if (trackEndPx < visibleLeftPx || trackStartPx > visibleRightPx) {\n      canvas.style.display = \"none\";\n      return;\n    }\n    canvas.style.display = \"block\";\n\n    // Calculate visible portion within track\n    const visibleStartInTrack = Math.max(0, visibleLeftPx - trackStartPx);\n    const visibleEndInTrack = Math.min(\n      trackWidthPx,\n      visibleRightPx - trackStartPx,\n    );\n    const visibleWidthPx = visibleEndInTrack - visibleStartInTrack;\n\n    if (visibleWidthPx <= 0) return;\n\n    const height = AUDIO_SECTION_HEIGHT;\n    const dpr = window.devicePixelRatio || 1;\n\n    // Set canvas size\n    const targetWidth = Math.ceil(visibleWidthPx * dpr);\n    const targetHeight = Math.ceil(height * dpr);\n\n    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n      canvas.width = targetWidth;\n      canvas.height = targetHeight;\n    }\n\n    canvas.style.left = `${visibleStartInTrack}px`;\n    canvas.style.width = `${visibleWidthPx}px`;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0, 0, visibleWidthPx, height);\n\n    // Calculate time range to render\n    const sourceInMs = video.sourceStartMs ?? 0;\n    const timeStartMs = sourceInMs + visibleStartInTrack / pixelsPerMs;\n    const timeEndMs = sourceInMs + visibleEndInTrack / pixelsPerMs;\n\n    // Draw waveform in dedicated section\n    this.#drawAudioWaveform(\n      ctx,\n      waveformData,\n      visibleWidthPx,\n      height,\n      timeStartMs,\n      timeEndMs,\n    );\n  }\n\n  #drawAudioWaveform(\n    ctx: CanvasRenderingContext2D,\n    waveformData: WaveformData,\n    width: number,\n    height: number,\n    startMs: number,\n    endMs: number,\n  ): void {\n    const { peaks, samplesPerSecond } = waveformData;\n\n    const startSample = Math.floor((startMs / 1000) * samplesPerSecond);\n    const endSample = Math.ceil((endMs / 1000) * samplesPerSecond);\n    const sampleCount = endSample - startSample;\n\n    if (sampleCount <= 0 || width <= 0) return;\n\n    const centerY = height / 2;\n    const halfHeight = height / 2 - 1;\n    const pixelsPerSample = width / sampleCount;\n\n    // Draw filled waveform\n    ctx.fillStyle =\n      getComputedStyle(this).getPropertyValue(\"--ef-color-success\").trim() ||\n      \"rgb(74, 222, 128)\";\n    ctx.globalAlpha = 0.9;\n    ctx.beginPath();\n\n    // Draw top half (max values) left to right\n    for (let i = 0; i <= sampleCount; i++) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n      if (peakIndex + 1 >= peaks.length) break;\n\n      const maxValue = peaks[peakIndex + 1] ?? 0;\n      const px = i * pixelsPerSample;\n      const py = centerY - maxValue * halfHeight;\n\n      if (i === 0) {\n        ctx.moveTo(px, py);\n      } else {\n        ctx.lineTo(px, py);\n      }\n    }\n\n    // Draw bottom half (min values) right to left\n    for (let i = sampleCount; i >= 0; i--) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n      if (peakIndex >= peaks.length) continue;\n\n      const minValue = peaks[peakIndex] ?? 0;\n      const px = i * pixelsPerSample;\n      const py = centerY - minValue * halfHeight;\n\n      ctx.lineTo(px, py);\n    }\n\n    ctx.closePath();\n    ctx.fill();\n\n    // Draw center line\n    ctx.globalAlpha = 0.3;\n    ctx.strokeStyle =\n      getComputedStyle(this).getPropertyValue(\"--ef-color-success\").trim() ||\n      \"rgb(74, 222, 128)\";\n    ctx.lineWidth = 1;\n    ctx.beginPath();\n    ctx.moveTo(0, centerY);\n    ctx.lineTo(width, centerY);\n    ctx.stroke();\n\n    ctx.globalAlpha = 1;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.#checkAndLoadAudioWaveform();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#abortController?.abort();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    const video = this.element as EFVideo;\n    if (video?.src !== this.#lastSrc) {\n      this.#checkAndLoadAudioWaveform();\n    }\n\n    if (\n      changedProperties.has(\"_timelineState\") ||\n      changedProperties.has(\"_waveformData\")\n    ) {\n      this.#scheduleRender();\n    }\n\n    // Always schedule render after update\n    if (this._waveformData) {\n      this.#scheduleRender();\n    }\n  }\n\n  /**\n   * Get the total track height based on whether audio is present\n   */\n  #getTrackHeight(): number {\n    if (this._hasAudio && this._waveformData) {\n      return THUMBNAIL_HEIGHT + AUDIO_SECTION_HEIGHT;\n    }\n    return THUMBNAIL_HEIGHT;\n  }\n\n  override render() {\n    const video = this.element as EFVideo;\n    const elementId = (this.element as HTMLElement).id || \"\";\n\n    // Don't render thumbnail strip until we have a valid EFVideo element\n    if (!(video instanceof EFVideo)) {\n      return html``;\n    }\n    const trimStartMs = this.element.trimStartMs ?? 0;\n    const trimEndMs = this.element.trimEndMs ?? 0;\n    const intrinsicDurationMs =\n      this.element.intrinsicDurationMs ?? this.element.durationMs;\n\n    const trackHeight = this.#getTrackHeight();\n    const hasAudioSection = this._hasAudio && this._waveformData;\n\n    const typeColor = this.getElementTypeColor();\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: `${trackHeight}px`,\n            backgroundColor: this.isFocused\n              ? \"color-mix(in srgb, var(--ef-color-primary) 25%, transparent)\"\n              : \"var(--ef-color-bg-inset)\",\n            borderLeft: `3px solid ${typeColor}`,\n            borderRadius: \"3px\",\n          })}\n        >\n          <div class=\"video-content\">\n            <div class=\"thumbnail-section\">\n              <ef-thumbnail-strip\n                .targetElement=${this.element}\n                thumbnail-height=${THUMBNAIL_HEIGHT}\n                thumbnail-spacing-px=\"48\"\n                pixels-per-ms=${this.pixelsPerMs}\n              ></ef-thumbnail-strip>\n            </div>\n            ${\n              hasAudioSection\n                ? html`<div class=\"audio-section\">\n                  <canvas ${ref(this.audioCanvasRef)} class=\"audio-section-canvas\"></canvas>\n                </div>`\n                : nothing\n            }\n          </div>\n          ${\n            this.enableTrim\n              ? html`<ef-trim-handles\n                element-id=${elementId}\n                pixels-per-ms=${this.pixelsPerMs}\n                trim-start-ms=${trimStartMs}\n                trim-end-ms=${trimEndMs}\n                intrinsic-duration-ms=${intrinsicDurationMs}\n                @trim-change=${this.handleTrimChange}\n              ></ef-trim-handles>`\n              : nothing\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-video-track\": EFVideoTrack;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"VideoTrack.js","names":["EFVideoTrack","#checkAndLoadAudioWaveform","#lastSrc","#abortController","#scheduleRender","#renderRequested","#renderAudioOverlay","#drawAudioWaveform","#getTrackHeight"],"sources":["../../../../src/gui/timeline/tracks/VideoTrack.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\n\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { extractWaveformData, type WaveformData } from \"./waveformUtils.js\";\nimport { timelineStateContext, type TimelineState } from \"../timelineStateContext.js\";\nimport \"./EFThumbnailStrip.js\";\n\n/** Padding for virtual rendering */\nconst VIRTUAL_RENDER_PADDING_PX = 100;\n\n/** Height of thumbnail section */\nconst THUMBNAIL_HEIGHT = 24;\n/** Height of audio section when present */\nconst AUDIO_SECTION_HEIGHT = 14;\n\n@customElement(\"ef-video-track\")\nexport class EFVideoTrack extends TrackItem {\n  static override styles = [\n    ...TrackItem.styles,\n    css`\n      .video-content {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n      .thumbnail-section {\n        position: relative;\n        flex: 0 0 ${THUMBNAIL_HEIGHT}px;\n        height: ${THUMBNAIL_HEIGHT}px;\n        background: var(--ef-color-bg-inset);\n      }\n      .audio-section {\n        position: relative;\n        flex: 0 0 ${AUDIO_SECTION_HEIGHT}px;\n        height: ${AUDIO_SECTION_HEIGHT}px;\n        background: var(--ef-color-bg-elevated);\n        border-top: 1px solid var(--ef-color-border-subtle);\n        overflow: hidden;\n      }\n      .audio-section-canvas {\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n    `,\n  ];\n\n  audioCanvasRef = createRef<HTMLCanvasElement>();\n\n  @consume({ context: timelineStateContext, subscribe: true })\n  @state()\n  private _timelineState?: TimelineState;\n\n  @state()\n  private _waveformData: WaveformData | null = null;\n\n  @state()\n  private _hasAudio = false;\n\n  #lastSrc: string | null = null;\n  #abortController: AbortController | null = null;\n  #renderRequested = false;\n\n  /**\n   * Check if video has audio and load waveform data\n   */\n  async #checkAndLoadAudioWaveform(): Promise<void> {\n    const video = this.element as EFVideo;\n    const src = video?.src;\n\n    if (!src || src === this.#lastSrc) {\n      return;\n    }\n\n    this.#lastSrc = src;\n    this._hasAudio = false;\n    this._waveformData = null;\n\n    // Cancel any in-progress load\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n\n    try {\n      // Wait for media engine to determine if video has audio\n      if (video.mediaEngineTask) {\n        const mediaEngine = await video.mediaEngineTask.taskComplete;\n        if (mediaEngine?.tracks.audio) {\n          this._hasAudio = true;\n\n          const waveformData = await extractWaveformData(video, this.#abortController.signal);\n\n          if (waveformData) {\n            this._waveformData = waveformData;\n            this.#scheduleRender();\n          }\n        }\n      }\n    } catch (error) {\n      if (!(error instanceof DOMException && error.name === \"AbortError\")) {\n        // Silently fail - audio overlay is optional\n      }\n    }\n  }\n\n  #scheduleRender(): void {\n    if (this.#renderRequested) return;\n    this.#renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this.#renderRequested = false;\n      this.#renderAudioOverlay();\n    });\n  }\n\n  #renderAudioOverlay(): void {\n    const canvas = this.audioCanvasRef.value;\n    const waveformData = this._waveformData;\n\n    if (!canvas || !waveformData || !this._hasAudio) return;\n\n    const video = this.element as EFVideo;\n    const durationMs = video.durationMs ?? 0;\n    if (durationMs === 0) return;\n\n    const pixelsPerMs = this._timelineState?.pixelsPerMs ?? this.pixelsPerMs;\n    const trackWidthPx = durationMs * pixelsPerMs;\n    const trackStartMs = video.startTimeMs ?? 0;\n    const trackStartPx = trackStartMs * pixelsPerMs;\n\n    // Get scroll/viewport info\n    const scrollLeft = this._timelineState?.viewportScrollLeft ?? 0;\n    const viewportWidth = this._timelineState?.viewportWidth ?? 800;\n\n    // Calculate visible region\n    const visibleLeftPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleRightPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n    const trackEndPx = trackStartPx + trackWidthPx;\n\n    // Check visibility\n    if (trackEndPx < visibleLeftPx || trackStartPx > visibleRightPx) {\n      canvas.style.display = \"none\";\n      return;\n    }\n    canvas.style.display = \"block\";\n\n    // Calculate visible portion within track\n    const visibleStartInTrack = Math.max(0, visibleLeftPx - trackStartPx);\n    const visibleEndInTrack = Math.min(trackWidthPx, visibleRightPx - trackStartPx);\n    const visibleWidthPx = visibleEndInTrack - visibleStartInTrack;\n\n    if (visibleWidthPx <= 0) return;\n\n    const height = AUDIO_SECTION_HEIGHT;\n    const dpr = window.devicePixelRatio || 1;\n\n    // Set canvas size\n    const targetWidth = Math.ceil(visibleWidthPx * dpr);\n    const targetHeight = Math.ceil(height * dpr);\n\n    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n      canvas.width = targetWidth;\n      canvas.height = targetHeight;\n    }\n\n    canvas.style.left = `${visibleStartInTrack}px`;\n    canvas.style.width = `${visibleWidthPx}px`;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0, 0, visibleWidthPx, height);\n\n    // Calculate time range to render\n    const sourceInMs = video.sourceStartMs ?? 0;\n    const timeStartMs = sourceInMs + visibleStartInTrack / pixelsPerMs;\n    const timeEndMs = sourceInMs + visibleEndInTrack / pixelsPerMs;\n\n    // Draw waveform in dedicated section\n    this.#drawAudioWaveform(ctx, waveformData, visibleWidthPx, height, timeStartMs, timeEndMs);\n  }\n\n  #drawAudioWaveform(\n    ctx: CanvasRenderingContext2D,\n    waveformData: WaveformData,\n    width: number,\n    height: number,\n    startMs: number,\n    endMs: number,\n  ): void {\n    const { peaks, samplesPerSecond } = waveformData;\n\n    const startSample = Math.floor((startMs / 1000) * samplesPerSecond);\n    const endSample = Math.ceil((endMs / 1000) * samplesPerSecond);\n    const sampleCount = endSample - startSample;\n\n    if (sampleCount <= 0 || width <= 0) return;\n\n    const centerY = height / 2;\n    const halfHeight = height / 2 - 1;\n    const pixelsPerSample = width / sampleCount;\n\n    // Draw filled waveform\n    ctx.fillStyle =\n      getComputedStyle(this).getPropertyValue(\"--ef-color-success\").trim() || \"rgb(74, 222, 128)\";\n    ctx.globalAlpha = 0.9;\n    ctx.beginPath();\n\n    // Draw top half (max values) left to right\n    for (let i = 0; i <= sampleCount; i++) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n      if (peakIndex + 1 >= peaks.length) break;\n\n      const maxValue = peaks[peakIndex + 1] ?? 0;\n      const px = i * pixelsPerSample;\n      const py = centerY - maxValue * halfHeight;\n\n      if (i === 0) {\n        ctx.moveTo(px, py);\n      } else {\n        ctx.lineTo(px, py);\n      }\n    }\n\n    // Draw bottom half (min values) right to left\n    for (let i = sampleCount; i >= 0; i--) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n      if (peakIndex >= peaks.length) continue;\n\n      const minValue = peaks[peakIndex] ?? 0;\n      const px = i * pixelsPerSample;\n      const py = centerY - minValue * halfHeight;\n\n      ctx.lineTo(px, py);\n    }\n\n    ctx.closePath();\n    ctx.fill();\n\n    // Draw center line\n    ctx.globalAlpha = 0.3;\n    ctx.strokeStyle =\n      getComputedStyle(this).getPropertyValue(\"--ef-color-success\").trim() || \"rgb(74, 222, 128)\";\n    ctx.lineWidth = 1;\n    ctx.beginPath();\n    ctx.moveTo(0, centerY);\n    ctx.lineTo(width, centerY);\n    ctx.stroke();\n\n    ctx.globalAlpha = 1;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.#checkAndLoadAudioWaveform();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#abortController?.abort();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    const video = this.element as EFVideo;\n    if (video?.src !== this.#lastSrc) {\n      this.#checkAndLoadAudioWaveform();\n    }\n\n    if (changedProperties.has(\"_timelineState\") || changedProperties.has(\"_waveformData\")) {\n      this.#scheduleRender();\n    }\n\n    // Always schedule render after update\n    if (this._waveformData) {\n      this.#scheduleRender();\n    }\n  }\n\n  /**\n   * Get the total track height based on whether audio is present\n   */\n  #getTrackHeight(): number {\n    if (this._hasAudio && this._waveformData) {\n      return THUMBNAIL_HEIGHT + AUDIO_SECTION_HEIGHT;\n    }\n    return THUMBNAIL_HEIGHT;\n  }\n\n  override render() {\n    const video = this.element as EFVideo;\n    const elementId = (this.element as HTMLElement).id || \"\";\n\n    // Don't render thumbnail strip until we have a valid EFVideo element\n    if (!(video instanceof EFVideo)) {\n      return html``;\n    }\n    const trimStartMs = this.element.trimStartMs ?? 0;\n    const trimEndMs = this.element.trimEndMs ?? 0;\n    const intrinsicDurationMs = this.element.intrinsicDurationMs ?? this.element.durationMs;\n\n    const trackHeight = this.#getTrackHeight();\n    const hasAudioSection = this._hasAudio && this._waveformData;\n\n    const typeColor = this.getElementTypeColor();\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: `${trackHeight}px`,\n            backgroundColor: this.isFocused\n              ? \"color-mix(in srgb, var(--ef-color-primary) 25%, transparent)\"\n              : \"var(--ef-color-bg-inset)\",\n            borderLeft: `3px solid ${typeColor}`,\n            borderRadius: \"3px\",\n          })}\n        >\n          <div class=\"video-content\">\n            <div class=\"thumbnail-section\">\n              <ef-thumbnail-strip\n                .targetElement=${this.element}\n                thumbnail-height=${THUMBNAIL_HEIGHT}\n                thumbnail-spacing-px=\"48\"\n                pixels-per-ms=${this.pixelsPerMs}\n              ></ef-thumbnail-strip>\n            </div>\n            ${\n              hasAudioSection\n                ? html`<div class=\"audio-section\">\n                  <canvas ${ref(this.audioCanvasRef)} class=\"audio-section-canvas\"></canvas>\n                </div>`\n                : nothing\n            }\n          </div>\n          ${\n            this.enableTrim\n              ? html`<ef-trim-handles\n                element-id=${elementId}\n                pixels-per-ms=${this.pixelsPerMs}\n                trim-start-ms=${trimStartMs}\n                trim-end-ms=${trimEndMs}\n                intrinsic-duration-ms=${intrinsicDurationMs}\n                @trim-change=${this.handleTrimChange}\n              ></ef-trim-handles>`\n              : nothing\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-video-track\": EFVideoTrack;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/timeline/tracks/renderTrackChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTrackChildren.js","names":[],"sources":["../../../../src/gui/timeline/tracks/renderTrackChildren.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from \"lit\";\nimport { EFAudio } from \"../../../elements/EFAudio.js\";\nimport {\n  EFCaptions,\n  EFCaptionsActiveWord,\n} from \"../../../elements/EFCaptions.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../../elements/EFTextSegment.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { EFWaveform } from \"../../../elements/EFWaveform.js\";\nimport { shouldRenderElement } from \"../../hierarchy/EFHierarchyItem.js\";\n\n// NOTE: Track components are NOT imported here to avoid circular dependencies.\n// They must be pre-loaded elsewhere before this module is used.\n// The custom elements (ef-audio-track, ef-video-track, etc.) are rendered\n// via Lit templates which will work as long as the elements are registered.\n// See preloadTracks.ts for the track component initialization.\n\nexport function renderTrackChildren(\n  children: Element[],\n  pixelsPerMs: number,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n  enableTrim = false,\n  useAbsolutePosition = false,\n): Array<TemplateResult<1> | typeof nothing> {\n  return children.map((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      >\n      </ef-timegroup-track>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-track>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-track>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-track>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-track>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-track>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-track>`;\n    }\n    if (child instanceof EFTextSegment) {\n      return html`<ef-text-segment-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-segment-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-SEGMENT\") {\n      return html`<ef-captions-segment-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-segment-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-BEFORE-ACTIVE-WORD\") {\n      return html`<ef-captions-before-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-before-word-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-AFTER-ACTIVE-WORD\") {\n      return html`<ef-captions-after-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-after-word-track>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-track>`;\n    }\n    return nothing;\n  });\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,oBACd,UACA,aACA,eACA,eACA,oBAAoB,OACpB,aAAa,OACb,sBAAsB,OACqB;AAC3C,QAAO,SAAS,KAAK,UAAU;AAC7B,MACE,CAAC,qBACD,CAAC,oBAAoB,OAAO,eAAe,cAAc,CAEzD,QAAO;AAGT,MAAI,iBAAiB,YACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;;AAInC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,WACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,qBACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,OACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,cACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,sBACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,iCACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,gCACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,WACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,SAAO;GACP"}
+{"version":3,"file":"renderTrackChildren.js","names":[],"sources":["../../../../src/gui/timeline/tracks/renderTrackChildren.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from \"lit\";\nimport { EFAudio } from \"../../../elements/EFAudio.js\";\nimport { EFCaptions, EFCaptionsActiveWord } from \"../../../elements/EFCaptions.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../../elements/EFTextSegment.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { EFWaveform } from \"../../../elements/EFWaveform.js\";\nimport { shouldRenderElement } from \"../../hierarchy/EFHierarchyItem.js\";\n\n// NOTE: Track components are NOT imported here to avoid circular dependencies.\n// They must be pre-loaded elsewhere before this module is used.\n// The custom elements (ef-audio-track, ef-video-track, etc.) are rendered\n// via Lit templates which will work as long as the elements are registered.\n// See preloadTracks.ts for the track component initialization.\n\nexport function renderTrackChildren(\n  children: Element[],\n  pixelsPerMs: number,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n  enableTrim = false,\n  useAbsolutePosition = false,\n): Array<TemplateResult<1> | typeof nothing> {\n  return children.map((child) => {\n    if (!skipRootFiltering && !shouldRenderElement(child, hideSelectors, showSelectors)) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      >\n      </ef-timegroup-track>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-track>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-track>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-track>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-track>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-track>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-track>`;\n    }\n    if (child instanceof EFTextSegment) {\n      return html`<ef-text-segment-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-segment-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-SEGMENT\") {\n      return html`<ef-captions-segment-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-segment-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-BEFORE-ACTIVE-WORD\") {\n      return html`<ef-captions-before-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-before-word-track>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-AFTER-ACTIVE-WORD\") {\n      return html`<ef-captions-after-word-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-after-word-track>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-track\n        .element=${child}\n        pixels-per-ms=${pixelsPerMs}\n        ?enable-trim=${enableTrim}\n        ?use-absolute-position=${useAbsolutePosition}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-track>`;\n    }\n    return nothing;\n  });\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,oBACd,UACA,aACA,eACA,eACA,oBAAoB,OACpB,aAAa,OACb,sBAAsB,OACqB;AAC3C,QAAO,SAAS,KAAK,UAAU;AAC7B,MAAI,CAAC,qBAAqB,CAAC,oBAAoB,OAAO,eAAe,cAAc,CACjF,QAAO;AAGT,MAAI,iBAAiB,YACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;;AAInC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,QACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,WACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,qBACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,OACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,cACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,sBACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,iCACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,MAAM,YAAY,gCACpB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,MAAI,iBAAiB,WACnB,QAAO,IAAI;mBACE,MAAM;wBACD,YAAY;uBACb,WAAW;iCACD,oBAAoB;yBAC5B,cAAc;yBACd,cAAc;;AAGnC,SAAO;GACP"}