@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioTrack.js","names":["EFAudioTrack","#loadWaveformData","#lastSrc","#abortController","#scheduleRender","#renderRequested","#renderWaveform","#getTrackPositionInfo","#hostHeight","#drawWaveformRegion","#resizeObserver","#renderPlaceholder"],"sources":["../../../../src/gui/timeline/tracks/AudioTrack.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 { EFAudio } from \"../../../elements/EFAudio.js\";\nimport { TrackItem } from \"./TrackItem.js\";\nimport {\n  extractWaveformData,\n  type WaveformData,\n} from \"./waveformUtils.js\";\nimport {\n  timelineStateContext,\n  type TimelineState,\n} from \"../timelineStateContext.js\";\n\n/** Padding in pixels to render beyond visible area (for smooth scrolling) */\nconst VIRTUAL_RENDER_PADDING_PX = 100;\n\n@customElement(\"ef-audio-track\")\nexport class EFAudioTrack extends TrackItem {\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .waveform-host {\n        position: absolute;\n        left: 0;\n        top: 2px;\n        right: 0;\n        bottom: 2px;\n        overflow: hidden;\n      }\n      .waveform-canvas {\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  /** Timeline state context for viewport info */\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 _isLoading = false;\n\n  #lastSrc: string | null = null;\n  #abortController: AbortController | null = null;\n  #resizeObserver?: ResizeObserver;\n  #renderRequested = false;\n  #hostHeight = 0;\n\n  /**\n   * Load waveform data when the audio source changes\n   */\n  async #loadWaveformData(): Promise<void> {\n    const audio = this.element as EFAudio;\n    const src = audio?.src;\n\n    // Skip if no source or same source already loaded\n    if (!src || src === this.#lastSrc) {\n      return;\n    }\n\n    this.#lastSrc = src;\n\n    // Cancel any in-progress load\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n\n    this._isLoading = true;\n\n    try {\n      const waveformData = await extractWaveformData(\n        src,\n        this.#abortController.signal,\n      );\n\n      if (waveformData) {\n        this._waveformData = waveformData;\n        this.#scheduleRender();\n      }\n    } catch (error) {\n      if (!(error instanceof DOMException && error.name === \"AbortError\")) {\n        console.warn(\"Failed to load waveform data:\", error);\n      }\n    } finally {\n      this._isLoading = false;\n    }\n  }\n\n  /**\n   * Schedule a canvas render on the next animation frame\n   */\n  #scheduleRender(): void {\n    if (this.#renderRequested) return;\n    this.#renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this.#renderRequested = false;\n      this.#renderWaveform();\n    });\n  }\n\n  /**\n   * Get the track's position info relative to timeline scroll\n   */\n  #getTrackPositionInfo(): {\n    trackStartPx: number;\n    trackWidthPx: number;\n    viewportScrollLeft: number;\n    viewportWidth: number;\n    pixelsPerMs: number;\n  } | null {\n    const audio = this.element as EFAudio;\n    const durationMs = audio.durationMs ?? 0;\n    if (durationMs === 0) return null;\n\n    const pixelsPerMs = this._timelineState?.pixelsPerMs ?? this.pixelsPerMs;\n    const trackWidthPx = durationMs * pixelsPerMs;\n\n    // Get track's absolute position from startTimeMs\n    const trackStartMs = audio.startTimeMs ?? 0;\n    const trackStartPx = trackStartMs * pixelsPerMs;\n\n    // Get viewport info from context\n    const viewportScrollLeft = this._timelineState?.viewportScrollLeft ?? 0;\n    const viewportWidth = this._timelineState?.viewportWidth ?? 800;\n\n    return {\n      trackStartPx,\n      trackWidthPx,\n      viewportScrollLeft,\n      viewportWidth,\n      pixelsPerMs,\n    };\n  }\n\n  /**\n   * Render the waveform to canvas with virtual rendering.\n   * \n   * The approach:\n   * 1. Calculate the visible portion of the track (intersection of track and viewport)\n   * 2. Position the canvas at that visible portion within the track\n   * 3. Draw only the waveform data for that visible time range\n   * 4. Update position and content as scroll/zoom changes\n   */\n  #renderWaveform(): void {\n    const canvas = this.canvasRef.value;\n    const waveformData = this._waveformData;\n\n    if (!canvas || !waveformData) return;\n\n    const positionInfo = this.#getTrackPositionInfo();\n    if (!positionInfo) return;\n\n    const { trackStartPx, trackWidthPx, viewportScrollLeft, viewportWidth, pixelsPerMs } =\n      positionInfo;\n\n    // Calculate visible region in absolute pixels (with padding for smooth scrolling)\n    const visibleLeftPx = viewportScrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleRightPx = viewportScrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n\n    // Track boundaries in absolute pixels\n    const trackEndPx = trackStartPx + trackWidthPx;\n\n    // Check if track is visible at all\n    if (trackEndPx < visibleLeftPx || trackStartPx > visibleRightPx) {\n      // Track not visible, hide canvas\n      canvas.style.display = \"none\";\n      return;\n    }\n    canvas.style.display = \"block\";\n\n    // Calculate the intersection: what part of the track is visible\n    // All coordinates are now relative to the track's left edge (0 = track start)\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 = this.#hostHeight || 18;\n\n    // Set canvas size with DPR\n    const dpr = window.devicePixelRatio || 1;\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    // Position canvas at the visible portion within the track\n    canvas.style.left = `${visibleStartInTrack}px`;\n    canvas.style.width = `${visibleWidthPx}px`;\n    canvas.style.height = `${height}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 what time range to render\n    const audio = this.element as EFAudio;\n    const sourceInMs = audio.sourceStartMs ?? 0;\n    \n    // Convert visible pixel range to time range\n    const timeStartMs = sourceInMs + visibleStartInTrack / pixelsPerMs;\n    const timeEndMs = sourceInMs + visibleEndInTrack / pixelsPerMs;\n\n    // Draw the waveform for the visible portion\n    this.#drawWaveformRegion(\n      ctx,\n      waveformData,\n      0,  // Start drawing at x=0 of canvas (canvas is already positioned)\n      visibleWidthPx,\n      height,\n      timeStartMs,\n      timeEndMs,\n    );\n  }\n\n  /**\n   * Draw a region of the waveform to canvas\n   */\n  #drawWaveformRegion(\n    ctx: CanvasRenderingContext2D,\n    waveformData: WaveformData,\n    x: number,\n    width: number,\n    height: number,\n    startMs: number,\n    endMs: number,\n  ): void {\n    const { peaks, samplesPerSecond } = waveformData;\n\n    // Calculate sample range\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) - 2; // Leave 2px padding top/bottom\n    const color = this.getElementTypeColor();\n\n    ctx.fillStyle = color;\n    ctx.globalAlpha = 0.8;\n    ctx.beginPath();\n\n    // Draw top half (max values) left to right\n    const pixelsPerSample = width / sampleCount;\n\n    for (let i = 0; i <= sampleCount; i++) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n\n      // Clamp to valid range\n      if (peakIndex + 1 >= peaks.length) break;\n\n      const maxValue = peaks[peakIndex + 1] ?? 0;\n      const px = x + 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\n      // Clamp to valid range\n      if (peakIndex >= peaks.length) continue;\n\n      const minValue = peaks[peakIndex] ?? 0;\n      const px = x + 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 = color;\n    ctx.lineWidth = 1;\n    ctx.beginPath();\n    ctx.moveTo(x, centerY);\n    ctx.lineTo(x + width, centerY);\n    ctx.stroke();\n\n    ctx.globalAlpha = 1;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    // Start loading waveform data\n    this.#loadWaveformData();\n\n    // Observe size changes\n    this.#resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.#hostHeight =\n          entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n        this.#scheduleRender();\n      }\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#abortController?.abort();\n    this.#resizeObserver?.disconnect();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    // Check if we need to reload waveform data\n    const audio = this.element as EFAudio;\n    if (audio?.src !== this.#lastSrc) {\n      this.#loadWaveformData();\n    }\n\n    // Re-render when timeline state changes (scroll, zoom)\n    if (changedProperties.has(\"_timelineState\")) {\n      this.#scheduleRender();\n    }\n\n    // Attach resize observer to track container once rendered\n    if (this.canvasRef.value && this.#resizeObserver) {\n      const container = this.canvasRef.value.parentElement;\n      if (container) {\n        this.#resizeObserver.disconnect();\n        this.#resizeObserver.observe(container);\n      }\n    }\n\n    // Always schedule render after update to catch any changes\n    this.#scheduleRender();\n  }\n\n  contents() {\n    const audio = this.element as EFAudio;\n    if (!(audio instanceof EFAudio)) {\n      return nothing;\n    }\n\n    const durationMs = audio.durationMs ?? 0;\n    if (durationMs === 0) {\n      return nothing;\n    }\n\n    // Show loading placeholder if no waveform data yet\n    if (!this._waveformData) {\n      return this.#renderPlaceholder();\n    }\n\n    // The host fills the track container, canvas is positioned within it\n    return html`\n      <div class=\"waveform-host\">\n        <canvas ${ref(this.canvasRef)} class=\"waveform-canvas\"></canvas>\n      </div>\n    `;\n  }\n\n  /**\n   * Render placeholder while loading\n   */\n  #renderPlaceholder() {\n    return html`\n      <div\n        style=\"\n          position: absolute;\n          left: 0;\n          top: 2px;\n          bottom: 2px;\n          right: 0;\n          background: linear-gradient(90deg, \n            ${this.getElementTypeColor()}22 0%, \n            ${this.getElementTypeColor()}44 50%,\n            ${this.getElementTypeColor()}22 100%\n          );\n          background-size: 200% 100%;\n          animation: ${this._isLoading ? \"shimmer 1.5s infinite\" : \"none\"};\n          border-radius: 2px;\n        \"\n      ></div>\n      <style>\n        @keyframes shimmer {\n          0% { background-position: 200% 0; }\n          100% { background-position: -200% 0; }\n        }\n      </style>\n    `;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/timeline/tracks/CaptionsTrack.js

@@ -0,0 +1,595 @@
+import { currentTimeContext } from "../../currentTimeContext.js";
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { ICONS, phosphorIcon } from "../../icons.js";
+import { TrackItem } from "./TrackItem.js";
+import { consume } from "@lit/context";
+import { css, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+//#region src/gui/timeline/tracks/CaptionsTrack.ts
+let measurementCanvas = null;
+let measurementContext = null;
+const textMeasurementCache = /* @__PURE__ */ new Map();
+const MAX_CACHE_SIZE = 500;
+/**
+* Measure text width accurately using canvas.
+* Matches the actual font used in word elements (font-weight: 500).
+* Results are cached to avoid repeated measurements of the same text.
+*/
+function measureTextWidth(text, fontSize, fontWeight = 500) {
+	const cacheKey = `${text}:${fontSize}:${fontWeight}`;
+	const cached = textMeasurementCache.get(cacheKey);
+	if (cached !== void 0) return cached;
+	if (!measurementCanvas || !measurementContext) {
+		measurementCanvas = document.createElement("canvas");
+		measurementContext = measurementCanvas.getContext("2d");
+	}
+	if (!measurementContext) return text.length * fontSize * .6;
+	measurementContext.font = `${fontWeight} ${fontSize}px ${getComputedStyle(document.body).fontFamily || "system-ui, sans-serif"}`;
+	const width = measurementContext.measureText(text).width;
+	if (textMeasurementCache.size >= MAX_CACHE_SIZE) {
+		const keysToDelete = Array.from(textMeasurementCache.keys()).slice(0, MAX_CACHE_SIZE / 2);
+		for (const key of keysToDelete) textMeasurementCache.delete(key);
+	}
+	textMeasurementCache.set(cacheKey, width);
+	return width;
+}
+/**
+* Check if words can fit individually within a segment when positioned by time
+* 
+* Strategy: Allow overlaps as long as all words can be rendered within the container.
+* Only use compact mode when words are so cramped they can't be displayed at all.
+*/
+function canWordsFitIndividually(words, segmentStart, segmentWidthPx, pixelsPerMs) {
+	if (words.length === 0) return {
+		fits: false,
+		reason: "no words"
+	};
+	let totalTextWidth = 0;
+	const wordWidths = [];
+	for (const word of words) {
+		if (!word) continue;
+		const textWidth = measureTextWidth(word.text.trim(), 9, 500) + 4;
+		const startPx = pixelsPerMs * (word.start - segmentStart) * 1e3;
+		const endPx = pixelsPerMs * (word.end - segmentStart) * 1e3;
+		const timeWidth = endPx - startPx;
+		wordWidths.push({
+			textWidth,
+			timeWidth,
+			startPx,
+			endPx
+		});
+		totalTextWidth += textWidth;
+	}
+	if (totalTextWidth <= segmentWidthPx * .9) return { fits: true };
+	for (const { textWidth, timeWidth } of wordWidths) if (timeWidth < textWidth * .3) return {
+		fits: false,
+		reason: `word too narrow (${timeWidth.toFixed(1)}px < ${(textWidth * .3).toFixed(1)}px)`
+	};
+	if (Math.max(...wordWidths.map((w) => w.endPx)) <= segmentWidthPx * 1.1) return { fits: true };
+	return {
+		fits: false,
+		reason: `words exceed segment (total text: ${totalTextWidth.toFixed(1)}px, segment: ${segmentWidthPx.toFixed(1)}px)`
+	};
+}
+/**
+* Controller to ensure captions track updates reactively during playback.
+* 
+* Performance optimization: Only requests updates when the visual state actually
+* needs to change (active word/segment changed), not on every frame.
+*/
+var CaptionsTimeController = class CaptionsTimeController {
+	static {
+		this.MIN_TIME_CHANGE_MS = 100;
+	}
+	constructor(host) {
+		this.host = host;
+		this.lastTimeMs = -1;
+		this.lastActiveWordIndex = -1;
+		this.lastActiveSegmentIndex = -1;
+		this.host.addController(this);
+	}
+	hostConnected() {
+		this.startTimeUpdate();
+	}
+	hostDisconnected() {
+		this.stopTimeUpdate();
+	}
+	startTimeUpdate() {
+		const update = () => {
+			const captions = this.host.element;
+			const currentTimeMs = captions.rootTimegroup?.currentTimeMs || 0;
+			const captionsData = captions?.unifiedCaptionsDataTask?.value;
+			let shouldUpdate = false;
+			if (captionsData) {
+				const captionsLocalTimeSec = (currentTimeMs - captions.startTimeMs) / 1e3;
+				const activeWordIndex = captionsData.word_segments.findIndex((word) => captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end);
+				const activeSegmentIndex = captionsData.segments.findIndex((seg) => captionsLocalTimeSec >= seg.start && captionsLocalTimeSec < seg.end);
+				if (activeWordIndex !== this.lastActiveWordIndex) {
+					this.lastActiveWordIndex = activeWordIndex;
+					shouldUpdate = true;
+				}
+				if (activeSegmentIndex !== this.lastActiveSegmentIndex) {
+					this.lastActiveSegmentIndex = activeSegmentIndex;
+					shouldUpdate = true;
+				}
+			}
+			if (Math.abs(currentTimeMs - this.lastTimeMs) >= CaptionsTimeController.MIN_TIME_CHANGE_MS) shouldUpdate = true;
+			if (shouldUpdate) {
+				this.lastTimeMs = currentTimeMs;
+				this.host.requestUpdate();
+			}
+			this.animationFrameId = requestAnimationFrame(update);
+		};
+		update();
+	}
+	stopTimeUpdate() {
+		if (this.animationFrameId) {
+			cancelAnimationFrame(this.animationFrameId);
+			this.animationFrameId = void 0;
+		}
+	}
+};
+let EFCaptionsTrack = class EFCaptionsTrack$1 extends TrackItem {
+	constructor(..._args) {
+		super(..._args);
+		this.contextCurrentTimeMs = 0;
+		this._timeController = new CaptionsTimeController(this);
+		this.lastPixelsPerMs = 0;
+	}
+	static {
+		this.styles = [...TrackItem.styles, css`
+      .segment-block {
+        position: absolute;
+        border-radius: 3px;
+        transition: box-shadow 0.15s ease, z-index 0.15s ease;
+        cursor: pointer;
+        overflow: visible;
+      }
+      
+      .segment-block:hover {
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+        z-index: 5;
+      }
+      
+      .word-element {
+        position: absolute;
+        font-size: 9px;
+        line-height: 1.2;
+        white-space: nowrap;
+        font-weight: 500;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 2px 4px;
+        border-radius: 2px;
+        transition: all 0.1s ease;
+        background: rgba(30, 41, 59, 0.9);
+        color: rgb(226, 232, 240);
+        z-index: 1;
+      }
+      
+      .word-element.active {
+        background: rgb(74, 222, 128);
+        color: rgb(20, 30, 20);
+        font-weight: 700;
+        font-size: 10px;
+        z-index: 10;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+      }
+      
+      .word-element.future {
+        background: rgba(51, 65, 85, 0.8);
+        color: rgb(226, 232, 240);
+        z-index: 5;
+      }
+      
+      .segment-block.active .word-element:not(.active):not(.future) {
+        color: rgb(203, 213, 225);
+        background: rgba(30, 41, 59, 0.9);
+      }
+      
+      /* Compact text mode - when words are too small to position individually */
+      .segment-block.compact-text {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+        overflow: hidden;
+        /* Keep position: absolute from .segment-block for correct time-based positioning */
+      }
+      
+      /* Allow overflow on hover for compact text */
+      .segment-block.compact-text:hover {
+        overflow: visible;
+        z-index: 100;
+        /* Expand to fit content on hover */
+        width: max-content !important;
+        min-width: max-content;
+        background: rgba(34, 60, 40, 0.95) !important;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+      }
+      
+      .segment-text-compact {
+        font-size: 10px;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: rgb(226, 232, 240);
+        width: 100%;
+      }
+      
+      /* On hover, show full text */
+      .segment-block.compact-text:hover .segment-text-compact {
+        overflow: visible;
+        text-overflow: clip;
+      }
+      
+      .segment-block.compact-text.active .segment-text-compact {
+        color: rgb(203, 213, 225);
+        font-weight: 500;
+      }
+      
+      .segment-duration-indicator {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: currentColor;
+        opacity: 0.2;
+        border-radius: 0 0 3px 3px;
+      }
+      
+      .segment-block.active .segment-duration-indicator {
+        opacity: 0.4;
+        height: 2px;
+      }
+      
+      .word-marker {
+        position: absolute;
+        bottom: 0;
+        width: 1px;
+        height: 30%;
+        background: rgba(255, 255, 255, 0.3);
+        pointer-events: none;
+      }
+      
+      .word-marker.active {
+        background: rgba(255, 255, 255, 0.8);
+        height: 50%;
+        width: 2px;
+      }
+    `];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("pixelsPerMs")) {
+			const currentPixelsPerMs = this.pixelsPerMs;
+			if (currentPixelsPerMs !== this.lastPixelsPerMs) {
+				this.lastPixelsPerMs = currentPixelsPerMs;
+				this.requestUpdate();
+			}
+		}
+	}
+	render() {
+		const captionsData = this.element.unifiedCaptionsDataTask.value;
+		return html`<div style=${styleMap(this.gutterStyles)}>
+      <div
+        class="relative"
+        style="background-color: var(--filmstrip-bg);"
+        ?data-focused=${this.isFocused}
+        @mouseenter=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = this.element;
+		}}
+        @mouseleave=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = null;
+		}}
+      >
+        <div
+          ?data-focused=${this.isFocused}
+          class="trim-container relative mb-0 block text-nowrap border text-sm overflow-visible"
+          style=${styleMap({
+			...this.trimPortionStyles,
+			height: "var(--timeline-track-height, 22px)",
+			backgroundColor: this.isFocused ? "var(--filmstrip-item-focused)" : "var(--filmstrip-item-bg)",
+			borderColor: "var(--filmstrip-border)",
+			borderLeftColor: this.getElementTypeColor(),
+			borderLeftWidth: "3px",
+			minHeight: "22px"
+		})}
+        >
+          ${this.renderCaptionsData(captionsData)}
+          ${this.enableTrim ? html`<ef-trim-handles
+                element-id=${this.element.id || ""}
+                pixels-per-ms=${this.pixelsPerMs}
+                trim-start-ms=${this.element.trimStartMs ?? 0}
+                trim-end-ms=${this.element.trimEndMs ?? 0}
+                intrinsic-duration-ms=${this.element.intrinsicDurationMs ?? this.element.durationMs}
+                @trim-change=${this.handleTrimChange}
+              ></ef-trim-handles>` : nothing}
+        </div>
+      </div>
+      ${this.renderChildren()}
+    </div>`;
+	}
+	renderCaptionsData(captionsData) {
+		if (!captionsData) return html``;
+		const captions = this.element;
+		const rootTimegroup = captions.rootTimegroup;
+		const captionsLocalTimeSec = ((this.contextCurrentTimeMs || rootTimegroup?.currentTimeMs || 0) - captions.startTimeMs) / 1e3;
+		const captionColor = "rgb(34, 197, 94)";
+		const activeWord = captionsData.word_segments.find((word) => captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end);
+		return html`
+      ${captionsData.word_segments.map((word) => {
+			const wordStartPx = this.pixelsPerMs * word.start * 1e3;
+			const wordWidth = this.pixelsPerMs * (word.end - word.start) * 1e3;
+			const isActive = word === activeWord;
+			if (wordWidth < 1.5) return nothing;
+			return html`<div
+        class="word-marker ${isActive ? "active" : ""}"
+        style=${styleMap({ left: `${wordStartPx}px` })}
+      ></div>`;
+		})}
+      ${captionsData.segments.map((segment) => {
+			const isActiveSegment = captionsLocalTimeSec >= segment.start && captionsLocalTimeSec < segment.end;
+			const segmentStartPx = this.pixelsPerMs * segment.start * 1e3;
+			const segmentWidth = this.pixelsPerMs * (segment.end - segment.start) * 1e3;
+			const segmentDuration = (segment.end - segment.start) * 1e3;
+			const wordsInSegment = captionsData.word_segments.filter((word) => word.start >= segment.start && word.end <= segment.end).sort((a, b) => a.start - b.start);
+			const density = Math.min(wordsInSegment.length / 10, 1);
+			const useCompactText = !canWordsFitIndividually(wordsInSegment, segment.start, segmentWidth, this.pixelsPerMs).fits;
+			let avgSpacing = 0;
+			if (!useCompactText && wordsInSegment.length > 1) {
+				let totalSpacing = 0;
+				let spacingCount = 0;
+				for (let i = 0; i < wordsInSegment.length - 1; i++) {
+					const word1 = wordsInSegment[i];
+					const word2 = wordsInSegment[i + 1];
+					if (!word1 || !word2) continue;
+					const word1EndPx = this.pixelsPerMs * (word1.end - segment.start) * 1e3;
+					const spacing = this.pixelsPerMs * (word2.start - segment.start) * 1e3 - word1EndPx;
+					if (spacing > 0) {
+						totalSpacing += spacing;
+						spacingCount++;
+					}
+				}
+				avgSpacing = spacingCount > 0 ? totalSpacing / spacingCount : 0;
+			}
+			const MIN_READABLE_FONT_SIZE = 6;
+			const baseFontSize = 9;
+			const activeFontSize = 10;
+			let scaledFontSize = baseFontSize;
+			let scaledActiveFontSize = activeFontSize;
+			if (!useCompactText && wordsInSegment.length > 1 && avgSpacing < 8) {
+				const scaleFactor = Math.max(MIN_READABLE_FONT_SIZE / baseFontSize, avgSpacing / 8);
+				scaledFontSize = Math.max(MIN_READABLE_FONT_SIZE, baseFontSize * scaleFactor);
+				scaledActiveFontSize = Math.max(MIN_READABLE_FONT_SIZE, activeFontSize * scaleFactor);
+			}
+			const renderWords = () => {
+				if (useCompactText) return html`
+            <span class="segment-text-compact">${segment.text}</span>
+          `;
+				return wordsInSegment.map((word) => {
+					const wordOffsetFromSegmentStart = (word.start - segment.start) * 1e3;
+					const wordLeftPx = this.pixelsPerMs * wordOffsetFromSegmentStart;
+					const wordWidthPx = this.pixelsPerMs * (word.end - word.start) * 1e3;
+					const isActive = word === activeWord;
+					const isFuture = activeWord && word.start > activeWord.end;
+					return html`
+            <span
+              class="word-element ${isActive ? "active" : ""} ${isFuture ? "future" : ""}"
+              style=${styleMap({
+						left: `${wordLeftPx}px`,
+						minWidth: `${Math.max(wordWidthPx, 8)}px`,
+						fontSize: isActive ? `${scaledActiveFontSize}px` : `${scaledFontSize}px`,
+						top: "50%"
+					})}
+              title="Word: '${word.text}' (${word.start.toFixed(2)}s - ${word.end.toFixed(2)}s)"
+            >
+              ${word.text.trim()}
+            </span>
+          `;
+				});
+			};
+			return html`<div
+        class="segment-block ${isActiveSegment ? "active" : ""} ${useCompactText ? "compact-text" : ""}"
+        style=${styleMap({
+				left: `${segmentStartPx}px`,
+				width: `${Math.max(segmentWidth, 4)}px`,
+				height: "100%",
+				top: "0px",
+				backgroundColor: isActiveSegment ? `rgba(34, 197, 94, ${.3 + density * .2})` : `rgba(34, 197, 94, ${.1 + density * .1})`,
+				borderColor: isActiveSegment ? captionColor : `rgba(34, 197, 94, 0.4)`,
+				minWidth: segmentWidth < 20 ? "20px" : "auto"
+			})}
+        title=${useCompactText ? `Caption: '${segment.text}'\nDuration: ${this.formatDuration(segmentDuration)}\nTime: ${segment.start.toFixed(2)}s - ${segment.end.toFixed(2)}s` : `Caption: '${segment.text}'\nDuration: ${this.formatDuration(segmentDuration)}\nTime: ${segment.start.toFixed(2)}s - ${segment.end.toFixed(2)}s\nWords: ${wordsInSegment.length}`}
+        @click=${(e) => {
+				e.stopPropagation();
+				if (rootTimegroup) rootTimegroup.currentTimeMs = captions.startTimeMs + segment.start * 1e3;
+			}}
+      >
+        ${renderWords()}
+        ${!useCompactText ? html`<div class="segment-duration-indicator"></div>` : nothing}
+      </div>`;
+		})}
+    `;
+	}
+	renderChildren() {
+		return nothing;
+	}
+};
+__decorate([consume({
+	context: currentTimeContext,
+	subscribe: true
+})], EFCaptionsTrack.prototype, "contextCurrentTimeMs", void 0);
+EFCaptionsTrack = __decorate([customElement("ef-captions-track")], EFCaptionsTrack);
+let EFCaptionsActiveWordTrack = class EFCaptionsActiveWordTrack$1 extends TrackItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+          ${phosphorIcon(ICONS.microphone)} Active Word
+        </div>
+      </div>`;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+        ${captionsData.word_segments.map((word) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "font-bold z-[5]" : ""}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * word.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
+				height: "100%",
+				top: "0px",
+				backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-item-bg)",
+				borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-border)"
+			})}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap" style="background-color: var(--filmstrip-caption-bg);">${word.text.trim()}</span>` : ""}
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsActiveWordTrack = __decorate([customElement("ef-captions-active-word-track")], EFCaptionsActiveWordTrack);
+let EFCaptionsSegmentTrack = class EFCaptionsSegmentTrack$1 extends TrackItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+          ${phosphorIcon(ICONS.textT)} Segment
+        </div>
+      </div>`;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+        ${captionsData.segments.map((segment) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= segment.start && captionsLocalTimeSec < segment.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "font-bold z-[5]" : ""}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * segment.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (segment.end - segment.start) * 1e3}px`,
+				height: "100%",
+				top: "0px",
+				backgroundColor: isCurrentlyActive ? "var(--filmstrip-segment-bg)" : "var(--filmstrip-item-bg)",
+				borderColor: isCurrentlyActive ? "var(--filmstrip-segment-border)" : "var(--filmstrip-border)"
+			})}
+            title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
+          >
+            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap" style="background-color: var(--filmstrip-segment-bg);">${segment.text}</span>` : ""}
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsSegmentTrack = __decorate([customElement("ef-captions-segment-track")], EFCaptionsSegmentTrack);
+let EFCaptionsBeforeWordTrack = class EFCaptionsBeforeWordTrack$1 extends TrackItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+          ${phosphorIcon(ICONS.arrowLeft)} Before
+        </div>
+      </div>`;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+        ${captionsData.word_segments.map((word) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "font-bold z-[5]" : ""}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * word.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
+				height: "100%",
+				top: "0px",
+				backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-waveform-bg)",
+				borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-waveform-border)"
+			})}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsBeforeWordTrack = __decorate([customElement("ef-captions-before-word-track")], EFCaptionsBeforeWordTrack);
+let EFCaptionsAfterWordTrack = class EFCaptionsAfterWordTrack$1 extends TrackItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+          ${phosphorIcon(ICONS.arrowRight)} After
+        </div>
+      </div>`;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
+        ${captionsData.word_segments.map((word) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "font-bold z-[5]" : ""}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * word.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
+				height: "100%",
+				top: "0px",
+				backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-waveform-bg)",
+				borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-waveform-border)"
+			})}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsAfterWordTrack = __decorate([customElement("ef-captions-after-word-track")], EFCaptionsAfterWordTrack);
+
+//#endregion
+//# sourceMappingURL=CaptionsTrack.js.map