mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 17:29:55 -05:00
[BETA] QOL Updates (Reader AutoScroll WIP)
This commit is contained in:
Youwes09
@@ -0,0 +1,22 @@
|
||||
Todo:
|
||||
1. Check all Keybind Toggles
|
||||
2. Update ReadME with Comprehensive Feature List
|
||||
3. Explore Manga Upscaler
|
||||
4. Add Zoom-Slider for Zoom in Manga Reader
|
||||
|
||||
|
||||
Bugs:
|
||||
2. Fix Auto-scroll between chapters & state when moving chapters (Implemented but not Fluidic)
|
||||
3. Patch Chapters to Grid View
|
||||
5. Fix Keybind Toggles
|
||||
|
||||
Features:
|
||||
1. Frecency based Manga Suggestions
|
||||
2. Proper Explore Tab
|
||||
|
||||
|
||||
Big Revisions:
|
||||
1. Anime & Novel Support
|
||||
|
||||
Test:
|
||||
1. URL & Extension Additions
|
||||
Generated
-17
@@ -120,29 +120,12 @@
|
||||
"type": "github"
|
||||
}
|
||||
},
|
||||
"nixpkgs-stable": {
|
||||
"locked": {
|
||||
"lastModified": 1751274312,
|
||||
"narHash": "sha256-/bVBlRpECLVzjV19t5KMdMFWSwKLtb5RyXdjz3LJT+g=",
|
||||
"owner": "NixOS",
|
||||
"repo": "nixpkgs",
|
||||
"rev": "50ab793786d9de88ee30ec4e4c24fb4236fc2674",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"owner": "NixOS",
|
||||
"ref": "nixos-24.11",
|
||||
"repo": "nixpkgs",
|
||||
"type": "github"
|
||||
}
|
||||
},
|
||||
"root": {
|
||||
"inputs": {
|
||||
"crane": "crane",
|
||||
"flake-parts": "flake-parts",
|
||||
"nix-appimage": "nix-appimage",
|
||||
"nixpkgs": "nixpkgs",
|
||||
"nixpkgs-stable": "nixpkgs-stable",
|
||||
"rust-overlay": "rust-overlay"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -110,18 +110,14 @@
|
||||
cargoToml = ./src-tauri/Cargo.toml;
|
||||
cargoLock = ./src-tauri/Cargo.lock;
|
||||
strictDeps = true;
|
||||
|
||||
buildInputs = runtimeLibs;
|
||||
|
||||
nativeBuildInputs = with pkgs; [
|
||||
pkg-config
|
||||
wrapGAppsHook3
|
||||
];
|
||||
|
||||
preBuild = ''
|
||||
cp -r ${frontend} ../dist
|
||||
'';
|
||||
|
||||
WEBKIT_DISABLE_COMPOSITING_MODE = "1";
|
||||
};
|
||||
|
||||
@@ -129,9 +125,7 @@
|
||||
|
||||
moku = craneLib.buildPackage (commonArgs // {
|
||||
inherit cargoArtifacts;
|
||||
|
||||
meta.mainProgram = "moku";
|
||||
|
||||
postInstall = ''
|
||||
wrapProgram $out/bin/moku \
|
||||
--prefix XDG_DATA_DIRS : "${lib.makeSearchPath "share/gsettings-schemas" [
|
||||
@@ -153,7 +147,6 @@
|
||||
|
||||
devShells.default = pkgs.mkShell {
|
||||
buildInputs = runtimeLibs;
|
||||
|
||||
nativeBuildInputs = with pkgs; [
|
||||
rustToolchain
|
||||
pkg-config
|
||||
@@ -163,7 +156,6 @@
|
||||
suwayomi-server
|
||||
xdg-utils
|
||||
];
|
||||
|
||||
shellHook = ''
|
||||
export WEBKIT_DISABLE_COMPOSITING_MODE=1
|
||||
export APPIMAGE_EXTRACT_AND_RUN=1
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 577 B |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
@@ -1,5 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
<background android:drawable="@color/ic_launcher_background"/>
|
||||
</adaptive-icon>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,4 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<color name="ic_launcher_background">#fff</color>
|
||||
</resources>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 374 B |
Binary file not shown.
|
Before Width: | Height: | Size: 946 B |
Binary file not shown.
|
Before Width: | Height: | Size: 946 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 528 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 946 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
@@ -2,5 +2,12 @@
|
||||
"build": {
|
||||
"devUrl": "http://localhost:1420",
|
||||
"beforeDevCommand": "pnpm dev"
|
||||
},
|
||||
"app": {
|
||||
"windows": [
|
||||
{
|
||||
"devtools": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -51,13 +51,20 @@ export default function ContextMenu({ x, y, items, onClose }: Props) {
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
// Adjust position so menu doesn't clip outside viewport
|
||||
// Adjust position so menu doesn't clip outside viewport.
|
||||
// Compensate for CSS zoom (applied via document.documentElement.style.zoom)
|
||||
// because clientX/Y are pre-zoom pixels while `position:fixed` is post-zoom.
|
||||
const style = useCallback(() => {
|
||||
const menuW = 200;
|
||||
const menuH = items.length * 32;
|
||||
const left = x + menuW > window.innerWidth ? x - menuW : x;
|
||||
const top = y + menuH > window.innerHeight ? y - menuH : y;
|
||||
return { left, top };
|
||||
const zoom = parseFloat(document.documentElement.style.zoom || "1") / 100 || 1;
|
||||
const scaledX = x / zoom;
|
||||
const scaledY = y / zoom;
|
||||
const menuW = 200;
|
||||
const menuH = items.length * 36;
|
||||
const vw = window.innerWidth / zoom;
|
||||
const vh = window.innerHeight / zoom;
|
||||
const left = scaledX + menuW > vw ? scaledX - menuW : scaledX;
|
||||
const top = scaledY + menuH > vh ? scaledY - menuH : scaledY;
|
||||
return { left: Math.max(4, left), top: Math.max(4, top) };
|
||||
}, [x, y, items.length]);
|
||||
|
||||
return createPortal(
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useEffect, useState, useMemo, useCallback, memo } from "react";
|
||||
import { MagnifyingGlass, Books, DownloadSimple, X } from "@phosphor-icons/react";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
import { GET_LIBRARY, GET_ALL_MANGA } from "../../lib/queries";
|
||||
import { GET_LIBRARY, GET_ALL_MANGA, UPDATE_MANGA } from "../../lib/queries";
|
||||
import { useStore } from "../../store";
|
||||
import type { LibraryFilter } from "../../store";
|
||||
import type { Manga } from "../../lib/types";
|
||||
import ContextMenu, { type ContextMenuEntry } from "../context/ContextMenu";
|
||||
import s from "./Library.module.css";
|
||||
|
||||
const INITIAL_PAGE_SIZE = 48;
|
||||
@@ -14,14 +15,16 @@ const PAGE_INCREMENT = 48;
|
||||
const MangaCard = memo(function MangaCard({
|
||||
manga,
|
||||
onClick,
|
||||
onContextMenu,
|
||||
cropCovers,
|
||||
}: {
|
||||
manga: Manga;
|
||||
onClick: () => void;
|
||||
onContextMenu: (e: React.MouseEvent) => void;
|
||||
cropCovers: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button className={s.card} onClick={onClick}>
|
||||
<button className={s.card} onClick={onClick} onContextMenu={onContextMenu}>
|
||||
<div className={s.coverWrap}>
|
||||
<img
|
||||
src={thumbUrl(manga.thumbnailUrl)}
|
||||
@@ -46,6 +49,7 @@ export default function Library() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [visibleCount, setVisibleCount] = useState(INITIAL_PAGE_SIZE);
|
||||
const [ctx, setCtx] = useState<{ x: number; y: number; manga: Manga } | null>(null);
|
||||
|
||||
const setActiveManga = useStore((state) => state.setActiveManga);
|
||||
const libraryFilter = useStore((state) => state.libraryFilter);
|
||||
@@ -99,6 +103,37 @@ export default function Library() {
|
||||
[setActiveManga]
|
||||
);
|
||||
|
||||
async function removeFromLibrary(manga: Manga) {
|
||||
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
|
||||
setAllManga((prev) => prev.map((m) => m.id === manga.id ? { ...m, inLibrary: false } : m));
|
||||
}
|
||||
|
||||
function openCtx(e: React.MouseEvent, m: Manga) {
|
||||
e.preventDefault();
|
||||
const menuW = 200;
|
||||
const menuH = 96;
|
||||
const x = Math.min(e.clientX, window.innerWidth - menuW - 8);
|
||||
const y = Math.min(e.clientY, window.innerHeight - menuH - 8);
|
||||
setCtx({ x, y, manga: m });
|
||||
}
|
||||
|
||||
function buildCtxItems(m: Manga): ContextMenuEntry[] {
|
||||
return [
|
||||
{
|
||||
label: "Open",
|
||||
onClick: () => setActiveManga(m),
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: m.inLibrary ? "Remove from library" : "Add to library",
|
||||
danger: m.inLibrary,
|
||||
onClick: () => m.inLibrary ? removeFromLibrary(m) : gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
|
||||
.then(() => setAllManga((prev) => prev.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x)))
|
||||
.catch(console.error),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// All genres present in current library
|
||||
const allTags = useMemo(() => {
|
||||
const tagSet = new Set<string>();
|
||||
@@ -208,6 +243,7 @@ export default function Library() {
|
||||
key={m.id}
|
||||
manga={m}
|
||||
onClick={handleCardClick(m)}
|
||||
onContextMenu={(e) => openCtx(e, m)}
|
||||
cropCovers={settings.libraryCropCovers}
|
||||
/>
|
||||
))}
|
||||
@@ -225,6 +261,14 @@ export default function Library() {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{ctx && (
|
||||
<ContextMenu
|
||||
x={ctx.x}
|
||||
y={ctx.y}
|
||||
items={buildCtxItems(ctx.manga)}
|
||||
onClose={() => setCtx(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,12 +6,23 @@
|
||||
transform: translateZ(0); will-change: transform;
|
||||
}
|
||||
|
||||
/* ── UI autohide ── */
|
||||
.uiHidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.topbar, .bottombar {
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
/* ── Topbar ── */
|
||||
.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; overflow: hidden;
|
||||
flex-shrink: 0; overflow: visible;
|
||||
position: relative; z-index: 2;
|
||||
}
|
||||
|
||||
.iconBtn {
|
||||
@@ -55,15 +66,61 @@
|
||||
.modeBtnActive:hover { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.modeBtnLabel { text-transform: capitalize; }
|
||||
|
||||
/* ── Zoom ── */
|
||||
.zoomWrap {
|
||||
position: relative; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.zoomBtn {
|
||||
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);
|
||||
flex-shrink: 0; min-width: 36px; text-align: center;
|
||||
min-width: 36px; text-align: center;
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.zoomBtn:hover { color: var(--text-secondary); background: var(--bg-raised); }
|
||||
|
||||
.zoomPopover {
|
||||
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;
|
||||
}
|
||||
|
||||
.zoomSlider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 140px; height: 3px;
|
||||
background: var(--border-strong);
|
||||
border-radius: 2px; outline: none; cursor: pointer;
|
||||
}
|
||||
.zoomSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.zoomSlider::-moz-range-thumb {
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%; border: none;
|
||||
background: var(--accent-fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zoomResetBtn {
|
||||
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);
|
||||
}
|
||||
.zoomResetBtn:hover { color: var(--text-primary); background: var(--bg-overlay); }
|
||||
|
||||
/* ── Viewer ── */
|
||||
.viewer {
|
||||
flex: 1; overflow-y: auto; overflow-x: hidden;
|
||||
@@ -163,11 +220,26 @@
|
||||
|
||||
.dlRow { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
|
||||
.dlInput {
|
||||
width: 48px; padding: 4px var(--sp-2);
|
||||
.dlStepper {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
background: var(--bg-overlay); border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-sm); color: var(--text-secondary);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
text-align: center; outline: none;
|
||||
border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0;
|
||||
}
|
||||
.dlInput:focus { border-color: var(--border-focus); }
|
||||
|
||||
.dlStepBtn {
|
||||
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);
|
||||
}
|
||||
.dlStepBtn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.dlStepBtn:disabled { opacity: 0.25; cursor: default; }
|
||||
|
||||
.dlStepVal {
|
||||
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);
|
||||
}
|
||||
/* Viewer focus — suppress outline since we're handling keys ourselves */
|
||||
.viewer:focus { outline: none; }
|
||||
+245
-111
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useRef, useCallback, useState, useMemo } from "react";
|
||||
import {
|
||||
X, CaretLeft, CaretRight, ArrowLeft, ArrowRight,
|
||||
Square, Columns, Rows, Download, ArrowsLeftRight,
|
||||
Square, Rows, Download, ArrowsLeftRight,
|
||||
ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch,
|
||||
} from "@phosphor-icons/react";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
@@ -17,7 +17,6 @@ function preloadImage(url: string) {
|
||||
const img = new Image(); img.src = url;
|
||||
}
|
||||
|
||||
// Returns aspect ratio once image loads; wide (>1.2 w:h) = likely double spread
|
||||
function measureAspect(url: string): Promise<number> {
|
||||
return new Promise((res) => {
|
||||
const img = new Image();
|
||||
@@ -64,10 +63,15 @@ function DownloadModal({
|
||||
Next chapters
|
||||
<span className={s.dlSub}>{Math.min(nextN, remaining.length)} queued</span>
|
||||
</button>
|
||||
<input type="number" className={s.dlInput} min={1}
|
||||
max={remaining.length || 1} value={nextN}
|
||||
onChange={(e) => setNextN(Math.max(1, Number(e.target.value)))}
|
||||
onClick={(e) => e.stopPropagation()} />
|
||||
<div className={s.dlStepper} onClick={(e) => e.stopPropagation()}>
|
||||
<button className={s.dlStepBtn}
|
||||
onClick={() => setNextN((n) => Math.max(1, n - 1))}
|
||||
disabled={nextN <= 1}>−</button>
|
||||
<span className={s.dlStepVal}>{nextN}</span>
|
||||
<button className={s.dlStepBtn}
|
||||
onClick={() => setNextN((n) => Math.min(remaining.length || 1, n + 1))}
|
||||
disabled={nextN >= remaining.length}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<button className={s.dlOption} disabled={busy || !remaining.length}
|
||||
onClick={() => run(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, {
|
||||
@@ -81,17 +85,61 @@ function DownloadModal({
|
||||
);
|
||||
}
|
||||
|
||||
// ── Zoom slider popover ───────────────────────────────────────────────────────
|
||||
function ZoomPopover({
|
||||
value,
|
||||
onChange,
|
||||
onReset,
|
||||
onClose,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
onReset: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
|
||||
};
|
||||
document.addEventListener("mousedown", handler);
|
||||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div className={s.zoomPopover} ref={ref}>
|
||||
<input
|
||||
type="range"
|
||||
className={s.zoomSlider}
|
||||
min={200}
|
||||
max={2400}
|
||||
step={50}
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
/>
|
||||
<button className={s.zoomResetBtn} onClick={onReset}>
|
||||
{Math.round((value / 900) * 100)}%
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Reader ────────────────────────────────────────────────────────────────────
|
||||
export default function Reader() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const rafRef = useRef(0);
|
||||
const pageNumRef = useRef(1);
|
||||
const pageCache = useRef<Map<number, string[]>>(new Map());
|
||||
const aspectCache = useRef<Map<string, number>>(new Map());
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const rafRef = useRef(0);
|
||||
const pageNumRef = useRef(1);
|
||||
const pageCache = useRef<Map<number, string[]>>(new Map());
|
||||
const aspectCache = useRef<Map<string, number>>(new Map());
|
||||
const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const uiRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [dlOpen, setDlOpen] = useState(false);
|
||||
const [zoomOpen, setZoomOpen] = useState(false);
|
||||
const [uiVisible, setUiVisible] = useState(true);
|
||||
const [markedRead, setMarkedRead] = useState<Set<number>>(new Set());
|
||||
const [pageGroups, setPageGroups] = useState<number[][]>([]);
|
||||
|
||||
@@ -102,14 +150,38 @@ export default function Reader() {
|
||||
updateSettings, addHistory,
|
||||
} = useStore();
|
||||
|
||||
const kb = settings.keybinds;
|
||||
const rtl = settings.readingDirection === "rtl";
|
||||
const fit = settings.fitMode ?? "width";
|
||||
const style = settings.pageStyle ?? "single";
|
||||
const maxW = settings.maxPageWidth ?? 900;
|
||||
const kb = settings.keybinds;
|
||||
const rtl = settings.readingDirection === "rtl";
|
||||
const fit = settings.fitMode ?? "width";
|
||||
const style = settings.pageStyle ?? "single";
|
||||
const maxW = settings.maxPageWidth ?? 900;
|
||||
const autoNext = settings.autoNextChapter ?? false;
|
||||
|
||||
useEffect(() => { pageNumRef.current = pageNumber; }, [pageNumber]);
|
||||
|
||||
// ── UI autohide ──────────────────────────────────────────────────────────────
|
||||
const scheduleHide = useCallback(() => {
|
||||
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
||||
hideTimerRef.current = setTimeout(() => setUiVisible(false), 3000);
|
||||
}, []);
|
||||
|
||||
const showUi = useCallback(() => {
|
||||
setUiVisible(true);
|
||||
scheduleHide();
|
||||
}, [scheduleHide]);
|
||||
|
||||
useEffect(() => {
|
||||
scheduleHide();
|
||||
return () => { if (hideTimerRef.current) clearTimeout(hideTimerRef.current); };
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
// ── Auto-focus viewer so spacebar/arrows work ───────────────────────────────
|
||||
useEffect(() => {
|
||||
containerRef.current?.focus({ preventScroll: true });
|
||||
}, [activeChapter?.id]);
|
||||
|
||||
// ── Load pages ──────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!activeChapter) return;
|
||||
@@ -127,8 +199,8 @@ export default function Reader() {
|
||||
}, [activeChapter?.id]);
|
||||
|
||||
// ── Double-page grouping ─────────────────────────────────────────────────────
|
||||
// Rule: page 1 (cover) always solo. Wide pages (aspect>1.2) always solo.
|
||||
// Normal portrait pages pair with next portrait page.
|
||||
// Page 1 (cover) always solo. Wide pages (aspect > 1.2) always solo.
|
||||
// Remaining portrait pages pair left-to-right: [2,3], [4,5], ...
|
||||
useEffect(() => {
|
||||
if (style !== "double" || !pageUrls.length) { setPageGroups([]); return; }
|
||||
let cancelled = false;
|
||||
@@ -145,18 +217,20 @@ export default function Reader() {
|
||||
}
|
||||
if (cancelled) return;
|
||||
const groups: number[][] = [];
|
||||
// Page 1 always solo (cover)
|
||||
groups.push([1]);
|
||||
let i = 2;
|
||||
while (i <= pageUrls.length) {
|
||||
const a = aspects[i - 1];
|
||||
if (a > 1.2 || i === pageUrls.length) {
|
||||
// Wide or last page — solo
|
||||
if (a > 1.2) {
|
||||
groups.push([i]); i++;
|
||||
} else if (i === pageUrls.length) {
|
||||
groups.push([i]); i++;
|
||||
} else {
|
||||
const next = aspects[i]; // aspects[i] = page i+1 (0-indexed)
|
||||
if (next !== undefined && next <= 1.2) {
|
||||
groups.push([i, i + 1]); i += 2;
|
||||
const nextA = aspects[i];
|
||||
if (nextA !== undefined && nextA <= 1.2) {
|
||||
// Book order: left page is i, right page is i+1
|
||||
groups.push(rtl ? [i + 1, i] : [i, i + 1]);
|
||||
i += 2;
|
||||
} else {
|
||||
groups.push([i]); i++;
|
||||
}
|
||||
@@ -165,12 +239,7 @@ export default function Reader() {
|
||||
setPageGroups(groups);
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, [pageUrls, style, settings.offsetDoubleSpreads]);
|
||||
|
||||
const currentGroup = useMemo(() => {
|
||||
if (style !== "double" || !pageGroups.length) return null;
|
||||
return pageGroups.find((g) => g.includes(pageNumber)) ?? null;
|
||||
}, [pageGroups, pageNumber, style]);
|
||||
}, [pageUrls, style, settings.offsetDoubleSpreads, rtl]);
|
||||
|
||||
// ── Preload ─────────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
@@ -230,7 +299,7 @@ export default function Reader() {
|
||||
const gi = pageGroups.findIndex((g) => g.includes(pageNumber));
|
||||
if (forward) {
|
||||
if (gi < pageGroups.length - 1) setPageNumber(pageGroups[gi + 1][0]);
|
||||
else if (adjacent.next) openReader(adjacent.next, activeChapterList);
|
||||
else if (adjacent.next) { setPageNumber(1); openReader(adjacent.next, activeChapterList); }
|
||||
else closeReader();
|
||||
} else {
|
||||
if (gi > 0) setPageNumber(pageGroups[gi - 1][0]);
|
||||
@@ -240,9 +309,14 @@ export default function Reader() {
|
||||
|
||||
const goForward = useCallback(() => {
|
||||
if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
|
||||
if (pageNumber < lastPage) setPageNumber(pageNumber + 1);
|
||||
else if (adjacent.next) openReader(adjacent.next, activeChapterList);
|
||||
else closeReader();
|
||||
if (pageNumber < lastPage) {
|
||||
setPageNumber(pageNumber + 1);
|
||||
} else if (adjacent.next) {
|
||||
setPageNumber(1);
|
||||
openReader(adjacent.next, activeChapterList);
|
||||
} else {
|
||||
closeReader();
|
||||
}
|
||||
}, [pageNumber, lastPage, adjacent, activeChapterList, style, pageGroups, advanceGroup]);
|
||||
|
||||
const goBack = useCallback(() => {
|
||||
@@ -255,8 +329,9 @@ export default function Reader() {
|
||||
const goPrev = rtl ? goForward : goBack;
|
||||
|
||||
function cycleStyle() {
|
||||
const cycle = ["single", "double", "longstrip"] as const;
|
||||
const next = cycle[(cycle.indexOf(style as any) + 1) % cycle.length];
|
||||
const cycle = ["single", "longstrip"] as const;
|
||||
const cur = style === "double" ? "single" : style;
|
||||
const next = cycle[(cycle.indexOf(cur as any) + 1) % cycle.length];
|
||||
updateSettings({ pageStyle: next });
|
||||
}
|
||||
|
||||
@@ -265,7 +340,7 @@ export default function Reader() {
|
||||
updateSettings({ fitMode: cycle[(cycle.indexOf(fit) + 1) % cycle.length] });
|
||||
}
|
||||
|
||||
// Ctrl+scroll → zoom maxPageWidth
|
||||
// ── Ctrl+scroll → zoom ───────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (!e.ctrlKey) return;
|
||||
@@ -277,54 +352,78 @@ export default function Reader() {
|
||||
return () => window.removeEventListener("wheel", onWheel);
|
||||
}, [maxW]);
|
||||
|
||||
// Keybinds
|
||||
// ── Keybinds ─────────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if ((e.target as HTMLElement).tagName === "INPUT") return;
|
||||
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(); setPageNumber(1); }
|
||||
else if (matchesKeybind(e, kb.lastPage)) { e.preventDefault(); setPageNumber(lastPage); }
|
||||
else if (matchesKeybind(e, kb.chapterRight)) { e.preventDefault(); if (adjacent.next) openReader(adjacent.next, activeChapterList); }
|
||||
else if (matchesKeybind(e, kb.chapterLeft)) { e.preventDefault(); if (adjacent.prev) openReader(adjacent.prev, activeChapterList); }
|
||||
else if (matchesKeybind(e, kb.exitReader)) { e.preventDefault(); closeReader(); }
|
||||
else if (matchesKeybind(e, kb.togglePageStyle)) { e.preventDefault(); cycleStyle(); }
|
||||
else if (matchesKeybind(e, kb.toggleReadingDirection)){ e.preventDefault(); updateSettings({ readingDirection: rtl ? "ltr" : "rtl" }); }
|
||||
else if (matchesKeybind(e, kb.openSettings)) { e.preventDefault(); openSettings(); }
|
||||
if (e.key === "Escape") {
|
||||
if (zoomOpen) { e.preventDefault(); setZoomOpen(false); return; }
|
||||
if (dlOpen) { e.preventDefault(); setDlOpen(false); return; }
|
||||
}
|
||||
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(); setPageNumber(1); }
|
||||
else if (matchesKeybind(e, kb.lastPage)) { e.preventDefault(); setPageNumber(lastPage); }
|
||||
else if (matchesKeybind(e, kb.chapterRight)) { e.preventDefault(); if (adjacent.next) openReader(adjacent.next, activeChapterList); }
|
||||
else if (matchesKeybind(e, kb.chapterLeft)) { e.preventDefault(); if (adjacent.prev) openReader(adjacent.prev, activeChapterList); }
|
||||
else if (matchesKeybind(e, kb.exitReader)) { e.preventDefault(); closeReader(); }
|
||||
else if (matchesKeybind(e, kb.togglePageStyle)) { e.preventDefault(); cycleStyle(); }
|
||||
else if (matchesKeybind(e, kb.toggleReadingDirection)) { e.preventDefault(); updateSettings({ readingDirection: rtl ? "ltr" : "rtl" }); }
|
||||
else if (matchesKeybind(e, kb.openSettings)) { e.preventDefault(); openSettings(); }
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [goForward, goBack, kb, style, rtl, lastPage, adjacent, activeChapterList]);
|
||||
}, [goForward, goBack, kb, style, rtl, lastPage, adjacent, activeChapterList, zoomOpen, dlOpen]);
|
||||
|
||||
// Longstrip scroll — rAF throttled, no flushSync
|
||||
// ── Longstrip scroll tracker ─────────────────────────────────────────────────
|
||||
// Tracks current page number and auto-advances to next chapter at end of scroll
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el || style !== "longstrip") return;
|
||||
|
||||
const onScroll = () => {
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
rafRef.current = requestAnimationFrame(() => {
|
||||
if (!el) return;
|
||||
const midY = el.scrollTop + el.clientHeight * 0.5;
|
||||
let cumH = 0;
|
||||
const children = Array.from(el.children) as HTMLElement[];
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
cumH += children[i].clientHeight;
|
||||
if (cumH >= midY) {
|
||||
const n = i + 1;
|
||||
if (n !== pageNumRef.current) setPageNumber(n);
|
||||
break;
|
||||
}
|
||||
const imgs = Array.from(el.querySelectorAll("img[data-page]")) as HTMLElement[];
|
||||
|
||||
// Find the image whose center is closest to the viewport center
|
||||
const viewMid = el.scrollTop + el.clientHeight * 0.5;
|
||||
let closest = 0;
|
||||
let closestDist = Infinity;
|
||||
for (let i = 0; i < imgs.length; i++) {
|
||||
const imgMid = imgs[i].offsetTop + imgs[i].offsetHeight * 0.5;
|
||||
const dist = Math.abs(imgMid - viewMid);
|
||||
if (dist < closestDist) { closestDist = dist; closest = i; }
|
||||
}
|
||||
const n = closest + 1;
|
||||
if (n !== pageNumRef.current) setPageNumber(n);
|
||||
|
||||
// Auto-advance: within 80px of bottom and next chapter exists
|
||||
if (autoNext && adjacent.next) {
|
||||
const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 80;
|
||||
if (nearBottom) openReader(adjacent.next, activeChapterList);
|
||||
}
|
||||
});
|
||||
};
|
||||
el.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => { el.removeEventListener("scroll", onScroll); cancelAnimationFrame(rafRef.current); };
|
||||
}, [style]);
|
||||
|
||||
el.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => {
|
||||
el.removeEventListener("scroll", onScroll);
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
};
|
||||
}, [style, autoNext, adjacent.next?.id, activeChapterList]);
|
||||
|
||||
// Reset scroll position when switching chapters in non-longstrip modes
|
||||
useEffect(() => {
|
||||
if (style !== "longstrip" && containerRef.current) containerRef.current.scrollTop = 0;
|
||||
}, [pageNumber, style]);
|
||||
|
||||
// When switching to longstrip, reset scroll to top
|
||||
useEffect(() => {
|
||||
if (style === "longstrip" && containerRef.current) containerRef.current.scrollTop = 0;
|
||||
}, [activeChapter?.id, style]);
|
||||
|
||||
function handleTap(e: React.MouseEvent) {
|
||||
if (style === "longstrip") return;
|
||||
const x = e.clientX / window.innerWidth;
|
||||
@@ -344,25 +443,6 @@ export default function Reader() {
|
||||
settings.optimizeContrast && s.optimizeContrast,
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
// ── Double page render ────────────────────────────────────────────────────────
|
||||
function renderDouble() {
|
||||
if (!currentGroup) {
|
||||
return <img src={pageUrls[pageNumber - 1]} alt={`Page ${pageNumber}`} className={imgCls} decoding="async" />;
|
||||
}
|
||||
const ordered = rtl ? [...currentGroup].reverse() : currentGroup;
|
||||
const [left, right] = ordered;
|
||||
return (
|
||||
<div className={s.doubleWrap}>
|
||||
<img src={pageUrls[left - 1]} alt={`Page ${left}`}
|
||||
className={[imgCls, s.pageHalf, settings.pageGap ? s.gapLeft : ""].join(" ")} decoding="async" />
|
||||
{right && (
|
||||
<img src={pageUrls[right - 1]} alt={`Page ${right}`}
|
||||
className={[imgCls, s.pageHalf, settings.pageGap ? s.gapRight : ""].join(" ")} decoding="async" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Icons ────────────────────────────────────────────────────────────────────
|
||||
const fitIcon =
|
||||
fit === "width" ? <ArrowsLeftRight size={14} weight="light" /> :
|
||||
@@ -372,10 +452,7 @@ export default function Reader() {
|
||||
|
||||
const fitLabel = { width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit];
|
||||
|
||||
const styleIcon =
|
||||
style === "single" ? <Square size={14} weight="light" /> :
|
||||
style === "double" ? <Columns size={14} weight="light" /> :
|
||||
<Rows size={14} weight="light" />;
|
||||
const styleIcon = style === "single" ? <Square size={14} weight="light" /> : <Rows size={14} weight="light" />;
|
||||
|
||||
if (loading) return (
|
||||
<div className={s.center}>
|
||||
@@ -388,14 +465,28 @@ export default function Reader() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<div
|
||||
className={s.root}
|
||||
onMouseMove={(e) => {
|
||||
const fromTop = e.clientY;
|
||||
const fromBottom = window.innerHeight - e.clientY;
|
||||
if (fromTop < 60 || fromBottom < 60) showUi();
|
||||
}}
|
||||
>
|
||||
{/* ── Topbar ── */}
|
||||
<div className={s.topbar}>
|
||||
<div
|
||||
ref={uiRef}
|
||||
className={[s.topbar, uiVisible ? "" : s.uiHidden].join(" ")}
|
||||
>
|
||||
<button className={s.iconBtn} onClick={closeReader} title="Close reader">
|
||||
<X size={15} weight="light" />
|
||||
</button>
|
||||
<button className={s.iconBtn} onClick={() => adjacent.prev && openReader(adjacent.prev, activeChapterList)}
|
||||
disabled={!adjacent.prev} title="Previous chapter">
|
||||
<button
|
||||
className={s.iconBtn}
|
||||
onClick={() => adjacent.prev && openReader(adjacent.prev, activeChapterList)}
|
||||
disabled={!adjacent.prev}
|
||||
title="Previous chapter"
|
||||
>
|
||||
<CaretLeft size={14} weight="light" />
|
||||
</button>
|
||||
<span className={s.chLabel}>
|
||||
@@ -404,8 +495,12 @@ export default function Reader() {
|
||||
<span>{activeChapter?.name}</span>
|
||||
</span>
|
||||
<span className={s.pageLabel}>{pageNumber} / {lastPage || "…"}</span>
|
||||
<button className={s.iconBtn} onClick={() => adjacent.next && openReader(adjacent.next, activeChapterList)}
|
||||
disabled={!adjacent.next} title="Next chapter">
|
||||
<button
|
||||
className={s.iconBtn}
|
||||
onClick={() => adjacent.next && openReader(adjacent.next, activeChapterList)}
|
||||
disabled={!adjacent.next}
|
||||
title="Next chapter"
|
||||
>
|
||||
<CaretRight size={14} weight="light" />
|
||||
</button>
|
||||
|
||||
@@ -417,17 +512,31 @@ export default function Reader() {
|
||||
<span className={s.modeBtnLabel}>{fitLabel}</span>
|
||||
</button>
|
||||
|
||||
{/* Zoom — click resets */}
|
||||
<button className={s.zoomBtn} onClick={() => updateSettings({ maxPageWidth: 900 })}
|
||||
title="Click to reset zoom (Ctrl+scroll to zoom)">
|
||||
{Math.round((maxW / 900) * 100)}%
|
||||
</button>
|
||||
{/* Zoom */}
|
||||
<div className={s.zoomWrap}>
|
||||
<button
|
||||
className={s.zoomBtn}
|
||||
onClick={() => setZoomOpen((o) => !o)}
|
||||
title="Zoom (click for slider, Ctrl+scroll)"
|
||||
>
|
||||
{Math.round((maxW / 900) * 100)}%
|
||||
</button>
|
||||
{zoomOpen && (
|
||||
<ZoomPopover
|
||||
value={maxW}
|
||||
onChange={(v) => updateSettings({ maxPageWidth: v })}
|
||||
onReset={() => updateSettings({ maxPageWidth: 900 })}
|
||||
onClose={() => setZoomOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* RTL */}
|
||||
<button
|
||||
className={[s.modeBtn, rtl ? s.modeBtnActive : ""].join(" ")}
|
||||
onClick={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}
|
||||
title={`Direction: ${rtl ? "RTL" : "LTR"}`}>
|
||||
title={`Direction: ${rtl ? "RTL" : "LTR"}`}
|
||||
>
|
||||
<ArrowsLeftRight size={14} weight="light" />
|
||||
<span className={s.modeBtnLabel}>{rtl ? "RTL" : "LTR"}</span>
|
||||
</button>
|
||||
@@ -438,16 +547,28 @@ export default function Reader() {
|
||||
<span className={s.modeBtnLabel}>{style}</span>
|
||||
</button>
|
||||
|
||||
{/* Page gap toggle — only meaningful in double/longstrip */}
|
||||
{/* Page gap toggle */}
|
||||
{style !== "single" && (
|
||||
<button
|
||||
className={[s.modeBtn, settings.pageGap ? s.modeBtnActive : ""].join(" ")}
|
||||
onClick={() => updateSettings({ pageGap: !settings.pageGap })}
|
||||
title="Toggle page gap">
|
||||
title="Toggle page gap"
|
||||
>
|
||||
<span className={s.modeBtnLabel}>Gap</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Auto-next chapter */}
|
||||
{style === "longstrip" && (
|
||||
<button
|
||||
className={[s.modeBtn, autoNext ? s.modeBtnActive : ""].join(" ")}
|
||||
onClick={() => updateSettings({ autoNextChapter: !autoNext })}
|
||||
title="Auto-advance to next chapter"
|
||||
>
|
||||
<span className={s.modeBtnLabel}>Auto</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Download */}
|
||||
<button className={s.modeBtn} onClick={() => setDlOpen(true)} title="Download options">
|
||||
<Download size={14} weight="light" />
|
||||
@@ -457,29 +578,42 @@ export default function Reader() {
|
||||
{/* ── Viewer ── */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={[
|
||||
s.viewer,
|
||||
style === "longstrip" ? s.viewerStrip : "",
|
||||
].join(" ")}
|
||||
className={[s.viewer, style === "longstrip" ? s.viewerStrip : ""].join(" ")}
|
||||
style={cssVars}
|
||||
tabIndex={-1}
|
||||
onClick={handleTap}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === " " && style === "longstrip") {
|
||||
e.preventDefault();
|
||||
containerRef.current?.scrollBy({ top: containerRef.current.clientHeight * 0.85, behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{style === "longstrip" ? (
|
||||
pageUrls.map((url, i) => (
|
||||
<img key={i} src={url} alt={`Page ${i + 1}`}
|
||||
<img
|
||||
key={`${activeChapter?.id}-${i}`}
|
||||
src={url}
|
||||
alt={`Page ${i + 1}`}
|
||||
data-page={i + 1}
|
||||
className={[imgCls, settings.pageGap ? s.stripGap : ""].join(" ")}
|
||||
loading={i < 3 ? "eager" : "lazy"} decoding="async" />
|
||||
loading={i < 3 ? "eager" : "lazy"}
|
||||
decoding="async"
|
||||
/>
|
||||
))
|
||||
) : style === "double" ? (
|
||||
renderDouble()
|
||||
) : (
|
||||
<img key={pageNumber} src={pageUrls[pageNumber - 1]}
|
||||
alt={`Page ${pageNumber}`} className={imgCls} decoding="async" />
|
||||
<img
|
||||
key={pageNumber}
|
||||
src={pageUrls[pageNumber - 1]}
|
||||
alt={`Page ${pageNumber}`}
|
||||
className={imgCls}
|
||||
decoding="async"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Bottom nav ── */}
|
||||
<div className={s.bottombar}>
|
||||
<div className={[s.bottombar, uiVisible ? "" : s.uiHidden].join(" ")}>
|
||||
<button className={s.navBtn} onClick={goPrev} disabled={pageNumber === 1 && !adjacent.prev}>
|
||||
<ArrowLeft size={13} weight="light" />
|
||||
</button>
|
||||
|
||||
@@ -516,3 +516,61 @@
|
||||
border-color: var(--border-strong);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
/* ── List header right controls ── */
|
||||
.listHeaderRight {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
}
|
||||
|
||||
/* ── Download dropdown (in list header) ── */
|
||||
.dlWrap { position: relative; }
|
||||
|
||||
.dlToggleBtn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px; border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim); color: var(--text-muted);
|
||||
background: none; cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.dlToggleBtn:hover { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
|
||||
|
||||
.dlDropdown {
|
||||
position: absolute; top: calc(100% + 4px); right: 0;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-base);
|
||||
border-radius: var(--radius-lg); padding: var(--sp-1);
|
||||
display: flex; flex-direction: column; gap: 1px;
|
||||
min-width: 180px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
animation: scaleIn 0.1s ease both; transform-origin: top right;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* ── Jump to chapter (in list header) ── */
|
||||
.jumpWrap { position: relative; }
|
||||
|
||||
.jumpToggle {
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
|
||||
background: none; color: var(--text-faint);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
cursor: pointer; white-space: nowrap;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.jumpToggle:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
|
||||
|
||||
.jumpRow { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
.jumpInput {
|
||||
width: 72px; padding: 4px 8px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-focus);
|
||||
border-radius: var(--radius-sm); color: var(--text-secondary);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.jumpCancel {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 22px; height: 22px; border-radius: var(--radius-sm);
|
||||
color: var(--text-faint); font-size: 10px; background: none;
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.jumpCancel:hover { color: var(--text-muted); background: var(--bg-raised); }
|
||||
@@ -50,6 +50,8 @@ export default function SeriesDetail() {
|
||||
const [togglingLibrary, setTogglingLibrary] = useState(false);
|
||||
const [chapterPage, setChapterPage] = useState(1);
|
||||
const [ctx, setCtx] = useState<CtxState | null>(null);
|
||||
const [jumpOpen, setJumpOpen] = useState(false);
|
||||
const [jumpInput, setJumpInput] = useState("");
|
||||
|
||||
const sortDir = settings.chapterSortDir;
|
||||
|
||||
@@ -104,10 +106,13 @@ export default function SeriesDetail() {
|
||||
const continueChapter = useMemo(() => {
|
||||
if (!chapters.length) return null;
|
||||
const asc = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
|
||||
const anyRead = asc.some((c) => c.isRead);
|
||||
// In-progress: started but not finished
|
||||
const inProgress = asc.find((c) => !c.isRead && (c.lastPageRead ?? 0) > 0);
|
||||
if (inProgress) return { chapter: inProgress, type: "continue" as const };
|
||||
// If any chapter is read, user is continuing — find next unread
|
||||
const firstUnread = asc.find((c) => !c.isRead);
|
||||
if (firstUnread) return { chapter: firstUnread, type: "start" as const };
|
||||
if (firstUnread) return { chapter: firstUnread, type: anyRead ? "continue" : "start" as const };
|
||||
return { chapter: asc[0], type: "reread" as const };
|
||||
}, [chapters]);
|
||||
|
||||
@@ -291,49 +296,6 @@ export default function SeriesDetail() {
|
||||
</button>
|
||||
)}
|
||||
|
||||
{chapters.length > 0 && (
|
||||
<div className={s.downloadSection}>
|
||||
<button className={s.downloadToggle} onClick={() => setDlOpen((p) => !p)}>
|
||||
<Download size={13} weight="light" />
|
||||
Download
|
||||
</button>
|
||||
{dlOpen && (
|
||||
<div className={s.downloadMenu}>
|
||||
{continueChapter && (
|
||||
<button className={s.dlItem}
|
||||
onClick={() => {
|
||||
const from = sortedChapters.indexOf(continueChapter.chapter);
|
||||
const ids = sortedChapters.slice(from).filter((c) => !c.isDownloaded).map((c) => c.id);
|
||||
enqueueMultiple(ids);
|
||||
setDlOpen(false);
|
||||
}}>
|
||||
<span>From current</span>
|
||||
<span className={s.dlItemSub}>Ch.{continueChapter.chapter.chapterNumber} onwards</span>
|
||||
</button>
|
||||
)}
|
||||
<button className={s.dlItem}
|
||||
onClick={() => {
|
||||
const ids = sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).map((c) => c.id);
|
||||
enqueueMultiple(ids);
|
||||
setDlOpen(false);
|
||||
}}>
|
||||
<span>Unread chapters</span>
|
||||
<span className={s.dlItemSub}>{sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).length} remaining</span>
|
||||
</button>
|
||||
<button className={s.dlItem}
|
||||
onClick={() => {
|
||||
const ids = sortedChapters.filter((c) => !c.isDownloaded).map((c) => c.id);
|
||||
enqueueMultiple(ids);
|
||||
setDlOpen(false);
|
||||
}}>
|
||||
<span>Download all</span>
|
||||
<span className={s.dlItemSub}>{sortedChapters.filter((c) => !c.isDownloaded).length} not downloaded</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className={s.chapterCount}>
|
||||
{totalCount} {totalCount === 1 ? "chapter" : "chapters"}
|
||||
</p>
|
||||
@@ -387,21 +349,103 @@ export default function SeriesDetail() {
|
||||
<span>{sortDir === "desc" ? "Newest first" : "Oldest first"}</span>
|
||||
</button>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className={s.pagination}>
|
||||
<button
|
||||
className={s.pageBtn}
|
||||
onClick={() => setChapterPage((p) => Math.max(1, p - 1))}
|
||||
disabled={chapterPage === 1}
|
||||
>←</button>
|
||||
<span className={s.pageNum}>{chapterPage} / {totalPages}</span>
|
||||
<button
|
||||
className={s.pageBtn}
|
||||
onClick={() => setChapterPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={chapterPage === totalPages}
|
||||
>→</button>
|
||||
</div>
|
||||
)}
|
||||
<div className={s.listHeaderRight}>
|
||||
{/* Jump to chapter */}
|
||||
{chapters.length > 1 && (
|
||||
<div className={s.jumpWrap}>
|
||||
{!jumpOpen ? (
|
||||
<button className={s.jumpToggle} onClick={() => { setJumpOpen(true); setJumpInput(""); }}>
|
||||
Go to…
|
||||
</button>
|
||||
) : (
|
||||
<div className={s.jumpRow}>
|
||||
<input
|
||||
className={s.jumpInput}
|
||||
type="text"
|
||||
placeholder="Ch. #"
|
||||
value={jumpInput}
|
||||
autoFocus
|
||||
onChange={(e) => setJumpInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") { setJumpOpen(false); return; }
|
||||
if (e.key === "Enter") {
|
||||
const num = parseFloat(jumpInput);
|
||||
if (!isNaN(num)) {
|
||||
const target = sortedChapters.find((c) => c.chapterNumber === num)
|
||||
?? sortedChapters.reduce((best, c) =>
|
||||
Math.abs(c.chapterNumber - num) < Math.abs(best.chapterNumber - num) ? c : best
|
||||
, sortedChapters[0]);
|
||||
if (target) openReader(target, sortedChapters);
|
||||
}
|
||||
setJumpOpen(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button className={s.jumpCancel} onClick={() => setJumpOpen(false)}>✕</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download menu */}
|
||||
{chapters.length > 0 && (
|
||||
<div className={s.dlWrap}>
|
||||
<button className={s.dlToggleBtn} onClick={() => setDlOpen((p) => !p)}>
|
||||
<Download size={13} weight="light" />
|
||||
</button>
|
||||
{dlOpen && (
|
||||
<div className={s.dlDropdown}>
|
||||
{continueChapter && (
|
||||
<button className={s.dlItem}
|
||||
onClick={() => {
|
||||
const from = sortedChapters.indexOf(continueChapter.chapter);
|
||||
const ids = sortedChapters.slice(from).filter((c) => !c.isDownloaded).map((c) => c.id);
|
||||
enqueueMultiple(ids);
|
||||
setDlOpen(false);
|
||||
}}>
|
||||
<span>From current</span>
|
||||
<span className={s.dlItemSub}>Ch.{continueChapter.chapter.chapterNumber} onwards</span>
|
||||
</button>
|
||||
)}
|
||||
<button className={s.dlItem}
|
||||
onClick={() => {
|
||||
const ids = sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).map((c) => c.id);
|
||||
enqueueMultiple(ids);
|
||||
setDlOpen(false);
|
||||
}}>
|
||||
<span>Unread chapters</span>
|
||||
<span className={s.dlItemSub}>{sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).length} remaining</span>
|
||||
</button>
|
||||
<button className={s.dlItem}
|
||||
onClick={() => {
|
||||
const ids = sortedChapters.filter((c) => !c.isDownloaded).map((c) => c.id);
|
||||
enqueueMultiple(ids);
|
||||
setDlOpen(false);
|
||||
}}>
|
||||
<span>Download all</span>
|
||||
<span className={s.dlItemSub}>{sortedChapters.filter((c) => !c.isDownloaded).length} not downloaded</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className={s.pagination}>
|
||||
<button
|
||||
className={s.pageBtn}
|
||||
onClick={() => setChapterPage((p) => Math.max(1, p - 1))}
|
||||
disabled={chapterPage === 1}
|
||||
>←</button>
|
||||
<span className={s.pageNum}>{chapterPage} / {totalPages}</span>
|
||||
<button
|
||||
className={s.pageBtn}
|
||||
onClick={() => setChapterPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={chapterPage === totalPages}
|
||||
>→</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={s.list}>
|
||||
|
||||
@@ -159,20 +159,45 @@
|
||||
min-width: 28px; text-align: center; letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
/* ─── Select ── */
|
||||
.select {
|
||||
/* ─── Select (custom) ── */
|
||||
.selectWrap { position: relative; flex-shrink: 0; min-width: 130px; }
|
||||
|
||||
.selectBtn {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
|
||||
width: 100%; padding: 5px 10px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md); padding: 5px 10px; color: var(--text-secondary);
|
||||
border-radius: var(--radius-md); color: var(--text-secondary);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
outline: none; cursor: pointer; flex-shrink: 0; transition: border-color var(--t-base);
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23888'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding-right: 24px;
|
||||
cursor: pointer; transition: border-color var(--t-base), background var(--t-base);
|
||||
text-align: left;
|
||||
}
|
||||
.select:focus { border-color: var(--border-focus); }
|
||||
.select option { background: var(--bg-raised); color: var(--text-secondary); }
|
||||
.selectBtn:hover { border-color: var(--border-focus); }
|
||||
|
||||
.selectCaret {
|
||||
color: var(--text-faint); flex-shrink: 0;
|
||||
transition: transform var(--t-base);
|
||||
}
|
||||
.selectCaretOpen { transform: rotate(180deg); }
|
||||
|
||||
.selectMenu {
|
||||
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-base);
|
||||
border-radius: var(--radius-md); padding: var(--sp-1);
|
||||
display: flex; flex-direction: column; gap: 1px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
z-index: 200; animation: scaleIn 0.1s ease both; transform-origin: top center;
|
||||
}
|
||||
|
||||
.selectOption {
|
||||
padding: 6px 10px; border-radius: var(--radius-sm);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
color: var(--text-secondary); background: none; border: none;
|
||||
cursor: pointer; text-align: left;
|
||||
transition: background var(--t-fast), color var(--t-fast);
|
||||
}
|
||||
.selectOption:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.selectOptionActive { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.selectOptionActive:hover { background: var(--accent-muted); color: var(--accent-fg); }
|
||||
|
||||
/* ─── Scale ── */
|
||||
.scaleRow {
|
||||
|
||||
@@ -62,15 +62,51 @@ function SelectRow({ value, options, onChange, label, description }: {
|
||||
label: string;
|
||||
description?: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const selected = options.find((o) => o.value === value);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
|
||||
document.addEventListener("mousedown", handler);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handler);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className={s.stepRow}>
|
||||
<div className={s.toggleInfo}>
|
||||
<span className={s.toggleLabel}>{label}</span>
|
||||
{description && <span className={s.toggleDesc}>{description}</span>}
|
||||
</div>
|
||||
<select className={s.select} value={value} onChange={(e) => onChange(e.target.value)}>
|
||||
{options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
<div className={s.selectWrap} ref={ref}>
|
||||
<button className={s.selectBtn} onClick={() => setOpen((o) => !o)}>
|
||||
<span>{selected?.label ?? value}</span>
|
||||
<svg className={[s.selectCaret, open ? s.selectCaretOpen : ""].join(" ")} width="10" height="6" viewBox="0 0 10 6" fill="none">
|
||||
<path d="M0 0l5 6 5-6" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
{open && (
|
||||
<div className={s.selectMenu}>
|
||||
{options.map((o) => (
|
||||
<button
|
||||
key={o.value}
|
||||
className={[s.selectOption, o.value === value ? s.selectOptionActive : ""].join(" ")}
|
||||
onClick={() => { onChange(o.value); setOpen(false); }}
|
||||
>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -143,11 +179,10 @@ function ReaderTab({ settings, update }: { settings: Settings; update: (p: Parti
|
||||
<p className={s.sectionTitle}>Page Layout</p>
|
||||
<SelectRow label="Default layout"
|
||||
description="How chapters open by default"
|
||||
value={settings.pageStyle}
|
||||
value={settings.pageStyle === "double" ? "single" : settings.pageStyle}
|
||||
options={[
|
||||
{ value: "single", label: "Single page" },
|
||||
{ value: "double", label: "Double page" },
|
||||
{ value: "longstrip", label: "Long strip" },
|
||||
{ value: "single", label: "Single page" },
|
||||
{ value: "longstrip", label: "Long strip" },
|
||||
]}
|
||||
onChange={(v) => update({ pageStyle: v as Settings["pageStyle"] })} />
|
||||
<SelectRow label="Reading direction"
|
||||
@@ -158,12 +193,8 @@ function ReaderTab({ settings, update }: { settings: Settings; update: (p: Parti
|
||||
{ value: "rtl", label: "Right to left" },
|
||||
]}
|
||||
onChange={(v) => update({ readingDirection: v as Settings["readingDirection"] })} />
|
||||
<Toggle label="Offset double spreads"
|
||||
description="Shift double-page groups so spreads align correctly"
|
||||
checked={settings.offsetDoubleSpreads}
|
||||
onChange={(v) => update({ offsetDoubleSpreads: v })} />
|
||||
<Toggle label="Page gap"
|
||||
description="Add spacing between pages in double and longstrip modes"
|
||||
description="Add spacing between pages in longstrip mode"
|
||||
checked={settings.pageGap}
|
||||
onChange={(v) => update({ pageGap: v })} />
|
||||
</div>
|
||||
@@ -174,9 +205,9 @@ function ReaderTab({ settings, update }: { settings: Settings; update: (p: Parti
|
||||
description="How pages are sized to fit the screen"
|
||||
value={settings.fitMode ?? "width"}
|
||||
options={[
|
||||
{ value: "width", label: "Fit width" },
|
||||
{ value: "height", label: "Fit height" },
|
||||
{ value: "screen", label: "Fit screen" },
|
||||
{ value: "width", label: "Fit width" },
|
||||
{ value: "height", label: "Fit height" },
|
||||
{ value: "screen", label: "Fit screen" },
|
||||
{ value: "original", label: "Original (1:1)" },
|
||||
]}
|
||||
onChange={(v) => update({ fitMode: v as FitMode })} />
|
||||
@@ -203,6 +234,10 @@ function ReaderTab({ settings, update }: { settings: Settings; update: (p: Parti
|
||||
description="Mark a chapter as read when you reach the last page"
|
||||
checked={settings.autoMarkRead}
|
||||
onChange={(v) => update({ autoMarkRead: v })} />
|
||||
<Toggle label="Auto-advance chapters"
|
||||
description="Automatically open the next chapter at the end of a long strip"
|
||||
checked={settings.autoNextChapter ?? false}
|
||||
onChange={(v) => update({ autoNextChapter: v })} />
|
||||
<Stepper label="Pages to preload"
|
||||
description="Images loaded ahead of the current page"
|
||||
value={settings.preloadPages} min={0} max={10}
|
||||
@@ -252,24 +287,24 @@ function LibraryTab({ settings, update }: { settings: Settings; update: (p: Part
|
||||
description="Language variant shown first when an extension has multiple"
|
||||
value={settings.preferredExtensionLang ?? "en"}
|
||||
options={[
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "es", label: "Spanish" },
|
||||
{ value: "fr", label: "French" },
|
||||
{ value: "de", label: "German" },
|
||||
{ value: "pt-br", label: "Portuguese (BR)" },
|
||||
{ value: "it", label: "Italian" },
|
||||
{ value: "ru", label: "Russian" },
|
||||
{ value: "ar", label: "Arabic" },
|
||||
{ value: "tr", label: "Turkish" },
|
||||
{ value: "zh", label: "Chinese (Simplified)" },
|
||||
{ value: "zh-hant", label: "Chinese (Traditional)" },
|
||||
{ value: "ko", label: "Korean" },
|
||||
{ value: "ja", label: "Japanese" },
|
||||
{ value: "id", label: "Indonesian" },
|
||||
{ value: "vi", label: "Vietnamese" },
|
||||
{ value: "th", label: "Thai" },
|
||||
{ value: "pl", label: "Polish" },
|
||||
{ value: "nl", label: "Dutch" },
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "es", label: "Spanish" },
|
||||
{ value: "fr", label: "French" },
|
||||
{ value: "de", label: "German" },
|
||||
{ value: "pt-br", label: "Portuguese (BR)" },
|
||||
{ value: "it", label: "Italian" },
|
||||
{ value: "ru", label: "Russian" },
|
||||
{ value: "ar", label: "Arabic" },
|
||||
{ value: "tr", label: "Turkish" },
|
||||
{ value: "zh", label: "Chinese (Simplified)" },
|
||||
{ value: "zh-hant", label: "Chinese (Traditional)" },
|
||||
{ value: "ko", label: "Korean" },
|
||||
{ value: "ja", label: "Japanese" },
|
||||
{ value: "id", label: "Indonesian" },
|
||||
{ value: "vi", label: "Vietnamese" },
|
||||
{ value: "th", label: "Thai" },
|
||||
{ value: "pl", label: "Polish" },
|
||||
{ value: "nl", label: "Dutch" },
|
||||
]}
|
||||
onChange={(v) => update({ preferredExtensionLang: v })} />
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,7 @@ export interface Settings {
|
||||
offsetDoubleSpreads: boolean;
|
||||
preloadPages: number;
|
||||
autoMarkRead: boolean;
|
||||
autoNextChapter: boolean;
|
||||
libraryCropCovers: boolean;
|
||||
libraryPageSize: number;
|
||||
showNsfw: boolean;
|
||||
@@ -61,6 +62,7 @@ export const DEFAULT_SETTINGS: Settings = {
|
||||
offsetDoubleSpreads: false,
|
||||
preloadPages: 3,
|
||||
autoMarkRead: true,
|
||||
autoNextChapter: false,
|
||||
libraryCropCovers: true,
|
||||
libraryPageSize: 48,
|
||||
showNsfw: false,
|
||||
|
||||
Reference in New Issue
Block a user