From dabe88385d0ff1017eea6e3df9d620cc6550e33f Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 12 Nov 2023 01:41:20 +0100
Subject: [PATCH] Feature/reader vertical pager keyboard bindings scrolling
 (#452)

* Scroll up when clicking shift + space

* Add keyboard bindings to arrow up and down

Align scroll amount with using other keys like space, arrow right/left

* Add scroll inversion with shift to other key bindings

* Scroll per mouse dragging
---
 src/components/reader/Page.tsx                |  1 +
 src/components/reader/pager/VerticalPager.tsx | 45 +++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
index a93f24ca..2ce8f35f 100644
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -55,6 +55,7 @@ function imageStyle(settings: IReaderSettings): any {
         minWidth: '50vw',
         width: dimensions.width < dimensions.height ? '100vw' : '100%',
         maxWidth: '100%',
+        pointerEvents: 'none',
     };
 }
 
diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx
index ea040f19..7f03dd42 100644
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -83,6 +83,33 @@ export function VerticalPager(props: IReaderProps) {
         };
     }, [settings.loadNextOnEnding, nextChapter]);
 
+    const mouseYPos = useRef<number>(0);
+    const didMouseMove = useRef(false);
+
+    function dragScreen(e: MouseEvent) {
+        didMouseMove.current = true;
+        window.scrollBy(0, mouseYPos.current - e.pageY);
+    }
+
+    function dragControl(e: MouseEvent) {
+        mouseYPos.current = e.pageY;
+        selfRef.current?.addEventListener('mousemove', dragScreen);
+    }
+
+    function removeDragControl() {
+        selfRef.current?.removeEventListener('mousemove', dragScreen);
+    }
+
+    useEffect(() => {
+        selfRef.current?.addEventListener('mousedown', dragControl);
+        selfRef.current?.addEventListener('mouseup', removeDragControl);
+
+        return () => {
+            selfRef.current?.removeEventListener('mousedown', dragControl);
+            selfRef.current?.removeEventListener('mouseup', removeDragControl);
+        };
+    }, [selfRef]);
+
     const go = useCallback(
         (direction: 'up' | 'down') => {
             if (direction === 'down' && isAtBottom()) {
@@ -107,13 +134,18 @@ export function VerticalPager(props: IReaderProps) {
         const handleKeyboard = (e: KeyboardEvent) => {
             switch (e.code) {
                 case 'Space':
+                    e.preventDefault();
+                    go(e.shiftKey ? 'up' : 'down');
+                    break;
+                case 'ArrowDown':
                 case 'ArrowRight':
                     e.preventDefault();
-                    go('down');
+                    go(e.shiftKey ? 'up' : 'down');
                     break;
+                case 'ArrowUp':
                 case 'ArrowLeft':
                     e.preventDefault();
-                    go('up');
+                    go(e.shiftKey ? 'down' : 'up');
                     break;
                 default:
                     break;
@@ -144,7 +176,14 @@ export function VerticalPager(props: IReaderProps) {
                 margin: '0 auto',
                 width: '100%',
             }}
-            onClick={(e) => go(e.clientX > window.innerWidth / 2 ? 'down' : 'up')}
+            onClick={(e) => {
+                if (didMouseMove.current) {
+                    didMouseMove.current = false;
+                    return;
+                }
+
+                go(e.clientX > window.innerWidth / 2 ? 'down' : 'up');
+            }}
         >
             {pages.map((page) => (
                 <Page