From ced42ec74864f76eb5a7ebed0ad13026669fad41 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:17:04 +0100
Subject: [PATCH] Merge pull request #19998 from
 overleaf/dp-presentation-mousewheel

Navigate pdf pages in presentation mode using mousewheel/trackpad

GitOrigin-RevId: 960e3456bb02e2286776632638ad1e3892f59c6a
---
 .../hooks/use-presentation-mode.ts            | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/pdf-preview/hooks/use-presentation-mode.ts b/services/web/frontend/js/features/pdf-preview/hooks/use-presentation-mode.ts
index fd907959c6..85ec44b8b3 100644
--- a/services/web/frontend/js/features/pdf-preview/hooks/use-presentation-mode.ts
+++ b/services/web/frontend/js/features/pdf-preview/hooks/use-presentation-mode.ts
@@ -74,17 +74,43 @@ export default function usePresentationMode(
     [nextPage, previousPage]
   )
 
+  const isMouseWheelScrollingRef = useRef(false)
+
+  const mouseWheelListener = useCallback(
+    (event: WheelEvent) => {
+      if (
+        !isMouseWheelScrollingRef.current &&
+        !event.ctrlKey // Avoid trackpad pinching
+      ) {
+        isMouseWheelScrollingRef.current = true
+
+        if (event.deltaY > 0) {
+          nextPage()
+        } else {
+          previousPage()
+        }
+
+        setTimeout(() => {
+          isMouseWheelScrollingRef.current = false
+        }, 200)
+      }
+    },
+    [nextPage, previousPage]
+  )
+
   useEffect(() => {
     if (presentationMode) {
       window.addEventListener('keydown', arrowKeyListener)
       window.addEventListener('click', clickListener)
+      window.addEventListener('wheel', mouseWheelListener)
 
       return () => {
         window.removeEventListener('keydown', arrowKeyListener)
         window.removeEventListener('click', clickListener)
+        window.removeEventListener('wheel', mouseWheelListener)
       }
     }
-  }, [presentationMode, arrowKeyListener, clickListener])
+  }, [presentationMode, arrowKeyListener, clickListener, mouseWheelListener])
 
   const requestPresentationMode = useCallback(() => {
     sendMB('pdf-viewer-enter-presentation-mode')