gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 01:09:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Per-Manga Reader Settings + Settings Access (#42 & #46)

Browse Source
This commit is contained in:
Youwes09
2026-04-24 21:09:05 -05:00
parent 581aea5694
commit 2e9939c4a9
7 changed files with 1474 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Todo
+2 -6
View File
@@ -33,11 +33,7 @@ In-Progress:
- Fix Tracking Login
- Pasting OAuth URL is not User-Friendly, Look for Alternatives
- MacOS Fixes
- Revamp Server-State Check (MacOS does not pick up) (TESTING)
- Check Moku Sidebar Icon (Looks ugly on MacOS)
- Icon appears as a Square
- Icon appears to have Green Underglow?
Testing Bugs:
Notes from last time:
- Currently working on #42, just need to mount panel and fix button in reader
src/features/reader/components/Reader.svelte
+139 -25
View File
@@ -5,7 +5,8 @@
import { ENQUEUE_CHAPTERS_DOWNLOAD } from "@api/mutations/downloads";
import { store, updateSettings, openReader, closeReader, addHistory,
addBookmark, removeBookmark, addMarker, updateMarker, removeMarker,
setSettingsOpen } from "@store/state.svelte";
setSettingsOpen, setMangaReaderSettings, clearMangaReaderSettings,
saveReaderPreset, updateReaderPreset, deleteReaderPreset } from "@store/state.svelte";
import { setReading } from "@store/discord";
import { DEFAULT_KEYBINDS } from "@core/keybinds/defaultBinds";
import { readerState, PAGE_STYLES } from "../store/readerState.svelte";
@@ -21,17 +22,27 @@
import PageView from "./PageView.svelte";
import ReaderProgressBar from "./ReaderProgressBar.svelte";
import ReaderOverlay from "./ReaderOverlay.svelte";
import ReaderPresetPanel from "./ReaderPresetPanel.svelte";
const win = getCurrentWindow();
const useBlob = $derived((store.settings.serverAuthMode ?? "NONE") === "BASIC_AUTH");
const rtl = $derived(store.settings.readingDirection === "rtl");
const fit = $derived((store.settings.fitMode ?? "width") as FitMode);
const style = $derived((store.settings.pageStyle ?? "single") as typeof PAGE_STYLES[number]);
const zoom = $derived(store.settings.readerZoom ?? 1.0);
const effectiveReaderSettings = $derived.by(() => {
const mangaId = store.activeManga?.id;
const override = mangaId != null ? (store.settings.mangaReaderSettings ?? {})[mangaId] : undefined;
return override ? { ...store.settings, ...override } : store.settings;
});
const rtl = $derived(effectiveReaderSettings.readingDirection === "rtl");
const fit = $derived((effectiveReaderSettings.fitMode ?? "width") as FitMode);
const style = $derived((effectiveReaderSettings.pageStyle ?? "single") as typeof PAGE_STYLES[number]);
const zoom = $derived(effectiveReaderSettings.readerZoom ?? 1.0);
const autoNext = $derived(store.settings.autoNextChapter ?? false);
const markOnNext = $derived(store.settings.markReadOnNext ?? true);
const overlayBars = $derived(store.settings.overlayBars ?? false);
const tapToToggleBar = $derived(store.settings.tapToToggleBar ?? false);
const barPosition = $derived((store.settings.barPosition ?? "top") as "top" | "left" | "right");
const isVerticalBar = $derived(barPosition === "left" || barPosition === "right");
const lastPage = $derived(store.pageUrls.length);
const effectiveWidth = $derived(readerState.containerWidth > 0 ? Math.round(readerState.containerWidth * zoom) : undefined);
const zoomPct = $derived(Math.round(zoom * 100));
@@ -84,7 +95,7 @@
fit === "height" && "fit-height",
fit === "screen" && "fit-screen",
fit === "original" && "fit-original",
store.settings.optimizeContrast && "optimize-contrast",
effectiveReaderSettings.optimizeContrast && "optimize-contrast",
].filter(Boolean).join(" "));
const fitLabel = $derived({ width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit]);
@@ -119,6 +130,11 @@
const sliderPctRaw = $derived(sliderMax > 1 ? ((sliderPage - 1) / (sliderMax - 1)) * 100 : 0);
const sliderPct = $derived(rtl ? 100 - sliderPctRaw : sliderPctRaw);
const perMangaEnabled = $derived(
store.activeManga?.id != null &&
!!(store.settings.mangaReaderSettings ?? {})[store.activeManga.id]
);
let containerEl: HTMLDivElement | null = null;
let pageViewRef: PageView;
let zoomAnchor = { el: null as HTMLElement | null, offset: 0 };
@@ -184,7 +200,7 @@
e.preventDefault();
captureZoomAnchor(containerEl, style, zoomAnchor);
const ZOOM_STEP = 0.05;
updateSettings({ readerZoom: clampZoom(zoom + (e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP)) });
applySettings({ readerZoom: clampZoom(zoom + (e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP)) });
restoreZoomAnchor(containerEl, zoomAnchor);
}
@@ -202,10 +218,10 @@
closeReader,
goToPage: (p) => jumpToPage(p, style, lastPage, containerEl),
lastPage: () => lastPage,
adjustZoom: (d) => { captureZoomAnchor(containerEl, style, zoomAnchor); updateSettings({ readerZoom: clampZoom(zoom + d) }); restoreZoomAnchor(containerEl, zoomAnchor); },
resetZoom: () => { captureZoomAnchor(containerEl, style, zoomAnchor); updateSettings({ readerZoom: 1.0 }); restoreZoomAnchor(containerEl, zoomAnchor); },
cycleStyle: () => { const idx = PAGE_STYLES.indexOf(style); updateSettings({ pageStyle: PAGE_STYLES[(idx + 1) % PAGE_STYLES.length] }); },
toggleDirection: () => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" }),
adjustZoom: (d) => { captureZoomAnchor(containerEl, style, zoomAnchor); applySettings({ readerZoom: clampZoom(zoom + d) }); restoreZoomAnchor(containerEl, zoomAnchor); },
resetZoom: () => { captureZoomAnchor(containerEl, style, zoomAnchor); applySettings({ readerZoom: 1.0 }); restoreZoomAnchor(containerEl, zoomAnchor); },
cycleStyle: () => { const idx = PAGE_STYLES.indexOf(style); applySettings({ pageStyle: PAGE_STYLES[(idx + 1) % PAGE_STYLES.length] }); },
toggleDirection: () => applySettings({ readingDirection: rtl ? "ltr" : "rtl" }),
openSettings: () => setSettingsOpen(true),
toggleBookmark: () => toggleBookmark(displayChapter, store.pageNumber),
toggleMarker: () => {
@@ -230,6 +246,54 @@
function bindContainer(el: HTMLDivElement) { containerEl = el; }
function captureCurrentReaderSettings() {
return {
pageStyle: style,
fitMode: fit,
readingDirection: (store.settings.readingDirection ?? "ltr") as import("@store/state.svelte").ReadingDirection,
readerZoom: zoom,
pageGap: effectiveReaderSettings.pageGap ?? true,
optimizeContrast: effectiveReaderSettings.optimizeContrast ?? false,
offsetDoubleSpreads: effectiveReaderSettings.offsetDoubleSpreads ?? false,
} satisfies import("@store/state.svelte").ReaderSettings;
}
function applySettings(patch: Parameters<typeof updateSettings>[0]) {
const mangaId = store.activeManga?.id;
if (mangaId != null && (store.settings.mangaReaderSettings ?? {})[mangaId]) {
setMangaReaderSettings(mangaId, { ...(store.settings.mangaReaderSettings ?? {})[mangaId]!, ...patch });
} else {
updateSettings(patch);
}
}
function handleTogglePerManga() {
const mangaId = store.activeManga?.id;
if (mangaId == null) return;
if ((store.settings.mangaReaderSettings ?? {})[mangaId]) {
clearMangaReaderSettings(mangaId);
} else {
setMangaReaderSettings(mangaId, captureCurrentReaderSettings());
}
}
function handleSavePreset(name: string) {
saveReaderPreset(name, captureCurrentReaderSettings());
}
function handleApplyPreset(settings: import("@store/state.svelte").ReaderSettings) {
const mangaId = store.activeManga?.id;
if (mangaId != null && (store.settings.mangaReaderSettings ?? {})[mangaId]) {
setMangaReaderSettings(mangaId, settings);
} else {
updateSettings(settings);
}
}
function handleBarPositionChange(pos: "top" | "left" | "right") {
updateSettings({ barPosition: pos });
}
$effect(() => {
const chapter = displayChapter;
const manga = store.activeManga;
@@ -346,7 +410,7 @@
const snap = store.pageUrls;
Promise.all(snap.map(url => measureAspect(url, useBlob))).then(aspects => {
if (cancelled || snap !== store.pageUrls) return;
readerState.pageGroups = buildPageGroups(snap, aspects, store.settings.offsetDoubleSpreads ?? false);
readerState.pageGroups = buildPageGroups(snap, aspects, effectiveReaderSettings.offsetDoubleSpreads ?? false);
});
return () => { cancelled = true; };
} else { readerState.pageGroups = []; }
@@ -446,17 +510,26 @@
<div
class="root"
class:overlay-bars={overlayBars}
class:bar-left={barPosition === "left"}
class:bar-right={barPosition === "right"}
role="presentation"
onmousemove={(e) => { if (!tapToToggleBar && (e.clientY < 60 || window.innerHeight - e.clientY < 60)) showUi(); }}
onmousemove={(e) => {
if (!tapToToggleBar) {
if (barPosition === "top" && (e.clientY < 60 || window.innerHeight - e.clientY < 60)) showUi();
if (barPosition === "left" && e.clientX < 60) showUi();
if (barPosition === "right" && window.innerWidth - e.clientX < 60) showUi();
}
}}
>
<ReaderControls
{displayChapter} {adjacent} {visibleChunkLastPage}
{fit} {fitLabel} {style} {rtl} {zoom} {zoomPct}
{zoom} {zoomPct}
isFullscreen={readerState.isFullscreen}
{isBookmarked} {hasMarkerOnPage} {currentPageMarkers}
{autoNext} {markOnNext}
uiVisible={readerState.uiVisible}
{hideTimer}
{barPosition}
progressBar={isVerticalBar ? progressBarSnippet : undefined}
onCaptureZoomAnchor={() => captureZoomAnchor(containerEl, style, zoomAnchor)}
onRestoreZoomAnchor={() => restoreZoomAnchor(containerEl, zoomAnchor)}
onMaybeMarkRead={maybeMarkCurrentRead}
@@ -464,11 +537,31 @@
onCommitMarker={commitMarker}
onDeleteMarker={deleteCurrentMarker}
onClampZoom={clampZoom}
onApplySettings={applySettings}
onDlOpen={() => readerState.dlOpen = true}
onSettingsOpen={() => setSettingsOpen(true)}
{perMangaEnabled}
{win}
/>
{#if readerState.presetOpen}
<ReaderPresetPanel
{fit} {style} {rtl} {zoom} {zoomPct}
{perMangaEnabled}
{barPosition}
onBarPositionChange={handleBarPositionChange}
onTogglePerManga={handleTogglePerManga}
onApplySettings={applySettings}
onSavePreset={handleSavePreset}
onApplyPreset={handleApplyPreset}
onUpdatePreset={updateReaderPreset}
onDeletePreset={deleteReaderPreset}
onCaptureZoomAnchor={() => captureZoomAnchor(containerEl, style, zoomAnchor)}
onRestoreZoomAnchor={() => restoreZoomAnchor(containerEl, zoomAnchor)}
onClampZoom={clampZoom}
/>
{/if}
<ReaderOverlay
{showResumeBanner}
resumePage={readerState.resumePage}
@@ -494,21 +587,42 @@
{bindContainer}
/>
<ReaderProgressBar
{style}
loading={readerState.loading}
{rtl} {sliderPage} {sliderMax} {sliderPct} {lastPage}
{displayChapter} {currentBookmark} {activeChapterMarkers} {adjacent}
uiVisible={readerState.uiVisible}
onGoPrev={goPrev}
onGoNext={goNext}
onJumpToPage={(p) => jumpToPage(p, style, lastPage, containerEl)}
/>
{#snippet progressBarSnippet()}
<ReaderProgressBar
{style}
loading={readerState.loading}
{rtl} {sliderPage} {sliderMax} {sliderPct} {lastPage}
{displayChapter} {currentBookmark} {activeChapterMarkers} {adjacent}
uiVisible={readerState.uiVisible}
{barPosition}
onGoPrev={goPrev}
onGoNext={goNext}
onJumpToPage={(p) => jumpToPage(p, style, lastPage, containerEl)}
/>
{/snippet}
{#if !isVerticalBar}
<ReaderProgressBar
{style}
loading={readerState.loading}
{rtl} {sliderPage} {sliderMax} {sliderPct} {lastPage}
{displayChapter} {currentBookmark} {activeChapterMarkers} {adjacent}
uiVisible={readerState.uiVisible}
{barPosition}
onGoPrev={goPrev}
onGoNext={goNext}
onJumpToPage={(p) => jumpToPage(p, style, lastPage, containerEl)}
/>
{/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; }
.root.overlay-bars :global(.topbar) { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.root.overlay-bars :global(.bottombar) { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; }
.root.overlay-bars :global(.viewer) { height: 100%; }
.root.bar-left :global(.viewer) { margin-left: 40px; }
.root.bar-right :global(.viewer) { margin-right: 40px; }
</style>
src/features/reader/components/ReaderControls.svelte
+338 -169
View File
@@ -1,81 +1,77 @@
<script lang="ts">
import {
X, CaretLeft, CaretRight,
Square, Rows, BookOpen, MonitorPlay,
ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical,
X, CaretLeft, CaretRight, CaretUp, CaretDown,
MagnifyingGlassMinus, MagnifyingGlassPlus,
Bookmark, MapPin, Download, Check, GearSix,
Bookmark, MapPin, Download, Check, GearSix, Sliders,
} from "phosphor-svelte";
import { store, updateSettings } from "@store/state.svelte";
import { openReader, closeReader } from "@store/state.svelte";
import { readerState, MARKER_COLORS, MARKER_COLOR_HEX, ZOOM_STEP, ZOOM_MIN, ZOOM_MAX, PAGE_STYLES } from "../store/readerState.svelte";
import { store, updateSettings } from "@store/state.svelte";
import { openReader, closeReader } from "@store/state.svelte";
import { readerState, MARKER_COLORS, MARKER_COLOR_HEX, ZOOM_STEP, ZOOM_MIN, ZOOM_MAX } from "../store/readerState.svelte";
import { fly } from "svelte/transition";
import { cubicOut, cubicIn } from "svelte/easing";
import type { FitMode } from "@store/state.svelte";
import type { Chapter } from "@types";
import type { Chapter } from "@types";
import type { Snippet } from "svelte";
interface Props {
displayChapter: Chapter | null;
adjacent: { prev: Chapter | null; next: Chapter | null };
displayChapter: Chapter | null;
adjacent: { prev: Chapter | null; next: Chapter | null };
visibleChunkLastPage: number;
fit: FitMode;
fitLabel: string;
style: string;
rtl: boolean;
zoom: number;
zoomPct: number;
isFullscreen: boolean;
isBookmarked: boolean;
hasMarkerOnPage: boolean;
currentPageMarkers: { id: string; color: import("@store/state.svelte").MarkerColor; note: string }[];
autoNext: boolean;
markOnNext: boolean;
uiVisible: boolean;
hideTimer: ReturnType<typeof setTimeout> | null;
zoom: number;
zoomPct: number;
isFullscreen: boolean;
isBookmarked: boolean;
hasMarkerOnPage: boolean;
currentPageMarkers: { id: string; color: import("@store/state.svelte").MarkerColor; note: string }[];
uiVisible: boolean;
hideTimer: ReturnType<typeof setTimeout> | null;
barPosition: "top" | "left" | "right";
progressBar?: Snippet;
onCaptureZoomAnchor: () => void;
onRestoreZoomAnchor: () => void;
onMaybeMarkRead: () => void;
onToggleBookmark: () => void;
onCommitMarker: () => void;
onDeleteMarker: () => void;
onClampZoom: (z: number) => number;
onDlOpen: () => void;
onSettingsOpen: () => void;
win: import("@tauri-apps/api/window").Window;
onMaybeMarkRead: () => void;
onToggleBookmark: () => void;
onCommitMarker: () => void;
onDeleteMarker: () => void;
onClampZoom: (z: number) => number;
onApplySettings: (patch: Parameters<typeof updateSettings>[0]) => void;
onDlOpen: () => void;
onSettingsOpen: () => void;
hasMangaOverride: boolean;
win: import("@tauri-apps/api/window").Window;
}
const {
displayChapter, adjacent, visibleChunkLastPage,
fit, fitLabel, style, rtl, zoom, zoomPct,
isFullscreen, isBookmarked, hasMarkerOnPage, currentPageMarkers,
autoNext, markOnNext, uiVisible, hideTimer,
zoom, zoomPct, isFullscreen,
isBookmarked, hasMarkerOnPage, currentPageMarkers,
uiVisible, hideTimer,
barPosition, progressBar,
onCaptureZoomAnchor, onRestoreZoomAnchor,
onMaybeMarkRead, onToggleBookmark, onCommitMarker, onDeleteMarker,
onClampZoom, onDlOpen, onSettingsOpen, win,
onClampZoom, onApplySettings, onDlOpen, onSettingsOpen,
hasMangaOverride, win,
}: Props = $props();
const isVertical = $derived(barPosition === "left" || barPosition === "right");
const popoverSide = $derived(
barPosition === "left" ? "right" :
barPosition === "right" ? "left" :
"bottom"
);
function adjustZoom(delta: number) {
onCaptureZoomAnchor();
updateSettings({ readerZoom: onClampZoom(zoom + delta) });
onApplySettings({ readerZoom: onClampZoom(zoom + delta) });
onRestoreZoomAnchor();
}
function resetZoom() {
onCaptureZoomAnchor();
updateSettings({ readerZoom: 1.0 });
onApplySettings({ readerZoom: 1.0 });
onRestoreZoomAnchor();
}
function cycleStyle() {
const idx = PAGE_STYLES.indexOf(style as typeof PAGE_STYLES[number]);
updateSettings({ pageStyle: PAGE_STYLES[(idx + 1) % PAGE_STYLES.length] });
}
function cycleFit() {
const opts: FitMode[] = ["width", "height", "screen", "original"];
updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
}
function keepUiAlive() {
readerState.uiVisible = true;
if (hideTimer) clearTimeout(hideTimer);
@@ -102,105 +98,115 @@
readerState.openMarker("", "", "yellow");
}
}
let chapterHover = $state(false);
let chapterHoverTimer: ReturnType<typeof setTimeout> | null = null;
function showChapterPopover() {
if (chapterHoverTimer) clearTimeout(chapterHoverTimer);
chapterHover = true;
}
function hideChapterPopover() {
chapterHoverTimer = setTimeout(() => { chapterHover = false; }, 120);
}
</script>
<div class="topbar" class:hidden={!uiVisible}>
<div class="topbar-left">
<div
class="bar"
class:bar-top={barPosition === "top"}
class:bar-left={barPosition === "left"}
class:bar-right={barPosition === "right"}
class:hidden={!uiVisible}
>
<div class="bar-start">
<button class="icon-btn" onclick={closeReader} title="Close reader"><X size={15} weight="light" /></button>
<button class="icon-btn"
onclick={() => { if (adjacent.prev) { onMaybeMarkRead(); openReader(adjacent.prev, store.activeChapterList); } }}
disabled={!adjacent.prev}>
<CaretLeft size={14} weight="light" />
{#if isVertical}
<CaretUp size={14} weight="light" />
{:else}
<CaretLeft size={14} weight="light" />
{/if}
</button>
<span class="ch-label">
<span class="ch-title">{store.activeManga?.title}</span>
<span class="ch-sep">/</span>
<span>{displayChapter?.name}</span>
</span>
<div
class="ch-hover-wrap"
onmouseenter={showChapterPopover}
onmouseleave={hideChapterPopover}
role="presentation"
>
<button class="ch-pill" title="{store.activeManga?.title} / {displayChapter?.name}">
{#if isVertical}
<span class="ch-info">&#xE2CE;</span>
{:else}
<span class="ch-title">{store.activeManga?.title}</span>
<span class="ch-sep">/</span>
<span class="ch-name">{displayChapter?.name}</span>
<span class="ch-page">{store.pageNumber} / {visibleChunkLastPage || "…"}</span>
{/if}
</button>
{#if chapterHover && isVertical}
<div class="ch-popover ch-popover-{popoverSide}">
<span class="ch-pop-title">{store.activeManga?.title}</span>
<span class="ch-pop-sep">/</span>
<span class="ch-pop-name">{displayChapter?.name}</span>
<span class="ch-pop-page">{store.pageNumber} / {visibleChunkLastPage || "…"}</span>
</div>
{/if}
</div>
<button class="icon-btn"
onclick={() => { if (adjacent.next) { onMaybeMarkRead(); openReader(adjacent.next, store.activeChapterList); } }}
disabled={!adjacent.next}>
<CaretRight size={14} weight="light" />
{#if isVertical}
<CaretDown size={14} weight="light" />
{:else}
<CaretRight size={14} weight="light" />
{/if}
</button>
<span class="page-label">{store.pageNumber} / {visibleChunkLastPage || "…"}</span>
{#if !isVertical}
<span class="bar-sep"></span>
{/if}
</div>
<div class="topbar-right">
<div class="top-sep"></div>
<button class="mode-btn" onclick={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>
{#if isVertical && progressBar}
<div class="bar-middle">
{@render progressBar()}
</div>
{/if}
<div class="bar-end">
<div class="zoom-wrap">
<div class="zoom-inline">
<button class="zoom-step-btn" onclick={() => adjustZoom(-ZOOM_STEP)} title="Zoom out" disabled={zoom <= ZOOM_MIN}>
<button class="icon-btn zoom-icon-btn" onclick={() => adjustZoom(-ZOOM_STEP)} title="Zoom out" disabled={zoom <= ZOOM_MIN}>
<MagnifyingGlassMinus size={13} weight="light" />
</button>
<div class="zoom-divider"></div>
<button class="zoom-pct-btn" onclick={() => readerState.zoomOpen = !readerState.zoomOpen} title="Click to adjust zoom">
{zoomPct}%
</button>
<button class="zoom-step-btn" onclick={() => adjustZoom(ZOOM_STEP)} title="Zoom in" disabled={zoom >= ZOOM_MAX}>
<div class="zoom-divider"></div>
<button class="icon-btn zoom-icon-btn" onclick={() => adjustZoom(ZOOM_STEP)} title="Zoom in" disabled={zoom >= ZOOM_MAX}>
<MagnifyingGlassPlus size={13} weight="light" />
</button>
</div>
{#if readerState.zoomOpen}
<div class="zoom-popover">
<div class="popover zoom-popover popover-{popoverSide}">
<div class="zoom-slider-row">
<input type="range" class="zoom-slider" min={10} max={100} step={5} value={zoomPct}
oninput={(e) => { onCaptureZoomAnchor(); updateSettings({ readerZoom: onClampZoom(Number(e.currentTarget.value) / 100) }); onRestoreZoomAnchor(); }} />
oninput={(e) => { onCaptureZoomAnchor(); onApplySettings({ readerZoom: onClampZoom(Number(e.currentTarget.value) / 100) }); onRestoreZoomAnchor(); }} />
</div>
<button class="zoom-reset" onclick={resetZoom} disabled={zoom === 1.0}>Reset</button>
</div>
{/if}
</div>
<button class="mode-btn" class:active={rtl} onclick={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}>
<ArrowsLeftRight size={14} weight="light" /><span class="mode-label">{rtl ? "RTL" : "LTR"}</span>
</button>
<button class="mode-btn" onclick={cycleStyle} title="Cycle view mode">
{#if style === "single"}<Square size={14} weight="light" />
{:else if style === "fade"}<MonitorPlay size={14} weight="light" />
{:else if style === "double"}<BookOpen size={14} weight="light" />
{:else}<Rows size={14} weight="light" />{/if}
<span class="mode-label">{style}</span>
</button>
<div class="mode-extras">
{#if style === "double"}
<button class="mode-btn" class:active={store.settings.offsetDoubleSpreads}
onclick={() => updateSettings({ offsetDoubleSpreads: !store.settings.offsetDoubleSpreads })}>
<span class="mode-label">Offset</span>
</button>
{/if}
{#if style === "longstrip"}
<button class="mode-btn" class:active={store.settings.pageGap}
onclick={() => updateSettings({ pageGap: !store.settings.pageGap })}>
<span class="mode-label">Gap</span>
</button>
<button class="mode-btn" class:active={autoNext}
onclick={() => updateSettings({ autoNextChapter: !autoNext })}>
<span class="mode-label">Auto</span>
</button>
{/if}
{#if !autoNext}
<button class="mode-btn" class:active={markOnNext}
onclick={() => updateSettings({ markReadOnNext: !markOnNext })}>
<span class="mode-label">Mk.Read</span>
</button>
{/if}
</div>
<button class="mode-btn" onclick={onDlOpen}>
<Download size={14} weight="light" />
</button>
<div class="marker-wrap">
<button
class="icon-btn"
@@ -214,7 +220,7 @@
</button>
{#if readerState.markerOpen}
<div class="marker-popover" role="presentation"
<div class="popover marker-popover popover-{popoverSide}" role="presentation"
onclick={(e) => e.stopPropagation()}
onmouseenter={keepUiAlive}
>
@@ -270,6 +276,20 @@
<Bookmark size={15} weight={isBookmarked ? "fill" : "regular"} />
</button>
<button class="icon-btn" onclick={onDlOpen}>
<Download size={14} weight="light" />
</button>
<button class="icon-btn" class:active={hasMangaOverride}
onclick={() => { readerState.presetOpen = true; readerState.markerOpen = false; readerState.zoomOpen = false; readerState.dlOpen = false; }}
title="Reader settings">
<Sliders size={13} weight="regular" />
</button>
<button class="icon-btn" onclick={onSettingsOpen} title="Settings">
<GearSix size={13} weight="regular" />
</button>
<div class="wc-wrap">
<button
class="icon-btn"
@@ -284,54 +304,98 @@
</svg>
</button>
{#if readerState.winOpen}
<div class="wc-clip" onmouseenter={wcResetTimer} onmousemove={wcResetTimer}>
<div
class="wc-clip wc-clip-{popoverSide}"
onmouseenter={wcResetTimer}
onmousemove={wcResetTimer}
>
<div
class="wc-bar"
role="presentation"
onclick={(e) => e.stopPropagation()}
in:fly={{ y: '-100%', duration: 200, easing: cubicOut }}
out:fly={{ y: '-100%', duration: 150, easing: cubicIn }}
in:fly={isVertical
? (barPosition === "left" ? { x: '-100%', duration: 200, easing: cubicOut } : { x: '100%', duration: 200, easing: cubicOut })
: { y: '-100%', duration: 200, easing: cubicOut }}
out:fly={isVertical
? (barPosition === "left" ? { x: '-100%', duration: 150, easing: cubicIn } : { x: '100%', duration: 150, easing: cubicIn })
: { y: '-100%', duration: 150, easing: cubicIn }}
>
<button class="wc-icon-btn" onclick={() => { readerState.winOpen = false; onSettingsOpen(); }} title="Settings">
<GearSix size={13} weight="regular" />
</button>
<div class="wc-bar-sep"></div>
<button class="wc-icon-btn" onclick={() => { readerState.winOpen = false; win.minimize(); }} title="Minimize">
<svg width="10" height="2" viewBox="0 0 10 2"><line x1="0" y1="1" x2="10" y2="1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
<button class="wc-icon-btn" onclick={() => { readerState.winOpen = false; win.toggleMaximize(); }} title={isFullscreen ? "Exit Fullscreen" : "Fullscreen"}>
{#if isFullscreen}
<svg width="11" height="11" viewBox="0 0 11 11">
<polyline points="1,4 1,1 4,1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="7,1 10,1 10,4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="10,7 10,10 7,10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="4,10 1,10 1,7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<button class="wc-icon-btn" onclick={() => { readerState.winOpen = false; win.minimize(); }} title="Minimize">
<svg width="10" height="2" viewBox="0 0 10 2"><line x1="0" y1="1" x2="10" y2="1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
<button class="wc-icon-btn" onclick={() => { readerState.winOpen = false; win.toggleMaximize(); }} title={isFullscreen ? "Exit Fullscreen" : "Fullscreen"}>
{#if isFullscreen}
<svg width="11" height="11" viewBox="0 0 11 11">
<polyline points="1,4 1,1 4,1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="7,1 10,1 10,4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="10,7 10,10 7,10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="4,10 1,10 1,7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{:else}
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.75" y="0.75" width="8.5" height="8.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
{/if}
</button>
<button class="wc-icon-btn wc-icon-close" onclick={() => { readerState.winOpen = false; win.close(); }} title="Close">
<svg width="10" height="10" viewBox="0 0 10 10">
<line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
{:else}
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.75" y="0.75" width="8.5" height="8.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
{/if}
</button>
<button class="wc-icon-btn wc-icon-close" onclick={() => { readerState.winOpen = false; win.close(); }} title="Close">
<svg width="10" height="10" viewBox="0 0 10 10">
<line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</button>
</div>
</button>
</div>
</div>
{/if}
</div>
</div>
</div>
<style>
.topbar { display: flex; align-items: center; justify-content: space-between; 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; overflow: visible; }
.topbar.hidden { opacity: 0; pointer-events: none; }
.bar {
display: flex;
align-items: center;
gap: var(--sp-1);
background: var(--bg-void);
flex-shrink: 0;
position: relative;
z-index: 2;
transition: opacity 0.25s ease;
overflow: visible;
}
.bar.hidden { opacity: 0; pointer-events: none; }
.topbar-left { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; flex: 1; overflow: hidden; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.mode-extras { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.bar-top {
flex-direction: row;
justify-content: space-between;
padding: 0 var(--sp-3);
height: 40px;
border-bottom: 1px solid var(--border-dim);
}
.bar-left, .bar-right {
flex-direction: column;
justify-content: space-between;
padding: var(--sp-3) 0;
width: 40px;
position: fixed;
top: 0;
bottom: 0;
z-index: 2;
border-bottom: none;
}
.bar-left { left: 0; border-right: 1px solid var(--border-dim); }
.bar-right { right: 0; border-left: 1px solid var(--border-dim); }
.bar-start, .bar-end {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.bar-top .bar-start { flex: 1; overflow: hidden; }
.bar-left .bar-start,
.bar-left .bar-end,
.bar-right .bar-start,
.bar-right .bar-end {
flex-direction: column;
}
.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); }
@@ -339,25 +403,104 @@
.icon-btn.active { color: var(--accent-fg); }
.marker-btn-has { color: var(--marker-color, var(--accent-fg)) !important; }
.ch-label { 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; min-width: 0; }
.ch-hover-wrap { position: relative; min-width: 0; }
.ch-pill {
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;
min-width: 0;
padding: 2px 4px;
border-radius: var(--radius-sm);
background: none;
cursor: default;
transition: background var(--t-fast);
}
.bar-left .ch-pill, .bar-right .ch-pill {
width: 28px;
height: 28px;
justify-content: center;
padding: 0;
}
.ch-info { font-size: 15px; line-height: 1; color: var(--text-faint); flex-shrink: 0; }
.ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-sep { color: var(--text-faint); flex-shrink: 0; }
.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); }
.ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-page { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
.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; }
.ch-popover {
position: absolute;
background: var(--bg-raised);
border: 1px solid var(--border-base);
border-radius: var(--radius-lg);
padding: var(--sp-2) var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
font-size: var(--text-sm);
pointer-events: none;
animation: scaleIn 0.1s ease both;
}
.ch-popover-right { left: calc(100% + 8px); top: 50%; translate: 0 -50%; transform-origin: left center; }
.ch-popover-left { right: calc(100% + 8px); top: 50%; translate: 0 -50%; transform-origin: right center; }
.ch-pop-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
.ch-pop-sep { color: var(--text-faint); }
.ch-pop-name { color: var(--text-muted); }
.ch-pop-page { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.zoom-wrap { position: relative; flex-shrink: 0; }
.zoom-inline { display: flex; align-items: center; gap: 1px; background: var(--bg-overlay); border: 1px solid var(--border-base); border-radius: var(--radius-sm); overflow: hidden; }
.zoom-step-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 24px; color: var(--text-muted); transition: color var(--t-base), background var(--t-base); }
.zoom-step-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
.zoom-step-btn:disabled { opacity: 0.25; cursor: default; }
.zoom-pct-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-secondary); padding: 0 var(--sp-2); height: 24px; min-width: 38px; text-align: center; transition: color var(--t-base), background var(--t-base); border-left: 1px solid var(--border-dim); border-right: 1px solid var(--border-dim); }
.bar-sep { width: 1px; height: 16px; background: var(--border-dim); flex-shrink: 0; margin: 0 var(--sp-1); }
.zoom-wrap { position: relative; flex-shrink: 0; }
.zoom-inline { display: flex; align-items: center; }
.bar-left .zoom-inline, .bar-right .zoom-inline { flex-direction: column; }
.zoom-icon-btn { width: 28px; height: 28px; }
.zoom-divider {
background: var(--border-dim);
flex-shrink: 0;
}
.bar-top .zoom-divider { width: 1px; height: 16px; }
.bar-left .zoom-divider,
.bar-right .zoom-divider { height: 1px; width: 16px; }
.zoom-pct-btn {
font-family: var(--font-ui);
font-size: var(--text-2xs);
letter-spacing: var(--tracking-wide);
color: var(--text-secondary);
height: 28px;
min-width: 38px;
text-align: center;
transition: color var(--t-base), background var(--t-base);
padding: 0 var(--sp-1);
border-radius: 0;
}
.bar-left .zoom-pct-btn,
.bar-right .zoom-pct-btn { height: 24px; min-width: unset; width: 28px; writing-mode: vertical-rl; font-size: 9px; padding: var(--sp-1) 0; }
.zoom-pct-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
.zoom-popover { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; min-width: 180px; animation: scaleIn 0.1s ease both; transform-origin: top center; }
.popover {
position: absolute;
background: var(--bg-raised);
border: 1px solid var(--border-base);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 100;
animation: scaleIn 0.1s ease both;
}
.popover-bottom { top: calc(100% + 6px); left: 50%; translate: -50% 0; transform-origin: top center; }
.popover-right { left: calc(100% + 8px); top: 50%; translate: 0 -50%; transform-origin: left center; }
.popover-left { right: calc(100% + 8px); top: 50%; translate: 0 -50%; transform-origin: right center; }
.zoom-popover { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 180px; }
.zoom-slider-row { display: flex; align-items: center; gap: var(--sp-2); }
.zoom-slider { flex: 1; 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; }
@@ -366,7 +509,7 @@
.zoom-reset:disabled { opacity: 0.3; cursor: default; }
.marker-wrap { position: relative; flex-shrink: 0; }
.marker-popover { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); z-index: 100; animation: scaleIn 0.1s ease both; transform-origin: top right; }
.marker-popover { width: 240px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.marker-pop-header { display: flex; align-items: center; justify-content: space-between; }
.marker-pop-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.marker-delete-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
@@ -390,11 +533,25 @@
.wc-wrap { position: static; flex-shrink: 0; }
.wc-clip {
position: absolute;
z-index: 100;
}
.wc-clip-bottom {
top: 100%;
right: var(--sp-3);
z-index: 100;
clip-path: inset(0 -20px -20px -20px);
}
.wc-clip-right {
left: calc(100% + 1px);
top: auto;
bottom: var(--sp-3);
clip-path: inset(-20px -20px -20px 0);
}
.wc-clip-left {
right: calc(100% + 1px);
top: auto;
bottom: var(--sp-3);
clip-path: inset(-20px 0 -20px -20px);
}
.wc-bar {
display: flex;
align-items: center;
@@ -402,10 +559,12 @@
padding: 3px 10px 4px;
background: var(--bg-raised);
border: 1px solid var(--border-base);
border-top: none;
box-shadow: 0 6px 16px rgba(0,0,0,0.45);
border-radius: 0 0 8px 8px;
}
.wc-clip-bottom .wc-bar { border-top: none; border-radius: 0 0 8px 8px; flex-direction: row; }
.wc-clip-right .wc-bar { border-left: none; border-radius: 0 8px 8px 0; flex-direction: column; padding: 10px 4px; }
.wc-clip-left .wc-bar { border-right: none; border-radius: 8px 0 0 8px; flex-direction: column; padding: 10px 4px; }
.wc-icon-btn {
display: flex;
align-items: center;
@@ -422,7 +581,17 @@
}
.wc-icon-btn:hover { color: var(--text-primary); background: var(--bg-overlay); }
.wc-icon-close:hover { color: #fff; background: #c0392b; }
.wc-bar-sep { width: 1px; height: 12px; background: var(--border-dim); margin: 0 2px; flex-shrink: 0; }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
.bar-middle {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 0;
padding: var(--sp-1) 0;
overflow: hidden;
}
</style>
src/features/reader/components/ReaderPresetPanel.svelte
+731
View File
@@ -0,0 +1,731 @@
<script lang="ts">
import {
X, Check, Trash, FloppyDisk,
Square, Rows, BookOpen, MonitorPlay,
ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical,
ArrowsHorizontal,
SidebarSimple,
} from "phosphor-svelte";
import type { ReaderSettings, ReaderPreset, FitMode } from "@store/state.svelte";
import { store, updateSettings } from "@store/state.svelte";
import { readerState, PAGE_STYLES, ZOOM_MIN, ZOOM_MAX } from "../store/readerState.svelte";
import { fade, fly } from "svelte/transition";
import { cubicOut } from "svelte/easing";
interface Props {
fit: FitMode;
style: string;
rtl: boolean;
zoom: number;
zoomPct: number;
perMangaEnabled: boolean;
onTogglePerManga: () => void;
onSavePreset: (name: string) => void;
onApplyPreset: (settings: ReaderSettings) => void;
onUpdatePreset: (id: string, patch: Partial<Pick<ReaderPreset, "name" | "settings">>) => void;
onDeletePreset: (id: string) => void;
onApplySettings: (patch: Partial<ReaderSettings>) => void;
onCaptureZoomAnchor: () => void;
onRestoreZoomAnchor: () => void;
onClampZoom: (z: number) => number;
barPosition: "top" | "left" | "right";
onBarPositionChange: (pos: "top" | "left" | "right") => void;
}
const {
fit, style, rtl, zoom, zoomPct,
perMangaEnabled, onTogglePerManga,
onSavePreset, onApplyPreset, onUpdatePreset, onDeletePreset,
onApplySettings,
onCaptureZoomAnchor, onRestoreZoomAnchor, onClampZoom,
barPosition, onBarPositionChange,
}: Props = $props();
const presets = $derived(store.settings.readerPresets ?? []);
const effectiveSettings = $derived.by(() => {
const mangaId = store.activeManga?.id;
const override = mangaId != null ? (store.settings.mangaReaderSettings ?? {})[mangaId] : undefined;
return override ? { ...store.settings, ...override } : store.settings;
});
let presetSaving = $state(false);
let presetNameInput = $state("");
let presetEditId = $state<string | null>(null);
let presetEditName = $state("");
function close() {
readerState.presetOpen = false;
presetSaving = false;
presetNameInput = "";
presetEditId = null;
}
function commitSavePreset() {
if (!presetNameInput.trim()) return;
onSavePreset(presetNameInput.trim());
presetSaving = false;
presetNameInput = "";
}
function commitRenamePreset() {
if (!presetEditId || !presetEditName.trim()) return;
onUpdatePreset(presetEditId, { name: presetEditName.trim() });
presetEditId = null;
presetEditName = "";
}
function describeSettings(s: ReaderSettings): string {
const parts = [s.pageStyle ?? "single", s.fitMode ?? "width", (s.readingDirection ?? "ltr") === "rtl" ? "RTL" : "LTR"];
if ((s.readerZoom ?? 1) !== 1.0) parts.push(`${Math.round((s.readerZoom ?? 1) * 100)}%`);
if (!s.pageGap) parts.push("no gap");
return parts.join(" · ");
}
function setZoom(v: number) {
onCaptureZoomAnchor();
onApplySettings({ readerZoom: onClampZoom(v) });
onRestoreZoomAnchor();
}
const fitOptions: { value: FitMode; label: string; icon: any }[] = [
{ value: "width", label: "Fit Width", icon: ArrowsLeftRight },
{ value: "height", label: "Fit Height", icon: ArrowsVertical },
{ value: "screen", label: "Fit Screen", icon: ArrowsIn },
{ value: "original", label: "Original", icon: ArrowsOut },
];
const styleOptions: { value: string; label: string; icon: any }[] = [
{ value: "single", label: "Single", icon: Square },
{ value: "double", label: "Double", icon: BookOpen },
{ value: "fade", label: "Fade", icon: MonitorPlay },
{ value: "longstrip", label: "Long Strip", icon: Rows },
];
const barOptions: { value: "top" | "left" | "right"; label: string }[] = [
{ value: "left", label: "Left" },
{ value: "top", label: "Top" },
{ value: "right", label: "Right" },
];
</script>
<div class="backdrop" role="presentation" onclick={close} transition:fade={{ duration: 150 }}></div>
<div
class="panel"
role="dialog"
aria-label="Reader settings & presets"
transition:fly={{ x: 320, duration: 220, easing: cubicOut }}
>
<div class="panel-header">
<span class="panel-title">Reader Settings</span>
{#if store.activeManga}
<span class="panel-manga">{store.activeManga.title}</span>
{/if}
<button class="close-btn" onclick={close}><X size={14} weight="light" /></button>
</div>
<div class="panel-body">
<section class="section">
<p class="section-label">Page Style</p>
<div class="option-grid">
{#each styleOptions as o}
<button
class="option-tile"
class:active={style === o.value}
onclick={() => onApplySettings({ pageStyle: o.value as typeof PAGE_STYLES[number] })}
>
<div class="tile-icon"><svelte:component this={o.icon} size={18} weight={style === o.value ? "fill" : "light"} /></div>
<span class="tile-label">{o.label}</span>
</button>
{/each}
</div>
{#if style === "double"}
<label class="toggle-row">
<span class="toggle-label">Offset double spreads</span>
<button
class="toggle"
class:on={effectiveSettings.offsetDoubleSpreads}
onclick={() => onApplySettings({ offsetDoubleSpreads: !effectiveSettings.offsetDoubleSpreads })}
role="switch"
aria-checked={effectiveSettings.offsetDoubleSpreads}
><span class="toggle-knob"></span></button>
</label>
{/if}
{#if style === "longstrip"}
<label class="toggle-row">
<span class="toggle-label">Gap between pages</span>
<button
class="toggle"
class:on={effectiveSettings.pageGap ?? true}
onclick={() => onApplySettings({ pageGap: !(effectiveSettings.pageGap ?? true) })}
role="switch"
aria-checked={effectiveSettings.pageGap ?? true}
><span class="toggle-knob"></span></button>
</label>
<label class="toggle-row">
<span class="toggle-label">Auto next chapter</span>
<button
class="toggle"
class:on={store.settings.autoNextChapter ?? false}
onclick={() => updateSettings({ autoNextChapter: !(store.settings.autoNextChapter ?? false) })}
role="switch"
aria-checked={store.settings.autoNextChapter ?? false}
><span class="toggle-knob"></span></button>
</label>
{/if}
</section>
<section class="section">
<p class="section-label">Fit Mode</p>
<div class="option-grid">
{#each fitOptions as o}
<button
class="option-tile"
class:active={fit === o.value}
onclick={() => onApplySettings({ fitMode: o.value })}
>
<div class="tile-icon"><svelte:component this={o.icon} size={18} weight={fit === o.value ? "fill" : "light"} /></div>
<span class="tile-label">{o.label}</span>
</button>
{/each}
</div>
</section>
<section class="section">
<p class="section-label">Reading Direction</p>
<div class="dir-row">
<button
class="dir-btn"
class:active={!rtl}
onclick={() => onApplySettings({ readingDirection: "ltr" })}
>
<ArrowsHorizontal size={14} weight="light" />
<span>Left to Right</span>
</button>
<button
class="dir-btn"
class:active={rtl}
onclick={() => onApplySettings({ readingDirection: "rtl" })}
>
<ArrowsHorizontal size={14} weight="light" style="transform:scaleX(-1)" />
<span>Right to Left</span>
</button>
</div>
</section>
<section class="section">
<p class="section-label">Bar Position</p>
<div class="bar-grid">
{#each barOptions as o}
<button
class="bar-tile"
class:active={barPosition === o.value}
onclick={() => onBarPositionChange(o.value)}
>
<div class="bar-tile-preview bar-preview-{o.value}">
<div class="bar-preview-strip"></div>
<div class="bar-preview-content"></div>
</div>
<span class="tile-label">{o.label}</span>
</button>
{/each}
</div>
</section>
<section class="section">
<div class="section-header-row">
<p class="section-label" style="margin:0">Zoom</p>
<span class="zoom-readout">{zoomPct}%</span>
</div>
<div class="zoom-row">
<button class="zoom-step" onclick={() => setZoom(zoom - 0.1)} disabled={zoom <= ZOOM_MIN}>−</button>
<input
type="range"
class="zoom-slider"
min={Math.round(ZOOM_MIN * 100)}
max={Math.round(ZOOM_MAX * 100)}
step={5}
value={zoomPct}
oninput={(e) => setZoom(Number(e.currentTarget.value) / 100)}
/>
<button class="zoom-step" onclick={() => setZoom(zoom + 0.1)} disabled={zoom >= ZOOM_MAX}>+</button>
</div>
</section>
<section class="section">
<p class="section-label">Image</p>
<label class="toggle-row">
<span class="toggle-label">Optimize contrast</span>
<button
class="toggle"
class:on={effectiveSettings.optimizeContrast}
onclick={() => onApplySettings({ optimizeContrast: !effectiveSettings.optimizeContrast })}
role="switch"
aria-checked={effectiveSettings.optimizeContrast}
><span class="toggle-knob"></span></button>
</label>
<label class="toggle-row">
<span class="toggle-label">Mark read on chapter advance</span>
<button
class="toggle"
class:on={store.settings.markReadOnNext ?? true}
onclick={() => updateSettings({ markReadOnNext: !(store.settings.markReadOnNext ?? true) })}
role="switch"
aria-checked={store.settings.markReadOnNext ?? true}
><span class="toggle-knob"></span></button>
</label>
</section>
{#if store.activeManga}
<section class="section">
<label class="toggle-row">
<span class="toggle-label">Per-manga settings</span>
<button
class="toggle"
class:on={perMangaEnabled}
onclick={onTogglePerManga}
role="switch"
aria-checked={perMangaEnabled}
><span class="toggle-knob"></span></button>
</label>
</section>
{/if}
<section class="section">
<div class="section-header-row">
<p class="section-label" style="margin:0">Saved Presets</p>
{#if !presetSaving}
<button class="new-preset-btn" onclick={() => { presetSaving = true; presetNameInput = ""; }}>+ New</button>
{/if}
</div>
{#if presetSaving}
<div class="preset-name-row">
<input
class="preset-name-input"
placeholder="Preset name…"
bind:value={presetNameInput}
onkeydown={(e) => { if (e.key === "Enter") commitSavePreset(); if (e.key === "Escape") presetSaving = false; }}
/>
<button class="small-btn" disabled={!presetNameInput.trim()} onclick={commitSavePreset}><Check size={12} weight="bold" /></button>
<button class="small-btn" onclick={() => presetSaving = false}><X size={12} weight="light" /></button>
</div>
{/if}
{#if presets.length === 0 && !presetSaving}
<p class="empty-hint">No presets saved yet. Save the current settings to create one.</p>
{:else}
<div class="preset-list">
{#each presets as p (p.id)}
{#if presetEditId === p.id}
<div class="preset-name-row">
<input
class="preset-name-input"
bind:value={presetEditName}
onkeydown={(e) => { if (e.key === "Enter") commitRenamePreset(); if (e.key === "Escape") presetEditId = null; }}
/>
<button class="small-btn" disabled={!presetEditName.trim()} onclick={commitRenamePreset}><Check size={12} weight="bold" /></button>
<button class="small-btn" onclick={() => presetEditId = null}><X size={12} weight="light" /></button>
</div>
{:else}
<div class="preset-row">
<button class="preset-apply" onclick={() => { onApplyPreset(p.settings); close(); }}>
<span class="preset-name">{p.name}</span>
<span class="preset-desc">{describeSettings(p.settings)}</span>
</button>
<button class="small-btn" title="Rename" onclick={() => { presetEditId = p.id; presetEditName = p.name; }}>
<FloppyDisk size={12} weight="regular" />
</button>
<button class="small-btn danger" title="Delete" onclick={() => onDeletePreset(p.id)}>
<Trash size={12} weight="regular" />
</button>
</div>
{/if}
{/each}
</div>
{/if}
</section>
</div>
</div>
<style>
.backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-reader) + 20);
background: rgba(0, 0, 0, 0.35);
}
.panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
z-index: calc(var(--z-reader) + 21);
background: var(--bg-surface);
border-left: 1px solid var(--border-base);
display: flex;
flex-direction: column;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
}
.panel-header {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 0 var(--sp-4);
height: 48px;
border-bottom: 1px solid var(--border-dim);
flex-shrink: 0;
}
.panel-title {
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
letter-spacing: var(--tracking-tight);
}
.panel-manga {
flex: 1;
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
.close-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);
}
.close-btn:hover { color: var(--text-primary); background: var(--bg-overlay); }
.panel-body {
flex: 1;
overflow-y: auto;
padding: var(--sp-3) var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-4);
scrollbar-width: thin;
scrollbar-color: var(--border-dim) transparent;
}
.section { display: flex; flex-direction: column; gap: var(--sp-2); }
.section-label {
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--text-faint);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin: 0 0 var(--sp-1);
}
.section-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-1);
}
.option-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-1);
}
.option-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--sp-2) var(--sp-1);
border-radius: var(--radius-md);
border: 1px solid var(--border-dim);
background: var(--bg-overlay);
color: var(--text-muted);
cursor: pointer;
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.option-tile:hover { color: var(--text-primary); background: var(--bg-raised); border-color: var(--border-strong); }
.option-tile.active { color: var(--accent-fg); background: var(--accent-muted); border-color: var(--accent-dim); }
.tile-icon { display: flex; align-items: center; justify-content: center; }
.tile-label { font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: capitalize; line-height: 1; }
.bar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-1);
}
.bar-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--sp-2) var(--sp-1);
border-radius: var(--radius-md);
border: 1px solid var(--border-dim);
background: var(--bg-overlay);
color: var(--text-muted);
cursor: pointer;
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.bar-tile:hover { color: var(--text-primary); background: var(--bg-raised); border-color: var(--border-strong); }
.bar-tile.active { color: var(--accent-fg); background: var(--accent-muted); border-color: var(--accent-dim); }
.bar-tile-preview {
width: 32px;
height: 22px;
border-radius: 3px;
border: 1px solid currentColor;
position: relative;
overflow: hidden;
opacity: 0.7;
display: flex;
}
.bar-tile.active .bar-tile-preview { opacity: 1; }
.bar-preview-strip {
background: currentColor;
opacity: 0.5;
flex-shrink: 0;
}
.bar-preview-content {
flex: 1;
background: color-mix(in srgb, currentColor 8%, transparent);
}
.bar-preview-top { flex-direction: column; }
.bar-preview-left { flex-direction: row; }
.bar-preview-right { flex-direction: row-reverse; }
.bar-preview-top .bar-preview-strip { height: 5px; width: 100%; }
.bar-preview-left .bar-preview-strip { width: 5px; height: 100%; }
.bar-preview-right .bar-preview-strip { width: 5px; height: 100%; }
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-1) 0;
}
.toggle-label {
font-size: var(--text-xs);
color: var(--text-secondary);
}
.toggle {
position: relative;
width: 32px;
height: 18px;
border-radius: 9px;
background: var(--border-strong);
border: none;
cursor: pointer;
flex-shrink: 0;
transition: background var(--t-base);
}
.toggle.on { background: var(--accent-fg); }
.toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
transition: left var(--t-base);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle.on .toggle-knob { left: 16px; }
.dir-row { display: flex; gap: var(--sp-2); }
.dir-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-md);
border: 1px solid var(--border-dim);
background: var(--bg-overlay);
color: var(--text-muted);
font-size: var(--text-xs);
cursor: pointer;
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.dir-btn:hover { color: var(--text-primary); background: var(--bg-raised); border-color: var(--border-strong); }
.dir-btn.active { color: var(--accent-fg); background: var(--accent-muted); border-color: var(--accent-dim); }
.zoom-readout {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--text-secondary);
letter-spacing: var(--tracking-wide);
}
.zoom-row {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.zoom-step {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-dim);
background: var(--bg-overlay);
color: var(--text-muted);
font-size: var(--text-base);
line-height: 1;
flex-shrink: 0;
transition: color var(--t-fast), background var(--t-fast);
}
.zoom-step:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
.zoom-step:disabled { opacity: 0.25; cursor: default; }
.zoom-slider {
flex: 1;
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: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-fg);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}
.new-preset-btn {
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--accent-fg);
letter-spacing: var(--tracking-wide);
background: none;
border: none;
cursor: pointer;
padding: 2px var(--sp-1);
border-radius: var(--radius-sm);
transition: background var(--t-fast);
}
.new-preset-btn:hover { background: var(--accent-muted); }
.preset-name-row { display: flex; align-items: center; gap: var(--sp-1); }
.preset-name-input {
flex: 1;
background: var(--bg-raised);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 5px 8px;
font-size: var(--text-xs);
color: var(--text-primary);
outline: none;
font-family: inherit;
transition: border-color var(--t-base);
}
.preset-name-input:focus { border-color: var(--accent-dim); }
.preset-list { display: flex; flex-direction: column; gap: 2px; }
.preset-row { display: flex; align-items: center; gap: var(--sp-1); }
.preset-apply {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 7px var(--sp-2);
border-radius: var(--radius-md);
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background var(--t-fast);
min-width: 0;
}
.preset-apply:hover { background: var(--bg-overlay); }
.preset-name {
font-size: var(--text-xs);
color: var(--text-secondary);
font-weight: var(--weight-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.preset-desc {
font-family: var(--font-ui);
font-size: 10px;
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.small-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--radius-sm);
border: none;
background: none;
color: var(--text-faint);
cursor: pointer;
flex-shrink: 0;
transition: color var(--t-fast), background var(--t-fast);
}
.small-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-overlay); }
.small-btn:disabled { opacity: 0.25; cursor: default; }
.small-btn.danger:hover { color: var(--color-error); background: var(--color-error-bg); }
.empty-hint {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--text-faint);
margin: 0;
padding: var(--sp-2) 0;
text-align: center;
}
</style>
src/features/reader/components/ReaderProgressBar.svelte
+201 -58
View File
@@ -17,6 +17,7 @@
activeChapterMarkers: MarkerEntry[];
adjacent: { prev: Chapter | null; next: Chapter | null };
uiVisible: boolean;
barPosition: "top" | "left" | "right";
onGoPrev: () => void;
onGoNext: () => void;
onJumpToPage: (page: number) => void;
@@ -25,71 +26,126 @@
const {
style, loading, rtl, sliderPage, sliderMax, sliderPct, lastPage,
displayChapter, currentBookmark, activeChapterMarkers, adjacent, uiVisible,
barPosition,
onGoPrev, onGoNext, onJumpToPage,
}: Props = $props();
const isVertical = $derived(barPosition === "left" || barPosition === "right");
</script>
<div class="bottombar" class:hidden={!uiVisible}>
<button class="nav-btn" onclick={onGoPrev}
disabled={loading || (style === "longstrip" ? !adjacent.prev : (sliderPage === 1 && !adjacent.prev))}>
<ArrowLeft size={13} weight="light" />
</button>
{#if !isVertical}
<div class="bottombar" class:hidden={!uiVisible}>
<button class="nav-btn" onclick={onGoPrev}
disabled={loading || (style === "longstrip" ? !adjacent.prev : (sliderPage === 1 && !adjacent.prev))}>
<ArrowLeft size={13} weight="light" />
</button>
{#if sliderMax > 1}
<div
class="slider-wrap"
class:dragging={readerState.sliderDragging}
role="slider"
aria-valuenow={sliderPage}
aria-valuemin={1}
aria-valuemax={sliderMax}
tabindex="-1"
onmouseenter={() => readerState.sliderHover = true}
onmouseleave={() => { readerState.sliderHover = false; readerState.sliderDragging = false; }}
onmousedown={(e) => {
readerState.sliderDragging = true;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
onJumpToPage(Math.round(1 + (rtl ? 1 - ratio : ratio) * (sliderMax - 1)));
}}
onmousemove={(e) => {
if (!readerState.sliderDragging) return;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
onJumpToPage(Math.round(1 + (rtl ? 1 - ratio : ratio) * (sliderMax - 1)));
}}
onmouseup={() => readerState.sliderDragging = false}
>
<div class="slider-track-bg">
<div class="slider-fill" style={rtl ? `width:${100 - sliderPct}%;margin-left:auto` : `width:${sliderPct}%`}></div>
</div>
<div class="slider-thumb" style="left:{sliderPct}%"></div>
{#if currentBookmark && currentBookmark.chapterId === displayChapter?.id}
{@const bOrd = rtl ? sliderMax - currentBookmark.pageNumber + 1 : currentBookmark.pageNumber}
{@const bPct = sliderMax > 1 ? ((bOrd - 1) / (sliderMax - 1)) * 100 : 0}
<div class="slider-checkpoint bookmark-checkpoint" style="left:{bPct}%" title="Bookmark: Page {currentBookmark.pageNumber}"></div>
{/if}
{#each activeChapterMarkers as m (m.id)}
{@const mOrd = rtl ? sliderMax - m.pageNumber + 1 : m.pageNumber}
{@const mPct = sliderMax > 1 ? ((mOrd - 1) / (sliderMax - 1)) * 100 : 0}
<div class="slider-checkpoint marker-checkpoint" style="left:{mPct}%;background:{MARKER_COLOR_HEX[m.color]}" title="{m.note ? m.note : 'Marker'} · Page {m.pageNumber}"></div>
{/each}
{#if readerState.sliderHover || readerState.sliderDragging}
<div class="slider-tooltip" style="left:{sliderPct}%">
{sliderPage} / {sliderMax}
{#if sliderMax > 1}
<div
class="slider-wrap"
class:dragging={readerState.sliderDragging}
role="slider"
aria-valuenow={sliderPage}
aria-valuemin={1}
aria-valuemax={sliderMax}
tabindex="-1"
onmouseenter={() => readerState.sliderHover = true}
onmouseleave={() => { readerState.sliderHover = false; readerState.sliderDragging = false; }}
onmousedown={(e) => {
readerState.sliderDragging = true;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
onJumpToPage(Math.round(1 + (rtl ? 1 - ratio : ratio) * (sliderMax - 1)));
}}
onmousemove={(e) => {
if (!readerState.sliderDragging) return;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
onJumpToPage(Math.round(1 + (rtl ? 1 - ratio : ratio) * (sliderMax - 1)));
}}
onmouseup={() => readerState.sliderDragging = false}
>
<div class="slider-track-bg">
<div class="slider-fill" style={rtl ? `width:${100 - sliderPct}%;margin-left:auto` : `width:${sliderPct}%`}></div>
</div>
{/if}
</div>
{/if}
<div class="slider-thumb" style="left:{sliderPct}%"></div>
<button class="nav-btn" onclick={onGoNext}
disabled={loading || (style === "longstrip" ? !adjacent.next : (sliderPage === sliderMax && !adjacent.next))}>
<ArrowRight size={13} weight="light" />
</button>
</div>
{#if currentBookmark && currentBookmark.chapterId === displayChapter?.id}
{@const bOrd = rtl ? sliderMax - currentBookmark.pageNumber + 1 : currentBookmark.pageNumber}
{@const bPct = sliderMax > 1 ? ((bOrd - 1) / (sliderMax - 1)) * 100 : 0}
<div class="slider-checkpoint bookmark-checkpoint" style="left:{bPct}%" title="Bookmark: Page {currentBookmark.pageNumber}"></div>
{/if}
{#each activeChapterMarkers as m (m.id)}
{@const mOrd = rtl ? sliderMax - m.pageNumber + 1 : m.pageNumber}
{@const mPct = sliderMax > 1 ? ((mOrd - 1) / (sliderMax - 1)) * 100 : 0}
<div class="slider-checkpoint marker-checkpoint" style="left:{mPct}%;background:{MARKER_COLOR_HEX[m.color]}" title="{m.note ? m.note : 'Marker'} · Page {m.pageNumber}"></div>
{/each}
{#if readerState.sliderHover || readerState.sliderDragging}
<div class="slider-tooltip" style="left:{sliderPct}%">
{sliderPage} / {sliderMax}
</div>
{/if}
</div>
{/if}
<button class="nav-btn" onclick={onGoNext}
disabled={loading || (style === "longstrip" ? !adjacent.next : (sliderPage === sliderMax && !adjacent.next))}>
<ArrowRight size={13} weight="light" />
</button>
</div>
{:else}
<div class="vbar-progress" class:hidden={!uiVisible} class:vbar-right={barPosition === "right"}>
{#if sliderMax > 1}
<div
class="vslider-wrap"
class:dragging={readerState.sliderDragging}
role="slider"
aria-valuenow={sliderPage}
aria-valuemin={1}
aria-valuemax={sliderMax}
tabindex="-1"
onmouseenter={() => readerState.sliderHover = true}
onmouseleave={() => { readerState.sliderHover = false; readerState.sliderDragging = false; }}
onmousedown={(e) => {
readerState.sliderDragging = true;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
onJumpToPage(Math.round(1 + ratio * (sliderMax - 1)));
}}
onmousemove={(e) => {
if (!readerState.sliderDragging) return;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
onJumpToPage(Math.round(1 + ratio * (sliderMax - 1)));
}}
onmouseup={() => readerState.sliderDragging = false}
>
<div class="vslider-track-bg">
<div class="vslider-fill" style="height:{sliderPct}%"></div>
</div>
<div class="vslider-thumb" style="top:{sliderPct}%"></div>
{#if currentBookmark && currentBookmark.chapterId === displayChapter?.id}
{@const bPct = sliderMax > 1 ? ((currentBookmark.pageNumber - 1) / (sliderMax - 1)) * 100 : 0}
<div class="vslider-checkpoint bookmark-checkpoint" style="top:{bPct}%" title="Bookmark: Page {currentBookmark.pageNumber}"></div>
{/if}
{#each activeChapterMarkers as m (m.id)}
{@const mPct = sliderMax > 1 ? ((m.pageNumber - 1) / (sliderMax - 1)) * 100 : 0}
<div class="vslider-checkpoint marker-checkpoint" style="top:{mPct}%;background:{MARKER_COLOR_HEX[m.color]}" title="{m.note ? m.note : 'Marker'} · Page {m.pageNumber}"></div>
{/each}
{#if readerState.sliderHover || readerState.sliderDragging}
<div class="vslider-tooltip" style="top:{sliderPct}%" class:tooltip-right={barPosition === "right"}>
{sliderPage} / {sliderMax}
</div>
{/if}
</div>
{/if}
</div>
{/if}
<style>
.bottombar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border-dim); background: var(--bg-void); flex-shrink: 0; transition: opacity 0.25s ease; }
@@ -109,4 +165,91 @@
.marker-checkpoint { opacity: 0.85; }
.slider-tooltip { position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-sm); padding: 2px 6px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-secondary); white-space: nowrap; pointer-events: none; z-index: 10; letter-spacing: var(--tracking-wide); }
.slider-wrap:hover .slider-track-bg, .slider-wrap.dragging .slider-track-bg { height: 5px; }
.vbar-progress {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
width: 100%;
padding: var(--sp-2) 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.vbar-progress.hidden { opacity: 0; }
.vslider-wrap {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 36px;
cursor: pointer;
pointer-events: all;
margin: var(--sp-1) 0;
}
.vslider-track-bg {
position: absolute;
top: 0;
bottom: 0;
width: 5px;
background: var(--border-strong);
border-radius: 3px;
pointer-events: none;
left: 50%;
translate: -50% 0;
}
.vslider-fill {
width: 100%;
background: var(--accent-fg);
border-radius: 3px;
transition: height 0.05s linear;
}
.vslider-thumb {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-fg);
pointer-events: none;
z-index: 2;
box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
transition: transform var(--t-fast);
}
.vslider-wrap:hover .vslider-thumb, .vslider-wrap.dragging .vslider-thumb { transform: translate(-50%, -50%) scale(1.3); }
.vslider-wrap:hover .vslider-track-bg, .vslider-wrap.dragging .vslider-track-bg { width: 7px; }
.vslider-checkpoint {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 5px;
border-radius: 2px;
pointer-events: none;
z-index: 1;
}
.vslider-tooltip {
position: absolute;
left: calc(100% + 6px);
transform: translateY(-50%);
background: var(--bg-raised);
border: 1px solid var(--border-base);
border-radius: var(--radius-sm);
padding: 2px 6px;
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--text-secondary);
white-space: nowrap;
pointer-events: none;
z-index: 10;
letter-spacing: var(--tracking-wide);
}
.vslider-tooltip.tooltip-right {
left: auto;
right: calc(100% + 6px);
}
</style>
src/features/reader/store/readerState.svelte.ts
+7 -4
View File
@@ -31,6 +31,8 @@ class ReaderState {
dlOpen = $state(false);
zoomOpen = $state(false);
winOpen = $state(false);
presetOpen = $state(false);
presetNameInput = $state("");
nextN = $state(5);
dlBusy = $state(false);
@@ -80,10 +82,11 @@ class ReaderState {
}
closeAllPopovers(): boolean {
if (this.markerOpen) { this.markerOpen = false; return true; }
if (this.zoomOpen) { this.zoomOpen = false; return true; }
if (this.dlOpen) { this.dlOpen = false; return true; }
if (this.winOpen) { this.winOpen = false; return true; }
if (this.markerOpen) { this.markerOpen = false; return true; }
if (this.zoomOpen) { this.zoomOpen = false; return true; }
if (this.dlOpen) { this.dlOpen = false; return true; }
if (this.winOpen) { this.winOpen = false; return true; }
if (this.presetOpen) { this.presetOpen = false; return true; }
return false;
}
src/store/state.svelte.ts
+55 -2
View File
@@ -95,6 +95,23 @@ export const DEFAULT_MANGA_PREFS: MangaPrefs = {
autoDownloadScanlators: [],
};
export interface ReaderSettings {
pageStyle: PageStyle;
fitMode: FitMode;
readingDirection: ReadingDirection;
readerZoom: number;
pageGap: boolean;
optimizeContrast: boolean;
offsetDoubleSpreads: boolean;
barPosition?: "top" | "left" | "right";
}
export interface ReaderPreset {
id: string;
name: string;
settings: ReaderSettings;
}
export interface Settings {
pageStyle: PageStyle; readingDirection: ReadingDirection; fitMode: FitMode;
readerZoom: number; pageGap: boolean; optimizeContrast: boolean;
@@ -128,6 +145,9 @@ export interface Settings {
extraScanDirs: string[]; serverDownloadsPath: string; serverLocalSourcePath: string;
qolAnimations: boolean;
pinnedSourceIds: string[];
readerPresets: ReaderPreset[];
mangaReaderSettings: Record<number, ReaderSettings>;
barPosition?: "top" | "left" | "right";
}
export const DEFAULT_READING_STATS: ReadingStats = {
@@ -163,6 +183,8 @@ export const DEFAULT_SETTINGS: Settings = {
extraScanDirs: [], serverDownloadsPath: "", serverLocalSourcePath: "",
qolAnimations: true,
pinnedSourceIds: [],
readerPresets: [],
mangaReaderSettings: {},
};
const STORE_VERSION = 3;
@@ -207,8 +229,10 @@ function mergeSettings(saved: any): Settings {
libraryTabSort: saved?.settings?.libraryTabSort ?? {},
libraryTabStatus: saved?.settings?.libraryTabStatus ?? {},
libraryTabFilters: saved?.settings?.libraryTabFilters ?? {},
extraScanDirs: saved?.settings?.extraScanDirs ?? [],
pinnedSourceIds: saved?.settings?.pinnedSourceIds ?? [],
extraScanDirs: saved?.settings?.extraScanDirs ?? [],
pinnedSourceIds: saved?.settings?.pinnedSourceIds ?? [],
readerPresets: saved?.settings?.readerPresets ?? [],
mangaReaderSettings: saved?.settings?.mangaReaderSettings ?? {},
};
}
@@ -419,6 +443,30 @@ class Store {
this.settings = { ...this.settings, pinnedSourceIds: pins.includes(sourceId) ? pins.filter(id => id !== sourceId) : [...pins, sourceId] };
}
saveReaderPreset(name: string, settings: ReaderSettings): string {
const id = Math.random().toString(36).slice(2);
this.settings = { ...this.settings, readerPresets: [...(this.settings.readerPresets ?? []), { id, name: name.trim() || "Preset", settings }] };
return id;
}
updateReaderPreset(id: string, patch: Partial<Pick<ReaderPreset, "name" | "settings">>) {
this.settings = { ...this.settings, readerPresets: (this.settings.readerPresets ?? []).map(p => p.id === id ? { ...p, ...patch } : p) };
}
deleteReaderPreset(id: string) {
this.settings = { ...this.settings, readerPresets: (this.settings.readerPresets ?? []).filter(p => p.id !== id) };
}
setMangaReaderSettings(mangaId: number, settings: ReaderSettings) {
this.settings = { ...this.settings, mangaReaderSettings: { ...(this.settings.mangaReaderSettings ?? {}), [mangaId]: settings } };
}
clearMangaReaderSettings(mangaId: number) {
const next = { ...(this.settings.mangaReaderSettings ?? {}) };
delete next[mangaId];
this.settings = { ...this.settings, mangaReaderSettings: next };
}
setCategories(cats: Category[]) { this.categories = cats; }
setActiveManga(next: Manga | null) { this.activeManga = next; }
setPreviewManga(next: Manga | null) { this.previewManga = next; }
@@ -452,6 +500,11 @@ export function setPageNumber(next: number)
export function setLibraryFilter(next: LibraryFilter) { store.setLibraryFilter(next); }
export function setLibraryTagFilter(next: string[]) { store.setLibraryTagFilter(next); }
export function togglePinnedSource(sourceId: string) { store.togglePinnedSource(sourceId); }
export function saveReaderPreset(name: string, settings: ReaderSettings): string { return store.saveReaderPreset(name, settings); }
export function updateReaderPreset(id: string, patch: Partial<Pick<ReaderPreset, "name" | "settings">>) { store.updateReaderPreset(id, patch); }
export function deleteReaderPreset(id: string) { store.deleteReaderPreset(id); }
export function setMangaReaderSettings(mangaId: number, settings: ReaderSettings) { store.setMangaReaderSettings(mangaId, settings); }
export function clearMangaReaderSettings(mangaId: number) { store.clearMangaReaderSettings(mangaId); }
export function updateSettings(patch: Partial<Settings>) { store.updateSettings(patch); }
export function resetKeybinds() { store.resetKeybinds(); }
export function clearSearchCache() { store.clearSearchCache(); }