You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
941 B
30 lines
941 B
import { useMemo } from "react"; |
|
import { useVideoPlayerState } from "../VideoContext"; |
|
|
|
export function ShowTitleControl() { |
|
const { videoState } = useVideoPlayerState(); |
|
|
|
const { current, seasons } = videoState.seasonData; |
|
|
|
const currentSeasonInfo = useMemo(() => { |
|
return seasons?.find((season) => season.id === current?.seasonId); |
|
}, [seasons, current]); |
|
|
|
const currentEpisodeInfo = useMemo(() => { |
|
return currentSeasonInfo?.episodes?.find( |
|
(episode) => episode.id === current?.episodeId |
|
); |
|
}, [currentSeasonInfo, current]); |
|
|
|
if (!videoState.seasonData.isSeries) return null; |
|
if (!videoState.seasonData.current) return null; |
|
|
|
const selectedText = `S${currentSeasonInfo?.number} E${currentEpisodeInfo?.number}`; |
|
|
|
return ( |
|
<p className="ml-8 select-none space-x-2 text-white"> |
|
<span>{selectedText}</span> |
|
<span className="opacity-50">{currentEpisodeInfo?.title}</span> |
|
</p> |
|
); |
|
}
|
|
|