From 792e8657f7499eab0ef93454df94a42dfc6ada58 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 1 Feb 2025 16:07:13 +0100
Subject: [PATCH] ux: continue to scroll into next section at the bottom of the
 scroll view, closes #274 (#282)

---
 .../src/app/reader/components/FoliateViewer.tsx    | 14 +++++++++++++-
 .../hooks/{useClickEvent.ts => useIframeEvents.ts} |  0
 apps/readest-app/src/types/view.ts                 |  3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)
 rename apps/readest-app/src/app/reader/hooks/{useClickEvent.ts => useIframeEvents.ts} (100%)

diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 454eebfd..b34e5ee2 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -4,7 +4,7 @@ import { BookConfig } from '@/types/book';
 import { FoliateView, wrappedFoliateView } from '@/types/view';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
-import { useClickEvent, useTouchEvent } from '../hooks/useClickEvent';
+import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
@@ -80,6 +80,17 @@ const FoliateViewer: React.FC<{
   const docRelocateHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     if (detail.reason !== 'scroll' && detail.reason !== 'page') return;
+
+    if (detail.reason === 'scroll') {
+      const renderer = viewRef.current?.renderer;
+      if (renderer) {
+        if (renderer.start <= 0) {
+          viewRef.current?.prev(1);
+        } else if (renderer.end >= renderer.viewSize) {
+          viewRef.current?.next(1);
+        }
+      }
+    }
     const parallelViews = getParallels(bookKey);
     if (parallelViews && parallelViews.size > 0) {
       parallelViews.forEach((key) => {
@@ -95,6 +106,7 @@ const FoliateViewer: React.FC<{
 
   useTouchEvent(bookKey, viewRef);
   const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
+
   useFoliateEvents(viewRef.current, {
     onLoad: docLoadHandler,
     onRelocate: progressRelocateHandler,
diff --git a/apps/readest-app/src/app/reader/hooks/useClickEvent.ts b/apps/readest-app/src/app/reader/hooks/useIframeEvents.ts
similarity index 100%
rename from apps/readest-app/src/app/reader/hooks/useClickEvent.ts
rename to apps/readest-app/src/app/reader/hooks/useIframeEvents.ts
diff --git a/apps/readest-app/src/types/view.ts b/apps/readest-app/src/types/view.ts
index 9ddb8c6e..2f76443e 100644
--- a/apps/readest-app/src/types/view.ts
+++ b/apps/readest-app/src/types/view.ts
@@ -35,7 +35,10 @@ export interface FoliateView extends HTMLElement {
   };
   renderer: {
     scrolled?: boolean;
+    size: number;
     viewSize: number;
+    start: number;
+    end: number;
     setAttribute: (name: string, value: string | number) => void;
     removeAttribute: (name: string) => void;
     next: () => Promise<void>;