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

Merge branch 'master' of github.com:Suwayomi/Tachidesk

Browse Source
This commit is contained in:
Aria Moradi 2021-05-29 23:59:29 +04:30
commit e3b154cf9e
6 changed files with 217 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,15 +11,20 @@ import React, { useEffect, useRef } from 'react';
import SpinnerImage from 'components/SpinnerImage';
function imageStyle(settings: IReaderSettings): CSSProperties {
if (settings.readerType === 'DoubleLTR' || settings.readerType === 'DoubleRTL') {
if (settings.readerType === 'DoubleLTR'
|| settings.readerType === 'DoubleRTL'
|| settings.readerType === 'ContinuesHorizontalLTR'
|| settings.readerType === 'ContinuesHorizontalRTL') {
return {
display: 'block',
marginBottom: 0,
marginLeft: '7px',
marginRight: '7px',
width: 'auto',
minHeight: '99vh',
height: 'auto',
maxHeight: '99vh',
objectFit: 'contain',
pointerEvents: 'none',
};
}
@ -64,7 +69,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
const classes = useStyles(settings)();
const imgRef = useRef<HTMLImageElement>(null);
const handleScroll = () => {
const handleVerticalScroll = () => {
if (imgRef.current) {
const rect = imgRef.current.getBoundingClientRect();
if (rect.y < 0 && rect.y + rect.height > 0) {
@ -73,15 +78,29 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
}
};
useEffect(() => {
if (settings.readerType === 'Webtoon' || settings.readerType === 'ContinuesVertical') {
window.addEventListener('scroll', handleScroll);
const handleHorizontalScroll = () => {
if (imgRef.current) {
const rect = imgRef.current.getBoundingClientRect();
if (rect.left <= window.innerWidth / 2 && rect.right > window.innerWidth / 2) {
setCurPage(index);
}
}
};
return () => {
window.removeEventListener('scroll', handleScroll);
};
} return () => {};
}, [handleScroll]);
useEffect(() => {
switch (settings.readerType) {
case 'Webtoon':
case 'ContinuesVertical':
window.addEventListener('scroll', handleVerticalScroll);
return () => window.removeEventListener('scroll', handleVerticalScroll);
case 'ContinuesHorizontalLTR':
case 'ContinuesHorizontalRTL':
window.addEventListener('scroll', handleHorizontalScroll);
return () => window.removeEventListener('scroll', handleHorizontalScroll);
default:
return () => {};
}
}, [handleVerticalScroll]);
return (
<div ref={ref} style={{ margin: '0 auto' }}>

139
webUI/react/src/components/manga/reader/pager/DoublePagedPager.tsx
View File

@ -12,6 +12,9 @@ import Page from '../Page';
import DoublePage from '../DoublePage';
const useStyles = (settings: IReaderSettings) => makeStyles({
preload: {
display: 'none',
},
reader: {
display: 'flex',
flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
@ -31,16 +34,67 @@ export default function DoublePagedPager(props: IReaderProps) {
const classes = useStyles(settings)();
const selfRef = useRef<HTMLDivElement>(null);
const pagesRef = useRef<HTMLDivElement[]>([]);
const pagesRef = useRef<HTMLImageElement[]>([]);
const pagesDisplayed = useRef<number>(0);
const pageLoaded = useRef<boolean[]>(Array(pages.length).fill(false));
function setPagesToDisplay() {
pagesDisplayed.current = 0;
if (curPage < pages.length && pagesRef.current[curPage]) {
if (pageLoaded.current[curPage]) {
pagesDisplayed.current = 1;
const imgElem = pagesRef.current[curPage];
const aspectRatio = imgElem.height / imgElem.width;
if (aspectRatio < 1) {
return;
}
}
}
if (curPage + 1 < pages.length && pagesRef.current[curPage + 1]) {
if (pageLoaded.current[curPage + 1]) {
const imgElem = pagesRef.current[curPage + 1];
const aspectRatio = imgElem.height / imgElem.width;
if (aspectRatio < 1) {
return;
}
pagesDisplayed.current = 2;
}
}
}
function displayPages() {
if (pagesDisplayed.current === 2) {
ReactDOM.render(
<DoublePage
key={curPage}
index={curPage}
image1src={pages[curPage].src}
image2src={pages[curPage + 1].src}
settings={settings}
/>,
document.getElementById('display'),
);
} else {
ReactDOM.render(
<Page
key={curPage}
index={curPage}
src={(pagesDisplayed.current === 1) ? pages[curPage].src : ''}
onImageLoad={() => {}}
setCurPage={setCurPage}
settings={settings}
/>,
document.getElementById('display'),
);
}
}
function pagesToGoBack() {
for (let i = 1; i <= 2; i++) {
if (curPage - i > 0 && pagesRef.current[curPage - i]) {
if (pagesRef.current[curPage - i].children[0] instanceof HTMLImageElement) {
const imgElem = pagesRef.current[curPage - i].children[0] as HTMLImageElement;
if (pageLoaded.current[curPage - i]) {
const imgElem = pagesRef.current[curPage - i];
const aspectRatio = imgElem.height / imgElem.width;
if (aspectRatio < 1) {
return 1;
@ -85,62 +139,6 @@ export default function DoublePagedPager(props: IReaderProps) {
}
}
function setPagesToDisplay() {
pagesDisplayed.current = 0;
if (curPage < pages.length && pagesRef.current[curPage]) {
if (pagesRef.current[curPage].children[0] instanceof HTMLImageElement) {
pagesDisplayed.current = 1;
const imgElem = pagesRef.current[curPage].children[0] as HTMLImageElement;
const aspectRatio = imgElem.height / imgElem.width;
if (aspectRatio < 1) {
return;
}
}
}
if (curPage + 1 < pages.length && pagesRef.current[curPage + 1]) {
if (pagesRef.current[curPage + 1].children[0] instanceof HTMLImageElement) {
const imgElem = pagesRef.current[curPage + 1].children[0] as HTMLImageElement;
const aspectRatio = imgElem.height / imgElem.width;
if (aspectRatio < 1) {
return;
}
pagesDisplayed.current = 2;
}
}
}
function showPages() {
if (pagesDisplayed.current === 2) {
ReactDOM.render(
<DoublePage
key={curPage}
index={curPage}
image1src={pages[curPage].src}
image2src={pages[curPage + 1].src}
settings={settings}
/>,
document.getElementById('display'),
);
} else if (pagesDisplayed.current === 1) {
ReactDOM.render(
<Page
key={curPage}
index={curPage}
src={pages[curPage].src}
onImageLoad={() => {}}
setCurPage={setCurPage}
settings={settings}
/>,
document.getElementById('display'),
);
} else {
ReactDOM.render(
<div />,
document.getElementById('display'),
);
}
}
function keyboardControl(e:KeyboardEvent) {
switch (e.code) {
case 'Space':
@ -172,20 +170,13 @@ export default function DoublePagedPager(props: IReaderProps) {
};
}
useEffect(() => {
pagesRef.current.forEach((e) => {
const pageRef = e;
pageRef.style.display = 'none';
});
}, []);
useEffect(() => {
const retryDisplay = setInterval(() => {
const isLastPage = (curPage === pages.length - 1);
if ((!isLastPage && pageLoaded.current[curPage] && pageLoaded.current[curPage + 1])
|| pageLoaded.current[curPage]) {
setPagesToDisplay();
showPages();
displayPages();
clearInterval(retryDisplay);
}
}, 50);
@ -202,17 +193,15 @@ export default function DoublePagedPager(props: IReaderProps) {
return (
<div ref={selfRef}>
<div id="preload" className={classes.reader}>
<div id="preload" className={classes.preload}>
{
pages.map((page) => (
<Page
key={page.index}
index={page.index}
<img
ref={(e:HTMLImageElement) => { pagesRef.current[page.index] = e; }}
key={`${page.index}`}
src={page.src}
onImageLoad={handleImageLoad(page.index)}
setCurPage={setCurPage}
settings={settings}
ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
onLoad={handleImageLoad(page.index)}
alt={`${page.index}`}
/>
))
}

128
webUI/react/src/components/manga/reader/pager/HorizontalPager.tsx
View File

@ -6,34 +6,129 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import React, { useEffect, useRef } from 'react';
import Page from '../Page';
const useStyles = makeStyles({
const useStyles = (settings: IReaderSettings) => makeStyles({
reader: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
margin: '0 auto',
width: '100%',
height: '100vh',
overflowX: 'scroll',
width: 'auto',
height: 'auto',
overflowX: 'visible',
userSelect: 'none',
},
});
interface IProps {
pages: Array<IReaderPage>
setCurPage: React.Dispatch<React.SetStateAction<number>>
settings: IReaderSettings
}
export default function HorizontalPager(props: IReaderProps) {
const {
pages, curPage, settings, setCurPage, prevChapter, nextChapter,
} = props;
export default function HorizontalPager(props: IProps) {
const { pages, settings, setCurPage } = props;
const classes = useStyles(settings)();
const classes = useStyles();
const selfRef = useRef<HTMLDivElement>(null);
const pagesRef = useRef<HTMLDivElement[]>([]);
function nextPage() {
if (curPage < pages.length - 1) {
pagesRef.current[curPage + 1]?.scrollIntoView({ inline: 'center' });
setCurPage((page) => page + 1);
} else if (settings.loadNextonEnding) {
nextChapter();
}
}
function prevPage() {
if (curPage > 0) {
pagesRef.current[curPage - 1]?.scrollIntoView({ inline: 'center' });
setCurPage(curPage - 1);
} else if (curPage === 0) {
prevChapter();
}
}
function goLeft() {
if (settings.readerType === 'ContinuesHorizontalLTR') {
prevPage();
} else {
nextPage();
}
}
function goRight() {
if (settings.readerType === 'ContinuesHorizontalLTR') {
nextPage();
} else {
prevPage();
}
}
const mouseXPos = useRef<number>(0);
function dragScreen(e: MouseEvent) {
window.scrollBy(mouseXPos.current - e.pageX, 0);
}
function dragControl(e:MouseEvent) {
mouseXPos.current = e.pageX;
selfRef.current?.addEventListener('mousemove', dragScreen);
}
function removeDragControl() {
selfRef.current?.removeEventListener('mousemove', dragScreen);
}
function clickControl(e:MouseEvent) {
if (e.clientX >= window.innerWidth * 0.85) {
goRight();
} else if (e.clientX <= window.innerWidth * 0.15) {
goLeft();
}
}
const handleLoadNextonEnding = () => {
if (settings.readerType === 'ContinuesHorizontalLTR') {
if (window.scrollX + window.innerWidth >= document.body.scrollWidth) {
nextChapter();
}
} else if (settings.readerType === 'ContinuesHorizontalRTL') {
if (window.scrollX <= window.innerWidth) {
nextChapter();
}
}
};
useEffect(() => {
pagesRef.current[curPage]?.scrollIntoView({ inline: 'center' });
}, [settings.readerType]);
useEffect(() => {
selfRef.current?.addEventListener('mousedown', dragControl);
selfRef.current?.addEventListener('mouseup', removeDragControl);
return () => {
selfRef.current?.removeEventListener('mousedown', dragControl);
selfRef.current?.removeEventListener('mouseup', removeDragControl);
};
}, [selfRef]);
useEffect(() => {
if (settings.loadNextonEnding) {
document.addEventListener('scroll', handleLoadNextonEnding);
}
selfRef.current?.addEventListener('mousedown', clickControl);
return () => {
document.removeEventListener('scroll', handleLoadNextonEnding);
selfRef.current?.removeEventListener('mousedown', clickControl);
};
}, [selfRef, curPage]);
return (
<div className={classes.reader}>
<div ref={selfRef} className={classes.reader}>
{
pages.map((page) => (
<Page
@ -43,6 +138,7 @@ export default function HorizontalPager(props: IProps) {
onImageLoad={() => {}}
setCurPage={setCurPage}
settings={settings}
ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
/>
))
}

10
webUI/react/src/components/navbar/ReaderNavBar.tsx
View File

@ -313,10 +313,14 @@ export default function ReaderNavBar(props: IProps) {
Continues Vertical
</MenuItem>
{/* <MenuItem value="ContinuesHorizontal">
Horizontal(WIP)
<MenuItem value="ContinuesHorizontalLTR">
Horizontal (LTR)
</MenuItem> */}
</MenuItem>
<MenuItem value="ContinuesHorizontalRTL">
Horizontal (RTL)
</MenuItem>
</Select>
</ListItem>
</List>

3
webUI/react/src/screens/manga/Reader.tsx
View File

@ -46,7 +46,8 @@ const getReaderComponent = (readerType: ReaderType) => {
case 'DoubleLTR':
return DoublePagedPager;
break;
case 'ContinuesHorizontal':
case 'ContinuesHorizontalLTR':
case 'ContinuesHorizontalRTL':
return HorizontalPager;
default:
return VerticalPager;

3
webUI/react/src/typings.d.ts vendored
View File

@ -117,7 +117,8 @@ type ReaderType =
'DoubleVertical' |
'DoubleRTL' |
'DoubleLTR' |
'ContinuesHorizontal';
'ContinuesHorizontalLTR'|
'ContinuesHorizontalRTL';
interface IReaderSettings{
staticNav: boolean