Unify YouTube previews across library resource cards

Author: nicolasdma

src/app/dashboard/pipeline-course-card.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Play, BookOpen } from 'lucide-react';
 import type { Language } from '@/lib/translations';
-import { extractYoutubeId } from '@/lib/utils/youtube';
+import { getYoutubeThumbnailUrl } from '@/lib/utils/youtube';
 
 export interface PipelineCourseData {
   id: string;
@@ -46,10 +46,7 @@ export function PipelineCourseCard({
   course: PipelineCourseData;
   language: Language;
 }) {
-  const videoId = extractYoutubeId(course.url);
-  const thumbnailUrl = videoId
-    ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`
-    : null;
+  const thumbnailUrl = getYoutubeThumbnailUrl(course.url);
 
   const completedCount = course.progress?.completedSections?.length ?? 0;
   const progressPercent = course.sectionCount > 0 ? (completedCount / course.sectionCount) * 100 : 0;

src/app/library/resource-card.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { t, type Language } from '@/lib/translations';
 import { QuickQuiz } from '@/components/quick-quiz';
 import { CornerBrackets } from '@/components/ui/corner-brackets';
+import { ResourceVideoPreview } from './resource-video-preview';
 
 const RESOURCE_TYPE_ICONS: Record<string, string> = {
   youtube: '▶',
@@ -151,6 +152,13 @@ export function ResourceCard({ resource, isLoggedIn, language }: ResourceCardPro
         </span>
       </div>
 
+      <ResourceVideoPreview
+        url={resource.url}
+        title={resource.title}
+        animateOnHover={!isLocked}
+        className="mb-4"
+      />
+
       {/* Title */}
       <h3 className={`text-lg font-medium leading-tight mb-1 ${
         isLocked ? 'text-j-text-tertiary' : 'text-j-text'

src/app/library/resource-video-preview.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import { getYoutubeThumbnailUrl } from '@/lib/utils/youtube';
+
+interface ResourceVideoPreviewProps {
+  url?: string | null;
+  title: string;
+  className?: string;
+  animateOnHover?: boolean;
+}
+
+export function ResourceVideoPreview({
+  url,
+  title,
+  className = '',
+  animateOnHover = true,
+}: ResourceVideoPreviewProps) {
+  const thumbnailUrl = getYoutubeThumbnailUrl(url);
+
+  if (!thumbnailUrl) return null;
+
+  return (
+    <div
+      className={`relative aspect-video overflow-hidden border border-j-border bg-j-bg-alt/50 ${className}`.trim()}
+    >
+      <Image
+        src={thumbnailUrl}
+        alt={title}
+        fill
+        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+        className={`object-cover transition-transform duration-300 ${
+          animateOnHover ? 'group-hover:scale-105' : ''
+        }`}
+      />
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/45 via-transparent to-transparent" />
+      <span className="absolute left-2 top-2 border border-white/20 bg-black/60 px-1.5 py-0.5 font-mono text-[9px] tracking-[0.12em] uppercase text-white">
+        YouTube
+      </span>
+    </div>
+  );
+}

src/app/library/user-resource-card.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { CornerBrackets } from '@/components/ui/corner-brackets';
 import type { Language } from '@/lib/translations';
+import { ResourceVideoPreview } from './resource-video-preview';
 
 interface UserResource {
   id: string;
@@ -61,6 +62,12 @@ export function UserResourceCard({ resource, language }: UserResourceCardProps)
         </span>
       </div>
 
+      <ResourceVideoPreview
+        url={resource.url}
+        title={resource.title}
+        className="mb-4"
+      />
+
       {/* Icon + Title */}
       <div className="flex items-start gap-2 mb-3">
         <span className="text-lg shrink-0">{icon}</span>

src/lib/utils/youtube.ts

@@ -14,3 +14,12 @@ export function extractYoutubeId(url: string | null): string | null {
 export function isValidYoutubeUrl(url: string): boolean {
   return YOUTUBE_REGEX.test(url);
 }
+
+export function getYoutubeThumbnailUrl(
+  url: string | null | undefined,
+  quality: 'default' | 'mqdefault' | 'hqdefault' | 'sddefault' | 'maxresdefault' = 'mqdefault'
+): string | null {
+  const videoId = extractYoutubeId(url ?? null);
+  if (!videoId) return null;
+  return `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
+}