Update v3.6.4

- Added Manga page with a working tracker for AniList user
- Added schedule component to home page
- Added disqus comment section so you can fight on each other (not recommended)
- Added /id and /en route for english and indonesian subs (id route still work in progress)

1 files changed, 171 insertions, 0 deletions

diff --git a/components/manga/panels/thirdPanel.js b/components/manga/panels/thirdPanel.js
new file mode 100644
index 0000000..7dff76b
--- /dev/null
+++ b/components/manga/panels/thirdPanel.js
@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import {
+  ArrowsPointingOutIcon,
+  ArrowsPointingInIcon,
+} from "@heroicons/react/24/outline";
+import { useAniList } from "../../../lib/anilist/useAnilist";
+
+export default function ThirdPanel({
+  aniId,
+  data,
+  hasRun,
+  currentId,
+  currentChapter,
+  seekPage,
+  setSeekPage,
+  visible,
+  setVisible,
+  session,
+  scaleImg,
+  setMobileVisible,
+  mobileVisible,
+}) {
+  const [index, setIndex] = useState(0);
+  const [image, setImage] = useState(null);
+  const { markProgress } = useAniList(session);
+
+  useEffect(() => {
+    setIndex(0);
+    setSeekPage(0);
+  }, [data, currentId]);
+
+  const seekToIndex = (newIndex) => {
+    if (newIndex >= 0 && newIndex < data.length) {
+      setIndex(newIndex);
+      setSeekPage(newIndex);
+    }
+  };
+
+  useEffect(() => {
+    seekToIndex(seekPage);
+  }, [seekPage]);
+
+  useEffect(() => {
+    if (data && Array.isArray(data) && data?.length > 0) {
+      setImage([...data].reverse()); // Create a copy of data before reversing
+    }
+  }, [data]);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "ArrowRight") {
+        if (index > 0) {
+          setIndex(index - 1);
+          setSeekPage(index - 1);
+        }
+      } else if (event.key === "ArrowLeft") {
+        if (index < image.length - 1) {
+          setIndex(index + 1);
+          setSeekPage(index + 1);
+        }
+        if (index + 1 >= image.length - 2 && !hasRun.current) {
+          let chapterNumber = currentChapter?.number;
+          if (chapterNumber % 1 !== 0) {
+            // If it's a decimal, round it
+            chapterNumber = Math.round(chapterNumber);
+          }
+
+          markProgress(aniId, chapterNumber);
+          hasRun.current = true;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [index, image]);
+
+  const handleNext = () => {
+    if (index < image.length - 1) {
+      setIndex(index + 1);
+      setSeekPage(index + 1);
+    }
+    if (index + 1 >= image.length - 2 && !hasRun.current) {
+      let chapterNumber = currentChapter?.number;
+      if (chapterNumber % 1 !== 0) {
+        // If it's a decimal, round it
+        chapterNumber = Math.round(chapterNumber);
+      }
+
+      markProgress(aniId, chapterNumber);
+      hasRun.current = true;
+    }
+  };
+
+  const handlePrev = () => {
+    if (index > 0) {
+      setIndex(index - 1);
+      setSeekPage(index - 1);
+    }
+  };
+
+  return (
+    <div className="flex-grow h-screen">
+      <div className="flex items-center w-full relative group">
+        {image && Array.isArray(image) && image?.length > 0 ? (
+          <>
+            <div
+              className={`flex w-full justify-center items-center lg:scrollbar-thin scrollbar-thumb-txt scrollbar-thumb-rounded-sm overflow-x-hidden`}
+            >
+              <Image
+                key={image[image.length - index - 1]?.url}
+                width={500}
+                height={500}
+                className="w-full h-screen object-contain"
+                onClick={() => setMobileVisible(!mobileVisible)}
+                src={`https://img.moopa.live/image-proxy?url=${encodeURIComponent(
+                  image[image.length - index - 1]?.url
+                )}&headers=${encodeURIComponent(
+                  JSON.stringify({
+                    Referer: image[image.length - index - 1]?.headers.Referer,
+                  })
+                )}`}
+                alt="Manga Page"
+                style={{
+                  transform: `scale(${scaleImg})`,
+                  transformOrigin: "top",
+                }}
+              />
+            </div>
+            <div className="absolute w-full hidden group-hover:flex justify-between mt-4">
+              <button
+                className="px-4 py-2 bg-secondary text-white rounded-r"
+                onClick={handleNext}
+              >
+                Next
+              </button>
+              <button
+                className="px-4 py-2 bg-secondary text-white rounded-l"
+                onClick={handlePrev}
+              >
+                Previous
+              </button>
+            </div>
+          </>
+        ) : (
+          <div className="w-full flex-center h-full">
+            {data.error || "Not found"} :(
+          </div>
+        )}
+        <span className="absolute hidden group-hover:flex bottom-5 left-5 bg-secondary p-2">
+          {visible ? (
+            <button type="button" onClick={() => setVisible(!visible)}>
+              <ArrowsPointingOutIcon className="w-5 h-5" />
+            </button>
+          ) : (
+            <button type="button" onClick={() => setVisible(!visible)}>
+              <ArrowsPointingInIcon className="w-5 h-5" />
+            </button>
+          )}
+        </span>
+        <span className="absolute hidden group-hover:flex bottom-5 right-5 bg-secondary p-2">
+          Page {index + 1}/{data.length}
+        </span>
+      </div>
+    </div>
+  );
+}