diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index d29b654..b22a73b 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -8409,6 +8409,7 @@ function PlayPageClient() { : undefined } type={detail.type_name === '电影' ? 'movie' : 'tv'} + currentEpisode={currentEpisodeIndex + 1} cmsData={ // 非特殊源使用 cms 数据 // 但如果有豆瓣ID且不为0,则不传入cmsData,优先使用豆瓣数据 diff --git a/src/components/DetailPanel.tsx b/src/components/DetailPanel.tsx index 2fd0915..95b0c20 100644 --- a/src/components/DetailPanel.tsx +++ b/src/components/DetailPanel.tsx @@ -21,6 +21,7 @@ interface DetailPanelProps { tmdbId?: number; type?: 'movie' | 'tv'; seasonNumber?: number; + currentEpisode?: number; // 当前集数(从1开始) cmsData?: { desc?: string; episodes?: string[]; @@ -78,6 +79,7 @@ const DetailPanel: React.FC = ({ tmdbId, type = 'movie', seasonNumber, + currentEpisode, cmsData, sourceId, source, @@ -651,6 +653,30 @@ const DetailPanel: React.FC = ({ fetchSeasonData(); }, [detailData?.tmdbId, detailData?.mediaType, detailData?.seasonNumber, seasonsLoaded]); + // 自动滚动到当前集数 + useEffect(() => { + if (!currentEpisode || !seasonData?.episodes || !episodesScrollRef.current || currentSource !== 'tmdb') { + return; + } + + // 等待 DOM 更新后再滚动 + const timer = setTimeout(() => { + const episodeElement = document.getElementById(`episode-${currentEpisode}`); + if (episodeElement && episodesScrollRef.current) { + // 计算滚动位置,使当前集数居中显示 + const container = episodesScrollRef.current; + const elementLeft = episodeElement.offsetLeft; + const elementWidth = episodeElement.offsetWidth; + const containerWidth = container.offsetWidth; + const scrollLeft = elementLeft - (containerWidth / 2) + (elementWidth / 2); + + container.scrollLeft = scrollLeft; + } + }, 100); + + return () => clearTimeout(timer); + }, [currentEpisode, seasonData?.episodes, currentSource]); + // 异步获取演职人员信息(仅TMDB) useEffect(() => { if (!detailData?.tmdbId || !detailData?.mediaType || currentSource !== 'tmdb') { @@ -1212,13 +1238,19 @@ const DetailPanel: React.FC = ({ scrollBehavior: isDragging ? 'auto' : 'smooth' }} > -
+
{seasonData.episodes.map((episode: Episode) => { const isExpanded = expandedEpisodes.has(episode.id); + const isCurrentEpisode = currentEpisode === episode.episode_number; return (
{episode.still_path && ( diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx index 655f4c2..368a94b 100644 --- a/src/components/VideoCard.tsx +++ b/src/components/VideoCard.tsx @@ -1522,6 +1522,7 @@ const VideoCard = forwardRef(function VideoCard tmdbId={tmdb_id} type={actualSearchType as 'movie' | 'tv'} seasonNumber={seasonNumber} + currentEpisode={currentEpisode} cmsData={cmsData} sourceId={id} source={source}