From 9808976088e1f4f4aebb0aa56c2da763df62f353 Mon Sep 17 00:00:00 2001 From: Aria Moradi Date: Sat, 15 May 2021 17:18:57 +0430 Subject: [PATCH] restructure the reader --- webUI/react/src/components/ReaderNavBar.tsx | 6 --- .../react/src/components/TemporaryDrawer.tsx | 2 +- .../src/components/{ => reader}/Page.tsx | 10 ++-- .../src/components/reader/PageNumber.tsx | 32 +++++++++++ .../src/components/reader/VerticalReader.tsx | 42 +++++++++++++++ webUI/react/src/screens/Reader.tsx | 54 ++++++++----------- webUI/react/src/typings.d.ts | 11 ++++ 7 files changed, 114 insertions(+), 43 deletions(-) rename webUI/react/src/components/{ => reader}/Page.tsx (91%) create mode 100644 webUI/react/src/components/reader/PageNumber.tsx create mode 100644 webUI/react/src/components/reader/VerticalReader.tsx diff --git a/webUI/react/src/components/ReaderNavBar.tsx b/webUI/react/src/components/ReaderNavBar.tsx index baff14c7..cf6bc394 100644 --- a/webUI/react/src/components/ReaderNavBar.tsx +++ b/webUI/react/src/components/ReaderNavBar.tsx @@ -137,12 +137,6 @@ const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({ }, })); -export interface IReaderSettings{ - staticNav: boolean - showPageNumber: boolean - continuesPageGap: boolean -} - export const defaultReaderSettings = () => ({ staticNav: false, showPageNumber: true, diff --git a/webUI/react/src/components/TemporaryDrawer.tsx b/webUI/react/src/components/TemporaryDrawer.tsx index 86b8f7b8..ff2881cb 100644 --- a/webUI/react/src/components/TemporaryDrawer.tsx +++ b/webUI/react/src/components/TemporaryDrawer.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles({ interface IProps { drawerOpen: boolean - setDrawerOpen(state: boolean): void + setDrawerOpen: React.Dispatch> } export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) { diff --git a/webUI/react/src/components/Page.tsx b/webUI/react/src/components/reader/Page.tsx similarity index 91% rename from webUI/react/src/components/Page.tsx rename to webUI/react/src/components/reader/Page.tsx index acf4a69b..3181df0b 100644 --- a/webUI/react/src/components/Page.tsx +++ b/webUI/react/src/components/reader/Page.tsx @@ -11,17 +11,17 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import { makeStyles } from '@material-ui/core/styles'; import React, { useEffect, useRef, useState } from 'react'; import LazyLoad from 'react-lazyload'; -import { IReaderSettings } from './ReaderNavBar'; const useStyles = (settings: IReaderSettings) => makeStyles({ loading: { margin: '100px auto', height: '100vh', + width: '100vw', }, loadingImage: { - padding: settings.staticNav ? 'calc(50vh - 40px) calc(50vw - 340px)' : 'calc(50vh - 40px) calc(50vw - 40px)', height: '100vh', - width: '200px', + width: '70vw', + padding: '50px calc(50% - 20px)', backgroundColor: '#525252', marginBottom: 10, }, @@ -73,7 +73,7 @@ function LazyImage(props: IProps) { if (imageSrc.length === 0) { return ( -
+
); @@ -101,7 +101,7 @@ export default function Page(props: IProps) { +
)} diff --git a/webUI/react/src/components/reader/PageNumber.tsx b/webUI/react/src/components/reader/PageNumber.tsx new file mode 100644 index 00000000..7bf79c87 --- /dev/null +++ b/webUI/react/src/components/reader/PageNumber.tsx @@ -0,0 +1,32 @@ +import { makeStyles } from '@material-ui/core/styles'; +import React from 'react'; + +const useStyles = (settings: IReaderSettings) => makeStyles({ + pageNumber: { + display: settings.showPageNumber ? 'block' : 'none', + position: 'fixed', + bottom: '50px', + right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)', + width: '50px', + textAlign: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + borderRadius: '10px', + }, +}); + +interface IProps { + settings: IReaderSettings + curPage: number + pageCount: number +} + +export default function PageNumber(props: IProps) { + const { settings, curPage, pageCount } = props; + const classes = useStyles(settings)(); + + return ( +
+ {`${curPage + 1} / ${pageCount}`} +
+ ); +} diff --git a/webUI/react/src/components/reader/VerticalReader.tsx b/webUI/react/src/components/reader/VerticalReader.tsx new file mode 100644 index 00000000..e7f051a8 --- /dev/null +++ b/webUI/react/src/components/reader/VerticalReader.tsx @@ -0,0 +1,42 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { makeStyles } from '@material-ui/core/styles'; +import React from 'react'; +import Page from './Page'; + +const useStyles = makeStyles({ + reader: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + margin: '0 auto', + width: '100%', + }, +}); + +interface IProps { + pages: Array + setCurPage: React.Dispatch> + settings: IReaderSettings +} + +export default function VerticalReader(props: IProps) { + const { pages, settings, setCurPage } = props; + + const classes = useStyles(); + + return ( +
+ { + pages.map((page) => ( + + )) + } +
+ ); +} diff --git a/webUI/react/src/screens/Reader.tsx b/webUI/react/src/screens/Reader.tsx index 2d846359..f24c496f 100644 --- a/webUI/react/src/screens/Reader.tsx +++ b/webUI/react/src/screens/Reader.tsx @@ -10,34 +10,22 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import { makeStyles } from '@material-ui/core/styles'; import React, { useContext, useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; -import Page from '../components/Page'; -import ReaderNavBar, { defaultReaderSettings, IReaderSettings } from '../components/ReaderNavBar'; +import Page from '../components/reader/Page'; +import PageNumber from '../components/reader/PageNumber'; +import VerticalReader from '../components/reader/VerticalReader'; +import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar'; import NavbarContext from '../context/NavbarContext'; import client from '../util/client'; import useLocalStorage from '../util/useLocalStorage'; const useStyles = (settings: IReaderSettings) => makeStyles({ - reader: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - margin: '0 auto', + root: { + width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw', }, loading: { margin: '50px auto', }, - - pageNumber: { - display: settings.showPageNumber ? 'block' : 'none', - position: 'fixed', - bottom: '50px', - right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)', - width: '50px', - textAlign: 'center', - backgroundColor: 'rgba(0, 0, 0, 0.3)', - borderRadius: '10px', - }, }); const range = (n:number) => Array.from({ length: n }, (value, key) => key); @@ -102,20 +90,24 @@ export default function Reader() {
); } + + const pages = range(chapter.pageCount).map((index) => ({ + index, + src: `${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`, + })); + return ( -
-
- {`${curPage + 1} / ${chapter.pageCount}`} -
- {range(chapter.pageCount).map((index) => ( - - ))} +
+ +
); } diff --git a/webUI/react/src/typings.d.ts b/webUI/react/src/typings.d.ts index b9792c6d..1252ca3b 100644 --- a/webUI/react/src/typings.d.ts +++ b/webUI/react/src/typings.d.ts @@ -87,3 +87,14 @@ interface INavbarOverride { status: boolean value: any } + +interface IReaderSettings{ + staticNav: boolean + showPageNumber: boolean + continuesPageGap: boolean +} + +interface IReaderPage { + index: number + src: string +}