inputnoise/youclonedl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VideoCard: redesigned list view, removed grid descriptions, smaller mobile fonts

Browse Source 
List variant:
- Mobile thumbnail w-32 (128px) instead of w-56 (224px) — much less dominant
- Title 12px mobile / 14px desktop (was 15px everywhere)
- Channel/meta 10px mobile / 11px desktop
- Channel avatar shown next to channel name on desktop
- Description hidden on mobile, line-clamp-2 on desktop (was line-clamp-3)
- Actions always visible on mobile (hover:opacity on desktop only)
- Tighter spacing (gap-3, px-2, py-2)

Grid variant:
- Removed description entirely — too cluttered on narrow columns
- Title 12px mobile / 13px desktop
- Channel/meta 10px everywhere
- Avatar 28px mobile / 32px desktop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mattias Tall
2026-05-26 15:59:15 +02:00
parent cb05b739a8
commit 0d6dd94029
1 changed files with 69 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
frontend/src/components/VideoCard.jsx
View File

@@ -33,10 +33,8 @@ function IconBtn({ onClick, title, active, pending, children }) {
onClick={(e) => { e.stopPropagation(); onClick(e); }}
title={title}
className={clsx(
"flex items-center justify-center w-6 h-6 rounded-full transition-all duration-150",
active
? "text-accent"
: "text-zinc-600 hover:text-zinc-200",
"flex items-center justify-center w-7 h-7 rounded-full transition-all duration-150",
active ? "text-accent" : "text-zinc-600 hover:text-zinc-200",
pending && "opacity-60 cursor-default",
)}
>
@@ -104,7 +102,6 @@ function ThumbnailBlock({ video, isWatched, duration, calmMode, onDismiss, class
</div>
)}
{/* Dismiss */}
{video.is_recommended && !calmMode && (
<button
onClick={(e) => { e.stopPropagation(); onDismiss?.(); }}
@@ -117,35 +114,30 @@ function ThumbnailBlock({ video, isWatched, duration, calmMode, onDismiss, class
</button>
)}
{/* Duration */}
{duration && (
<span className="absolute bottom-2 right-2 bg-black/75 text-white text-[10px] font-medium px-1.5 py-0.5 rounded-md font-mono tabular-nums">
<span className="absolute bottom-1.5 right-1.5 bg-black/80 text-white text-[10px] font-medium px-1.5 py-0.5 rounded font-mono tabular-nums">
{duration}
</span>
)}
{/* Resolution */}
{video.download_resolution && (
<span className="absolute bottom-2 left-2 text-[10px] font-medium px-1.5 py-0.5 rounded-md font-mono text-accent bg-black/75">
<span className="absolute bottom-1.5 left-1.5 text-[10px] font-medium px-1.5 py-0.5 rounded font-mono text-accent bg-black/75">
{video.download_resolution}
</span>
)}
{/* Watched dot */}
{isWatched && (
<span className="absolute top-2 left-2 w-2 h-2 rounded-full bg-accent shadow-[0_0_6px_rgba(var(--color-accent-rgb),0.8)]" />
)}
{/* Play hover overlay */}
<div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<div className="w-11 h-11 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center border border-white/20">
<div className="absolute inset-0 bg-black/25 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<div className="w-10 h-10 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center border border-white/20">
<svg className="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
{/* Progress bar */}
{video.watch_progress_seconds > 0 && video.duration_seconds > 0 && (
<div className="absolute bottom-0 inset-x-0 h-[3px] bg-white/10">
<div
@@ -176,13 +168,15 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
? (Date.now() - new Date(channelMeta.last_published_at)) / (1000 * 60 * 60 * 24) > 180
: false;
const avatarUrl = video.channel_thumbnail_url ?? channelMeta?.thumbnail_url ?? null;
const avatarLetter = video.channel_name?.[0]?.toUpperCase() ?? "?";
const internalId = video.id ?? video.local_video_id ?? null;
const isDownloaded = video.is_downloaded;
const isWatched = video.is_watched;
const duration = formatDuration(video.duration_seconds);
const date = formatDate(video.published_at);
const [downloaded, setDownloaded] = useState(isDownloaded);
const [downloaded, setDownloaded] = useState(video.is_downloaded);
const [queued, setQueued] = useState(video.queued ?? false);
const [liked, setLiked] = useState(video.liked ?? false);
@@ -204,7 +198,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
});
const actions = (
<div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-0" onClick={(e) => e.stopPropagation()}>
<IconBtn onClick={() => navigate(`/watch/${video.youtube_video_id}`)} title="Watch">
<svg className="w-3.5 h-3.5 ml-px" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
@@ -251,40 +245,53 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
</div>
);
// ── List variant ─────────────────────────────────────────────────────────
// ── List variant ────────────────────────────────────────────────────────────
if (variant === "list") {
return (
<div
onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
className="group flex gap-5 px-3 py-3.5 rounded-2xl cursor-pointer hover:bg-zinc-800/50 transition-colors duration-150"
className="group flex gap-3 sm:gap-4 px-2 sm:px-3 py-2 sm:py-3 rounded-xl cursor-pointer hover:bg-zinc-800/50 transition-colors duration-150"
>
{/* Thumbnail — compact on mobile, wide on desktop */}
<ThumbnailBlock
video={video}
isWatched={isWatched}
duration={duration}
calmMode={calmMode}
onDismiss={() => dismissMut.mutate()}
className="w-56 sm:w-72 aspect-video rounded-xl shrink-0"
className="w-32 sm:w-60 md:w-72 aspect-video rounded-lg shrink-0"
/>
<div className="flex flex-col min-w-0 flex-1 py-0.5 gap-2">
<div className="flex flex-col min-w-0 flex-1 gap-1 sm:gap-1.5 py-px sm:py-0.5">
{/* Title */}
<h3 className="font-semibold text-[15px] leading-snug text-zinc-50 line-clamp-2">
<h3 className="font-semibold text-[12px] sm:text-[14px] leading-snug text-zinc-50 line-clamp-2">
{video.title}
</h3>
{/* Channel · date · badges */}
<div className="flex items-center gap-2 flex-wrap">
<span className="text-[12px] text-zinc-400 truncate">{video.channel_name}</span>
{date && <span className="text-zinc-700 text-[12px]">·</span>}
{date && <span className="text-[12px] text-zinc-600 shrink-0">{date}</span>}
{/* Channel row */}
<div className="flex items-center gap-1.5 min-w-0 flex-wrap">
{avatarUrl && (
<img src={avatarUrl} alt="" className="hidden sm:block w-4 h-4 rounded-full object-cover shrink-0" />
)}
<span className="text-[10px] sm:text-[11px] text-zinc-400 truncate">{video.channel_name}</span>
{date && (
<>
<span className="text-zinc-700 text-[10px]">·</span>
<span className="text-[10px] sm:text-[11px] text-zinc-500 shrink-0">{date}</span>
</>
)}
</div>
{/* Views + badges */}
<div className="flex items-center gap-1.5 flex-wrap text-[10px] text-zinc-600">
{video.view_count > 0 && <span>{formatViews(video.view_count)}</span>}
{video.is_recommended && !calmMode && (
<span className="text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
<span className="text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full font-semibold tracking-wide text-[9px]">
Discover
</span>
)}
{isDormant && !calmMode && (
<span title="No uploads in 6+ months" className="text-[10px] text-zinc-700 tracking-widest">zzz</span>
<span title="No uploads in 6+ months" className="text-zinc-700 tracking-widest text-[9px]">zzz</span>
)}
{channelNote && (
<span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default">
@@ -295,17 +302,15 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
)}
</div>
{/* Description */}
{video.description ? (
<p className="text-[12px] leading-relaxed text-zinc-500 line-clamp-3 flex-1">
{/* Description — desktop only, 2 lines max */}
{video.description && (
<p className="hidden sm:block text-[11px] leading-relaxed text-zinc-500 line-clamp-2">
{video.description.replace(/\n+/g, " ")}
</p>
) : (
<div className="flex-1" />
)}
{/* Actions — fade in on hover */}
<div className="opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150 mt-auto">
{/* Actions — always visible on mobile, fade on desktop */}
<div className="mt-auto pt-1 sm:opacity-0 sm:pointer-events-none sm:group-hover:opacity-100 sm:group-hover:pointer-events-auto sm:transition-opacity sm:duration-150">
{actions}
</div>
</div>
@@ -313,10 +318,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
);
}
// ── Grid variant ─────────────────────────────────────────────────────────
const avatarUrl = video.channel_thumbnail_url ?? channelMeta?.thumbnail_url ?? null;
const avatarLetter = video.channel_name?.[0]?.toUpperCase() ?? "?";
// ── Grid variant ────────────────────────────────────────────────────────────
return (
<div
onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
@@ -335,56 +337,62 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
className="aspect-video rounded-t-2xl overflow-hidden"
/>
<div className="flex gap-2.5 p-3 flex-1">
<div className="flex gap-2 sm:gap-2.5 p-2 sm:p-3 flex-1">
{/* Channel avatar */}
<div className="shrink-0 mt-0.5" onClick={(e) => { e.stopPropagation(); navigate(`/channels/${video.channel_id}`); }}>
<div
className="shrink-0 mt-0.5"
onClick={(e) => { e.stopPropagation(); navigate(`/channels/${video.channel_id}`); }}
>
{avatarUrl ? (
<img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover hover:ring-2 hover:ring-accent/50 transition-all" />
<img
src={avatarUrl}
alt=""
className="w-7 h-7 sm:w-8 sm:h-8 rounded-full object-cover hover:ring-2 hover:ring-accent/50 transition-all"
/>
) : (
<div className="w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center text-xs font-bold text-zinc-400 hover:ring-2 hover:ring-accent/50 transition-all">
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-zinc-700 flex items-center justify-center text-[11px] font-bold text-zinc-400 hover:ring-2 hover:ring-accent/50 transition-all">
{avatarLetter}
</div>
)}
</div>
{/* Text + actions */}
<div className="flex flex-col gap-1 min-w-0 flex-1">
<p className="font-medium text-[13px] leading-snug text-zinc-50 line-clamp-2">
<div className="flex flex-col gap-0.5 sm:gap-1 min-w-0 flex-1">
<p className="font-medium text-[12px] sm:text-[13px] leading-snug text-zinc-50 line-clamp-2">
{video.title}
</p>
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
<div className="flex items-center gap-1 flex-wrap">
<span className="text-[10px] sm:text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
{channelNote && (
<span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default">
<span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default shrink-0">
<svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
<path d="M3 5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2zm2 0v14h14V5zm2 3h10v2H7zm0 4h7v2H7z"/>
</svg>
</span>
)}
{isDormant && !calmMode && (
<span title="No uploads in 6+ months" className="text-[9px] text-zinc-700 tracking-widest">zzz</span>
<span title="No uploads in 6+ months" className="text-[9px] text-zinc-700 tracking-widest shrink-0">zzz</span>
)}
{video.is_recommended && !calmMode && (
<span className="text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
<span className="text-[9px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1 py-px rounded-full shrink-0">
Discover
</span>
)}
</div>
<div className="flex items-center gap-1.5 flex-wrap text-[11px] text-zinc-600">
<div className="flex items-center gap-1 flex-wrap text-[10px] text-zinc-600">
{date && <span>{date}</span>}
{video.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
{video.view_count > 0 && (
<>
<span>·</span>
<span>{formatViews(video.view_count)}</span>
</>
)}
</div>
{video.description && (
<p className="hidden sm:block text-[11px] leading-relaxed text-zinc-500 line-clamp-2 mt-0.5">
{video.description.replace(/\n+/g, " ")}
</p>
)}
{/* Actions — fade in on hover */}
<div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
{/* Actions — desktop hover only (touch users tap to watch) */}
<div className="mt-auto pt-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
{actions}
</div>
</div>