1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import {
ChevronLeftIcon,
ChevronRightIcon,
ChevronUpIcon,
RectangleStackIcon,
} from "@heroicons/react/24/outline";
import Image from "next/image";
import { useRouter } from "next/router";
import { useState } from "react";
export default function BottomBar({
id,
prevChapter,
nextChapter,
currentPage,
chapter,
page,
setSeekPage,
setIsOpen,
}) {
const [openPage, setOpenPage] = useState(false);
const router = useRouter();
return (
<div
className={`fixed lg:hidden flex flex-col gap-3 z-50 h-auto w-screen ${
openPage ? "bottom-0" : "bottom-5"
}`}
>
<div className="flex justify-between px-2">
<div className="flex gap-2">
<button
type="button"
className={`flex-center shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 ${
prevChapter
? "bg-secondary"
: "pointer-events-none bg-[#18181A] text-[#424245]"
}`}
onClick={() =>
router.push(
`/en/manga/read/${
chapter.providerId
}?id=${id}&chapterId=${encodeURIComponent(prevChapter)}`
)
}
>
<ChevronLeftIcon className="w-5 h-5" />
</button>
<button
type="button"
className={`flex-center shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 ${
nextChapter
? "bg-secondary"
: "pointer-events-none bg-[#18181A] text-[#424245]"
}`}
onClick={() =>
router.push(
`/en/manga/read/${
chapter.providerId
}?id=${id}&chapterId=${encodeURIComponent(nextChapter)}`
)
}
>
<ChevronRightIcon className="w-5 h-5" />
</button>
<button
type="button"
className={`flex-center gap-2 shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 bg-secondary`}
onClick={() => setOpenPage(!openPage)}
>
<ChevronUpIcon
className={`w-5 h-5 transition-transform ${
openPage ? "rotate-180 transform" : ""
}`}
/>
<h1>Pages</h1>
</button>
<button
type="button"
className={`flex-center gap-2 shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 bg-secondary`}
onClick={() => setIsOpen(true)}
>
<RectangleStackIcon className="w-5 h-5" />
</button>
</div>
<span className="flex bg-secondary shadow-lg ring-1 ring-black ring-opacity-5 p-2 rounded-md">{`${currentPage}/${page.length}`}</span>
</div>
{openPage && (
<div className="bg-secondary flex justify-center h-full w-screen py-2">
<div className="flex overflow-scroll">
{Array.isArray(page) ? (
page.map((x) => {
return (
<div
key={x.url}
className="hover:bg-[#424245] shrink-0 cursor-pointer rounded-sm"
>
<div
className="flex flex-col shrink-0 items-center cursor-pointer"
onClick={() => setSeekPage(x.index)}
>
<Image
src={`https://img.moopa.live/image-proxy?url=${encodeURIComponent(
x.url
)}&headers=${encodeURIComponent(
JSON.stringify({ Referer: x.headers.Referer })
)}`}
alt="chapter image"
width={100}
height={200}
className="w-full h-[120px] object-contain scale-90"
/>
<h1>Page {x.index + 1}</h1>
</div>
</div>
);
})
) : (
<div>not found</div>
)}
</div>
</div>
)}
</div>
);
}
|