diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index 4dcb8ff9..6d324d7e 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -7,6 +7,7 @@ import { useParallelViewStore } from '@/store/parallelViewStore'; import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents'; import { useFoliateEvents } from '../hooks/useFoliateEvents'; import { useProgressSync } from '../hooks/useProgressSync'; +import { useProgressAutoSave } from '../hooks/useProgressAutoSave'; import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar'; import { getStyles, mountAdditionalFonts } from '@/utils/style'; import { getBookDirFromWritingMode } from '@/utils/book'; @@ -43,6 +44,7 @@ const FoliateViewer: React.FC<{ }, [toastMessage]); useProgressSync(bookKey); + useProgressAutoSave(bookKey); const progressRelocateHandler = (event: Event) => { const detail = (event as CustomEvent).detail; diff --git a/apps/readest-app/src/app/reader/hooks/useProgressAutoSave.ts b/apps/readest-app/src/app/reader/hooks/useProgressAutoSave.ts new file mode 100644 index 00000000..47188106 --- /dev/null +++ b/apps/readest-app/src/app/reader/hooks/useProgressAutoSave.ts @@ -0,0 +1,31 @@ +import { useCallback, useEffect } from 'react'; +import { useEnv } from '@/context/EnvContext'; +import { useBookDataStore } from '@/store/bookDataStore'; +import { useReaderStore } from '@/store/readerStore'; +import { useSettingsStore } from '@/store/settingsStore'; +import { throttle } from '@/utils/throttle'; + +export const useProgressAutoSave = (bookKey: string) => { + const { envConfig, appService } = useEnv(); + const { getConfig, saveConfig } = useBookDataStore(); + const { getProgress } = useReaderStore(); + const progress = getProgress(bookKey); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const saveBookConfig = useCallback( + throttle(async () => { + const config = getConfig(bookKey)!; + const settings = useSettingsStore.getState().settings; + await saveConfig(envConfig, bookKey, config, settings); + }, 10000), + [], + ); + + useEffect(() => { + // FIXME: Save book config when progress changes on Android + // until we can hook into the lifecycle of the Android app + if (!appService?.isAndroidApp || !progress) return; + saveBookConfig(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [progress, bookKey]); +};