From c628b5a8ee6650b223cdc7aa5b6b000bc1e2466d Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Mon, 14 Jul 2025 23:53:11 +0600
Subject: fix improve timeline element visual display by tiling repeating media
 thumbnails

---
 .../web/src/components/editor/timeline-element.tsx | 81 +++++++++++++++++-----
 1 file changed, 62 insertions(+), 19 deletions(-)

(limited to 'apps/web/src/components/editor/timeline-element.tsx')

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index ee9445f3..2a704227 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -24,6 +24,8 @@ import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
 import {
   getTrackElementClasses,
   TIMELINE_CONSTANTS,
+  getTrackHeight,
+  calculateMediaTiling,
 } from "@/constants/timeline-constants";
 import {
   DropdownMenu,
@@ -268,34 +270,75 @@ export function TimelineElement({
     }
 
     if (mediaItem.type === "image") {
+      // Use utility function to calculate optimal tiling
+      const tiling = calculateMediaTiling(elementWidth, track.type, "image");
+
       return (
-        <div className="w-full h-full flex items-center justify-center">
-          <div className="bg-[#004D52] py-3 w-full h-full">
-            <img
-              src={mediaItem.url}
-              alt={mediaItem.name}
-              className="w-full h-full object-cover"
-              draggable={false}
-            />
+        <div className="w-full h-full flex items-center justify-start overflow-hidden">
+          <div className="bg-[#004D52]/20 h-full flex">
+            {Array.from({ length: tiling.totalTiles }, (_, index) => {
+              const isPartialTile =
+                index === tiling.numCompleteTiles && tiling.showPartialTile;
+              const tileWidthToUse = isPartialTile
+                ? tiling.remainingWidth
+                : tiling.tileWidth;
+
+              return (
+                <div
+                  key={index}
+                  className="flex-shrink-0 h-full overflow-hidden"
+                  style={{ width: `${tileWidthToUse}px` }}
+                >
+                  <img
+                    src={mediaItem.url}
+                    alt={mediaItem.name}
+                    className="w-full h-full object-cover"
+                    draggable={false}
+                  />
+                </div>
+              );
+            })}
           </div>
         </div>
       );
     }
 
     if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
+      // Use utility function to calculate optimal tiling
+      const tiling = calculateMediaTiling(elementWidth, track.type, "video");
+
       return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="w-8 h-8 flex-shrink-0">
-            <img
-              src={mediaItem.thumbnailUrl}
-              alt={mediaItem.name}
-              className="w-full h-full object-cover rounded-sm"
-              draggable={false}
-            />
+        <div className="w-full h-full flex items-center overflow-hidden relative">
+          <div className="flex h-full">
+            {Array.from({ length: tiling.totalTiles }, (_, index) => {
+              const isPartialTile =
+                index === tiling.numCompleteTiles && tiling.showPartialTile;
+              const tileWidthToUse = isPartialTile
+                ? tiling.remainingWidth
+                : tiling.tileWidth;
+
+              return (
+                <div
+                  key={index}
+                  className="flex-shrink-0 h-full flex items-center justify-center p-1 overflow-hidden"
+                  style={{ width: `${tileWidthToUse}px` }}
+                >
+                  <img
+                    src={mediaItem.thumbnailUrl}
+                    alt={mediaItem.name}
+                    className="w-full h-full object-cover rounded-sm"
+                    draggable={false}
+                  />
+                </div>
+              );
+            })}
           </div>
-          <span className="text-xs text-foreground/80 truncate flex-1">
-            {element.name}
-          </span>
+          {/* Show name overlay on the right if there's sufficient space */}
+          {tiling.canShowOverlay && (
+            <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
+              {element.name}
+            </div>
+          )}
         </div>
       );
     }
-- 
cgit v1.3.1


From 2c941b1585d9fea0207fd9eae68775475dc462c4 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Tue, 15 Jul 2025 00:12:01 +0600
Subject: fix: optimize media thumbnail display by removing tiling utility and
 using CSS background instead

---
 .../web/src/components/editor/timeline-element.tsx | 81 ++++++++--------------
 apps/web/src/constants/timeline-constants.ts       | 51 --------------
 2 files changed, 27 insertions(+), 105 deletions(-)

(limited to 'apps/web/src/components/editor/timeline-element.tsx')

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 2a704227..5f5a2c6d 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -25,7 +25,6 @@ import {
   getTrackElementClasses,
   TIMELINE_CONSTANTS,
   getTrackHeight,
-  calculateMediaTiling,
 } from "@/constants/timeline-constants";
 import {
   DropdownMenu,
@@ -270,71 +269,45 @@ export function TimelineElement({
     }
 
     if (mediaItem.type === "image") {
-      // Use utility function to calculate optimal tiling
-      const tiling = calculateMediaTiling(elementWidth, track.type, "image");
+      // Calculate tile size based on 16:9 aspect ratio
+      const trackHeight = getTrackHeight(track.type);
+      const tileHeight = trackHeight - 8; // Account for padding
+      const tileWidth = tileHeight * (16 / 9);
 
       return (
         <div className="w-full h-full flex items-center justify-start overflow-hidden">
-          <div className="bg-[#004D52]/20 h-full flex">
-            {Array.from({ length: tiling.totalTiles }, (_, index) => {
-              const isPartialTile =
-                index === tiling.numCompleteTiles && tiling.showPartialTile;
-              const tileWidthToUse = isPartialTile
-                ? tiling.remainingWidth
-                : tiling.tileWidth;
-
-              return (
-                <div
-                  key={index}
-                  className="flex-shrink-0 h-full overflow-hidden"
-                  style={{ width: `${tileWidthToUse}px` }}
-                >
-                  <img
-                    src={mediaItem.url}
-                    alt={mediaItem.name}
-                    className="w-full h-full object-cover"
-                    draggable={false}
-                  />
-                </div>
-              );
-            })}
-          </div>
+          <div
+            className="bg-[#004D52]/20 h-full w-full"
+            style={{
+              backgroundImage: `url(${mediaItem.url})`,
+              backgroundRepeat: "repeat-x",
+              backgroundSize: `${tileWidth}px ${tileHeight}px`,
+              backgroundPosition: "left center",
+            }}
+          />
         </div>
       );
     }
 
     if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
-      // Use utility function to calculate optimal tiling
-      const tiling = calculateMediaTiling(elementWidth, track.type, "video");
+      // Calculate tile size based on 16:9 aspect ratio
+      const trackHeight = getTrackHeight(track.type);
+      const tileHeight = trackHeight - 16; // Account for padding
+      const tileWidth = tileHeight * (16 / 9);
 
       return (
         <div className="w-full h-full flex items-center overflow-hidden relative">
-          <div className="flex h-full">
-            {Array.from({ length: tiling.totalTiles }, (_, index) => {
-              const isPartialTile =
-                index === tiling.numCompleteTiles && tiling.showPartialTile;
-              const tileWidthToUse = isPartialTile
-                ? tiling.remainingWidth
-                : tiling.tileWidth;
-
-              return (
-                <div
-                  key={index}
-                  className="flex-shrink-0 h-full flex items-center justify-center p-1 overflow-hidden"
-                  style={{ width: `${tileWidthToUse}px` }}
-                >
-                  <img
-                    src={mediaItem.thumbnailUrl}
-                    alt={mediaItem.name}
-                    className="w-full h-full object-cover rounded-sm"
-                    draggable={false}
-                  />
-                </div>
-              );
-            })}
-          </div>
+          <div
+            className="h-full w-full"
+            style={{
+              backgroundImage: `url(${mediaItem.thumbnailUrl})`,
+              backgroundRepeat: "repeat-x",
+              backgroundSize: `${tileWidth}px ${tileHeight}px`,
+              backgroundPosition: "left center",
+            }}
+          />
           {/* Show name overlay on the right if there's sufficient space */}
-          {tiling.canShowOverlay && (
+          {elementWidth > tileWidth * 1.5 && (
             <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
               {element.name}
             </div>
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 44773b84..92045c5e 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -104,54 +104,3 @@ 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,
-  };
-}
-- 
cgit v1.3.1


From d53321ec366979512d5e5a8cccc56b00cd84c1cf Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Tue, 15 Jul 2025 00:42:19 +0600
Subject: fix: enhance media tile display with aspect ratio adjustments and
 overlay borders

---
 .../web/src/components/editor/timeline-element.tsx | 88 ++++++++++++++++------
 1 file changed, 65 insertions(+), 23 deletions(-)

(limited to 'apps/web/src/components/editor/timeline-element.tsx')

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 5f5a2c6d..ca229818 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -268,46 +268,88 @@ export function TimelineElement({
       );
     }
 
+    const TILE_ASPECT_RATIO = 16 / 9;
+
     if (mediaItem.type === "image") {
       // Calculate tile size based on 16:9 aspect ratio
       const trackHeight = getTrackHeight(track.type);
       const tileHeight = trackHeight - 8; // Account for padding
-      const tileWidth = tileHeight * (16 / 9);
+      const tileWidth = tileHeight * TILE_ASPECT_RATIO;
 
       return (
         <div className="w-full h-full flex items-center justify-start overflow-hidden">
-          <div
-            className="bg-[#004D52]/20 h-full w-full"
-            style={{
-              backgroundImage: `url(${mediaItem.url})`,
-              backgroundRepeat: "repeat-x",
-              backgroundSize: `${tileWidth}px ${tileHeight}px`,
-              backgroundPosition: "left center",
-            }}
-          />
+          <div className="bg-[#004D52]/20 h-full w-full relative">
+            {/* Background with tiled images */}
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundImage: mediaItem.url
+                  ? `url(${mediaItem.url})`
+                  : "none",
+                backgroundRepeat: "repeat-x",
+                backgroundSize: `${tileWidth}px ${tileHeight}px`,
+                backgroundPosition: "left center",
+              }}
+            />
+            {/* Overlay with vertical borders */}
+            <div
+              className="absolute inset-0 pointer-events-none"
+              style={{
+                backgroundImage: `repeating-linear-gradient(
+                  to right,
+                  transparent 0px,
+                  transparent ${tileWidth - 1}px,
+                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
+                  rgba(255, 255, 255, 0.6) ${tileWidth}px
+                )`,
+                backgroundPosition: "left center",
+              }}
+            />
+          </div>
         </div>
       );
     }
 
+    const VIDEO_TILE_PADDING = 16;
+    const OVERLAY_SPACE_MULTIPLIER = 1.5;
+
     if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
-      // Calculate tile size based on 16:9 aspect ratio
       const trackHeight = getTrackHeight(track.type);
-      const tileHeight = trackHeight - 16; // Account for padding
-      const tileWidth = tileHeight * (16 / 9);
+      const tileHeight = trackHeight - VIDEO_TILE_PADDING;
+      const tileWidth = tileHeight * TILE_ASPECT_RATIO;
 
       return (
         <div className="w-full h-full flex items-center overflow-hidden relative">
-          <div
-            className="h-full w-full"
-            style={{
-              backgroundImage: `url(${mediaItem.thumbnailUrl})`,
-              backgroundRepeat: "repeat-x",
-              backgroundSize: `${tileWidth}px ${tileHeight}px`,
-              backgroundPosition: "left center",
-            }}
-          />
+          <div className="h-full w-full relative">
+            {/* Background with tiled thumbnails */}
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundImage: mediaItem.thumbnailUrl
+                  ? `url(${mediaItem.thumbnailUrl})`
+                  : "none",
+                backgroundRepeat: "repeat-x",
+                backgroundSize: `${tileWidth}px ${tileHeight}px`,
+                backgroundPosition: "left center",
+              }}
+            />
+            {/* Overlay with vertical borders */}
+            <div
+              className="absolute inset-0 pointer-events-none"
+              style={{
+                backgroundImage: `repeating-linear-gradient(
+                  to right,
+                  transparent 0px,
+                  transparent ${tileWidth - 1}px,
+                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
+                  rgba(255, 255, 255, 0.6) ${tileWidth}px
+                )`,
+                backgroundPosition: "left center",
+              }}
+            />
+          </div>
           {/* Show name overlay on the right if there's sufficient space */}
-          {elementWidth > tileWidth * 1.5 && (
+          {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER && (
             <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
               {element.name}
             </div>
-- 
cgit v1.3.1


From 7a725ecd0962fa0c37c78dc22827eb9e08c903f3 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 15 Jul 2025 17:29:28 +0200
Subject: cleanup

---
 .../web/src/components/editor/timeline-element.tsx | 23 ++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

(limited to 'apps/web/src/components/editor/timeline-element.tsx')

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index ca229818..8cccd0e4 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -277,11 +277,11 @@ export function TimelineElement({
       const tileWidth = tileHeight * TILE_ASPECT_RATIO;
 
       return (
-        <div className="w-full h-full flex items-center justify-start overflow-hidden">
-          <div className="bg-[#004D52]/20 h-full w-full relative">
+        <div className="w-full h-full flex items-center justify-center">
+          <div className="bg-[#004D52] py-3 w-full h-full relative">
             {/* Background with tiled images */}
             <div
-              className="absolute inset-0"
+              className="absolute top-3 bottom-3 left-0 right-0"
               style={{
                 backgroundImage: mediaItem.url
                   ? `url(${mediaItem.url})`
@@ -289,11 +289,13 @@ export function TimelineElement({
                 backgroundRepeat: "repeat-x",
                 backgroundSize: `${tileWidth}px ${tileHeight}px`,
                 backgroundPosition: "left center",
+                pointerEvents: "none",
               }}
+              aria-label={`Tiled background of ${mediaItem.name}`}
             />
             {/* Overlay with vertical borders */}
             <div
-              className="absolute inset-0 pointer-events-none"
+              className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
               style={{
                 backgroundImage: `repeating-linear-gradient(
                   to right,
@@ -319,8 +321,8 @@ export function TimelineElement({
       const tileWidth = tileHeight * TILE_ASPECT_RATIO;
 
       return (
-        <div className="w-full h-full flex items-center overflow-hidden relative">
-          <div className="h-full w-full relative">
+        <div className="w-full h-full flex items-center gap-2">
+          <div className="flex-1 h-full relative overflow-hidden">
             {/* Background with tiled thumbnails */}
             <div
               className="absolute inset-0"
@@ -331,7 +333,9 @@ export function TimelineElement({
                 backgroundRepeat: "repeat-x",
                 backgroundSize: `${tileWidth}px ${tileHeight}px`,
                 backgroundPosition: "left center",
+                pointerEvents: "none",
               }}
+              aria-label={`Tiled thumbnail of ${mediaItem.name}`}
             />
             {/* Overlay with vertical borders */}
             <div
@@ -348,11 +352,14 @@ export function TimelineElement({
               }}
             />
           </div>
-          {/* Show name overlay on the right if there's sufficient space */}
-          {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER && (
+          {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER ? (
             <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
               {element.name}
             </div>
+          ) : (
+            <span className="text-xs text-foreground/80 truncate flex-shrink-0 max-w-[120px]">
+              {element.name}
+            </span>
           )}
         </div>
       );
-- 
cgit v1.3.1