mirror of
https://github.com/dergigi/boris.git
synced 2026-02-16 20:45:01 +01:00
507288f51c
- Add imageCacheService with localStorage-based image caching and LRU eviction - Create useImageCache hook for React components to fetch and cache images - Integrate image caching with article service to cache cover images on load - Add image cache settings (enable/disable, size limit) to user settings - Update ReaderHeader to use cached images for article covers - Update BookmarkViews (CardView, LargeView) to use cached images - Add image cache configuration UI in OfflineModeSettings with: - Toggle to enable/disable image caching - Slider to set cache size limit (10-200 MB) - Display current cache stats (size and image count) - Clear cache button Images are cached in localStorage for offline viewing, with a configurable size limit (default 50MB). LRU eviction ensures cache stays within limits.
98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
|
|
import { format } from 'date-fns'
|
|
import { useImageCache } from '../hooks/useImageCache'
|
|
import { UserSettings } from '../services/settingsService'
|
|
|
|
interface ReaderHeaderProps {
|
|
title?: string
|
|
image?: string
|
|
summary?: string
|
|
published?: number
|
|
readingTimeText?: string | null
|
|
hasHighlights: boolean
|
|
highlightCount: number
|
|
settings?: UserSettings
|
|
}
|
|
|
|
const ReaderHeader: React.FC<ReaderHeaderProps> = ({
|
|
title,
|
|
image,
|
|
summary,
|
|
published,
|
|
readingTimeText,
|
|
hasHighlights,
|
|
highlightCount,
|
|
settings
|
|
}) => {
|
|
const cachedImage = useImageCache(image, settings)
|
|
const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
|
|
if (cachedImage) {
|
|
return (
|
|
<div className="reader-hero-image">
|
|
<img src={cachedImage} alt={title || 'Article image'} />
|
|
{formattedDate && (
|
|
<div className="publish-date-topright">
|
|
{formattedDate}
|
|
</div>
|
|
)}
|
|
{title && (
|
|
<div className="reader-header-overlay">
|
|
<h2 className="reader-title">{title}</h2>
|
|
{summary && <p className="reader-summary">{summary}</p>}
|
|
<div className="reader-meta">
|
|
{readingTimeText && (
|
|
<div className="reading-time">
|
|
<FontAwesomeIcon icon={faClock} />
|
|
<span>{readingTimeText}</span>
|
|
</div>
|
|
)}
|
|
{hasHighlights && (
|
|
<div className="highlight-indicator">
|
|
<FontAwesomeIcon icon={faHighlighter} />
|
|
<span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{title && (
|
|
<div className="reader-header">
|
|
{formattedDate && (
|
|
<div className="publish-date-topright">
|
|
{formattedDate}
|
|
</div>
|
|
)}
|
|
<h2 className="reader-title">{title}</h2>
|
|
{summary && <p className="reader-summary">{summary}</p>}
|
|
<div className="reader-meta">
|
|
{readingTimeText && (
|
|
<div className="reading-time">
|
|
<FontAwesomeIcon icon={faClock} />
|
|
<span>{readingTimeText}</span>
|
|
</div>
|
|
)}
|
|
{hasHighlights && (
|
|
<div className="highlight-indicator">
|
|
<FontAwesomeIcon icon={faHighlighter} />
|
|
<span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ReaderHeader
|
|
|
|
|