feat: show episode titles
This commit is contained in:
@@ -1835,7 +1835,7 @@ function PlayPageClient() {
|
|||||||
{videoTitle || '影片标题'}
|
{videoTitle || '影片标题'}
|
||||||
{totalEpisodes > 1 && (
|
{totalEpisodes > 1 && (
|
||||||
<span className='text-gray-500 dark:text-gray-400'>
|
<span className='text-gray-500 dark:text-gray-400'>
|
||||||
{` > 第 ${currentEpisodeIndex + 1} 集`}
|
{` > ${detail?.episodes_titles?.[currentEpisodeIndex] || `第 ${currentEpisodeIndex + 1} 集`}`}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@@ -312,8 +312,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
<div
|
<div
|
||||||
onClick={() => setActiveTab('episodes')}
|
onClick={() => setActiveTab('episodes')}
|
||||||
className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
|
className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
|
||||||
${
|
${activeTab === 'episodes'
|
||||||
activeTab === 'episodes'
|
|
||||||
? 'text-green-600 dark:text-green-400'
|
? 'text-green-600 dark:text-green-400'
|
||||||
: 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'
|
: 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'
|
||||||
}
|
}
|
||||||
@@ -325,8 +324,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
<div
|
<div
|
||||||
onClick={handleSourceTabClick}
|
onClick={handleSourceTabClick}
|
||||||
className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
|
className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
|
||||||
${
|
${activeTab === 'sources'
|
||||||
activeTab === 'sources'
|
|
||||||
? 'text-green-600 dark:text-green-400'
|
? 'text-green-600 dark:text-green-400'
|
||||||
: 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'
|
: 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'
|
||||||
}
|
}
|
||||||
@@ -353,8 +351,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
}}
|
}}
|
||||||
onClick={() => handleCategoryClick(idx)}
|
onClick={() => handleCategoryClick(idx)}
|
||||||
className={`w-20 relative py-2 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 text-center
|
className={`w-20 relative py-2 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 text-center
|
||||||
${
|
${isActive
|
||||||
isActive
|
|
||||||
? 'text-green-500 dark:text-green-400'
|
? 'text-green-500 dark:text-green-400'
|
||||||
: 'text-gray-700 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400'
|
: 'text-gray-700 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400'
|
||||||
}
|
}
|
||||||
@@ -408,8 +405,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
key={episodeNumber}
|
key={episodeNumber}
|
||||||
onClick={() => handleEpisodeClick(episodeNumber - 1)}
|
onClick={() => handleEpisodeClick(episodeNumber - 1)}
|
||||||
className={`h-10 min-w-10 px-3 py-2 flex items-center justify-center text-sm font-medium rounded-md transition-all duration-200 whitespace-nowrap font-mono
|
className={`h-10 min-w-10 px-3 py-2 flex items-center justify-center text-sm font-medium rounded-md transition-all duration-200 whitespace-nowrap font-mono
|
||||||
${
|
${isActive
|
||||||
isActive
|
|
||||||
? 'bg-green-500 text-white shadow-lg shadow-green-500/25 dark:bg-green-600'
|
? 'bg-green-500 text-white shadow-lg shadow-green-500/25 dark:bg-green-600'
|
||||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:scale-105 dark:bg-white/10 dark:text-gray-300 dark:hover:bg-white/20'
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:scale-105 dark:bg-white/10 dark:text-gray-300 dark:hover:bg-white/20'
|
||||||
}`.trim()}
|
}`.trim()}
|
||||||
@@ -419,8 +415,8 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
if (!title) {
|
if (!title) {
|
||||||
return episodeNumber;
|
return episodeNumber;
|
||||||
}
|
}
|
||||||
// 如果匹配"第X集"格式,提取中间的数字
|
// 如果匹配"第X集"、"第X话"、"X集"、"X话"格式,提取中间的数字
|
||||||
const match = title.match(/第(\d+)集/);
|
const match = title.match(/(?:第)?(\d+)(?:集|话)/);
|
||||||
if (match) {
|
if (match) {
|
||||||
return match[1];
|
return match[1];
|
||||||
}
|
}
|
||||||
@@ -496,8 +492,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
!isCurrentSource && handleSourceClick(source)
|
!isCurrentSource && handleSourceClick(source)
|
||||||
}
|
}
|
||||||
className={`flex items-start gap-3 px-2 py-3 rounded-lg transition-all select-none duration-200 relative
|
className={`flex items-start gap-3 px-2 py-3 rounded-lg transition-all select-none duration-200 relative
|
||||||
${
|
${isCurrentSource
|
||||||
isCurrentSource
|
|
||||||
? 'bg-green-500/10 dark:bg-green-500/20 border-green-500/30 border'
|
? 'bg-green-500/10 dark:bg-green-500/20 border-green-500/30 border'
|
||||||
: 'hover:bg-gray-200/50 dark:hover:bg-white/10 hover:scale-[1.02] cursor-pointer'
|
: 'hover:bg-gray-200/50 dark:hover:bg-white/10 hover:scale-[1.02] cursor-pointer'
|
||||||
}`.trim()}
|
}`.trim()}
|
||||||
|
|||||||
Reference in New Issue
Block a user