aboutsummaryrefslogtreecommitdiff
path: root/components/manga/panels
diff options
context:
space:
mode:
Diffstat (limited to 'components/manga/panels')
-rw-r--r--components/manga/panels/firstPanel.js72
-rw-r--r--components/manga/panels/secondPanel.js61
-rw-r--r--components/manga/panels/thirdPanel.js46
3 files changed, 133 insertions, 46 deletions
diff --git a/components/manga/panels/firstPanel.js b/components/manga/panels/firstPanel.js
index f1ee859..596fa58 100644
--- a/components/manga/panels/firstPanel.js
+++ b/components/manga/panels/firstPanel.js
@@ -4,10 +4,13 @@ import {
ArrowsPointingInIcon,
ChevronLeftIcon,
ChevronRightIcon,
+ PlusIcon,
+ MinusIcon,
} from "@heroicons/react/24/outline";
import Image from "next/image";
import { useRouter } from "next/router";
import { useAniList } from "../../../lib/anilist/useAnilist";
+import { getHeaders, getRandomId } from "@/utils/imageUtils";
export default function FirstPanel({
aniId,
@@ -26,14 +29,20 @@ export default function FirstPanel({
mobileVisible,
setMobileVisible,
setCurrentPage,
+ number,
+ mangadexId,
}) {
const { markProgress } = useAniList(session);
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const imageRefs = useRef([]);
const scrollContainerRef = useRef();
+ const [imageQuality, setImageQuality] = useState(80);
+
const router = useRouter();
+ // console.log({ chapter });
+
useEffect(() => {
const handleScroll = () => {
const scrollTop = scrollContainerRef.current.scrollTop;
@@ -53,13 +62,17 @@ export default function FirstPanel({
}
}
- if (index === data.length - 3 && !hasRun.current) {
+ if (index === data?.length - 3 && !hasRun.current) {
if (session) {
+ if (aniId?.length > 6) return;
const currentChapter = chapter.chapters?.find(
(x) => x.id === currentId
);
if (currentChapter) {
- markProgress(aniId, currentChapter.number);
+ const chapterNumber =
+ currentChapter.number ??
+ chapter.chapters.indexOf(currentChapter) + 1;
+ markProgress(aniId, chapterNumber);
console.log("marking progress");
}
}
@@ -82,8 +95,12 @@ export default function FirstPanel({
});
}
};
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, session, chapter]);
+ // console.log({ imageQuality });
+
useEffect(() => {
if (scrollContainerRef.current && seekPage !== currentImageIndex) {
const targetImageRef = imageRefs.current[seekPage];
@@ -119,19 +136,26 @@ export default function FirstPanel({
{data && Array.isArray(data) && data?.length > 0 ? (
data.map((i, index) => (
<div
- key={i.url}
+ key={getRandomId()}
className="w-screen lg:h-auto lg:w-full"
ref={(el) => (imageRefs.current[index] = el)}
>
<Image
src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
i.url
- )}&headers=${encodeURIComponent(
- JSON.stringify({ Referer: i.headers.Referer })
- )}`}
- alt={i.index}
+ )}${
+ i?.headers?.Referer
+ ? `&headers=${encodeURIComponent(
+ JSON.stringify(i?.headers)
+ )}`
+ : `&headers=${encodeURIComponent(
+ JSON.stringify(getHeaders(chapter.providerId))
+ )}`
+ }`}
+ alt={index}
width={500}
height={500}
+ quality={imageQuality}
onClick={() => setMobileVisible(!mobileVisible)}
className="w-screen lg:w-full h-auto bg-[#bbb]"
/>
@@ -145,6 +169,26 @@ export default function FirstPanel({
)}
</div>
<div className="absolute hidden lg:flex bottom-5 left-5 gap-5">
+ {/* <button
+ type="button"
+ disabled={imageQuality >= 100}
+ onClick={() => {
+ setImageQuality((prev) => (prev <= 100 ? prev + 10 : prev));
+ }}
+ className="flex-center p-2 bg-secondary"
+ >
+ <PlusIcon className="w-5 h-5" />
+ </button>
+ <button
+ type="button"
+ disabled={imageQuality <= 10}
+ onClick={() => {
+ setImageQuality((prev) => (prev >= 10 ? prev - 10 : prev));
+ }}
+ className="flex-center p-2 bg-secondary"
+ >
+ <MinusIcon className="w-5 h-5" />
+ </button> */}
<span className="flex bg-secondary p-2 rounded-sm">
{visible ? (
<button type="button" onClick={() => setVisible(!visible)}>
@@ -168,7 +212,11 @@ export default function FirstPanel({
router.push(
`/en/manga/read/${
chapter.providerId
- }?id=${aniId}&chapterId=${encodeURIComponent(prevChapter)}`
+ }?id=${mangadexId}&chapterId=${encodeURIComponent(
+ prevChapter?.id
+ )}${aniId?.length > 6 ? "" : `&anilist=${aniId}`}&num=${
+ prevChapter?.number
+ }`
)
}
>
@@ -185,7 +233,11 @@ export default function FirstPanel({
router.push(
`/en/manga/read/${
chapter.providerId
- }?id=${aniId}&chapterId=${encodeURIComponent(nextChapter)}`
+ }?id=${mangadexId}&chapterId=${encodeURIComponent(
+ nextChapter?.id
+ )}${aniId?.length > 6 ? "" : `&anilist=${aniId}`}&num=${
+ nextChapter?.number
+ }`
)
}
>
@@ -195,7 +247,7 @@ export default function FirstPanel({
</div>
<span className="hidden lg:flex bg-secondary p-2 rounded-sm absolute bottom-5 right-5">{`Page ${
currentImageIndex + 1
- }/${data.length}`}</span>
+ }/${data?.length}`}</span>
</section>
);
}
diff --git a/components/manga/panels/secondPanel.js b/components/manga/panels/secondPanel.js
index 9323822..fa158b2 100644
--- a/components/manga/panels/secondPanel.js
+++ b/components/manga/panels/secondPanel.js
@@ -5,9 +5,11 @@ import {
ArrowsPointingInIcon,
} from "@heroicons/react/24/outline";
import { useAniList } from "../../../lib/anilist/useAnilist";
+import { getHeaders } from "@/utils/imageUtils";
export default function SecondPanel({
aniId,
+ chapterData,
data,
hasRun,
currentChapter,
@@ -17,6 +19,7 @@ export default function SecondPanel({
visible,
setVisible,
session,
+ providerId,
}) {
const [index, setIndex] = useState(0);
const [image, setImage] = useState(null);
@@ -26,6 +29,7 @@ export default function SecondPanel({
useEffect(() => {
setIndex(0);
setSeekPage(0);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, currentId]);
const seekToIndex = (newIndex) => {
@@ -41,6 +45,7 @@ export default function SecondPanel({
useEffect(() => {
seekToIndex(seekPage);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [seekPage]);
useEffect(() => {
@@ -63,13 +68,14 @@ export default function SecondPanel({
}
if (index + 1 >= image.length - 4 && !hasRun.current) {
- let chapterNumber = currentChapter?.number;
- if (chapterNumber % 1 !== 0) {
- // If it's a decimal, round it
- chapterNumber = Math.round(chapterNumber);
- }
+ const current = chapterData.chapters?.find(
+ (x) => x.id === currentChapter.id
+ );
+ const chapterNumber = chapterData.chapters.indexOf(current) + 1;
- markProgress(aniId, chapterNumber);
+ if (chapterNumber) {
+ markProgress(aniId, chapterNumber);
+ }
hasRun.current = true;
}
}
@@ -80,6 +86,7 @@ export default function SecondPanel({
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [index, image]);
const handleNext = () => {
@@ -90,10 +97,13 @@ export default function SecondPanel({
if (index + 1 >= image.length - 4 && !hasRun.current) {
console.log("marking progress");
- let chapterNumber = currentChapter?.number;
- if (chapterNumber % 1 !== 0) {
- // If it's a decimal, round it
- chapterNumber = Math.round(chapterNumber);
+ const current = chapterData.chapters?.find(
+ (x) => x.id === currentChapter.id
+ );
+ const chapterNumber = chapterData.chapters.indexOf(current) + 1;
+
+ if (chapterNumber) {
+ markProgress(aniId, chapterNumber);
}
markProgress(aniId, chapterNumber);
@@ -107,6 +117,7 @@ export default function SecondPanel({
setSeekPage(index - 2);
}
};
+
return (
<div className="flex-grow h-screen">
<div className="flex items-center w-full relative group">
@@ -127,11 +138,17 @@ export default function SecondPanel({
className="w-1/2 h-screen object-contain"
src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
image[image.length - index - 2]?.url
- )}&headers=${encodeURIComponent(
- JSON.stringify({
- Referer: image[image.length - index - 2]?.headers.Referer,
- })
- )}`}
+ )}${
+ image[image.length - index - 2]?.headers?.Referer
+ ? `&headers=${encodeURIComponent(
+ JSON.stringify(
+ image[image.length - index - 2]?.headers
+ )
+ )}`
+ : `&headers=${encodeURIComponent(
+ JSON.stringify(getHeaders(providerId))
+ )}`
+ }`}
alt="Manga Page"
/>
)}
@@ -142,11 +159,15 @@ export default function SecondPanel({
className="w-1/2 h-screen object-contain"
src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
image[image.length - index - 1]?.url
- )}&headers=${encodeURIComponent(
- JSON.stringify({
- Referer: image[image.length - index - 1]?.headers.Referer,
- })
- )}`}
+ )}${
+ image[image.length - index - 1]?.headers?.Referer
+ ? `&headers=${encodeURIComponent(
+ JSON.stringify(image[image.length - index - 1]?.headers)
+ )}`
+ : `&headers=${encodeURIComponent(
+ JSON.stringify(getHeaders(providerId))
+ )}`
+ }`}
alt="Manga Page"
/>
</div>
diff --git a/components/manga/panels/thirdPanel.js b/components/manga/panels/thirdPanel.js
index d402f07..f13b49d 100644
--- a/components/manga/panels/thirdPanel.js
+++ b/components/manga/panels/thirdPanel.js
@@ -5,10 +5,12 @@ import {
ArrowsPointingInIcon,
} from "@heroicons/react/24/outline";
import { useAniList } from "../../../lib/anilist/useAnilist";
+import { getHeaders } from "@/utils/imageUtils";
export default function ThirdPanel({
aniId,
data,
+ chapterData,
hasRun,
currentId,
currentChapter,
@@ -20,6 +22,7 @@ export default function ThirdPanel({
scaleImg,
setMobileVisible,
mobileVisible,
+ providerId,
}) {
const [index, setIndex] = useState(0);
const [image, setImage] = useState(null);
@@ -28,6 +31,7 @@ export default function ThirdPanel({
useEffect(() => {
setIndex(0);
setSeekPage(0);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, currentId]);
const seekToIndex = (newIndex) => {
@@ -39,6 +43,7 @@ export default function ThirdPanel({
useEffect(() => {
seekToIndex(seekPage);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [seekPage]);
useEffect(() => {
@@ -60,13 +65,14 @@ export default function ThirdPanel({
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);
- }
+ const current = chapterData.chapters?.find(
+ (x) => x.id === currentChapter.id
+ );
+ const chapterNumber = chapterData.chapters.indexOf(current) + 1;
- markProgress(aniId, chapterNumber);
+ if (chapterNumber) {
+ markProgress(aniId, chapterNumber);
+ }
hasRun.current = true;
}
}
@@ -77,6 +83,8 @@ export default function ThirdPanel({
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [index, image]);
const handleNext = () => {
@@ -85,13 +93,15 @@ export default function ThirdPanel({
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);
+ const current = chapterData.chapters?.find(
+ (x) => x.id === currentChapter.id
+ );
+ const chapterNumber = chapterData.chapters.indexOf(current) + 1;
+
+ if (chapterNumber) {
+ markProgress(aniId, chapterNumber);
}
- markProgress(aniId, chapterNumber);
hasRun.current = true;
}
};
@@ -119,11 +129,15 @@ export default function ThirdPanel({
onClick={() => setMobileVisible(!mobileVisible)}
src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
image[image.length - index - 1]?.url
- )}&headers=${encodeURIComponent(
- JSON.stringify({
- Referer: image[image.length - index - 1]?.headers.Referer,
- })
- )}`}
+ )}${
+ image[image.length - index - 1]?.headers?.Referer
+ ? `&headers=${encodeURIComponent(
+ JSON.stringify(image[image.length - index - 1]?.headers)
+ )}`
+ : `&headers=${encodeURIComponent(
+ JSON.stringify(getHeaders(providerId))
+ )}`
+ }`}
alt="Manga Page"
style={{
transform: `scale(${scaleImg})`,
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 14:05:27 +0000