feat: Created ContentListItem component with horizontal flexbox layout:…
- "src/frontend/src/components/ContentListItem.tsx" GSD-Task: S03/T01
This commit is contained in:
jlightner
parent
ab7ab3634b
commit
592c8b1317
1 changed files with 295 additions and 0 deletions
295
src/frontend/src/components/ContentListItem.tsx
Normal file
295
src/frontend/src/components/ContentListItem.tsx
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
import { Bookmark, BookmarkPlus, Download, ExternalLink, Film, Music } from 'lucide-react';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
import { DownloadProgressBar } from './DownloadProgressBar';
|
||||
import { useDownloadProgress } from '../contexts/DownloadProgressContext';
|
||||
import type { ContentItem } from '@shared/types/index';
|
||||
|
||||
// ── Helpers (shared pattern with ContentCard) ──
|
||||
|
||||
function formatDuration(seconds: number | null): string {
|
||||
if (seconds == null) return '';
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function formatRelativeTime(isoString: string | null): string {
|
||||
if (!isoString) return '';
|
||||
const delta = Date.now() - Date.parse(isoString);
|
||||
if (delta < 0) return 'just now';
|
||||
const seconds = Math.floor(delta / 1000);
|
||||
if (seconds < 60) return 'just now';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days < 30) return `${days}d ago`;
|
||||
const months = Math.floor(days / 30);
|
||||
if (months < 12) return `${months}mo ago`;
|
||||
return `${Math.floor(months / 12)}y ago`;
|
||||
}
|
||||
|
||||
// ── Component ──
|
||||
|
||||
interface ContentListItemProps {
|
||||
item: ContentItem;
|
||||
selected: boolean;
|
||||
onSelect: (id: number) => void;
|
||||
onToggleMonitored: (id: number, monitored: boolean) => void;
|
||||
onDownload: (id: number) => void;
|
||||
}
|
||||
|
||||
export function ContentListItem({ item, selected, onSelect, onToggleMonitored, onDownload }: ContentListItemProps) {
|
||||
const progress = useDownloadProgress(item.id);
|
||||
const duration = formatDuration(item.duration);
|
||||
const published = formatRelativeTime(item.publishedAt);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-3)',
|
||||
padding: 'var(--space-2)',
|
||||
backgroundColor: selected ? 'var(--bg-selected)' : 'var(--bg-card-solid)',
|
||||
border: selected ? '1px solid var(--accent)' : '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
transition: 'all var(--transition-fast)',
|
||||
cursor: 'pointer',
|
||||
minHeight: 56,
|
||||
}}
|
||||
onClick={() => onSelect(item.id)}
|
||||
onMouseEnter={(e) => {
|
||||
if (!selected) e.currentTarget.style.borderColor = 'var(--border-light)';
|
||||
// Reveal checkbox on hover
|
||||
const cb = e.currentTarget.querySelector('.list-checkbox') as HTMLElement | null;
|
||||
if (cb) cb.style.opacity = '1';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!selected) e.currentTarget.style.borderColor = 'var(--border)';
|
||||
// Hide checkbox if not selected
|
||||
const cb = e.currentTarget.querySelector('.list-checkbox') as HTMLElement | null;
|
||||
if (cb && !selected) cb.style.opacity = '0';
|
||||
}}
|
||||
>
|
||||
{/* Selection checkbox */}
|
||||
<div
|
||||
className="list-checkbox"
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
opacity: selected ? 1 : 0,
|
||||
transition: 'opacity var(--transition-fast)',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={`Select ${item.title}`}
|
||||
style={{
|
||||
width: 16,
|
||||
height: 16,
|
||||
cursor: 'pointer',
|
||||
accentColor: 'var(--accent)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail */}
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
flexShrink: 0,
|
||||
width: 100,
|
||||
aspectRatio: '16/9',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'var(--bg-input)',
|
||||
}}
|
||||
>
|
||||
{item.thumbnailUrl ? (
|
||||
<img
|
||||
src={item.thumbnailUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'var(--text-muted)',
|
||||
}}
|
||||
>
|
||||
{item.contentType === 'audio' ? <Music size={20} /> : <Film size={20} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Duration badge on thumbnail */}
|
||||
{duration && (
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 2,
|
||||
right: 2,
|
||||
padding: '0px 4px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
||||
color: '#fff',
|
||||
fontSize: '10px',
|
||||
fontWeight: 500,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
lineHeight: '16px',
|
||||
}}
|
||||
>
|
||||
{duration}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Download progress overlay */}
|
||||
{item.status === 'downloading' && progress && (
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}>
|
||||
<DownloadProgressBar progress={progress} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info section */}
|
||||
<div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{/* Title */}
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
fontSize: 'var(--font-size-sm)',
|
||||
color: 'var(--text-primary)',
|
||||
lineHeight: 1.3,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
title={item.title}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
|
||||
{/* Meta row: published · duration · content type */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2)',
|
||||
color: 'var(--text-muted)',
|
||||
fontSize: 'var(--font-size-xs)',
|
||||
}}
|
||||
>
|
||||
{published && <span>{published}</span>}
|
||||
{published && duration && <span style={{ opacity: 0.5 }}>·</span>}
|
||||
{duration && <span style={{ fontVariantNumeric: 'tabular-nums' }}>{duration}</span>}
|
||||
{(published || duration) && <span style={{ opacity: 0.5 }}>·</span>}
|
||||
<span style={{ textTransform: 'capitalize' }}>{item.contentType}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right section: status badge + action buttons */}
|
||||
<div
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2)',
|
||||
}}
|
||||
>
|
||||
<StatusBadge status={item.status} />
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-1)' }}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleMonitored(item.id, !item.monitored);
|
||||
}}
|
||||
title={item.monitored ? 'Unmonitor' : 'Monitor'}
|
||||
aria-label={item.monitored ? `Unmonitor ${item.title}` : `Monitor ${item.title}`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: item.monitored ? 'var(--accent)' : 'var(--text-muted)',
|
||||
transition: 'color var(--transition-fast)',
|
||||
}}
|
||||
>
|
||||
{item.monitored ? <Bookmark size={14} fill="currentColor" /> : <BookmarkPlus size={14} />}
|
||||
</button>
|
||||
|
||||
{item.status !== 'downloaded' && item.status !== 'downloading' && item.status !== 'queued' && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDownload(item.id);
|
||||
}}
|
||||
title="Download"
|
||||
aria-label={`Download ${item.title}`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--text-muted)',
|
||||
transition: 'color var(--transition-fast)',
|
||||
}}
|
||||
>
|
||||
<Download size={14} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
title="Open on YouTube"
|
||||
aria-label={`Open ${item.title} on YouTube`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--text-muted)',
|
||||
transition: 'color var(--transition-fast)',
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue