Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add hover controls

Browse Source
This commit is contained in:
Zoe Roux 2022-10-05 13:51:28 +09:00
parent 251b80b152
commit 9b62cb8a93
1 changed files with 82 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
front/src/pages/watch/[slug].tsx
View File

@ -447,6 +447,9 @@ const query = (slug: string): QueryIdentifier<WatchItem> => ({
parser: WatchItemP, parser: WatchItemP,
}); });
//
let mouseCallback: NodeJS.Timeout;
const Player: QueryPage<{ slug: string }> = ({ slug }) => { const Player: QueryPage<{ slug: string }> = ({ slug }) => {
const { data, error } = useFetch(query(slug)); const { data, error } = useFetch(query(slug));
const { const {
@ -458,18 +461,36 @@ const Player: QueryPage<{ slug: string }> = ({ slug }) => {
setProgress, setProgress,
setVolume, setVolume,
} = useVideoController(); } = useVideoController();
const [showHover, setHover] = useState(true); const [showHover, setHover] = useState(false);
const [mouseMoved, setMouseMoved] = useState(false);
useEffect(() => {
const handler = () => {
setMouseMoved(true);
if (mouseCallback) clearTimeout(mouseCallback);
mouseCallback = setTimeout(() => {
setMouseMoved(false);
}, 2500);
};
document.addEventListener("mousemove", handler);
return () => document.removeEventListener("mousemove", handler);
});
const name = data const name = data
? data.isMovie ? data.isMovie
? data.name ? data.name
: `${episodeDisplayNumber(data, "")} ${data.name}` : `${episodeDisplayNumber(data, "")} ${data.name}`
: undefined; : undefined;
const displayControls = showHover || !isPlaying || mouseMoved;
if (error) return <ErrorPage {...error} />; if (error) return <ErrorPage {...error} />;
return ( return (
<> <Box
onMouseLeave={() => setMouseMoved(false)}
sx={{ cursor: displayControls ? "unset" : "none" }}
>
<Box <Box
component="video" component="video"
src={data?.link.direct} src={data?.link.direct}
@ -487,60 +508,70 @@ const Player: QueryPage<{ slug: string }> = ({ slug }) => {
}} }}
/> />
{isLoading && <LoadingIndicator />} {isLoading && <LoadingIndicator />}
{showHover && ( <Box
<> onMouseEnter={() => setHover(true)}
<Back onMouseLeave={() => setHover(false)}
name={data?.name} sx={ displayControls ? {
href={data ? (data.isMovie ? `/movie/${data.slug}` : `/show/${data.showSlug}`) : "#"} visibility: "visible",
/> opacity: 1,
<Box transition: "opacity .2s ease-in",
sx={{ } : {
position: "absolute", visibility: "hidden",
bottom: 0, opacity: 0,
left: 0, transition: "opacity .4s ease-out, visibility 0s .4s",
right: 0, }}
background: "rgba(0, 0, 0, 0.6)", >
display: "flex", <Back
padding: "1%", name={data?.name}
}} href={data ? (data.isMovie ? `/movie/${data.slug}` : `/show/${data.showSlug}`) : "#"}
> />
<VideoPoster poster={data?.poster} /> <Box
<Box sx={{ width: "100%", ml: 3, display: "flex", flexDirection: "column" }}> sx={{
<Typography variant="h4" component="h2" color="white" sx={{ pb: 1 }}> position: "absolute",
{name ?? <Skeleton />} bottom: 0,
</Typography> left: 0,
right: 0,
background: "rgba(0, 0, 0, 0.6)",
display: "flex",
padding: "1%",
}}
>
<VideoPoster poster={data?.poster} />
<Box sx={{ width: "100%", ml: 3, display: "flex", flexDirection: "column" }}>
<Typography variant="h4" component="h2" color="white" sx={{ pb: 1 }}>
{name ?? <Skeleton />}
</Typography>
<ProgressBar <ProgressBar
progress={progress} progress={progress}
duration={duration} duration={duration}
buffered={buffered} buffered={buffered}
setProgress={setProgress} setProgress={setProgress}
chapters={data?.chapters} chapters={data?.chapters}
/> />
<Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}> <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<LeftButtons <LeftButtons
previousSlug={data && !data.isMovie ? data.previousEpisode?.slug : undefined} previousSlug={data && !data.isMovie ? data.previousEpisode?.slug : undefined}
nextSlug={data && !data.isMovie ? data.nextEpisode?.slug : undefined} nextSlug={data && !data.isMovie ? data.nextEpisode?.slug : undefined}
isPlaying={isPlaying} isPlaying={isPlaying}
volume={volume} volume={volume}
isMuted={isMuted} isMuted={isMuted}
togglePlay={togglePlay} togglePlay={togglePlay}
toggleMute={toggleMute} toggleMute={toggleMute}
setVolume={setVolume} setVolume={setVolume}
/> />
<Typography color="white" sx={{ alignSelf: "center" }}> <Typography color="white" sx={{ alignSelf: "center" }}>
{toTimerString(progress, duration)} : {toTimerString(duration)} {toTimerString(progress, duration)} : {toTimerString(duration)}
</Typography> </Typography>
</Box>
<RightButtons isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} />
</Box> </Box>
<RightButtons isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} />
</Box> </Box>
</Box> </Box>
</> </Box>
)} </Box>
</> </Box>
); );
}; };