v2.2.2

package.json

@@ -1,7 +1,7 @@
 {
     "name": "mangareader",
     "productName": "Manga Reader",
-    "version": "2.2.1",
+    "version": "2.2.2",
     "description": "App to read manga on desktop",
     "main": "./.webpack/main/index.js",
     "author": {

src/Components/Reader.tsx

@@ -55,7 +55,7 @@ const Reader = () => {
         if (readerRef.current && window.app.lastClick <= Date.now() - window.app.clickDelay) {
             window.app.lastClick = Date.now();
             let startTime: number, prevTime: number;
-            const anim = (timeStamp: DOMTimeStamp) => {
+            const anim = (timeStamp: number) => {
                 if (startTime === undefined) startTime = timeStamp;
                 const elapsed = timeStamp - startTime;
                 if (prevTime !== timeStamp && readerRef.current) {
@@ -128,17 +128,19 @@ const Reader = () => {
                             break;
                         case "d":
                         case "ArrowRight":
-                            if (appSettings.readerSettings.readerTypeSelected === 1)
+                            if (appSettings.readerSettings.readerTypeSelected === 1) {
                                 openNextPageRef.current?.click();
+                            }
                             break;
                         case "s":
                         case "ArrowDown":
                             scrollReader(1);
                             break;
                         case "a":
                         case "ArrowLeft":
-                            if (appSettings.readerSettings.readerTypeSelected === 1)
+                            if (appSettings.readerSettings.readerTypeSelected === 1) {
                                 openPrevPageRef.current?.click();
+                            }
                             break;
                         case "w":
                         case "ArrowUp":
@@ -182,7 +184,7 @@ const Reader = () => {
             return;
         }
         setCurrentImageRow((init) => init - 1);
-        if (imgContRef.current) imgContRef.current.scrollTop = 0;
+        if (readerRef.current) readerRef.current.scrollTop = 0;
     };
     const openNextPage = () => {
         if (currentImageRow >= imageRowCount) {
@@ -198,7 +200,7 @@ const Reader = () => {
             return;
         }
         setCurrentImageRow((init) => init + 1);
-        if (imgContRef.current) imgContRef.current.scrollTop = 0;
+        if (readerRef.current) readerRef.current.scrollTop = 0;
     };
 
     const checkForImgsAndLoad = (link: string) => {
@@ -431,8 +433,18 @@ const Reader = () => {
                         (e.target as HTMLElement).tagName === "IMG"
                     ) {
                         const clickPos = (e.clientX / e.currentTarget.offsetWidth) * 100;
-                        if (clickPos <= 50) openPrevPage();
-                        if (clickPos > 50) openNextPage();
+                        if (clickPos <= 50) openPrevPageRef.current?.click();
+                        if (clickPos > 50) openNextPageRef.current?.click();
+                    }
+                    if (
+                        appSettings.readerSettings.readerTypeSelected === 0 &&
+                        readerRef.current &&
+                        (readerRef.current.scrollTop <= 300 ||
+                            readerRef.current.scrollTop >= readerRef.current.scrollHeight - 300)
+                    ) {
+                        const clickPos = (e.clientX / e.currentTarget.offsetWidth) * 100;
+                        if (clickPos <= 50) openPrevChapterRef.current?.click();
+                        if (clickPos > 50) openNextChapterRef.current?.click();
                     }
                 }}
                 style={{

src/Components/ReaderSideList.tsx

@@ -1,10 +1,10 @@
 import {
-    faChevronRight,
     faSort,
     faSyncAlt,
     faArrowLeft,
     faArrowRight,
     faBookmark,
+    faThumbtack,
 } from "@fortawesome/free-solid-svg-icons";
 import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -226,7 +226,10 @@ const ReaderSideList = ({
                     setSideListPinned((init) => !init);
                 }}
             >
-                <FontAwesomeIcon icon={faChevronRight} />
+                <FontAwesomeIcon
+                    icon={faThumbtack}
+                    style={{ transform: isSideListPinned ? "rotate(45deg)" : "" }}
+                />
             </div>
             <div
                 className="reSizer"

src/Components/Settings.tsx

@@ -256,6 +256,20 @@ const Settings = (): ReactElement => {
                         </div>
                     </div> */}
                 </div>
+                <h1>Features</h1>
+                <div className="features">
+                    <ul>
+                        <li>you can make custom theme by editing theme.json.</li>
+                        <li>you dont need to type whole word in search.</li>
+                        <li>
+                            you can open next/prev chapter in "infinite scrolling" mode by clicking on right/left
+                            part of screen when on scroll 0 or 100%.
+                        </li>
+                        <li>you can bring side list by moving mouse to left of screen.</li>
+                        <li>you can pin and resize of side list.</li>
+                        <li>you can shrink home page tabs by clicking dividers.</li>
+                    </ul>
+                </div>
                 <h1>Shortcut Keys</h1>
                 <div className="shortcutKey">
                     <table>

src/styles/index.scss

@@ -650,6 +650,12 @@ body {
                         }
                     }
                 }
+                .features {
+                    ul {
+                        list-style-type: disc;
+                        margin: 25px;
+                    }
+                }
                 .shortcutKey {
                     padding: 20px;
                     display: grid;