From 1e64bc4abd8464ae733f884de46ffa13760035cc Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Mon, 14 Jul 2025 23:49:48 +0600 Subject: [PATCH 1/4] fix improve timeline element visual display --- apps/web/src/components/editor/timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 71e2997b..6c3d731d 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -192,7 +192,7 @@ export function Timeline() { let scrollLeft = 0; if (isRulerClick) { - // Calculate based on ruler position + // Calculate based on ruler position const rulerContent = rulerScrollRef.current?.querySelector( "[data-radix-scroll-area-viewport]" ) as HTMLElement; From c628b5a8ee6650b223cdc7aa5b6b000bc1e2466d Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Mon, 14 Jul 2025 23:53:11 +0600 Subject: [PATCH 2/4] fix improve timeline element visual display by tiling repeating media thumbnails --- .../components/editor/timeline-element.tsx | 81 ++++++++++++++----- apps/web/src/components/editor/timeline.tsx | 2 +- apps/web/src/constants/timeline-constants.ts | 51 ++++++++++++ 3 files changed, 114 insertions(+), 20 deletions(-) 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 ( -
-
- {mediaItem.name} +
+
+ {Array.from({ length: tiling.totalTiles }, (_, index) => { + const isPartialTile = + index === tiling.numCompleteTiles && tiling.showPartialTile; + const tileWidthToUse = isPartialTile + ? tiling.remainingWidth + : tiling.tileWidth; + + return ( +
+ {mediaItem.name} +
+ ); + })}
); } if (mediaItem.type === "video" && mediaItem.thumbnailUrl) { + // Use utility function to calculate optimal tiling + const tiling = calculateMediaTiling(elementWidth, track.type, "video"); + return ( -
-
- {mediaItem.name} +
+
+ {Array.from({ length: tiling.totalTiles }, (_, index) => { + const isPartialTile = + index === tiling.numCompleteTiles && tiling.showPartialTile; + const tileWidthToUse = isPartialTile + ? tiling.remainingWidth + : tiling.tileWidth; + + return ( +
+ {mediaItem.name} +
+ ); + })}
- - {element.name} - + {/* Show name overlay on the right if there's sufficient space */} + {tiling.canShowOverlay && ( +
+ {element.name} +
+ )}
); } diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 6c3d731d..71e2997b 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -192,7 +192,7 @@ export function Timeline() { let scrollLeft = 0; if (isRulerClick) { - // Calculate based on ruler position + // Calculate based on ruler position const rulerContent = rulerScrollRef.current?.querySelector( "[data-radix-scroll-area-viewport]" ) as HTMLElement; 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, + }; +} From 2c941b1585d9fea0207fd9eae68775475dc462c4 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Tue, 15 Jul 2025 00:12:01 +0600 Subject: [PATCH 3/4] fix: optimize media thumbnail display by removing tiling utility and using CSS background instead --- .../components/editor/timeline-element.tsx | 81 +++++++------------ apps/web/src/constants/timeline-constants.ts | 51 ------------ 2 files changed, 27 insertions(+), 105 deletions(-) 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 (
-
- {Array.from({ length: tiling.totalTiles }, (_, index) => { - const isPartialTile = - index === tiling.numCompleteTiles && tiling.showPartialTile; - const tileWidthToUse = isPartialTile - ? tiling.remainingWidth - : tiling.tileWidth; - - return ( -
- {mediaItem.name} -
- ); - })} -
+
); } 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 (
-
- {Array.from({ length: tiling.totalTiles }, (_, index) => { - const isPartialTile = - index === tiling.numCompleteTiles && tiling.showPartialTile; - const tileWidthToUse = isPartialTile - ? tiling.remainingWidth - : tiling.tileWidth; - - return ( -
- {mediaItem.name} -
- ); - })} -
+
{/* Show name overlay on the right if there's sufficient space */} - {tiling.canShowOverlay && ( + {elementWidth > tileWidth * 1.5 && (
{element.name}
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, - }; -} From d53321ec366979512d5e5a8cccc56b00cd84c1cf Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Tue, 15 Jul 2025 00:42:19 +0600 Subject: [PATCH 4/4] fix: enhance media tile display with aspect ratio adjustments and overlay borders --- .../components/editor/timeline-element.tsx | 88 ++++++++++++++----- 1 file changed, 65 insertions(+), 23 deletions(-) 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 (
-
+
+ {/* Background with tiled images */} +
+ {/* Overlay with vertical borders */} +
+
); } + 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 (
-
+
+ {/* Background with tiled thumbnails */} +
+ {/* Overlay with vertical borders */} +
+
{/* Show name overlay on the right if there's sufficient space */} - {elementWidth > tileWidth * 1.5 && ( + {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER && (
{element.name}