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

webUI/react/src/components/manga/reader/Page.tsx

@@ -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(() => {
+    const handleHorizontalScroll = () => {
-        if (settings.readerType === 'Webtoon' || settings.readerType === 'ContinuesVertical') {
+        if (imgRef.current) {
-            window.addEventListener('scroll', handleScroll);
+            const rect = imgRef.current.getBoundingClientRect();
-
+            if (rect.left <= window.innerWidth / 2 && rect.right > window.innerWidth / 2) {
-            return () => {
+                setCurPage(index);
-                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' }}>

webUI/react/src/components/manga/reader/pager/DoublePagedPager.tsx

@@ -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) {
+                if (pageLoaded.current[curPage - i]) {
-                    const imgElem = pagesRef.current[curPage - i].children[0] as HTMLImageElement;
+                    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
+                        <img
-                            key={page.index}
+                            ref={(e:HTMLImageElement) => { pagesRef.current[page.index] = e; }}
-                            index={page.index}
+                            key={`${page.index}`}
                             src={page.src}
-                            onImageLoad={handleImageLoad(page.index)}
+                            onLoad={handleImageLoad(page.index)}
-                            setCurPage={setCurPage}
+                            alt={`${page.index}`}
-                            settings={settings}
-                            ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
                         />
                     ))
                 }

webUI/react/src/components/manga/reader/pager/HorizontalPager.tsx

@@ -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',
+        flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
-        justifyContent: 'center',
+        justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
         margin: '0 auto',
-        width: '100%',
+        width: 'auto',
-        height: '100vh',
+        height: 'auto',
-        overflowX: 'scroll',
+        overflowX: 'visible',
+        userSelect: 'none',
     },
 });
 
-interface IProps {
+export default function HorizontalPager(props: IReaderProps) {
-    pages: Array<IReaderPage>
+    const {
-    setCurPage: React.Dispatch<React.SetStateAction<number>>
+        pages, curPage, settings, setCurPage, prevChapter, nextChapter,
-    settings: IReaderSettings
+    } = props;
-}
 
-export default function HorizontalPager(props: IProps) {
+    const classes = useStyles(settings)();
-    const { pages, settings, setCurPage } = props;
 
-    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; }}
                     />
                 ))
             }

webUI/react/src/components/navbar/ReaderNavBar.tsx

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

webUI/react/src/screens/manga/Reader.tsx

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

webUI/react/src/typings.d.ts

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