1 files changed, 208 insertions, 0 deletions
diff --git a/apps/web/src/timeline/components/video-filmstrip.tsx b/apps/web/src/timeline/components/video-filmstrip.tsx
new file mode 100644
index 00000000..e05f6bf4
--- /dev/null
+++ b/apps/web/src/timeline/components/video-filmstrip.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import type { MediaAsset } from "@/media/types";
+import { getEffectiveRateAt } from "@/retime/resolve";
+import { thumbnailCache } from "@/services/thumbnail-cache/service";
+import {
+	getFilmstripInterval,
+	getFilmstripSlotCount,
+	getFilmstripSlotSourceTime,
+	getVisibleSlotRange,
+	MEDIA_TILE_ASPECT_RATIO,
+} from "@/services/thumbnail-cache/tiling";
+import type { VideoElement } from "@/timeline";
+import { findScrollParent } from "@/utils/browser";
+import { mediaTimeToSeconds } from "@/wasm";
+
+interface VideoFilmstripProps {
+	element: VideoElement;
+	mediaAsset: MediaAsset;
+	pixelsPerSecond: number;
+	trackHeight: number;
+}
+
+export function VideoFilmstrip({
+	element,
+	mediaAsset,
+	pixelsPerSecond,
+	trackHeight,
+}: VideoFilmstripProps) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [visibleRange, setVisibleRange] = useState({ left: 0, right: 0 });
+
+	const clipDurationSec = mediaTimeToSeconds({ time: element.duration });
+	const trimStartSec = mediaTimeToSeconds({ time: element.trimStart });
+	const rate = getEffectiveRateAt({ retime: element.retime });
+	const minTileWidthPx = trackHeight * MEDIA_TILE_ASPECT_RATIO;
+	const interval = getFilmstripInterval({ pixelsPerSecond, minTileWidthPx });
+	const tileWidthPx = interval * pixelsPerSecond;
+	const slotCount = getFilmstripSlotCount({ clipDurationSec, interval });
+
+	const updateVisibleRange = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+		const rect = container.getBoundingClientRect();
+		if (rect.width <= 0) {
+			return;
+		}
+		const scrollParent = findScrollParent({ element: container });
+		let left = 0;
+		let right = rect.width;
+		if (scrollParent) {
+			const parentRect = scrollParent.getBoundingClientRect();
+			left = Math.max(0, parentRect.left - rect.left);
+			right = Math.min(rect.width, parentRect.right - rect.left);
+		} else {
+			left = Math.max(0, -rect.left);
+			right = Math.min(rect.width, window.innerWidth - rect.left);
+		}
+		setVisibleRange((previous) =>
+			previous.left === left && previous.right === right
+				? previous
+				: { left, right },
+		);
+	}, []);
+
+	useLayoutEffect(() => {
+		updateVisibleRange();
+	}, [updateVisibleRange, pixelsPerSecond, clipDurationSec, interval]);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+		const scrollParent = findScrollParent({ element: container });
+		if (!scrollParent) {
+			return;
+		}
+		scrollParent.addEventListener("scroll", updateVisibleRange, {
+			passive: true,
+		});
+		return () => scrollParent.removeEventListener("scroll", updateVisibleRange);
+	}, [updateVisibleRange]);
+
+	useResizeObserver({ ref: containerRef, onResize: updateVisibleRange });
+
+	const { firstSlot, lastSlot } = getVisibleSlotRange({
+		slotCount,
+		tileWidthPx,
+		visibleLeftPx: visibleRange.left,
+		visibleRightPx: visibleRange.right,
+	});
+
+	const bitmapSize = useMemo(() => {
+		const dpr =
+			typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+		return {
+			width: Math.max(1, Math.round(minTileWidthPx * dpr)),
+			height: Math.max(1, Math.round(trackHeight * dpr)),
+		};
+	}, [minTileWidthPx, trackHeight]);
+
+	const slots: number[] = [];
+	for (let slot = firstSlot; slot <= lastSlot; slot++) {
+		slots.push(slot);
+	}
+
+	return (
+		<div
+			ref={containerRef}
+			className="pointer-events-none absolute inset-0 overflow-hidden"
+		>
+			{slots.map((slot) => (
+				<FilmstripTile
+					key={slot}
+					mediaId={mediaAsset.id}
+					file={mediaAsset.file}
+					sourceTimeSec={getFilmstripSlotSourceTime({
+						slot,
+						interval,
+						trimStartSec,
+						rate,
+						assetDurationSec: mediaAsset.duration,
+					})}
+					leftPx={slot * tileWidthPx}
+					widthPx={tileWidthPx}
+					heightPx={trackHeight}
+					bitmapWidth={bitmapSize.width}
+					bitmapHeight={bitmapSize.height}
+				/>
+			))}
+		</div>
+	);
+}
+
+function FilmstripTile({
+	mediaId,
+	file,
+	sourceTimeSec,
+	leftPx,
+	widthPx,
+	heightPx,
+	bitmapWidth,
+	bitmapHeight,
+}: {
+	mediaId: string;
+	file: File;
+	sourceTimeSec: number;
+	leftPx: number;
+	widthPx: number;
+	heightPx: number;
+	bitmapWidth: number;
+	bitmapHeight: number;
+}) {
+	const requestKey = `${mediaId}:${sourceTimeSec}:${bitmapWidth}x${bitmapHeight}`;
+	const [loaded, setLoaded] = useState<{
+		requestKey: string;
+		url: string;
+	} | null>(null);
+
+	useEffect(() => {
+		let isCancelled = false;
+		void thumbnailCache
+			.getTile({
+				mediaId,
+				file,
+				time: sourceTimeSec,
+				width: bitmapWidth,
+				height: bitmapHeight,
+			})
+			.then((url) => {
+				if (!isCancelled && url) {
+					setLoaded({ requestKey, url });
+				}
+			});
+		return () => {
+			isCancelled = true;
+		};
+	}, [mediaId, file, sourceTimeSec, bitmapWidth, bitmapHeight, requestKey]);
+
+	if (!loaded || loaded.requestKey !== requestKey) {
+		return null;
+	}
+
+	return (
+		<div
+			className="absolute top-0"
+			style={{
+				left: `${leftPx}px`,
+				width: `${widthPx}px`,
+				height: `${heightPx}px`,
+				backgroundImage: `url(${loaded.url})`,
+				backgroundSize: "100% 100%",
+			}}
+		/>
+	);
+}