Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2024-12-24 15:51:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

reader ui changes

Browse Source
This commit is contained in:
Aria Moradi 2021-03-19 14:52:20 +03:30
parent 5d484b012c
commit 04837983fa
8 changed files with 122 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webUI/react/src/App.tsx
View File

@ -66,7 +66,12 @@ export default function App() {
<NavbarContext.Provider value={navBarContext}>
<CssBaseline />
<NavBar />
<Container id="appMainContainer" maxWidth={false} disableGutters>
<Container
id="appMainContainer"
maxWidth={false}
disableGutters
style={{ paddingTop: '64px' }}
>
<Switch>
<Route path="/sources/:sourceId/search/">
<Search />

7
webUI/react/src/components/MangaDetails.tsx
View File

@ -18,9 +18,10 @@ import CategorySelect from './CategorySelect';
const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
root: {
width: '100%',
// [theme.breakpoints.up('md')]: {
// display: 'flex',
// },
[theme.breakpoints.up('md')]: {
position: 'fixed',
width: '50vw',
},
},
top: {
padding: '10px',

2
webUI/react/src/components/NavBar.tsx
View File

@ -39,7 +39,7 @@ export default function NavBar() {
{!override.status
&& (
<div className={classes.root}>
<AppBar position="static" color={darkTheme ? 'default' : 'primary'}>
<AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
<Toolbar>
<IconButton
edge="start"

35
webUI/react/src/components/Page.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
@ -5,7 +6,7 @@
import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles } from '@material-ui/core/styles';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import LazyLoad from 'react-lazyload';
const useStyles = makeStyles({
@ -25,12 +26,31 @@ const useStyles = makeStyles({
interface IProps {
src: string
index: number
setCurPage: React.Dispatch<React.SetStateAction<number>>
}
function LazyImage(props: IProps) {
const classes = useStyles();
const { src, index } = props;
const { src, index, setCurPage } = props;
const [imageSrc, setImagsrc] = useState<string>('');
const ref = useRef<HTMLImageElement>(null);
const handleScroll = () => {
if (ref.current) {
const rect = ref.current.getBoundingClientRect();
if (rect.y < 0 && rect.y + rect.height > 0) {
setCurPage(index);
}
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);
useEffect(() => {
const img = new Image();
@ -48,12 +68,17 @@ function LazyImage(props: IProps) {
}
return (
<img src={imageSrc} alt={`Page #${index}`} style={{ maxWidth: '100%' }} />
<img
ref={ref}
src={imageSrc}
alt={`Page #${index}`}
style={{ maxWidth: '100%' }}
/>
);
}
export default function Page(props: IProps) {
const { src, index } = props;
const { src, index, setCurPage } = props;
const classes = useStyles();
return (
@ -67,7 +92,7 @@ export default function Page(props: IProps) {
</div>
)}
>
<LazyImage src={src} index={index} />
<LazyImage src={src} index={index} setCurPage={setCurPage} />
</LazyLoad>
</div>
);

56
webUI/react/src/components/ReaderNavBar.tsx
View File

@ -14,10 +14,11 @@ import { useHistory } from 'react-router-dom';
import Slide from '@material-ui/core/Slide';
import Fade from '@material-ui/core/Fade';
import Zoom from '@material-ui/core/Zoom';
import { Switch } from '@material-ui/core';
import NavBarContext from '../context/NavbarContext';
import DarkTheme from '../context/DarkTheme';
const useStyles = makeStyles((theme: Theme) => ({
const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
// main container and root div need to change classes...
AppMainContainer: {
display: 'none',
@ -27,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
root: {
position: 'fixed',
position: settings.staticNav ? 'sticky' : 'fixed',
top: 0,
left: 0,
minWidth: '300px',
@ -81,9 +82,15 @@ const useStyles = makeStyles((theme: Theme) => ({
}));
export interface IReaderSettings{
staticNav: boolean
showPageNumber: boolean
}
export const defaultReaderSettings = () => ({
staticNav: false,
showPageNumber: true,
} as IReaderSettings);
interface IProps {
settings: IReaderSettings
setSettings: React.Dispatch<React.SetStateAction<IReaderSettings>>
@ -96,14 +103,16 @@ export default function ReaderNavBar(props: IProps) {
const history = useHistory();
const [drawerOpen, setDrawerOpen] = useState(false);
const { settings, setSettings, manga } = props;
const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav);
const [hideOpenButton, setHideOpenButton] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0);
const theme = useTheme();
const classes = useStyles();
const classes = useStyles(settings)();
const { settings, setSettings, manga } = props;
const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value });
const handleScroll = () => {
const currentScrollPos = window.pageYOffset;
@ -120,7 +129,7 @@ export default function ReaderNavBar(props: IProps) {
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);
}, [handleScroll]);// handleScroll changes on every render
useEffect(() => {
window.addEventListener('scroll', handleScroll);
@ -135,7 +144,7 @@ export default function ReaderNavBar(props: IProps) {
rootEl.classList.remove(classes.AppRootElment);
mainContainer.classList.remove(classes.AppMainContainer);
};
}, []);
}, [handleScroll]);// handleScroll changes on every render
return (
<>
@ -154,16 +163,29 @@ export default function ReaderNavBar(props: IProps) {
<Typography variant="h1">
{title}
</Typography>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={() => setDrawerOpen(false)}
>
<KeyboardArrowLeftIcon />
</IconButton>
{!settings.staticNav
&& (
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={() => setDrawerOpen(false)}
>
<KeyboardArrowLeftIcon />
</IconButton>
) }
</header>
<h3>Static Navigation</h3>
<Switch
checked={settings.staticNav}
onChange={(e) => setSettingValue('staticNav', e.target.checked)}
/>
<h3>Show page number</h3>
<Switch
checked={settings.showPageNumber}
onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
/>
</div>
</Slide>
<Zoom in={!drawerOpen}>

11
webUI/react/src/screens/Manga.tsx
View File

@ -19,6 +19,15 @@ const useStyles = makeStyles((theme: Theme) => ({
},
},
chapters: {
listStyle: 'none',
padding: 0,
[theme.breakpoints.up('md')]: {
width: '50%',
marginLeft: '50%',
},
},
loading: {
margin: '10px 0',
display: 'flex',
@ -53,7 +62,7 @@ export default function Manga() {
}, []);
const chapterCards = (
<ol style={{ listStyle: 'none', padding: 0, width: '100%' }}>
<ol className={classes.chapters}>
{chapters.length === 0
&& (
<div className={classes.loading}>

32
webUI/react/src/screens/Reader.tsx
View File

@ -8,12 +8,12 @@ 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, { IReaderSettings } from '../components/ReaderNavBar';
import ReaderNavBar, { defaultReaderSettings, IReaderSettings } from '../components/ReaderNavBar';
import NavbarContext from '../context/NavbarContext';
import client from '../util/client';
import useLocalStorage from '../util/useLocalStorage';
const useStyles = makeStyles({
const useStyles = (settings: IReaderSettings) => makeStyles({
reader: {
display: 'flex',
flexDirection: 'column',
@ -24,20 +24,32 @@ const useStyles = makeStyles({
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);
export default function Reader() {
const classes = useStyles();
const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
const [settings, setSettings] = useState<IReaderSettings>({});
const classes = useStyles(settings)();
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
const [manga, setManga] = useState<IMangaCard | IManga>({ id: +mangaId, title: '', thumbnailUrl: '' });
const [pageCount, setPageCount] = useState<number>(-1);
const [curPage, setCurPage] = useState<number>(0);
const { setOverride, setTitle } = useContext(NavbarContext);
useEffect(() => {
@ -54,7 +66,7 @@ export default function Reader() {
// clean up for when we leave the reader
return () => setOverride({ status: false, value: <div /> });
}, [manga]);
}, [manga, settings]);
useEffect(() => {
setTitle('Reader');
@ -83,8 +95,16 @@ export default function Reader() {
}
return (
<div className={classes.reader}>
<div className={classes.pageNumber}>
{`${curPage + 1} / ${pageCount}`}
</div>
{range(pageCount).map((index) => (
<Page key={index} index={index} src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterId}/page/${index}`} />
<Page
key={index}
index={index}
src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterId}/page/${index}`}
setCurPage={setCurPage}
/>
))}
</div>
);

11
webUI/react/src/util/useLocalStorage.tsx
View File

@ -2,19 +2,20 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { useState, Dispatch, SetStateAction } from 'react';
import React, { useState, Dispatch, SetStateAction } from 'react';
import storage from './localStorage';
// eslint-disable-next-line max-len
export default function useLocalStorage<T>(key: string, defaultValue: T) : [T, Dispatch<SetStateAction<T>>] {
const [storedValue, setStoredValue] = useState<T>(storage.getItem(key, defaultValue));
export default function useLocalStorage<T>(key: string, defaultValue: T | (() => T)) : [T, Dispatch<SetStateAction<T>>] {
const initialState = defaultValue instanceof Function ? defaultValue() : defaultValue;
const [storedValue, setStoredValue] = useState<T>(storage.getItem(key, initialState));
const setValue = (value: T | ((prevState: T) => T)) => {
const setValue = ((value: T | ((prevState: T) => T)) => {
// Allow value to be a function so we have same API as useState
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
storage.setItem(key, valueToStore);
};
}) as React.Dispatch<React.SetStateAction<T>>;
return [storedValue, setValue];
}