dylan/vod-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD duration overlay to VideoCard

Browse Source
This commit is contained in:
Dylan De Faoite
2025-07-09 23:33:31 +02:00
parent 16781aec04
commit 87759c689a
2 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/video/VideoCard.tsx
View File

@@ -27,19 +27,37 @@ const VideoCard = ({
return ( return (
<Link to={videoPath}> <Link to={videoPath}>
<div className={clsx("flex flex-col", className)}> <div className={clsx("flex flex-col", className)}>
<img <div className={"relative inline-block"}>
src={imgSrc} <img
alt="Video Thumbnail" src={imgSrc}
onError={() => { alt="Video Thumbnail"
if (imgSrc !== fallbackThumbnail) { onError={() => {
setImgSrc(fallbackThumbnail); if (imgSrc !== fallbackThumbnail) {
} setImgSrc(fallbackThumbnail);
}} }
/> }}
/>
<p className="
absolute
top-2
left-2
bg-black bg-opacity-60
text-white
px-2
py-1
rounded
pointer-events-none
text-sm
z-1
">
{formatTime(duration)}
</p>
</div>
<div className={"flex flex-row justify-between items-center p-2"}> <div className={"flex flex-row justify-between items-center p-2"}>
<p>{title}</p> <p>{title == "" ? "(No Title)" : title}</p>
<p>{formatTime(duration)}</p>
</div> </div>
</div> </div>
</Link> </Link>

2
frontend/src/pages/MyClips.tsx
View File

@@ -20,7 +20,7 @@ const MyClips = () => {
duration={clip.duration} duration={clip.duration}
thumbnailPath={clip.thumbnailPath} thumbnailPath={clip.thumbnailPath}
videoPath={clip.videoPath} videoPath={clip.videoPath}
className={"w-40 p-5"} className={"w-40 m-5"}
/> />
))} ))}