From 4e6b13960babedae21c2774ea981618743179852 Mon Sep 17 00:00:00 2001 From: chrox Date: Thu, 24 Oct 2024 23:48:06 +0200 Subject: [PATCH] Add footer bar for flip paging --- .../app/reader/components/FoliateViewer.tsx | 2 + .../app/reader/components/ReaderContent.tsx | 62 ++++++++++++++++++- .../src/app/reader/components/SideBar.tsx | 4 +- .../src/app/reader/hooks/useFoliateEvents.ts | 11 +++- apps/readest-app/src/store/readerStore.ts | 3 + apps/readest-app/src/types/book.ts | 3 +- 6 files changed, 79 insertions(+), 6 deletions(-) diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index 298e4b7c..9b3a4a7e 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -48,6 +48,8 @@ export interface FoliateView extends HTMLElement { init: (options: { lastLocation: string }) => void; goTo: (href: string) => void; goToFraction: (fraction: number) => void; + goLeft: () => void; + goRight: () => void; renderer: { setStyles: (css: string) => void; next: () => Promise; diff --git a/apps/readest-app/src/app/reader/components/ReaderContent.tsx b/apps/readest-app/src/app/reader/components/ReaderContent.tsx index d59880f5..d070416d 100644 --- a/apps/readest-app/src/app/reader/components/ReaderContent.tsx +++ b/apps/readest-app/src/app/reader/components/ReaderContent.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { useState } from 'react'; import { useSearchParams, useRouter } from 'next/navigation'; -import { BsLayoutSidebar } from 'react-icons/bs'; import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from 'react-icons/vsc'; +import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri'; import { useEnv } from '@/context/EnvContext'; import { useReaderStore, DEFAULT_BOOK_STATE } from '@/store/readerStore'; @@ -20,6 +20,7 @@ const ReaderContent = () => { const { envConfig } = useEnv(); const { books, settings, initBookState, saveConfig, saveSettings } = useReaderStore(); + const { getFoliateView } = useReaderStore(); const [sideBarWidth, setSideBarWidth] = useState( settings.globalReadSettings.sideBarWidth ?? '25%', @@ -33,6 +34,8 @@ const ReaderContent = () => { const bookStates = ids.map((id, index) => books[getKey(id, index)] || DEFAULT_BOOK_STATE); const [sideBarBookKey, setSideBarBookKey] = useState(getKey(ids[0] ?? '', 0)); + let sliderProgress = 0; + React.useEffect(() => { if (ids.length === 0) return; const uniqueIds = new Set(); @@ -70,6 +73,24 @@ const ReaderContent = () => { router.back(); }; + const handleProgressChange = (bookKey: string, event: React.ChangeEvent) => { + console.log('progress change', bookKey, event); + const newProgress = parseInt((event.target as HTMLInputElement).value, 10); + sliderProgress = newProgress; + const foliateView = getFoliateView(bookKey); + foliateView?.goToFraction(newProgress / 100.0); + }; + + const handleGoPrev = (bookKey: string) => { + const foliateView = getFoliateView(bookKey); + foliateView?.goLeft(); + }; + + const handleGoNext = (bookKey: string) => { + const foliateView = getFoliateView(bookKey); + foliateView?.goRight(); + }; + const getGridTemplate = () => { const count = ids.length; const aspectRatio = window.innerWidth / window.innerHeight; @@ -135,6 +156,17 @@ const ReaderContent = () => { const key = getKey(ids[index]!, index); const { book, config, bookDoc } = bookState; if (!book || !config || !bookDoc) return null; + const { section, pageinfo, progress } = config; + const pageInfo = + book.format === 'PDF' + ? section + ? `${section.current + 1} / ${section.total}` + : '' + : pageinfo + ? `Loc. ${pageinfo.current + 1} / ${pageinfo.total}` + : ''; + const progressInfo = progress ? `${Math.round(progress * 100)}%` : ''; + sliderProgress = progress ? progress * 100 : 0; return (
{
+
+

+ {pageInfo} +

+
+
+ + {progressInfo} + handleProgressChange(key, e)} + /> + +
); })} diff --git a/apps/readest-app/src/app/reader/components/SideBar.tsx b/apps/readest-app/src/app/reader/components/SideBar.tsx index be423c31..976e102b 100644 --- a/apps/readest-app/src/app/reader/components/SideBar.tsx +++ b/apps/readest-app/src/app/reader/components/SideBar.tsx @@ -110,10 +110,10 @@ const SideBar: React.FC<{ -
+
-
+
{activeTab === 'toc' && bookDoc!.toc && ( )} diff --git a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts index 6d195b62..d43b3d20 100644 --- a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts +++ b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts @@ -21,8 +21,15 @@ export const useFoliateEvents = ( const defaultRelocateHandler = (event: Event) => { const detail = (event as CustomEvent).detail; - // console.log('relocate:', detail); - setProgress(bookKey, detail.fraction, detail.cfi, detail.tocItem?.href, detail.location); + console.log('relocate:', detail); + setProgress( + bookKey, + detail.fraction, + detail.cfi, + detail.tocItem?.href, + detail.section, + detail.location, + ); }; const onLoad = handlers?.onLoad || defaultLoadHandler; diff --git a/apps/readest-app/src/store/readerStore.ts b/apps/readest-app/src/store/readerStore.ts index f0e679e2..0f269cc5 100644 --- a/apps/readest-app/src/store/readerStore.ts +++ b/apps/readest-app/src/store/readerStore.ts @@ -30,6 +30,7 @@ interface ReaderStore { progress: number, location: string, href: string, + section: PageInfo, pageinfo: PageInfo, ) => void; setFoliateView: (key: string, view: FoliateView) => void; @@ -137,6 +138,7 @@ export const useReaderStore = create((set, get) => ({ progress: number, location: string, href: string, + section: PageInfo, pageinfo: PageInfo, ) => set((state) => { @@ -153,6 +155,7 @@ export const useReaderStore = create((set, get) => ({ href, progress, location, + section, pageinfo, }, }, diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts index d46e84bd..e83e027a 100644 --- a/apps/readest-app/src/types/book.ts +++ b/apps/readest-app/src/types/book.ts @@ -14,7 +14,7 @@ export interface Book { export interface PageInfo { current: number; - next: number; + next?: number; total: number; } @@ -34,6 +34,7 @@ export interface BookConfig { progress?: number; location?: string; href?: string; + section?: PageInfo; pageinfo?: PageInfo; bookmarks?: BookNote[]; annotations?: BookNote[];