467 lines
19 KiB
TypeScript
467 lines
19 KiB
TypeScript
'use client';
|
||
|
||
import React, { useEffect, useState } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
|
||
interface OfflineDownloadTask {
|
||
id: string;
|
||
source: string;
|
||
videoId: string;
|
||
episodeIndex: number;
|
||
title: string;
|
||
m3u8Url: string;
|
||
status: 'pending' | 'downloading' | 'completed' | 'error' | 'paused';
|
||
progress: number;
|
||
totalSegments: number;
|
||
downloadedSegments: number;
|
||
errorMessage?: string;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
downloadDir: string;
|
||
metadata?: {
|
||
videoTitle?: string;
|
||
cover?: string;
|
||
description?: string;
|
||
year?: string;
|
||
rating?: number;
|
||
totalEpisodes?: number;
|
||
};
|
||
}
|
||
|
||
interface OfflineDownloadPanelProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function OfflineDownloadPanel({ isOpen, onClose }: OfflineDownloadPanelProps) {
|
||
const [tasks, setTasks] = useState<OfflineDownloadTask[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [mounted, setMounted] = useState(false);
|
||
const [viewMode, setViewMode] = useState<'tasks' | 'library'>('tasks'); // 视图模式：任务列表或视频库
|
||
|
||
// 确保只在客户端渲染
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
}, []);
|
||
|
||
// 获取任务列表
|
||
const fetchTasks = async () => {
|
||
try {
|
||
const response = await fetch('/api/offline-download');
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setTasks(data.tasks || []);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取离线下载任务列表失败:', error);
|
||
}
|
||
};
|
||
|
||
// 删除任务
|
||
const handleDeleteTask = async (taskId: string) => {
|
||
try {
|
||
const response = await fetch(`/api/offline-download?taskId=${taskId}`, {
|
||
method: 'DELETE',
|
||
});
|
||
|
||
if (response.ok) {
|
||
// 从列表中移除
|
||
setTasks((prev) => prev.filter((t) => t.id !== taskId));
|
||
} else {
|
||
const data = await response.json();
|
||
alert(`删除失败: ${data.error}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('删除任务失败:', error);
|
||
alert('删除任务失败');
|
||
}
|
||
};
|
||
|
||
// 重试任务
|
||
const handleRetryTask = async (taskId: string) => {
|
||
try {
|
||
const response = await fetch(`/api/offline-download?taskId=${taskId}&action=retry`, {
|
||
method: 'PUT',
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
// 更新任务状态（保留进度，只重试失败的片段）
|
||
setTasks((prev) =>
|
||
prev.map((t) =>
|
||
t.id === taskId
|
||
? {
|
||
...t,
|
||
status: 'pending',
|
||
errorMessage: undefined,
|
||
updatedAt: new Date().toISOString(),
|
||
}
|
||
: t
|
||
)
|
||
);
|
||
// 立即刷新以获取最新状态
|
||
fetchTasks();
|
||
} else {
|
||
const data = await response.json();
|
||
alert(`重试失败: ${data.error}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('重试任务失败:', error);
|
||
alert('重试任务失败');
|
||
}
|
||
};
|
||
|
||
// 定期刷新任务列表
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
fetchTasks();
|
||
const interval = setInterval(fetchTasks, 3000); // 每3秒刷新一次
|
||
return () => clearInterval(interval);
|
||
}
|
||
}, [isOpen]);
|
||
|
||
if (!isOpen || !mounted) {
|
||
return null;
|
||
}
|
||
|
||
const getStatusText = (status: OfflineDownloadTask['status']) => {
|
||
switch (status) {
|
||
case 'pending':
|
||
return '等待中';
|
||
case 'downloading':
|
||
return '下载中';
|
||
case 'paused':
|
||
return '已暂停';
|
||
case 'completed':
|
||
return '已完成';
|
||
case 'error':
|
||
return '错误';
|
||
default:
|
||
return '未知';
|
||
}
|
||
};
|
||
|
||
const getStatusColor = (status: OfflineDownloadTask['status']) => {
|
||
switch (status) {
|
||
case 'pending':
|
||
return 'text-gray-500 dark:text-gray-400';
|
||
case 'downloading':
|
||
return 'text-blue-500 dark:text-blue-400';
|
||
case 'paused':
|
||
return 'text-yellow-500 dark:text-yellow-400';
|
||
case 'completed':
|
||
return 'text-green-500 dark:text-green-400';
|
||
case 'error':
|
||
return 'text-red-500 dark:text-red-400';
|
||
default:
|
||
return 'text-gray-500 dark:text-gray-400';
|
||
}
|
||
};
|
||
|
||
// 获取视频库中的视频（按videoId分组，包含已完成和有进度的任务）
|
||
const getLibraryVideos = () => {
|
||
// 筛选已完成或有下载进度的任务
|
||
const libraryTasks = tasks.filter((t) => t.status === 'completed' || t.progress > 0);
|
||
const videoMap = new Map<string, { video: OfflineDownloadTask; episodes: OfflineDownloadTask[] }>();
|
||
|
||
libraryTasks.forEach((task) => {
|
||
const key = `${task.source}_${task.videoId}`;
|
||
if (!videoMap.has(key)) {
|
||
videoMap.set(key, { video: task, episodes: [] });
|
||
}
|
||
videoMap.get(key)!.episodes.push(task);
|
||
});
|
||
|
||
// 按集数排序
|
||
videoMap.forEach((value) => {
|
||
value.episodes.sort((a, b) => a.episodeIndex - b.episodeIndex);
|
||
});
|
||
|
||
return Array.from(videoMap.values());
|
||
};
|
||
|
||
const libraryVideos = getLibraryVideos();
|
||
|
||
const panelContent = (
|
||
<div className='fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4'>
|
||
<div className='bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-full max-w-4xl max-h-[80vh] flex flex-col'>
|
||
{/* 标题栏 */}
|
||
<div className='flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700'>
|
||
<h2 className='text-xl font-bold text-gray-900 dark:text-white'>
|
||
{viewMode === 'tasks' ? '离线下载任务列表' : '视频库'}
|
||
</h2>
|
||
<div className='flex items-center gap-3'>
|
||
{/* 视图切换按钮 */}
|
||
<div className='flex gap-2'>
|
||
<button
|
||
onClick={() => setViewMode('tasks')}
|
||
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
|
||
viewMode === 'tasks'
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
任务列表
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('library')}
|
||
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
|
||
viewMode === 'library'
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
视频库 ({libraryVideos.length})
|
||
</button>
|
||
</div>
|
||
{/* 关闭按钮 */}
|
||
<button
|
||
onClick={onClose}
|
||
className='text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors'
|
||
>
|
||
<svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 内容区域 */}
|
||
<div className='flex-1 overflow-y-auto p-4 space-y-3'>
|
||
{loading ? (
|
||
<div className='flex items-center justify-center h-full'>
|
||
<div className='animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500'></div>
|
||
</div>
|
||
) : viewMode === 'library' ? (
|
||
// 视频库视图
|
||
libraryVideos.length === 0 ? (
|
||
<div className='flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400'>
|
||
<svg className='w-16 h-16 mb-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
strokeWidth='2'
|
||
d='M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z'
|
||
/>
|
||
</svg>
|
||
<p className='text-lg'>暂无已完成的视频</p>
|
||
</div>
|
||
) : (
|
||
libraryVideos.map(({ video, episodes }) => (
|
||
<div
|
||
key={`${video.source}_${video.videoId}`}
|
||
className='bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600'
|
||
>
|
||
<div className='flex gap-4'>
|
||
{/* 封面图 */}
|
||
{video.metadata?.cover && (
|
||
<div className='flex-shrink-0'>
|
||
<img
|
||
src={video.metadata.cover}
|
||
alt={video.metadata.videoTitle || video.title}
|
||
className='w-32 h-48 object-cover rounded'
|
||
/>
|
||
</div>
|
||
)}
|
||
{/* 视频信息 */}
|
||
<div className='flex-1 min-w-0'>
|
||
<h3 className='text-lg font-bold text-gray-900 dark:text-white mb-2'>
|
||
{video.metadata?.videoTitle || video.title}
|
||
</h3>
|
||
{video.metadata?.year && (
|
||
<p className='text-sm text-gray-600 dark:text-gray-400 mb-1'>年份: {video.metadata.year}</p>
|
||
)}
|
||
{video.metadata?.rating && (
|
||
<p className='text-sm text-gray-600 dark:text-gray-400 mb-1'>
|
||
评分: {video.metadata.rating.toFixed(1)}
|
||
</p>
|
||
)}
|
||
{video.metadata?.description && (
|
||
<p className='text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2'>
|
||
{video.metadata.description}
|
||
</p>
|
||
)}
|
||
<div className='flex items-center gap-2 mb-3'>
|
||
<span className='text-sm text-gray-600 dark:text-gray-400'>
|
||
已下载 {episodes.length} 集
|
||
</span>
|
||
{video.metadata?.totalEpisodes && (
|
||
<span className='text-sm text-gray-600 dark:text-gray-400'>
|
||
/ 共 {video.metadata.totalEpisodes} 集
|
||
</span>
|
||
)}
|
||
</div>
|
||
{/* 集数列表 */}
|
||
<div className='flex flex-wrap gap-2 mb-3'>
|
||
{episodes.map((ep) => (
|
||
<div
|
||
key={ep.id}
|
||
className='flex items-center gap-1 px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs rounded group'
|
||
>
|
||
<span>第{ep.episodeIndex + 1}集</span>
|
||
<button
|
||
onClick={() => {
|
||
if (confirm(`确定要删除第${ep.episodeIndex + 1}集吗？`)) {
|
||
handleDeleteTask(ep.id);
|
||
}
|
||
}}
|
||
className='ml-1 opacity-0 group-hover:opacity-100 transition-opacity text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300'
|
||
title='删除此集'
|
||
>
|
||
<svg className='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
strokeWidth='2'
|
||
d='M6 18L18 6M6 6l12 12'
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{/* 删除全部按钮 */}
|
||
<button
|
||
onClick={() => {
|
||
if (confirm(`确定要删除《${video.metadata?.videoTitle || video.title}》的所有已下载集数吗？`)) {
|
||
episodes.forEach((ep) => handleDeleteTask(ep.id));
|
||
}
|
||
}}
|
||
className='flex items-center gap-1 px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded transition-colors'
|
||
>
|
||
<svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
strokeWidth='2'
|
||
d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'
|
||
/>
|
||
</svg>
|
||
删除全部集数
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)
|
||
) : tasks.length === 0 ? (
|
||
// 任务列表为空
|
||
<div className='flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400'>
|
||
<svg className='w-16 h-16 mb-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
strokeWidth='2'
|
||
d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'
|
||
/>
|
||
</svg>
|
||
<p className='text-lg'>暂无离线下载任务</p>
|
||
</div>
|
||
) : (
|
||
// 任务列表视图
|
||
tasks.map((task) => (
|
||
<div
|
||
key={task.id}
|
||
className='bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600'
|
||
>
|
||
{/* 任务信息 */}
|
||
<div className='flex items-start justify-between mb-3'>
|
||
<div className='flex-1 min-w-0'>
|
||
<h3 className='text-sm font-medium text-gray-900 dark:text-white truncate mb-1'>
|
||
{task.title}
|
||
</h3>
|
||
<p className='text-xs text-gray-500 dark:text-gray-400'>
|
||
来源: {task.source} | 视频ID: {task.videoId} | 第{task.episodeIndex + 1}集
|
||
</p>
|
||
</div>
|
||
<div className='flex items-center gap-2 ml-4'>
|
||
<span className={`text-xs font-medium ${getStatusColor(task.status)}`}>
|
||
{getStatusText(task.status)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 进度条 */}
|
||
{task.totalSegments > 0 && (
|
||
<div className='mb-3'>
|
||
<div className='flex items-center justify-between text-xs text-gray-600 dark:text-gray-300 mb-1'>
|
||
<span>
|
||
{task.downloadedSegments} / {task.totalSegments} 片段
|
||
</span>
|
||
<span>{task.progress.toFixed(1)}%</span>
|
||
</div>
|
||
<div className='w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 overflow-hidden'>
|
||
<div
|
||
className={`h-full rounded-full transition-all duration-300 ${
|
||
task.status === 'downloading'
|
||
? 'bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse'
|
||
: task.status === 'completed'
|
||
? 'bg-green-500'
|
||
: task.status === 'error'
|
||
? 'bg-red-500'
|
||
: 'bg-gray-400'
|
||
}`}
|
||
style={{ width: `${task.progress}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 错误信息 */}
|
||
{task.errorMessage && (
|
||
<div className='mb-3'>
|
||
<div className='text-xs text-red-500 dark:text-red-400'>{task.errorMessage}</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 时间信息 */}
|
||
<div className='flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-3'>
|
||
<span>创建: {new Date(task.createdAt).toLocaleString('zh-CN')}</span>
|
||
<span>更新: {new Date(task.updatedAt).toLocaleString('zh-CN')}</span>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className='flex items-center gap-2'>
|
||
{/* 重试按钮 - 只在错误或暂停状态显示 */}
|
||
{(task.status === 'error' || task.status === 'paused') && (
|
||
<button
|
||
onClick={() => handleRetryTask(task.id)}
|
||
className='flex items-center gap-1 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded transition-colors'
|
||
>
|
||
<svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
strokeWidth='2'
|
||
d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
|
||
/>
|
||
</svg>
|
||
重试
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => handleDeleteTask(task.id)}
|
||
className='flex items-center gap-1 px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded transition-colors'
|
||
>
|
||
<svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||
<path
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
strokeWidth='2'
|
||
d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'
|
||
/>
|
||
</svg>
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return createPortal(panelContent, document.body);
|
||
}
|