feat: add image preview for large view cards

- Extract YouTube video thumbnails from URLs
- Display thumbnail images as background in large preview cards
- Add gradient overlay for better text contrast
- Fallback to icon placeholder for non-YouTube URLs
- Handle multiple YouTube URL formats (watch, youtu.be, shorts)
- Gracefully handle missing images with icon fallback
This commit is contained in:
Gigi
2025-10-03 10:16:22 +02:00
parent bd3193957c
commit 57c5be9907
3 changed files with 67 additions and 7 deletions

View File

@@ -12,6 +12,7 @@ import ContentWithResolvedProfiles from './ContentWithResolvedProfiles'
import { extractUrlsFromContent } from '../services/bookmarkHelpers'
import { classifyUrl } from '../utils/helpers'
import { ViewMode } from './Bookmarks'
import { getPreviewImage } from '../utils/imagePreview'
interface BookmarkItemProps {
bookmark: IndividualBookmark
@@ -124,14 +125,22 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
// Large preview view rendering
if (viewMode === 'large') {
const firstUrl = hasUrls ? extractedUrls[0] : null
const previewImage = firstUrl ? getPreviewImage(firstUrl, firstUrlClassification?.type || '') : null
return (
<div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
{hasUrls && (
<div className="large-preview-image" onClick={() => onSelectUrl?.(extractedUrls[0])}>
{/* Placeholder for future image preview */}
<div className="preview-placeholder">
<FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
</div>
<div
className="large-preview-image"
onClick={() => onSelectUrl?.(extractedUrls[0])}
style={previewImage ? { backgroundImage: `url(${previewImage})` } : undefined}
>
{!previewImage && (
<div className="preview-placeholder">
<FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
</div>
)}
</div>
)}