From d940fb8d063f51fc4b097c39671daf3231b83b03 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Mon, 9 Dec 2024 13:46:30 +0100
Subject: [PATCH] Fix click to page flip not responsive occasionally

---
 .../src/app/reader/components/FoliateViewer.tsx      |  6 ++++--
 .../app/reader/components/annotator/Annotator.tsx    |  2 +-
 .../src/app/reader/hooks/useFoliateEvents.ts         | 12 ++++++------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 8d0dcb71..1c54856c 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react';
-import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { BookDoc } from '@/libs/document';
 import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
+import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { getOSPlatform } from '@/utils/misc';
 import { getStyles } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';
@@ -118,6 +118,7 @@ const FoliateViewer: React.FC<{
 
   const docLoadHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;
+    console.log('doc loaded:', detail);
     if (detail.doc) {
       const viewSettings = getViewSettings(bookKey)!;
       if (viewSettings.scrolled && shouldAutoHideScrollbar) {
@@ -237,11 +238,12 @@ const FoliateViewer: React.FC<{
       const view = wrappedFoliateView(document.createElement('foliate-view') as FoliateView);
       document.body.append(view);
       containerRef.current?.appendChild(view);
-      setFoliateView(bookKey, view);
 
       await view.open(bookDoc);
       // make sure we can listen renderer events after opening book
       viewRef.current = view;
+      setFoliateView(bookKey, view);
+
       const viewSettings = getViewSettings(bookKey)!;
       view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
 
diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index 44771b18..ebe1547b 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -105,7 +105,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     setSelection(selection);
   };
 
-  useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation }, [config]);
+  useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation });
 
   const handleDismissPopup = () => {
     setSelection(null);
diff --git a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts
index f21223fb..8cee9bd9 100644
--- a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts
+++ b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts
@@ -4,18 +4,16 @@ import { FoliateView } from '@/app/reader/components/FoliateViewer';
 type FoliateEventHandler = {
   onLoad?: (event: Event) => void;
   onRelocate?: (event: Event) => void;
+  onLinkClick?: (event: Event) => void;
   onRendererRelocate?: (event: Event) => void;
   onDrawAnnotation?: (event: Event) => void;
   onShowAnnotation?: (event: Event) => void;
 };
 
-export const useFoliateEvents = (
-  view: FoliateView | null,
-  handlers?: FoliateEventHandler,
-  dependencies: React.DependencyList = [],
-) => {
+export const useFoliateEvents = (view: FoliateView | null, handlers?: FoliateEventHandler) => {
   const onLoad = handlers?.onLoad;
   const onRelocate = handlers?.onRelocate;
+  const onLinkClick = handlers?.onLinkClick;
   const onRendererRelocate = handlers?.onRendererRelocate;
   const onDrawAnnotation = handlers?.onDrawAnnotation;
   const onShowAnnotation = handlers?.onShowAnnotation;
@@ -24,6 +22,7 @@ export const useFoliateEvents = (
     if (!view) return;
     if (onLoad) view.addEventListener('load', onLoad);
     if (onRelocate) view.addEventListener('relocate', onRelocate);
+    if (onLinkClick) view.addEventListener('link', onLinkClick);
     if (onRendererRelocate) view.renderer.addEventListener('relocate', onRendererRelocate);
     if (onDrawAnnotation) view.addEventListener('draw-annotation', onDrawAnnotation);
     if (onShowAnnotation) view.addEventListener('show-annotation', onShowAnnotation);
@@ -31,10 +30,11 @@ export const useFoliateEvents = (
     return () => {
       if (onLoad) view.removeEventListener('load', onLoad);
       if (onRelocate) view.removeEventListener('relocate', onRelocate);
+      if (onLinkClick) view.removeEventListener('link', onLinkClick);
       if (onRendererRelocate) view.renderer.removeEventListener('relocate', onRendererRelocate);
       if (onDrawAnnotation) view.removeEventListener('draw-annotation', onDrawAnnotation);
       if (onShowAnnotation) view.removeEventListener('show-annotation', onShowAnnotation);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view, ...dependencies]);
+  }, [view]);
 };