fe16c08daa
- MeTubeClient encapsulates all MeTube HTTP/Socket.IO calls (verified against
the real MeTube source: /add returns no job id, GET /history gives a queue
snapshot for reconciliation, filenames arrive already relative, percent is
a 0-100 float)
- download_jobs table + service: request/dedup active downloads, apply live
Socket.IO events (added/updated/completed/canceled/cleared) matched by
canonical YouTube URL, safe relative-path -> public media URL construction
- Reconciliation on startup against MeTube's live queue/done state (section 19):
non-terminal jobs recovered where possible, else marked "unknown"; already
completed jobs are left untouched
- POST/GET /api/videos/{id}/download(-status), recheck-local; feed/video
detail now report real local availability instead of a stub
- Frontend: download button with live status polling (queued/downloading %/
postprocessing/completed/failed+retry), local <video> playback with
YouTube fallback on playback error
- health.py now delegates to MeTubeClient (single place for MeTube calls)
26 new backend tests (63 total). Verified live: Socket.IO connects
successfully to the real MeTube instance on deploy.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
||
import { Link, useParams } from 'react-router-dom'
|
||
import { getVideo } from '../api/client'
|
||
import { formatDuration, formatRelativeTime } from '../utils/format'
|
||
import DownloadButton from '../components/DownloadButton'
|
||
import Player from '../components/Player'
|
||
|
||
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>
|
||
|
||
<Player video={video} />
|
||
|
||
<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}`}
|
||
{' · '}
|
||
<DownloadButton video={video} />
|
||
</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
|