Archived
Compare commits
5
Commits
f989b144cf
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 crisleo94
|
26c5f6f06b | ||
|
crisleo94
|
22ded87250 | ||
|
crisleo94
|
84c0497f21 | ||
|
crisleo94
|
724eae1142 | ||
|
crisleo94
|
654cfec147 |
+25
@@ -1,4 +1,29 @@
|
||||
node_modules
|
||||
dist
|
||||
frontend/dist
|
||||
frontend/dist/assets
|
||||
frontend/dist/assets/index.html
|
||||
frontend/dist/assets/index.html.gz
|
||||
frontend/dist/assets/index.html.br
|
||||
frontend/dist/assets/index.html.brotli
|
||||
frontend/dist/assets/index.html.gzip
|
||||
frontend/dist/assets/index.html.br
|
||||
frontend/dist/assets/index.html.brotli
|
||||
frontend/dist/assets/index.html.gzip
|
||||
frontend/dist/assets/index.html.br
|
||||
frontend/dist/assets/index.html.brotli
|
||||
frontend/dist/assets/index.html.gzip
|
||||
frontend/dist/assets/index.html.br
|
||||
frontend/dist/assets/index.html.brotli
|
||||
frontend/dist/assets/index.html.gzip
|
||||
frontend/dist/assets/index.html.br
|
||||
frontend/dist/assets/index.html.brotli
|
||||
frontend/dist/assets/index.html.gzip
|
||||
mobile/dist
|
||||
backend/media
|
||||
backend/staticfiles
|
||||
backend/media
|
||||
backend/staticfiles
|
||||
.pycache__
|
||||
__pycache__
|
||||
*.pyc
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1 +0,0 @@
|
||||
x
|
||||
@@ -1 +0,0 @@
|
||||
fake
|
||||
@@ -0,0 +1,150 @@
|
||||
# 010 — Mobile EPUB Reader
|
||||
|
||||
**Status:** Implemented
|
||||
**Created:** 2026-06-04
|
||||
|
||||
## Objective
|
||||
|
||||
Mirror the web reading experience (`frontend/src/pages/ReadingPage.tsx` and
|
||||
`frontend/src/components/reader/*`) inside the Expo app so users can open their
|
||||
uploaded library, read EPUBs with persisted progress and typography settings,
|
||||
and manage bookmarks/highlights — reusing the same Django REST API as the web
|
||||
client.
|
||||
|
||||
The web EPUB renderer (`react-reader` / epub.js) is DOM-only, so mobile renders
|
||||
EPUBs with `@epubjs-react-native/core`, which runs epub.js inside a
|
||||
`react-native-webview`. This keeps behavior (CFI locations, themes, font
|
||||
controls, TOC, annotations) close to web while staying inside the managed Expo
|
||||
workflow.
|
||||
|
||||
## Scope
|
||||
|
||||
### Mirrored from web
|
||||
|
||||
- EPUB rendering with swipe pagination (`flow: "paginated"`).
|
||||
- Resume position and debounced progress save (CFI + percentage).
|
||||
- Table of contents drawer with jump-to-chapter.
|
||||
- Reading settings: theme presets (light/sepia/paper/dark), font family, font
|
||||
size, line spacing — persisted to `/api/reader/settings/`.
|
||||
- Bookmarks: bookmark the current page, list/jump/delete, and create highlights
|
||||
from a text selection. Highlights are re-applied on open (best-effort).
|
||||
|
||||
### Deferred (not in this pass)
|
||||
|
||||
- PDF reading. PDF books show a placeholder pointing to the web reader.
|
||||
- Brightness and orientation-lock controls.
|
||||
- Per-highlight color picker (highlights use a single default color).
|
||||
- App-wide internationalization (web uses `react-i18n-lite`).
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
LibraryScreen (EBook list)
|
||||
| navigate("BookDetail", { ebookId })
|
||||
v
|
||||
BookDetailScreen ----------------> ReaderScreen ({ ebookId })
|
||||
|
|
||||
GET /api/books/ebooks/:id/ (format guard)
|
||||
|
|
||||
epub? --------------------- pdf? -> placeholder
|
||||
|
|
||||
EpubReaderView (ReaderProvider)
|
||||
|
|
||||
expo-file-system downloadAsync(file/, Bearer token) -> file:// uri
|
||||
|
|
||||
<Reader src=file:// fileSystem=useFileSystem flow="paginated" />
|
||||
|
|
||||
onLocationChange -> debounce 800ms -> PATCH progress/
|
||||
onSelected -> POST bookmarks/ (+ highlight annotation)
|
||||
useReader().toc -> goToLocation(href)
|
||||
settings change -> changeTheme / changeFontSize / changeFontFamily
|
||||
+ PATCH /api/reader/settings/ (debounced)
|
||||
```
|
||||
|
||||
The ebook file is downloaded to the app cache with an `Authorization` header
|
||||
(the `/file/` endpoint is JWT-protected) and the local `file://` URI is handed
|
||||
to the renderer — mirroring how the web client downloads a blob rather than
|
||||
using a public/signed URL.
|
||||
|
||||
## Mobile changes
|
||||
|
||||
| File | Role |
|
||||
|------|------|
|
||||
| `mobile/src/api/client.ts` | Adds `apiClient`, `saveTokens`, `loadTokens`, `getApiBaseUrl` |
|
||||
| `mobile/src/api/ebooks.ts` | `/api/books/ebooks/` list/detail/toc + `getFileUrl(id)` |
|
||||
| `mobile/src/api/reader.ts` | Reader settings + per-book progress (mirrors web `api/reader.ts`) |
|
||||
| `mobile/src/api/annotations.ts` | Bookmarks CRUD against `/api/annotations/bookmarks/` |
|
||||
| `mobile/src/types/reader.ts` | `ReadingSettings`, `ReadingProgress` (full reader shapes) |
|
||||
| `mobile/src/types/index.ts` | `AppStackParamList`, `Bookmark`, `CreateMarkerPayload` |
|
||||
| `mobile/src/hooks/useReadingSettings.ts` | Loads + debounced-saves reader settings |
|
||||
| `mobile/src/utils/epubTheme.ts` | Font stacks, theme palettes, `buildEpubTheme()` |
|
||||
| `mobile/src/navigation/AppStack.tsx` | Native stack: Tabs / BookDetail / Reader |
|
||||
| `mobile/src/screens/LibraryScreen.tsx` | Lists user EBooks (`ebooksApi.list`) |
|
||||
| `mobile/src/screens/BookDetailScreen.tsx` | Metadata + start/resume button |
|
||||
| `mobile/src/screens/ReaderScreen.tsx` | Format guard: EPUB view vs PDF placeholder |
|
||||
| `mobile/src/components/reader/EpubReaderView.tsx` | Reader, progress, bookmarks, settings wiring |
|
||||
| `mobile/src/components/reader/ReaderToolbar.tsx` | Title, chapter, progress bar, action buttons |
|
||||
| `mobile/src/components/reader/TocModal.tsx` | Table of contents sheet |
|
||||
| `mobile/src/components/reader/ReadingSettingsModal.tsx` | Theme/font/size/spacing controls |
|
||||
| `mobile/src/components/reader/BookmarksModal.tsx` | Bookmarks & highlights list |
|
||||
| `mobile/App.tsx` | Wraps the tree in `GestureHandlerRootView` |
|
||||
|
||||
Removed unused scaffolding: `mobile/src/navigation/AppNavigator.tsx`,
|
||||
`mobile/src/navigation/MainTabs.tsx`.
|
||||
|
||||
## API contracts (consumed)
|
||||
|
||||
| Method | Path | Purpose |
|
||||
|--------|------|---------|
|
||||
| GET | `/api/books/ebooks/` | User library list |
|
||||
| GET | `/api/books/ebooks/:id/` | EBook detail (format, progress, cover) |
|
||||
| GET | `/api/books/ebooks/:id/file/` | Stream EPUB bytes (JWT, owner) |
|
||||
| GET/PATCH | `/api/books/ebooks/:id/progress/` | Reading progress (`current_position`, `last_page`, `epub_location`) |
|
||||
| GET/PATCH | `/api/reader/settings/` | Reader typography/theme settings |
|
||||
| GET/POST/DELETE | `/api/annotations/bookmarks/` | Bookmarks & highlights (`ebook`, `epub_cfi`, `chapter_index`, ...) |
|
||||
|
||||
## Settings mapping (web -> mobile)
|
||||
|
||||
| Reader setting | Web (epub.js) | Mobile (`@epubjs-react-native/core`) |
|
||||
|----------------|---------------|--------------------------------------|
|
||||
| `theme` / colors | `themes.register/select` | `changeTheme(buildEpubTheme())` + `defaultTheme` |
|
||||
| `font_size` | `themes.fontSize` | `changeFontSize("Npx")` |
|
||||
| `font_family` | body font-family | `changeFontFamily(stack)` |
|
||||
| `line_height` | body line-height | `buildEpubTheme()` CSS rule |
|
||||
| `margin_width` | gap-based padding | not applied (deferred) |
|
||||
| `brightness` / `orientation_lock` | applied on web | deferred |
|
||||
|
||||
## Dependencies added
|
||||
|
||||
- `@epubjs-react-native/core@1.4.7`
|
||||
- `@epubjs-react-native/expo-file-system@1.1.4`
|
||||
- `react-native-webview@13.12.5`
|
||||
|
||||
(`react-native-gesture-handler`, `react-native-reanimated`, and
|
||||
`expo-file-system` were already present.)
|
||||
|
||||
## Configuration
|
||||
|
||||
| Env var | Purpose |
|
||||
|---------|---------|
|
||||
| `EXPO_PUBLIC_API_URL` | Backend base URL (e.g. `http://10.0.2.2:8000` on Android emulator, LAN IP on a device) |
|
||||
|
||||
## Compatibility notes
|
||||
|
||||
- The Expo file-system adapter (`@epubjs-react-native/expo-file-system`) depends
|
||||
only on `expo-file-system`, so the reader runs in Expo Go. (The library's
|
||||
bare adapter pulls native `@dr.pogodin/react-native-fs`; that path is not
|
||||
used here.)
|
||||
- React 19 / Expo SDK 52 may surface peer-dependency warnings for the
|
||||
`@epubjs-react-native/*` packages.
|
||||
|
||||
## Verification
|
||||
|
||||
- [ ] Log in; Library lists the user's uploaded EBooks with covers/progress.
|
||||
- [ ] Open an EPUB; it renders and paginates by swipe.
|
||||
- [ ] Reopen a book; it resumes at the last position.
|
||||
- [ ] Change theme/font/size/spacing; the page updates and persists across reopen.
|
||||
- [ ] Open the TOC and jump to a chapter.
|
||||
- [ ] Bookmark the current page; it appears in the bookmarks list and can be re-opened/deleted.
|
||||
- [ ] Select text to create a highlight; it persists and re-renders on reopen.
|
||||
- [ ] Open a PDF book; the placeholder is shown instead of a crash.
|
||||
@@ -1 +0,0 @@
|
||||
import{X as c,j as e}from"./index-BQiEVoRj.js";function h({bookTitle:s,chapterTitle:l,progress:a,onBack:t,onToggleToc:n,onToggleSettings:o,onToggleMarkers:i}){const{t:r}=c(),d=(a==null?void 0:a.percentage)??0;return e.jsxs(e.Fragment,{children:[e.jsxs("header",{className:"reader-top-bar",children:[t?e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:t,"aria-label":r("reader.backToLibraryAria"),children:e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"M20 12H4M10 18l-6-6 6-6"})})}):e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:n,"aria-label":r("reader.tocAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),e.jsx("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),e.jsx("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]})}),e.jsxs("div",{className:"reader-bar-title",children:[e.jsx("span",{className:"reader-bar-book",children:s}),e.jsx("span",{className:"reader-bar-chapter",children:l})]}),e.jsxs("div",{className:"reader-bar-actions",children:[t&&e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:n,"aria-label":r("reader.tocAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),e.jsx("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),e.jsx("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]})}),i&&e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:i,"aria-label":r("annotations.inBookPanel"),children:e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})})}),e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:o,"aria-label":r("reader.settingsAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("path",{d:"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"})]})})]})]}),e.jsx("div",{className:"reader-progress-bar",children:e.jsx("div",{className:"reader-progress-fill",style:{width:`${Math.min(d,100)}%`}})})]})}export{h as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{X as m,j as e}from"./index-BQiEVoRj.js";const g=[{value:"sepia",labelKey:"reader.themeSepia"},{value:"dark",labelKey:"reader.themeDark"},{value:"light",labelKey:"reader.themeLight"},{value:"paper",labelKey:"reader.themePaper"}],u=[{value:"sans-serif",labelKey:"reader.fontSans"},{value:"serif",labelKey:"reader.fontSerif"},{value:"monospace",labelKey:"reader.fontMonospace"}],x=[{value:"auto",labelKey:"reader.orientationAuto"},{value:"portrait",labelKey:"reader.orientationPortrait"},{value:"landscape",labelKey:"reader.orientationLandscape"}];function v({settings:t,isOpen:c,onClose:d,onUpdate:o,onFlush:h}){const{t:s}=m(),n=()=>{h(),d()},i=(a,r)=>{o({[a]:r},"debounced")},l=(a,r)=>{o({[a]:r},"immediate")};return e.jsxs(e.Fragment,{children:[c&&e.jsx("div",{className:"settings-overlay",onClick:n,onKeyDown:a=>{a.key==="Escape"&&n()},role:"presentation"}),e.jsxs("aside",{className:`settings-drawer ${c?"settings-drawer--open":""}`,children:[e.jsxs("div",{className:"settings-header",children:[e.jsx("h2",{className:"settings-title",children:s("reader.settingsTitle")}),e.jsx("button",{type:"button",className:"settings-close-btn",onClick:n,"aria-label":s("reader.closeSettingsAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),e.jsxs("div",{className:"settings-body",children:[e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.theme")}),e.jsx("div",{className:"theme-grid",children:g.map(a=>e.jsx("button",{type:"button",className:`theme-btn ${t.theme===a.value?"theme-btn--active":""}`,onClick:()=>l("theme",a.value),children:s(a.labelKey)},a.value))})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.font")}),e.jsx("div",{className:"font-grid",children:u.map(a=>e.jsx("button",{type:"button",className:`font-btn ${t.font_family===a.value?"font-btn--active":""}`,onClick:()=>l("font_family",a.value),children:s(a.labelKey)},a.value))})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.fontSize",{size:String(t.font_size)})}),e.jsx("input",{type:"range",min:"12",max:"32",value:t.font_size,onChange:a=>i("font_size",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.fontSizeAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.lineHeight",{value:t.line_height.toFixed(1)})}),e.jsx("input",{type:"range",min:"1.2",max:"2.0",step:"0.1",value:t.line_height,onChange:a=>i("line_height",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.lineHeightAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.margins",{value:String(t.margin_width)})}),e.jsx("input",{type:"range",min:"8",max:"48",value:t.margin_width,onChange:a=>i("margin_width",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.marginWidthAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.brightness",{value:String(t.brightness)})}),e.jsx("input",{type:"range",min:"0",max:"100",value:t.brightness,onChange:a=>i("brightness",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.brightnessAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.orientation")}),e.jsx("div",{className:"orientation-grid",children:x.map(a=>e.jsx("button",{type:"button",className:`orientation-btn ${t.orientation_lock===a.value?"orientation-btn--active":""}`,onClick:()=>l("orientation_lock",a.value),children:s(a.labelKey)},a.value))})]})]})]})]})}export{v as default};
|
||||
@@ -12,13 +12,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"dompurify": "^3.4.7",
|
||||
"react-router-dom": "^7.1.0",
|
||||
"pdfjs-dist": "^4.10.38",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-i18n-lite": "^1.0.10",
|
||||
"react-reader": "^2.0.15",
|
||||
"react-router-dom": "^7.1.0"
|
||||
"react-reader": "^2.0.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { lazy, Suspense, useState } from "react";
|
||||
import React, { lazy, Suspense } from "react";
|
||||
import { BrowserRouter, Navigate, Route, Routes, useParams } from "react-router-dom";
|
||||
import { AuthProvider, useAuth } from "./context/AuthContext";
|
||||
import { I18nProvider } from "./i18n/I18nProvider";
|
||||
@@ -13,14 +13,7 @@ const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ defaul
|
||||
const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
|
||||
const ReadingPage = lazy(() => import("./pages/ReadingPage").then((m) => ({ default: m.default })));
|
||||
|
||||
const AuthPage = lazy(() =>
|
||||
import("./pages/AuthPage").then((m) => ({
|
||||
default: () => {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
return isLogin ? <m.LoginPage onToggle={() => setIsLogin(false)} /> : <m.RegisterPage onToggle={() => setIsLogin(true)} />;
|
||||
},
|
||||
})),
|
||||
);
|
||||
const AuthPage = lazy(() => import("./pages/AuthPage"));
|
||||
|
||||
function LoadingFallback() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -27,6 +27,3 @@ export async function createMarker(
|
||||
export async function deleteBookmark(id: string): Promise<void> {
|
||||
await api.delete(`/annotations/bookmarks/${id}/`);
|
||||
}
|
||||
|
||||
/** @deprecated Use createMarker */
|
||||
export const createBookmark = createMarker;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { booksApi } from "@/api/books";
|
||||
import { getReadingProgress } from "@/api/reader";
|
||||
import type { ReadingProgress } from "@/types/reader";
|
||||
|
||||
export async function loadEbookWithProgress(bookId: number): Promise<{
|
||||
progressData: ReadingProgress | null;
|
||||
blob: Blob;
|
||||
}> {
|
||||
const [progressData, blob] = await Promise.all([
|
||||
getReadingProgress(bookId).catch(() => null),
|
||||
booksApi.getEbookFile(bookId),
|
||||
]);
|
||||
return { progressData, blob };
|
||||
}
|
||||
@@ -1,22 +1,10 @@
|
||||
/**
|
||||
* API client for the reader module — reading settings, chapters, and progress.
|
||||
* API client for the reader module — reading settings and progress.
|
||||
* Uses the shared axios client so JWT auth is attached automatically.
|
||||
*/
|
||||
|
||||
import api from "./client";
|
||||
import type {
|
||||
ChapterDetail,
|
||||
ChapterSummary,
|
||||
ReadingProgress,
|
||||
ReadingSettings,
|
||||
} from "../types/reader";
|
||||
|
||||
interface TocChapter {
|
||||
id: number;
|
||||
title: string;
|
||||
index: number;
|
||||
href?: string;
|
||||
}
|
||||
import type { ReadingProgress, ReadingSettings } from "../types/reader";
|
||||
|
||||
export async function getReadingSettings(): Promise<ReadingSettings> {
|
||||
const { data } = await api.get<ReadingSettings>("/reader/settings/");
|
||||
@@ -30,39 +18,6 @@ export async function updateReadingSettings(
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function getChapters(bookId: number): Promise<ChapterSummary[]> {
|
||||
const { data } = await api.get<{ chapters: TocChapter[] }>(
|
||||
`/books/ebooks/${bookId}/toc/`,
|
||||
);
|
||||
const chapters = data.chapters ?? [];
|
||||
return chapters.map((ch) => ({
|
||||
id: ch.id,
|
||||
book: bookId,
|
||||
title: ch.title,
|
||||
number: ch.index + 1,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function getChapterContent(
|
||||
bookId: number,
|
||||
chapterNumber: number,
|
||||
): Promise<ChapterDetail> {
|
||||
const { data } = await api.get<{
|
||||
page: number;
|
||||
chapter_title: string;
|
||||
content: string;
|
||||
}>(`/books/ebooks/${bookId}/content/`, { params: { page: chapterNumber } });
|
||||
return {
|
||||
id: chapterNumber,
|
||||
book: bookId,
|
||||
title: data.chapter_title ?? "",
|
||||
number: data.page ?? chapterNumber,
|
||||
content: data.content ?? "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
}
|
||||
|
||||
export async function getReadingProgress(
|
||||
bookId: number,
|
||||
): Promise<ReadingProgress> {
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
|
||||
interface MarkerPassageActionsProps {
|
||||
onGoToPassage: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
export function MarkerPassageActions({ onGoToPassage, onDelete }: MarkerPassageActionsProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="annotation-actions">
|
||||
<button type="button" className="btn btn-sm" onClick={onGoToPassage}>
|
||||
{t("annotations.goToPassage")}
|
||||
</button>
|
||||
<button type="button" className="btn btn-sm btn-danger" onClick={onDelete}>
|
||||
{t("common.delete")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
CollapsibleMarkerPassage,
|
||||
CollapsibleMarkerThought,
|
||||
} from "@/components/annotations/CollapsibleMarkerText";
|
||||
import { MarkerPassageActions } from "@/components/annotations/MarkerPassageActions";
|
||||
|
||||
interface MarkerThreadsViewProps {
|
||||
ebookIdFilter?: string;
|
||||
@@ -91,22 +92,10 @@ export function MarkerThreadsView({
|
||||
) : (
|
||||
<span className="annotation-kind-badge bookmark-badge">{t("annotations.bookmarkOnly")}</span>
|
||||
)}
|
||||
<div className="annotation-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
onClick={() => onGoToPassage(m.ebook_id, m.epub_cfi)}
|
||||
>
|
||||
{t("annotations.goToPassage")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => removeBookmark(m.id)}
|
||||
>
|
||||
{t("common.delete")}
|
||||
</button>
|
||||
</div>
|
||||
<MarkerPassageActions
|
||||
onGoToPassage={() => onGoToPassage(m.ebook_id, m.epub_cfi)}
|
||||
onDelete={() => removeBookmark(m.id)}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
export { BookmarksNotesPage } from "./BookmarksNotesPage";
|
||||
export { MarkerThreadsView } from "./MarkerThreadsView";
|
||||
@@ -1,28 +0,0 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export function Layout({
|
||||
children,
|
||||
title,
|
||||
}: LayoutProps): React.ReactElement {
|
||||
const { t } = useTranslation();
|
||||
const pageTitle = title ?? t("common.appName");
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<header className="app-header">
|
||||
<h1 className="app-title">{pageTitle}</h1>
|
||||
<nav className="app-nav">
|
||||
<a href="/" className="nav-link">{t("annotations.home")}</a>
|
||||
<a href="/bookmarks-notes" className="nav-link">{t("annotations.bookmarksNotes")}</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="app-main">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
|
||||
interface SimpleFormPageLayoutProps {
|
||||
title: string;
|
||||
onBack: () => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function SimpleFormPageLayout({ title, onBack, children }: SimpleFormPageLayoutProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}
|
||||
>
|
||||
← {t("common.back")}
|
||||
</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{title}</h1>
|
||||
</header>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Layout } from "./Layout";
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
import styles from "./FinishedBooksShelf.module.css";
|
||||
|
||||
export interface ShelfBook {
|
||||
interface ShelfBook {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
|
||||
@@ -2,14 +2,14 @@ import { useTranslation } from "react-i18n-lite";
|
||||
import { readingStatusKey } from "@/locales";
|
||||
import styles from "../../pages/Library.module.css";
|
||||
|
||||
export const LIBRARY_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
|
||||
const LIBRARY_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
|
||||
want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
|
||||
reading: { bg: "#dcfce7", text: "#16a34a" },
|
||||
finished: { bg: "#f3e8ff", text: "#9333ea" },
|
||||
dnf: { bg: "#fef3c7", text: "#b45309" },
|
||||
};
|
||||
|
||||
export interface LibraryBookCardData {
|
||||
interface LibraryBookCardData {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
CollapsibleMarkerPassage,
|
||||
CollapsibleMarkerThought,
|
||||
} from "@/components/annotations/CollapsibleMarkerText";
|
||||
import { MarkerPassageActions } from "@/components/annotations/MarkerPassageActions";
|
||||
|
||||
interface BookMarkersPanelProps {
|
||||
ebookId: number;
|
||||
@@ -67,18 +68,10 @@ export function BookMarkersPanel({
|
||||
) : (
|
||||
<span className="annotation-kind-badge bookmark-badge">{t("annotations.bookmarkOnly")}</span>
|
||||
)}
|
||||
<div className="annotation-actions">
|
||||
<button type="button" className="btn btn-sm" onClick={() => onGoToPassage(m)}>
|
||||
{t("annotations.goToPassage")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => removeBookmark(m.id)}
|
||||
>
|
||||
{t("common.delete")}
|
||||
</button>
|
||||
</div>
|
||||
<MarkerPassageActions
|
||||
onGoToPassage={() => onGoToPassage(m)}
|
||||
onDelete={() => removeBookmark(m.id)}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* EpubReadingView — full-screen EPUB reading powered by react-reader (epub.js).
|
||||
*/
|
||||
|
||||
import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { lazy, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
import { EpubView, EpubViewStyle } from "react-reader";
|
||||
@@ -12,6 +12,10 @@ import { useEpubHighlights } from "../../hooks/useEpubHighlights";
|
||||
import { useEpubReader } from "../../hooks/useEpubReader";
|
||||
import { useEpubSelection } from "../../hooks/useEpubSelection";
|
||||
import { useReadingSettings } from "../../hooks/useReadingSettings";
|
||||
import { useReaderOrientationCss } from "../../hooks/useReaderOrientationCss";
|
||||
import { ReaderErrorScreen } from "./ReaderErrorScreen";
|
||||
import { ReaderLoadingScreen } from "./ReaderLoadingScreen";
|
||||
import { ReaderSuspenseShell } from "./ReaderSuspenseShell";
|
||||
import type { EBookDetail } from "../../types/book";
|
||||
import type { EpubTocItem } from "./TableOfContents";
|
||||
import { SelectionPopover } from "./SelectionPopover";
|
||||
@@ -82,17 +86,7 @@ export function EpubReadingView({ book, bookId, initialEpubLocation }: EpubReadi
|
||||
applySettings(settings);
|
||||
}, [settings, applySettings]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (settings.orientation_lock !== "auto") {
|
||||
root.style.setProperty(
|
||||
"--reader-orientation",
|
||||
settings.orientation_lock === "portrait" ? "portrait" : "landscape",
|
||||
);
|
||||
} else {
|
||||
root.style.removeProperty("--reader-orientation");
|
||||
}
|
||||
}, [settings.orientation_lock]);
|
||||
useReaderOrientationCss(settings.orientation_lock);
|
||||
|
||||
const handleTocChanged = useCallback((toc: EpubTocItem[]) => {
|
||||
setTocItems(toc);
|
||||
@@ -122,34 +116,20 @@ export function EpubReadingView({ book, bookId, initialEpubLocation }: EpubReadi
|
||||
);
|
||||
|
||||
if (epubLoading) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
<p>{t("reader.loading")}</p>
|
||||
</div>
|
||||
);
|
||||
return <ReaderLoadingScreen />;
|
||||
}
|
||||
|
||||
if (epubError || !epubUrl) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<p className="reader-error">{epubError ?? t("reader.unableToOpen")}</p>
|
||||
<button type="button" className="back-button" onClick={() => navigate("/")}>
|
||||
{t("reader.backToLibrary")}
|
||||
</button>
|
||||
</div>
|
||||
<ReaderErrorScreen
|
||||
message={epubError ?? t("reader.unableToOpen")}
|
||||
onBack={() => navigate("/")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="reader-container" data-theme={settings.theme}>
|
||||
<ReaderSuspenseShell theme={settings.theme}>
|
||||
<ReaderToolbar
|
||||
bookTitle={book.title}
|
||||
chapterTitle={chapterTitle || t("reader.reading")}
|
||||
@@ -235,7 +215,6 @@ export function EpubReadingView({ book, bookId, initialEpubLocation }: EpubReadi
|
||||
›
|
||||
</button>
|
||||
</main>
|
||||
</div>
|
||||
</Suspense>
|
||||
</ReaderSuspenseShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
interface PanelCloseButtonProps {
|
||||
className: string;
|
||||
onClick: () => void;
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
export function PanelCloseButton({ className, onClick, ariaLabel }: PanelCloseButtonProps) {
|
||||
return (
|
||||
<button type="button" className={className} onClick={onClick} aria-label={ariaLabel}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -2,13 +2,17 @@
|
||||
* PdfReadingView — full-screen PDF reading powered by PDF.js.
|
||||
*/
|
||||
|
||||
import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { lazy, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
import { useAnnotations } from "@/context/AnnotationsContext";
|
||||
import { useBookmarkRailLayout } from "../../hooks/useBookmarkRailLayout";
|
||||
import { usePdfReader } from "../../hooks/usePdfReader";
|
||||
import { useReadingSettings } from "../../hooks/useReadingSettings";
|
||||
import { useReaderOrientationCss } from "../../hooks/useReaderOrientationCss";
|
||||
import { ReaderErrorScreen } from "./ReaderErrorScreen";
|
||||
import { ReaderLoadingScreen } from "./ReaderLoadingScreen";
|
||||
import { ReaderSuspenseShell } from "./ReaderSuspenseShell";
|
||||
import { useToast } from "../../hooks/useToast";
|
||||
import { booksApi } from "../../api/books";
|
||||
import type { EBookDetail } from "../../types/book";
|
||||
@@ -96,17 +100,7 @@ export function PdfReadingView({ book, bookId, initialAnchor }: PdfReadingViewPr
|
||||
);
|
||||
}, [bookId, pageCount, t]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (settings.orientation_lock !== "auto") {
|
||||
root.style.setProperty(
|
||||
"--reader-orientation",
|
||||
settings.orientation_lock === "portrait" ? "portrait" : "landscape",
|
||||
);
|
||||
} else {
|
||||
root.style.removeProperty("--reader-orientation");
|
||||
}
|
||||
}, [settings.orientation_lock]);
|
||||
useReaderOrientationCss(settings.orientation_lock);
|
||||
|
||||
const handleTocNavigate = useCallback(
|
||||
(href: string) => {
|
||||
@@ -165,36 +159,17 @@ export function PdfReadingView({ book, bookId, initialAnchor }: PdfReadingViewPr
|
||||
}, [bookMarkers, currentPage]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
<p>{t("reader.loading")}</p>
|
||||
</div>
|
||||
);
|
||||
return <ReaderLoadingScreen />;
|
||||
}
|
||||
|
||||
if (error || !pdfDocument) {
|
||||
const message =
|
||||
error === "PDF_PASSWORD" ? t("reader.pdfPassword") : (error ?? t("reader.unableToOpen"));
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<p className="reader-error">{message}</p>
|
||||
<button type="button" className="back-button" onClick={() => navigate("/")}>
|
||||
{t("reader.backToLibrary")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
return <ReaderErrorScreen message={message} onBack={() => navigate("/")} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="reader-container" data-theme={settings.theme}>
|
||||
<ReaderSuspenseShell theme={settings.theme}>
|
||||
<ReaderToolbar
|
||||
bookTitle={book.title}
|
||||
chapterTitle={chapterTitle || t("reader.reading")}
|
||||
@@ -270,7 +245,6 @@ export function PdfReadingView({ book, bookId, initialAnchor }: PdfReadingViewPr
|
||||
›
|
||||
</button>
|
||||
</main>
|
||||
</div>
|
||||
</Suspense>
|
||||
</ReaderSuspenseShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
|
||||
interface ReaderErrorScreenProps {
|
||||
message: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export function ReaderErrorScreen({ message, onBack }: ReaderErrorScreenProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<p className="reader-error">{message}</p>
|
||||
<button type="button" className="back-button" onClick={onBack}>
|
||||
{t("reader.backToLibrary")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
|
||||
interface ReaderLoadingScreenProps {
|
||||
showMessage?: boolean;
|
||||
}
|
||||
|
||||
export function ReaderLoadingScreen({ showMessage = true }: ReaderLoadingScreenProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
{showMessage && <p>{t("reader.loading")}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Suspense, type ReactNode } from "react";
|
||||
import { ReaderLoadingScreen } from "./ReaderLoadingScreen";
|
||||
|
||||
interface ReaderSuspenseShellProps {
|
||||
theme: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ReaderSuspenseShell({ theme, children }: ReaderSuspenseShellProps) {
|
||||
return (
|
||||
<Suspense fallback={<ReaderLoadingScreen showMessage={false} />}>
|
||||
<div className="reader-container" data-theme={theme}>
|
||||
{children}
|
||||
</div>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
|
||||
interface ReaderTocButtonProps {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function ReaderTocButton({ onClick }: ReaderTocButtonProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onClick}
|
||||
aria-label={t("reader.tocAria")}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
import type { ReadingProgress } from "../../types/reader";
|
||||
import { ReaderTocButton } from "./ReaderTocButton";
|
||||
|
||||
interface ReaderToolbarProps {
|
||||
bookTitle: string;
|
||||
@@ -47,38 +48,14 @@ export default function ReaderToolbar({
|
||||
</svg>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onToggleToc}
|
||||
aria-label={t("reader.tocAria")}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
<ReaderTocButton onClick={onToggleToc} />
|
||||
)}
|
||||
<div className="reader-bar-title">
|
||||
<span className="reader-bar-book">{bookTitle}</span>
|
||||
<span className="reader-bar-chapter">{chapterTitle}</span>
|
||||
</div>
|
||||
<div className="reader-bar-actions">
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onToggleToc}
|
||||
aria-label={t("reader.tocAria")}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{onBack && <ReaderTocButton onClick={onToggleToc} />}
|
||||
{onBookmarkPage && (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -12,6 +12,7 @@ import type {
|
||||
ThemePreset,
|
||||
} from "../../types/reader";
|
||||
import type { SettingsPersistMode } from "../../hooks/useReadingSettings";
|
||||
import { PanelCloseButton } from "./PanelCloseButton";
|
||||
|
||||
interface ReadingSettingsPanelProps {
|
||||
format?: "epub" | "pdf";
|
||||
@@ -89,17 +90,11 @@ export default function ReadingSettingsPanel({
|
||||
>
|
||||
<div className="settings-header">
|
||||
<h2 className="settings-title">{t("reader.settingsTitle")}</h2>
|
||||
<button
|
||||
type="button"
|
||||
<PanelCloseButton
|
||||
className="settings-close-btn"
|
||||
onClick={handleClose}
|
||||
aria-label={t("reader.closeSettingsAria")}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
ariaLabel={t("reader.closeSettingsAria")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-body">
|
||||
@@ -124,7 +119,7 @@ export default function ReadingSettingsPanel({
|
||||
{format === "pdf" && onPdfScaleChange && (
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
{t("reader.pdfZoom", { value: Math.round(pdfScale * 100) })}
|
||||
{t("reader.pdfZoom", { value: String(Math.round(pdfScale * 100)) })}
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
import type { KeyboardEvent } from "react";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
import { PanelCloseButton } from "./PanelCloseButton";
|
||||
|
||||
export interface EpubTocItem {
|
||||
label: string;
|
||||
@@ -73,17 +74,11 @@ export default function TableOfContents({
|
||||
<aside className={`toc-drawer ${isOpen ? "toc-drawer--open" : ""}`}>
|
||||
<div className="toc-header">
|
||||
<h2 className="toc-title">{t("reader.tocTitle")}</h2>
|
||||
<button
|
||||
type="button"
|
||||
<PanelCloseButton
|
||||
className="toc-close-btn"
|
||||
onClick={onClose}
|
||||
aria-label={t("reader.closeTocAria")}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
ariaLabel={t("reader.closeTocAria")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav className="toc-list">
|
||||
|
||||
@@ -48,7 +48,7 @@ export function highlightBackgroundStyle(color: string): {
|
||||
};
|
||||
}
|
||||
|
||||
export const BOOKMARK_COLOR_STORAGE_KEY = "cloud-reader:lastBookmarkHighlightColor";
|
||||
const BOOKMARK_COLOR_STORAGE_KEY = "cloud-reader:lastBookmarkHighlightColor";
|
||||
|
||||
export function loadLastHighlightColor(): string {
|
||||
try {
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from "react";
|
||||
import type { Bookmark, CreateMarkerPayload, MarkerEntry, MarkersByBook } from "@/types";
|
||||
import * as annotationsApi from "@/api/annotations";
|
||||
import { bookmarkToMarkerEntry, groupMarkersByBook, sortMarkers } from "@/utils/markers";
|
||||
import { bookmarkToMarkerEntry, groupMarkersByBook, sortBookmarks } from "@/utils/markers";
|
||||
|
||||
interface AnnotationsState {
|
||||
bookmarks: Bookmark[];
|
||||
@@ -37,10 +37,7 @@ function annotationsReducer(
|
||||
case "FETCH_BOOKMARKS_START":
|
||||
return { ...state, bookmarksLoading: true, error: null };
|
||||
case "FETCH_BOOKMARKS_SUCCESS": {
|
||||
const sorted = [...action.payload].sort((a, b) => {
|
||||
if (a.chapter_index !== b.chapter_index) return a.chapter_index - b.chapter_index;
|
||||
return a.epub_cfi.localeCompare(b.epub_cfi);
|
||||
});
|
||||
const sorted = [...action.payload].sort(sortBookmarks);
|
||||
return { ...state, bookmarks: sorted, bookmarksLoading: false };
|
||||
}
|
||||
case "SET_ERROR":
|
||||
@@ -51,10 +48,7 @@ function annotationsReducer(
|
||||
bookmarks: state.bookmarks.filter((b) => b.id !== action.payload),
|
||||
};
|
||||
case "ADD_BOOKMARK": {
|
||||
const next = [...state.bookmarks, action.payload].sort((a, b) => {
|
||||
if (a.chapter_index !== b.chapter_index) return a.chapter_index - b.chapter_index;
|
||||
return a.epub_cfi.localeCompare(b.epub_cfi);
|
||||
});
|
||||
const next = [...state.bookmarks, action.payload].sort(sortBookmarks);
|
||||
return { ...state, bookmarks: next };
|
||||
}
|
||||
default:
|
||||
@@ -105,7 +99,7 @@ export function AnnotationsProvider({
|
||||
}, []);
|
||||
|
||||
const markers = useMemo(
|
||||
() => state.bookmarks.map(bookmarkToMarkerEntry).sort(sortMarkers),
|
||||
() => [...state.bookmarks].sort(sortBookmarks).map(bookmarkToMarkerEntry),
|
||||
[state.bookmarks],
|
||||
);
|
||||
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
export { usePaginatedQuery } from "./usePaginatedQuery";
|
||||
export { useDebounce } from "./useDebounce";
|
||||
export { useVoiceSearch } from "./useVoiceSearch";
|
||||
export { useMediaQuery } from "./useMediaQuery";
|
||||
@@ -3,8 +3,8 @@
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { booksApi } from "../api/books";
|
||||
import { getReadingProgress, updateReadingProgress } from "../api/reader";
|
||||
import { loadEbookWithProgress } from "../api/loadEbookWithProgress";
|
||||
import { updateReadingProgress } from "../api/reader";
|
||||
import type { ReadingProgress, ReadingSettings } from "../types/reader";
|
||||
import {
|
||||
applyRenditionSettings,
|
||||
@@ -197,10 +197,7 @@ export function useEpubReader(
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [progressData, blob] = await Promise.all([
|
||||
getReadingProgress(bookId).catch(() => null),
|
||||
booksApi.getEbookFile(bookId),
|
||||
]);
|
||||
const { progressData, blob } = await loadEbookWithProgress(bookId);
|
||||
if (cancelled) return;
|
||||
|
||||
blobUrl = URL.createObjectURL(blob);
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import type { PaginatedResponse } from "@/types";
|
||||
|
||||
interface UsePaginatedQueryOptions<T> {
|
||||
fetchFn: (cursor?: string) => Promise<PaginatedResponse<T>>;
|
||||
}
|
||||
|
||||
interface UsePaginatedQueryResult<T> {
|
||||
items: T[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
hasMore: boolean;
|
||||
loadMore: () => Promise<void>;
|
||||
refresh: () => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook for paginated list fetching with infinite scroll support.
|
||||
*/
|
||||
export function usePaginatedQuery<T>({
|
||||
fetchFn,
|
||||
}: UsePaginatedQueryOptions<T>): UsePaginatedQueryResult<T> {
|
||||
const [items, setItems] = useState<T[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [nextCursor, setNextCursor] = useState<string | null>(null);
|
||||
const loadingRef = useRef(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetchFn();
|
||||
setItems(response.results);
|
||||
setNextCursor(response.next);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [fetchFn]);
|
||||
|
||||
const loadMore = useCallback(async () => {
|
||||
if (!nextCursor || loadingRef.current) return;
|
||||
loadingRef.current = true;
|
||||
try {
|
||||
const response = await fetchFn(nextCursor);
|
||||
setItems((prev) => [...prev, ...response.results]);
|
||||
setNextCursor(response.next);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load more");
|
||||
} finally {
|
||||
loadingRef.current = false;
|
||||
}
|
||||
}, [nextCursor, fetchFn]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, [refresh]);
|
||||
|
||||
return {
|
||||
items,
|
||||
loading,
|
||||
error,
|
||||
hasMore: nextCursor !== null,
|
||||
loadMore,
|
||||
refresh,
|
||||
};
|
||||
}
|
||||
@@ -3,8 +3,8 @@
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { booksApi } from "../api/books";
|
||||
import { getReadingProgress, updateReadingProgress } from "../api/reader";
|
||||
import { loadEbookWithProgress } from "../api/loadEbookWithProgress";
|
||||
import { updateReadingProgress } from "../api/reader";
|
||||
import type { ReadingProgress } from "../types/reader";
|
||||
import { parsePdfAnchor } from "../utils/pdfAnchor";
|
||||
import { pdfjs, type PdfDocumentProxy } from "../utils/pdfjsSetup";
|
||||
@@ -175,10 +175,7 @@ export function usePdfReader(
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [progressData, blob] = await Promise.all([
|
||||
getReadingProgress(bookId).catch(() => null),
|
||||
booksApi.getEbookFile(bookId),
|
||||
]);
|
||||
const { progressData, blob } = await loadEbookWithProgress(bookId);
|
||||
if (cancelled) return;
|
||||
|
||||
const loadingTask = pdfjs.getDocument({ data: await blob.arrayBuffer() });
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useEffect } from "react";
|
||||
import type { ReadingSettings } from "@/types/reader";
|
||||
|
||||
export function useReaderOrientationCss(orientationLock: ReadingSettings["orientation_lock"]): void {
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (orientationLock !== "auto") {
|
||||
root.style.setProperty(
|
||||
"--reader-orientation",
|
||||
orientationLock === "portrait" ? "portrait" : "landscape",
|
||||
);
|
||||
} else {
|
||||
root.style.removeProperty("--reader-orientation");
|
||||
}
|
||||
}, [orientationLock]);
|
||||
}
|
||||
@@ -36,7 +36,7 @@ const DEFAULT_SETTINGS: ReadingSettings = {
|
||||
|
||||
const SAVE_DEBOUNCE_MS = 600;
|
||||
|
||||
export function applyReadingCssVariables(settings: ReadingSettings): void {
|
||||
function applyReadingCssVariables(settings: ReadingSettings): void {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--reader-bg", settings.background_color);
|
||||
root.style.setProperty("--reader-text", settings.text_color);
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18n-lite";
|
||||
import { booksApi } from "../api/books";
|
||||
import { getApiErrorMessage } from "../api/errors";
|
||||
import { SimpleFormPageLayout } from "../components/layout/SimpleFormPageLayout";
|
||||
|
||||
export function AddBookPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -33,11 +34,7 @@ export function AddBookPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← {t("common.back")}</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{t("addBook.title")}</h1>
|
||||
</header>
|
||||
<SimpleFormPageLayout title={t("addBook.title")} onBack={() => navigate("/")}>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
@@ -55,6 +52,6 @@ export function AddBookPage() {
|
||||
</div>
|
||||
<button type="submit" disabled={uploading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: uploading ? 0.6 : 1, marginTop: 8 }}>{uploading ? t("addBook.uploading") : t("addBook.upload")}</button>
|
||||
</form>
|
||||
</div>
|
||||
</SimpleFormPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -56,5 +56,7 @@ function AuthForm({ isLogin, onToggle }: { isLogin: boolean; onToggle: () => voi
|
||||
);
|
||||
}
|
||||
|
||||
export function LoginPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={true} onToggle={onToggle} />; }
|
||||
export function RegisterPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={false} onToggle={onToggle} />; }
|
||||
export default function AuthPage() {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
return <AuthForm isLogin={isLogin} onToggle={() => setIsLogin((v) => !v)} />;
|
||||
}
|
||||
|
||||
@@ -57,7 +57,6 @@ export function LibraryPage() {
|
||||
const [filters, setFilters] = useState<FilterState>({ genre: "", author: "", reading_status: "" });
|
||||
const [genres, setGenres] = useState<string[]>([]);
|
||||
const [authors, setAuthors] = useState<string[]>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
|
||||
@@ -95,11 +94,9 @@ export function LibraryPage() {
|
||||
items = items.filter((b) => b.reading_status === params.reading_status);
|
||||
}
|
||||
setBooks(items);
|
||||
setTotalCount(items.length);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t("library.loadFailed"));
|
||||
setBooks([]);
|
||||
setTotalCount(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -169,7 +166,6 @@ export function LibraryPage() {
|
||||
refreshFilterOptions(next);
|
||||
return next;
|
||||
});
|
||||
setTotalCount((count) => Math.max(0, count - 1));
|
||||
}, [refreshFilterOptions]);
|
||||
|
||||
const handleBookContextMenu = useCallback((e: React.MouseEvent, book: LibraryBook) => {
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18n-lite";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { ReadingSettings } from "../types/book";
|
||||
import type { SupportedLanguage } from "../locales";
|
||||
import { SimpleFormPageLayout } from "../components/layout/SimpleFormPageLayout";
|
||||
|
||||
const BG_COLORS = [
|
||||
{ value: "#ffffff", labelKey: "settings.bgWhite" },
|
||||
@@ -41,11 +42,7 @@ export function SettingsPage() {
|
||||
if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>{t("settings.loading")}</p></div>;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← {t("common.back")}</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{t("settings.title")}</h1>
|
||||
</header>
|
||||
<SimpleFormPageLayout title={t("settings.title")} onBack={() => navigate("/")}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
{success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>{t("settings.saved")}</div>}
|
||||
@@ -90,6 +87,6 @@ export function SettingsPage() {
|
||||
|
||||
<button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? t("common.saving") : t("settings.saveSettings")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</SimpleFormPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -101,12 +101,4 @@ export interface BookSearchParams {
|
||||
ordering?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
}
|
||||
|
||||
export const READING_STATUS_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: "", label: "All Statuses" },
|
||||
{ value: "want_to_read", label: "Want to Read" },
|
||||
{ value: "reading", label: "Reading" },
|
||||
{ value: "finished", label: "Finished" },
|
||||
{ value: "dnf", label: "Did Not Finish" },
|
||||
];
|
||||
}
|
||||
@@ -1,29 +1,5 @@
|
||||
/** Core domain types for Cloud Reader */
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
email: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface Book {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
total_pages: number;
|
||||
cover_image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface BookSummary {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
total_pages: number;
|
||||
cover_image: string;
|
||||
}
|
||||
|
||||
export interface Bookmark {
|
||||
id: string;
|
||||
ebook: number;
|
||||
@@ -39,17 +15,6 @@ export interface Bookmark {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Note {
|
||||
id: string;
|
||||
book: string;
|
||||
book_title: string;
|
||||
page: number;
|
||||
location_text: string;
|
||||
content: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateMarkerPayload {
|
||||
ebook: number;
|
||||
epub_cfi: string;
|
||||
@@ -60,18 +25,6 @@ export interface CreateMarkerPayload {
|
||||
highlight_color?: string;
|
||||
}
|
||||
|
||||
/** @deprecated Legacy note create */
|
||||
export interface CreateNotePayload {
|
||||
book: string;
|
||||
page: number;
|
||||
location_text?: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface UpdateNotePayload {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
count: number;
|
||||
next: string | null;
|
||||
@@ -79,11 +32,6 @@ export interface PaginatedResponse<T> {
|
||||
results: T[];
|
||||
}
|
||||
|
||||
export interface TokenResponse {
|
||||
access: string;
|
||||
refresh: string;
|
||||
}
|
||||
|
||||
export interface MarkerEntry {
|
||||
id: string;
|
||||
ebook_id: number;
|
||||
|
||||
@@ -3,19 +3,6 @@
|
||||
* Reading view, settings, chapters, and progress types.
|
||||
*/
|
||||
|
||||
export interface ChapterSummary {
|
||||
id: number;
|
||||
book: number;
|
||||
title: string;
|
||||
number: number;
|
||||
}
|
||||
|
||||
export interface ChapterDetail extends ChapterSummary {
|
||||
content: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ReadingSettings {
|
||||
font_family: "sans-serif" | "serif" | "monospace";
|
||||
font_size: number;
|
||||
|
||||
@@ -55,7 +55,10 @@ export function ebookMatchesQuery(item: Pick<EbookLibraryItem, "title" | "author
|
||||
return item.subjects.some((s) => s.toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
export function collectGenresFromEbooks(ebooks: EBookListItem[], locale: SupportedLanguage): string[] {
|
||||
export function collectGenresFromEbooks(
|
||||
ebooks: Pick<EBookListItem, "subjects">[],
|
||||
locale: SupportedLanguage,
|
||||
): string[] {
|
||||
const set = new Set<string>();
|
||||
for (const e of ebooks) {
|
||||
for (const s of filterSubjectsByLocale(e.subjects ?? [], locale)) set.add(s);
|
||||
@@ -63,7 +66,7 @@ export function collectGenresFromEbooks(ebooks: EBookListItem[], locale: Support
|
||||
return [...set].sort((a, b) => a.localeCompare(b, locale));
|
||||
}
|
||||
|
||||
export function collectAuthorsFromEbooks(ebooks: EBookListItem[]): string[] {
|
||||
export function collectAuthorsFromEbooks(ebooks: Pick<EBookListItem, "author">[]): string[] {
|
||||
const set = new Set<string>();
|
||||
for (const e of ebooks) {
|
||||
if (e.author?.trim()) set.add(e.author.trim());
|
||||
|
||||
@@ -28,7 +28,7 @@ function annotationId(bookmarkId: string): string {
|
||||
return `bookmark-hl-${bookmarkId}`;
|
||||
}
|
||||
|
||||
export function applyBookmarkHighlight(
|
||||
function applyBookmarkHighlight(
|
||||
rendition: EpubRenditionWithHighlights,
|
||||
bookmark: BookmarkHighlight,
|
||||
): void {
|
||||
@@ -53,7 +53,7 @@ export function applyBookmarkHighlight(
|
||||
}
|
||||
}
|
||||
|
||||
export function removeBookmarkHighlight(
|
||||
function removeBookmarkHighlight(
|
||||
rendition: EpubRenditionWithHighlights,
|
||||
bookmark: BookmarkHighlight,
|
||||
): void {
|
||||
|
||||
@@ -67,11 +67,6 @@ export function percentageFromCfi(rendition: EpubRendition, cfi: string): number
|
||||
}
|
||||
}
|
||||
|
||||
export function spineLength(rendition: EpubRendition): number {
|
||||
const items = rendition.book?.spine?.spineItems;
|
||||
return items?.length ?? 0;
|
||||
}
|
||||
|
||||
/** Map nav/TOC href to a spine href epub.js can display. */
|
||||
export function resolveSpineHref(book: EpubBookForNav, href: string): string {
|
||||
const hashIndex = href.indexOf("#");
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
export const FINISHED_PROGRESS_THRESHOLD = 99;
|
||||
const FINISHED_PROGRESS_THRESHOLD = 99;
|
||||
|
||||
export type LibraryReadingStatus = "want_to_read" | "reading" | "finished";
|
||||
|
||||
/** API may return progress as a number or numeric string. */
|
||||
export function coerceProgressPercent(progress: unknown): number | null {
|
||||
function coerceProgressPercent(progress: unknown): number | null {
|
||||
if (progress == null || progress === "") return null;
|
||||
const n = typeof progress === "number" ? progress : Number(progress);
|
||||
if (!Number.isFinite(n)) return null;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { DEFAULT_BOOKMARK_HIGHLIGHT_COLOR } from "@/constants/bookmarkHighlightColors";
|
||||
import { DEFAULT_BOOKMARK_HIGHLIGHT_COLOR } from "@/constants/bookmarkHighlightColors";
|
||||
import type { Bookmark, MarkerEntry, MarkersByBook } from "@/types";
|
||||
|
||||
export function bookmarkToMarkerEntry(b: Bookmark): MarkerEntry {
|
||||
@@ -19,7 +18,14 @@ export function bookmarkToMarkerEntry(b: Bookmark): MarkerEntry {
|
||||
};
|
||||
}
|
||||
|
||||
export function sortMarkers(a: MarkerEntry, b: MarkerEntry): number {
|
||||
function sortMarkers(a: MarkerEntry, b: MarkerEntry): number {
|
||||
if (a.chapter_index !== b.chapter_index) {
|
||||
return a.chapter_index - b.chapter_index;
|
||||
}
|
||||
return a.epub_cfi.localeCompare(b.epub_cfi);
|
||||
}
|
||||
|
||||
export function sortBookmarks(a: Bookmark, b: Bookmark): number {
|
||||
if (a.chapter_index !== b.chapter_index) {
|
||||
return a.chapter_index - b.chapter_index;
|
||||
}
|
||||
|
||||
@@ -7,10 +7,6 @@ export interface ParsedPdfAnchor {
|
||||
|
||||
const PDF_ANCHOR_PREFIX = "pdf:v1:";
|
||||
|
||||
export function isPdfAnchor(anchor: string): boolean {
|
||||
return anchor.startsWith(PDF_ANCHOR_PREFIX) || anchor.startsWith("pdf:page:");
|
||||
}
|
||||
|
||||
export function parsePageHref(href: string): number | null {
|
||||
const match = href.match(/^pdf:page:(\d+)$/);
|
||||
if (!match) return null;
|
||||
@@ -38,7 +34,7 @@ export function parsePdfAnchor(anchor: string): ParsedPdfAnchor | null {
|
||||
|
||||
const rectsMatch = anchor.match(/rects=([^;]+)/);
|
||||
let rects: PdfRect[] = [];
|
||||
if (rectsMatch) {
|
||||
if (rectsMatch?.[1]) {
|
||||
try {
|
||||
const parsed = JSON.parse(decodeURIComponent(rectsMatch[1])) as unknown;
|
||||
if (Array.isArray(parsed)) {
|
||||
@@ -56,27 +52,3 @@ export function parsePdfAnchor(anchor: string): ParsedPdfAnchor | null {
|
||||
|
||||
return { page, rects };
|
||||
}
|
||||
|
||||
export function rectsFromSelection(
|
||||
range: Range,
|
||||
pageElement: HTMLElement,
|
||||
): PdfRect[] {
|
||||
const pageRect = pageElement.getBoundingClientRect();
|
||||
if (pageRect.width <= 0 || pageRect.height <= 0) return [];
|
||||
|
||||
const rects: PdfRect[] = [];
|
||||
for (const clientRect of range.getClientRects()) {
|
||||
if (clientRect.width <= 0 || clientRect.height <= 0) continue;
|
||||
const x = (clientRect.left - pageRect.left) / pageRect.width;
|
||||
const y = (clientRect.top - pageRect.top) / pageRect.height;
|
||||
const w = clientRect.width / pageRect.width;
|
||||
const h = clientRect.height / pageRect.height;
|
||||
rects.push([
|
||||
Math.max(0, Math.min(1, x)),
|
||||
Math.max(0, Math.min(1, y)),
|
||||
Math.max(0, Math.min(1, w)),
|
||||
Math.max(0, Math.min(1, h)),
|
||||
]);
|
||||
}
|
||||
return rects;
|
||||
}
|
||||
|
||||
@@ -7,4 +7,6 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
|
||||
|
||||
export { pdfjs };
|
||||
|
||||
export type PdfDocumentProxy = Awaited<ReturnType<typeof pdfjs.getDocument>>["promise"];
|
||||
export type PdfDocumentProxy = Awaited<
|
||||
ReturnType<typeof pdfjs.getDocument>["promise"]
|
||||
>;
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import { ReactReaderStyle, type IReactReaderStyle } from "react-reader";
|
||||
import type { ReadingSettings } from "../types/reader";
|
||||
|
||||
const THEME_ARROWS: Record<ReadingSettings["theme"], string> = {
|
||||
sepia: "#b8a898",
|
||||
dark: "#666666",
|
||||
light: "#cccccc",
|
||||
paper: "#c4b8a8",
|
||||
};
|
||||
|
||||
const THEME_ARROW_HOVER: Record<ReadingSettings["theme"], string> = {
|
||||
sepia: "#8a7a6a",
|
||||
dark: "#aaaaaa",
|
||||
light: "#888888",
|
||||
paper: "#7a6a5a",
|
||||
};
|
||||
|
||||
/** Build complete react-reader styles — must spread ReactReaderStyle; partial objects break layout. */
|
||||
export function buildReaderStyles(settings: ReadingSettings): IReactReaderStyle {
|
||||
return {
|
||||
...ReactReaderStyle,
|
||||
container: {
|
||||
...ReactReaderStyle.container,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
},
|
||||
containerExpanded: ReactReaderStyle.containerExpanded,
|
||||
readerArea: {
|
||||
...ReactReaderStyle.readerArea,
|
||||
backgroundColor: settings.background_color,
|
||||
transition: undefined,
|
||||
},
|
||||
titleArea: {
|
||||
...ReactReaderStyle.titleArea,
|
||||
display: "none",
|
||||
},
|
||||
reader: {
|
||||
...ReactReaderStyle.reader,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
arrow: {
|
||||
...ReactReaderStyle.arrow,
|
||||
color: THEME_ARROWS[settings.theme],
|
||||
fontSize: 48,
|
||||
marginTop: -24,
|
||||
},
|
||||
arrowHover: {
|
||||
...ReactReaderStyle.arrowHover,
|
||||
color: THEME_ARROW_HOVER[settings.theme],
|
||||
},
|
||||
tocButton: {
|
||||
...ReactReaderStyle.tocButton,
|
||||
display: "none",
|
||||
},
|
||||
tocArea: ReactReaderStyle.tocArea,
|
||||
tocAreaButton: ReactReaderStyle.tocAreaButton,
|
||||
loadingView: {
|
||||
...ReactReaderStyle.loadingView,
|
||||
color: "#999",
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/api/annotations.ts","./src/api/books.ts","./src/api/client.ts","./src/api/errors.ts","./src/api/reader.ts","./src/components/bookcontextmenu.tsx","./src/components/toastcontainer.tsx","./src/components/annotations/bookmarksnotespage.tsx","./src/components/annotations/markerthreadsview.tsx","./src/components/annotations/index.ts","./src/components/layout/layout.tsx","./src/components/layout/index.ts","./src/components/reader/bookmarkerspanel.tsx","./src/components/reader/readertoolbar.tsx","./src/components/reader/readingsettingspanel.tsx","./src/components/reader/selectionpopover.tsx","./src/components/reader/tableofcontents.tsx","./src/components/search/searchsuggestions.tsx","./src/context/annotationscontext.tsx","./src/context/authcontext.tsx","./src/hooks/index.ts","./src/hooks/usedebounce.ts","./src/hooks/useepubreader.ts","./src/hooks/useepubselection.ts","./src/hooks/usemediaquery.ts","./src/hooks/usepaginatedquery.ts","./src/hooks/usereadingsettings.ts","./src/hooks/usetoast.tsx","./src/hooks/usevoicesearch.ts","./src/i18n/i18nprovider.tsx","./src/locales/en-us.ts","./src/locales/es-es.ts","./src/locales/index.ts","./src/pages/addbook.tsx","./src/pages/authpage.tsx","./src/pages/bookdetailpage.tsx","./src/pages/library.tsx","./src/pages/readingpage.tsx","./src/pages/settings.tsx","./src/types/book.ts","./src/types/index.ts","./src/types/reader.ts","./src/types/speech-recognition.d.ts","./src/types/__tests__/types.test.ts","./src/utils/epubrendition.ts","./src/utils/librarystatus.ts","./src/utils/markers.ts","./src/utils/reactreadertheme.ts","./vite-env.d.ts"],"version":"5.7.3"}
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/api/annotations.ts","./src/api/books.ts","./src/api/client.ts","./src/api/errors.ts","./src/api/loadebookwithprogress.ts","./src/api/reader.ts","./src/components/bookcontextmenu.tsx","./src/components/toastcontainer.tsx","./src/components/annotations/bookmarksnotespage.tsx","./src/components/annotations/collapsiblemarkertext.tsx","./src/components/annotations/markerpassageactions.tsx","./src/components/annotations/markerthreadsview.tsx","./src/components/layout/simpleformpagelayout.tsx","./src/components/library/finishedbooksshelf.tsx","./src/components/library/librarybookcard.tsx","./src/components/reader/bookmarkerspanel.tsx","./src/components/reader/bookmarkcolorpicker.tsx","./src/components/reader/bookmarkicon.tsx","./src/components/reader/bookmarkreaderrail.tsx","./src/components/reader/epubreadingview.tsx","./src/components/reader/panelclosebutton.tsx","./src/components/reader/pdflimitationsnotice.tsx","./src/components/reader/pdfreadingview.tsx","./src/components/reader/pdfviewer.tsx","./src/components/reader/readererrorscreen.tsx","./src/components/reader/readerloadingscreen.tsx","./src/components/reader/readersuspenseshell.tsx","./src/components/reader/readertocbutton.tsx","./src/components/reader/readertoolbar.tsx","./src/components/reader/readingsettingspanel.tsx","./src/components/reader/resumereadingbutton.tsx","./src/components/reader/selectionpopover.tsx","./src/components/reader/tableofcontents.tsx","./src/components/search/searchsuggestions.tsx","./src/constants/bookmarkhighlightcolors.ts","./src/context/annotationscontext.tsx","./src/context/authcontext.tsx","./src/hooks/usebookmarkraillayout.ts","./src/hooks/usedebounce.ts","./src/hooks/useepubhighlights.ts","./src/hooks/useepubreader.ts","./src/hooks/useepubselection.ts","./src/hooks/usemediaquery.ts","./src/hooks/usepdfreader.ts","./src/hooks/usereaderorientationcss.ts","./src/hooks/usereadingsettings.ts","./src/hooks/usetoast.tsx","./src/hooks/usevoicesearch.ts","./src/i18n/i18nprovider.tsx","./src/locales/en-us.ts","./src/locales/es-es.ts","./src/locales/index.ts","./src/pages/addbook.tsx","./src/pages/authpage.tsx","./src/pages/bookdetailpage.tsx","./src/pages/library.tsx","./src/pages/readingpage.tsx","./src/pages/settings.tsx","./src/types/book.ts","./src/types/index.ts","./src/types/reader.ts","./src/types/speech-recognition.d.ts","./src/types/__tests__/types.test.ts","./src/utils/bookmarkraillayout.ts","./src/utils/ebooklibrary.ts","./src/utils/epubhighlights.ts","./src/utils/epubrendition.ts","./src/utils/librarystatus.ts","./src/utils/markers.ts","./src/utils/pdfanchor.ts","./src/utils/pdftoc.ts","./src/utils/pdfjssetup.ts","./src/utils/subjectlocale.ts","./vite-env.d.ts"],"version":"5.7.3"}
|
||||
@@ -0,0 +1,10 @@
|
||||
# Mobile (Expo) environment (example – never commit real secrets)
|
||||
# Base URL of the Django backend. Must be reachable from the device/emulator.
|
||||
# - Android emulator: http://10.0.2.2:8000
|
||||
# - iOS simulator: http://localhost:8000
|
||||
# - Physical device: http://<your-lan-ip>:8000
|
||||
EXPO_PUBLIC_API_URL=http://10.0.2.2:8000
|
||||
|
||||
# EAS Build: set per profile in mobile/eas.json or via:
|
||||
# eas secret:create --name EXPO_PUBLIC_API_URL --value https://your-api.example.com
|
||||
# Run all eas commands from mobile/ (not repo root).
|
||||
+13
-7
@@ -1,4 +1,8 @@
|
||||
import React from "react";
|
||||
// Peer dependencies for @epubjs-react-native/core and gesture-handler.
|
||||
import "react-native-webview";
|
||||
import "react-native-reanimated";
|
||||
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
||||
import { NavigationContainer } from "@react-navigation/native";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { AuthProvider } from "./src/context/AuthContext";
|
||||
@@ -6,11 +10,13 @@ import { RootNavigator } from "./src/navigation/RootNavigator";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<NavigationContainer>
|
||||
<StatusBar style="auto" />
|
||||
<RootNavigator />
|
||||
</NavigationContainer>
|
||||
</AuthProvider>
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<AuthProvider>
|
||||
<NavigationContainer>
|
||||
<StatusBar style="auto" />
|
||||
<RootNavigator />
|
||||
</NavigationContainer>
|
||||
</AuthProvider>
|
||||
</GestureHandlerRootView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
"package": "com.cloudreader.app"
|
||||
},
|
||||
"plugins": [
|
||||
"expo-document-picker",
|
||||
"expo-file-system"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 13.0.0",
|
||||
"appVersionSource": "remote"
|
||||
},
|
||||
"build": {
|
||||
"base": {
|
||||
"node": "20.18.0",
|
||||
"env": {
|
||||
"EXPO_PUBLIC_API_URL": "https://api.example.com"
|
||||
}
|
||||
},
|
||||
"development": {
|
||||
"extends": "base",
|
||||
"developmentClient": true,
|
||||
"distribution": "internal",
|
||||
"ios": {
|
||||
"simulator": true
|
||||
},
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
},
|
||||
"env": {
|
||||
"EXPO_PUBLIC_API_URL": "http://10.0.2.2:8000"
|
||||
}
|
||||
},
|
||||
"preview": {
|
||||
"extends": "base",
|
||||
"distribution": "internal",
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
}
|
||||
},
|
||||
"production": {
|
||||
"extends": "base",
|
||||
"autoIncrement": true
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
const { getDefaultConfig } = require("expo/metro-config");
|
||||
const path = require("path");
|
||||
|
||||
const projectRoot = __dirname;
|
||||
const monorepoRoot = path.resolve(projectRoot, "..");
|
||||
|
||||
/**
|
||||
* Expo SDK 52+ configures Metro for Yarn/npm/pnpm workspaces automatically
|
||||
* when using expo/metro-config. This file keeps an explicit monorepo root so
|
||||
* @cloud-reader/shared (packages/shared) resolves reliably in dev and on EAS.
|
||||
*
|
||||
* If you previously added manual watchFolders/nodeModulesPaths and things
|
||||
* work, prefer this minimal config. After changes: npx expo start --clear
|
||||
*
|
||||
* @see https://docs.expo.dev/guides/monorepos/
|
||||
*/
|
||||
const config = getDefaultConfig(projectRoot);
|
||||
|
||||
config.watchFolders = [monorepoRoot];
|
||||
config.resolver.nodeModulesPaths = [
|
||||
path.resolve(projectRoot, "node_modules"),
|
||||
path.resolve(monorepoRoot, "node_modules"),
|
||||
];
|
||||
|
||||
module.exports = config;
|
||||
+8
-2
@@ -8,7 +8,11 @@
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web",
|
||||
"lint": "eslint ."
|
||||
"lint": "eslint .",
|
||||
"eas:init": "eas init",
|
||||
"eas:build:dev": "eas build --profile development --platform all",
|
||||
"eas:build:preview": "eas build --profile preview --platform all",
|
||||
"eas:build:prod": "eas build --profile production --platform all"
|
||||
},
|
||||
"dependencies": {
|
||||
"expo": "~52.0.0",
|
||||
@@ -22,10 +26,12 @@
|
||||
"@react-navigation/bottom-tabs": "^7.0.0",
|
||||
"axios": "^1.7.9",
|
||||
"@react-native-async-storage/async-storage": "2.1.0",
|
||||
"expo-document-picker": "~13.0.0",
|
||||
"@epubjs-react-native/core": "1.4.7",
|
||||
"@epubjs-react-native/expo-file-system": "1.1.4",
|
||||
"expo-file-system": "~18.0.0",
|
||||
"react-native-gesture-handler": "~2.20.0",
|
||||
"react-native-reanimated": "~3.16.0",
|
||||
"react-native-webview": "13.12.5",
|
||||
"@cloud-reader/shared": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,55 +1,31 @@
|
||||
import api from "./client";
|
||||
import type {
|
||||
Bookmark,
|
||||
Note,
|
||||
CreateBookmarkPayload,
|
||||
CreateNotePayload,
|
||||
PaginatedResponse,
|
||||
} from "@cloud-reader/shared";
|
||||
import type { PaginatedResponse } from "@cloud-reader/shared";
|
||||
import type { Bookmark, CreateMarkerPayload } from "../types";
|
||||
|
||||
export function fetchBookmarks(
|
||||
bookId?: string,
|
||||
export async function fetchBookmarks(
|
||||
ebookId?: string | number,
|
||||
): Promise<PaginatedResponse<Bookmark>> {
|
||||
const params = bookId ? { book: bookId } : {};
|
||||
return api
|
||||
.get<PaginatedResponse<Bookmark>>("/api/annotations/bookmarks/", { params })
|
||||
.then((res) => res.data);
|
||||
const params: Record<string, string> = {};
|
||||
if (ebookId != null && ebookId !== "") {
|
||||
params.ebook = String(ebookId);
|
||||
}
|
||||
const { data } = await api.get<PaginatedResponse<Bookmark>>(
|
||||
"/api/annotations/bookmarks/",
|
||||
{ params },
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
export function createBookmark(
|
||||
payload: CreateBookmarkPayload,
|
||||
export async function createMarker(
|
||||
payload: CreateMarkerPayload,
|
||||
): Promise<Bookmark> {
|
||||
return api
|
||||
.post<Bookmark>("/api/annotations/bookmarks/", payload)
|
||||
.then((res) => res.data);
|
||||
const { data } = await api.post<Bookmark>(
|
||||
"/api/annotations/bookmarks/",
|
||||
payload,
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
export function deleteBookmark(id: string): Promise<void> {
|
||||
return api.delete(`/api/annotations/bookmarks/${id}/`).then(() => {});
|
||||
export async function deleteBookmark(id: string): Promise<void> {
|
||||
await api.delete(`/api/annotations/bookmarks/${id}/`);
|
||||
}
|
||||
|
||||
export function fetchNotes(bookId?: string): Promise<PaginatedResponse<Note>> {
|
||||
const params = bookId ? { book: bookId } : {};
|
||||
return api
|
||||
.get<PaginatedResponse<Note>>("/api/annotations/notes/", { params })
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
export function createNote(payload: CreateNotePayload): Promise<Note> {
|
||||
return api
|
||||
.post<Note>("/api/annotations/notes/", payload)
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
export function updateNote(
|
||||
id: string,
|
||||
content: string,
|
||||
): Promise<Note> {
|
||||
return api
|
||||
.patch<Note>(`/api/annotations/notes/${id}/`, { content })
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
export function deleteNote(id: string): Promise<void> {
|
||||
return api.delete(`/api/annotations/notes/${id}/`).then(() => {});
|
||||
}
|
||||
+1
-20
@@ -1,31 +1,12 @@
|
||||
import api from "./client";
|
||||
import type { Book, PaginatedResponse } from "@cloud-reader/shared";
|
||||
|
||||
export function fetchBooks(
|
||||
page = 1,
|
||||
pageSize = 20,
|
||||
): Promise<PaginatedResponse<Book>> {
|
||||
return api
|
||||
.get<PaginatedResponse<Book>>("/api/books/", {
|
||||
params: { page, page_size: pageSize },
|
||||
})
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
export function fetchBook(id: string): Promise<Book> {
|
||||
return api.get<Book>(`/api/books/${id}/`).then((res) => res.data);
|
||||
}
|
||||
|
||||
export function searchBooks(
|
||||
query: string,
|
||||
): Promise<PaginatedResponse<Book>> {
|
||||
return api
|
||||
.get<PaginatedResponse<Book>>("/api/books/search/", {
|
||||
.get<PaginatedResponse<Book>>("/api/books/", {
|
||||
params: { q: query },
|
||||
})
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
export function deleteBook(id: string): Promise<void> {
|
||||
return api.delete(`/api/books/${id}/`).then(() => {});
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import axios, { type AxiosError, type InternalAxiosRequestConfig } from "axios";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import type { TokenResponse } from "@cloud-reader/shared";
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
ACCESS_TOKEN: "access_token",
|
||||
@@ -39,6 +40,26 @@ async function clearTokens(): Promise<void> {
|
||||
]);
|
||||
}
|
||||
|
||||
async function saveTokens(tokens: TokenResponse): Promise<void> {
|
||||
await setTokens(tokens.access, tokens.refresh);
|
||||
}
|
||||
|
||||
async function loadTokens(): Promise<TokenResponse | null> {
|
||||
const [access, refresh] = await Promise.all([
|
||||
getAccessToken(),
|
||||
getRefreshToken(),
|
||||
]);
|
||||
if (!access || !refresh) {
|
||||
return null;
|
||||
}
|
||||
return { access, refresh };
|
||||
}
|
||||
|
||||
/** Absolute base URL used for direct (non-axios) requests like file downloads. */
|
||||
function getApiBaseUrl(): string {
|
||||
return api.defaults.baseURL ?? "";
|
||||
}
|
||||
|
||||
// ── Request interceptor ─────────────────────────────────────────────
|
||||
|
||||
api.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
|
||||
@@ -136,5 +157,14 @@ api.interceptors.response.use(
|
||||
},
|
||||
);
|
||||
|
||||
export { getAccessToken, getRefreshToken, setTokens, clearTokens };
|
||||
const apiClient = api;
|
||||
|
||||
export {
|
||||
apiClient,
|
||||
getAccessToken,
|
||||
saveTokens,
|
||||
loadTokens,
|
||||
clearTokens,
|
||||
getApiBaseUrl,
|
||||
};
|
||||
export default api;
|
||||
+17
-36
@@ -1,54 +1,35 @@
|
||||
import { apiClient } from "./client";
|
||||
import { apiClient, getApiBaseUrl } from "./client";
|
||||
import type {
|
||||
EBookListItem,
|
||||
EBookDetail,
|
||||
ReadingProgress,
|
||||
ReadingSettings,
|
||||
TocResponse,
|
||||
ContentResponse,
|
||||
PaginatedResponse,
|
||||
} from "@cloud-reader/shared";
|
||||
|
||||
export const ebooksApi = {
|
||||
/** List uploaded e-books */
|
||||
/** List the authenticated user's uploaded e-books */
|
||||
list() {
|
||||
return apiClient.get<PaginatedResponse<EBookListItem>>("/api/ebooks/");
|
||||
return apiClient.get<PaginatedResponse<EBookListItem>>(
|
||||
"/api/books/ebooks/",
|
||||
);
|
||||
},
|
||||
|
||||
/** Get e-book detail */
|
||||
/** Get e-book detail (metadata, format, progress) */
|
||||
get(id: number) {
|
||||
return apiClient.get<EBookDetail>(`/api/ebooks/${id}/`);
|
||||
return apiClient.get<EBookDetail>(`/api/books/ebooks/${id}/`);
|
||||
},
|
||||
|
||||
/** Get table of contents */
|
||||
/** Get the table of contents (used as a fallback for chapter navigation) */
|
||||
getToc(id: number) {
|
||||
return apiClient.get<TocResponse>(`/api/ebooks/${id}/toc/`);
|
||||
return apiClient.get<TocResponse>(`/api/books/ebooks/${id}/toc/`);
|
||||
},
|
||||
|
||||
/** Get page content */
|
||||
getContent(id: number, page: number) {
|
||||
return apiClient.get<ContentResponse>(
|
||||
`/api/ebooks/${id}/content/?page=${page}`,
|
||||
);
|
||||
/**
|
||||
* Absolute URL to stream the raw ebook file. The endpoint requires JWT auth,
|
||||
* so callers download it with an Authorization header (e.g. via
|
||||
* expo-file-system) rather than handing the URL to a renderer directly.
|
||||
*/
|
||||
getFileUrl(id: number): string {
|
||||
return `${getApiBaseUrl()}/api/books/ebooks/${id}/file/`;
|
||||
},
|
||||
|
||||
/** Update reading progress */
|
||||
updateProgress(id: number, data: Partial<ReadingProgress>) {
|
||||
return apiClient.patch<ReadingProgress>(
|
||||
`/api/ebooks/${id}/progress/`,
|
||||
data,
|
||||
);
|
||||
},
|
||||
|
||||
/** Get or update reading settings */
|
||||
getSettings(id: number) {
|
||||
return apiClient.get<ReadingSettings>(`/api/ebooks/${id}/settings/`);
|
||||
},
|
||||
|
||||
updateSettings(id: number, data: Partial<ReadingSettings>) {
|
||||
return apiClient.patch<ReadingSettings>(
|
||||
`/api/ebooks/${id}/settings/`,
|
||||
data,
|
||||
);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
export { apiClient, saveTokens, loadTokens, clearTokens } from "./client";
|
||||
export { booksApi } from "./books";
|
||||
export { ebooksApi } from "./ebooks";
|
||||
export { annotationsApi } from "./annotations";
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* Reader API client — reading settings and per-book progress.
|
||||
* Mirrors frontend/src/api/reader.ts. Uses the shared axios client so the
|
||||
* JWT access token is attached automatically.
|
||||
*/
|
||||
|
||||
import api from "./client";
|
||||
import type { ReadingProgress, ReadingSettings } from "../types/reader";
|
||||
|
||||
export async function getReadingSettings(): Promise<ReadingSettings> {
|
||||
const { data } = await api.get<ReadingSettings>("/api/reader/settings/");
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function updateReadingSettings(
|
||||
settings: Partial<ReadingSettings>,
|
||||
): Promise<ReadingSettings> {
|
||||
const { data } = await api.patch<ReadingSettings>(
|
||||
"/api/reader/settings/",
|
||||
settings,
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
interface ProgressWire {
|
||||
current_position: number;
|
||||
last_page: number;
|
||||
epub_location?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
function toReadingProgress(bookId: number, data: ProgressWire): ReadingProgress {
|
||||
return {
|
||||
id: bookId,
|
||||
book: bookId,
|
||||
current_chapter: data.last_page || 1,
|
||||
current_position: data.current_position ?? 0,
|
||||
percentage: data.current_position ?? 0,
|
||||
epub_location: data.epub_location ?? "",
|
||||
updated_at: data.updated_at ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
export async function getReadingProgress(
|
||||
bookId: number,
|
||||
): Promise<ReadingProgress> {
|
||||
const { data } = await api.get<ProgressWire>(
|
||||
`/api/books/ebooks/${bookId}/progress/`,
|
||||
);
|
||||
return toReadingProgress(bookId, data);
|
||||
}
|
||||
|
||||
export async function updateReadingProgress(
|
||||
bookId: number,
|
||||
progress: Partial<ReadingProgress>,
|
||||
): Promise<ReadingProgress> {
|
||||
const body: Record<string, string | number> = {};
|
||||
if (
|
||||
progress.percentage !== undefined ||
|
||||
progress.current_position !== undefined
|
||||
) {
|
||||
body.current_position = progress.percentage ?? progress.current_position ?? 0;
|
||||
}
|
||||
if (progress.current_chapter !== undefined) {
|
||||
body.last_page = progress.current_chapter;
|
||||
}
|
||||
if (progress.epub_location !== undefined) {
|
||||
body.epub_location = progress.epub_location;
|
||||
}
|
||||
const { data } = await api.patch<ProgressWire>(
|
||||
`/api/books/ebooks/${bookId}/progress/`,
|
||||
body,
|
||||
);
|
||||
return toReadingProgress(bookId, data);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import { type ReactNode } from "react";
|
||||
import {
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { resolvePalette } from "../../utils/epubTheme";
|
||||
import type { ReadingSettings } from "../../types/reader";
|
||||
import type { Bookmark } from "../../types";
|
||||
import { ReaderBottomSheet } from "./ReaderBottomSheet";
|
||||
|
||||
interface BookmarksModalProps {
|
||||
visible: boolean;
|
||||
bookmarks: Bookmark[];
|
||||
settings: ReadingSettings;
|
||||
onSelect: (bookmark: Bookmark) => void;
|
||||
onDelete: (bookmark: Bookmark) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function BookmarksModal({
|
||||
visible,
|
||||
bookmarks,
|
||||
settings,
|
||||
onSelect,
|
||||
onDelete,
|
||||
onClose,
|
||||
}: BookmarksModalProps): ReactNode {
|
||||
const palette = resolvePalette(settings);
|
||||
|
||||
return (
|
||||
<ReaderBottomSheet
|
||||
visible={visible}
|
||||
title="Bookmarks & highlights"
|
||||
chromeColor={palette.chrome}
|
||||
textColor={palette.text}
|
||||
onClose={onClose}
|
||||
>
|
||||
<FlatList
|
||||
data={bookmarks}
|
||||
keyExtractor={(item) => item.id}
|
||||
ListEmptyComponent={
|
||||
<Text style={[styles.empty, { color: palette.text }]}>
|
||||
No bookmarks yet. Tap the star to bookmark a page, or select text to
|
||||
highlight it.
|
||||
</Text>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.row}>
|
||||
<TouchableOpacity
|
||||
style={styles.rowMain}
|
||||
onPress={() => onSelect(item)}
|
||||
>
|
||||
{item.highlight_color ? (
|
||||
<View
|
||||
style={[
|
||||
styles.dot,
|
||||
{ backgroundColor: item.highlight_color },
|
||||
]}
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.star}>★</Text>
|
||||
)}
|
||||
<View style={styles.rowTextWrap}>
|
||||
{item.chapter_title ? (
|
||||
<Text
|
||||
style={[styles.chapter, { color: palette.text }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.chapter_title}
|
||||
</Text>
|
||||
) : null}
|
||||
<Text
|
||||
style={[styles.excerpt, { color: palette.text }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.content || item.location_text || "Bookmarked page"}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => onDelete(item)}
|
||||
hitSlop={8}
|
||||
style={styles.deleteButton}
|
||||
>
|
||||
<Text style={styles.deleteText}>Delete</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</ReaderBottomSheet>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: "rgba(127,127,127,0.2)",
|
||||
},
|
||||
rowMain: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
rowTextWrap: {
|
||||
flex: 1,
|
||||
marginLeft: 10,
|
||||
},
|
||||
star: {
|
||||
fontSize: 16,
|
||||
color: "#4f8ef7",
|
||||
},
|
||||
dot: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
},
|
||||
chapter: {
|
||||
fontSize: 12,
|
||||
opacity: 0.7,
|
||||
marginBottom: 2,
|
||||
},
|
||||
excerpt: {
|
||||
fontSize: 14,
|
||||
},
|
||||
deleteButton: {
|
||||
marginLeft: 12,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
deleteText: {
|
||||
color: "#ff453a",
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
},
|
||||
empty: {
|
||||
padding: 24,
|
||||
textAlign: "center",
|
||||
opacity: 0.7,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,436 @@
|
||||
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
type LayoutChangeEvent,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { Reader, ReaderProvider, useReader } from "@epubjs-react-native/core";
|
||||
import { useFileSystem } from "@epubjs-react-native/expo-file-system";
|
||||
import * as FileSystem from "expo-file-system";
|
||||
import type { EBookDetail } from "@cloud-reader/shared";
|
||||
import { getAccessToken } from "../../api/client";
|
||||
import { ebooksApi } from "../../api/ebooks";
|
||||
import { getReadingProgress, updateReadingProgress } from "../../api/reader";
|
||||
import {
|
||||
fetchBookmarks,
|
||||
createMarker,
|
||||
deleteBookmark,
|
||||
} from "../../api/annotations";
|
||||
import { useReadingSettings } from "../../hooks/useReadingSettings";
|
||||
import {
|
||||
buildEpubTheme,
|
||||
FONT_STACKS,
|
||||
resolvePalette,
|
||||
} from "../../utils/epubTheme";
|
||||
import type { Bookmark } from "../../types";
|
||||
import { ReaderToolbar } from "./ReaderToolbar";
|
||||
import { TocModal, type TocItem } from "./TocModal";
|
||||
import { ReadingSettingsModal } from "./ReadingSettingsModal";
|
||||
import { BookmarksModal } from "./BookmarksModal";
|
||||
|
||||
const HIGHLIGHT_COLOR = "#ffd54a";
|
||||
const PROGRESS_SAVE_MS = 800;
|
||||
|
||||
/** Loose view of the epubjs-react-native reader API we rely on. */
|
||||
interface ReaderApi {
|
||||
goToLocation?: (target: string) => void;
|
||||
changeTheme?: (theme: Record<string, Record<string, string>>) => void;
|
||||
changeFontSize?: (size: string) => void;
|
||||
changeFontFamily?: (font: string) => void;
|
||||
addAnnotation?: (
|
||||
type: string,
|
||||
cfiRange: string,
|
||||
data?: unknown,
|
||||
styles?: Record<string, unknown>,
|
||||
) => void;
|
||||
removeAnnotationByCfi?: (cfi: string) => void;
|
||||
removeSelection?: () => void;
|
||||
toc?: TocItem[];
|
||||
}
|
||||
|
||||
interface EpubLocation {
|
||||
start?: { cfi?: string };
|
||||
}
|
||||
|
||||
interface EpubSection {
|
||||
label?: string;
|
||||
index?: number;
|
||||
}
|
||||
|
||||
interface EpubReaderViewProps {
|
||||
book: EBookDetail;
|
||||
ebookId: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function EpubReaderView(props: EpubReaderViewProps): ReactNode {
|
||||
return (
|
||||
<ReaderProvider>
|
||||
<EpubReaderInner {...props} />
|
||||
</ReaderProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function EpubReaderInner({
|
||||
book,
|
||||
ebookId,
|
||||
onClose,
|
||||
}: EpubReaderViewProps): ReactNode {
|
||||
const reader = useReader() as unknown as ReaderApi;
|
||||
const { settings, updateSettings } = useReadingSettings();
|
||||
|
||||
const [src, setSrc] = useState<string | null>(null);
|
||||
const [initialLocation, setInitialLocation] = useState<string | undefined>();
|
||||
const [fileError, setFileError] = useState(false);
|
||||
const [ready, setReady] = useState(false);
|
||||
const [size, setSize] = useState<{ width: number; height: number } | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const [progressPct, setProgressPct] = useState(
|
||||
Math.round(book.progress?.current_position ?? 0),
|
||||
);
|
||||
const [chapterTitle, setChapterTitle] = useState("");
|
||||
const [currentCfi, setCurrentCfi] = useState("");
|
||||
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
|
||||
|
||||
const [tocOpen, setTocOpen] = useState(false);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [bookmarksOpen, setBookmarksOpen] = useState(false);
|
||||
|
||||
const currentCfiRef = useRef("");
|
||||
const progressPctRef = useRef(progressPct);
|
||||
const sectionRef = useRef<{ index: number; label: string }>({
|
||||
index: 0,
|
||||
label: "",
|
||||
});
|
||||
const bookmarksRef = useRef<Bookmark[]>([]);
|
||||
const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
bookmarksRef.current = bookmarks;
|
||||
}, [bookmarks]);
|
||||
|
||||
// Download the EPUB with auth, and resolve the saved resume location.
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
(async () => {
|
||||
try {
|
||||
const progress = await getReadingProgress(ebookId).catch(() => null);
|
||||
if (active && progress?.epub_location) {
|
||||
setInitialLocation(progress.epub_location);
|
||||
currentCfiRef.current = progress.epub_location;
|
||||
setCurrentCfi(progress.epub_location);
|
||||
}
|
||||
const token = await getAccessToken();
|
||||
const url = ebooksApi.getFileUrl(ebookId);
|
||||
const dest = `${FileSystem.cacheDirectory}ebook-${ebookId}.epub`;
|
||||
const result = await FileSystem.downloadAsync(url, dest, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : undefined,
|
||||
});
|
||||
if (!active) return;
|
||||
if (result.status >= 400) {
|
||||
setFileError(true);
|
||||
return;
|
||||
}
|
||||
setSrc(result.uri);
|
||||
} catch {
|
||||
if (active) setFileError(true);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [ebookId]);
|
||||
|
||||
// Load existing bookmarks/highlights for this book.
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
fetchBookmarks(ebookId)
|
||||
.then((res) => {
|
||||
if (active) setBookmarks(res.results);
|
||||
})
|
||||
.catch(() => {
|
||||
/* bookmarks are optional */
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [ebookId]);
|
||||
|
||||
// Apply typography/theme to the rendition once it is ready and on changes.
|
||||
useEffect(() => {
|
||||
if (!ready) return;
|
||||
try {
|
||||
reader.changeTheme?.(buildEpubTheme(settings));
|
||||
reader.changeFontSize?.(`${settings.font_size}px`);
|
||||
reader.changeFontFamily?.(FONT_STACKS[settings.font_family]);
|
||||
} catch {
|
||||
/* ignore rendition styling errors */
|
||||
}
|
||||
}, [ready, settings, reader]);
|
||||
|
||||
const flushProgress = useCallback(() => {
|
||||
const cfi = currentCfiRef.current;
|
||||
if (!cfi) return;
|
||||
updateReadingProgress(ebookId, {
|
||||
percentage: progressPctRef.current,
|
||||
epub_location: cfi,
|
||||
current_chapter: sectionRef.current.index + 1,
|
||||
}).catch(() => {
|
||||
/* progress is best-effort */
|
||||
});
|
||||
}, [ebookId]);
|
||||
|
||||
// Flush the latest progress when leaving the reader.
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
|
||||
flushProgress();
|
||||
},
|
||||
[flushProgress],
|
||||
);
|
||||
|
||||
const handleReady = useCallback(() => {
|
||||
setReady(true);
|
||||
bookmarksRef.current.forEach((bookmark) => {
|
||||
if (bookmark.highlight_color && bookmark.epub_cfi) {
|
||||
try {
|
||||
reader.addAnnotation?.("highlight", bookmark.epub_cfi, undefined, {
|
||||
fill: bookmark.highlight_color,
|
||||
});
|
||||
} catch {
|
||||
/* highlight rendering is best-effort */
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [reader]);
|
||||
|
||||
const handleLocationChange = useCallback(
|
||||
(
|
||||
_total: number,
|
||||
location: EpubLocation,
|
||||
progress: number,
|
||||
section: EpubSection | null,
|
||||
) => {
|
||||
const cfi = location?.start?.cfi ?? "";
|
||||
if (cfi) {
|
||||
currentCfiRef.current = cfi;
|
||||
setCurrentCfi(cfi);
|
||||
}
|
||||
const pct = Math.round(progress ?? 0);
|
||||
progressPctRef.current = pct;
|
||||
setProgressPct(pct);
|
||||
const label = section?.label?.trim() ?? "";
|
||||
sectionRef.current = {
|
||||
index: section?.index ?? sectionRef.current.index,
|
||||
label,
|
||||
};
|
||||
setChapterTitle(label);
|
||||
|
||||
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
|
||||
saveTimerRef.current = setTimeout(flushProgress, PROGRESS_SAVE_MS);
|
||||
},
|
||||
[flushProgress],
|
||||
);
|
||||
|
||||
const handleSelected = useCallback(
|
||||
async (selectedText: string, cfiRange: string) => {
|
||||
const excerpt = (selectedText ?? "").slice(0, 280);
|
||||
try {
|
||||
const created = await createMarker({
|
||||
ebook: ebookId,
|
||||
epub_cfi: cfiRange,
|
||||
chapter_index: sectionRef.current.index,
|
||||
chapter_title: sectionRef.current.label,
|
||||
location_text: excerpt,
|
||||
content: excerpt,
|
||||
highlight_color: HIGHLIGHT_COLOR,
|
||||
});
|
||||
setBookmarks((prev) => [created, ...prev]);
|
||||
try {
|
||||
reader.addAnnotation?.("highlight", cfiRange, undefined, {
|
||||
fill: HIGHLIGHT_COLOR,
|
||||
});
|
||||
reader.removeSelection?.();
|
||||
} catch {
|
||||
/* annotation rendering is best-effort */
|
||||
}
|
||||
} catch {
|
||||
/* ignore highlight save failures */
|
||||
}
|
||||
},
|
||||
[ebookId, reader],
|
||||
);
|
||||
|
||||
const handleToggleBookmarkHere = useCallback(async () => {
|
||||
const cfi = currentCfiRef.current;
|
||||
if (!cfi) return;
|
||||
const existing = bookmarksRef.current.find((b) => b.epub_cfi === cfi);
|
||||
if (existing) {
|
||||
setBookmarks((prev) => prev.filter((b) => b.id !== existing.id));
|
||||
try {
|
||||
reader.removeAnnotationByCfi?.(cfi);
|
||||
} catch {
|
||||
/* best-effort */
|
||||
}
|
||||
deleteBookmark(existing.id).catch(() => {});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const created = await createMarker({
|
||||
ebook: ebookId,
|
||||
epub_cfi: cfi,
|
||||
chapter_index: sectionRef.current.index,
|
||||
chapter_title: sectionRef.current.label,
|
||||
location_text: sectionRef.current.label,
|
||||
});
|
||||
setBookmarks((prev) => [created, ...prev]);
|
||||
} catch {
|
||||
/* ignore bookmark save failures */
|
||||
}
|
||||
}, [ebookId, reader]);
|
||||
|
||||
const handleSelectBookmark = useCallback(
|
||||
(bookmark: Bookmark) => {
|
||||
setBookmarksOpen(false);
|
||||
try {
|
||||
reader.goToLocation?.(bookmark.epub_cfi);
|
||||
} catch {
|
||||
/* best-effort */
|
||||
}
|
||||
},
|
||||
[reader],
|
||||
);
|
||||
|
||||
const handleDeleteBookmark = useCallback(
|
||||
(bookmark: Bookmark) => {
|
||||
setBookmarks((prev) => prev.filter((b) => b.id !== bookmark.id));
|
||||
try {
|
||||
if (bookmark.highlight_color) {
|
||||
reader.removeAnnotationByCfi?.(bookmark.epub_cfi);
|
||||
}
|
||||
} catch {
|
||||
/* best-effort */
|
||||
}
|
||||
deleteBookmark(bookmark.id).catch(() => {});
|
||||
},
|
||||
[reader],
|
||||
);
|
||||
|
||||
const handleTocSelect = useCallback(
|
||||
(href: string) => {
|
||||
setTocOpen(false);
|
||||
try {
|
||||
reader.goToLocation?.(href);
|
||||
} catch {
|
||||
/* best-effort */
|
||||
}
|
||||
},
|
||||
[reader],
|
||||
);
|
||||
|
||||
const onReaderLayout = useCallback((event: LayoutChangeEvent) => {
|
||||
const { width, height } = event.nativeEvent.layout;
|
||||
setSize((prev) =>
|
||||
prev && prev.width === width && prev.height === height
|
||||
? prev
|
||||
: { width, height },
|
||||
);
|
||||
}, []);
|
||||
|
||||
const palette = resolvePalette(settings);
|
||||
const isBookmarked = bookmarks.some((b) => b.epub_cfi === currentCfi);
|
||||
|
||||
return (
|
||||
<SafeAreaView
|
||||
style={[styles.container, { backgroundColor: palette.background }]}
|
||||
edges={["top", "bottom"]}
|
||||
>
|
||||
<ReaderToolbar
|
||||
title={book.title}
|
||||
chapterTitle={chapterTitle}
|
||||
progressPct={progressPct}
|
||||
settings={settings}
|
||||
isBookmarked={isBookmarked}
|
||||
onBack={onClose}
|
||||
onToggleToc={() => setTocOpen(true)}
|
||||
onToggleSettings={() => setSettingsOpen(true)}
|
||||
onToggleBookmarks={() => setBookmarksOpen(true)}
|
||||
onToggleBookmarkHere={handleToggleBookmarkHere}
|
||||
/>
|
||||
|
||||
<View style={styles.readerArea} onLayout={onReaderLayout}>
|
||||
{fileError ? (
|
||||
<View style={styles.centered}>
|
||||
<Text style={[styles.message, { color: palette.text }]}>
|
||||
Could not download this book. Check your connection and try again.
|
||||
</Text>
|
||||
</View>
|
||||
) : src && size ? (
|
||||
<Reader
|
||||
src={src}
|
||||
fileSystem={useFileSystem}
|
||||
width={size.width}
|
||||
height={size.height}
|
||||
initialLocation={initialLocation}
|
||||
enableSelection
|
||||
flow="paginated"
|
||||
defaultTheme={buildEpubTheme(settings)}
|
||||
onReady={handleReady}
|
||||
onLocationChange={handleLocationChange}
|
||||
onSelected={handleSelected}
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator size="large" color="#4f8ef7" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<TocModal
|
||||
visible={tocOpen}
|
||||
toc={reader.toc ?? []}
|
||||
settings={settings}
|
||||
onSelect={handleTocSelect}
|
||||
onClose={() => setTocOpen(false)}
|
||||
/>
|
||||
<ReadingSettingsModal
|
||||
visible={settingsOpen}
|
||||
settings={settings}
|
||||
onChange={updateSettings}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
/>
|
||||
<BookmarksModal
|
||||
visible={bookmarksOpen}
|
||||
bookmarks={bookmarks}
|
||||
settings={settings}
|
||||
onSelect={handleSelectBookmark}
|
||||
onDelete={handleDeleteBookmark}
|
||||
onClose={() => setBookmarksOpen(false)}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
readerArea: {
|
||||
flex: 1,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 24,
|
||||
},
|
||||
message: {
|
||||
fontSize: 15,
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
import { type ReactNode } from "react";
|
||||
import {
|
||||
Modal,
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
type StyleProp,
|
||||
type ViewStyle,
|
||||
} from "react-native";
|
||||
|
||||
interface ReaderBottomSheetProps {
|
||||
visible: boolean;
|
||||
title: string;
|
||||
chromeColor: string;
|
||||
textColor: string;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
/** When true, caps sheet height (TOC/bookmarks). Settings uses a full-width panel. */
|
||||
tall?: boolean;
|
||||
sheetStyle?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
export function ReaderBottomSheet({
|
||||
visible,
|
||||
title,
|
||||
chromeColor,
|
||||
textColor,
|
||||
onClose,
|
||||
children,
|
||||
tall = true,
|
||||
sheetStyle,
|
||||
}: ReaderBottomSheetProps): ReactNode {
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="slide"
|
||||
transparent
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.backdrop}>
|
||||
<View
|
||||
style={[
|
||||
styles.sheet,
|
||||
tall && styles.sheetTall,
|
||||
{ backgroundColor: chromeColor },
|
||||
sheetStyle,
|
||||
]}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.headerTitle, { color: textColor }]}>
|
||||
{title}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={onClose} hitSlop={12}>
|
||||
<Text style={[styles.close, { color: textColor }]}>✕</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
backdrop: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.4)",
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
sheet: {
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
sheetTall: {
|
||||
maxHeight: "75%",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
},
|
||||
close: {
|
||||
fontSize: 18,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
import { type ReactNode } from "react";
|
||||
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
||||
import { resolvePalette } from "../../utils/epubTheme";
|
||||
import type { ReadingSettings } from "../../types/reader";
|
||||
|
||||
interface ReaderToolbarProps {
|
||||
title: string;
|
||||
chapterTitle: string;
|
||||
progressPct: number;
|
||||
settings: ReadingSettings;
|
||||
isBookmarked: boolean;
|
||||
onBack: () => void;
|
||||
onToggleToc: () => void;
|
||||
onToggleSettings: () => void;
|
||||
onToggleBookmarks: () => void;
|
||||
onToggleBookmarkHere: () => void;
|
||||
}
|
||||
|
||||
export function ReaderToolbar({
|
||||
title,
|
||||
chapterTitle,
|
||||
progressPct,
|
||||
settings,
|
||||
isBookmarked,
|
||||
onBack,
|
||||
onToggleToc,
|
||||
onToggleSettings,
|
||||
onToggleBookmarks,
|
||||
onToggleBookmarkHere,
|
||||
}: ReaderToolbarProps): ReactNode {
|
||||
const palette = resolvePalette(settings);
|
||||
|
||||
return (
|
||||
<View style={[styles.bar, { backgroundColor: palette.chrome }]}>
|
||||
<View style={styles.row}>
|
||||
<TouchableOpacity
|
||||
onPress={onBack}
|
||||
hitSlop={12}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Text style={[styles.icon, { color: palette.text }]}>‹</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.titles}>
|
||||
<Text
|
||||
style={[styles.title, { color: palette.text }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
{chapterTitle ? (
|
||||
<Text
|
||||
style={[styles.chapter, { color: palette.text }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{chapterTitle}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={onToggleBookmarkHere}
|
||||
hitSlop={12}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Text style={[styles.icon, { color: palette.text }]}>
|
||||
{isBookmarked ? "★" : "☆"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={onToggleBookmarks}
|
||||
hitSlop={12}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Text style={[styles.iconSmall, { color: palette.text }]}>≡</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={onToggleToc}
|
||||
hitSlop={12}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Text style={[styles.iconSmall, { color: palette.text }]}>⊟</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={onToggleSettings}
|
||||
hitSlop={12}
|
||||
style={styles.iconButton}
|
||||
>
|
||||
<Text style={[styles.iconSmall, { color: palette.text }]}>Aa</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.progressTrack}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressFill,
|
||||
{ width: `${Math.min(100, Math.max(0, progressPct))}%` },
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bar: {
|
||||
paddingTop: 8,
|
||||
paddingHorizontal: 8,
|
||||
paddingBottom: 6,
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
titles: {
|
||||
flex: 1,
|
||||
marginHorizontal: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
chapter: {
|
||||
fontSize: 11,
|
||||
opacity: 0.7,
|
||||
},
|
||||
iconButton: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
minWidth: 28,
|
||||
alignItems: "center",
|
||||
},
|
||||
icon: {
|
||||
fontSize: 28,
|
||||
lineHeight: 30,
|
||||
},
|
||||
iconSmall: {
|
||||
fontSize: 17,
|
||||
fontWeight: "600",
|
||||
},
|
||||
progressTrack: {
|
||||
height: 3,
|
||||
borderRadius: 2,
|
||||
backgroundColor: "rgba(127,127,127,0.25)",
|
||||
marginTop: 6,
|
||||
overflow: "hidden",
|
||||
},
|
||||
progressFill: {
|
||||
height: "100%",
|
||||
backgroundColor: "#4f8ef7",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,249 @@
|
||||
import { type ReactNode } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import { resolvePalette, THEME_PALETTES } from "../../utils/epubTheme";
|
||||
import type {
|
||||
FontFamily,
|
||||
ReadingSettings,
|
||||
ThemePreset,
|
||||
} from "../../types/reader";
|
||||
import { ReaderBottomSheet } from "./ReaderBottomSheet";
|
||||
|
||||
const THEMES: ThemePreset[] = ["light", "sepia", "paper", "dark"];
|
||||
const FONTS: { value: FontFamily; label: string }[] = [
|
||||
{ value: "serif", label: "Serif" },
|
||||
{ value: "sans-serif", label: "Sans" },
|
||||
{ value: "monospace", label: "Mono" },
|
||||
];
|
||||
const FONT_SIZE_MIN = 12;
|
||||
const FONT_SIZE_MAX = 32;
|
||||
const LINE_HEIGHT_MIN = 1.2;
|
||||
const LINE_HEIGHT_MAX = 2.2;
|
||||
|
||||
interface ReadingSettingsModalProps {
|
||||
visible: boolean;
|
||||
settings: ReadingSettings;
|
||||
onChange: (patch: Partial<ReadingSettings>) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ReadingSettingsModal({
|
||||
visible,
|
||||
settings,
|
||||
onChange,
|
||||
onClose,
|
||||
}: ReadingSettingsModalProps): ReactNode {
|
||||
const palette = resolvePalette(settings);
|
||||
|
||||
const adjustFontSize = (delta: number) => {
|
||||
const next = Math.min(
|
||||
FONT_SIZE_MAX,
|
||||
Math.max(FONT_SIZE_MIN, settings.font_size + delta),
|
||||
);
|
||||
onChange({ font_size: next });
|
||||
};
|
||||
|
||||
const adjustLineHeight = (delta: number) => {
|
||||
const next = Math.min(
|
||||
LINE_HEIGHT_MAX,
|
||||
Math.max(
|
||||
LINE_HEIGHT_MIN,
|
||||
Math.round((settings.line_height + delta) * 10) / 10,
|
||||
),
|
||||
);
|
||||
onChange({ line_height: next });
|
||||
};
|
||||
|
||||
return (
|
||||
<ReaderBottomSheet
|
||||
visible={visible}
|
||||
title="Display"
|
||||
chromeColor={palette.chrome}
|
||||
textColor={palette.text}
|
||||
onClose={onClose}
|
||||
tall={false}
|
||||
sheetStyle={styles.sheetBody}
|
||||
>
|
||||
<Text style={[styles.sectionLabel, { color: palette.text }]}>Theme</Text>
|
||||
<View style={styles.rowWrap}>
|
||||
{THEMES.map((theme) => {
|
||||
const p = THEME_PALETTES[theme];
|
||||
const active = settings.theme === theme;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={theme}
|
||||
onPress={() =>
|
||||
onChange({
|
||||
theme,
|
||||
background_color: p.background,
|
||||
text_color: p.text,
|
||||
})
|
||||
}
|
||||
style={[
|
||||
styles.themeSwatch,
|
||||
{ backgroundColor: p.background },
|
||||
active && styles.themeSwatchActive,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.themeSwatchText, { color: p.text }]}>
|
||||
Aa
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Text style={[styles.sectionLabel, { color: palette.text }]}>Font</Text>
|
||||
<View style={styles.rowWrap}>
|
||||
{FONTS.map((font) => {
|
||||
const active = settings.font_family === font.value;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={font.value}
|
||||
onPress={() => onChange({ font_family: font.value })}
|
||||
style={[styles.pill, active && styles.pillActive]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.pillText,
|
||||
{ color: active ? "#fff" : palette.text },
|
||||
]}
|
||||
>
|
||||
{font.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Stepper
|
||||
label="Font size"
|
||||
value={`${settings.font_size}px`}
|
||||
color={palette.text}
|
||||
onDecrease={() => adjustFontSize(-1)}
|
||||
onIncrease={() => adjustFontSize(1)}
|
||||
/>
|
||||
<Stepper
|
||||
label="Line spacing"
|
||||
value={settings.line_height.toFixed(1)}
|
||||
color={palette.text}
|
||||
onDecrease={() => adjustLineHeight(-0.1)}
|
||||
onIncrease={() => adjustLineHeight(0.1)}
|
||||
/>
|
||||
</ReaderBottomSheet>
|
||||
);
|
||||
}
|
||||
|
||||
function Stepper({
|
||||
label,
|
||||
value,
|
||||
color,
|
||||
onDecrease,
|
||||
onIncrease,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
color: string;
|
||||
onDecrease: () => void;
|
||||
onIncrease: () => void;
|
||||
}): ReactNode {
|
||||
return (
|
||||
<View style={styles.stepperRow}>
|
||||
<Text style={[styles.sectionLabel, { color, marginBottom: 0 }]}>
|
||||
{label}
|
||||
</Text>
|
||||
<View style={styles.stepperControls}>
|
||||
<TouchableOpacity style={styles.stepperButton} onPress={onDecrease}>
|
||||
<Text style={styles.stepperButtonText}>−</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.stepperValue, { color }]}>{value}</Text>
|
||||
<TouchableOpacity style={styles.stepperButton} onPress={onIncrease}>
|
||||
<Text style={styles.stepperButtonText}>+</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
sheetBody: {
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 32,
|
||||
},
|
||||
sectionLabel: {
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
marginBottom: 8,
|
||||
marginTop: 8,
|
||||
opacity: 0.8,
|
||||
},
|
||||
rowWrap: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 10,
|
||||
},
|
||||
themeSwatch: {
|
||||
width: 56,
|
||||
height: 48,
|
||||
borderRadius: 10,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderWidth: 2,
|
||||
borderColor: "transparent",
|
||||
},
|
||||
themeSwatchActive: {
|
||||
borderColor: "#4f8ef7",
|
||||
},
|
||||
themeSwatchText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
pill: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(127,127,127,0.4)",
|
||||
},
|
||||
pillActive: {
|
||||
backgroundColor: "#4f8ef7",
|
||||
borderColor: "#4f8ef7",
|
||||
},
|
||||
pillText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
stepperRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 16,
|
||||
},
|
||||
stepperControls: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
stepperButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: "rgba(127,127,127,0.2)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
stepperButtonText: {
|
||||
fontSize: 20,
|
||||
fontWeight: "700",
|
||||
color: "#4f8ef7",
|
||||
},
|
||||
stepperValue: {
|
||||
minWidth: 56,
|
||||
textAlign: "center",
|
||||
fontSize: 15,
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
import { type ReactNode } from "react";
|
||||
import {
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import { resolvePalette } from "../../utils/epubTheme";
|
||||
import type { ReadingSettings } from "../../types/reader";
|
||||
import { ReaderBottomSheet } from "./ReaderBottomSheet";
|
||||
|
||||
export interface TocItem {
|
||||
id?: string;
|
||||
label: string;
|
||||
href: string;
|
||||
subitems?: TocItem[];
|
||||
}
|
||||
|
||||
interface FlatTocItem {
|
||||
key: string;
|
||||
label: string;
|
||||
href: string;
|
||||
depth: number;
|
||||
}
|
||||
|
||||
function flatten(items: TocItem[], depth = 0, acc: FlatTocItem[] = []) {
|
||||
items.forEach((item, index) => {
|
||||
acc.push({
|
||||
key: `${item.id ?? item.href}-${depth}-${index}`,
|
||||
label: (item.label ?? "").trim() || "Untitled section",
|
||||
href: item.href,
|
||||
depth,
|
||||
});
|
||||
if (item.subitems?.length) {
|
||||
flatten(item.subitems, depth + 1, acc);
|
||||
}
|
||||
});
|
||||
return acc;
|
||||
}
|
||||
|
||||
interface TocModalProps {
|
||||
visible: boolean;
|
||||
toc: TocItem[];
|
||||
settings: ReadingSettings;
|
||||
onSelect: (href: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TocModal({
|
||||
visible,
|
||||
toc,
|
||||
settings,
|
||||
onSelect,
|
||||
onClose,
|
||||
}: TocModalProps): ReactNode {
|
||||
const palette = resolvePalette(settings);
|
||||
const data = flatten(toc);
|
||||
|
||||
return (
|
||||
<ReaderBottomSheet
|
||||
visible={visible}
|
||||
title="Contents"
|
||||
chromeColor={palette.chrome}
|
||||
textColor={palette.text}
|
||||
onClose={onClose}
|
||||
>
|
||||
<FlatList
|
||||
data={data}
|
||||
keyExtractor={(item) => item.key}
|
||||
ListEmptyComponent={
|
||||
<Text style={[styles.empty, { color: palette.text }]}>
|
||||
No table of contents available.
|
||||
</Text>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.row}
|
||||
onPress={() => onSelect(item.href)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.rowText,
|
||||
{ color: palette.text, marginLeft: item.depth * 16 },
|
||||
]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
</ReaderBottomSheet>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: "rgba(127,127,127,0.2)",
|
||||
},
|
||||
rowText: {
|
||||
fontSize: 14,
|
||||
},
|
||||
empty: {
|
||||
padding: 24,
|
||||
textAlign: "center",
|
||||
opacity: 0.7,
|
||||
},
|
||||
});
|
||||
@@ -1,2 +0,0 @@
|
||||
export { useAuth } from "../context/AuthContext";
|
||||
export { useAsyncData } from "./useAsyncData";
|
||||
@@ -1,33 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
|
||||
/**
|
||||
* Generic async data fetching hook for mobile screens.
|
||||
*/
|
||||
export function useAsyncData<T>(
|
||||
fetcher: () => Promise<T>,
|
||||
deps: unknown[] = [],
|
||||
) {
|
||||
const [data, setData] = useState<T | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const execute = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await fetcher();
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err : new Error(String(err)));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, deps);
|
||||
|
||||
useEffect(() => {
|
||||
execute();
|
||||
}, [execute]);
|
||||
|
||||
return { data, loading, error, refetch: execute };
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
getReadingSettings,
|
||||
updateReadingSettings,
|
||||
} from "../api/reader";
|
||||
import type { ReadingSettings } from "../types/reader";
|
||||
|
||||
const DEFAULT_READING_SETTINGS: ReadingSettings = {
|
||||
font_family: "serif",
|
||||
font_size: 18,
|
||||
line_height: 1.5,
|
||||
margin_width: 16,
|
||||
background_color: "#fbfbf8",
|
||||
text_color: "#2b2b2b",
|
||||
brightness: 1,
|
||||
orientation_lock: "auto",
|
||||
theme: "paper",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
|
||||
const SAVE_DEBOUNCE_MS = 600;
|
||||
|
||||
interface UseReadingSettingsReturn {
|
||||
settings: ReadingSettings;
|
||||
loaded: boolean;
|
||||
updateSettings: (patch: Partial<ReadingSettings>) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the user's reader settings and persists changes with a debounce.
|
||||
* Mirrors frontend/src/hooks/useReadingSettings.ts behavior.
|
||||
*/
|
||||
export function useReadingSettings(): UseReadingSettingsReturn {
|
||||
const [settings, setSettings] = useState<ReadingSettings>(
|
||||
DEFAULT_READING_SETTINGS,
|
||||
);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const pendingRef = useRef<Partial<ReadingSettings>>({});
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
getReadingSettings()
|
||||
.then((data) => {
|
||||
if (active) {
|
||||
setSettings(data);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
/* keep defaults if the request fails */
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) {
|
||||
setLoaded(true);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateSettings = useCallback((patch: Partial<ReadingSettings>) => {
|
||||
setSettings((prev) => ({ ...prev, ...patch }));
|
||||
pendingRef.current = { ...pendingRef.current, ...patch };
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
}
|
||||
timerRef.current = setTimeout(() => {
|
||||
const body = pendingRef.current;
|
||||
pendingRef.current = {};
|
||||
updateReadingSettings(body).catch(() => {
|
||||
/* ignore transient save failures */
|
||||
});
|
||||
}, SAVE_DEBOUNCE_MS);
|
||||
}, []);
|
||||
|
||||
return { settings, loaded, updateSettings };
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import { type ReactNode } from "react";
|
||||
import { NavigationContainer } from "@react-navigation/native";
|
||||
import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import LoginScreen from "../screens/LoginScreen";
|
||||
import RegisterScreen from "../screens/RegisterScreen";
|
||||
import MainTabs from "./MainTabs";
|
||||
|
||||
export type AuthStackParamList = {
|
||||
Login: undefined;
|
||||
Register: undefined;
|
||||
};
|
||||
|
||||
export type RootStackParamList = {
|
||||
Auth: undefined;
|
||||
Main: undefined;
|
||||
};
|
||||
|
||||
const RootStack = createNativeStackNavigator<RootStackParamList>();
|
||||
const AuthStack = createNativeStackNavigator<AuthStackParamList>();
|
||||
|
||||
function AuthNavigator(): ReactNode {
|
||||
return (
|
||||
<AuthStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<AuthStack.Screen name="Login" component={LoginScreen} />
|
||||
<AuthStack.Screen name="Register" component={RegisterScreen} />
|
||||
</AuthStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AppNavigator(): ReactNode {
|
||||
const { state } = useAuth();
|
||||
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<RootStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
{state.isAuthenticated ? (
|
||||
<RootStack.Screen name="Main" component={MainTabs} />
|
||||
) : (
|
||||
<RootStack.Screen name="Auth" component={AuthNavigator} />
|
||||
)}
|
||||
</RootStack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import { MainNavigator } from "./MainNavigator";
|
||||
import BookDetailScreen from "../screens/BookDetailScreen";
|
||||
import ReaderScreen from "../screens/ReaderScreen";
|
||||
import type { AppStackParamList } from "../types";
|
||||
|
||||
const Stack = createNativeStackNavigator<AppStackParamList>();
|
||||
|
||||
export function AppStack() {
|
||||
return (
|
||||
<Stack.Navigator
|
||||
screenOptions={{
|
||||
headerStyle: { backgroundColor: "#fff" },
|
||||
headerTitleStyle: { fontWeight: "600", color: "#1a1a2e" },
|
||||
headerTintColor: "#4a6cf7",
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="Tabs"
|
||||
component={MainNavigator}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="BookDetail"
|
||||
component={BookDetailScreen}
|
||||
options={{ title: "" }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Reader"
|
||||
component={ReaderScreen}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import LoginScreen from "../screens/LoginScreen";
|
||||
import RegisterScreen from "../screens/RegisterScreen";
|
||||
|
||||
export type AuthStackParamList = {
|
||||
type AuthStackParamList = {
|
||||
Login: undefined;
|
||||
Register: undefined;
|
||||
};
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
import { type ReactNode } from "react";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { Text } from "react-native";
|
||||
import LibraryScreen from "../screens/LibraryScreen";
|
||||
import SearchScreen from "../screens/SearchScreen";
|
||||
import SettingsScreen from "../screens/SettingsScreen";
|
||||
|
||||
export type MainTabParamList = {
|
||||
Library: undefined;
|
||||
Search: undefined;
|
||||
Settings: undefined;
|
||||
};
|
||||
|
||||
const Tab = createBottomTabNavigator<MainTabParamList>();
|
||||
|
||||
function TabIcon({ label, focused }: { label: string; focused: boolean }) {
|
||||
return (
|
||||
<Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
|
||||
{label === "Library" ? "📚" : label === "Search" ? "🔍" : "⚙️"}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MainTabs(): ReactNode {
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
tabBarIcon: ({ focused }: { focused: boolean }) => (
|
||||
<TabIcon label={route.name} focused={focused} />
|
||||
),
|
||||
tabBarActiveTintColor: "#4f8ef7",
|
||||
tabBarInactiveTintColor: "#888",
|
||||
headerStyle: { backgroundColor: "#1a1a2e" },
|
||||
headerTintColor: "#fff",
|
||||
tabBarStyle: { backgroundColor: "#1a1a2e", borderTopColor: "#333" },
|
||||
})}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Library"
|
||||
component={LibraryScreen}
|
||||
options={{ title: "My Library" }}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Search"
|
||||
component={SearchScreen}
|
||||
options={{ title: "Search" }}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Settings"
|
||||
component={SettingsScreen}
|
||||
options={{ title: "Settings" }}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import React from "react";
|
||||
import { ActivityIndicator, View } from "react-native";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { AuthNavigator } from "./AuthNavigator";
|
||||
import { MainNavigator } from "./MainNavigator";
|
||||
import { AppStack } from "./AppStack";
|
||||
|
||||
export function RootNavigator() {
|
||||
const { isLoading, isAuthenticated } = useAuth();
|
||||
@@ -19,5 +19,5 @@ export function RootNavigator() {
|
||||
return <AuthNavigator />;
|
||||
}
|
||||
|
||||
return <MainNavigator />;
|
||||
return <AppStack />;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { type ReactNode } from "react";
|
||||
import { View, Text } from "react-native";
|
||||
import { authStyles } from "./authStyles";
|
||||
|
||||
export function AuthFormError({ message }: { message: string }): ReactNode {
|
||||
return (
|
||||
<View style={authStyles.errorBox}>
|
||||
<Text style={authStyles.errorText}>{message}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import { useState, useEffect, useCallback, type ReactNode } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import type { RouteProp } from "@react-navigation/native";
|
||||
import { ebooksApi } from "../api/ebooks";
|
||||
import { formatFileSize } from "@cloud-reader/shared";
|
||||
import type { EBookDetail } from "@cloud-reader/shared";
|
||||
import type { AppStackParamList } from "../types";
|
||||
|
||||
type DetailRoute = RouteProp<AppStackParamList, "BookDetail">;
|
||||
|
||||
export default function BookDetailScreen({
|
||||
route,
|
||||
navigation,
|
||||
}: {
|
||||
route: DetailRoute;
|
||||
navigation: any;
|
||||
}): ReactNode {
|
||||
const { ebookId } = route.params;
|
||||
const [book, setBook] = useState<EBookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const { data } = await ebooksApi.get(ebookId);
|
||||
setBook(data);
|
||||
} catch {
|
||||
setError(true);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [ebookId]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator size="large" color="#4f8ef7" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !book) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<Text style={styles.errorText}>Could not load this book.</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const progressPct =
|
||||
typeof book.progress?.current_position === "number"
|
||||
? Math.round(book.progress.current_position)
|
||||
: 0;
|
||||
const hasProgress = progressPct > 0;
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<View style={styles.header}>
|
||||
{book.cover_image ? (
|
||||
<Image source={{ uri: book.cover_image }} style={styles.cover} />
|
||||
) : (
|
||||
<View style={styles.cover}>
|
||||
<Text style={styles.coverText}>
|
||||
{book.title.charAt(0).toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.title}>{book.title}</Text>
|
||||
<Text style={styles.author}>{book.author || "Unknown author"}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.metaRow}>
|
||||
<MetaPill label="Format" value={book.format?.toUpperCase() || "—"} />
|
||||
<MetaPill
|
||||
label="Pages"
|
||||
value={book.page_count ? String(book.page_count) : "—"}
|
||||
/>
|
||||
<MetaPill label="Size" value={formatFileSize(book.file_size || 0)} />
|
||||
</View>
|
||||
|
||||
{hasProgress && (
|
||||
<View style={styles.progressWrap}>
|
||||
<View style={styles.progressTrack}>
|
||||
<View style={[styles.progressFill, { width: `${progressPct}%` }]} />
|
||||
</View>
|
||||
<Text style={styles.progressLabel}>{progressPct}% read</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.readButton}
|
||||
onPress={() => navigation.navigate("Reader", { ebookId: book.id })}
|
||||
>
|
||||
<Text style={styles.readButtonText}>
|
||||
{hasProgress ? "Resume reading" : "Start reading"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
function MetaPill({ label, value }: { label: string; value: string }): ReactNode {
|
||||
return (
|
||||
<View style={styles.metaPill}>
|
||||
<Text style={styles.metaValue}>{value}</Text>
|
||||
<Text style={styles.metaLabel}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#0f0f23",
|
||||
},
|
||||
content: {
|
||||
padding: 24,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#0f0f23",
|
||||
padding: 24,
|
||||
},
|
||||
header: {
|
||||
alignItems: "center",
|
||||
marginBottom: 24,
|
||||
},
|
||||
cover: {
|
||||
width: 140,
|
||||
height: 200,
|
||||
borderRadius: 12,
|
||||
backgroundColor: "#2a2a4e",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
coverText: {
|
||||
fontSize: 56,
|
||||
fontWeight: "bold",
|
||||
color: "#4f8ef7",
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontWeight: "700",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
marginBottom: 6,
|
||||
},
|
||||
author: {
|
||||
fontSize: 15,
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
},
|
||||
metaRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 24,
|
||||
},
|
||||
metaPill: {
|
||||
flex: 1,
|
||||
backgroundColor: "#1a1a2e",
|
||||
borderRadius: 10,
|
||||
paddingVertical: 12,
|
||||
marginHorizontal: 4,
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderColor: "#333",
|
||||
},
|
||||
metaValue: {
|
||||
fontSize: 15,
|
||||
fontWeight: "600",
|
||||
color: "#fff",
|
||||
},
|
||||
metaLabel: {
|
||||
fontSize: 12,
|
||||
color: "#666",
|
||||
marginTop: 2,
|
||||
},
|
||||
progressWrap: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
progressTrack: {
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
backgroundColor: "#1a1a2e",
|
||||
overflow: "hidden",
|
||||
},
|
||||
progressFill: {
|
||||
height: "100%",
|
||||
backgroundColor: "#4f8ef7",
|
||||
},
|
||||
progressLabel: {
|
||||
fontSize: 12,
|
||||
color: "#888",
|
||||
marginTop: 6,
|
||||
},
|
||||
readButton: {
|
||||
backgroundColor: "#4f8ef7",
|
||||
borderRadius: 10,
|
||||
paddingVertical: 16,
|
||||
alignItems: "center",
|
||||
},
|
||||
readButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
errorText: {
|
||||
color: "#888",
|
||||
fontSize: 15,
|
||||
},
|
||||
});
|
||||
@@ -2,34 +2,31 @@ import { useState, useEffect, useCallback, type ReactNode } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
ActivityIndicator,
|
||||
RefreshControl,
|
||||
} from "react-native";
|
||||
import { fetchBooks } from "../api/books";
|
||||
import type { Book, PaginatedResponse } from "@cloud-reader/shared";
|
||||
import { ebooksApi } from "../api/ebooks";
|
||||
import type { EBookListItem } from "@cloud-reader/shared";
|
||||
|
||||
export default function LibraryScreen({ navigation }: { navigation: any }): ReactNode {
|
||||
const [books, setBooks] = useState<Book[]>([]);
|
||||
export default function LibraryScreen({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: any;
|
||||
}): ReactNode {
|
||||
const [books, setBooks] = useState<EBookListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
|
||||
const loadBooks = useCallback(async (pageNum: number, isRefresh = false) => {
|
||||
const loadBooks = useCallback(async () => {
|
||||
try {
|
||||
const data: PaginatedResponse<Book> = await fetchBooks(pageNum);
|
||||
if (isRefresh) {
|
||||
setBooks(data.results);
|
||||
} else {
|
||||
setBooks((prev) => [...prev, ...data.results]);
|
||||
}
|
||||
setHasMore(data.next !== null);
|
||||
setPage(pageNum);
|
||||
const { data } = await ebooksApi.list();
|
||||
setBooks(data.results);
|
||||
} catch {
|
||||
// Silent error for now
|
||||
// Silent error for now; pull-to-refresh lets the user retry.
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
@@ -37,44 +34,49 @@ export default function LibraryScreen({ navigation }: { navigation: any }): Reac
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadBooks(1, true);
|
||||
loadBooks();
|
||||
}, [loadBooks]);
|
||||
|
||||
const onRefresh = () => {
|
||||
setRefreshing(true);
|
||||
loadBooks(1, true);
|
||||
loadBooks();
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
if (hasMore && !loading) {
|
||||
loadBooks(page + 1);
|
||||
}
|
||||
const renderBook = ({ item }: { item: EBookListItem }) => {
|
||||
const progress =
|
||||
typeof item.progress === "number"
|
||||
? Math.round(item.progress)
|
||||
: null;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.bookCard}
|
||||
onPress={() => navigation.navigate("BookDetail", { ebookId: item.id })}
|
||||
>
|
||||
{item.cover_image ? (
|
||||
<Image source={{ uri: item.cover_image }} style={styles.bookCover} />
|
||||
) : (
|
||||
<View style={styles.bookCover}>
|
||||
<Text style={styles.coverText}>
|
||||
{item.title.charAt(0).toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.bookInfo}>
|
||||
<Text style={styles.bookTitle} numberOfLines={2}>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text style={styles.bookAuthor} numberOfLines={1}>
|
||||
{item.author || "Unknown author"}
|
||||
</Text>
|
||||
<Text style={styles.bookMeta}>
|
||||
{item.format?.toUpperCase()}
|
||||
{progress !== null ? ` · ${progress}% read` : ""}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const renderBook = ({ item }: { item: Book }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.bookCard}
|
||||
onPress={() =>
|
||||
navigation.navigate("BookDetail", { bookId: item.id })
|
||||
}
|
||||
>
|
||||
<View style={styles.bookCover}>
|
||||
<Text style={styles.coverText}>
|
||||
{item.title.charAt(0).toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.bookInfo}>
|
||||
<Text style={styles.bookTitle} numberOfLines={1}>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text style={styles.bookAuthor} numberOfLines={1}>
|
||||
{item.author}
|
||||
</Text>
|
||||
<Text style={styles.bookPages}>{item.total_pages} pages</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
if (loading && books.length === 0) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
@@ -88,9 +90,7 @@ export default function LibraryScreen({ navigation }: { navigation: any }): Reac
|
||||
<FlatList
|
||||
data={books}
|
||||
renderItem={renderBook}
|
||||
keyExtractor={(item) => item.id}
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.5}
|
||||
keyExtractor={(item) => String(item.id)}
|
||||
contentContainerStyle={styles.list}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
@@ -103,7 +103,7 @@ export default function LibraryScreen({ navigation }: { navigation: any }): Reac
|
||||
<View style={styles.centered}>
|
||||
<Text style={styles.emptyText}>Your library is empty</Text>
|
||||
<Text style={styles.emptySubtext}>
|
||||
Add books to get started
|
||||
Upload books from the web app to get started
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
@@ -125,6 +125,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
list: {
|
||||
padding: 16,
|
||||
flexGrow: 1,
|
||||
},
|
||||
bookCard: {
|
||||
flexDirection: "row",
|
||||
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
|
||||
color: "#888",
|
||||
marginBottom: 4,
|
||||
},
|
||||
bookPages: {
|
||||
bookMeta: {
|
||||
fontSize: 12,
|
||||
color: "#666",
|
||||
},
|
||||
@@ -177,5 +178,6 @@ const styles = StyleSheet.create({
|
||||
emptySubtext: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,29 +4,31 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { isValidEmail } from "@cloud-reader/shared";
|
||||
import { authStyles } from "./authStyles";
|
||||
import { AuthFormError } from "./AuthFormError";
|
||||
import { requireValidEmail } from "./authValidation";
|
||||
|
||||
export default function LoginScreen({ navigation }: { navigation: any }): ReactNode {
|
||||
const { state, login, clearError } = useAuth();
|
||||
export default function LoginScreen({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: any;
|
||||
}): ReactNode {
|
||||
const { login } = useAuth();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleLogin = async () => {
|
||||
clearError();
|
||||
setError(null);
|
||||
|
||||
if (!email.trim()) {
|
||||
Alert.alert("Validation Error", "Please enter your email.");
|
||||
return;
|
||||
}
|
||||
if (!isValidEmail(email.trim())) {
|
||||
Alert.alert("Validation Error", "Please enter a valid email address.");
|
||||
if (!requireValidEmail(email)) {
|
||||
return;
|
||||
}
|
||||
if (!password) {
|
||||
@@ -34,30 +36,29 @@ export default function LoginScreen({ navigation }: { navigation: any }): ReactN
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await login(email.trim(), password);
|
||||
} catch {
|
||||
// Error handled in context
|
||||
setError("Invalid email or password.");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
style={authStyles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
>
|
||||
<View style={styles.inner}>
|
||||
<Text style={styles.title}>Cloud Reader</Text>
|
||||
<Text style={styles.subtitle}>Sign in to your account</Text>
|
||||
<View style={authStyles.inner}>
|
||||
<Text style={authStyles.title}>Cloud Reader</Text>
|
||||
<Text style={authStyles.subtitle}>Sign in to your account</Text>
|
||||
|
||||
{state.error && (
|
||||
<View style={styles.errorBox}>
|
||||
<Text style={styles.errorText}>{state.error}</Text>
|
||||
</View>
|
||||
)}
|
||||
{error ? <AuthFormError message={error} /> : null}
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
style={authStyles.input}
|
||||
placeholder="Email"
|
||||
placeholderTextColor="#666"
|
||||
value={email}
|
||||
@@ -68,7 +69,7 @@ export default function LoginScreen({ navigation }: { navigation: any }): ReactN
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
style={authStyles.input}
|
||||
placeholder="Password"
|
||||
placeholderTextColor="#666"
|
||||
value={password}
|
||||
@@ -77,97 +78,24 @@ export default function LoginScreen({ navigation }: { navigation: any }): ReactN
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, state.isLoading && styles.buttonDisabled]}
|
||||
style={[authStyles.button, submitting && authStyles.buttonDisabled]}
|
||||
onPress={handleLogin}
|
||||
disabled={state.isLoading}
|
||||
disabled={submitting}
|
||||
>
|
||||
{state.isLoading ? (
|
||||
{submitting ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>Sign In</Text>
|
||||
<Text style={authStyles.buttonText}>Sign In</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => navigation.navigate("Register")}>
|
||||
<Text style={styles.linkText}>
|
||||
<Text style={authStyles.linkText}>
|
||||
Don't have an account?{" "}
|
||||
<Text style={styles.linkBold}>Sign Up</Text>
|
||||
<Text style={authStyles.linkBold}>Sign Up</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#0f0f23",
|
||||
},
|
||||
inner: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
marginBottom: 32,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "#1a1a2e",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
marginBottom: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#333",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#4f8ef7",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginTop: 8,
|
||||
marginBottom: 24,
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
errorBox: {
|
||||
backgroundColor: "rgba(255, 69, 58, 0.15)",
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginBottom: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 69, 58, 0.3)",
|
||||
},
|
||||
errorText: {
|
||||
color: "#ff453a",
|
||||
fontSize: 14,
|
||||
textAlign: "center",
|
||||
},
|
||||
linkText: {
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
fontSize: 14,
|
||||
},
|
||||
linkBold: {
|
||||
color: "#4f8ef7",
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,133 @@
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import type { RouteProp } from "@react-navigation/native";
|
||||
import type { EBookDetail } from "@cloud-reader/shared";
|
||||
import { ebooksApi } from "../api/ebooks";
|
||||
import { EpubReaderView } from "../components/reader/EpubReaderView";
|
||||
import type { AppStackParamList } from "../types";
|
||||
|
||||
type ReaderRoute = RouteProp<AppStackParamList, "Reader">;
|
||||
|
||||
export default function ReaderScreen({
|
||||
route,
|
||||
navigation,
|
||||
}: {
|
||||
route: ReaderRoute;
|
||||
navigation: any;
|
||||
}): ReactNode {
|
||||
const { ebookId } = route.params;
|
||||
const [book, setBook] = useState<EBookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
ebooksApi
|
||||
.get(ebookId)
|
||||
.then(({ data }) => {
|
||||
if (active) setBook(data);
|
||||
})
|
||||
.catch(() => {
|
||||
if (active) setError(true);
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [ebookId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator size="large" color="#4f8ef7" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !book) {
|
||||
return (
|
||||
<SafeAreaView style={styles.centered} edges={["top", "bottom"]}>
|
||||
<Text style={styles.message}>Could not open this book.</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => navigation.goBack()}
|
||||
>
|
||||
<Text style={styles.backText}>Go back</Text>
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const format = (book.format ?? "").toLowerCase();
|
||||
|
||||
if (format !== "epub") {
|
||||
return (
|
||||
<SafeAreaView style={styles.centered} edges={["top", "bottom"]}>
|
||||
<Text style={styles.placeholderTitle}>PDF reading is coming soon</Text>
|
||||
<Text style={styles.message}>
|
||||
“{book.title}” is a {format.toUpperCase() || "non-EPUB"} file. PDF
|
||||
reading isn't available on mobile yet — open it in the web reader
|
||||
for now.
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => navigation.goBack()}
|
||||
>
|
||||
<Text style={styles.backText}>Go back</Text>
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EpubReaderView
|
||||
book={book}
|
||||
ebookId={ebookId}
|
||||
onClose={() => navigation.goBack()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#0f0f23",
|
||||
padding: 24,
|
||||
},
|
||||
placeholderTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "700",
|
||||
color: "#fff",
|
||||
marginBottom: 12,
|
||||
textAlign: "center",
|
||||
},
|
||||
message: {
|
||||
fontSize: 15,
|
||||
color: "#aaa",
|
||||
textAlign: "center",
|
||||
lineHeight: 22,
|
||||
},
|
||||
backButton: {
|
||||
marginTop: 24,
|
||||
backgroundColor: "#4f8ef7",
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
backText: {
|
||||
color: "#fff",
|
||||
fontSize: 15,
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
@@ -1,10 +1,8 @@
|
||||
import { useState, type ReactNode } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
@@ -12,40 +10,39 @@ import {
|
||||
ScrollView,
|
||||
} from "react-native";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import {
|
||||
isValidEmail,
|
||||
validatePasswordStrength,
|
||||
} from "@cloud-reader/shared";
|
||||
import { isStrongPassword } from "@cloud-reader/shared";
|
||||
import { authStyles } from "./authStyles";
|
||||
import { AuthFormError } from "./AuthFormError";
|
||||
import { requireValidEmail } from "./authValidation";
|
||||
|
||||
export default function RegisterScreen({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: any;
|
||||
}): ReactNode {
|
||||
const { state, register, clearError } = useAuth();
|
||||
const { register } = useAuth();
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleRegister = async () => {
|
||||
clearError();
|
||||
setError(null);
|
||||
|
||||
if (!username.trim()) {
|
||||
Alert.alert("Validation Error", "Please enter a username.");
|
||||
return;
|
||||
}
|
||||
if (!email.trim()) {
|
||||
Alert.alert("Validation Error", "Please enter your email.");
|
||||
if (!requireValidEmail(email)) {
|
||||
return;
|
||||
}
|
||||
if (!isValidEmail(email.trim())) {
|
||||
Alert.alert("Validation Error", "Please enter a valid email address.");
|
||||
return;
|
||||
}
|
||||
const passwordError = validatePasswordStrength(password);
|
||||
if (passwordError) {
|
||||
Alert.alert("Validation Error", passwordError);
|
||||
if (!isStrongPassword(password)) {
|
||||
Alert.alert(
|
||||
"Validation Error",
|
||||
"Password must be at least 8 characters and include uppercase, lowercase, and a number.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
@@ -53,30 +50,29 @@ export default function RegisterScreen({
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await register(email.trim(), password, username.trim());
|
||||
await register(email.trim(), username.trim(), password);
|
||||
} catch {
|
||||
// Error handled in context
|
||||
setError("Could not create the account. Try a different email.");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
style={authStyles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.inner}>
|
||||
<Text style={styles.title}>Create Account</Text>
|
||||
<Text style={styles.subtitle}>Join Cloud Reader</Text>
|
||||
<ScrollView contentContainerStyle={authStyles.innerScroll}>
|
||||
<Text style={authStyles.titleCompact}>Create Account</Text>
|
||||
<Text style={authStyles.subtitle}>Join Cloud Reader</Text>
|
||||
|
||||
{state.error && (
|
||||
<View style={styles.errorBox}>
|
||||
<Text style={styles.errorText}>{state.error}</Text>
|
||||
</View>
|
||||
)}
|
||||
{error ? <AuthFormError message={error} /> : null}
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
style={authStyles.input}
|
||||
placeholder="Username"
|
||||
placeholderTextColor="#666"
|
||||
value={username}
|
||||
@@ -86,7 +82,7 @@ export default function RegisterScreen({
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
style={authStyles.input}
|
||||
placeholder="Email"
|
||||
placeholderTextColor="#666"
|
||||
value={email}
|
||||
@@ -97,7 +93,7 @@ export default function RegisterScreen({
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
style={authStyles.input}
|
||||
placeholder="Password"
|
||||
placeholderTextColor="#666"
|
||||
value={password}
|
||||
@@ -106,7 +102,7 @@ export default function RegisterScreen({
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
style={authStyles.input}
|
||||
placeholder="Confirm Password"
|
||||
placeholderTextColor="#666"
|
||||
value={confirmPassword}
|
||||
@@ -115,98 +111,24 @@ export default function RegisterScreen({
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, state.isLoading && styles.buttonDisabled]}
|
||||
style={[authStyles.button, submitting && authStyles.buttonDisabled]}
|
||||
onPress={handleRegister}
|
||||
disabled={state.isLoading}
|
||||
disabled={submitting}
|
||||
>
|
||||
{state.isLoading ? (
|
||||
{submitting ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>Create Account</Text>
|
||||
<Text style={authStyles.buttonText}>Create Account</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => navigation.goBack()}>
|
||||
<Text style={styles.linkText}>
|
||||
<Text style={authStyles.linkText}>
|
||||
Already have an account?{" "}
|
||||
<Text style={styles.linkBold}>Sign In</Text>
|
||||
<Text style={authStyles.linkBold}>Sign In</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#0f0f23",
|
||||
},
|
||||
inner: {
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 48,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
marginBottom: 32,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "#1a1a2e",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
marginBottom: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#333",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#4f8ef7",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginTop: 8,
|
||||
marginBottom: 24,
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
errorBox: {
|
||||
backgroundColor: "rgba(255, 69, 58, 0.15)",
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginBottom: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 69, 58, 0.3)",
|
||||
},
|
||||
errorText: {
|
||||
color: "#ff453a",
|
||||
fontSize: 14,
|
||||
textAlign: "center",
|
||||
},
|
||||
linkText: {
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
fontSize: 14,
|
||||
},
|
||||
linkBold: {
|
||||
color: "#4f8ef7",
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export default function SettingsScreen(): ReactNode {
|
||||
const { state, logout } = useAuth();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert("Logout", "Are you sure you want to sign out?", [
|
||||
@@ -24,11 +24,11 @@ export default function SettingsScreen(): ReactNode {
|
||||
<Text style={styles.sectionTitle}>Account</Text>
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.label}>Username</Text>
|
||||
<Text style={styles.value}>{state.user?.username ?? "—"}</Text>
|
||||
<Text style={styles.value}>{user?.username ?? "—"}</Text>
|
||||
</View>
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.label}>Email</Text>
|
||||
<Text style={styles.value}>{state.user?.email ?? "—"}</Text>
|
||||
<Text style={styles.value}>{user?.email ?? "—"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
/** Shared layout/styles for Login and Register screens. */
|
||||
export const authStyles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#0f0f23",
|
||||
},
|
||||
inner: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
innerScroll: {
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 48,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
titleCompact: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
marginBottom: 32,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "#1a1a2e",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
marginBottom: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#333",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#4f8ef7",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginTop: 8,
|
||||
marginBottom: 24,
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
errorBox: {
|
||||
backgroundColor: "rgba(255, 69, 58, 0.15)",
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginBottom: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 69, 58, 0.3)",
|
||||
},
|
||||
errorText: {
|
||||
color: "#ff453a",
|
||||
fontSize: 14,
|
||||
textAlign: "center",
|
||||
},
|
||||
linkText: {
|
||||
color: "#888",
|
||||
textAlign: "center",
|
||||
fontSize: 14,
|
||||
},
|
||||
linkBold: {
|
||||
color: "#4f8ef7",
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Alert } from "react-native";
|
||||
import { isValidEmail } from "@cloud-reader/shared";
|
||||
|
||||
/** Returns true when email is non-empty and well-formed. */
|
||||
export function requireValidEmail(email: string): boolean {
|
||||
if (!email.trim()) {
|
||||
Alert.alert("Validation Error", "Please enter your email.");
|
||||
return false;
|
||||
}
|
||||
if (!isValidEmail(email.trim())) {
|
||||
Alert.alert("Validation Error", "Please enter a valid email address.");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
@@ -1,8 +1,37 @@
|
||||
// Mobile-specific type aliases and extensions not covered by shared types
|
||||
|
||||
export type RootStackParamList = {
|
||||
Auth: undefined;
|
||||
Main: undefined;
|
||||
BookReader: { bookId: number };
|
||||
BookDetail: { bookId: number };
|
||||
};
|
||||
import type { NavigatorScreenParams } from "@react-navigation/native";
|
||||
import type { MainTabParamList } from "../navigation/MainNavigator";
|
||||
|
||||
/** Stack hosted above the bottom tabs once the user is authenticated. */
|
||||
export type AppStackParamList = {
|
||||
Tabs: NavigatorScreenParams<MainTabParamList> | undefined;
|
||||
BookDetail: { ebookId: number };
|
||||
Reader: { ebookId: number };
|
||||
};
|
||||
|
||||
/** EPUB bookmark/highlight, mirrors frontend/src/types Bookmark. */
|
||||
export interface Bookmark {
|
||||
id: string;
|
||||
ebook: number;
|
||||
ebook_title: string;
|
||||
epub_cfi: string;
|
||||
chapter_index: number;
|
||||
chapter_title: string;
|
||||
page: number;
|
||||
location_text: string;
|
||||
content: string;
|
||||
highlight_color?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateMarkerPayload {
|
||||
ebook: number;
|
||||
epub_cfi: string;
|
||||
chapter_index: number;
|
||||
chapter_title?: string;
|
||||
location_text?: string;
|
||||
content?: string;
|
||||
highlight_color?: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Reader module types for the mobile app. Mirrors
|
||||
* frontend/src/types/reader.ts so settings and progress behave the same
|
||||
* way across web and mobile.
|
||||
*/
|
||||
|
||||
export interface ReadingSettings {
|
||||
font_family: "sans-serif" | "serif" | "monospace";
|
||||
font_size: number;
|
||||
line_height: number;
|
||||
margin_width: number;
|
||||
background_color: string;
|
||||
text_color: string;
|
||||
brightness: number;
|
||||
orientation_lock: "auto" | "portrait" | "landscape";
|
||||
theme: "sepia" | "dark" | "light" | "paper";
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type ThemePreset = ReadingSettings["theme"];
|
||||
export type FontFamily = ReadingSettings["font_family"];
|
||||
|
||||
export interface ReadingProgress {
|
||||
id: number;
|
||||
book: number;
|
||||
current_chapter: number;
|
||||
current_position: number;
|
||||
percentage: number;
|
||||
epub_location: string;
|
||||
updated_at: string;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user