@twick/video-editor 0.15.28 → 0.15.29

package/dist/index.js

@@ -7168,7 +7168,7 @@ const COLOR_FILTERS = {
   DRAMATIC: "dramatic",
   FADED: "faded"
 };
-class LRUCache {
+let LRUCache$1 = class LRUCache {
   constructor(maxSize = 100) {
     if (maxSize <= 0) {
       throw new Error("maxSize must be greater than 0");
@@ -7228,10 +7228,10 @@ class LRUCache {
   get size() {
     return this.cache.size;
   }
-}
-class VideoFrameExtractor {
+};
+let VideoFrameExtractor$1 = class VideoFrameExtractor {
   constructor(options = {}) {
-    this.frameCache = new LRUCache(
+    this.frameCache = new LRUCache$1(
       options.maxCacheSize ?? 50
     );
     this.videoElements = /* @__PURE__ */ new Map();
@@ -7497,16 +7497,16 @@ class VideoFrameExtractor {
     this.videoElements.clear();
     this.frameCache.clear();
   }
-}
-let defaultExtractor = null;
-function getDefaultVideoFrameExtractor(options) {
-  if (!defaultExtractor) {
-    defaultExtractor = new VideoFrameExtractor(options);
+};
+let defaultExtractor$1 = null;
+function getDefaultVideoFrameExtractor$1(options) {
+  if (!defaultExtractor$1) {
+    defaultExtractor$1 = new VideoFrameExtractor$1(options);
   }
-  return defaultExtractor;
+  return defaultExtractor$1;
 }
-async function getThumbnailCached(videoUrl, seekTime = 0.1, playbackRate) {
-  const extractor = getDefaultVideoFrameExtractor(
+async function getThumbnailCached$1(videoUrl, seekTime = 0.1, playbackRate) {
+  const extractor = getDefaultVideoFrameExtractor$1(
     void 0
   );
   return extractor.getFrame(videoUrl, seekTime);
@@ -8014,7 +8014,7 @@ const addVideoElement = async ({
 }) => {
   var _a;
   try {
-    const thumbnailUrl = await getThumbnailCached(
+    const thumbnailUrl = await getThumbnailCached$1(
       ((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.src) || "",
       snapTime
     );
@@ -9579,6 +9579,7 @@ function useTimelineDrop({
   zoomLevel,
   labelWidth,
   trackHeight,
+  separatorHeight = 0,
   /** Width of the track content area (timeline minus labels). Used for accurate time mapping. */
   trackContentWidth,
   onDrop,
@@ -9596,7 +9597,9 @@ function useTimelineDrop({
       const viewportLeft = ((_b = (_a = scrollEl == null ? void 0 : scrollEl.getBoundingClientRect) == null ? void 0 : _a.call(scrollEl)) == null ? void 0 : _b.left) ?? rect.left;
       const contentX = clientX - viewportLeft + scrollLeft - labelWidth;
       const relY = clientY - rect.top;
-      const rawTrackIndex = Math.floor(relY / trackHeight);
+      const rowHeight = trackHeight + separatorHeight;
+      const yFromFirstTrack = Math.max(0, relY - separatorHeight);
+      const rawTrackIndex = Math.floor(yFromFirstTrack / Math.max(1, rowHeight));
       const trackIndex = tracks.length === 0 ? 0 : Math.max(0, Math.min(tracks.length - 1, rawTrackIndex));
       const pixelsPerSecond = trackContentWidth != null && trackContentWidth > 0 ? trackContentWidth / duration : 100 * zoomLevel;
       const timeSec = Math.max(
@@ -9611,6 +9614,7 @@ function useTimelineDrop({
       tracks.length,
       labelWidth,
       trackHeight,
+      separatorHeight,
       zoomLevel,
       duration,
       trackContentWidth
@@ -19508,6 +19512,602 @@ const TrackElementContextMenu = ({
   }
   return reactDom.createPortal(menu, document.body);
 };
+const waveformCache = /* @__PURE__ */ new Map();
+const buildCacheKey = (src, bucketCount) => `${src}::${bucketCount}`;
+const getSeed = (src) => {
+  let seed = 2166136261;
+  for (let i2 = 0; i2 < src.length; i2 += 1) {
+    seed ^= src.charCodeAt(i2);
+    seed = Math.imul(seed, 16777619);
+  }
+  return seed >>> 0;
+};
+const generateFallbackPeaks = (bucketCount, seed) => {
+  const peaks = new Float32Array(bucketCount);
+  let randomState = seed || 123456789;
+  for (let i2 = 0; i2 < bucketCount; i2 += 1) {
+    randomState = 1103515245 * randomState + 12345 >>> 0;
+    const noise = randomState % 1e3 / 1e3;
+    const shape = 0.35 + 0.65 * Math.abs(Math.sin(i2 * 0.21 + noise * 2.7));
+    peaks[i2] = Math.max(0.08, Math.min(1, shape));
+  }
+  return peaks;
+};
+const computePeaks = (channelData, bucketCount) => {
+  const peaks = new Float32Array(bucketCount);
+  const step = Math.max(1, Math.floor(channelData.length / bucketCount));
+  for (let i2 = 0; i2 < bucketCount; i2 += 1) {
+    const start = i2 * step;
+    const end = Math.min(channelData.length, start + step);
+    let peak = 0;
+    for (let j2 = start; j2 < end; j2 += 1) {
+      const sample = Math.abs(channelData[j2]);
+      if (sample > peak) {
+        peak = sample;
+      }
+    }
+    peaks[i2] = peak;
+  }
+  return peaks;
+};
+const AudioWaveform = ({ src, widthPx, heightPx, label }) => {
+  const canvasRef = React.useRef(null);
+  const [peaks, setPeaks] = React.useState(null);
+  const bucketCount = React.useMemo(
+    () => Math.max(32, Math.min(2048, Math.floor(widthPx / 3))),
+    [widthPx]
+  );
+  React.useEffect(() => {
+    let isCancelled = false;
+    const controller = new AbortController();
+    const loadWaveform = async () => {
+      if (!src) {
+        setPeaks(generateFallbackPeaks(bucketCount, 1));
+        return;
+      }
+      const cacheKey = buildCacheKey(src, bucketCount);
+      const cached = waveformCache.get(cacheKey);
+      if (cached) {
+        setPeaks(cached);
+        return;
+      }
+      try {
+        const response = await fetch(src, { signal: controller.signal });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch audio (${response.status})`);
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        const audioCtx = new AudioContext();
+        const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer.slice(0));
+        const channelData = audioBuffer.getChannelData(0);
+        const computed = computePeaks(channelData, bucketCount);
+        waveformCache.set(cacheKey, computed);
+        if (!isCancelled) {
+          setPeaks(computed);
+        }
+        await audioCtx.close();
+      } catch {
+        if (!isCancelled) {
+          setPeaks(generateFallbackPeaks(bucketCount, getSeed(src)));
+        }
+      }
+    };
+    loadWaveform();
+    return () => {
+      isCancelled = true;
+      controller.abort();
+    };
+  }, [src, bucketCount]);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(widthPx * dpr));
+    canvas.height = Math.max(1, Math.floor(heightPx * dpr));
+    canvas.style.width = `${widthPx}px`;
+    canvas.style.height = `${heightPx}px`;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return;
+    }
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.clearRect(0, 0, widthPx, heightPx);
+    const centerY = Math.floor(heightPx / 2) + 0.5;
+    context.strokeStyle = "rgba(255, 255, 255, 0.18)";
+    context.lineWidth = 1;
+    context.beginPath();
+    context.moveTo(0, centerY);
+    context.lineTo(widthPx, centerY);
+    context.stroke();
+    if (!peaks || peaks.length === 0) {
+      return;
+    }
+    const maxHeight = Math.max(6, heightPx - 10);
+    let peakMax = 1e-3;
+    for (let i2 = 0; i2 < peaks.length; i2 += 1) {
+      peakMax = Math.max(peakMax, peaks[i2]);
+    }
+    const gap = 1;
+    const barWidth = Math.max(1, Math.floor(widthPx / peaks.length) - gap);
+    context.fillStyle = "rgba(255, 255, 255, 0.95)";
+    for (let i2 = 0; i2 < peaks.length; i2 += 1) {
+      const normalized = peaks[i2] / peakMax;
+      const waveHeight = Math.max(2, normalized * maxHeight);
+      const x2 = i2 * (barWidth + gap);
+      if (x2 > widthPx) {
+        break;
+      }
+      const y2 = (heightPx - waveHeight) / 2;
+      context.fillRect(x2, y2, barWidth, waveHeight);
+    }
+  }, [widthPx, heightPx, peaks]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-audio-waveform-root", "aria-label": "Audio waveform", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "twick-audio-waveform-canvas" }),
+    label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twick-audio-waveform-label", children: label }) : null
+  ] });
+};
+class LRUCache2 {
+  constructor(maxSize = 100) {
+    if (maxSize <= 0) {
+      throw new Error("maxSize must be greater than 0");
+    }
+    this.maxSize = maxSize;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Get a value from the cache.
+   * Moves the item to the end (most recently used).
+   */
+  get(key) {
+    const value = this.cache.get(key);
+    if (value === void 0) {
+      return void 0;
+    }
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return value;
+  }
+  /**
+   * Set a value in the cache.
+   * If cache is full, removes the least recently used item.
+   */
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey !== void 0) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+  /**
+   * Check if a key exists in the cache.
+   */
+  has(key) {
+    return this.cache.has(key);
+  }
+  /**
+   * Delete a key from the cache.
+   */
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  /**
+   * Clear all entries from the cache.
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * Get the current size of the cache.
+   */
+  get size() {
+    return this.cache.size;
+  }
+}
+class VideoFrameExtractor2 {
+  constructor(options = {}) {
+    this.frameCache = new LRUCache2(
+      options.maxCacheSize ?? 50
+    );
+    this.videoElements = /* @__PURE__ */ new Map();
+    this.maxVideoElements = options.maxVideoElements ?? 5;
+    this.loadTimeout = options.loadTimeout ?? 15e3;
+    this.jpegQuality = options.jpegQuality ?? 0.8;
+    this.playbackRate = options.playbackRate ?? 1;
+  }
+  /**
+   * Get a frame thumbnail from a video at a specific time.
+   * Uses caching and reuses video elements for optimal performance.
+   * Uses 0.1s instead of 0 when seekTime is 0, since frames at t=0 are often blank.
+   *
+   * @param videoUrl - The URL of the video
+   * @param seekTime - The time in seconds to extract the frame (0 is treated as 0.1)
+   * @returns Promise resolving to a thumbnail image URL (data URL or blob URL)
+   */
+  async getFrame(videoUrl, seekTime = 0.1) {
+    const effectiveSeekTime = seekTime === 0 ? 0.1 : seekTime;
+    const cacheKey = this.getCacheKey(videoUrl, effectiveSeekTime);
+    const cached = this.frameCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const videoState = await this.getVideoElement(videoUrl);
+    const thumbnail = await this.extractFrame(videoState.video, effectiveSeekTime);
+    this.frameCache.set(cacheKey, thumbnail);
+    return thumbnail;
+  }
+  /**
+   * Get or create a video element for the given URL.
+   * Reuses existing elements and manages cleanup.
+   */
+  async getVideoElement(videoUrl) {
+    let videoState = this.videoElements.get(videoUrl);
+    if (videoState && videoState.isReady) {
+      videoState.lastUsed = Date.now();
+      return videoState;
+    }
+    if (videoState && videoState.isLoading && videoState.loadPromise) {
+      await videoState.loadPromise;
+      if (videoState.isReady) {
+        videoState.lastUsed = Date.now();
+        return videoState;
+      }
+    }
+    if (this.videoElements.size >= this.maxVideoElements) {
+      this.cleanupOldVideoElements();
+    }
+    videoState = await this.createVideoElement(videoUrl);
+    this.videoElements.set(videoUrl, videoState);
+    videoState.lastUsed = Date.now();
+    return videoState;
+  }
+  /**
+   * Create and initialize a new video element.
+   */
+  async createVideoElement(videoUrl) {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.muted = true;
+    video.playsInline = true;
+    video.autoplay = false;
+    video.preload = "auto";
+    video.playbackRate = this.playbackRate;
+    video.style.position = "absolute";
+    video.style.left = "-9999px";
+    video.style.top = "-9999px";
+    video.style.width = "1px";
+    video.style.height = "1px";
+    video.style.opacity = "0";
+    video.style.pointerEvents = "none";
+    video.style.zIndex = "-1";
+    const state = {
+      video,
+      isReady: false,
+      isLoading: true,
+      loadPromise: null,
+      lastUsed: Date.now()
+    };
+    state.loadPromise = new Promise((resolve, reject) => {
+      let timeoutId;
+      const cleanup = () => {
+        if (timeoutId) clearTimeout(timeoutId);
+      };
+      const handleError = () => {
+        var _a;
+        cleanup();
+        state.isLoading = false;
+        reject(new Error(`Failed to load video: ${((_a = video.error) == null ? void 0 : _a.message) || "Unknown error"}`));
+      };
+      const handleLoadedMetadata = () => {
+        cleanup();
+        state.isReady = true;
+        state.isLoading = false;
+        resolve();
+      };
+      video.addEventListener("error", handleError, { once: true });
+      video.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
+      timeoutId = window.setTimeout(() => {
+        cleanup();
+        state.isLoading = false;
+        reject(new Error("Video loading timed out"));
+      }, this.loadTimeout);
+      video.src = videoUrl;
+      document.body.appendChild(video);
+    });
+    try {
+      await state.loadPromise;
+    } catch (error) {
+      if (video.parentNode) {
+        video.remove();
+      }
+      throw error;
+    }
+    return state;
+  }
+  /**
+   * Extract a frame from a video at the specified time.
+   */
+  async extractFrame(video, seekTime) {
+    return new Promise((resolve, reject) => {
+      video.pause();
+      const timeThreshold = 0.1;
+      if (Math.abs(video.currentTime - seekTime) < timeThreshold) {
+        try {
+          const canvas = document.createElement("canvas");
+          const width = video.videoWidth || 640;
+          const height = video.videoHeight || 360;
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.drawImage(video, 0, 0, width, height);
+          try {
+            const dataUrl = canvas.toDataURL("image/jpeg", this.jpegQuality);
+            resolve(dataUrl);
+          } catch {
+            canvas.toBlob(
+              (blob) => {
+                if (!blob) {
+                  reject(new Error("Failed to create Blob"));
+                  return;
+                }
+                const blobUrl = URL.createObjectURL(blob);
+                resolve(blobUrl);
+              },
+              "image/jpeg",
+              this.jpegQuality
+            );
+          }
+          return;
+        } catch (err) {
+          reject(new Error(`Error creating thumbnail: ${err}`));
+          return;
+        }
+      }
+      const handleSeeked = () => {
+        try {
+          const canvas = document.createElement("canvas");
+          const width = video.videoWidth || 640;
+          const height = video.videoHeight || 360;
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.drawImage(video, 0, 0, width, height);
+          try {
+            const dataUrl = canvas.toDataURL("image/jpeg", this.jpegQuality);
+            resolve(dataUrl);
+          } catch {
+            canvas.toBlob(
+              (blob) => {
+                if (!blob) {
+                  reject(new Error("Failed to create Blob"));
+                  return;
+                }
+                const blobUrl = URL.createObjectURL(blob);
+                resolve(blobUrl);
+              },
+              "image/jpeg",
+              this.jpegQuality
+            );
+          }
+        } catch (err) {
+          reject(new Error(`Error creating thumbnail: ${err}`));
+        }
+      };
+      video.addEventListener("seeked", handleSeeked, { once: true });
+      const playPromise = video.play();
+      if (playPromise !== void 0) {
+        playPromise.then(() => {
+          video.currentTime = seekTime;
+        }).catch(() => {
+          video.currentTime = seekTime;
+        });
+      } else {
+        video.currentTime = seekTime;
+      }
+    });
+  }
+  /**
+   * Generate cache key for a video URL and seek time.
+   */
+  getCacheKey(videoUrl, seekTime) {
+    const roundedTime = Math.round(seekTime * 100) / 100;
+    return `${videoUrl}:${roundedTime}`;
+  }
+  /**
+   * Cleanup least recently used video elements.
+   */
+  cleanupOldVideoElements() {
+    if (this.videoElements.size < this.maxVideoElements) {
+      return;
+    }
+    const entries = Array.from(this.videoElements.entries());
+    entries.sort((a2, b2) => a2[1].lastUsed - b2[1].lastUsed);
+    const toRemove = entries.slice(0, entries.length - this.maxVideoElements + 1);
+    for (const [url, state] of toRemove) {
+      if (state.video.parentNode) {
+        state.video.remove();
+      }
+      this.videoElements.delete(url);
+    }
+  }
+  /**
+   * Clear the frame cache.
+   */
+  clearCache() {
+    this.frameCache.clear();
+  }
+  /**
+   * Remove a specific video element and clear its cached frames.
+   */
+  removeVideo(videoUrl) {
+    const state = this.videoElements.get(videoUrl);
+    if (state) {
+      if (state.video.parentNode) {
+        state.video.remove();
+      }
+      this.videoElements.delete(videoUrl);
+    }
+    this.frameCache.clear();
+  }
+  /**
+   * Dispose of all video elements and clear caches.
+   * Removes all video elements from the DOM and clears both the frame cache
+   * and video element cache. Call this when the extractor is no longer needed
+   * to prevent memory leaks.
+   */
+  dispose() {
+    for (const state of this.videoElements.values()) {
+      if (state.video.parentNode) {
+        state.video.remove();
+      }
+    }
+    this.videoElements.clear();
+    this.frameCache.clear();
+  }
+}
+let defaultExtractor = null;
+function getDefaultVideoFrameExtractor(options) {
+  if (!defaultExtractor) {
+    defaultExtractor = new VideoFrameExtractor2(options);
+  }
+  return defaultExtractor;
+}
+async function getThumbnailCached(videoUrl, seekTime = 0.1, playbackRate) {
+  const extractor = getDefaultVideoFrameExtractor(
+    void 0
+  );
+  return extractor.getFrame(videoUrl, seekTime);
+}
+const MAX_THUMBNAILS_PER_CLIP = 24;
+const MIN_THUMBNAIL_WIDTH = 40;
+const MAX_THUMBNAIL_WIDTH = 96;
+const videoThumbCache = /* @__PURE__ */ new Map();
+const inFlightVideoThumbs = /* @__PURE__ */ new Map();
+const getThumbCacheKey = (src, seekTime) => `${src}:${Math.round(seekTime * 100) / 100}`;
+const getCachedVideoThumbnail = async (src, seekTime) => {
+  const key = getThumbCacheKey(src, seekTime);
+  const cached = videoThumbCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  const inFlight = inFlightVideoThumbs.get(key);
+  if (inFlight) {
+    return inFlight;
+  }
+  const request = getThumbnailCached(src, seekTime).then((thumb) => {
+    videoThumbCache.set(key, thumb);
+    inFlightVideoThumbs.delete(key);
+    return thumb;
+  }).catch(() => {
+    inFlightVideoThumbs.delete(key);
+    throw new Error("Thumbnail extraction failed");
+  });
+  inFlightVideoThumbs.set(key, request);
+  return request;
+};
+const runWithConcurrencyLimit = async (tasks, concurrency) => {
+  const active = /* @__PURE__ */ new Set();
+  for (const task of tasks) {
+    const promise = task();
+    active.add(promise);
+    promise.finally(() => active.delete(promise));
+    if (active.size >= concurrency) {
+      await Promise.race(active);
+    }
+  }
+  await Promise.all(active);
+};
+const getThumbnailCount = (widthPx, heightPx) => {
+  const targetThumbWidth = Math.max(
+    MIN_THUMBNAIL_WIDTH,
+    Math.min(MAX_THUMBNAIL_WIDTH, Math.round(heightPx * 1.5))
+  );
+  return Math.max(
+    1,
+    Math.min(MAX_THUMBNAILS_PER_CLIP, Math.ceil(widthPx / targetThumbWidth))
+  );
+};
+const ImageTimelineStrip = ({ src, widthPx, heightPx }) => {
+  const count = React.useMemo(() => getThumbnailCount(widthPx, heightPx), [widthPx, heightPx]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-media-strip twick-media-strip-image", "aria-hidden": "true", children: Array.from({ length: count }, (_2, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      className: "twick-media-strip-thumb",
+      alt: "",
+      draggable: false
+    },
+    `${src}-${index}`
+  )) });
+};
+const VideoTimelineStrip = ({
+  src,
+  widthPx,
+  heightPx,
+  durationSec,
+  mediaOffsetSec = 0,
+  playbackRate = 1,
+  mediaDurationSec
+}) => {
+  const count = React.useMemo(() => getThumbnailCount(widthPx, heightPx), [widthPx, heightPx]);
+  const [thumbs, setThumbs] = React.useState({});
+  const slots = React.useMemo(() => {
+    const timelineDuration = Math.max(1e-3, durationSec);
+    return Array.from({ length: count }, (_2, index) => {
+      const progress2 = count === 1 ? 0 : index / (count - 1);
+      const timelineTime = progress2 * timelineDuration;
+      let mediaTime = Math.max(0, mediaOffsetSec + timelineTime * playbackRate);
+      if (typeof mediaDurationSec === "number" && mediaDurationSec > 0) {
+        mediaTime = Math.min(mediaTime, Math.max(0, mediaDurationSec - 0.05));
+      }
+      return mediaTime;
+    });
+  }, [count, durationSec, mediaOffsetSec, playbackRate, mediaDurationSec]);
+  React.useEffect(() => {
+    let cancelled = false;
+    const loadThumbs = async () => {
+      const nextThumbs = {};
+      const tasks = slots.map((seekTime, index) => async () => {
+        try {
+          const thumb = await getCachedVideoThumbnail(src, seekTime);
+          nextThumbs[index] = thumb;
+        } catch {
+        }
+      });
+      await runWithConcurrencyLimit(tasks, 3);
+      if (!cancelled) {
+        setThumbs(nextThumbs);
+      }
+    };
+    loadThumbs();
+    return () => {
+      cancelled = true;
+    };
+  }, [src, slots]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-media-strip twick-media-strip-video", "aria-hidden": "true", children: slots.map((_2, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: thumbs[index],
+      className: "twick-media-strip-thumb",
+      alt: "",
+      draggable: false
+    },
+    `${src}-${index}`
+  )) });
+};
 const TrackElementView = ({
   element,
   parentWidth,
@@ -19658,6 +20258,18 @@ const TrackElementView = ({
   const isSelected = React.useMemo(() => {
     return selectedIds.has(element.getId());
   }, [selectedIds, element]);
+  const isAudioElement = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.AUDIO;
+  const isVideoElement = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.VIDEO;
+  const isImageElement = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.IMAGE;
+  const elementLabel = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.EFFECT ? ((_b = (_a = element.getProps) == null ? void 0 : _a.call(element)) == null ? void 0 : _b.effectKey) ?? "Effect" : element.getText ? element.getText() : element.getName() || element.getType();
+  const mediaSrc = (isAudioElement || isVideoElement || isImageElement) && element.getSrc ? element.getSrc() : void 0;
+  const mediaOffsetSec = isVideoElement && element.getStartAt ? element.getStartAt() : 0;
+  const playbackRate = isVideoElement && element.getPlaybackRate ? element.getPlaybackRate() : 1;
+  const mediaDurationSec = isVideoElement && element.getMediaDuration ? element.getMediaDuration() : void 0;
+  const elementWidthPx = Math.max(
+    1,
+    (position.end - position.start) / Math.max(duration, MIN_DURATION) * parentWidth
+  );
   const hasHandles = (selectedItem == null ? void 0 : selectedItem.getId()) === element.getId();
   const contextActionsEnabled = Boolean(
     onDeleteElement && onSplitElement && onContextMenuTarget
@@ -19671,7 +20283,7 @@ const TrackElementView = ({
   };
   const motionProps = {
     ref,
-    className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""}`,
+    className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""} ${isAudioElement ? "twick-track-element-audio" : ""}`,
     onMouseDown: (e3) => {
       if (e3.target === ref.current) {
         setLastPos();
@@ -19718,7 +20330,39 @@ const TrackElementView = ({
           className: "twick-track-element-handle twick-track-element-handle-start"
         }
       ) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-track-element-content", children: element.getType() === timeline.TIMELINE_ELEMENT_TYPE.EFFECT ? ((_b = (_a = element.getProps) == null ? void 0 : _a.call(element)) == null ? void 0 : _b.effectKey) ?? "Effect" : element.getText ? element.getText() : element.getName() || element.getType() }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `twick-track-element-content ${isAudioElement ? "twick-track-element-content-audio" : ""}`,
+          children: isAudioElement ? /* @__PURE__ */ jsxRuntime.jsx(
+            AudioWaveform,
+            {
+              src: mediaSrc,
+              widthPx: elementWidthPx,
+              heightPx: 46,
+              label: elementLabel
+            }
+          ) : isVideoElement && mediaSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+            VideoTimelineStrip,
+            {
+              src: mediaSrc,
+              widthPx: elementWidthPx,
+              heightPx: 46,
+              durationSec: Math.max(0, element.getDuration()),
+              mediaOffsetSec,
+              playbackRate,
+              mediaDurationSec
+            }
+          ) : isImageElement && mediaSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+            ImageTimelineStrip,
+            {
+              src: mediaSrc,
+              widthPx: elementWidthPx,
+              heightPx: 46
+            }
+          ) : elementLabel
+        }
+      ),
       hasHandles ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -19858,6 +20502,7 @@ function useMarqueeSelection({
   labelWidth,
   trackCount,
   trackHeight,
+  separatorHeight = 2,
   tracks,
   containerRef,
   onMarqueeSelect,
@@ -19911,7 +20556,7 @@ function useMarqueeSelection({
     const bottom = Math.max(currentMarquee.startY, currentMarquee.endY);
     const startTime = Math.max(0, (left - labelWidth) / pixelsPerSecond);
     const endTime = Math.min(duration, (right - labelWidth) / pixelsPerSecond);
-    const rowHeight = trackHeight + 2;
+    const rowHeight = trackHeight + separatorHeight;
     const startTrackIdx = Math.max(0, Math.floor(top / rowHeight));
     const endTrackIdx = Math.min(
       trackCount - 1,
@@ -19940,6 +20585,7 @@ function useMarqueeSelection({
     labelWidth,
     trackCount,
     trackHeight,
+    separatorHeight,
     tracks,
     onMarqueeSelect,
     onEmptyClick,
@@ -20076,7 +20722,7 @@ function getTrackOrSeparatorAt(clientY, containerTop, trackHeight) {
   return { type: "separator", separatorIndex: index + 1 };
 }
 const LABEL_WIDTH = 40;
-const TRACK_HEIGHT = 44;
+const TRACK_HEIGHT = 52;
 const SEPARATOR_HEIGHT = 6;
 function TimelineView({
   zoomLevel,
@@ -20219,6 +20865,7 @@ function TimelineView({
     labelWidth: LABEL_WIDTH,
     trackCount: (tracks == null ? void 0 : tracks.length) ?? 0,
     trackHeight: TRACK_HEIGHT,
+    separatorHeight: SEPARATOR_HEIGHT,
     tracks: tracks ?? [],
     containerRef: timelineContentRef,
     onMarqueeSelect,
@@ -20232,6 +20879,7 @@ function TimelineView({
     zoomLevel,
     labelWidth: LABEL_WIDTH,
     trackHeight: TRACK_HEIGHT,
+    separatorHeight: SEPARATOR_HEIGHT,
     trackContentWidth: timelineWidth - LABEL_WIDTH,
     onDrop: onDropOnTimeline ?? (async () => {
     }),
@@ -20327,7 +20975,7 @@ function TimelineView({
                   style: {
                     position: "absolute",
                     left: LABEL_WIDTH + preview.timeSec / duration * (timelineWidth - LABEL_WIDTH),
-                    top: preview.trackIndex * TRACK_HEIGHT + 2,
+                    top: SEPARATOR_HEIGHT + preview.trackIndex * (TRACK_HEIGHT + SEPARATOR_HEIGHT) + 2,
                     width: preview.widthPct / 100 * (timelineWidth - LABEL_WIDTH),
                     height: TRACK_HEIGHT - 4
                   }