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:
vrubelroman 2026-09-16 18:44:30 +00:00
commit 0ed20bb838
90 changed files with 8545 additions and 0 deletions

View 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