RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

consistent padding for media elements on timeline

This commit is contained in:
Maze Winther 2025-07-21 23:25:10 +02:00
parent 2bc7ae0ea3
commit 550f5363fd
1 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/components/editor/timeline/timeline-element.tsx
View File

@ -239,15 +239,15 @@ export function TimelineElement({
if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
const trackHeight = getTrackHeight(track.type);
const tileHeight = trackHeight - VIDEO_TILE_PADDING;
const tileHeight = trackHeight - 8; // Match image padding
const tileWidth = tileHeight * TILE_ASPECT_RATIO;
return (
<div className="w-full h-full flex items-center gap-2">
<div className="flex-1 h-full relative overflow-hidden">
<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 thumbnails */}
<div
className="absolute inset-0"
className="absolute top-3 bottom-3 left-0 right-0"
style={{
backgroundImage: mediaItem.thumbnailUrl
? `url(${mediaItem.thumbnailUrl})`
@ -261,7 +261,7 @@ export function TimelineElement({
/>
{/* 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,
@ -274,15 +274,6 @@ export function TimelineElement({
}}
/>
</div>
{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>
);
}