refactor(同步): 简化远程书籍同步逻辑, 现在移动端和PC端可以自动同步书籍文件

apps/reader/src/components/Reader.tsx

@@ -23,7 +23,6 @@ import {
   hasSelection,
   useBackground,
   useColorScheme,
-  useDisablePinchZooming,
   useMobile,
   useSync,
   useTranslation,
@@ -384,8 +383,6 @@ function BookPane({ tab, onMouseDown }: BookPaneProps) {
     }
   })
 
-  useDisablePinchZooming(iframe)
-
   return (
     <div className={clsx('flex h-full flex-col', mobile && 'py-[3vw]')}>
       <PhotoSlider
@@ -500,4 +497,4 @@ const Bar: React.FC<LineProps> = ({ className, ...props }) => {
       {...props}
     ></div>
   )
-}
+}

apps/reader/src/components/TextSelectionMenu.tsx

@@ -162,7 +162,7 @@ const TextSelectionMenuRenderer: React.FC<TextSelectionMenuRendererProps> = ({
           setWidth(el.clientWidth)
           setHeight(el.clientHeight)
           if (!mobile) {
-            el.focus()
+            el.focus({ preventScroll: true })
           }
         }}
         className={clsx(
@@ -188,6 +188,9 @@ const TextSelectionMenuRenderer: React.FC<TextSelectionMenuRendererProps> = ({
             copy(text)
           }
         }}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+        }}
       >
         {annotate ? (
           <div className="mb-3">

apps/reader/src/hooks/useDisablePinchZooming.ts

@@ -6,7 +6,10 @@ export function useDisablePinchZooming(win?: Window) {
     const _win = win ?? window
     // Block pinch-zooming on iOS outside of the content area
     const handleTouchMove = (event: TouchEvent) => {
-      event.preventDefault()
+      // event.preventDefault()
+      if ((event as any).scale !== 1) {
+        event.preventDefault()
+      }
     }
 
     _win.document.addEventListener('touchmove', handleTouchMove, {

apps/reader/src/pages/index.tsx

@@ -12,13 +12,11 @@ import {
   MdOutlineShare,
 } from 'react-icons/md'
 import { useSet } from 'react-use'
-import { usePrevious } from 'react-use'
 
 import { ReaderGridView, Button, TextField, DropZone } from '../components'
 import { BookRecord, CoverRecord, db } from '../db'
 import { addFile, fetchBook, handleFiles } from '../file'
 import {
-  useDisablePinchZooming,
   useLibrary,
   useMobile,
   useRemoteBooks,
@@ -40,8 +38,6 @@ export default function Index() {
   const src = new URL(window.location.href).searchParams.get(SOURCE)
   const [loading, setLoading] = useState(!!src)
 
-  useDisablePinchZooming()
-
   useEffect(() => {
     let src = router.query[SOURCE]
     if (!src) return
@@ -102,43 +98,24 @@ const Library: React.FC = () => {
 
   const { data: remoteBooks, mutate: mutateRemoteBooks } = useRemoteBooks()
   const { data: remoteFiles, mutate: mutateRemoteFiles } = useRemoteFiles()
-  const previousRemoteBooks = usePrevious(remoteBooks)
-  const previousRemoteFiles = usePrevious(remoteFiles)
 
   const [select, toggleSelect] = useBoolean(false)
   const [selectedBookIds, { add, has, toggle, reset }] = useSet<string>()
 
   const [loading, setLoading] = useState<string | undefined>()
-  const [readyToSync, setReadyToSync] = useState(false)
+  const [syncVersion, setSyncVersion] = useState(0)
 
   const { groups } = useReaderSnapshot()
 
   useEffect(() => {
-    if (previousRemoteFiles && remoteFiles) {
-      // to remove effect dependency `books`
-      db?.books.toArray().then((books) => {
-        if (books.length === 0) return
-
-        const newRemoteBooks = remoteFiles.map((f) =>
-          books.find((b) => b.name === f.name),
-        ) as BookRecord[]
-
-        uploadData(newRemoteBooks)
-        mutateRemoteBooks(newRemoteBooks, { revalidate: false })
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mutateRemoteBooks, remoteFiles])
-
-  useEffect(() => {
-    if (!previousRemoteBooks && remoteBooks) {
-      db?.books.bulkPut(remoteBooks).then(() => setReadyToSync(true))
+    if (remoteBooks) {
+      db?.books.bulkPut(remoteBooks).then(() => setSyncVersion((v) => v + 1))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [remoteBooks])
 
   useEffect(() => {
-    if (!remoteFiles || !readyToSync) return
+    if (!remoteFiles || !syncVersion) return
 
     db?.books.toArray().then(async (books) => {
       for (const remoteFile of remoteFiles) {
@@ -158,7 +135,7 @@ const Library: React.FC = () => {
         setLoading(undefined)
       }
     })
-  }, [readyToSync, remoteFiles])
+  }, [syncVersion, remoteFiles])
 
   useEffect(() => {
     if (!select) reset()
@@ -268,6 +245,16 @@ const Library: React.FC = () => {
                       setLoading(undefined)
 
                       mutateRemoteFiles()
+                      mutateRemoteBooks((remoteBooks) => {
+                        const newRemoteBooks = [
+                          ...(remoteBooks || []),
+                          ...selectedBooks.filter(
+                            (b) => !remoteBooks?.find((r) => r.id === b.id),
+                          ),
+                        ]
+                        uploadData(newRemoteBooks)
+                        return newRemoteBooks
+                      })
                     }
                   }}
                 >
@@ -296,6 +283,15 @@ const Library: React.FC = () => {
                       },
                       { revalidate: false },
                     )
+
+                    mutateRemoteBooks((remoteBooks) => {
+                      const newRemoteBooks =
+                        remoteBooks?.filter(
+                          (b) => !selectedBooks.find((s) => s.id === b.id),
+                        ) || []
+                      uploadData(newRemoteBooks)
+                      return newRemoteBooks
+                    })
                   }}
                 >
                   {t('delete')}