Files
bookhoard/web/src/reader/settings-manager.ts
T
john-okeefe e500039d1b feat(reader): webtoon reading mode + brightness/contrast/night filters
Phase 4 of the reader redesign (foliate-js ea268df):

- Webtoon mode for comics: continuous vertical scroll of all pages
  (900px centered column on wide screens), lazy-loaded with a 150%
  IntersectionObserver margin, far pages unloaded to bound memory
  with stable aspect-ratio placeholders so the scrollbar never jumps.
  Chosen per book (Paged | Webtoon segmented control in Settings →
  Layout & Display; stored in localStorage per media item since a
  webtoon title and a paged manga volume want different flows).
  Toggling reloads the reader — the renderer is chosen at open time —
  and progress restores from the saved page. Relocate events flow
  through the same pipeline, so the slider, progress saving, back
  stack, tap zones, and edge zones all work unchanged. Zoom/fit/
  magnifier/spread controls hide in webtoon (natural-width scroll).
- Display filters for fixed-layout: brightness (30-130%) and
  contrast (70-130%) sliders with live preview, plus Night Mode
  (invert) — also a quick row in the ⋯ tools menu. One --fx-filter
  CSS var drives everything: ::part(filter) on foliate-view iframes
  (forwarded via the new exportparts attribute) and the webtoon
  page images alike. Persisted as fx_brightness/fx_contrast/fx_invert
  (types + defaults both sides); Restore Defaults resets them.
2026-08-18 08:25:00 -04:00

130 lines
3.4 KiB
TypeScript

import { getToken } from "../storage";
const LOCALSTORAGE_KEY = "reader_settings_local";
export async function loadSettings(): Promise<ReaderSettings> {
const token = getToken();
if (!token) {
const local = localStorage.getItem(LOCALSTORAGE_KEY);
return local ? JSON.parse(local) : getDefaultSettings();
}
try {
const response = await fetch("/readers/settings", {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
const settings = await response.json();
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(settings));
return settings;
} catch (error) {
const local = localStorage.getItem(LOCALSTORAGE_KEY);
return local ? JSON.parse(local) : getDefaultSettings();
}
}
export async function saveSettings(
settings: Partial<ReaderSettings>,
): Promise<void> {
const token = getToken();
const current = await loadSettings();
const updated = { ...current, ...settings };
if (!token) {
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
return;
}
try {
await fetch("/readers/settings", {
method: "PUT",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
body: JSON.stringify(settings),
});
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
} catch (error) {
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
}
}
export async function syncSettings(): Promise<void> {
const local = localStorage.getItem(LOCALSTORAGE_KEY);
if (!local) return;
const settings = JSON.parse(local);
const token = getToken();
if (token) {
try {
await fetch("/readers/settings", {
method: "PUT",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
body: JSON.stringify(settings),
});
} catch (error) {
console.error("Failed to sync settings:", error);
}
}
}
export function getDefaultSettings(): ReaderSettings {
return {
chrome_behavior: "auto-hide",
progress_mode: "pages",
chrome_theme: "tokyo-night",
reading_theme: "light",
reading_mode: "dark",
reading_font: "literata",
tap_zone_size: 30,
auto_scroll: false,
font_size: 18,
line_height: 1.6,
margin_width: 20,
double_page_spread: true,
pdf_interaction_mode: "select",
fx_brightness: 1,
fx_contrast: 1,
fx_invert: false,
tap_zones_enabled: true,
reading_direction: "ltr",
hardware_acceleration: true,
panel_layout: {
toc: {
side: "left",
visible: true,
collapsed: false,
width_px: 320,
order: 1,
locked: false,
last_valid_side: "left",
},
settings: {
side: "left",
visible: false,
collapsed: true,
width_px: 380,
order: 2,
locked: false,
last_valid_side: "left",
},
navigator: {
side: "right",
visible: false,
collapsed: true,
width_px: 280,
order: 3,
locked: false,
last_valid_side: "right",
},
bookmarks: {
side: "right",
visible: false,
collapsed: true,
width_px: 280,
order: 4,
locked: false,
last_valid_side: "right",
},
mobile_nav_visible: true,
},
} as ReaderSettings;
}