davidl/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: sources panel mobile optimize

Browse Source
This commit is contained in:
shinya
2025-08-17 16:53:22 +08:00
parent 5118bf5654
commit 07c1da2a6b
2 changed files with 15 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/search/page.tsx
View File

@@ -66,22 +66,8 @@ function SearchPageClient() {
});
return res;
})();
const douban_id = (() => {
const idMap = new Map<number, number>();
group.forEach((g) => {
if (g.douban_id && g.douban_id !== 0) {
idMap.set(g.douban_id, (idMap.get(g.douban_id) || 0) + 1);
}
});
let max = 0;
let res: number | undefined = undefined;
idMap.forEach((v, k) => {
if (v > max) { max = v; res = k; }
});
return res;
})();
const source_names = Array.from(new Set(group.map((g) => g.source_name).filter(Boolean))) as string[];
return { episodes, douban_id, source_names };
return { episodes, source_names };
};
// 过滤器：非聚合与聚合
const [filterAll, setFilterAll] = useState<{ source: string; title: string; year: string; yearOrder: 'none' | 'asc' | 'desc' }>({
@@ -189,9 +175,6 @@ function SearchPageClient() {
// 对比变化并调用对应的 set 方法
const ref = groupRefs.current.get(mapKey);
if (ref && ref.current) {
if (prev.douban_id !== stats.douban_id) {
ref.current.setDoubanId(stats.douban_id);
}
if (prev.episodes !== stats.episodes) {
ref.current.setEpisodes(stats.episodes);
}
@@ -680,12 +663,12 @@ function SearchPageClient() {
const title = group[0]?.title || '';
const poster = group[0]?.poster || '';
const year = group[0]?.year || 'unknown';
const { episodes, douban_id, source_names } = computeGroupStats(group);
const { episodes, source_names } = computeGroupStats(group);
const type = episodes === 1 ? 'movie' : 'tv';
// 如果该聚合第一次出现，写入初始统计
if (!groupStatsRef.current.has(mapKey)) {
groupStatsRef.current.set(mapKey, { episodes, douban_id, source_names });
groupStatsRef.current.set(mapKey, { episodes, source_names });
}
return (
@@ -698,7 +681,6 @@ function SearchPageClient() {
poster={poster}
year={year}
episodes={episodes}
douban_id={douban_id}
source_names={source_names}
query={
searchQuery.trim() !== title

33
src/components/VideoCard.tsx
View File

@@ -47,7 +47,6 @@ export interface VideoCardProps {
}
export type VideoCardHandle = {
setDoubanId: (id?: number) => void;
setEpisodes: (episodes?: number) => void;
setSourceNames: (names?: string[]) => void;
};
@@ -80,9 +79,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
const [isLoading, setIsLoading] = useState(false);
// 可外部修改的可控字段
const [dynamicDoubanId, setDynamicDoubanId] = useState<number | undefined>(
douban_id
);
const [dynamicEpisodes, setDynamicEpisodes] = useState<number | undefined>(
episodes
);
@@ -90,10 +86,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
source_names
);
useEffect(() => {
setDynamicDoubanId(douban_id);
}, [douban_id]);
useEffect(() => {
setDynamicEpisodes(episodes);
}, [episodes]);
@@ -103,7 +95,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
}, [source_names]);
useImperativeHandle(ref, () => ({
setDoubanId: (id?: number) => setDynamicDoubanId(id),
setEpisodes: (eps?: number) => setDynamicEpisodes(eps),
setSourceNames: (names?: string[]) => setDynamicSourceNames(names),
}));
@@ -112,7 +103,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
const actualPoster = poster;
const actualSource = source;
const actualId = id;
const actualDoubanId = dynamicDoubanId;
const actualDoubanId = douban_id;
const actualEpisodes = dynamicEpisodes;
const actualYear = year;
const actualQuery = query || '';
@@ -274,7 +265,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
},
};
return configs[from] || configs.search;
}, [from, isAggregate, actualDoubanId, rate]);
}, [from, isAggregate, douban_id, rate]);
return (
<div
@@ -395,7 +386,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
return (
<div className='absolute bottom-2 right-2 opacity-0 transition-all duration-300 ease-in-out delay-75 group-hover:opacity-100'>
<div className='relative group/sources'>
<div className='bg-gray-700 text-white text-xs font-bold w-7 h-7 rounded-full flex items-center justify-center shadow-md hover:bg-gray-600 hover:scale-[1.1] transition-all duration-300 ease-out cursor-pointer'>
<div className='bg-gray-700 text-white text-xs font-bold w-6 h-6 sm:w-7 sm:h-7 rounded-full flex items-center justify-center shadow-md hover:bg-gray-600 hover:scale-[1.1] transition-all duration-300 ease-out cursor-pointer'>
{sourceCount}
</div>
@@ -420,14 +411,14 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
const remainingCount = sortedSources.length - maxDisplayCount;
return (
<div className='absolute bottom-full right-0 mb-2 opacity-0 invisible group-hover/sources:opacity-100 group-hover/sources:visible transition-all duration-200 ease-out delay-100 pointer-events-none z-50'>
<div className='bg-gray-800/90 backdrop-blur-sm text-white text-xs rounded-lg shadow-xl border border-white/10 p-2 min-w-[120px] max-w-[200px]'>
<div className='absolute bottom-full mb-2 opacity-0 invisible group-hover/sources:opacity-100 group-hover/sources:visible transition-all duration-200 ease-out delay-100 pointer-events-none z-50 right-0 sm:right-0 -translate-x-0 sm:translate-x-0'>
<div className='bg-gray-800/90 backdrop-blur-sm text-white text-xs sm:text-xs rounded-lg shadow-xl border border-white/10 p-1.5 sm:p-2 min-w-[100px] sm:min-w-[120px] max-w-[140px] sm:max-w-[200px] overflow-hidden'>
{/* 单列布局 */}
<div className='space-y-1'>
<div className='space-y-0.5 sm:space-y-1'>
{displaySources.map((sourceName, index) => (
<div key={index} className='flex items-center gap-1.5'>
<div className='w-1 h-1 bg-blue-400 rounded-full flex-shrink-0'></div>
<span className='truncate text-xs' title={sourceName}>
<div key={index} className='flex items-center gap-1 sm:gap-1.5'>
<div className='w-0.5 h-0.5 sm:w-1 sm:h-1 bg-blue-400 rounded-full flex-shrink-0'></div>
<span className='truncate text-[10px] sm:text-xs leading-tight' title={sourceName}>
{sourceName}
</span>
</div>
@@ -436,15 +427,15 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
{/* 显示更多提示 */}
{hasMore && (
<div className='mt-2 pt-1.5 border-t border-gray-700/50'>
<div className='mt-1 sm:mt-2 pt-1 sm:pt-1.5 border-t border-gray-700/50'>
<div className='flex items-center justify-center text-gray-400'>
<span className='text-xs font-medium'>+{remainingCount} 播放源</span>
<span className='text-[10px] sm:text-xs font-medium'>+{remainingCount} 播放源</span>
</div>
</div>
)}
{/* 小箭头 */}
<div className='absolute top-full right-3 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[6px] border-transparent border-t-gray-800/90'></div>
<div className='absolute top-full right-2 sm:right-3 w-0 h-0 border-l-[4px] border-r-[4px] border-t-[4px] sm:border-l-[6px] sm:border-r-[6px] sm:border-t-[6px] border-transparent border-t-gray-800/90'></div>
</div>
</div>
);