From 1eee181e219dfd993d396ac3169e7aad3dd285eb Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Sun, 16 Jul 2023 22:35:39 +0700
Subject: 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)
---
 components/manga/panels/firstPanel.js | 200 ++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 components/manga/panels/firstPanel.js

(limited to 'components/manga/panels/firstPanel.js')

diff --git a/components/manga/panels/firstPanel.js b/components/manga/panels/firstPanel.js
new file mode 100644
index 0000000..29484be
--- /dev/null
+++ b/components/manga/panels/firstPanel.js
@@ -0,0 +1,200 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  ArrowsPointingOutIcon,
+  ArrowsPointingInIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/24/outline";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useAniList } from "../../../lib/anilist/useAnilist";
+
+export default function FirstPanel({
+  aniId,
+  data,
+  hasRun,
+  currentId,
+  seekPage,
+  setSeekPage,
+  visible,
+  setVisible,
+  chapter,
+  nextChapter,
+  prevChapter,
+  paddingX,
+  session,
+  mobileVisible,
+  setMobileVisible,
+  setCurrentPage,
+}) {
+  const { markProgress } = useAniList(session);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const imageRefs = useRef([]);
+  const scrollContainerRef = useRef();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = scrollContainerRef.current.scrollTop;
+      let index = 0;
+
+      for (let i = 0; i < imageRefs.current.length; i++) {
+        const img = imageRefs.current[i];
+        if (
+          scrollTop >= img?.offsetTop - scrollContainerRef.current.offsetTop &&
+          scrollTop <
+            img.offsetTop -
+              scrollContainerRef.current.offsetTop +
+              img.offsetHeight
+        ) {
+          index = i;
+          break;
+        }
+      }
+
+      if (index === data.length - 3 && !hasRun.current) {
+        if (session) {
+          const currentChapter = chapter.chapters?.find(
+            (x) => x.id === currentId
+          );
+          if (currentChapter) {
+            markProgress(aniId, currentChapter.number);
+            console.log("marking progress");
+          }
+        }
+        hasRun.current = true;
+      }
+
+      setCurrentPage(index + 1);
+      setCurrentImageIndex(index);
+      setSeekPage(index);
+    };
+
+    scrollContainerRef?.current?.addEventListener("scroll", handleScroll, {
+      passive: true,
+    });
+
+    return () => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.removeEventListener("scroll", handleScroll, {
+          passive: true,
+        });
+      }
+    };
+  }, [data, session, chapter]);
+
+  useEffect(() => {
+    if (scrollContainerRef.current && seekPage !== currentImageIndex) {
+      const targetImageRef = imageRefs.current[seekPage];
+      if (targetImageRef) {
+        scrollContainerRef.current.scrollTo({
+          top: targetImageRef.offsetTop - scrollContainerRef.current.offsetTop,
+          behavior: "smooth",
+        });
+      }
+    }
+  }, [seekPage, currentImageIndex]);
+
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo(0, 0);
+    }
+  }, [currentId]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const root = window.document.documentElement;
+      root.style.setProperty("--dynamic-padding", `${paddingX}px`);
+    }
+  }, [paddingX]);
+
+  return (
+    <section className="flex-grow flex flex-col items-center relative">
+      <div
+        // style={{ paddingLeft: paddingX, paddingRight: paddingX }}
+        className="longPanel h-screen w-full overflow-y-scroll lg:scrollbar-thin scrollbar-thumb-txt scrollbar-thumb-rounded-sm"
+        ref={scrollContainerRef}
+      >
+        {data && Array.isArray(data) && data?.length > 0 ? (
+          data.map((i, index) => (
+            <div
+              key={i.url}
+              className="w-screen lg:h-auto lg:w-full"
+              ref={(el) => (imageRefs.current[index] = el)}
+            >
+              <Image
+                src={`https://img.moopa.live/image-proxy?url=${encodeURIComponent(
+                  i.url
+                )}&headers=${encodeURIComponent(
+                  JSON.stringify({ Referer: i.headers.Referer })
+                )}`}
+                alt={i.index}
+                width={500}
+                height={500}
+                onClick={() => setMobileVisible(!mobileVisible)}
+                className="w-screen lg:w-full h-auto bg-[#bbb]"
+              />
+            </div>
+          ))
+        ) : (
+          <div className="w-full flex-center h-full">
+            {data.error || "Not found"} :(
+          </div>
+        )}
+      </div>
+      <div className="absolute hidden lg:flex bottom-5 left-5 gap-5">
+        <span className="flex bg-secondary p-2 rounded-sm">
+          {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>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className={`flex-center rounded-sm p-2 ${
+              prevChapter
+                ? "bg-secondary"
+                : "pointer-events-none bg-[#18181A] text-[#424245]"
+            }`}
+            onClick={() =>
+              router.push(
+                `/en/manga/read/${
+                  chapter.providerId
+                }?id=${aniId}&chapterId=${encodeURIComponent(prevChapter)}`
+              )
+            }
+          >
+            <ChevronLeftIcon className="w-5 h-5" />
+          </button>
+          <button
+            type="button"
+            className={`flex-center rounded-sm p-2 ${
+              nextChapter
+                ? "bg-secondary"
+                : "pointer-events-none bg-[#18181A] text-[#424245]"
+            }`}
+            onClick={() =>
+              router.push(
+                `/en/manga/read/${
+                  chapter.providerId
+                }?id=${aniId}&chapterId=${encodeURIComponent(nextChapter)}`
+              )
+            }
+          >
+            <ChevronRightIcon className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+      <span className="hidden lg:flex bg-secondary p-2 rounded-sm absolute bottom-5 right-5">{`Page ${
+        currentImageIndex + 1
+      }/${data.length}`}</span>
+    </section>
+  );
+}
-- 
cgit v1.2.3