From 5de5eb7cdcea1d8ad076cad723791edd6b3dd87b Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 8 Dec 2024 16:08:09 +0100 Subject: [PATCH] Hide cursor on mouse inactivity --- .../reader/components/viewer/ReaderViewer.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 2b19e6d1..ca2ecbe9 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -149,6 +149,35 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef(); + useEffect(() => { + const setCursorVisibility = (visible: boolean) => { + const scrollElement = scrollElementRef.current; + if (!scrollElement) { + return; + } + + scrollElement.style.cursor = visible ? 'default' : 'none'; + }; + + const handleMouseMove = () => { + setCursorVisibility(true); + clearTimeout(mouseInactiveTimeout.current); + mouseInactiveTimeout.current = setTimeout(() => { + setCursorVisibility(false); + }, 5000); + }; + + handleMouseMove(); + window.addEventListener('mousemove', handleMouseMove); + return () => { + setCursorVisibility(true); + window.removeEventListener('mousemove', handleMouseMove); + clearTimeout(mouseInactiveTimeout.current); + }; + }, []); + // invert x and y scrolling for the continuous horizontal reading mode useEffect(() => { if (readingMode.value !== ReadingMode.CONTINUOUS_HORIZONTAL) {