forked from akai/readest
Huang Xin
105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
import clsx from 'clsx';
|
|
import React, { useEffect } from 'react';
|
|
|
|
import { useEnv } from '@/context/EnvContext';
|
|
import { useSettingsStore } from '@/store/settingsStore';
|
|
import { useReaderStore } from '@/store/readerStore';
|
|
import { useBookDataStore } from '@/store/bookDataStore';
|
|
import { useSidebarStore } from '@/store/sidebarStore';
|
|
import FoliateViewer from './FoliateViewer';
|
|
import getGridTemplate from '@/utils/grid';
|
|
import SectionInfo from './SectionInfo';
|
|
import HeaderBar from './HeaderBar';
|
|
import FooterBar from './FooterBar';
|
|
import PageInfoView from './PageInfo';
|
|
import Ribbon from './Ribbon';
|
|
import SettingsDialog from './settings/SettingsDialog';
|
|
import Annotator from './annotator/Annotator';
|
|
import FootnotePopup from './FootnotePopup';
|
|
import HintInfo from './HintInfo';
|
|
|
|
interface BooksGridProps {
|
|
bookKeys: string[];
|
|
onCloseBook: (bookKey: string) => void;
|
|
}
|
|
|
|
const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
|
|
const { appService } = useEnv();
|
|
const { getConfig, getBookData } = useBookDataStore();
|
|
const { getProgress, getViewState, getViewSettings } = useReaderStore();
|
|
const { sideBarBookKey } = useSidebarStore();
|
|
const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
|
|
const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
|
|
|
|
useEffect(() => {
|
|
if (!sideBarBookKey) return;
|
|
const bookData = getBookData(sideBarBookKey);
|
|
if (!bookData || !bookData.book) return;
|
|
document.title = bookData.book.title;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [sideBarBookKey]);
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'grid h-full flex-grow',
|
|
appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
|
|
)}
|
|
style={{
|
|
gridTemplateColumns: gridTemplate.columns,
|
|
gridTemplateRows: gridTemplate.rows,
|
|
}}
|
|
>
|
|
{bookKeys.map((bookKey, index) => {
|
|
const bookData = getBookData(bookKey);
|
|
const config = getConfig(bookKey);
|
|
const progress = getProgress(bookKey);
|
|
const viewSettings = getViewSettings(bookKey);
|
|
const { book, bookDoc } = bookData || {};
|
|
if (!book || !config || !bookDoc || !viewSettings) return null;
|
|
|
|
const { section, pageinfo, sectionLabel } = progress || {};
|
|
const isBookmarked = getViewState(bookKey)?.ribbonVisible;
|
|
const marginGap = `${viewSettings.gapPercent}%`;
|
|
|
|
return (
|
|
<div
|
|
id={`gridcell-${bookKey}`}
|
|
key={bookKey}
|
|
className={`${appService?.hasRoundedWindow ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`}
|
|
>
|
|
{isBookmarked && <Ribbon width={marginGap} />}
|
|
<HeaderBar
|
|
bookKey={bookKey}
|
|
bookTitle={book.title}
|
|
isTopLeft={index === 0}
|
|
isHoveredAnim={bookKeys.length > 2}
|
|
onCloseBook={onCloseBook}
|
|
onSetSettingsDialogOpen={setFontLayoutSettingsDialogOpen}
|
|
/>
|
|
<FoliateViewer bookKey={bookKey} bookDoc={bookDoc} config={config} />
|
|
<FootnotePopup bookKey={bookKey} bookDoc={bookDoc} />
|
|
{viewSettings.scrolled ? null : (
|
|
<>
|
|
<SectionInfo section={sectionLabel} gapLeft={marginGap} />
|
|
<HintInfo bookKey={bookKey} gapRight={marginGap} />
|
|
<PageInfoView
|
|
bookFormat={book.format}
|
|
section={section ?? null}
|
|
pageinfo={pageinfo ?? null}
|
|
gapRight={marginGap}
|
|
/>
|
|
</>
|
|
)}
|
|
<Annotator bookKey={bookKey} />
|
|
<FooterBar bookKey={bookKey} pageinfo={pageinfo} isHoveredAnim={false} />
|
|
{isFontLayoutSettingsDialogOpen && <SettingsDialog bookKey={bookKey} config={config} />}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BooksGrid;
|