mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
chore: patched/rewrote reader
This commit is contained in:
Youwes09
@@ -1 +1,737 @@
|
||||
<div>Reader.svelte</div>
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, tick } from "svelte";
|
||||
import {
|
||||
X, CaretLeft, CaretRight, ArrowLeft, ArrowRight,
|
||||
Square, Rows, Download, ArrowsLeftRight,
|
||||
ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch,
|
||||
} from "phosphor-svelte";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
|
||||
import { settings, activeManga, activeChapter, activeChapterList, pageUrls, pageNumber, closeReader, openReader, settingsOpen, addHistory, updateSettings } from "../../store";
|
||||
import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
|
||||
import type { FitMode } from "../../store";
|
||||
|
||||
// ── Page cache ────────────────────────────────────────────────────────────────
|
||||
const pageCache = new Map<number, string[]>();
|
||||
const inflight = new Map<number, Promise<string[]>>();
|
||||
const cacheOrder: number[] = [];
|
||||
const MAX_CACHED = 10;
|
||||
|
||||
function cacheTouch(id: number) {
|
||||
const i = cacheOrder.indexOf(id);
|
||||
if (i !== -1) cacheOrder.splice(i, 1);
|
||||
cacheOrder.push(id);
|
||||
}
|
||||
|
||||
function cacheEvict(keep: Set<number>) {
|
||||
while (pageCache.size > MAX_CACHED) {
|
||||
const victim = cacheOrder.find((id) => !keep.has(id));
|
||||
if (!victim) break;
|
||||
cacheOrder.splice(cacheOrder.indexOf(victim), 1);
|
||||
pageCache.delete(victim);
|
||||
}
|
||||
}
|
||||
|
||||
function fetchPages(chapterId: number, signal?: AbortSignal): Promise<string[]> {
|
||||
const cached = pageCache.get(chapterId);
|
||||
if (cached) { cacheTouch(chapterId); return Promise.resolve(cached); }
|
||||
if (signal?.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
|
||||
if (!inflight.has(chapterId)) {
|
||||
const p = gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId })
|
||||
.then((d) => {
|
||||
const urls = d.fetchChapterPages.pages.map(thumbUrl);
|
||||
pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls;
|
||||
}).finally(() => inflight.delete(chapterId));
|
||||
inflight.set(chapterId, p);
|
||||
}
|
||||
const base = inflight.get(chapterId)!;
|
||||
if (!signal) return base;
|
||||
return new Promise((resolve, reject) => {
|
||||
signal.addEventListener("abort", () => reject(new DOMException("Aborted", "AbortError")), { once: true });
|
||||
base.then(resolve, reject);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Image helpers ─────────────────────────────────────────────────────────────
|
||||
const aspectCache = new Map<string, number>();
|
||||
|
||||
function preloadImage(url: string) { new Image().src = url; }
|
||||
|
||||
function decodeImage(url: string): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.onload = () => { img.decode ? img.decode().then(resolve, resolve) : resolve(); };
|
||||
img.onerror = () => resolve();
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
function measureAspect(url: string): Promise<number> {
|
||||
if (aspectCache.has(url)) return Promise.resolve(aspectCache.get(url)!);
|
||||
return new Promise((res) => {
|
||||
const img = new Image();
|
||||
img.onload = () => { const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67; aspectCache.set(url, r); res(r); };
|
||||
img.onerror = () => res(0.67);
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────────────────
|
||||
interface StripChapter { chapterId: number; chapterName: string; urls: string[]; startGlobalIdx: number; }
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let sentinelEl: HTMLDivElement;
|
||||
let hideTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
let loading = true;
|
||||
let error: string | null = null;
|
||||
let dlOpen = false;
|
||||
let zoomOpen = false;
|
||||
let uiVisible = true;
|
||||
let pageReady = false;
|
||||
let pageGroups: number[][] = [];
|
||||
let stripChapters: StripChapter[] = [];
|
||||
let visibleChapterId: number | null = null;
|
||||
let nextN = 5;
|
||||
let dlBusy = false;
|
||||
|
||||
let markedRead = new Set<number>();
|
||||
let appended = new Set<number>();
|
||||
let appending = false;
|
||||
let abortCtrl: AbortController | null = null;
|
||||
let loadingId: number | null = null;
|
||||
let scrollAnchor: { scrollTop: number; scrollHeight: number } | null = null;
|
||||
|
||||
$: rtl = $settings.readingDirection === "rtl";
|
||||
$: fit = ($settings.fitMode ?? "width") as FitMode;
|
||||
$: style = $settings.pageStyle ?? "single";
|
||||
$: maxW = $settings.maxPageWidth ?? 900;
|
||||
$: autoNext = $settings.autoNextChapter ?? false;
|
||||
$: markOnNext = $settings.markReadOnNext ?? true;
|
||||
$: lastPage = $pageUrls.length;
|
||||
|
||||
$: displayChapter = (style === "longstrip" && autoNext && visibleChapterId)
|
||||
? ($activeChapterList.find((c) => c.id === visibleChapterId) ?? $activeChapter)
|
||||
: $activeChapter;
|
||||
|
||||
$: adjacent = (() => {
|
||||
const ref = displayChapter ?? $activeChapter;
|
||||
if (!ref || !$activeChapterList.length) return { prev: null, next: null, remaining: [] };
|
||||
const idx = $activeChapterList.findIndex((c) => c.id === ref.id);
|
||||
return {
|
||||
prev: idx > 0 ? $activeChapterList[idx - 1] : null,
|
||||
next: idx < $activeChapterList.length - 1 ? $activeChapterList[idx + 1] : null,
|
||||
remaining: $activeChapterList.slice(idx + 1),
|
||||
};
|
||||
})();
|
||||
|
||||
$: visibleChunkLastPage = (() => {
|
||||
if (style !== "longstrip" || !autoNext) return lastPage;
|
||||
const chId = visibleChapterId ?? $activeChapter?.id;
|
||||
const chunk = stripChapters.find((c) => c.chapterId === chId);
|
||||
return chunk?.urls.length ?? lastPage;
|
||||
})();
|
||||
|
||||
$: imgCls = [
|
||||
"img",
|
||||
fit === "width" && "fit-width",
|
||||
fit === "height" && "fit-height",
|
||||
fit === "screen" && "fit-screen",
|
||||
fit === "original" && "fit-original",
|
||||
$settings.optimizeContrast && "optimize-contrast",
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
$: fitLabel = { width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit];
|
||||
$: styleLabel = style;
|
||||
|
||||
function maybeMarkCurrentRead() {
|
||||
const ch = $activeChapter;
|
||||
if (!ch || !markOnNext || markedRead.has(ch.id)) return;
|
||||
markedRead.add(ch.id);
|
||||
gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true }).catch((e) => { markedRead.delete(ch.id); console.error(e); });
|
||||
}
|
||||
|
||||
function showUi() {
|
||||
uiVisible = true;
|
||||
if (hideTimer) clearTimeout(hideTimer);
|
||||
hideTimer = setTimeout(() => uiVisible = false, 3000);
|
||||
}
|
||||
|
||||
// ── Load chapter ──────────────────────────────────────────────────────────────
|
||||
$: if ($activeChapter) {
|
||||
loadChapter($activeChapter.id);
|
||||
}
|
||||
|
||||
async function loadChapter(id: number) {
|
||||
abortCtrl?.abort();
|
||||
const ctrl = new AbortController();
|
||||
abortCtrl = ctrl;
|
||||
loadingId = id;
|
||||
appended = new Set([id]);
|
||||
appending = false;
|
||||
markedRead = new Set();
|
||||
aspectCache.clear();
|
||||
loading = true;
|
||||
error = null;
|
||||
pageGroups = [];
|
||||
pageReady = false;
|
||||
stripChapters = [];
|
||||
visibleChapterId = null;
|
||||
pageUrls.set([]);
|
||||
pageNumber.set(1);
|
||||
|
||||
try {
|
||||
const urls = await fetchPages(id, ctrl.signal);
|
||||
if (ctrl.signal.aborted) return;
|
||||
pageUrls.set(urls);
|
||||
pageReady = true;
|
||||
if (style === "longstrip" && autoNext) {
|
||||
stripChapters = [{ chapterId: id, chapterName: $activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
|
||||
visibleChapterId = id;
|
||||
}
|
||||
loading = false;
|
||||
} catch (e: any) {
|
||||
if (ctrl.signal.aborted) return;
|
||||
error = e instanceof Error ? e.message : String(e);
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Append next chapter ───────────────────────────────────────────────────────
|
||||
function appendNextChapter() {
|
||||
if (appending) return;
|
||||
const lastChunk = stripChapters[stripChapters.length - 1];
|
||||
if (!lastChunk) return;
|
||||
const list = $activeChapterList;
|
||||
const lastIdx = list.findIndex((c) => c.id === lastChunk.chapterId);
|
||||
if (lastIdx < 0 || lastIdx >= list.length - 1) return;
|
||||
const next = list[lastIdx + 1];
|
||||
if (!next || appended.has(next.id)) return;
|
||||
appended.add(next.id);
|
||||
appending = true;
|
||||
fetchPages(next.id)
|
||||
.then((urls) => {
|
||||
urls.forEach((url) => measureAspect(url).catch(() => {}));
|
||||
urls.slice(0, 6).forEach(preloadImage);
|
||||
return urls;
|
||||
})
|
||||
.then((urls) => {
|
||||
if (stripChapters.some((c) => c.chapterId === next.id)) return;
|
||||
const last = stripChapters[stripChapters.length - 1];
|
||||
const start = last ? last.startGlobalIdx + last.urls.length : 0;
|
||||
const MAX_STRIP = 8;
|
||||
if (stripChapters.length >= MAX_STRIP && containerEl) {
|
||||
scrollAnchor = { scrollTop: containerEl.scrollTop, scrollHeight: containerEl.scrollHeight };
|
||||
stripChapters = [...stripChapters.slice(1), { chapterId: next.id, chapterName: next.name, urls, startGlobalIdx: start }];
|
||||
tick().then(() => {
|
||||
if (!scrollAnchor || !containerEl) return;
|
||||
const gained = containerEl.scrollHeight - scrollAnchor.scrollHeight;
|
||||
if (gained < 0) containerEl.scrollTop = Math.max(0, scrollAnchor.scrollTop + gained);
|
||||
scrollAnchor = null;
|
||||
});
|
||||
} else {
|
||||
stripChapters = [...stripChapters, { chapterId: next.id, chapterName: next.name, urls, startGlobalIdx: start }];
|
||||
}
|
||||
appending = false;
|
||||
})
|
||||
.catch(() => { appending = false; });
|
||||
}
|
||||
|
||||
// ── Scroll tracking ───────────────────────────────────────────────────────────
|
||||
function setupScrollTracking() {
|
||||
if (!containerEl || style !== "longstrip") return;
|
||||
const READ_LINE_PCT = 0.20;
|
||||
function onScroll() {
|
||||
const containerTop = containerEl.getBoundingClientRect().top;
|
||||
const readLineY = containerTop + containerEl.clientHeight * READ_LINE_PCT;
|
||||
const imgs = containerEl.querySelectorAll<HTMLElement>("img[data-local-page]");
|
||||
let activeLocalPage: number | null = null;
|
||||
let activeChId: number | null = null;
|
||||
for (const img of imgs) {
|
||||
const rect = img.getBoundingClientRect();
|
||||
if (rect.top <= readLineY) { activeLocalPage = Number(img.dataset.localPage); activeChId = Number(img.dataset.chapter); }
|
||||
else break;
|
||||
}
|
||||
if (activeLocalPage === null && imgs.length > 0) { activeLocalPage = Number(imgs[0].dataset.localPage); activeChId = Number(imgs[0].dataset.chapter); }
|
||||
if (activeLocalPage !== null) pageNumber.set(activeLocalPage);
|
||||
if (activeChId && activeChId !== visibleChapterId) visibleChapterId = activeChId;
|
||||
if ($settings.autoMarkRead && activeLocalPage !== null && activeChId) {
|
||||
const chunk = stripChapters.find((c) => c.chapterId === activeChId);
|
||||
const total = chunk ? chunk.urls.length : $pageUrls.length;
|
||||
if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) {
|
||||
markedRead.add(activeChId);
|
||||
gql(MARK_CHAPTER_READ, { id: activeChId, isRead: true }).catch((e) => { markedRead.delete(activeChId!); console.error(e); });
|
||||
}
|
||||
}
|
||||
if (containerEl.scrollTop + containerEl.clientHeight < containerEl.scrollHeight - 40) return;
|
||||
const last = stripChapters[stripChapters.length - 1];
|
||||
if (last && $settings.autoMarkRead && !markedRead.has(last.chapterId)) {
|
||||
markedRead.add(last.chapterId);
|
||||
gql(MARK_CHAPTER_READ, { id: last.chapterId, isRead: true }).catch(console.error);
|
||||
}
|
||||
}
|
||||
function onScroll80() {
|
||||
const pct = (containerEl.scrollTop + containerEl.clientHeight) / containerEl.scrollHeight;
|
||||
if (pct >= 0.8) appendNextChapter();
|
||||
}
|
||||
containerEl.addEventListener("scroll", onScroll, { passive: true });
|
||||
if (autoNext) containerEl.addEventListener("scroll", onScroll80, { passive: true });
|
||||
onScroll();
|
||||
return () => {
|
||||
containerEl.removeEventListener("scroll", onScroll);
|
||||
containerEl.removeEventListener("scroll", onScroll80);
|
||||
};
|
||||
}
|
||||
|
||||
// ── Navigation ────────────────────────────────────────────────────────────────
|
||||
function advanceGroup(forward: boolean) {
|
||||
if (!pageGroups.length) return;
|
||||
const gi = pageGroups.findIndex((g) => g.includes($pageNumber));
|
||||
if (forward) {
|
||||
if (gi < pageGroups.length - 1) pageNumber.set(pageGroups[gi + 1][0]);
|
||||
else if (adjacent.next) { pageNumber.set(1); openReader(adjacent.next, $activeChapterList); }
|
||||
else closeReader();
|
||||
} else {
|
||||
if (gi > 0) pageNumber.set(pageGroups[gi - 1][0]);
|
||||
else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList);
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
if (loading) return;
|
||||
if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, $activeChapterList); } return; }
|
||||
if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
|
||||
if (!$pageUrls.length) return;
|
||||
if ($pageNumber < lastPage) { decodeImage($pageUrls[$pageNumber]).then(() => pageNumber.set($pageNumber + 1)); }
|
||||
else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber.set(1); openReader(adjacent.next, $activeChapterList); }
|
||||
else closeReader();
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (loading) return;
|
||||
if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, $activeChapterList); return; }
|
||||
if (style === "double" && pageGroups.length) { advanceGroup(false); return; }
|
||||
if (!$pageUrls.length) return;
|
||||
if ($pageNumber > 1) { decodeImage($pageUrls[$pageNumber - 2]).then(() => pageNumber.set($pageNumber - 1)); }
|
||||
else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList);
|
||||
}
|
||||
|
||||
$: goNext = rtl ? goBack : goForward;
|
||||
$: goPrev = rtl ? goForward : goBack;
|
||||
|
||||
function cycleStyle() {
|
||||
const opts = ["single", "longstrip"] as const;
|
||||
const cur = style === "double" ? "single" : style;
|
||||
updateSettings({ pageStyle: opts[(opts.indexOf(cur as typeof opts[number]) + 1) % opts.length] });
|
||||
}
|
||||
|
||||
function cycleFit() {
|
||||
const opts: FitMode[] = ["width", "height", "screen", "original"];
|
||||
updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
|
||||
}
|
||||
|
||||
// ── History + auto-mark (non-longstrip) ──────────────────────────────────────
|
||||
$: if ($activeChapter && lastPage && $activeManga) {
|
||||
addHistory({
|
||||
mangaId: $activeManga.id, mangaTitle: $activeManga.title,
|
||||
thumbnailUrl: $activeManga.thumbnailUrl, chapterId: $activeChapter.id,
|
||||
chapterName: $activeChapter.name, pageNumber: $pageNumber, readAt: Date.now(),
|
||||
});
|
||||
if (style !== "longstrip" && $settings.autoMarkRead && $pageNumber === lastPage) {
|
||||
if (!markedRead.has($activeChapter.id)) {
|
||||
markedRead.add($activeChapter.id);
|
||||
gql(MARK_CHAPTER_READ, { id: $activeChapter.id, isRead: true }).catch(console.error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Double-page grouping ──────────────────────────────────────────────────────
|
||||
$: if (style === "double" && $pageUrls.length) {
|
||||
let cancelled = false;
|
||||
const snap = $pageUrls;
|
||||
Promise.all(snap.map(measureAspect)).then((aspects) => {
|
||||
if (cancelled || snap !== $pageUrls) return;
|
||||
const offset = $settings.offsetDoubleSpreads;
|
||||
const groups: number[][] = [[1]];
|
||||
if (offset) groups.push([2]);
|
||||
let i = offset ? 3 : 2;
|
||||
while (i <= snap.length) {
|
||||
const a = aspects[i - 1], nextA = aspects[i] ?? 0;
|
||||
if (a > 1.2 || i === snap.length || nextA > 1.2) { groups.push([i++]); }
|
||||
else { groups.push(rtl ? [i + 1, i] : [i, i + 1]); i += 2; }
|
||||
}
|
||||
pageGroups = groups;
|
||||
});
|
||||
} else { pageGroups = []; }
|
||||
|
||||
// ── Preload pages ─────────────────────────────────────────────────────────────
|
||||
$: {
|
||||
const ahead = $settings.preloadPages ?? 3;
|
||||
for (let i = 1; i <= ahead; i++) { const url = $pageUrls[$pageNumber - 1 + i]; if (url) decodeImage(url); }
|
||||
const behind = $pageUrls[$pageNumber - 2];
|
||||
if (behind) preloadImage(behind);
|
||||
}
|
||||
|
||||
// ── Prefetch next chapters ────────────────────────────────────────────────────
|
||||
$: if ($activeChapter && $activeChapterList.length) {
|
||||
const idx = $activeChapterList.findIndex((c) => c.id === $activeChapter!.id);
|
||||
if (idx >= 0) {
|
||||
const toPin: number[] = [$activeChapter.id];
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const entry = $activeChapterList[idx + i];
|
||||
if (!entry) break;
|
||||
toPin.push(entry.id);
|
||||
fetchPages(entry.id).then((urls) => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); }).catch(() => {});
|
||||
}
|
||||
if (idx > 0) { const prev = $activeChapterList[idx - 1]; toPin.push(prev.id); fetchPages(prev.id).catch(() => {}); }
|
||||
cacheEvict(new Set(toPin));
|
||||
}
|
||||
}
|
||||
|
||||
// ── Rebuild strip on autoNext toggle ─────────────────────────────────────────
|
||||
$: if (style === "longstrip" && $pageUrls.length && $activeChapter) {
|
||||
appended = new Set([$activeChapter.id]);
|
||||
appending = false;
|
||||
if (autoNext) {
|
||||
stripChapters = [{ chapterId: $activeChapter.id, chapterName: $activeChapter.name, urls: $pageUrls, startGlobalIdx: 0 }];
|
||||
visibleChapterId = $activeChapter.id;
|
||||
} else {
|
||||
stripChapters = [];
|
||||
visibleChapterId = null;
|
||||
}
|
||||
if (containerEl) containerEl.scrollTop = 0;
|
||||
}
|
||||
|
||||
// ── Scroll to top on chapter/page change ─────────────────────────────────────
|
||||
$: if ($activeChapter?.id && containerEl) containerEl.scrollTop = 0;
|
||||
$: if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0;
|
||||
|
||||
// ── Ctrl+scroll zoom ─────────────────────────────────────────────────────────
|
||||
function onWheel(e: WheelEvent) {
|
||||
if (!e.ctrlKey) return;
|
||||
e.preventDefault();
|
||||
updateSettings({ maxPageWidth: Math.min(2400, Math.max(200, maxW + (e.deltaY < 0 ? 50 : -50))) });
|
||||
}
|
||||
|
||||
// ── Keybinds ──────────────────────────────────────────────────────────────────
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if ((e.target as HTMLElement).tagName === "INPUT") return;
|
||||
const kb = $settings.keybinds ?? DEFAULT_KEYBINDS;
|
||||
const mW = $settings.maxPageWidth ?? 900;
|
||||
const r = $settings.readingDirection === "rtl";
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
if (zoomOpen) { zoomOpen = false; return; }
|
||||
if (dlOpen) { dlOpen = false; return; }
|
||||
closeReader(); return;
|
||||
}
|
||||
if (e.ctrlKey && (e.key === "=" || e.key === "+")) { e.preventDefault(); updateSettings({ maxPageWidth: Math.min(2400, mW + 100) }); return; }
|
||||
if (e.ctrlKey && e.key === "-") { e.preventDefault(); updateSettings({ maxPageWidth: Math.max(200, mW - 100) }); return; }
|
||||
if (e.ctrlKey && e.key === "0") { e.preventDefault(); updateSettings({ maxPageWidth: 900 }); return; }
|
||||
if (matchesKeybind(e, kb.exitReader)) { e.preventDefault(); closeReader(); }
|
||||
else if (matchesKeybind(e, kb.pageRight)) { e.preventDefault(); goForward(); }
|
||||
else if (matchesKeybind(e, kb.pageLeft)) { e.preventDefault(); goBack(); }
|
||||
else if (matchesKeybind(e, kb.firstPage)) { e.preventDefault(); pageNumber.set(1); }
|
||||
else if (matchesKeybind(e, kb.lastPage)) { e.preventDefault(); pageNumber.set(lastPage); }
|
||||
else if (matchesKeybind(e, kb.chapterRight)) {
|
||||
e.preventDefault();
|
||||
const list = $activeChapterList, idx = list.findIndex((c) => c.id === loadingId);
|
||||
const next = idx >= 0 && idx < list.length - 1 ? list[idx + 1] : null;
|
||||
if (next) { maybeMarkCurrentRead(); openReader(next, list); }
|
||||
}
|
||||
else if (matchesKeybind(e, kb.chapterLeft)) {
|
||||
e.preventDefault();
|
||||
const list = $activeChapterList, idx = list.findIndex((c) => c.id === loadingId);
|
||||
const prev = idx > 0 ? list[idx - 1] : null;
|
||||
if (prev) openReader(prev, list);
|
||||
}
|
||||
else if (matchesKeybind(e, kb.togglePageStyle)) { e.preventDefault(); cycleStyle(); }
|
||||
else if (matchesKeybind(e, kb.toggleReadingDirection)) { e.preventDefault(); updateSettings({ readingDirection: r ? "ltr" : "rtl" }); }
|
||||
else if (matchesKeybind(e, kb.toggleFullscreen)) { e.preventDefault(); toggleFullscreen().catch(console.error); }
|
||||
else if (matchesKeybind(e, kb.openSettings)) { e.preventDefault(); settingsOpen.set(true); }
|
||||
}
|
||||
|
||||
function handleTap(e: MouseEvent) {
|
||||
if (style === "longstrip") return;
|
||||
const x = e.clientX / window.innerWidth;
|
||||
if (!rtl) { if (x > 0.6) goForward(); else if (x < 0.4) goBack(); }
|
||||
else { if (x < 0.4) goForward(); else if (x > 0.6) goBack(); }
|
||||
}
|
||||
|
||||
async function runDl(fn: () => Promise<unknown>, body: string) {
|
||||
dlBusy = true;
|
||||
try {
|
||||
await fn();
|
||||
} catch (e: any) { console.error(e); }
|
||||
dlBusy = false; dlOpen = false;
|
||||
}
|
||||
|
||||
let scrollCleanup: (() => void) | undefined;
|
||||
|
||||
onMount(() => {
|
||||
showUi();
|
||||
window.addEventListener("keydown", onKey);
|
||||
window.addEventListener("wheel", onWheel, { passive: false });
|
||||
containerEl?.focus({ preventScroll: true });
|
||||
scrollCleanup = setupScrollTracking();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
abortCtrl?.abort();
|
||||
if (hideTimer) clearTimeout(hideTimer);
|
||||
window.removeEventListener("keydown", onKey);
|
||||
window.removeEventListener("wheel", onWheel);
|
||||
scrollCleanup?.();
|
||||
});
|
||||
|
||||
$: stripToRender = style === "longstrip"
|
||||
? (autoNext && stripChapters.length > 0
|
||||
? stripChapters
|
||||
: [{ chapterId: $activeChapter?.id ?? 0, chapterName: $activeChapter?.name ?? "", urls: $pageUrls, startGlobalIdx: 0 }])
|
||||
: [];
|
||||
|
||||
$: currentGroup = style === "double" && pageGroups.length
|
||||
? (pageGroups.find((g) => g.includes($pageNumber)) ?? [$pageNumber])
|
||||
: [$pageNumber];
|
||||
</script>
|
||||
|
||||
<div class="root" on:mousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
|
||||
|
||||
<!-- Topbar -->
|
||||
<div class="topbar" class:hidden={!uiVisible}>
|
||||
<button class="icon-btn" on:click={closeReader} title="Close reader"><X size={15} weight="light" /></button>
|
||||
<button class="icon-btn" on:click={() => { if (adjacent.prev) { maybeMarkCurrentRead(); openReader(adjacent.prev, $activeChapterList); } }} disabled={!adjacent.prev}>
|
||||
<CaretLeft size={14} weight="light" />
|
||||
</button>
|
||||
<span class="ch-label">
|
||||
<span class="ch-title">{$activeManga?.title}</span>
|
||||
<span class="ch-sep">/</span>
|
||||
<span>{displayChapter?.name}</span>
|
||||
</span>
|
||||
<span class="page-label">{$pageNumber} / {visibleChunkLastPage || "…"}</span>
|
||||
<button class="icon-btn" on:click={() => { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, $activeChapterList); } }} disabled={!adjacent.next}>
|
||||
<CaretRight size={14} weight="light" />
|
||||
</button>
|
||||
<div class="top-sep"></div>
|
||||
<button class="mode-btn" on:click={cycleFit}>
|
||||
{#if fit === "width"}<ArrowsLeftRight size={14} weight="light" />
|
||||
{:else if fit === "height"}<ArrowsVertical size={14} weight="light" />
|
||||
{:else if fit === "screen"}<ArrowsIn size={14} weight="light" />
|
||||
{:else}<ArrowsOut size={14} weight="light" />{/if}
|
||||
<span class="mode-label">{fitLabel}</span>
|
||||
</button>
|
||||
<div class="zoom-wrap">
|
||||
<button class="zoom-btn" on:click={() => zoomOpen = !zoomOpen}>{Math.round((maxW / 900) * 100)}%</button>
|
||||
{#if zoomOpen}
|
||||
<div class="zoom-popover">
|
||||
<input type="range" class="zoom-slider" min={200} max={2400} step={50} value={maxW}
|
||||
on:input={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} />
|
||||
<button class="zoom-reset" on:click={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button class="mode-btn" class:active={rtl} on:click={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}>
|
||||
<ArrowsLeftRight size={14} weight="light" /><span class="mode-label">{rtl ? "RTL" : "LTR"}</span>
|
||||
</button>
|
||||
<button class="mode-btn" on:click={cycleStyle}>
|
||||
{#if style === "single"}<Square size={14} weight="light" />{:else}<Rows size={14} weight="light" />{/if}
|
||||
<span class="mode-label">{styleLabel}</span>
|
||||
</button>
|
||||
{#if style !== "single"}
|
||||
<button class="mode-btn" class:active={$settings.pageGap} on:click={() => updateSettings({ pageGap: !$settings.pageGap })}>
|
||||
<span class="mode-label">Gap</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if style === "longstrip"}
|
||||
<button class="mode-btn" class:active={autoNext} on:click={() => updateSettings({ autoNextChapter: !autoNext })}>
|
||||
<span class="mode-label">Auto</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if !autoNext}
|
||||
<button class="mode-btn" class:active={markOnNext} on:click={() => updateSettings({ markReadOnNext: !markOnNext })}>
|
||||
<span class="mode-label">Mk.Read</span>
|
||||
</button>
|
||||
{/if}
|
||||
<button class="mode-btn" on:click={() => dlOpen = true}>
|
||||
<Download size={14} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Viewer -->
|
||||
<div
|
||||
bind:this={containerEl}
|
||||
class="viewer"
|
||||
class:strip={style === "longstrip"}
|
||||
style="--max-page-width:{maxW}px"
|
||||
tabindex="-1"
|
||||
on:click={handleTap}
|
||||
on:wheel={(e) => { if (e.ctrlKey) e.preventDefault(); }}
|
||||
on:keydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }}
|
||||
>
|
||||
{#if loading}
|
||||
<div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div class="center-overlay"><p class="error-msg">{error}</p></div>
|
||||
{/if}
|
||||
|
||||
{#if style === "longstrip"}
|
||||
{#each stripToRender as chunk}
|
||||
{#each chunk.urls as url, i}
|
||||
<img
|
||||
src={url}
|
||||
alt="{chunk.chapterName} – Page {i + 1}"
|
||||
data-local-page={i + 1}
|
||||
data-chapter={chunk.chapterId}
|
||||
data-total={chunk.urls.length}
|
||||
class="{imgCls}{$settings.pageGap ? ' strip-gap' : ''}"
|
||||
loading={i < 3 ? "eager" : "lazy"}
|
||||
decoding="async"
|
||||
height="1000"
|
||||
/>
|
||||
{/each}
|
||||
{/each}
|
||||
<div bind:this={sentinelEl} style="height:1px;flex-shrink:0;overflow-anchor:none"></div>
|
||||
{:else if pageReady}
|
||||
{#if style === "double" && pageGroups.length}
|
||||
<div class="double-wrap">
|
||||
{#each currentGroup as pg}
|
||||
<img src={$pageUrls[pg - 1]} alt="Page {pg}" class="{imgCls} page-half {pg === currentGroup[0] ? 'gap-left' : 'gap-right'}" decoding="async" />
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<img src={$pageUrls[$pageNumber - 1]} alt="Page {$pageNumber}" class={imgCls} decoding="async" style="transition:opacity 0.1s ease" />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Bottom nav -->
|
||||
<div class="bottombar" class:hidden={!uiVisible}>
|
||||
<button class="nav-btn" on:click={goPrev}
|
||||
disabled={loading || (style === "longstrip" ? !adjacent.prev : ($pageNumber === 1 && !adjacent.prev))}>
|
||||
<ArrowLeft size={13} weight="light" />
|
||||
</button>
|
||||
<button class="nav-btn" on:click={goNext}
|
||||
disabled={loading || (style === "longstrip" ? !adjacent.next : ($pageNumber === lastPage && !adjacent.next))}>
|
||||
<ArrowRight size={13} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Download modal -->
|
||||
{#if dlOpen && $activeChapter}
|
||||
{@const queueable = adjacent.remaining.filter((c) => !c.isDownloaded)}
|
||||
<div class="dl-backdrop" on:click={() => dlOpen = false}>
|
||||
<div class="dl-modal" on:click|stopPropagation>
|
||||
<p class="dl-title">Download</p>
|
||||
<button class="dl-option" disabled={dlBusy || !!$activeChapter.isDownloaded}
|
||||
on:click={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: $activeChapter!.id }), $activeChapter!.name)}>
|
||||
This chapter
|
||||
<span class="dl-sub">{$activeChapter.isDownloaded ? "Already downloaded" : $activeChapter.name}</span>
|
||||
</button>
|
||||
<div class="dl-row">
|
||||
<button class="dl-option" disabled={dlBusy || queueable.length === 0}
|
||||
on:click={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.slice(0, nextN).map((c) => c.id) }), `${Math.min(nextN, queueable.length)} chapters queued`)}>
|
||||
Next chapters
|
||||
<span class="dl-sub">{Math.min(nextN, queueable.length)} not yet downloaded</span>
|
||||
</button>
|
||||
<div class="dl-stepper" on:click|stopPropagation>
|
||||
<button class="dl-step-btn" on:click={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button>
|
||||
<span class="dl-step-val">{nextN}</span>
|
||||
<button class="dl-step-btn" on:click={() => nextN = Math.min(queueable.length || 1, nextN + 1)} disabled={nextN >= queueable.length}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="dl-option" disabled={dlBusy || queueable.length === 0}
|
||||
on:click={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.map((c) => c.id) }), `${queueable.length} chapters queued`)}>
|
||||
All remaining
|
||||
<span class="dl-sub">{queueable.length} not yet downloaded</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
position: fixed; inset: 0; background: #000;
|
||||
display: flex; flex-direction: column;
|
||||
z-index: var(--z-reader);
|
||||
transform: translateZ(0); will-change: transform;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: var(--sp-1);
|
||||
padding: 0 var(--sp-3); height: 40px;
|
||||
background: var(--bg-void); border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0; position: relative; z-index: 2;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.topbar.hidden, .bottombar.hidden { opacity: 0; pointer-events: none; }
|
||||
|
||||
.icon-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px; border-radius: var(--radius-sm);
|
||||
color: var(--text-muted); flex-shrink: 0;
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.icon-btn:disabled { opacity: 0.2; cursor: default; }
|
||||
|
||||
.ch-label { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
|
||||
.ch-sep { color: var(--text-faint); }
|
||||
.page-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
|
||||
.top-sep { width: 1px; height: 16px; background: var(--border-dim); flex-shrink: 0; margin: 0 var(--sp-1); }
|
||||
|
||||
.mode-btn { display: flex; align-items: center; gap: 4px; padding: 4px var(--sp-2); border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); transition: color var(--t-base), background var(--t-base); }
|
||||
.mode-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.mode-btn.active { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.mode-label { text-transform: capitalize; }
|
||||
|
||||
.zoom-wrap { position: relative; flex-shrink: 0; }
|
||||
.zoom-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); padding: 4px var(--sp-2); border-radius: var(--radius-sm); min-width: 36px; text-align: center; transition: color var(--t-base), background var(--t-base); }
|
||||
.zoom-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
|
||||
.zoom-popover { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; min-width: 160px; animation: scaleIn 0.1s ease both; transform-origin: top center; }
|
||||
.zoom-slider { width: 140px; height: 3px; appearance: none; -webkit-appearance: none; background: var(--border-strong); border-radius: 2px; outline: none; cursor: pointer; }
|
||||
.zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fg); cursor: pointer; }
|
||||
.zoom-reset { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); padding: 2px var(--sp-2); border-radius: var(--radius-sm); transition: color var(--t-base), background var(--t-base); }
|
||||
.zoom-reset:hover { color: var(--text-primary); background: var(--bg-overlay); }
|
||||
|
||||
.viewer { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; position: relative; }
|
||||
.viewer.strip { justify-content: flex-start; padding: var(--sp-4) 0; overflow-anchor: auto; }
|
||||
.viewer:focus { outline: none; }
|
||||
|
||||
.img { display: block; user-select: none; image-rendering: auto; }
|
||||
.img.optimize-contrast { image-rendering: -webkit-optimize-contrast; }
|
||||
.fit-width { max-width: var(--max-page-width); width: 100%; height: auto; }
|
||||
.fit-height { max-height: calc(100vh - 80px); width: auto; max-width: 100%; height: auto; }
|
||||
.fit-screen { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; height: auto; }
|
||||
.fit-original { max-width: none; width: auto; height: auto; }
|
||||
.strip-gap { margin-bottom: 8px; }
|
||||
|
||||
.double-wrap { display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--max-page-width) * 2); width: 100%; }
|
||||
.page-half { flex: 1; min-width: 0; object-fit: contain; }
|
||||
.gap-left { margin-right: 2px; }
|
||||
.gap-right { margin-left: 2px; }
|
||||
|
||||
.center-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.error-msg { color: var(--color-error); font-size: var(--text-base); }
|
||||
|
||||
.bottombar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-3); border-top: 1px solid var(--border-dim); background: var(--bg-void); flex-shrink: 0; transition: opacity 0.25s ease; }
|
||||
.nav-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); transition: background var(--t-base), color var(--t-base); }
|
||||
.nav-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
|
||||
.nav-btn:disabled { opacity: 0.25; cursor: default; }
|
||||
|
||||
.dl-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-reader) + 10); display: flex; align-items: flex-start; justify-content: flex-end; padding: 48px var(--sp-4) 0; }
|
||||
.dl-modal { background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-3); min-width: 210px; display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.6); animation: scaleIn 0.12s ease both; transform-origin: top right; }
|
||||
.dl-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 2px var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-dim); margin-bottom: var(--sp-1); }
|
||||
.dl-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 7px var(--sp-3); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-secondary); background: none; border: none; cursor: pointer; text-align: left; transition: background var(--t-fast), color var(--t-fast); }
|
||||
.dl-option:hover:not(:disabled) { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.dl-option:disabled { opacity: 0.3; cursor: default; }
|
||||
.dl-sub { font-size: var(--text-xs); color: var(--text-faint); }
|
||||
.dl-row { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
.dl-stepper { display: flex; align-items: center; gap: 2px; background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
|
||||
.dl-step-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 28px; font-size: var(--text-base); color: var(--text-muted); background: none; border: none; cursor: pointer; line-height: 1; transition: color var(--t-fast), background var(--t-fast); }
|
||||
.dl-step-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.dl-step-btn:disabled { opacity: 0.25; cursor: default; }
|
||||
.dl-step-val { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); min-width: 24px; text-align: center; letter-spacing: var(--tracking-wide); }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user