Implement Phase 6: MeTube download integration

- 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>
This commit is contained in:
vrubelroman 2026-09-16 18:56:17 +00:00
parent 0ed20bb838
commit fe16c08daa
27 changed files with 1125 additions and 48 deletions

View file

@ -0,0 +1,87 @@
import { useEffect, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import type { FeedVideoDto } from '../api/client'
import { downloadVideo, getDownloadStatus } from '../api/client'
const ACTIVE_STATUSES = ['queued', 'downloading', 'postprocessing']
const STATUS_LABELS: Record<string, string> = {
queued: 'В очереди...',
postprocessing: 'Обработка...',
}
interface Props {
video: FeedVideoDto
}
function DownloadButton({ video }: Props) {
const queryClient = useQueryClient()
const [polling, setPolling] = useState(ACTIVE_STATUSES.includes(video.local.status))
const statusQuery = useQuery({
queryKey: ['download-status', video.youtube_video_id],
queryFn: () => getDownloadStatus(video.youtube_video_id),
enabled: polling,
refetchInterval: (query) => (query.state.data && ACTIVE_STATUSES.includes(query.state.data.status) ? 2000 : false),
initialData: polling
? {
status: video.local.status,
progress_percent: video.local.progress_percent,
media_url: video.local.media_url,
error_message: null,
}
: undefined,
})
const downloadMutation = useMutation({
mutationFn: () => downloadVideo(video.youtube_video_id),
onSuccess: (data) => {
queryClient.setQueryData(['download-status', video.youtube_video_id], data)
setPolling(true)
},
})
const current = polling ? statusQuery.data : undefined
const status = current?.status ?? video.local.status
const percent = current?.progress_percent ?? video.local.progress_percent
useEffect(() => {
if (current && !ACTIVE_STATUSES.includes(current.status)) {
setPolling(false)
if (current.status === 'completed' || current.status === 'failed') {
queryClient.invalidateQueries({ queryKey: ['feed'] })
}
}
}, [current?.status, queryClient])
if (status === 'completed') {
return <span className="download-badge completed">✓ На сервере</span>
}
if (status === 'downloading') {
return <span className="download-badge">{percent ?? 0}%</span>
}
if (status === 'queued' || status === 'postprocessing') {
return <span className="download-badge">{STATUS_LABELS[status]}</span>
}
if (status === 'failed') {
return (
<span className="download-error">
<span className="download-badge error">Ошибка</span>
<button onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
Повторить
</button>
</span>
)
}
return (
<button onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
⬇ Скачать
</button>
)
}
export default DownloadButton