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

优化tv详情页

Browse Source
This commit is contained in:
mtvpls
2026-05-30 10:31:47 +08:00
parent e7558874bc
commit 83ed7099e7
2 changed files with 1261 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tv/detail/page.tsx
+462 -29
View File
@@ -2,13 +2,91 @@
import { ArrowLeft, Loader2, Play, Server } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useEffect, useMemo, useState } from 'react';
import {
Suspense,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { processImageUrl } from '@/lib/utils';
import { getVideoResolutionFromM3u8, processImageUrl } from '@/lib/utils';
import { SearchResult } from '@/lib/types';
import TVLayout from '@/components/tv/TVLayout';
import { fetchTVDetail } from '@/components/tv/player/utils';
import {
fetchTVDetail,
resolveTVEpisodeUrl,
} from '@/components/tv/player/utils';
type SourceTestInfo = {
quality: string;
loadSpeed: string;
pingTime: number;
bitrate: string;
score: number;
status: 'testing' | 'ok' | 'fail';
};
function parseSpeedKBps(speed: string) {
const match = speed.match(/^([\d.]+)\s*(KB\/s|MB\/s)$/);
if (!match) return 0;
const value = Number.parseFloat(match[1]);
if (!Number.isFinite(value)) return 0;
return match[2] === 'MB/s' ? value * 1024 : value;
}
function qualityScore(quality: string) {
switch (quality) {
case '4K':
return 100;
case '2K':
return 85;
case '1080p':
return 75;
case '720p':
return 60;
case '480p':
return 40;
case 'SD':
return 20;
default:
return 0;
}
}
function sourceKey(item: Pick<SearchResult, 'source' | 'id'>) {
return `${item.source}-${item.id}`;
}
function sourceStatusRank(info?: SourceTestInfo) {
if (info?.status === 'ok') return 0;
if (info?.status === 'testing') return 1;
if (info?.status === 'fail') return 2;
return 1;
}
function sortSourcesByTests(
sourceList: SearchResult[],
testMap: Record<string, SourceTestInfo>
) {
return [...sourceList].sort((a, b) => {
const infoA = testMap[sourceKey(a)];
const infoB = testMap[sourceKey(b)];
const rankA = sourceStatusRank(infoA);
const rankB = sourceStatusRank(infoB);
if (rankA !== rankB) return rankA - rankB;
if (
infoA?.status === 'ok' &&
infoB?.status === 'ok' &&
infoA.score !== infoB.score
) {
return infoB.score - infoA.score;
}
return (b.weight ?? 0) - (a.weight ?? 0);
});
}
function TVDetailClient() {
const router = useRouter();
@@ -17,6 +95,14 @@ function TVDetailClient() {
const [sources, setSources] = useState<SearchResult[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [testingSources, setTestingSources] = useState(false);
const testedSourcesSignatureRef = useRef('');
const sourceTestsRef = useRef<Record<string, SourceTestInfo>>({});
const speedSamplesRef = useRef<number[]>([]);
const pingSamplesRef = useRef<number[]>([]);
const [sourceTests, setSourceTests] = useState<
Record<string, SourceTestInfo>
>({});
const source = searchParams.get('source');
const id = searchParams.get('id');
@@ -38,50 +124,339 @@ function TVDetailClient() {
setError(err instanceof Error ? err.message : '加载详情失败');
})
.finally(() => alive && setLoading(false));
return () => { alive = false; };
return () => {
alive = false;
};
}, [source, id, title, fileName]);
const poster = useMemo(() => detail?.poster ? processImageUrl(detail.poster) : '', [detail?.poster]);
const poster = useMemo(
() => (detail?.poster ? processImageUrl(detail.poster) : ''),
[detail?.poster]
);
const play = (episode = 0, target = detail) => {
useEffect(() => {
sourceTestsRef.current = sourceTests;
}, [sourceTests]);
const rankedSources = useMemo(
() => sortSourcesByTests(sources, sourceTests),
[sourceTests, sources]
);
const bestSource = rankedSources[0] || detail;
const play = (target = detail, episode?: number) => {
if (!target) return;
const qs = new URLSearchParams({
source: target.source,
id: target.id,
title: target.title,
index: String(episode),
});
if (fileName) qs.set('fileName', fileName);
if (typeof episode === 'number') qs.set('index', String(episode));
if (fileName && target.source === source && target.id === id)
qs.set('fileName', fileName);
router.push(`/tv/play?${qs.toString()}`);
};
const calculateSourceScore = useCallback(
(
testResult: Pick<SourceTestInfo, 'quality' | 'loadSpeed' | 'pingTime'>,
maxSpeed: number,
minPing: number,
maxPing: number,
weight = 0
) => {
const speed = parseSpeedKBps(testResult.loadSpeed);
const speedScore =
speed > 0 ? Math.min(100, (speed / maxSpeed) * 100) : 30;
const pingScore = (() => {
const ping = testResult.pingTime;
if (ping <= 0) return 0;
if (maxPing === minPing) return 100;
return Math.min(
100,
Math.max(0, ((maxPing - ping) / (maxPing - minPing)) * 100)
);
})();
return (
Math.round(
(qualityScore(testResult.quality) * 0.4 +
speedScore * 0.4 +
pingScore * 0.2 +
weight) *
100
) / 100
);
},
[]
);
const fetchPlayableSource = useCallback(async (item: SearchResult) => {
if (item.episodes?.length) return item;
const data = await fetchTVDetail({
source: item.source,
id: item.id,
title: item.title,
});
return data.detail;
}, []);
const testSource = useCallback(
async (
item: SearchResult
): Promise<{
item: SearchResult;
result: Omit<SourceTestInfo, 'score' | 'status'> | null;
}> => {
try {
const playable = await fetchPlayableSource(item);
const rawUrl =
playable.episodes?.[
Math.min(1, Math.max(0, playable.episodes.length - 1))
];
if (!rawUrl) throw new Error('无播放地址');
const testUrl = await resolveTVEpisodeUrl(
rawUrl,
playable.source,
playable.proxyMode
);
const result = await getVideoResolutionFromM3u8(testUrl, 5000);
return { item: playable, result };
} catch {
return { item, result: null };
}
},
[fetchPlayableSource]
);
const updateSourceTest = useCallback(
(item: SearchResult, info: SourceTestInfo) => {
const key = sourceKey(item);
const nextTests = { ...sourceTestsRef.current, [key]: info };
sourceTestsRef.current = nextTests;
setSourceTests(nextTests);
setSources((currentSources) => {
const nextSources = currentSources.map((sourceItem) =>
sourceKey(sourceItem) === key ? item : sourceItem
);
return sortSourcesByTests(nextSources, nextTests);
});
setDetail((current) => {
if (!current || sourceKey(current) !== key) return current;
return item;
});
},
[]
);
const testAllSources = useCallback(
async (candidateSources = sources) => {
if (candidateSources.length === 0 || testingSources) return null;
setTestingSources(true);
speedSamplesRef.current = [];
pingSamplesRef.current = [];
const initialTests: Record<string, SourceTestInfo> = {};
candidateSources.forEach((item) => {
initialTests[sourceKey(item)] = {
quality: '测速中',
loadSpeed: '测量中...',
pingTime: 0,
bitrate: '未知',
score: 0,
status: 'testing',
};
});
sourceTestsRef.current = initialTests;
setSourceTests(initialTests);
setSources((currentSources) =>
sortSourcesByTests(currentSources, initialTests)
);
let completedCount = 0;
let bestSource: SearchResult | null = null;
let nextIndex = 0;
const maxConcurrency = Math.max(
1,
Math.min(Math.ceil(candidateSources.length / 2), 8)
);
const worker = async () => {
while (nextIndex < candidateSources.length) {
const currentIndex = nextIndex++;
const originalItem = candidateSources[currentIndex];
const { item, result } = await testSource(originalItem);
if (result) {
const speed = parseSpeedKBps(result.loadSpeed);
if (speed > 0) speedSamplesRef.current.push(speed);
if (result.pingTime > 0)
pingSamplesRef.current.push(result.pingTime);
const maxSpeed =
speedSamplesRef.current.length > 0
? Math.max(...speedSamplesRef.current)
: 1024;
const minPing =
pingSamplesRef.current.length > 0
? Math.min(...pingSamplesRef.current)
: 50;
const maxPing =
pingSamplesRef.current.length > 0
? Math.max(...pingSamplesRef.current)
: 1000;
const info: SourceTestInfo = {
...result,
score: calculateSourceScore(
result,
maxSpeed,
minPing,
maxPing,
item.weight ?? 0
),
status: 'ok',
};
updateSourceTest(item, info);
const currentBest = sortSourcesByTests(
[item, ...(bestSource ? [bestSource] : [])],
{ ...sourceTestsRef.current, [sourceKey(item)]: info }
)[0];
bestSource = currentBest || item;
} else {
updateSourceTest(item, {
quality: '失败',
loadSpeed: '不可用',
pingTime: 0,
bitrate: '未知',
score: -1,
status: 'fail',
});
}
completedCount += 1;
if (completedCount === candidateSources.length) {
setTestingSources(false);
}
}
};
try {
await Promise.all(
Array.from(
{ length: Math.min(maxConcurrency, candidateSources.length) },
() => worker()
)
);
return (
sortSourcesByTests(candidateSources, sourceTestsRef.current)[0] ||
bestSource
);
} finally {
setTestingSources(false);
}
},
[
calculateSourceScore,
sources,
testSource,
testingSources,
updateSourceTest,
]
);
useEffect(() => {
if (loading || sources.length <= 1) return;
const signature = Array.from(new Set(sources.map(sourceKey)))
.sort()
.join('|');
if (!signature || testedSourcesSignatureRef.current === signature) return;
testedSourcesSignatureRef.current = signature;
testAllSources(sources).catch(() => setTestingSources(false));
}, [loading, sources, testAllSources]);
if (loading) {
return <TVLayout><div className='mt-20 flex items-center justify-center gap-4 text-3xl text-slate-200'><Loader2 className='h-10 w-10 animate-spin text-rose-500' />正在加载详情...</div></TVLayout>;
return (
<TVLayout>
<div className='mt-20 flex items-center justify-center gap-4 text-3xl text-slate-200'>
<Loader2 className='h-10 w-10 animate-spin text-rose-500' />
正在加载详情...
</div>
</TVLayout>
);
}
if (error || !detail) {
return <TVLayout><section className='rounded-[36px] border border-red-500/40 bg-red-950/40 p-10 text-3xl font-bold text-red-100'>{error || '详情不存在'}</section></TVLayout>;
return (
<TVLayout>
<section className='rounded-[36px] border border-red-500/40 bg-red-950/40 p-10 text-3xl font-bold text-red-100'>
{error || '详情不存在'}
</section>
</TVLayout>
);
}
return (
<TVLayout>
<section className='relative overflow-hidden rounded-[44px] border border-white/10 bg-slate-950/80 p-8 shadow-2xl shadow-black/70'>
{poster && <img src={poster} alt='' className='absolute inset-0 h-full w-full object-cover opacity-20 blur-xl' />}
{poster && (
<img
src={poster}
alt=''
className='absolute inset-0 h-full w-full object-cover opacity-20 blur-xl'
/>
)}
<div className='relative grid grid-cols-[300px_1fr] gap-10'>
<div className='overflow-hidden rounded-[32px] bg-slate-900 shadow-2xl shadow-black/70'>
{poster ? <img src={poster} alt={detail.title} className='aspect-[2/3] h-full w-full object-cover' /> : <div className='aspect-[2/3]' />}
{poster ? (
<img
src={poster}
alt={detail.title}
className='aspect-[2/3] h-full w-full object-cover'
/>
) : (
<div className='aspect-[2/3]' />
)}
</div>
<div className='py-2'>
<button onClick={() => router.back()} className='tv-focusable mb-6 flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-3 text-xl font-bold outline-none'><ArrowLeft className='h-6 w-6' />返回</button>
<h1 className='text-6xl font-black tracking-tight text-white'>{detail.title}</h1>
<button
onClick={() => router.back()}
className='tv-focusable mb-6 flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-3 text-xl font-bold outline-none'
>
<ArrowLeft className='h-6 w-6' />
返回
</button>
<h1 className='text-6xl font-black tracking-tight text-white'>
{detail.title}
</h1>
<div className='mt-4 flex flex-wrap gap-3 text-xl font-bold text-slate-200'>
<span className='rounded-full bg-rose-600 px-4 py-2'>{detail.source_name || detail.source}</span>
{detail.year && <span className='rounded-full bg-white/10 px-4 py-2'>{detail.year}</span>}
{detail.type_name && <span className='rounded-full bg-white/10 px-4 py-2'>{detail.type_name}</span>}
{detail.vod_remarks && <span className='rounded-full bg-white/10 px-4 py-2'>{detail.vod_remarks}</span>}
<span className='rounded-full bg-rose-600 px-4 py-2'>
{detail.source_name || detail.source}
</span>
{detail.year && (
<span className='rounded-full bg-white/10 px-4 py-2'>
{detail.year}
</span>
)}
{detail.type_name && (
<span className='rounded-full bg-white/10 px-4 py-2'>
{detail.type_name}
</span>
)}
{detail.vod_remarks && (
<span className='rounded-full bg-white/10 px-4 py-2'>
{detail.vod_remarks}
</span>
)}
</div>
{detail.desc && <p className='mt-6 line-clamp-5 max-w-5xl text-2xl leading-relaxed text-slate-300'>{detail.desc}</p>}
<button onClick={() => play(0)} className='tv-focusable mt-8 flex cursor-pointer items-center gap-3 rounded-3xl bg-rose-600 px-9 py-5 text-3xl font-black text-white outline-none'>
{detail.desc && (
<p className='mt-6 line-clamp-5 max-w-5xl text-2xl leading-relaxed text-slate-300'>
{detail.desc}
</p>
)}
<button
onClick={() => play(bestSource)}
className='tv-focusable mt-8 flex cursor-pointer items-center gap-3 rounded-3xl bg-rose-600 px-9 py-5 text-3xl font-black text-white outline-none'
>
<Play className='h-9 w-9 fill-current' /> 立即播放
</button>
</div>
@@ -90,13 +465,60 @@ function TVDetailClient() {
{sources.length > 1 && (
<section className='mt-10 rounded-[36px] border border-white/10 bg-white/[0.04] p-6'>
<h2 className='mb-5 text-4xl font-black'>播放源</h2>
<div className='mb-5 flex flex-wrap items-center justify-between gap-4'>
<h2 className='text-4xl font-black'>播放源</h2>
<div className='flex items-center gap-3 rounded-2xl bg-white/10 px-5 py-3 text-xl font-black text-slate-100'>
{testingSources && (
<Loader2 className='h-6 w-6 animate-spin text-amber-300' />
)}
<span>
{testingSources
? '正在自动优选测速并排序...'
: Object.keys(sourceTests).length > 0
? '已按优选测速结果自动排序'
: '将自动优选测速排序'}
</span>
</div>
</div>
<div className='flex flex-wrap gap-4 px-4 py-4'>
{sources.map((item) => (
<button key={`${item.source}-${item.id}`} onClick={() => setDetail(item)} className={`tv-focusable flex min-w-[180px] cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-2xl px-6 py-4 text-2xl font-bold outline-none ${detail.source === item.source && detail.id === item.id ? 'bg-rose-600 text-white' : 'bg-white/10 text-slate-200'}`}>
<Server className='h-6 w-6' /> {item.source_name || item.source}
</button>
))}
{rankedSources.map((item, index) => {
const info = sourceTests[sourceKey(item)];
const active =
detail.source === item.source && detail.id === item.id;
return (
<button
key={`${item.source}-${item.id}`}
onClick={() => play(item)}
className={`tv-focusable flex min-w-[210px] cursor-pointer flex-col items-start justify-center gap-1 whitespace-nowrap rounded-2xl px-6 py-4 text-left text-2xl font-bold outline-none ${
active
? 'bg-rose-600 text-white'
: 'bg-white/10 text-slate-200'
}`}
>
<span className='flex items-center gap-2'>
<Server className='h-6 w-6' /> #{index + 1}{' '}
{item.source_name || item.source}
</span>
{info && (
<span
className={`text-base font-bold ${
info.status === 'ok'
? 'text-emerald-200'
: info.status === 'testing'
? 'text-amber-200'
: 'text-red-200'
}`}
>
{info.status === 'ok'
? `${info.quality} · ${info.loadSpeed}`
: info.status === 'testing'
? '测速中...'
: '测试失败'}
</span>
)}
</button>
);
})}
</div>
</section>
)}
@@ -104,8 +526,15 @@ function TVDetailClient() {
<section className='mt-10 rounded-[36px] border border-white/10 bg-white/[0.04] p-6'>
<h2 className='mb-5 text-4xl font-black'>选集</h2>
<div className='grid grid-cols-3 gap-4 md:grid-cols-5 lg:grid-cols-8'>
{(detail.episodes_titles?.length ? detail.episodes_titles : detail.episodes).map((ep, index) => (
<button key={`${ep}-${index}`} onClick={() => play(index)} className='tv-focusable min-h-20 cursor-pointer rounded-2xl bg-white/10 px-4 py-3 text-xl font-black text-white outline-none'>
{(detail.episodes_titles?.length
? detail.episodes_titles
: detail.episodes
).map((ep, index) => (
<button
key={`${ep}-${index}`}
onClick={() => play(bestSource, index)}
className='tv-focusable min-h-20 cursor-pointer rounded-2xl bg-white/10 px-4 py-3 text-xl font-black text-white outline-none'
>
{detail.episodes_titles?.[index] || `第 ${index + 1} 集`}
</button>
))}
@@ -116,5 +545,9 @@ function TVDetailClient() {
}
export default function TVDetailPage() {
return <Suspense fallback={null}><TVDetailClient /></Suspense>;
return (
<Suspense fallback={null}>
<TVDetailClient />
</Suspense>
);
}
src/app/tv/play/page.tsx
+799 -192
View File
@@ -1,15 +1,65 @@
'use client';
import { AlertTriangle, ArrowLeft, Heart, Info, Layers, ListVideo, Loader2, Maximize, MessageCircle, Pause, Play, RotateCcw, ShieldOff, SkipBack, SkipForward, SlidersHorizontal, X, Volume2, VolumeX } from 'lucide-react';
import {
AlertTriangle,
ArrowLeft,
Heart,
Info,
Layers,
ListVideo,
Loader2,
Maximize,
MessageCircle,
Pause,
Play,
RotateCcw,
ShieldOff,
SkipBack,
SkipForward,
SlidersHorizontal,
X,
Volume2,
VolumeX,
} from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, type Dispatch, type FocusEvent, type SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
Suspense,
type Dispatch,
type FocusEvent,
type SetStateAction,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { deleteFavorite, deletePlayRecord, generateStorageKey, getAllPlayRecords, getSkipConfig, isFavorited, saveFavorite, savePlayRecord } from '@/lib/db.client';
import {
deleteFavorite,
generateStorageKey,
getAllPlayRecords,
getSkipConfig,
isFavorited,
saveFavorite,
savePlayRecord,
} from '@/lib/db.client';
import { SearchResult } from '@/lib/types';
import { convertDanmakuFormat, getDanmakuById, getEpisodes, initDanmakuModule, loadDanmakuDisplayState, saveDanmakuDisplayState, searchAnime } from '@/lib/danmaku/api';
import {
convertDanmakuFormat,
getDanmakuById,
getEpisodes,
initDanmakuModule,
loadDanmakuDisplayState,
saveDanmakuDisplayState,
searchAnime,
} from '@/lib/danmaku/api';
import TVNativeVideo from '@/components/tv/player/TVNativeVideo';
import { fetchTVDetail, formatTVTime, resolveTVEpisodeUrl } from '@/components/tv/player/utils';
import {
fetchTVDetail,
formatTVTime,
resolveTVEpisodeUrl,
} from '@/components/tv/player/utils';
import TVVirtualRemote from '@/components/tv/TVVirtualRemote';
const TV_DANMAKU_LANES = 8;
@@ -38,9 +88,18 @@ function loadTVDanmakuSettings(): TVDanmakuSettings {
if (!saved) return DEFAULT_TV_DANMAKU_SETTINGS;
const parsed = JSON.parse(saved) as Partial<TVDanmakuSettings>;
return {
fontSize: typeof parsed.fontSize === 'number' ? parsed.fontSize : DEFAULT_TV_DANMAKU_SETTINGS.fontSize,
displayArea: typeof parsed.displayArea === 'number' ? parsed.displayArea : DEFAULT_TV_DANMAKU_SETTINGS.displayArea,
opacity: typeof parsed.opacity === 'number' ? parsed.opacity : DEFAULT_TV_DANMAKU_SETTINGS.opacity,
fontSize:
typeof parsed.fontSize === 'number'
? parsed.fontSize
: DEFAULT_TV_DANMAKU_SETTINGS.fontSize,
displayArea:
typeof parsed.displayArea === 'number'
? parsed.displayArea
: DEFAULT_TV_DANMAKU_SETTINGS.displayArea,
opacity:
typeof parsed.opacity === 'number'
? parsed.opacity
: DEFAULT_TV_DANMAKU_SETTINGS.opacity,
};
} catch {
return DEFAULT_TV_DANMAKU_SETTINGS;
@@ -53,7 +112,10 @@ function getTVDanmakuDuration(text: string) {
function blurTVPlayerControl() {
const active = document.activeElement;
if (active instanceof HTMLElement && active.closest('[data-tv-player-control]')) {
if (
active instanceof HTMLElement &&
active.closest('[data-tv-player-control]')
) {
active.blur();
}
}
@@ -61,7 +123,11 @@ function blurTVPlayerControl() {
function scrollFocusedControlIntoView(event: FocusEvent<HTMLElement>) {
const target = event.target;
if (target instanceof HTMLElement) {
target.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
target.scrollIntoView({
block: 'nearest',
inline: 'center',
behavior: 'smooth',
});
}
}
@@ -86,22 +152,28 @@ function updateTVDanmakuSetting(
});
}
function getDanmakuSettingField(target: HTMLElement | null): keyof TVDanmakuSettings | null {
if (!(target instanceof HTMLInputElement) || target.type !== 'range') return null;
function getDanmakuSettingField(
target: HTMLElement | null
): keyof TVDanmakuSettings | null {
if (!(target instanceof HTMLInputElement) || target.type !== 'range')
return null;
const field = target.dataset.tvDanmakuField;
if (field === 'fontSize' || field === 'displayArea' || field === 'opacity') return field;
if (field === 'fontSize' || field === 'displayArea' || field === 'opacity')
return field;
return null;
}
function getFocusableElementsInScope(scope: HTMLElement) {
return Array.from(
scope.querySelectorAll<HTMLElement>([
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
].join(','))
scope.querySelectorAll<HTMLElement>(
[
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
].join(',')
)
).filter((element) => !element.closest('[data-tv-no-focus="true"]'));
}
@@ -116,9 +188,10 @@ function moveFocusWithinScope(scope: HTMLElement, direction: 'up' | 'down') {
return;
}
const nextIndex = direction === 'down'
? Math.min(elements.length - 1, index + 1)
: Math.max(0, index - 1);
const nextIndex =
direction === 'down'
? Math.min(elements.length - 1, index + 1)
: Math.max(0, index - 1);
elements[nextIndex]?.focus({ preventScroll: true });
}
@@ -148,7 +221,11 @@ function TVPlayClient() {
const [muted, setMuted] = useState(false);
const [volume, setVolume] = useState(1);
const [showVolumeHint, setShowVolumeHint] = useState(false);
const [seekHint, setSeekHint] = useState<{ current: number; duration: number; delta: number } | null>(null);
const [seekHint, setSeekHint] = useState<{
current: number;
duration: number;
delta: number;
} | null>(null);
const [adFilterEnabled, setAdFilterEnabled] = useState(() => {
if (typeof window === 'undefined') return true;
const saved = localStorage.getItem('enable_blockad');
@@ -161,24 +238,36 @@ function TVPlayClient() {
const legacySaved = localStorage.getItem('tv_danmaku_enabled');
return legacySaved === null ? true : legacySaved === 'true';
});
const [danmakuItems, setDanmakuItems] = useState<Array<{ text: string; time: number; color: string; mode: number }>>([]);
const [danmakuSettings, setDanmakuSettings] = useState<TVDanmakuSettings>(() => loadTVDanmakuSettings());
const [activeDanmakuItems, setActiveDanmakuItems] = useState<Array<{
id: string;
text: string;
time: number;
color: string;
duration: number;
lane: number;
}>>([]);
const [danmakuItems, setDanmakuItems] = useState<
Array<{ text: string; time: number; color: string; mode: number }>
>([]);
const [danmakuSettings, setDanmakuSettings] = useState<TVDanmakuSettings>(
() => loadTVDanmakuSettings()
);
const [activeDanmakuItems, setActiveDanmakuItems] = useState<
Array<{
id: string;
text: string;
time: number;
color: string;
duration: number;
lane: number;
}>
>([]);
const [playbackRate, setPlaybackRate] = useState(() => {
if (typeof window === 'undefined') return 1;
return Number(localStorage.getItem('tv_playback_rate') || '1') || 1;
});
const [skipConfig, setSkipConfig] = useState<{ enable?: boolean; intro_time?: number; outro_time?: number } | null>(null);
const [skipConfig, setSkipConfig] = useState<{
enable?: boolean;
intro_time?: number;
outro_time?: number;
} | null>(null);
const [time, setTime] = useState({ current: 0, duration: 0 });
const timeRef = useRef({ current: 0, duration: 0 });
const episodeButtonRefs = useRef<Record<number, HTMLButtonElement | null>>({});
const episodeButtonRefs = useRef<Record<number, HTMLButtonElement | null>>(
{}
);
const detailCloseButtonRef = useRef<HTMLButtonElement | null>(null);
const danmakuFontSizeInputRef = useRef<HTMLInputElement | null>(null);
const digitTimerRef = useRef<number | null>(null);
@@ -187,7 +276,6 @@ function TVPlayClient() {
const seekHintTimerRef = useRef<number | null>(null);
const spawnedDanmakuRef = useRef<Set<string>>(new Set());
const lastDanmakuTimeRef = useRef(0);
const suppressPlayRecordSaveKeyRef = useRef<string | null>(null);
const skippedIntroRef = useRef('');
const skippedOutroRef = useRef('');
const lastSavedRef = useRef<{
@@ -215,14 +303,24 @@ function TVPlayClient() {
setSources(data.sources);
const maxIndex = Math.max(0, (data.detail.episodes?.length || 1) - 1);
const explicitIndex = searchParams.has('index');
let safeIndex = Math.max(0, Math.min(initialIndex || data.detail.initialEpisodeIndex || 0, maxIndex));
let safeIndex = Math.max(
0,
Math.min(
initialIndex || data.detail.initialEpisodeIndex || 0,
maxIndex
)
);
if (!explicitIndex && data.detail.source && data.detail.id) {
getAllPlayRecords()
.then((records) => {
if (!alive) return;
const record = records[generateStorageKey(data.detail.source, data.detail.id)];
const record =
records[generateStorageKey(data.detail.source, data.detail.id)];
if (record?.index) {
const rememberedIndex = Math.max(0, Math.min(maxIndex, record.index - 1));
const rememberedIndex = Math.max(
0,
Math.min(maxIndex, record.index - 1)
);
setEpisodeIndex(rememberedIndex);
setStartTime(record.play_time > 1 ? record.play_time : 0);
}
@@ -233,9 +331,15 @@ function TVPlayClient() {
}
setEpisodeIndex(safeIndex);
})
.catch((err) => alive && setError(err instanceof Error ? err.message : '加载播放信息失败'))
.catch(
(err) =>
alive &&
setError(err instanceof Error ? err.message : '加载播放信息失败')
)
.finally(() => alive && setLoading(false));
return () => { alive = false; };
return () => {
alive = false;
};
}, [source, id, title, fileName, initialIndex]);
useEffect(() => {
@@ -246,26 +350,38 @@ function TVPlayClient() {
setVideoUrl('');
setPlaybackError(false);
try {
const url = await resolveTVEpisodeUrl(detail.episodes[episodeIndex], detail.source, detail.proxyMode);
const url = await resolveTVEpisodeUrl(
detail.episodes[episodeIndex],
detail.source,
detail.proxyMode
);
if (alive) setVideoUrl(url);
} catch (err) {
if (alive) setError(err instanceof Error ? err.message : '获取播放地址失败');
if (alive)
setError(err instanceof Error ? err.message : '获取播放地址失败');
} finally {
if (alive) setResolving(false);
}
}
resolve();
return () => { alive = false; };
return () => {
alive = false;
};
}, [detail, episodeIndex, retryNonce]);
const episodeTitle = useMemo(() => detail?.episodes_titles?.[episodeIndex] || `第 ${episodeIndex + 1} 集`, [detail, episodeIndex]);
const episodeTitle = useMemo(
() =>
detail?.episodes_titles?.[episodeIndex] || `第 ${episodeIndex + 1} 集`,
[detail, episodeIndex]
);
useEffect(() => {
initDanmakuModule();
}, []);
useEffect(() => {
if (typeof window !== 'undefined') localStorage.setItem('enable_blockad', String(adFilterEnabled));
if (typeof window !== 'undefined')
localStorage.setItem('enable_blockad', String(adFilterEnabled));
}, [adFilterEnabled]);
useEffect(() => {
@@ -276,11 +392,15 @@ function TVPlayClient() {
useEffect(() => {
if (typeof window === 'undefined') return;
localStorage.setItem(TV_DANMAKU_SETTINGS_KEY, JSON.stringify(danmakuSettings));
localStorage.setItem(
TV_DANMAKU_SETTINGS_KEY,
JSON.stringify(danmakuSettings)
);
}, [danmakuSettings]);
useEffect(() => {
if (typeof window !== 'undefined') localStorage.setItem('tv_playback_rate', String(playbackRate));
if (typeof window !== 'undefined')
localStorage.setItem('tv_playback_rate', String(playbackRate));
}, [playbackRate]);
useEffect(() => {
@@ -296,23 +416,42 @@ function TVPlayClient() {
const anime = search.animes?.[0];
if (!alive || !anime?.animeId) return;
const eps = await getEpisodes(anime.animeId);
const ep = eps.bangumi?.episodes?.[Math.min(episodeIndex, Math.max(0, (eps.bangumi?.episodes?.length || 1) - 1))];
const ep =
eps.bangumi?.episodes?.[
Math.min(
episodeIndex,
Math.max(0, (eps.bangumi?.episodes?.length || 1) - 1)
)
];
if (!alive || !ep?.episodeId) return;
const comments = await getDanmakuById(ep.episodeId, detail.title, episodeIndex, undefined, {
animeId: anime.animeId,
animeTitle: anime.animeTitle,
episodeTitle: ep.episodeTitle,
searchKeyword: title || detail.title,
});
const comments = await getDanmakuById(
ep.episodeId,
detail.title,
episodeIndex,
undefined,
{
animeId: anime.animeId,
animeTitle: anime.animeTitle,
episodeTitle: ep.episodeTitle,
searchKeyword: title || detail.title,
}
);
if (!alive) return;
lastDanmakuTimeRef.current = Math.max(0, timeRef.current.current - TV_DANMAKU_SEEK_WINDOW - 1);
setDanmakuItems(convertDanmakuFormat(comments).slice(0, TV_DANMAKU_MAX_ITEMS));
lastDanmakuTimeRef.current = Math.max(
0,
timeRef.current.current - TV_DANMAKU_SEEK_WINDOW - 1
);
setDanmakuItems(
convertDanmakuFormat(comments).slice(0, TV_DANMAKU_MAX_ITEMS)
);
} catch {
if (alive) setDanmakuItems([]);
}
}
loadDanmaku();
return () => { alive = false; };
return () => {
alive = false;
};
}, [danmakuEnabled, detail?.title, episodeIndex, title]);
useEffect(() => {
@@ -326,7 +465,9 @@ function TVPlayClient() {
const current = time.current;
const previous = lastDanmakuTimeRef.current;
const jumped = current < previous - 1 || current - previous > 2;
const spawnWindow = jumped ? TV_DANMAKU_SEEK_WINDOW : Math.max(TV_DANMAKU_SPAWN_GRACE, current - previous + 0.2);
const spawnWindow = jumped
? TV_DANMAKU_SEEK_WINDOW
: Math.max(TV_DANMAKU_SPAWN_GRACE, current - previous + 0.2);
const spawned = spawnedDanmakuRef.current;
if (jumped) spawned.clear();
@@ -343,7 +484,9 @@ function TVPlayClient() {
};
})
.filter((item) => {
const delta = jumped ? Math.abs(item.time - current) : current - item.time;
const delta = jumped
? Math.abs(item.time - current)
: current - item.time;
return delta >= 0 && delta <= spawnWindow && !spawned.has(item.id);
})
.slice(0, TV_DANMAKU_LANES);
@@ -363,8 +506,12 @@ function TVPlayClient() {
useEffect(() => {
if (!detail?.source || !detail?.id) return;
isFavorited(detail.source, detail.id).then(setFavorited).catch(() => undefined);
getSkipConfig(detail.source, detail.id).then(setSkipConfig).catch(() => setSkipConfig(null));
isFavorited(detail.source, detail.id)
.then(setFavorited)
.catch(() => undefined);
getSkipConfig(detail.source, detail.id)
.then(setSkipConfig)
.catch(() => setSkipConfig(null));
}, [detail?.source, detail?.id]);
const switchEpisode = (next: number) => {
@@ -377,35 +524,50 @@ function TVPlayClient() {
setShowPanel(true);
};
const onTime = useCallback((current: number, duration: number) => {
const next = { current, duration };
timeRef.current = next;
setTime(next);
const onTime = useCallback(
(current: number, duration: number) => {
const next = { current, duration };
timeRef.current = next;
setTime(next);
if (!skipConfig?.enable || !duration) return;
const video = document.querySelector<HTMLVideoElement>('[data-tv-player-root] video');
if (!video) return;
const episodeKey = `${detail?.source || ''}-${detail?.id || ''}-${episodeIndex}`;
const intro = Math.max(0, skipConfig.intro_time || 0);
if (intro > 1 && current > 0.5 && current < intro && skippedIntroRef.current !== episodeKey) {
skippedIntroRef.current = episodeKey;
video.currentTime = intro;
return;
}
const outroRaw = skipConfig.outro_time || 0;
const outroStart = outroRaw < 0 ? duration - Math.abs(outroRaw) : duration - outroRaw;
if (outroRaw !== 0 && outroStart > 0 && current >= outroStart && skippedOutroRef.current !== episodeKey) {
skippedOutroRef.current = episodeKey;
switchEpisode(episodeIndex + 1);
}
}, [detail, episodeIndex, skipConfig]);
if (!skipConfig?.enable || !duration) return;
const video = document.querySelector<HTMLVideoElement>(
'[data-tv-player-root] video'
);
if (!video) return;
const episodeKey = `${detail?.source || ''}-${
detail?.id || ''
}-${episodeIndex}`;
const intro = Math.max(0, skipConfig.intro_time || 0);
if (
intro > 1 &&
current > 0.5 &&
current < intro &&
skippedIntroRef.current !== episodeKey
) {
skippedIntroRef.current = episodeKey;
video.currentTime = intro;
return;
}
const outroRaw = skipConfig.outro_time || 0;
const outroStart =
outroRaw < 0 ? duration - Math.abs(outroRaw) : duration - outroRaw;
if (
outroRaw !== 0 &&
outroStart > 0 &&
current >= outroStart &&
skippedOutroRef.current !== episodeKey
) {
skippedOutroRef.current = episodeKey;
switchEpisode(episodeIndex + 1);
}
},
[detail, episodeIndex, skipConfig]
);
useEffect(() => {
if (!detail) return;
const saveProgress = () => {
const storageKey = generateStorageKey(detail.source, detail.id);
if (suppressPlayRecordSaveKeyRef.current === storageKey) return;
const playTime = Math.floor(timeRef.current.current || 0);
const totalTime = Math.floor(timeRef.current.duration || 0);
@@ -455,23 +617,34 @@ function TVPlayClient() {
};
}, [detail, episodeIndex, title]);
const showSeekOverlay = (current: number, duration: number, delta: number) => {
const showSeekOverlay = (
current: number,
duration: number,
delta: number
) => {
setSeekHint({ current, duration, delta });
if (seekHintTimerRef.current) window.clearTimeout(seekHintTimerRef.current);
seekHintTimerRef.current = window.setTimeout(() => setSeekHint(null), 1200);
};
const seekBy = (delta: number, showOverlay = false) => {
const video = document.querySelector<HTMLVideoElement>('[data-tv-player-root] video');
const video = document.querySelector<HTMLVideoElement>(
'[data-tv-player-root] video'
);
if (!video || !Number.isFinite(video.duration)) return;
const duration = video.duration || 0;
const next = Math.max(0, Math.min(duration, (video.currentTime || 0) + delta));
const next = Math.max(
0,
Math.min(duration, (video.currentTime || 0) + delta)
);
video.currentTime = next;
if (showOverlay) showSeekOverlay(next, duration, delta);
};
const seekTo = (value: number) => {
const video = document.querySelector<HTMLVideoElement>('[data-tv-player-root] video');
const video = document.querySelector<HTMLVideoElement>(
'[data-tv-player-root] video'
);
if (!video || !Number.isFinite(video.duration)) return;
const duration = video.duration || 0;
const next = Math.max(0, Math.min(duration, value));
@@ -481,7 +654,9 @@ function TVPlayClient() {
const setVideoVolume = (next: number) => {
const safe = Math.max(0, Math.min(1, next));
const video = document.querySelector<HTMLVideoElement>('[data-tv-player-root] video');
const video = document.querySelector<HTMLVideoElement>(
'[data-tv-player-root] video'
);
if (video) {
video.volume = safe;
video.muted = safe <= 0;
@@ -489,12 +664,18 @@ function TVPlayClient() {
setVolume(safe);
setMuted(safe <= 0);
setShowVolumeHint(true);
if (volumeHintTimerRef.current) window.clearTimeout(volumeHintTimerRef.current);
volumeHintTimerRef.current = window.setTimeout(() => setShowVolumeHint(false), 1200);
if (volumeHintTimerRef.current)
window.clearTimeout(volumeHintTimerRef.current);
volumeHintTimerRef.current = window.setTimeout(
() => setShowVolumeHint(false),
1200
);
};
const toggleMute = () => {
const video = document.querySelector<HTMLVideoElement>('[data-tv-player-root] video');
const video = document.querySelector<HTMLVideoElement>(
'[data-tv-player-root] video'
);
const next = !muted;
if (video) video.muted = next;
setMuted(next);
@@ -503,7 +684,8 @@ function TVPlayClient() {
const toggleFullscreen = () => {
const root = document.querySelector<HTMLElement>('[data-tv-player-root]');
if (!root) return;
if (document.fullscreenElement) document.exitFullscreen().catch(() => undefined);
if (document.fullscreenElement)
document.exitFullscreen().catch(() => undefined);
else root.requestFullscreen?.().catch(() => undefined);
};
@@ -547,7 +729,9 @@ function TVPlayClient() {
useEffect(() => {
if (!videoUrl) return;
window.requestAnimationFrame(() => {
const video = document.querySelector<HTMLVideoElement>('[data-tv-player-root] video');
const video = document.querySelector<HTMLVideoElement>(
'[data-tv-player-root] video'
);
if (!video) return;
video.volume = volume;
video.muted = muted;
@@ -568,27 +752,34 @@ function TVPlayClient() {
setShowEpisodes(false);
setLoading(true);
setIsBuffering(false);
const currentPlayTime = Math.floor(timeRef.current.current || 0);
const oldSource = detail.source;
const oldId = detail.id;
const oldStorageKey = generateStorageKey(oldSource, oldId);
suppressPlayRecordSaveKeyRef.current = oldStorageKey;
try {
let next = item;
if (!item.episodes?.length) {
const data = await fetchTVDetail({ source: item.source, id: item.id, title: item.title });
const data = await fetchTVDetail({
source: item.source,
id: item.id,
title: item.title,
});
next = data.detail;
}
const targetIndex = Math.max(0, Math.min(episodeIndex, Math.max(0, (next.episodes?.length || 1) - 1)));
const maxIndex = Math.max(0, (next.episodes?.length || 1) - 1);
let targetIndex = Math.max(0, Math.min(episodeIndex, maxIndex));
let targetStartTime = 0;
try {
const records = await getAllPlayRecords();
const record = records[generateStorageKey(next.source, next.id)];
if (record?.index) {
targetIndex = Math.max(0, Math.min(maxIndex, record.index - 1));
targetStartTime = record.play_time > 1 ? record.play_time : 0;
}
} catch {
// 读取播放记录失败时保留当前集数，避免切源失败。
}
setDetail(next);
setEpisodeIndex(targetIndex);
setStartTime(currentPlayTime > 1 ? currentPlayTime : 0);
setStartTime(targetStartTime);
setEpisodePage(Math.floor(targetIndex / 30));
if (!(next.source === oldSource && next.id === oldId)) {
await deletePlayRecord(oldSource, oldId);
}
} catch (err) {
suppressPlayRecordSaveKeyRef.current = null;
setError(err instanceof Error ? err.message : '切换播放源失败');
} finally {
setLoading(false);
@@ -597,13 +788,17 @@ function TVPlayClient() {
useEffect(() => {
if (showDetail) {
window.requestAnimationFrame(() => detailCloseButtonRef.current?.focus({ preventScroll: true }));
window.requestAnimationFrame(() =>
detailCloseButtonRef.current?.focus({ preventScroll: true })
);
}
}, [showDetail]);
useEffect(() => {
if (showDanmakuSettings) {
window.requestAnimationFrame(() => danmakuFontSizeInputRef.current?.focus({ preventScroll: true }));
window.requestAnimationFrame(() =>
danmakuFontSizeInputRef.current?.focus({ preventScroll: true })
);
}
}, [showDanmakuSettings]);
@@ -624,7 +819,10 @@ function TVPlayClient() {
return;
}
const isMenuKey = event.key === 'ContextMenu' || event.key === 'Menu' || event.keyCode === 93;
const isMenuKey =
event.key === 'ContextMenu' ||
event.key === 'Menu' ||
event.keyCode === 93;
if (isMenuKey) {
event.preventDefault();
if (showPanel || showEpisodes || showDanmakuSettings) {
@@ -651,7 +849,9 @@ function TVPlayClient() {
}
if (event.key === 'Enter') {
const active = document.activeElement;
const isControlFocused = active instanceof HTMLElement && Boolean(active.closest('[data-tv-player-control]'));
const isControlFocused =
active instanceof HTMLElement &&
Boolean(active.closest('[data-tv-player-control]'));
if (!showPanel && !showEpisodes) {
event.preventDefault();
event.stopImmediatePropagation();
@@ -668,14 +868,22 @@ function TVPlayClient() {
return;
}
if (!showPanel && !showEpisodes && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
if (
!showPanel &&
!showEpisodes &&
(event.key === 'ArrowLeft' || event.key === 'ArrowRight')
) {
event.preventDefault();
const base = event.repeat ? 30 : 10;
seekBy(event.key === 'ArrowLeft' ? -base : base, true);
return;
}
if (!showPanel && !showEpisodes && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
if (
!showPanel &&
!showEpisodes &&
(event.key === 'ArrowUp' || event.key === 'ArrowDown')
) {
event.preventDefault();
setVideoVolume(volume + (event.key === 'ArrowUp' ? 0.05 : -0.05));
return;
@@ -696,15 +904,25 @@ function TVPlayClient() {
} else if (showPanel) {
setShowPanel(false);
blurTVPlayerControl();
}
else router.back();
} else router.back();
}
if (event.key === 'PageUp') switchEpisode(episodeIndex - 1);
if (event.key === 'PageDown') switchEpisode(episodeIndex + 1);
};
window.addEventListener('keydown', onKey, true);
return () => window.removeEventListener('keydown', onKey, true);
}, [detail?.episodes?.length, digitBuffer, episodeIndex, revealPanel, router, showDanmakuSettings, showDetail, showEpisodes, showPanel, volume]);
}, [
detail?.episodes?.length,
digitBuffer,
episodeIndex,
revealPanel,
router,
showDanmakuSettings,
showDetail,
showEpisodes,
showPanel,
volume,
]);
useEffect(() => {
if (!showEpisodes) return;
@@ -730,22 +948,46 @@ function TVPlayClient() {
const visibleEpisodeIndexes = useMemo(() => {
const total = detail?.episodes?.length || 0;
const start = Math.max(0, Math.min(episodePage, episodePages - 1)) * 30;
return Array.from({ length: Math.max(0, Math.min(30, total - start)) }, (_, idx) => start + idx);
return Array.from(
{ length: Math.max(0, Math.min(30, total - start)) },
(_, idx) => start + idx
);
}, [detail?.episodes?.length, episodePage, episodePages]);
if (loading) {
return <main className='fixed inset-0 flex items-center justify-center bg-black text-3xl font-bold text-white'><Loader2 className='mr-4 h-10 w-10 animate-spin text-rose-500' />正在进入电视播放...</main>;
return (
<main className='fixed inset-0 flex items-center justify-center bg-black text-3xl font-bold text-white'>
<Loader2 className='mr-4 h-10 w-10 animate-spin text-rose-500' />
正在进入电视播放...
</main>
);
}
if (error || !detail) {
return (
<main className='fixed inset-0 flex items-center justify-center bg-black p-10 text-center text-white'>
<section role='alert' className='max-w-3xl rounded-[36px] border border-red-500/40 bg-red-950/50 p-10 shadow-2xl shadow-red-950/40'>
<section
role='alert'
className='max-w-3xl rounded-[36px] border border-red-500/40 bg-red-950/50 p-10 shadow-2xl shadow-red-950/40'
>
<AlertTriangle className='mx-auto mb-5 h-16 w-16 text-red-300' />
<h1 className='text-4xl font-black text-red-100'>{error || '播放信息不存在'}</h1>
<h1 className='text-4xl font-black text-red-100'>
{error || '播放信息不存在'}
</h1>
<div className='mt-8 flex justify-center gap-4'>
<button onClick={() => window.location.reload()} className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-rose-600 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'><RotateCcw className='h-7 w-7' />重试</button>
<button onClick={() => router.back()} className='tv-focusable rounded-2xl bg-white/10 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-white/40'>返回</button>
<button
onClick={() => window.location.reload()}
className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-rose-600 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'
>
<RotateCcw className='h-7 w-7' />
重试
</button>
<button
onClick={() => router.back()}
className='tv-focusable rounded-2xl bg-white/10 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-white/40'
>
返回
</button>
</div>
</section>
</main>
@@ -753,9 +995,35 @@ function TVPlayClient() {
}
return (
<main data-tv-player-root data-tv-controls-open={showPanel || showEpisodes || showDetail || showDanmakuSettings ? 'true' : 'false'} className='fixed inset-0 overflow-hidden bg-black text-white'>
{videoUrl ? <TVNativeVideo key={`${videoUrl}-${retryNonce}`} url={videoUrl} poster={detail.poster} title={detail.title} onTime={onTime} command={toggleCommand} startTime={startTime} onError={() => setPlaybackError(true)} onPlayingChange={setIsPlaying} onBufferingChange={setIsBuffering} adFilterEnabled={adFilterEnabled} playbackRate={playbackRate} /> : (
<div className='flex h-full w-full items-center justify-center text-3xl font-bold text-white'><Loader2 className='mr-4 h-10 w-10 animate-spin text-rose-500' />{resolving ? '正在解析播放地址...' : '准备播放...'}</div>
<main
data-tv-player-root
data-tv-controls-open={
showPanel || showEpisodes || showDetail || showDanmakuSettings
? 'true'
: 'false'
}
className='fixed inset-0 overflow-hidden bg-black text-white'
>
{videoUrl ? (
<TVNativeVideo
key={`${videoUrl}-${retryNonce}`}
url={videoUrl}
poster={detail.poster}
title={detail.title}
onTime={onTime}
command={toggleCommand}
startTime={startTime}
onError={() => setPlaybackError(true)}
onPlayingChange={setIsPlaying}
onBufferingChange={setIsBuffering}
adFilterEnabled={adFilterEnabled}
playbackRate={playbackRate}
/>
) : (
<div className='flex h-full w-full items-center justify-center text-3xl font-bold text-white'>
<Loader2 className='mr-4 h-10 w-10 animate-spin text-rose-500' />
{resolving ? '正在解析播放地址...' : '准备播放...'}
</div>
)}
{activeDanmakuItems.length > 0 && (
<div
@@ -767,7 +1035,9 @@ function TVPlayClient() {
key={item.id}
className='absolute whitespace-nowrap text-3xl font-black drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]'
onAnimationEnd={() => {
setActiveDanmakuItems((prev) => prev.filter((active) => active.id !== item.id));
setActiveDanmakuItems((prev) =>
prev.filter((active) => active.id !== item.id)
);
}}
style={{
top: `${item.lane * 12}%`,
@@ -775,7 +1045,8 @@ function TVPlayClient() {
fontSize: `${danmakuSettings.fontSize}px`,
opacity: danmakuSettings.opacity,
animation: `tv-danmaku ${item.duration}s linear forwards`,
animationPlayState: isPlaying && !isBuffering ? 'running' : 'paused',
animationPlayState:
isPlaying && !isBuffering ? 'running' : 'paused',
}}
>
{item.text}
@@ -783,66 +1054,241 @@ function TVPlayClient() {
))}
<style jsx>{`
@keyframes tv-danmaku {
from { transform: translateX(100vw); }
to { transform: translateX(-120%); }
from {
transform: translateX(100vw);
}
to {
transform: translateX(-120%);
}
}
`}</style>
</div>
)}
{playbackError && (
<div role='alert' className='absolute inset-0 z-30 flex items-center justify-center bg-black/72 p-8 text-white backdrop-blur-sm'>
<div
role='alert'
className='absolute inset-0 z-30 flex items-center justify-center bg-black/72 p-8 text-white backdrop-blur-sm'
>
<section className='max-w-3xl rounded-[36px] border border-white/10 bg-slate-950/92 p-9 text-center shadow-2xl shadow-black/70'>
<AlertTriangle className='mx-auto mb-5 h-14 w-14 text-amber-300' />
<h2 className='text-4xl font-black'>当前视频加载失败</h2>
<p className='mt-3 text-2xl text-slate-300'>可以重试当前地址，或打开选集与线路面板切换播放源。</p>
<p className='mt-3 text-2xl text-slate-300'>
可以重试当前地址，或打开选集与线路面板切换播放源。
</p>
<div className='mt-8 flex justify-center gap-4'>
<button onClick={() => { setPlaybackError(false); setRetryNonce((v) => v + 1); }} className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-rose-600 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'><RotateCcw className='h-7 w-7' />重试</button>
<button onClick={() => { setPlaybackError(false); setShowPanel(true); setShowEpisodes(true); }} className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-white/10 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-white/40'><ListVideo className='h-7 w-7' />换源/选集</button>
<button
onClick={() => {
setPlaybackError(false);
setRetryNonce((v) => v + 1);
}}
className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-rose-600 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'
>
<RotateCcw className='h-7 w-7' />
重试
</button>
<button
onClick={() => {
setPlaybackError(false);
setShowPanel(true);
setShowEpisodes(true);
}}
className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-white/10 px-7 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-white/40'
>
<ListVideo className='h-7 w-7' />
换源/选集
</button>
</div>
</section>
</div>
)}
<div className={`absolute inset-0 pointer-events-none transition-opacity duration-300 ${showPanel ? 'opacity-100' : 'opacity-0'}`}>
<div
className={`absolute inset-0 pointer-events-none transition-opacity duration-300 ${
showPanel ? 'opacity-100' : 'opacity-0'
}`}
>
<div className='absolute inset-x-0 top-0 h-44 bg-gradient-to-b from-black/90 to-transparent' />
<div className='absolute inset-x-0 bottom-0 h-56 bg-gradient-to-t from-black/95 to-transparent' />
</div>
<div className={`absolute left-8 right-8 top-8 flex items-center justify-between transition-opacity duration-300 ${showPanel ? 'opacity-100' : 'opacity-0'}`}>
<button onClick={() => router.back()} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-black/70 px-5 py-4 text-2xl font-black outline-none backdrop-blur'><ArrowLeft className='h-7 w-7' />返回</button>
<div
className={`absolute left-8 right-8 top-8 flex items-center justify-between transition-opacity duration-300 ${
showPanel ? 'opacity-100' : 'opacity-0'
}`}
>
<button
onClick={() => router.back()}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-black/70 px-5 py-4 text-2xl font-black outline-none backdrop-blur'
>
<ArrowLeft className='h-7 w-7' />
返回
</button>
<div className='rounded-2xl bg-black/70 px-6 py-4 text-right backdrop-blur'>
<div className='max-w-[60vw] truncate text-3xl font-black'>{detail.title}</div>
<div className='mt-1 text-xl text-slate-300'>{episodeTitle} · {detail.source_name}</div>
<div className='max-w-[60vw] truncate text-3xl font-black'>
{detail.title}
</div>
<div className='mt-1 text-xl text-slate-300'>
{episodeTitle} · {detail.source_name}
</div>
</div>
</div>
<div data-tv-player-control className={`absolute bottom-8 left-8 right-8 transition-opacity duration-300 ${showPanel ? 'opacity-100' : 'pointer-events-none opacity-0'}`}>
<div
data-tv-player-control
className={`absolute bottom-8 left-8 right-8 transition-opacity duration-300 ${
showPanel ? 'opacity-100' : 'pointer-events-none opacity-0'
}`}
>
<div className='rounded-[28px] bg-black/75 p-4 backdrop-blur'>
<div onFocusCapture={scrollFocusedControlIntoView} className='flex items-center gap-3 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_button]:shrink-0 [&_button]:whitespace-nowrap'>
<button onClick={() => switchEpisode(episodeIndex - 1)} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'><SkipBack className='h-6 w-6' />上一集</button>
<button onClick={() => setToggleCommand((value) => value + 1)} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-rose-600 px-6 py-4 text-xl font-black outline-none'>
{isPlaying ? <Pause className='h-6 w-6' /> : <Play className='h-6 w-6 fill-current' />}
<div
onFocusCapture={scrollFocusedControlIntoView}
className='flex items-center gap-3 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_button]:shrink-0 [&_button]:whitespace-nowrap'
>
<button
onClick={() => switchEpisode(episodeIndex - 1)}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'
>
<SkipBack className='h-6 w-6' />
上一集
</button>
<button
onClick={() => setToggleCommand((value) => value + 1)}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-rose-600 px-6 py-4 text-xl font-black outline-none'
>
{isPlaying ? (
<Pause className='h-6 w-6' />
) : (
<Play className='h-6 w-6 fill-current' />
)}
{isPlaying ? '暂停' : '播放'}
</button>
<button onClick={() => switchEpisode(episodeIndex + 1)} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'>下一集<SkipForward className='h-6 w-6' /></button>
<button onClick={() => setShowEpisodes((v) => !v)} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'><ListVideo className='h-6 w-6' />选集</button>
<button onClick={toggleFavorite} data-tv-player-control className={`tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl px-5 py-4 text-xl font-bold outline-none ${favorited ? 'bg-rose-600' : 'bg-white/10'}`}><Heart className={`h-6 w-6 ${favorited ? 'fill-current' : ''}`} />收藏</button>
<button onClick={() => { setShowDetail(true); revealPanel(); }} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'><Info className='h-6 w-6' />详情</button>
<button onClick={() => setDanmakuEnabled((v) => !v)} data-tv-player-control className={`tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl px-5 py-4 text-xl font-bold outline-none ${danmakuEnabled ? 'bg-rose-600' : 'bg-white/10'}`}><MessageCircle className='h-6 w-6' />弹幕</button>
<button onClick={() => { setShowEpisodes(false); setShowDanmakuSettings(true); revealPanel(); }} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'><SlidersHorizontal className='h-6 w-6' />弹幕设置</button>
<button onClick={() => setAdFilterEnabled((v) => !v)} data-tv-player-control className={`tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl px-5 py-4 text-xl font-bold outline-none ${adFilterEnabled ? 'bg-rose-600' : 'bg-white/10'}`}><ShieldOff className='h-6 w-6' />去广告</button>
<button onClick={cyclePlaybackRate} data-tv-player-control className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'>{playbackRate}x</button>
<button onClick={toggleMute} data-tv-player-control className='tv-focusable rounded-2xl bg-white/10 p-4 outline-none' title='静音'>{muted ? <VolumeX className='h-6 w-6' /> : <Volume2 className='h-6 w-6' />}</button>
<button onClick={toggleFullscreen} data-tv-player-control className='tv-focusable rounded-2xl bg-white/10 p-4 outline-none'><Maximize className='h-6 w-6' /></button>
<span className='shrink-0 whitespace-nowrap px-2 text-xl font-bold text-slate-200'>{formatTVTime(time.current)} / {formatTVTime(time.duration)}</span>
<button
onClick={() => switchEpisode(episodeIndex + 1)}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'
>
下一集
<SkipForward className='h-6 w-6' />
</button>
<button
onClick={() => setShowEpisodes((v) => !v)}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'
>
<ListVideo className='h-6 w-6' />
选集
</button>
<button
onClick={toggleFavorite}
data-tv-player-control
className={`tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl px-5 py-4 text-xl font-bold outline-none ${
favorited ? 'bg-rose-600' : 'bg-white/10'
}`}
>
<Heart className={`h-6 w-6 ${favorited ? 'fill-current' : ''}`} />
收藏
</button>
<button
onClick={() => {
setShowDetail(true);
revealPanel();
}}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'
>
<Info className='h-6 w-6' />
详情
</button>
<button
onClick={() => setDanmakuEnabled((v) => !v)}
data-tv-player-control
className={`tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl px-5 py-4 text-xl font-bold outline-none ${
danmakuEnabled ? 'bg-rose-600' : 'bg-white/10'
}`}
>
<MessageCircle className='h-6 w-6' />
弹幕
</button>
<button
onClick={() => {
setShowEpisodes(false);
setShowDanmakuSettings(true);
revealPanel();
}}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'
>
<SlidersHorizontal className='h-6 w-6' />
弹幕设置
</button>
<button
onClick={() => setAdFilterEnabled((v) => !v)}
data-tv-player-control
className={`tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl px-5 py-4 text-xl font-bold outline-none ${
adFilterEnabled ? 'bg-rose-600' : 'bg-white/10'
}`}
>
<ShieldOff className='h-6 w-6' />
去广告
</button>
<button
onClick={cyclePlaybackRate}
data-tv-player-control
className='tv-focusable flex cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-xl font-bold outline-none'
>
{playbackRate}x
</button>
<button
onClick={toggleMute}
data-tv-player-control
className='tv-focusable rounded-2xl bg-white/10 p-4 outline-none'
title='静音'
>
{muted ? (
<VolumeX className='h-6 w-6' />
) : (
<Volume2 className='h-6 w-6' />
)}
</button>
<button
onClick={toggleFullscreen}
data-tv-player-control
className='tv-focusable rounded-2xl bg-white/10 p-4 outline-none'
>
<Maximize className='h-6 w-6' />
</button>
<span className='shrink-0 whitespace-nowrap px-2 text-xl font-bold text-slate-200'>
{formatTVTime(time.current)} / {formatTVTime(time.duration)}
</span>
</div>
</div>
<div className='mt-4 rounded-3xl bg-black/70 p-4 backdrop-blur'>
<input aria-label='播放进度' data-tv-no-focus='true' tabIndex={-1} type='range' min='0' max={Math.max(1, time.duration || 1)} step='1' value={Math.min(time.current, time.duration || time.current)} onChange={(e) => seekTo(Number(e.target.value))} className='h-3 w-full cursor-pointer accent-rose-600' />
<input
aria-label='播放进度'
data-tv-no-focus='true'
tabIndex={-1}
type='range'
min='0'
max={Math.max(1, time.duration || 1)}
step='1'
value={Math.min(time.current, time.duration || time.current)}
onChange={(e) => seekTo(Number(e.target.value))}
className='h-3 w-full cursor-pointer accent-rose-600'
/>
<div className='mt-2 flex items-center justify-between text-lg font-bold text-slate-200'>
<span>{formatTVTime(time.current)}</span>
<span>{time.duration ? `${Math.max(0, Math.round((time.current / time.duration) * 100))}%` : '0%'}</span>
<span>
{time.duration
? `${Math.max(
0,
Math.round((time.current / time.duration) * 100)
)}%`
: '0%'}
</span>
<span>{formatTVTime(time.duration)}</span>
</div>
</div>
@@ -850,24 +1296,66 @@ function TVPlayClient() {
{showEpisodes && (
<aside className='absolute bottom-40 right-8 max-h-[55vh] w-[560px] overflow-y-auto rounded-[34px] border border-white/10 bg-slate-950/92 p-6 shadow-2xl shadow-black/70 backdrop-blur-2xl'>
<h2 className='mb-5 flex items-center gap-3 text-3xl font-black'><Layers className='h-8 w-8 text-rose-500' />选集与线路</h2>
<h2 className='mb-5 flex items-center gap-3 text-3xl font-black'>
<Layers className='h-8 w-8 text-rose-500' />
选集与线路
</h2>
<div className='mb-6'>
<div className='mb-2 text-xl font-black text-slate-300'>播放源</div>
<div className='flex gap-3 overflow-x-auto px-2 py-3 [scrollbar-width:none]'>
{sources.length > 0 ? sources.map((item) => <button key={`${item.source}-${item.id}`} onClick={() => switchSource(item)} data-tv-player-control className={`tv-focusable shrink-0 cursor-pointer rounded-2xl px-5 py-3 text-xl font-bold outline-none focus:ring-4 focus:ring-rose-300 ${detail.source === item.source && detail.id === item.id ? 'bg-rose-600' : 'bg-white/10'}`}>{item.source_name || item.source}</button>) : <span className='text-xl text-slate-400'>暂无其他播放源</span>}
{sources.length > 0 ? (
sources.map((item) => (
<button
key={`${item.source}-${item.id}`}
onClick={() => switchSource(item)}
data-tv-player-control
className={`tv-focusable shrink-0 cursor-pointer rounded-2xl px-5 py-3 text-xl font-bold outline-none focus:ring-4 focus:ring-rose-300 ${
detail.source === item.source && detail.id === item.id
? 'bg-rose-600'
: 'bg-white/10'
}`}
>
{item.source_name || item.source}
</button>
))
) : (
<span className='text-xl text-slate-400'>暂无其他播放源</span>
)}
</div>
</div>
{episodePages > 1 && (
<div className='mb-5 flex gap-3 overflow-x-auto px-2 py-2 [scrollbar-width:none]'>
{Array.from({ length: episodePages }, (_, page) => (
<button key={page} onClick={() => setEpisodePage(page)} data-tv-player-control className={`tv-focusable shrink-0 cursor-pointer rounded-2xl px-5 py-3 text-xl font-black outline-none focus:ring-4 focus:ring-rose-300 ${page === episodePage ? 'bg-rose-600' : 'bg-white/10'}`}>
{page * 30 + 1}-{Math.min((page + 1) * 30, detail.episodes.length)}
<button
key={page}
onClick={() => setEpisodePage(page)}
data-tv-player-control
className={`tv-focusable shrink-0 cursor-pointer rounded-2xl px-5 py-3 text-xl font-black outline-none focus:ring-4 focus:ring-rose-300 ${
page === episodePage ? 'bg-rose-600' : 'bg-white/10'
}`}
>
{page * 30 + 1}-
{Math.min((page + 1) * 30, detail.episodes.length)}
</button>
))}
</div>
)}
<div className='grid grid-cols-4 gap-3'>
{visibleEpisodeIndexes.map((index) => <button key={index} ref={(el) => { episodeButtonRefs.current[index] = el; }} onClick={() => switchEpisode(index)} data-tv-player-control className={`tv-focusable min-h-16 cursor-pointer rounded-2xl px-3 py-3 text-lg font-black outline-none focus:ring-4 focus:ring-rose-300 ${index === episodeIndex ? 'bg-rose-600' : 'bg-white/10'}`}>{detail.episodes_titles?.[index] || `第 ${index + 1} 集`}</button>)}
{visibleEpisodeIndexes.map((index) => (
<button
key={index}
ref={(el) => {
episodeButtonRefs.current[index] = el;
}}
onClick={() => switchEpisode(index)}
data-tv-player-control
className={`tv-focusable min-h-16 cursor-pointer rounded-2xl px-3 py-3 text-lg font-black outline-none focus:ring-4 focus:ring-rose-300 ${
index === episodeIndex ? 'bg-rose-600' : 'bg-white/10'
}`}
>
{detail.episodes_titles?.[index] || `第 ${index + 1} 集`}
</button>
))}
</div>
</aside>
)}
@@ -880,15 +1368,26 @@ function TVPlayClient() {
className='w-[720px] max-w-[92vw] rounded-[34px] border border-white/10 bg-slate-950/95 p-7 text-white shadow-2xl shadow-black/80'
onKeyDownCapture={(event) => {
const target = event.target;
if (!(target instanceof HTMLElement) || !target.closest('[data-tv-danmaku-settings]')) return;
if (
!(target instanceof HTMLElement) ||
!target.closest('[data-tv-danmaku-settings]')
)
return;
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
if (target instanceof HTMLInputElement && target.type === 'range') {
if (
target instanceof HTMLInputElement &&
target.type === 'range'
) {
const field = getDanmakuSettingField(target);
if (!field) return;
event.preventDefault();
event.stopPropagation();
updateTVDanmakuSetting(field, event.key === 'ArrowRight' ? 1 : -1, setDanmakuSettings);
updateTVDanmakuSetting(
field,
event.key === 'ArrowRight' ? 1 : -1,
setDanmakuSettings
);
revealPanel();
}
return;
@@ -897,21 +1396,39 @@ function TVPlayClient() {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault();
event.stopPropagation();
moveFocusWithinScope(event.currentTarget as HTMLElement, event.key === 'ArrowDown' ? 'down' : 'up');
moveFocusWithinScope(
event.currentTarget as HTMLElement,
event.key === 'ArrowDown' ? 'down' : 'up'
);
revealPanel();
}
}}
>
<div className='mb-7 flex items-center justify-between gap-5'>
<h2 className='flex items-center gap-3 text-3xl font-black'><SlidersHorizontal className='h-8 w-8 text-rose-500' />弹幕设置</h2>
<button onClick={() => { setShowDanmakuSettings(false); blurTVPlayerControl(); }} data-tv-player-control className='tv-focusable flex shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-2xl bg-white/10 px-5 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'><X className='h-7 w-7' />关闭</button>
<h2 className='flex items-center gap-3 text-3xl font-black'>
<SlidersHorizontal className='h-8 w-8 text-rose-500' />
弹幕设置
</h2>
<button
onClick={() => {
setShowDanmakuSettings(false);
blurTVPlayerControl();
}}
data-tv-player-control
className='tv-focusable flex shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-2xl bg-white/10 px-5 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'
>
<X className='h-7 w-7' />
关闭
</button>
</div>
<div className='space-y-7'>
<label className='block'>
<div className='mb-3 flex items-center justify-between text-xl font-bold'>
<span>字号</span>
<span className='text-rose-200'>{danmakuSettings.fontSize}px</span>
<span className='text-rose-200'>
{danmakuSettings.fontSize}px
</span>
</div>
<input
ref={danmakuFontSizeInputRef}
@@ -923,7 +1440,12 @@ function TVPlayClient() {
max='46'
step='1'
value={danmakuSettings.fontSize}
onChange={(event) => setDanmakuSettings((prev) => ({ ...prev, fontSize: Number(event.target.value) }))}
onChange={(event) =>
setDanmakuSettings((prev) => ({
...prev,
fontSize: Number(event.target.value),
}))
}
className='tv-focusable h-3 w-full cursor-pointer accent-rose-600 outline-none'
/>
</label>
@@ -931,7 +1453,9 @@ function TVPlayClient() {
<label className='block'>
<div className='mb-3 flex items-center justify-between text-xl font-bold'>
<span>显示区域</span>
<span className='text-rose-200'>{danmakuSettings.displayArea}%</span>
<span className='text-rose-200'>
{danmakuSettings.displayArea}%
</span>
</div>
<input
aria-label='弹幕显示区域'
@@ -942,7 +1466,12 @@ function TVPlayClient() {
max='72'
step='2'
value={danmakuSettings.displayArea}
onChange={(event) => setDanmakuSettings((prev) => ({ ...prev, displayArea: Number(event.target.value) }))}
onChange={(event) =>
setDanmakuSettings((prev) => ({
...prev,
displayArea: Number(event.target.value),
}))
}
className='tv-focusable h-3 w-full cursor-pointer accent-rose-600 outline-none'
/>
</label>
@@ -950,7 +1479,9 @@ function TVPlayClient() {
<label className='block'>
<div className='mb-3 flex items-center justify-between text-xl font-bold'>
<span>不透明度</span>
<span className='text-rose-200'>{Math.round(danmakuSettings.opacity * 100)}%</span>
<span className='text-rose-200'>
{Math.round(danmakuSettings.opacity * 100)}%
</span>
</div>
<input
aria-label='弹幕不透明度'
@@ -961,7 +1492,12 @@ function TVPlayClient() {
max='100'
step='5'
value={Math.round(danmakuSettings.opacity * 100)}
onChange={(event) => setDanmakuSettings((prev) => ({ ...prev, opacity: Number(event.target.value) / 100 }))}
onChange={(event) =>
setDanmakuSettings((prev) => ({
...prev,
opacity: Number(event.target.value) / 100,
}))
}
className='tv-focusable h-3 w-full cursor-pointer accent-rose-600 outline-none'
/>
</label>
@@ -971,43 +1507,110 @@ function TVPlayClient() {
)}
{showDetail && (
<div className='absolute inset-0 z-40 flex items-center justify-center bg-black/72 p-10 backdrop-blur-sm'>
<section data-tv-player-control className='max-h-[82vh] w-[980px] max-w-[92vw] overflow-y-auto rounded-[42px] border border-white/10 bg-slate-950/95 p-8 text-white shadow-2xl shadow-black/80'>
<section
data-tv-player-control
className='max-h-[82vh] w-[980px] max-w-[92vw] overflow-y-auto rounded-[42px] border border-white/10 bg-slate-950/95 p-8 text-white shadow-2xl shadow-black/80'
>
<div className='mb-6 flex items-start justify-between gap-6'>
<div>
<h2 className='text-5xl font-black'>{detail.title}</h2>
<div className='mt-4 flex flex-wrap gap-3 text-xl font-bold text-slate-200'>
<span className='rounded-full bg-rose-600 px-4 py-2'>{detail.source_name || detail.source}</span>
{detail.year && <span className='rounded-full bg-white/10 px-4 py-2'>{detail.year}</span>}
{detail.type_name && <span className='rounded-full bg-white/10 px-4 py-2'>{detail.type_name}</span>}
{detail.vod_remarks && <span className='rounded-full bg-white/10 px-4 py-2'>{detail.vod_remarks}</span>}
<span className='rounded-full bg-white/10 px-4 py-2'>{episodeTitle}</span>
<span className='rounded-full bg-rose-600 px-4 py-2'>
{detail.source_name || detail.source}
</span>
{detail.year && (
<span className='rounded-full bg-white/10 px-4 py-2'>
{detail.year}
</span>
)}
{detail.type_name && (
<span className='rounded-full bg-white/10 px-4 py-2'>
{detail.type_name}
</span>
)}
{detail.vod_remarks && (
<span className='rounded-full bg-white/10 px-4 py-2'>
{detail.vod_remarks}
</span>
)}
<span className='rounded-full bg-white/10 px-4 py-2'>
{episodeTitle}
</span>
</div>
</div>
<button ref={detailCloseButtonRef} onClick={() => setShowDetail(false)} data-tv-player-control className='tv-focusable flex shrink-0 cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'><X className='h-7 w-7' />关闭</button>
<button
ref={detailCloseButtonRef}
onClick={() => setShowDetail(false)}
data-tv-player-control
className='tv-focusable flex shrink-0 cursor-pointer items-center gap-2 rounded-2xl bg-white/10 px-5 py-4 text-2xl font-black outline-none focus:ring-4 focus:ring-rose-300'
>
<X className='h-7 w-7' />
关闭
</button>
</div>
{detail.poster && <img src={detail.poster} alt='' className='float-left mr-7 mb-4 h-72 w-48 rounded-3xl object-cover shadow-xl shadow-black/50' />}
<p className='whitespace-pre-line text-2xl leading-relaxed text-slate-200'>{detail.desc || '暂无详情简介'}</p>
{detail.poster && (
<img
src={detail.poster}
alt=''
className='float-left mr-7 mb-4 h-72 w-48 rounded-3xl object-cover shadow-xl shadow-black/50'
/>
)}
<p className='whitespace-pre-line text-2xl leading-relaxed text-slate-200'>
{detail.desc || '暂无详情简介'}
</p>
</section>
</div>
)}
{digitBuffer && <div className='absolute right-10 top-32 rounded-3xl bg-black/75 px-7 py-5 text-5xl font-black text-white shadow-2xl'>第 {digitBuffer} 集</div>}
{digitBuffer && (
<div className='absolute right-10 top-32 rounded-3xl bg-black/75 px-7 py-5 text-5xl font-black text-white shadow-2xl'>
第 {digitBuffer} 集
</div>
)}
{showVolumeHint && !showPanel && !showEpisodes && (
<div className='absolute right-10 top-1/2 flex -translate-y-1/2 flex-col items-center gap-4 rounded-3xl bg-black/80 px-6 py-7 text-3xl font-black text-white shadow-2xl backdrop-blur'>
{muted || volume <= 0 ? <VolumeX className='h-10 w-10' /> : <Volume2 className='h-10 w-10' />}
{muted || volume <= 0 ? (
<VolumeX className='h-10 w-10' />
) : (
<Volume2 className='h-10 w-10' />
)}
<div className='relative h-56 w-4 overflow-hidden rounded-full bg-white/20'>
<div className='absolute bottom-0 left-0 right-0 rounded-full bg-rose-600' style={{ height: `${Math.round((muted ? 0 : volume) * 100)}%` }} />
<div
className='absolute bottom-0 left-0 right-0 rounded-full bg-rose-600'
style={{ height: `${Math.round((muted ? 0 : volume) * 100)}%` }}
/>
</div>
<div className='min-w-16 text-center'>
{Math.round((muted ? 0 : volume) * 100)}
</div>
<div className='min-w-16 text-center'>{Math.round((muted ? 0 : volume) * 100)}</div>
</div>
)}
{seekHint && !showPanel && !showEpisodes && (
<div className='absolute bottom-16 left-1/2 w-[720px] max-w-[86vw] -translate-x-1/2 rounded-[34px] bg-black/82 px-8 py-6 text-white shadow-2xl backdrop-blur'>
<div className='mb-4 flex items-center justify-between text-3xl font-black'>
<span>{seekHint.delta > 0 ? `快进 ${seekHint.delta}s` : seekHint.delta < 0 ? `快退 ${Math.abs(seekHint.delta)}s` : '定位进度'}</span>
<span>{formatTVTime(seekHint.current)} / {formatTVTime(seekHint.duration)}</span>
<span>
{seekHint.delta > 0
? `快进 ${seekHint.delta}s`
: seekHint.delta < 0
? `快退 ${Math.abs(seekHint.delta)}s`
: '定位进度'}
</span>
<span>
{formatTVTime(seekHint.current)} /{' '}
{formatTVTime(seekHint.duration)}
</span>
</div>
<div className='h-3 overflow-hidden rounded-full bg-white/20'>
<div className='h-full rounded-full bg-rose-600' style={{ width: seekHint.duration ? `${Math.min(100, (seekHint.current / seekHint.duration) * 100)}%` : '0%' }} />
<div
className='h-full rounded-full bg-rose-600'
style={{
width: seekHint.duration
? `${Math.min(
100,
(seekHint.current / seekHint.duration) * 100
)}%`
: '0%',
}}
/>
</div>
</div>
)}
@@ -1017,5 +1620,9 @@ function TVPlayClient() {
}
export default function TVPlayPage() {
return <Suspense fallback={null}><TVPlayClient /></Suspense>;
return (
<Suspense fallback={null}>
<TVPlayClient />
</Suspense>
);
}