219 lines
7.2 KiB
TypeScript
219 lines
7.2 KiB
TypeScript
/* eslint-disable no-console */
|
||
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import { AlertTriangle } from 'lucide-react';
|
||
|
||
import type { PlayRecord } from '@/lib/db.client';
|
||
import {
|
||
clearAllPlayRecords,
|
||
getAllPlayRecords,
|
||
subscribeToDataUpdates,
|
||
} from '@/lib/db.client';
|
||
|
||
import VideoCard from '@/components/VideoCard';
|
||
import VirtualScrollableRow from '@/components/VirtualScrollableRow';
|
||
|
||
interface ContinueWatchingProps {
|
||
className?: string;
|
||
}
|
||
|
||
export default function ContinueWatching({ className }: ContinueWatchingProps) {
|
||
const [playRecords, setPlayRecords] = useState<
|
||
(PlayRecord & { key: string })[]
|
||
>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||
|
||
// 处理播放记录数据更新的函数
|
||
const updatePlayRecords = (allRecords: Record<string, PlayRecord>) => {
|
||
// 将记录转换为数组并根据 save_time 由近到远排序
|
||
const recordsArray = Object.entries(allRecords).map(([key, record]) => ({
|
||
...record,
|
||
key,
|
||
}));
|
||
|
||
// 按 save_time 降序排序（最新的在前面）
|
||
const sortedRecords = recordsArray.sort(
|
||
(a, b) => b.save_time - a.save_time
|
||
);
|
||
|
||
setPlayRecords(sortedRecords);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const fetchPlayRecords = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
// 从缓存或API获取所有播放记录
|
||
const allRecords = await getAllPlayRecords();
|
||
updatePlayRecords(allRecords);
|
||
} catch (error) {
|
||
console.error('获取播放记录失败:', error);
|
||
setPlayRecords([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchPlayRecords();
|
||
|
||
// 监听播放记录更新事件
|
||
const unsubscribe = subscribeToDataUpdates(
|
||
'playRecordsUpdated',
|
||
(newRecords: Record<string, PlayRecord>) => {
|
||
updatePlayRecords(newRecords);
|
||
}
|
||
);
|
||
|
||
return unsubscribe;
|
||
}, []);
|
||
|
||
// 如果没有播放记录，则不渲染组件
|
||
if (!loading && playRecords.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
// 计算播放进度百分比
|
||
const getProgress = (record: PlayRecord) => {
|
||
if (record.total_time === 0) return 0;
|
||
return (record.play_time / record.total_time) * 100;
|
||
};
|
||
|
||
// 从 key 中解析 source 和 id
|
||
const parseKey = (key: string) => {
|
||
const [source, id] = key.split('+');
|
||
return { source, id };
|
||
};
|
||
|
||
// 处理清空确认
|
||
const handleClearConfirm = async () => {
|
||
await clearAllPlayRecords();
|
||
setPlayRecords([]);
|
||
setShowConfirmDialog(false);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<section className={`mb-8 ${className || ''}`}>
|
||
<div className='mb-4 flex items-center justify-between'>
|
||
<h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
|
||
继续观看
|
||
</h2>
|
||
{!loading && playRecords.length > 0 && (
|
||
<button
|
||
className='text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
|
||
onClick={() => setShowConfirmDialog(true)}
|
||
>
|
||
清空
|
||
</button>
|
||
)}
|
||
</div>
|
||
{loading ? (
|
||
// 加载状态显示灰色占位数据（使用原始 ScrollableRow）
|
||
<div className="flex gap-2 overflow-x-auto scrollbar-hide">
|
||
{Array.from({ length: 8 }).map((_, index) => (
|
||
<div
|
||
key={index}
|
||
className='min-w-[180px] w-48 sm:min-w-[200px] sm:w-52'
|
||
>
|
||
<div className='relative aspect-[3/2] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
|
||
<div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
|
||
</div>
|
||
<div className='mt-1 h-1 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
|
||
<div className='mt-2 h-4 bg-gray-200 rounded animate-pulse dark:bg-gray-800 w-3/4'></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
// 使用虚拟滚动显示真实数据
|
||
<VirtualScrollableRow>
|
||
{playRecords.map((record) => {
|
||
const { source, id } = parseKey(record.key);
|
||
return (
|
||
<div
|
||
key={record.key}
|
||
className='min-w-[180px] w-48 sm:min-w-[200px] sm:w-52'
|
||
>
|
||
<VideoCard
|
||
id={id}
|
||
title={record.title}
|
||
poster={record.cover}
|
||
year={record.year}
|
||
source={source}
|
||
source_name={record.source_name}
|
||
progress={getProgress(record)}
|
||
episodes={record.total_episodes}
|
||
currentEpisode={record.index}
|
||
query={record.search_title}
|
||
from='playrecord'
|
||
onDelete={() =>
|
||
setPlayRecords((prev) =>
|
||
prev.filter((r) => r.key !== record.key)
|
||
)
|
||
}
|
||
type={record.total_episodes > 1 ? 'tv' : ''}
|
||
origin={record.origin}
|
||
orientation='horizontal'
|
||
playTime={record.play_time}
|
||
totalTime={record.total_time}
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</VirtualScrollableRow>
|
||
)}
|
||
</section>
|
||
|
||
{/* 确认对话框 */}
|
||
{showConfirmDialog && createPortal(
|
||
<div
|
||
className='fixed inset-0 bg-black bg-opacity-50 z-[9999] flex items-center justify-center p-4 transition-opacity duration-300'
|
||
onClick={() => setShowConfirmDialog(false)}
|
||
>
|
||
<div
|
||
className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full border border-red-200 dark:border-red-800 transition-all duration-300'
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-6">
|
||
{/* 图标和标题 */}
|
||
<div className="flex items-start gap-4 mb-4">
|
||
<div className="flex-shrink-0">
|
||
<AlertTriangle className="w-8 h-8 text-red-500" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||
清空播放记录
|
||
</h3>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
确定要清空所有播放记录吗？此操作不可恢复。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 按钮组 */}
|
||
<div className="flex gap-3 mt-6">
|
||
<button
|
||
onClick={() => setShowConfirmDialog(false)}
|
||
className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleClearConfirm}
|
||
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
|
||
>
|
||
确定清空
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
)}
|
||
</>
|
||
);
|
||
}
|