External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: enhance media tile display with aspect ratio adjustments and overlay borders

Browse Source
This commit is contained in:
Anwarul Islam
2025-07-15 00:42:19 +06:00
parent 2c941b1585
commit d53321ec36
1 changed files with 65 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline-element.tsx
+65 -23
View File
@@ -268,46 +268,88 @@ export function TimelineElement({
); );
} }
const TILE_ASPECT_RATIO = 16 / 9;
if (mediaItem.type === "image") { if (mediaItem.type === "image") {
// Calculate tile size based on 16:9 aspect ratio // Calculate tile size based on 16:9 aspect ratio
const trackHeight = getTrackHeight(track.type); const trackHeight = getTrackHeight(track.type);
const tileHeight = trackHeight - 8; // Account for padding const tileHeight = trackHeight - 8; // Account for padding
const tileWidth = tileHeight * (16 / 9); const tileWidth = tileHeight * TILE_ASPECT_RATIO;
return ( return (
<div className="w-full h-full flex items-center justify-start overflow-hidden"> <div className="w-full h-full flex items-center justify-start overflow-hidden">
<div <div className="bg-[#004D52]/20 h-full w-full relative">
className="bg-[#004D52]/20 h-full w-full" {/* Background with tiled images */}
style={{ <div
backgroundImage: `url(${mediaItem.url})`, className="absolute inset-0"
backgroundRepeat: "repeat-x", style={{
backgroundSize: `${tileWidth}px ${tileHeight}px`, backgroundImage: mediaItem.url
backgroundPosition: "left center", ? `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> </div>
); );
} }
const VIDEO_TILE_PADDING = 16;
const OVERLAY_SPACE_MULTIPLIER = 1.5;
if (mediaItem.type === "video" && mediaItem.thumbnailUrl) { if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
// Calculate tile size based on 16:9 aspect ratio
const trackHeight = getTrackHeight(track.type); const trackHeight = getTrackHeight(track.type);
const tileHeight = trackHeight - 16; // Account for padding const tileHeight = trackHeight - VIDEO_TILE_PADDING;
const tileWidth = tileHeight * (16 / 9); const tileWidth = tileHeight * TILE_ASPECT_RATIO;
return ( return (
<div className="w-full h-full flex items-center overflow-hidden relative"> <div className="w-full h-full flex items-center overflow-hidden relative">
<div <div className="h-full w-full relative">
className="h-full w-full" {/* Background with tiled thumbnails */}
style={{ <div
backgroundImage: `url(${mediaItem.thumbnailUrl})`, className="absolute inset-0"
backgroundRepeat: "repeat-x", style={{
backgroundSize: `${tileWidth}px ${tileHeight}px`, backgroundImage: mediaItem.thumbnailUrl
backgroundPosition: "left center", ? `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 */} {/* 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"> <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} {element.name}
</div> </div>