Implement Phases 1-5: skeleton, OAuth, categories, video sync/feed, playback
- FastAPI + PostgreSQL + Alembic + React/Vite skeleton, Docker Compose, healthcheck - Google OAuth (single allowed account), encrypted refresh token storage - Subscriptions sync with pagination, uploads playlist batch fetch - Categories CRUD, many-to-many channel assignment, category filtering - Video sync (playlistItems + videos.list batching), cached feed with cursor pagination, background scheduler (APScheduler) - Video detail page with YouTube embed player - SPA fallback routing, optimistic UI updates, client-side query caching 40 backend tests covering OAuth allow-list, sync idempotency, cascade deletes, cursor pagination, and category filtering. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
commit
0ed20bb838
90 changed files with 8545 additions and 0 deletions
40
frontend/src/components/VideoCard.tsx
Normal file
40
frontend/src/components/VideoCard.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Link } from 'react-router-dom'
|
||||
import type { FeedVideoDto } from '../api/client'
|
||||
import { formatDuration, formatRelativeTime } from '../utils/format'
|
||||
|
||||
interface Props {
|
||||
video: FeedVideoDto
|
||||
}
|
||||
|
||||
function VideoCard({ video }: Props) {
|
||||
const duration = formatDuration(video.duration_seconds)
|
||||
const href = `/video/${video.youtube_video_id}`
|
||||
|
||||
return (
|
||||
<li className="video-card">
|
||||
<Link to={href} className="video-thumbnail">
|
||||
{video.thumbnail_url ? (
|
||||
<img src={video.thumbnail_url} alt={video.title} />
|
||||
) : (
|
||||
<div className="video-thumbnail-placeholder" />
|
||||
)}
|
||||
{duration && <span className="duration-badge">{duration}</span>}
|
||||
</Link>
|
||||
<div className="video-info">
|
||||
<Link to={href} className="video-title" title={video.title}>
|
||||
{video.title}
|
||||
</Link>
|
||||
<div className="video-meta">
|
||||
{video.channel.title} · {formatRelativeTime(video.published_at)}
|
||||
</div>
|
||||
<div className="video-actions">
|
||||
<Link to={href} className="button-link">
|
||||
Смотреть
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export default VideoCard
|
||||
Loading…
Add table
Add a link
Reference in a new issue