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>

frontend/src/pages/VideoPage.tsx

@@ -0,0 +1,78 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link, useParams } from 'react-router-dom'
+import { getVideo } from '../api/client'
+import { formatDuration, formatRelativeTime } from '../utils/format'
+
+function VideoPage() {
+  const { youtubeVideoId } = useParams<{ youtubeVideoId: string }>()
+
+  const videoQuery = useQuery({
+    queryKey: ['video', youtubeVideoId],
+    queryFn: () => getVideo(youtubeVideoId!),
+    enabled: !!youtubeVideoId,
+  })
+
+  if (videoQuery.isLoading) {
+    return (
+      <div className="video-page">
+        <p>Загрузка...</p>
+      </div>
+    )
+  }
+
+  if (videoQuery.isError || !videoQuery.data) {
+    return (
+      <div className="video-page">
+        <Link to="/" className="back-link">
+          ← Лента
+        </Link>
+        <p className="error">Видео не найдено</p>
+      </div>
+    )
+  }
+
+  const video = videoQuery.data
+  const duration = formatDuration(video.duration_seconds)
+
+  return (
+    <div className="video-page">
+      <Link to="/" className="back-link">
+        ← Лента
+      </Link>
+
+      <div className="player-wrapper">
+        <iframe
+          src={`https://www.youtube-nocookie.com/embed/${video.youtube_video_id}`}
+          title={video.title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </div>
+
+      <h1 className="video-page-title">{video.title}</h1>
+
+      <div className="video-page-meta">
+        <Link to={`/channels/${video.channel.id}/videos`}>{video.channel.title}</Link>
+        {' · '}
+        {formatRelativeTime(video.published_at)}
+        {duration && ` · ${duration}`}
+      </div>
+
+      <div className="video-page-source">Источник: YouTube</div>
+
+      {video.categories.length > 0 && (
+        <div className="video-page-categories">
+          {video.categories.map((c) => (
+            <span key={c.id} className="chip">
+              {c.name}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {video.description && <p className="video-page-description">{video.description}</p>}
+    </div>
+  )
+}
+
+export default VideoPage