yiekheng
43a2a6d3f8
Replaces the prepend/flushSync/scrollBy gymnastics with placeholder divs
sized by each page's width/height. Document height is correct from the
first paint, so resume + backward scroll just work — no scroll
compensation, no gesture fights, no forced aspect ratio distorting images.
- New /api/chapters/[id]/meta returns the dim skeleton for any chapter.
- Chapter page pre-fetches the starting chapter's meta server-side and
parallelizes the two Prisma queries via Promise.all.
- Reader renders placeholders with aspectRatio: w/h, lazy-loads image
URLs in batches via IntersectionObserver, and prefetches the next
chapter's meta ~3 pages from the end.
- Scroll tracker walks only the intersecting-pages set (~3–5 elements)
instead of every loaded page per rAF.
- scroll={false} on all Links into the reader + { scroll: false } on
double-tap router.push, plus a belt-and-suspenders rAF re-scroll, so
resume survives soft navigation and browser scroll-restoration.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { prisma } from "@/lib/db";
|
|
import { PageReader } from "@/components/PageReader";
|
|
import type { Metadata } from "next";
|
|
|
|
type Props = {
|
|
params: Promise<{ slug: string; chapter: string }>;
|
|
};
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { slug, chapter } = await params;
|
|
const chapterNum = parseInt(chapter, 10);
|
|
if (isNaN(chapterNum)) return { title: "Not Found" };
|
|
|
|
const manga = await prisma.manga.findUnique({ where: { slug } });
|
|
if (!manga) return { title: "Not Found" };
|
|
|
|
return {
|
|
title: `${manga.title} — Ch. ${chapterNum}`,
|
|
description: `Read chapter ${chapterNum} of ${manga.title}`,
|
|
};
|
|
}
|
|
|
|
export default async function ChapterReaderPage({ params }: Props) {
|
|
const { slug, chapter } = await params;
|
|
const chapterNum = parseInt(chapter, 10);
|
|
if (isNaN(chapterNum)) notFound();
|
|
|
|
const [manga, initialChapterMeta] = await Promise.all([
|
|
prisma.manga.findUnique({
|
|
where: { slug },
|
|
include: {
|
|
chapters: {
|
|
orderBy: { number: "asc" },
|
|
include: {
|
|
_count: { select: { pages: true } },
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
prisma.page.findMany({
|
|
where: { chapter: { number: chapterNum, manga: { slug } } },
|
|
orderBy: { number: "asc" },
|
|
select: { number: true, width: true, height: true },
|
|
}),
|
|
]);
|
|
|
|
if (!manga) notFound();
|
|
|
|
const currentChapter = manga.chapters.find((c) => c.number === chapterNum);
|
|
if (!currentChapter) notFound();
|
|
|
|
const chapterIndex = manga.chapters.findIndex(
|
|
(c) => c.number === chapterNum
|
|
);
|
|
const prevChapter =
|
|
chapterIndex > 0 ? manga.chapters[chapterIndex - 1].number : null;
|
|
const nextChapter =
|
|
chapterIndex < manga.chapters.length - 1
|
|
? manga.chapters[chapterIndex + 1].number
|
|
: null;
|
|
|
|
const allChapters = manga.chapters.map((c) => ({
|
|
id: c.id,
|
|
number: c.number,
|
|
title: c.title,
|
|
totalPages: c._count.pages,
|
|
}));
|
|
|
|
return (
|
|
<PageReader
|
|
mangaSlug={manga.slug}
|
|
mangaTitle={manga.title}
|
|
startChapterNumber={currentChapter.number}
|
|
prevChapter={prevChapter}
|
|
nextChapter={nextChapter}
|
|
chapters={allChapters}
|
|
initialChapterMeta={initialChapterMeta}
|
|
/>
|
|
);
|
|
}
|