Archived
Resolve merge conflicts for PR #25: customizable mobile reading experience
- Backend: Replace PR's Book-only models with main's full models (EBook, BookChapter, DownloadRecord, ReadingProgress, ReadingSettings) - Backend: Add reader app (ReadingSettings model, serializer, view, URL) - Frontend: Port reader feature files from web/ to frontend/ (api, hooks, components/reader/, pages/ReadingPage, types/reader, reader.css) - Frontend: Add /read/:id route to App.tsx for chapter-based reading view - All imports adjusted for frontend/src directory structure
This commit is contained in:
Marko (Hermes Implementer)
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* useChapters — fetch chapter list and manage current chapter navigation.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { getChapterContent, getChapters } from "../api/reader";
|
||||
import type { ChapterDetail, ChapterSummary } from "../types/reader";
|
||||
|
||||
export interface UseChaptersReturn {
|
||||
chapters: ChapterSummary[];
|
||||
currentChapter: ChapterDetail | null;
|
||||
currentChapterNumber: number;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
navigateToChapter: (number: number) => Promise<void>;
|
||||
goToNextChapter: () => Promise<void>;
|
||||
goToPreviousChapter: () => Promise<void>;
|
||||
hasNext: boolean;
|
||||
hasPrevious: boolean;
|
||||
}
|
||||
|
||||
export function useChapters(
|
||||
bookId: number,
|
||||
initialChapter: number = 1
|
||||
): UseChaptersReturn {
|
||||
const [chapters, setChapters] = useState<ChapterSummary[]>([]);
|
||||
const [currentChapter, setCurrentChapter] = useState<ChapterDetail | null>(
|
||||
null
|
||||
);
|
||||
const [currentChapterNumber, setCurrentChapterNumber] =
|
||||
useState<number>(initialChapter);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch chapter list on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getChapters(bookId)
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setChapters(data);
|
||||
// If chapters exist and initial chapter is valid, fetch it
|
||||
if (
|
||||
data.length > 0 &&
|
||||
data.some((c) => c.number === currentChapterNumber)
|
||||
) {
|
||||
return getChapterContent(bookId, currentChapterNumber);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.then((chapter) => {
|
||||
if (!cancelled && chapter) {
|
||||
setCurrentChapter(chapter);
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load chapters"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [bookId, currentChapterNumber]);
|
||||
|
||||
const fetchChapter = useCallback(
|
||||
async (number: number) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const chapter = await getChapterContent(bookId, number);
|
||||
setCurrentChapter(chapter);
|
||||
setCurrentChapterNumber(number);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load chapter"
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[bookId]
|
||||
);
|
||||
|
||||
const navigateToChapter = useCallback(
|
||||
(number: number) => {
|
||||
fetchChapter(number);
|
||||
},
|
||||
[fetchChapter]
|
||||
);
|
||||
|
||||
const goToNextChapter = useCallback(() => {
|
||||
const next = currentChapterNumber + 1;
|
||||
if (chapters.some((c) => c.number === next)) {
|
||||
fetchChapter(next);
|
||||
}
|
||||
}, [currentChapterNumber, chapters, fetchChapter]);
|
||||
|
||||
const goToPreviousChapter = useCallback(() => {
|
||||
const prev = currentChapterNumber - 1;
|
||||
if (prev >= 1 && chapters.some((c) => c.number === prev)) {
|
||||
fetchChapter(prev);
|
||||
}
|
||||
}, [currentChapterNumber, chapters, fetchChapter]);
|
||||
|
||||
const hasNext = chapters.some((c) => c.number === currentChapterNumber + 1);
|
||||
const hasPrevious = chapters.some((c) => c.number === currentChapterNumber - 1);
|
||||
|
||||
return {
|
||||
chapters,
|
||||
currentChapter,
|
||||
currentChapterNumber,
|
||||
isLoading,
|
||||
error,
|
||||
navigateToChapter,
|
||||
goToNextChapter,
|
||||
goToPreviousChapter,
|
||||
hasNext,
|
||||
hasPrevious,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* useReadingProgress — fetch and update reading progress for a book.
|
||||
* Auto-saves when chapter or position changes.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { getReadingProgress, updateReadingProgress } from "../api/reader";
|
||||
import type { ReadingProgress } from "../types/reader";
|
||||
|
||||
export interface UseReadingProgressReturn {
|
||||
progress: ReadingProgress | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
saveProgress: (
|
||||
chapter: number,
|
||||
position: number,
|
||||
percentage: number
|
||||
) => Promise<void>;
|
||||
/** Schedule a debounced save — fires at most once per 3 seconds */
|
||||
debouncedSave: (
|
||||
chapter: number,
|
||||
position: number,
|
||||
percentage: number
|
||||
) => void;
|
||||
}
|
||||
|
||||
export function useReadingProgress(
|
||||
bookId: number
|
||||
): UseReadingProgressReturn {
|
||||
const [progress, setProgress] = useState<ReadingProgress | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Fetch progress on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getReadingProgress(bookId)
|
||||
.then((data) => {
|
||||
if (!cancelled) setProgress(data);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load progress"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [bookId]);
|
||||
|
||||
const saveProgress = useCallback(
|
||||
async (chapter: number, position: number, percentage: number) => {
|
||||
try {
|
||||
const updated = await updateReadingProgress(bookId, {
|
||||
current_chapter: chapter,
|
||||
current_position: position,
|
||||
percentage,
|
||||
});
|
||||
setProgress(updated);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to save progress"
|
||||
);
|
||||
}
|
||||
},
|
||||
[bookId]
|
||||
);
|
||||
|
||||
const debouncedSave = useCallback(
|
||||
(chapter: number, position: number, percentage: number) => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
debounceTimer.current = setTimeout(() => {
|
||||
saveProgress(chapter, position, percentage);
|
||||
}, 3000);
|
||||
},
|
||||
[saveProgress]
|
||||
);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { progress, isLoading, error, saveProgress, debouncedSave };
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* useReadingSettings — fetch and manage user reading preferences.
|
||||
* Applies settings as CSS custom properties on the document root.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
getReadingSettings,
|
||||
updateReadingSettings,
|
||||
} from "../api/reader";
|
||||
import type { ReadingSettings } from "../types/reader";
|
||||
|
||||
const DEFAULT_SETTINGS: ReadingSettings = {
|
||||
font_family: "serif",
|
||||
font_size: 18,
|
||||
line_height: 1.6,
|
||||
margin_width: 16,
|
||||
background_color: "#f5f0eb",
|
||||
text_color: "#1a1a1a",
|
||||
brightness: 100,
|
||||
orientation_lock: "auto",
|
||||
theme: "sepia",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
|
||||
function applyCssVariables(settings: ReadingSettings): void {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--reader-bg", settings.background_color);
|
||||
root.style.setProperty("--reader-text", settings.text_color);
|
||||
root.style.setProperty("--reader-font-family", settings.font_family);
|
||||
root.style.setProperty("--reader-font-size", `${settings.font_size}px`);
|
||||
root.style.setProperty("--reader-line-height", String(settings.line_height));
|
||||
root.style.setProperty("--reader-margin", `${settings.margin_width}px`);
|
||||
root.style.setProperty("--reader-brightness", `${settings.brightness}%`);
|
||||
}
|
||||
|
||||
export interface UseReadingSettingsReturn {
|
||||
settings: ReadingSettings;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
updateSettings: (partial: Partial<ReadingSettings>) => Promise<void>;
|
||||
}
|
||||
|
||||
export function useReadingSettings(): UseReadingSettingsReturn {
|
||||
const [settings, setSettings] = useState<ReadingSettings>(DEFAULT_SETTINGS);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch settings on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getReadingSettings()
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setSettings(data);
|
||||
applyCssVariables(data);
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load reading settings"
|
||||
);
|
||||
// Apply defaults
|
||||
applyCssVariables(DEFAULT_SETTINGS);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateSettings = useCallback(
|
||||
async (partial: Partial<ReadingSettings>) => {
|
||||
try {
|
||||
const updated = await updateReadingSettings(partial);
|
||||
setSettings(updated);
|
||||
applyCssVariables(updated);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to update reading settings"
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return { settings, isLoading, error, updateSettings };
|
||||
}
|
||||
Reference in New Issue
Block a user