From ffb00f4e0de8d8d12769ba5ec1c0bed1d516e3ba Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 18 Feb 2025 12:07:04 +0100
Subject: [PATCH] ux: make the top and bottom toolbar transient and hide in
 normal reading status (#394)

---
 .../src/app/reader/hooks/useIframeEvents.ts   | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/readest-app/src/app/reader/hooks/useIframeEvents.ts b/apps/readest-app/src/app/reader/hooks/useIframeEvents.ts
index 8e7de481..11da0f5e 100644
--- a/apps/readest-app/src/app/reader/hooks/useIframeEvents.ts
+++ b/apps/readest-app/src/app/reader/hooks/useIframeEvents.ts
@@ -45,10 +45,15 @@ export const useClickEvent = (
               if (screenX >= centerStartX && screenX <= centerEndX) {
                 // toggle visibility of the header bar and the footer bar
                 setHoveredBookKey(hoveredBookKey ? null : bookKey);
-              } else if (!viewSettings.disableClick! && screenX >= viewCenterX) {
-                viewRef.current?.goRight();
-              } else if (!viewSettings.disableClick! && screenX < viewCenterX) {
-                viewRef.current?.goLeft();
+              } else {
+                if (hoveredBookKey) {
+                  setHoveredBookKey(null);
+                }
+                if (!viewSettings.disableClick! && screenX >= viewCenterX) {
+                  viewRef.current?.goRight();
+                } else if (!viewSettings.disableClick! && screenX < viewCenterX) {
+                  viewRef.current?.goLeft();
+                }
               }
             }
           }
@@ -127,6 +132,13 @@ export const useTouchEvent = (
     if (touch) {
       touchEnd = touch;
     }
+    if (hoveredBookKey && touchEnd) {
+      const deltaY = touchEnd.screenY - touchStart.screenY;
+      const deltaX = touchEnd.screenX - touchStart.screenX;
+      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
+        setHoveredBookKey(null);
+      }
+    }
   };
 
   const onTouchEnd = (e: IframeTouchEvent) => {
@@ -149,6 +161,10 @@ export const useTouchEvent = (
       ) {
         // swipe up to toggle the header bar and the footer bar
         setHoveredBookKey(hoveredBookKey ? null : bookKey);
+      } else {
+        if (hoveredBookKey) {
+          setHoveredBookKey(null);
+        }
       }
     }