diff --git a/components/PageReader.tsx b/components/PageReader.tsx
index 6cc929c..f0c9a50 100644
--- a/components/PageReader.tsx
+++ b/components/PageReader.tsx
@@ -2,86 +2,125 @@
import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link";
+import { useRouter } from "next/navigation";
-type PageData = {
+type ChapterMeta = {
+ id: number;
+ number: number;
+ title: string;
+ totalPages: number;
+};
+
+type LoadedPage = {
+ chapterNumber: number;
+ pageNumber: number;
+ imageUrl: string;
+};
+
+type RawPage = {
number: number;
imageUrl: string;
};
-type ChapterInfo = {
- number: number;
- title: string;
-};
-
type PageReaderProps = {
- chapterId: number;
- totalPages: number;
mangaSlug: string;
mangaTitle: string;
- chapterNumber: number;
- chapterTitle: string;
+ startChapterNumber: number;
prevChapter: number | null;
nextChapter: number | null;
- chapters: ChapterInfo[];
+ chapters: ChapterMeta[];
};
const BATCH_SIZE = 7;
const PREFETCH_AT = 3;
export function PageReader({
- chapterId,
- totalPages,
mangaSlug,
mangaTitle,
- chapterNumber,
- chapterTitle,
+ startChapterNumber,
prevChapter,
nextChapter,
chapters,
}: PageReaderProps) {
const [showUI, setShowUI] = useState(true);
const [showDrawer, setShowDrawer] = useState(false);
- const [pages, setPages] = useState
([]);
+ const [pages, setPages] = useState([]);
+ const [currentChapterNum, setCurrentChapterNum] =
+ useState(startChapterNumber);
+
const hiddenByScrollRef = useRef(false);
+ const fetchChapterIdxRef = useRef(
+ chapters.findIndex((c) => c.number === startChapterNumber)
+ );
const offsetRef = useRef(0);
- const doneRef = useRef(false);
const loadingRef = useRef(false);
+ const doneRef = useRef(false);
+ // Count of pages already loaded — tracked via ref so fetchBatch stays stable
+ // (otherwise every batch re-creates fetchBatch and tears down the observer)
+ const loadedCountRef = useRef(0);
const triggerIndicesRef = useRef>(new Set());
const observerRef = useRef(null);
const pageRefsRef = useRef>(new Map());
+ const advanceChapterOrFinish = useCallback(() => {
+ if (fetchChapterIdxRef.current + 1 < chapters.length) {
+ fetchChapterIdxRef.current += 1;
+ offsetRef.current = 0;
+ } else {
+ doneRef.current = true;
+ }
+ }, [chapters.length]);
+
const fetchBatch = useCallback(async () => {
if (loadingRef.current || doneRef.current) return;
+ const chapter = chapters[fetchChapterIdxRef.current];
+ if (!chapter) {
+ doneRef.current = true;
+ return;
+ }
loadingRef.current = true;
try {
const res = await fetch(
- `/api/pages?chapterId=${chapterId}&offset=${offsetRef.current}&limit=${BATCH_SIZE}`
+ `/api/pages?chapterId=${chapter.id}&offset=${offsetRef.current}&limit=${BATCH_SIZE}`
);
- const batch: PageData[] = await res.json();
+ const batch: RawPage[] = await res.json();
if (batch.length === 0) {
- doneRef.current = true;
- } else {
- const triggerIndex = offsetRef.current + PREFETCH_AT - 1;
- triggerIndicesRef.current.add(triggerIndex);
+ advanceChapterOrFinish();
+ return;
+ }
- // If trigger element is already mounted, observe it now
+ const baseIndex = loadedCountRef.current;
+ const willHaveMore =
+ offsetRef.current + batch.length < chapter.totalPages ||
+ fetchChapterIdxRef.current + 1 < chapters.length;
+ if (willHaveMore) {
+ const triggerIndex = baseIndex + PREFETCH_AT - 1;
+ triggerIndicesRef.current.add(triggerIndex);
const existing = pageRefsRef.current.get(triggerIndex);
if (existing && observerRef.current) {
observerRef.current.observe(existing);
}
+ }
- setPages((prev) => [...prev, ...batch]);
- offsetRef.current += batch.length;
- if (offsetRef.current >= totalPages) {
- doneRef.current = true;
- }
+ loadedCountRef.current += batch.length;
+ setPages((prev) => [
+ ...prev,
+ ...batch.map((p) => ({
+ chapterNumber: chapter.number,
+ pageNumber: p.number,
+ imageUrl: p.imageUrl,
+ })),
+ ]);
+ offsetRef.current += batch.length;
+ if (offsetRef.current >= chapter.totalPages) {
+ advanceChapterOrFinish();
}
} catch {
// retry on next intersection
} finally {
loadingRef.current = false;
}
- }, [chapterId, totalPages]);
+ }, [chapters, advanceChapterOrFinish]);
useEffect(() => {
observerRef.current = new IntersectionObserver(
@@ -98,12 +137,15 @@ export function PageReader({
}
}
},
- { rootMargin: "200px" }
+ { rootMargin: "400px" }
);
return () => observerRef.current?.disconnect();
}, [fetchBatch]);
+ const initialFetchRef = useRef(false);
useEffect(() => {
+ if (initialFetchRef.current) return;
+ initialFetchRef.current = true;
fetchBatch();
}, [fetchBatch]);
@@ -111,10 +153,8 @@ export function PageReader({
(index: number, el: HTMLDivElement | null) => {
const observer = observerRef.current;
if (!observer) return;
-
const prev = pageRefsRef.current.get(index);
if (prev) observer.unobserve(prev);
-
if (el) {
pageRefsRef.current.set(index, el);
if (triggerIndicesRef.current.has(index)) {
@@ -127,47 +167,106 @@ export function PageReader({
[]
);
- // Distinguish tap from scroll on touch devices
+ const router = useRouter();
+
const touchMovedRef = useRef(false);
+ // Pending single-tap toggle, delayed so we can detect a double-tap first
+ const singleTapTimerRef = useRef | null>(null);
+ const lastTapAtRef = useRef(0);
+ const DOUBLE_TAP_MS = 280;
const onTouchStart = useCallback(() => {
touchMovedRef.current = false;
}, []);
-
const onTouchMove = useCallback(() => {
touchMovedRef.current = true;
}, []);
- const onTap = useCallback(() => {
- if (touchMovedRef.current) return;
- setShowUI((v) => !v);
- }, []);
+ const onTap = useCallback(
+ (e: React.MouseEvent) => {
+ if (touchMovedRef.current) return;
+ const now = Date.now();
+ const isDoubleTap = now - lastTapAtRef.current < DOUBLE_TAP_MS;
+
+ if (isDoubleTap) {
+ // Cancel pending single-tap, navigate instead
+ if (singleTapTimerRef.current) {
+ clearTimeout(singleTapTimerRef.current);
+ singleTapTimerRef.current = null;
+ }
+ lastTapAtRef.current = 0;
+ const midX = window.innerWidth / 2;
+ if (e.clientX >= midX) {
+ if (nextChapter)
+ router.push(`/manga/${mangaSlug}/${nextChapter}`);
+ } else {
+ if (prevChapter)
+ router.push(`/manga/${mangaSlug}/${prevChapter}`);
+ }
+ return;
+ }
+
+ lastTapAtRef.current = now;
+ singleTapTimerRef.current = setTimeout(() => {
+ setShowUI((v) => !v);
+ singleTapTimerRef.current = null;
+ }, DOUBLE_TAP_MS);
+ },
+ [router, mangaSlug, nextChapter, prevChapter]
+ );
+
+ useEffect(
+ () => () => {
+ if (singleTapTimerRef.current) clearTimeout(singleTapTimerRef.current);
+ },
+ []
+ );
- // Hide nav on first scroll down; after that, only tap toggles
useEffect(() => {
- const handleScroll = () => {
- if (!hiddenByScrollRef.current && window.scrollY > 50) {
+ let rafId = 0;
+ const tick = () => {
+ rafId = 0;
+ const y = window.scrollY;
+ if (!hiddenByScrollRef.current && y > 50) {
hiddenByScrollRef.current = true;
setShowUI(false);
- window.removeEventListener("scroll", handleScroll);
}
+ let current = startChapterNumber;
+ for (let i = 0; i < pages.length; i++) {
+ const el = pageRefsRef.current.get(i);
+ if (!el) continue;
+ if (el.offsetTop <= y + 80) current = pages[i].chapterNumber;
+ else break;
+ }
+ setCurrentChapterNum(current);
};
- window.addEventListener("scroll", handleScroll, { passive: true });
- return () => window.removeEventListener("scroll", handleScroll);
- }, []);
+ const onScroll = () => {
+ if (rafId) return;
+ rafId = requestAnimationFrame(tick);
+ };
+ window.addEventListener("scroll", onScroll, { passive: true });
+ return () => {
+ window.removeEventListener("scroll", onScroll);
+ if (rafId) cancelAnimationFrame(rafId);
+ };
+ }, [pages, startChapterNumber]);
+
+ const currentChapter =
+ chapters.find((c) => c.number === currentChapterNum) ??
+ chapters.find((c) => c.number === startChapterNumber);
return (
-
- {/* Top bar */}
+
- {/* Pages - vertical scroll (webtoon style, best for mobile) */}
e.preventDefault()}
>
- {pages.map((page, i) => (
-
setPageRef(i, el)}
- >
-
-
- ))}
+ {pages.map((page, i) => {
+ const isChapterStart =
+ i === 0 || pages[i - 1].chapterNumber !== page.chapterNumber;
+ return (
+
setPageRef(i, el)}
+ >
+ {isChapterStart && i > 0 && (
+
+
+ Chapter {page.chapterNumber}
+
+
+ {
+ chapters.find((c) => c.number === page.chapterNumber)
+ ?.title
+ }
+
+
+ )}
+
+
+ );
+ })}
- {/* Bottom navigation */}
-
-
- {prevChapter ? (
-
-
- Prev
-
- ) : (
-
- )}
-
- {/* Chapter drawer overlay */}
+ )}
+
+ {/* Chapter drawer overlay (modal — fixed is necessary to cover viewport) */}
{showDrawer && (
setShowDrawer(false)}
>
- {/* Backdrop */}
-
-
- {/* Bottom sheet */}
+
e.stopPropagation()}
>
- {/* Handle + header */}
-
-
-
+
+
-
-
Chapters
+
+
+ Chapters
+
+
+ {chapters.length} total
+
- {/* Chapter list */}
-
- {chapters.map((ch) => (
-
setShowDrawer(false)}
- >
- Ch. {ch.number} — {ch.title}
-
- ))}
+
+ {chapters.map((ch) => {
+ const isActive = ch.number === currentChapterNum;
+ return (
+ setShowDrawer(false)}
+ >
+
+ #{ch.number}
+
+
+ {ch.title}
+
+ {isActive && (
+
+ Current
+
+ )}
+
+ );
+ })}
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index 7953026..58f17c5 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -73,6 +73,7 @@ export function SearchBar() {
onFocus={() => results.length > 0 && setOpen(true)}
placeholder="Search manga..."
className="w-full pl-10 pr-4 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent placeholder:text-muted transition-colors"
+ suppressHydrationWarning
/>
{loading && (