temple/Suwayomi-Server
1
0
Fork 0
mirror of https://github.com/Suwayomi/Suwayomi-Server.git synced 2026-07-04 03:14:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add a Double Page Viewer (#105)

Browse Source 
* add double page reader

* implement singleRTL

* add on image load handler

* add retry display time interval

* remove comments

* add double page wrapper

* fix image getting out of bounds

* remove comments

* remove unused styles

* return imageStyle as type CSSProperties

* rename DoublePagedReader to DoublePagedPager
This commit is contained in:
Manchewable
2021-05-28 05:36:55 -07:00
committed by GitHub
parent 77f2f8cc18
commit 1b122d1157
9 changed files with 373 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
webUI/react/src/components/manga/reader/Page.tsx
View File

@@ -7,8 +7,31 @@
import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles } from '@material-ui/core/styles';
import { CSSProperties } from '@material-ui/core/styles/withStyles';
import React, { useEffect, useRef, useState } from 'react';
function imageStyle(settings: IReaderSettings): CSSProperties {
if (settings.readerType === 'DoubleLTR' || settings.readerType === 'DoubleRTL') {
return {
display: 'block',
marginBottom: 0,
width: 'auto',
minHeight: '99vh',
height: 'auto',
maxHeight: '99vh',
objectFit: 'contain',
};
}
return {
display: 'block',
marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
minWidth: '50vw',
width: '100%',
maxWidth: '100%',
};
}
const useStyles = (settings: IReaderSettings) => makeStyles({
loading: {
margin: '100px auto',
@@ -22,25 +45,20 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
backgroundColor: '#525252',
marginBottom: 10,
},
image: {
display: 'block',
marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
minWidth: '50vw',
width: '100%',
maxWidth: '100%',
},
image: imageStyle(settings),
});
interface IProps {
src: string
index: number
onImageLoad: () => void
setCurPage: React.Dispatch<React.SetStateAction<number>>
settings: IReaderSettings
}
function LazyImage(props: IProps) {
const {
src, index, setCurPage, settings,
src, index, onImageLoad, setCurPage, settings,
} = props;
const classes = useStyles(settings)();
@@ -70,7 +88,14 @@ function LazyImage(props: IProps) {
const img = new Image();
img.src = src;
img.onload = () => setImagsrc(src);
img.onload = () => {
setImagsrc(src);
onImageLoad();
};
return () => {
img.onload = null;
};
}, [src]);
if (imageSrc.length === 0) {
@@ -93,7 +118,7 @@ function LazyImage(props: IProps) {
const Page = React.forwardRef((props: IProps, ref: any) => {
const {
src, index, setCurPage, settings,
src, index, onImageLoad, setCurPage, settings,
} = props;
return (
@@ -101,6 +126,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
<LazyImage
src={src}
index={index}
onImageLoad={onImageLoad}
setCurPage={setCurPage}
settings={settings}
/>