mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-24 04:04:43 +08:00
436 lines
14 KiB
TypeScript
436 lines
14 KiB
TypeScript
import { Heart, Link as LinkIcon } from 'lucide-react';
|
||
import Image from 'next/image';
|
||
import { useRouter } from 'next/navigation';
|
||
import React, { useEffect, useMemo, useState } from 'react';
|
||
|
||
import { deletePlayRecord, isFavorited, toggleFavorite } from '@/lib/db.client';
|
||
|
||
import { ImagePlaceholder } from '@/components/ImagePlaceholder';
|
||
|
||
// 聚合卡需要的基本字段，与搜索接口保持一致
|
||
interface SearchResult {
|
||
id: string;
|
||
title: string;
|
||
poster: string;
|
||
source: string;
|
||
source_name: string;
|
||
douban_id?: number;
|
||
episodes: string[];
|
||
}
|
||
|
||
interface VideoCardProps {
|
||
id: string;
|
||
source: string;
|
||
title: string;
|
||
poster: string;
|
||
episodes?: number;
|
||
source_name: string;
|
||
progress?: number;
|
||
year?: string;
|
||
from?: string;
|
||
currentEpisode?: number;
|
||
douban_id?: number;
|
||
onDelete?: () => void;
|
||
|
||
// 可选属性，根据存在与否决定卡片行为
|
||
rate?: string; // 如果存在，按demo卡片处理
|
||
items?: SearchResult[]; // 如果存在，按aggregate卡片处理
|
||
}
|
||
|
||
function CheckCircleCustom() {
|
||
return (
|
||
<span className='inline-flex items-center justify-center'>
|
||
<svg
|
||
width='24'
|
||
height='24'
|
||
viewBox='0 0 32 32'
|
||
fill='none'
|
||
xmlns='http://www.w3.org/2000/svg'
|
||
>
|
||
<circle cx='16' cy='16' r='13' stroke='white' strokeWidth='2' />
|
||
<path
|
||
d='M11 16.5L15 20L21 13.5'
|
||
stroke='white'
|
||
strokeWidth='2'
|
||
strokeLinecap='round'
|
||
strokeLinejoin='round'
|
||
/>
|
||
</svg>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function PlayCircleSolid({
|
||
className = '',
|
||
fillColor = 'none',
|
||
}: {
|
||
className?: string;
|
||
fillColor?: string;
|
||
}) {
|
||
return (
|
||
<svg
|
||
width='44'
|
||
height='44'
|
||
viewBox='0 0 44 44'
|
||
fill='none'
|
||
xmlns='http://www.w3.org/2000/svg'
|
||
className={`${className} block relative`}
|
||
>
|
||
<circle
|
||
cx='22'
|
||
cy='22'
|
||
r='20'
|
||
stroke='white'
|
||
strokeWidth='1.5'
|
||
fill={fillColor}
|
||
/>
|
||
<polygon points='19,15 19,29 29,22' fill='white' />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export default function VideoCard({
|
||
id,
|
||
title,
|
||
poster,
|
||
episodes,
|
||
source,
|
||
source_name,
|
||
progress,
|
||
year,
|
||
from,
|
||
currentEpisode,
|
||
douban_id,
|
||
onDelete,
|
||
rate,
|
||
items,
|
||
}: VideoCardProps) {
|
||
const [playHover, setPlayHover] = useState(false);
|
||
const [favorited, setFavorited] = useState(false);
|
||
const [isLoaded, setIsLoaded] = useState(false);
|
||
const [isDeleting, setIsDeleting] = useState(false);
|
||
const router = useRouter();
|
||
|
||
// 判断卡片类型
|
||
const isDemo = !!rate;
|
||
const isAggregate = !!items && items.length > 0;
|
||
const isStandard = !isDemo && !isAggregate;
|
||
|
||
// 处理聚合卡片的逻辑
|
||
const aggregateData = useMemo(() => {
|
||
if (!isAggregate) {
|
||
return null;
|
||
}
|
||
|
||
const first = items[0];
|
||
|
||
// 统计出现次数最多的（非 0） douban_id
|
||
const countMap = new Map<number, number>();
|
||
items.forEach((item) => {
|
||
if (item.douban_id && item.douban_id !== 0) {
|
||
countMap.set(item.douban_id, (countMap.get(item.douban_id) || 0) + 1);
|
||
}
|
||
});
|
||
|
||
let mostFrequentDoubanId: number | undefined;
|
||
let maxCount = 0;
|
||
countMap.forEach((cnt, id) => {
|
||
if (cnt > maxCount) {
|
||
maxCount = cnt;
|
||
mostFrequentDoubanId = id;
|
||
}
|
||
});
|
||
|
||
// 统计最频繁的集数
|
||
const episodeCountMap = new Map<number, number>();
|
||
items.forEach((item) => {
|
||
const len = item.episodes?.length || 0;
|
||
if (len > 0) {
|
||
episodeCountMap.set(len, (episodeCountMap.get(len) || 0) + 1);
|
||
}
|
||
});
|
||
|
||
let mostFrequentEpisodes = 0;
|
||
let maxEpisodeCount = 0;
|
||
episodeCountMap.forEach((cnt, len) => {
|
||
if (cnt > maxEpisodeCount) {
|
||
maxEpisodeCount = cnt;
|
||
mostFrequentEpisodes = len;
|
||
}
|
||
});
|
||
|
||
return {
|
||
first,
|
||
mostFrequentDoubanId,
|
||
mostFrequentEpisodes,
|
||
};
|
||
}, [isAggregate, items]);
|
||
|
||
// 根据卡片类型决定实际使用的数据
|
||
const actualTitle =
|
||
isAggregate && aggregateData ? aggregateData.first.title : title;
|
||
const actualPoster =
|
||
isAggregate && aggregateData ? aggregateData.first.poster : poster;
|
||
const actualSource =
|
||
isAggregate && aggregateData ? aggregateData.first.source : source;
|
||
const actualId = isAggregate && aggregateData ? aggregateData.first.id : id;
|
||
const actualDoubanId =
|
||
isAggregate && aggregateData
|
||
? aggregateData.mostFrequentDoubanId
|
||
: douban_id;
|
||
const actualEpisodes =
|
||
isAggregate && aggregateData
|
||
? aggregateData.mostFrequentEpisodes
|
||
: episodes;
|
||
|
||
// 检查初始收藏状态（仅标准卡片）
|
||
useEffect(() => {
|
||
if (!isStandard) return;
|
||
|
||
(async () => {
|
||
try {
|
||
const fav = await isFavorited(actualSource, actualId);
|
||
setFavorited(fav);
|
||
} catch (err) {
|
||
throw new Error('检查收藏状态失败');
|
||
}
|
||
})();
|
||
}, [isStandard, actualSource, actualId]);
|
||
|
||
// 切换收藏状态（仅标准卡片）
|
||
const handleToggleFavorite = async (
|
||
e: React.MouseEvent<HTMLSpanElement | SVGElement, MouseEvent>
|
||
) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
if (!isStandard) return;
|
||
|
||
try {
|
||
const newState = await toggleFavorite(actualSource, actualId, {
|
||
title: actualTitle,
|
||
source_name,
|
||
year: year || '',
|
||
cover: actualPoster,
|
||
total_episodes: actualEpisodes ?? 1,
|
||
save_time: Date.now(),
|
||
});
|
||
setFavorited(newState);
|
||
} catch (err) {
|
||
// 如果删除失败且是收藏夹，恢复显示
|
||
if (isDeleting) {
|
||
setIsDeleting(false);
|
||
}
|
||
throw new Error('切换收藏状态失败');
|
||
}
|
||
};
|
||
|
||
// 删除对应播放记录（仅标准卡片）
|
||
const handleDeleteRecord = async (
|
||
e: React.MouseEvent<HTMLSpanElement | SVGElement, MouseEvent>
|
||
) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
if (!isStandard) return;
|
||
|
||
try {
|
||
await deletePlayRecord(actualSource, actualId);
|
||
onDelete?.();
|
||
} catch (err) {
|
||
throw new Error('删除播放记录失败');
|
||
}
|
||
};
|
||
|
||
// 点击处理逻辑
|
||
const handleClick = () => {
|
||
if (isDemo) {
|
||
router.push(`/play?title=${encodeURIComponent(actualTitle.trim())}`);
|
||
} else {
|
||
router.push(
|
||
`/play?source=${actualSource}&id=${actualId}&title=${encodeURIComponent(
|
||
actualTitle.trim()
|
||
)}${year ? `&year=${year}` : ''}`
|
||
);
|
||
}
|
||
};
|
||
|
||
// 播放按钮点击处理
|
||
const handlePlayClick = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
handleClick();
|
||
};
|
||
|
||
const hideCheckCircle =
|
||
from === 'favorites' || from === 'search' || !isStandard;
|
||
const alwaysShowHeart = from !== 'favorites' && isStandard;
|
||
const showHoverLayer = isStandard
|
||
? alwaysShowHeart
|
||
? 'opacity-50 group-hover:opacity-100'
|
||
: 'opacity-0 group-hover:opacity-100'
|
||
: 'opacity-0 group-hover:opacity-100';
|
||
|
||
return (
|
||
<div
|
||
className={`group relative w-full rounded-lg bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out ${
|
||
isDeleting ? 'opacity-0 scale-90' : ''
|
||
} ${isDemo ? 'group-hover:scale-[1.02]' : ''}`}
|
||
onClick={handleClick}
|
||
>
|
||
{/* 海报图片容器 */}
|
||
<div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg transition-all duration-400 cubic-bezier(0.4,0,0.2,1)'>
|
||
{/* 图片占位符 - 骨架屏效果 */}
|
||
<ImagePlaceholder aspectRatio='aspect-[2/3]' />
|
||
|
||
<Image
|
||
src={actualPoster}
|
||
alt={actualTitle}
|
||
fill
|
||
className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
|
||
${
|
||
isLoaded
|
||
? 'opacity-100 scale-100'
|
||
: 'opacity-0 scale-95'
|
||
}`}
|
||
onLoadingComplete={() => setIsLoaded(true)}
|
||
referrerPolicy='no-referrer'
|
||
priority={false}
|
||
/>
|
||
{/* Hover 效果层 */}
|
||
<div
|
||
className={`absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent ${showHoverLayer} transition-all duration-300 cubic-bezier(0.4,0,0.2,1) flex items-center justify-center overflow-hidden`}
|
||
>
|
||
{/* 播放按钮 */}
|
||
<div className='absolute inset-0 flex items-center justify-center pointer-events-auto'>
|
||
<div
|
||
className={`transition-all duration-300 cubic-bezier(0.4,0,0.2,1) ${
|
||
playHover ? 'scale-100 opacity-100' : 'scale-90 opacity-70'
|
||
} ${isDemo && playHover ? 'scale-110 rotate-12' : ''}`}
|
||
style={{ cursor: 'pointer' }}
|
||
onClick={handlePlayClick}
|
||
onMouseEnter={() => setPlayHover(true)}
|
||
onMouseLeave={() => setPlayHover(false)}
|
||
>
|
||
<PlayCircleSolid fillColor={playHover ? '#22c55e' : 'none'} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右侧操作按钮组（仅标准卡片） */}
|
||
{isStandard && (
|
||
<div className='absolute bottom-2 right-2 sm:bottom-4 sm:right-4 flex items-center gap-3 transform transition-all duration-300 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110'>
|
||
{!hideCheckCircle && (
|
||
<span
|
||
onClick={handleDeleteRecord}
|
||
title='标记已看'
|
||
className='inline-flex items-center justify-center opacity-70 hover:opacity-100 transition-opacity duration-200'
|
||
>
|
||
<CheckCircleCustom />
|
||
</span>
|
||
)}
|
||
|
||
<span
|
||
onClick={handleToggleFavorite}
|
||
title={favorited ? '移除收藏' : '加入收藏'}
|
||
className={`inline-flex items-center justify-center ${
|
||
alwaysShowHeart ? 'opacity-100' : 'opacity-70'
|
||
} hover:opacity-100 transition-opacity duration-200`}
|
||
>
|
||
<Heart
|
||
className={`h-4 w-4 sm:h-5 sm:w-5 ${
|
||
favorited ? 'scale-105 text-red-500' : 'text-white/90'
|
||
}`}
|
||
strokeWidth={2}
|
||
fill={favorited ? 'currentColor' : 'none'}
|
||
/>
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{/* 评分徽章（如果有rate字段） */}
|
||
{rate && (
|
||
<div className='absolute top-2 right-2 min-w-[1.25rem] h-4 w-4 sm:h-7 sm:w-7 sm:min-w-[1.5rem] bg-pink-500 dark:bg-pink-400 rounded-full flex items-center justify-center px-1 shadow-md transform transition-all duration-300 cubic-bezier(0.4, 0, 0.2, 1) group-hover:scale-110 group-hover:rotate-3'>
|
||
<span className='text-white text-[0.5rem] sm:text-xs font-bold leading-none'>
|
||
{rate}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 继续观看 - 集数矩形展示框（标准卡片） */}
|
||
{isStandard &&
|
||
actualEpisodes &&
|
||
actualEpisodes > 1 &&
|
||
currentEpisode && (
|
||
<div className='absolute top-2 right-2 min-w-[1.875rem] h-5 sm:h-7 sm:min-w-[2.5rem] bg-green-500/90 dark:bg-green-600/90 rounded-md flex items-center justify-center px-2 shadow-md text-[0.55rem] sm:text-xs'>
|
||
<span className='text-white font-bold leading-none'>
|
||
{currentEpisode}
|
||
<span className='mx-1 text-white/80'>/</span>
|
||
</span>
|
||
<span className='text-white font-bold leading-none'>
|
||
{actualEpisodes}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 搜索非聚合/聚合 - 集数圆形展示框 */}
|
||
{(isStandard || isAggregate) &&
|
||
actualEpisodes &&
|
||
actualEpisodes > 1 &&
|
||
!currentEpisode && (
|
||
<div className='absolute top-2 right-2 w-4 h-4 sm:w-7 sm:h-7 rounded-full bg-green-500/90 dark:bg-green-600/90 flex items-center justify-center shadow-md text-[0.55rem] sm:text-xs'>
|
||
<span className='text-white font-bold leading-none'>
|
||
{actualEpisodes}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 豆瓣链接按钮 */}
|
||
{actualDoubanId &&
|
||
(isDemo || (isStandard && from === 'search') || isAggregate) && (
|
||
<a
|
||
href={`https://movie.douban.com/subject/${actualDoubanId}`}
|
||
target='_blank'
|
||
rel='noopener noreferrer'
|
||
onClick={(e) => e.stopPropagation()}
|
||
className='absolute top-2 left-2 scale-90 group-hover:scale-100 opacity-0 group-hover:opacity-100 transition-all duration-300 cubic-bezier(0.4,0,0.2,1)'
|
||
>
|
||
<div
|
||
className={`w-4 h-4 sm:w-7 sm:h-7 rounded-full bg-[#22c55e] ${
|
||
isDemo ? 'dark:bg-[#16a34a]' : ''
|
||
} flex items-center justify-center shadow-md opacity-70 hover:opacity-100 transition-all duration-200 ease-in-out hover:scale-110 hover:bg-[#16a34a] ${
|
||
isDemo ? 'dark:hover:bg-[#15803d]' : ''
|
||
}`}
|
||
>
|
||
<LinkIcon className='w-4 h-4 text-white' strokeWidth={2} />
|
||
</div>
|
||
</a>
|
||
)}
|
||
</div>
|
||
|
||
{/* 播放进度条（仅标准卡片） */}
|
||
{isStandard && progress !== undefined && (
|
||
<div className='mt-1 h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden'>
|
||
<div
|
||
className='h-full bg-[#22c55e] rounded-full transition-all duration-200'
|
||
style={{ width: `${progress}%` }}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 信息层 */}
|
||
<span className='mt-2 px-1 block text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm dark:text-gray-200 transition-all duration-400 cubic-bezier(0.4,0,0.2,1) group-hover:translate-y-[-2px] translate-y-1 opacity-80 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-400'>
|
||
{actualTitle}
|
||
</span>
|
||
|
||
{/* 来源信息（仅标准卡片） */}
|
||
{isStandard && actualSource && (
|
||
<span className='mt-1 px-1 block text-gray-500 text-[0.5rem] sm:text-xs w-full text-center dark:text-gray-400 transition-all duration-400 cubic-bezier(0.4,0,0.2,1) group-hover:translate-y-[-2px] translate-y-1 opacity-80 group-hover:opacity-100'>
|
||
<span className='inline-block border border-gray-500/60 rounded px-2 py-[1px] dark:border-gray-400/60'>
|
||
{source_name}
|
||
</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|