fix: close books with the system back key on Android, closes #1933 (#1938)

apps/readest-app/src/app/reader/components/Reader.tsx

@@ -3,6 +3,7 @@
 import clsx from 'clsx';
 import * as React from 'react';
 import { useEffect, Suspense, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 import { useEnv } from '@/context/EnvContext';
 import { useTheme } from '@/hooks/useTheme';
@@ -28,12 +29,13 @@ import { initDayjs } from '@/utils/time';
 import ReaderContent from './ReaderContent';
 
 const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
+  const router = useRouter();
   const { envConfig, appService } = useEnv();
   const { setLibrary } = useLibraryStore();
   const { hoveredBookKey } = useReaderStore();
   const { settings, setSettings } = useSettingsStore();
-  const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
-  const { isNotebookVisible, setNotebookVisible } = useNotebookStore();
+  const { isSideBarVisible, getIsSideBarVisible, setSideBarVisible } = useSidebarStore();
+  const { isNotebookVisible, getIsNotebookVisible, setNotebookVisible } = useNotebookStore();
   const { isDarkMode, systemUIAlwaysHidden, showSystemUI, dismissSystemUI } = useThemeStore();
   const { acquireBackKeyInterception, releaseBackKeyInterception } = useDeviceControlStore();
   const [libraryLoaded, setLibraryLoaded] = useState(false);
@@ -49,12 +51,24 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
       setTimeout(getSysFontsList, 3000);
     }
     initDayjs(getLocale());
+
+    acquireBackKeyInterception();
+    return () => {
+      releaseBackKeyInterception();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleKeyDown = (event: CustomEvent) => {
     if (event.detail.keyName === 'Back') {
-      setSideBarVisible(false);
-      setNotebookVisible(false);
+      if (getIsSideBarVisible()) {
+        setSideBarVisible(false);
+      } else if (getIsNotebookVisible()) {
+        setNotebookVisible(false);
+      } else {
+        eventDispatcher.dispatch('close-reader');
+        router.back();
+      }
       return true;
     }
     return false;
@@ -62,22 +76,14 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
 
   useEffect(() => {
     if (!appService?.isAndroidApp) return;
-    if (isSideBarVisible || isNotebookVisible) {
-      acquireBackKeyInterception();
-      eventDispatcher.onSync('native-key-down', handleKeyDown);
-    }
-    if (!isSideBarVisible && !isNotebookVisible) {
-      releaseBackKeyInterception();
-      eventDispatcher.offSync('native-key-down', handleKeyDown);
-    }
+    eventDispatcher.onSync('native-key-down', handleKeyDown);
     return () => {
       if (appService?.isAndroidApp) {
-        releaseBackKeyInterception();
         eventDispatcher.offSync('native-key-down', handleKeyDown);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSideBarVisible, isNotebookVisible]);
+  }, [appService?.isAndroidApp, isSideBarVisible, isNotebookVisible]);
 
   useEffect(() => {
     if (isInitiating.current) return;

apps/readest-app/src/app/reader/components/ReaderContent.tsx

@@ -94,10 +94,12 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     }
     window.addEventListener('beforeunload', handleCloseBooks);
     eventDispatcher.on('beforereload', handleCloseBooks);
+    eventDispatcher.on('close-reader', handleCloseBooks);
     eventDispatcher.on('quit-app', handleCloseBooks);
     return () => {
       window.removeEventListener('beforeunload', handleCloseBooks);
       eventDispatcher.off('beforereload', handleCloseBooks);
+      eventDispatcher.off('close-reader', handleCloseBooks);
       eventDispatcher.off('quit-app', handleCloseBooks);
       unlistenOnCloseWindow?.then((fn) => fn());
     };

apps/readest-app/src/store/notebookStore.ts

@@ -9,6 +9,7 @@ interface NotebookState {
   notebookNewAnnotation: TextSelection | null;
   notebookEditAnnotation: BookNote | null;
   notebookAnnotationDrafts: { [key: string]: string };
+  getIsNotebookVisible: () => boolean;
   toggleNotebook: () => void;
   toggleNotebookPin: () => void;
   setNotebookWidth: (width: string) => void;
@@ -27,6 +28,7 @@ export const useNotebookStore = create<NotebookState>((set, get) => ({
   notebookNewAnnotation: null,
   notebookEditAnnotation: null,
   notebookAnnotationDrafts: {},
+  getIsNotebookVisible: () => get().isNotebookVisible,
   setNotebookWidth: (width: string) => set({ notebookWidth: width }),
   toggleNotebook: () => set((state) => ({ isNotebookVisible: !state.isNotebookVisible })),
   toggleNotebookPin: () => set((state) => ({ isNotebookPinned: !state.isNotebookPinned })),

apps/readest-app/src/store/sidebarStore.ts

@@ -5,6 +5,7 @@ interface SidebarState {
   sideBarWidth: string;
   isSideBarVisible: boolean;
   isSideBarPinned: boolean;
+  getIsSideBarVisible: () => boolean;
   setSideBarBookKey: (key: string) => void;
   setSideBarWidth: (width: string) => void;
   toggleSideBar: () => void;
@@ -13,11 +14,12 @@ interface SidebarState {
   setSideBarPin: (pinned: boolean) => void;
 }
 
-export const useSidebarStore = create<SidebarState>((set) => ({
+export const useSidebarStore = create<SidebarState>((set, get) => ({
   sideBarBookKey: null,
   sideBarWidth: '',
   isSideBarVisible: false,
   isSideBarPinned: false,
+  getIsSideBarVisible: () => get().isSideBarVisible,
   setSideBarBookKey: (key: string) => set({ sideBarBookKey: key }),
   setSideBarWidth: (width: string) => set({ sideBarWidth: width }),
   toggleSideBar: () => set((state) => ({ isSideBarVisible: !state.isSideBarVisible })),

apps/readest-app/src/utils/nav.ts

@@ -81,7 +81,7 @@ export const navigateToLibrary = (
   queryParams?: string,
   navOptions?: { scroll?: boolean },
 ) => {
-  router.push(`/library${queryParams ? `?${queryParams}` : ''}`, navOptions);
+  router.replace(`/library${queryParams ? `?${queryParams}` : ''}`, navOptions);
 };
 
 export const redirectToLibrary = () => {