mirror of
https://github.com/dergigi/boris.git
synced 2026-01-06 08:24:27 +01:00
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:
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user