Add hover controls

front/src/pages/watch/[slug].tsx

@@ -447,6 +447,9 @@ const query = (slug: string): QueryIdentifier<WatchItem> => ({
 	parser: WatchItemP,
 });
 
+//
+let mouseCallback: NodeJS.Timeout;
+
 const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 	const { data, error } = useFetch(query(slug));
 	const {
@@ -458,18 +461,36 @@ const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 		setProgress,
 		setVolume,
 	} = 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
 		? data.isMovie
 			? data.name
 			: `${episodeDisplayNumber(data, "")} ${data.name}`
 		: undefined;
+	const displayControls = showHover || !isPlaying || mouseMoved;
 
 	if (error) return <ErrorPage {...error} />;
 
 	return (
-		<>
+		<Box
+			onMouseLeave={() => setMouseMoved(false)}
+			sx={{ cursor: displayControls ? "unset" : "none" }}
+		>
 			<Box
 				component="video"
 				src={data?.link.direct}
@@ -487,8 +508,19 @@ const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 				}}
 			/>
 			{isLoading && <LoadingIndicator />}
-			{showHover && (
+			<Box
-				<>
+				onMouseEnter={() => setHover(true)}
+				onMouseLeave={() => setHover(false)}
+				sx={ displayControls ? {
+					visibility: "visible",
+					opacity: 1,
+					transition: "opacity .2s ease-in",
+				} : {
+					visibility: "hidden",
+					opacity: 0,
+					transition: "opacity .4s ease-out, visibility 0s .4s",
+				}}
+			>
 				<Back
 					name={data?.name}
 					href={data ? (data.isMovie ? `/movie/${data.slug}` : `/show/${data.showSlug}`) : "#"}
@@ -538,9 +570,8 @@ const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 						</Box>
 					</Box>
 				</Box>
-				</>
+			</Box>
-			)}
+		</Box>
-		</>
 	);
 };