diff --git a/app/player/page.tsx b/app/player/page.tsx index 9f71a6e..ee17e3b 100644 --- a/app/player/page.tsx +++ b/app/player/page.tsx @@ -9,6 +9,7 @@ import { EpisodeList } from '@/components/player/EpisodeList'; import { PlayerError } from '@/components/player/PlayerError'; import { SourceInfo } from '@/components/player/EpisodeList'; import type { VideoSource } from '@/lib/types'; +import type { VideoResolutionInfo } from '@/components/player/hooks/useVideoResolution'; import { useVideoPlayer } from '@/lib/hooks/useVideoPlayer'; import { useHistory } from '@/lib/store/history-store'; import { FavoritesSidebar } from '@/components/favorites/FavoritesSidebar'; @@ -265,6 +266,9 @@ function PlayerContent() { const [currentSourceId, setCurrentSourceId] = useState(source); const playerTimeRef = useRef(0); + // Track detected video resolution from the player + const [detectedResolution, setDetectedResolution] = useState(null); + // Add initial history entry when video data is loaded useEffect(() => { if (videoData && playUrl && videoId) { @@ -363,6 +367,7 @@ function PlayerContent() { videoTitle={videoData?.vod_name || title || ''} episodeName={videoData?.episodes?.[currentEpisode]?.name || ''} externalTimeRef={playerTimeRef} + onResolutionDetected={setDetectedResolution} />
0 ? groupedSources : undefined} currentSource={currentSourceId || source || ''} + currentResolution={detectedResolution} onSourceChange={(newSource) => { const params = new URLSearchParams(); params.set('id', String(newSource.id)); diff --git a/components/player/CustomVideoPlayer.tsx b/components/player/CustomVideoPlayer.tsx index f160e2d..55aab10 100644 --- a/components/player/CustomVideoPlayer.tsx +++ b/components/player/CustomVideoPlayer.tsx @@ -18,6 +18,8 @@ interface CustomVideoPlayerProps { // Danmaku props videoTitle?: string; episodeName?: string; + // Resolution callback + onResolutionDetected?: (info: import('./hooks/useVideoResolution').VideoResolutionInfo) => void; } /** diff --git a/components/player/DesktopVideoPlayer.tsx b/components/player/DesktopVideoPlayer.tsx index aeb179a..55df33d 100644 --- a/components/player/DesktopVideoPlayer.tsx +++ b/components/player/DesktopVideoPlayer.tsx @@ -31,6 +31,8 @@ interface DesktopVideoPlayerProps { // Danmaku props videoTitle?: string; episodeName?: string; + // Resolution callback + onResolutionDetected?: (info: import('./hooks/useVideoResolution').VideoResolutionInfo) => void; } export function DesktopVideoPlayer({ @@ -46,6 +48,7 @@ export function DesktopVideoPlayer({ isReversed = false, videoTitle = '', episodeName = '', + onResolutionDetected, }: DesktopVideoPlayerProps) { const { refs, data, actions } = useDesktopPlayerState(); const { fullscreenType: settingsFullscreenType } = usePlayerSettings(); @@ -55,6 +58,13 @@ export function DesktopVideoPlayer({ // Detect actual video resolution const videoResolution = useVideoResolution(refs.videoRef); + // Notify parent when resolution is detected + React.useEffect(() => { + if (videoResolution && onResolutionDetected) { + onResolutionDetected(videoResolution); + } + }, [videoResolution, onResolutionDetected]); + // Danmaku const { danmakuEnabled, setDanmakuEnabled, comments: danmakuComments } = useDanmaku({ videoTitle, diff --git a/components/player/EpisodeList.tsx b/components/player/EpisodeList.tsx index 542d866..16d9815 100644 --- a/components/player/EpisodeList.tsx +++ b/components/player/EpisodeList.tsx @@ -10,6 +10,7 @@ import { Button } from '@/components/ui/Button'; import { useKeyboardNavigation } from '@/lib/hooks/useKeyboardNavigation'; import { settingsStore } from '@/lib/store/settings-store'; import { extractQualityLabel } from '@/lib/utils/video'; +import type { VideoResolutionInfo } from './hooks/useVideoResolution'; interface Episode { name?: string; @@ -36,6 +37,8 @@ interface EpisodeListProps { sources?: SourceInfo[]; currentSource?: string; onSourceChange?: (source: SourceInfo) => void; + // Actual detected resolution for the current source + currentResolution?: VideoResolutionInfo | null; } export function EpisodeList({ @@ -47,6 +50,7 @@ export function EpisodeList({ sources, currentSource, onSourceChange, + currentResolution, }: EpisodeListProps) { const listRef = useRef(null); const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); @@ -228,6 +232,11 @@ export function EpisodeList({ {currentSourceInfo?.sourceName || currentSourceInfo?.source || '当前来源'} + {currentResolution && ( + + {currentResolution.label} + + )} {sources!.length}
{source.sourceName || source.source} {(() => { + // For the current source, prefer actual detected resolution + if (isCurrent && currentResolution) { + return ( + + {currentResolution.label} + + ); + } const qb = extractQualityLabel(source.remarks); return qb ? ( @@ -402,6 +419,14 @@ export function EpisodeList({
{source.sourceName || source.source} {(() => { + // For the current source, prefer actual detected resolution + if (isCurrent && currentResolution) { + return ( + + {currentResolution.label} + + ); + } const qb = extractQualityLabel(source.remarks); return qb ? ( diff --git a/components/player/VideoPlayer.tsx b/components/player/VideoPlayer.tsx index 2ee644a..de75752 100644 --- a/components/player/VideoPlayer.tsx +++ b/components/player/VideoPlayer.tsx @@ -25,6 +25,8 @@ interface VideoPlayerProps { episodeName?: string; // Expose current time to parent externalTimeRef?: React.MutableRefObject; + // Resolution callback + onResolutionDetected?: (info: import('./hooks/useVideoResolution').VideoResolutionInfo) => void; } export function VideoPlayer({ @@ -39,6 +41,7 @@ export function VideoPlayer({ videoTitle, episodeName, externalTimeRef, + onResolutionDetected, }: VideoPlayerProps) { const [videoError, setVideoError] = useState(''); const [useProxy, setUseProxy] = useState(false); @@ -244,6 +247,7 @@ export function VideoPlayer({ isReversed={isReversed} videoTitle={videoTitle} episodeName={episodeName} + onResolutionDetected={onResolutionDetected} /> )}