fix improve timeline element visual display by tiling repeating media thumbnails

1 files changed, 51 insertions, 0 deletions

diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 92045c5e..44773b84 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -104,3 +104,54 @@ export function snapTimeToFrame(time: number, fps: number): number {
 export function getFrameDuration(fps: number): number {
   return 1 / fps;
 }
+
+// Media thumbnail tiling constants
+export const MEDIA_THUMBNAIL_CONSTANTS = {
+  DEFAULT_ASPECT_RATIO: 16 / 9,
+  IMAGE_PADDING: 8,
+  VIDEO_PADDING: 16,
+  PARTIAL_TILE_THRESHOLD_IMAGE: 0.2, // Show partial tile if >20% visible for images
+  PARTIAL_TILE_THRESHOLD_VIDEO: 0.3, // Show partial tile if >30% visible for videos
+  MIN_OVERLAY_WIDTH_RATIO: 1.5, // Minimum width ratio to show name overlay
+} as const;
+
+// Utility function to calculate media thumbnail tiling
+export function calculateMediaTiling(
+  elementWidth: number,
+  trackType: TrackType,
+  mediaType: "image" | "video"
+) {
+  const trackHeight = getTrackHeight(trackType);
+  const aspectRatio = MEDIA_THUMBNAIL_CONSTANTS.DEFAULT_ASPECT_RATIO;
+  const padding =
+    mediaType === "image"
+      ? MEDIA_THUMBNAIL_CONSTANTS.IMAGE_PADDING
+      : MEDIA_THUMBNAIL_CONSTANTS.VIDEO_PADDING;
+
+  const tileHeight = trackHeight - padding;
+  const tileWidth = tileHeight * aspectRatio;
+
+  // Calculate how many complete tiles we can fit
+  const numCompleteTiles = Math.floor(elementWidth / tileWidth);
+  const remainingWidth = elementWidth - numCompleteTiles * tileWidth;
+
+  const threshold =
+    mediaType === "image"
+      ? MEDIA_THUMBNAIL_CONSTANTS.PARTIAL_TILE_THRESHOLD_IMAGE
+      : MEDIA_THUMBNAIL_CONSTANTS.PARTIAL_TILE_THRESHOLD_VIDEO;
+
+  const showPartialTile = remainingWidth > tileWidth * threshold;
+  const totalTiles = numCompleteTiles + (showPartialTile ? 1 : 0);
+
+  return {
+    tileWidth,
+    tileHeight,
+    numCompleteTiles,
+    remainingWidth,
+    showPartialTile,
+    totalTiles: Math.max(1, totalTiles), // Always show at least one tile
+    canShowOverlay:
+      elementWidth >
+      tileWidth * MEDIA_THUMBNAIL_CONSTANTS.MIN_OVERLAY_WIDTH_RATIO,
+  };
+}