@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/elements/EFThumbnailStrip.d.ts

@@ -1,88 +1,150 @@
 import { EFVideo } from "./EFVideo.js";
-import * as lit27 from "lit";
+import { EFTimegroup } from "./EFTimegroup.js";
+import * as lit31 from "lit";
 import { LitElement } from "lit";
-import * as lit_html24 from "lit-html";
-import * as lit_html_directives_ref6 from "lit-html/directives/ref";
+import * as lit_html30 from "lit-html";
+import * as lit_html_directives_ref4 from "lit-html/directives/ref";
 
 //#region src/elements/EFThumbnailStrip.d.ts
 declare class EFThumbnailStrip extends LitElement {
-  static styles: lit27.CSSResult[];
-  canvasRef: lit_html_directives_ref6.Ref<HTMLCanvasElement>;
+  static styles: lit31.CSSResult[];
+  canvasRef: lit_html_directives_ref4.Ref<HTMLCanvasElement>;
+  target: string;
+  thumbnailWidth: number;
+  gap: number;
+  startTimeMs?: number;
+  endTimeMs?: number;
+  useIntrinsicDuration: boolean;
+  pixelsPerMs: number;
+  /** Timeline state context for viewport info */
+  private _timelineState?;
+  /** Target element controller */
   private _targetController;
   private _targetElement;
-  get targetElement(): EFVideo | null;
-  set targetElement(value: EFVideo | null);
-  target: string;
+  get targetElement(): EFVideo | EFTimegroup | null;
+  set targetElement(value: EFVideo | EFTimegroup | null);
+  /** Host element dimensions */
+  private _width;
+  private _height;
+  /** Scroll container reference */
+  private _scrollContainer;
+  private _currentScrollLeft;
   /**
-   * Desired thumbnail width in pixels (height is determined by aspect ratio)
-   * Number of thumbnails is derived from this and available strip width
+   * Offset from scroll container's left edge to this element's track.
+   * Used for sticky positioning when track doesn't start at x=0 (e.g., labels column).
    */
-  thumbnailWidth: number;
+  private _trackLeftOffset;
+  /** Current thumbnail slots */
+  private _thumbnailSlots;
+  /** Capture in progress flag */
+  private _captureInProgress;
+  /** Resize observer */
+  private _resizeObserver?;
+  /** Mutation observer for target element changes */
+  private _mutationObserver?;
+  /** Animation frame for scroll updates */
+  private _scrollFrame?;
+  /** Render request tracking */
+  private _renderRequested;
+  /** Track if any thumbnails have been loaded (for ready event) */
+  private _hasLoadedThumbnails;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: Map<string | number | symbol, unknown>): void;
+  private _findScrollContainer;
   /**
-   * Custom start time in milliseconds relative to trimmed timeline (0 = start of trimmed portion)
-   * In trimmed mode: 0ms = sourceStartMs, 1000ms = sourceStartMs + 1000ms
-   * In intrinsic mode: 0ms = 0ms in source media
+   * Calculate the horizontal offset from scroll container's left edge to this element's track.
+   * This accounts for sticky labels or other elements that precede the track area.
+   *
+   * We look for our specific timeline elements (ef-timeline-row) and measure their label width.
    */
-  startTimeMs?: number;
+  private _calculateTrackOffset;
   /**
-   * Custom end time in milliseconds relative to trimmed timeline
-   * In trimmed mode: relative to sourceStartMs
-   * In intrinsic mode: relative to source media start (0ms)
+   * Find the ef-timeline-row ancestor by walking up through shadow DOM boundaries.
    */
-  endTimeMs?: number;
+  private _findTimelineRow;
   /**
-   * Use intrinsic duration instead of trimmed duration
-   * Accepts "true"/"false" string values or boolean
+   * Get the label width from an ef-timeline-row element.
+   * Queries the shadow root for .row-label and returns its width.
    */
-  useIntrinsicDuration: boolean;
-  private _stripWidth;
-  private _stripHeight;
-  private _pendingStripWidth;
-  private _thumbnailLayoutTask;
-  private set stripWidth(value);
-  private get stripWidth();
-  /**
-   * Run thumbnail render task directly with provided layout (bypasses task args dependency)
-   */
-  private runThumbnailRenderTask;
-  private resizeObserver?;
-  private _thumbnailUpdateInProgress;
-  private _pendingThumbnailUpdate;
-  private _videoPropertyObserver?;
-  updated(changedProperties: Map<string | number | symbol, unknown>): void;
+  private _getTimelineRowLabelWidth;
   /**
-   * Run thumbnail update with responsive debouncing (based on EFTimegroup currentTime pattern)
+   * Get this strip's absolute position in the timeline (pixels from timeline origin).
+   * Uses the target element's startTimeMs to determine position.
    */
-  private runThumbnailUpdate;
-  private thumbnailLayoutTask;
+  private _getStripTimelinePosition;
+  private _attachScrollListener;
+  private _detachScrollListener;
+  private _onScroll;
+  private _onContextScroll;
+  private get _viewportWidth();
+  private _setupTargetObserver;
+  private _scheduleRender;
   /**
-   * Calculate layout with a ready media engine
+   * Check if thumbnails are ready and dispatch event if not already done.
    */
-  private calculateLayoutWithMediaEngine;
+  private _checkAndDispatchReady;
   /**
-   * Generate layout from calculated time range
+   * Calculate thumbnail layout based on current dimensions and time range.
    */
-  private generateLayoutFromTimeRange;
-  private thumbnailRenderTask;
+  private _calculateLayout;
   /**
-   * Render thumbnails with provided layout (main rendering logic)
+   * Get effective time range for thumbnails.
    */
-  private renderThumbnails;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
+  private _getTimeRange;
+  /**
+   * Calculate effective thumbnail width (auto or specified).
+   */
+  private _getEffectiveThumbnailWidth;
+  /**
+   * Check cache for existing thumbnails.
+   */
+  private _checkCache;
+  /**
+   * Draw the canvas with current thumbnail state.
+   * Canvas is absolutely positioned at the visible portion of the strip.
+   * Uses virtual rendering - only draws thumbnails in the visible region.
+   */
+  private _drawCanvas;
+  /**
+   * Draw a thumbnail image with cover mode scaling.
+   */
+  private _drawThumbnailImage;
+  /**
+   * Load thumbnails that are visible in the current viewport.
+   */
+  private _loadVisibleThumbnails;
+  /**
+   * Capture thumbnails from a timegroup target.
+   */
+  private _captureTimegroupThumbnails;
+  /**
+   * Capture thumbnails from a video target using MediaEngine.
+   */
+  private _captureVideoThumbnails;
+  /**
+   * Convert canvas to ImageData.
+   */
+  private _canvasToImageData;
+  /**
+   * Returns a promise that resolves when thumbnails are ready.
+   * Resolves immediately if thumbnails are already loaded.
+   */
+  whenReady(): Promise<void>;
   /**
-   * Draw thumbnails to the canvas with cache hits and placeholders
+   * Check if thumbnails have been loaded.
    */
-  private drawThumbnails;
+  get isReady(): boolean;
   /**
-   * Load missing thumbnails using MediaEngine batch extraction
+   * Invalidate cached thumbnails for this element within a time range.
+   * Call this when content changes at specific times.
    */
-  private loadMissingThumbnails;
+  invalidateTimeRange(startTimeMs: number, endTimeMs: number): void;
   /**
-   * Convert Canvas to ImageData for caching
+   * Invalidate all cached thumbnails for this element.
    */
-  private canvasToImageData;
-  render(): lit_html24.TemplateResult<1>;
+  invalidateAll(): void;
+  render(): lit_html30.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {