akai/readest
2
1
Fork 1
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Support reading progress synchronization across platforms (#34)

Browse Source
This commit is contained in:
Huang Xin
2024-12-24 12:31:02 +01:00
committed by GitHub
parent d7ccbbcaa2
commit 9be9bc8a34
30 changed files with 1135 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/api/sync/route.ts
+209
View File
@@ -0,0 +1,209 @@
import { NextRequest, NextResponse } from 'next/server';
import { PostgrestError } from '@supabase/supabase-js';
import { supabase, createSupabaseClient } from '@/utils/supabase';
import { BookDataRecord } from '@/types/book';
import { transformBookConfigToDB } from '@/utils/transform';
import { transformBookNoteToDB } from '@/utils/transform';
import { transformBookToDB } from '@/utils/transform';
import { SyncData, SyncResult, SyncType } from '@/libs/sync';
const transformsToDB = {
books: transformBookToDB,
book_notes: transformBookNoteToDB,
book_configs: transformBookConfigToDB,
};
const DBSyncTypeMap = {
books: 'books',
book_notes: 'notes',
book_configs: 'configs',
};
type TableName = keyof typeof transformsToDB;
type DBError = { table: TableName; error: PostgrestError };
const getUserAndToken = async (req: NextRequest) => {
const authHeader = req.headers.get('authorization');
if (!authHeader) return {};
const token = authHeader.replace('Bearer ', '');
const {
data: { user },
error,
} = await supabase.auth.getUser(token);
if (error || !user) return {};
return { user, token };
};
export async function GET(req: NextRequest) {
const { user, token } = await getUserAndToken(req);
if (!user || !token) {
return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
}
const supabase = createSupabaseClient(token);
const { searchParams } = new URL(req.url);
const sinceParam = searchParams.get('since');
const typeParam = searchParams.get('type') as SyncType | undefined;
const bookParam = searchParams.get('book');
if (!sinceParam) {
return NextResponse.json({ error: '"since" query parameter is required' }, { status: 400 });
}
const since = new Date(Number(sinceParam));
if (isNaN(since.getTime())) {
return NextResponse.json({ error: 'Invalid "since" timestamp' }, { status: 400 });
}
const sinceIso = since.toISOString();
try {
const results: SyncResult = { books: [], configs: [], notes: [] };
const errors: Record<TableName, DBError | null> = {
books: null,
book_notes: null,
book_configs: null,
};
const queryTables = async (table: TableName) => {
let query = supabase.from(table).select('*').eq('user_id', user.id);
if (bookParam) {
query.eq('book_hash', bookParam);
}
query = query.or(`updated_at.gt.${sinceIso},deleted_at.gt.${sinceIso}`);
console.log('Querying table:', table, 'since:', sinceIso);
const { data, error } = await query;
if (error) throw { table, error } as DBError;
results[DBSyncTypeMap[table] as SyncType] = data || [];
};
if (!typeParam || typeParam === 'books') {
await queryTables('books').catch((err) => (errors['books'] = err));
}
if (!typeParam || typeParam === 'configs') {
await queryTables('book_configs').catch((err) => (errors['book_configs'] = err));
}
if (!typeParam || typeParam === 'notes') {
await queryTables('book_notes').catch((err) => (errors['book_notes'] = err));
}
const dbErrors = Object.values(errors).filter((err) => err !== null);
if (dbErrors.length > 0) {
console.error('Errors occurred:', dbErrors);
const errorMsg = dbErrors
.map((err) => `${err.table}: ${err.error.message || 'Unknown error'}`)
.join('; ');
return NextResponse.json({ error: errorMsg }, { status: 500 });
}
return NextResponse.json(results, { status: 200 });
} catch (error: unknown) {
console.error(error);
const errorMessage = (error as PostgrestError).message || 'Unknown error';
return NextResponse.json({ error: errorMessage }, { status: 500 });
}
}
export async function POST(req: NextRequest) {
const { user, token } = await getUserAndToken(req);
if (!user || !token) {
return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
}
const supabase = createSupabaseClient(token);
const body = await req.json();
const { books = [], configs = [], notes = [] } = body as SyncData;
const upsertRecords = async (
table: TableName,
primaryKeys: (keyof BookDataRecord)[],
records: BookDataRecord[],
) => {
const authoritativeRecords: BookDataRecord[] = [];
for (const rec of records) {
const dbRec = transformsToDB[table](rec, user.id);
rec.user_id = user.id;
rec.book_hash = dbRec.book_hash;
const matchConditions: Record<string, string | number> = { user_id: user.id };
for (const pk of primaryKeys) {
matchConditions[pk] = rec[pk]!;
}
const { data: serverData, error: fetchError } = await supabase
.from(table)
.select()
.match(matchConditions)
.single();
if (fetchError && fetchError.code !== 'PGRST116') {
return { error: fetchError.message };
}
if (!serverData) {
const { data: inserted, error: insertError } = await supabase
.from(table)
.insert(dbRec)
.select()
.single();
if (insertError) return { error: insertError.message };
authoritativeRecords.push(inserted);
} else {
const clientUpdatedAt = dbRec.updated_at ? new Date(dbRec.updated_at).getTime() : 0;
const serverUpdatedAt = serverData.updated_at
? new Date(serverData.updated_at).getTime()
: 0;
const clientDeletedAt = dbRec.deleted_at ? new Date(dbRec.deleted_at).getTime() : 0;
const serverDeletedAt = serverData.deleted_at
? new Date(serverData.deleted_at).getTime()
: 0;
const clientIsNewer =
clientDeletedAt > serverDeletedAt || clientUpdatedAt > serverUpdatedAt;
if (clientIsNewer) {
const { data: updated, error: updateError } = await supabase
.from(table)
.update(dbRec)
.match(matchConditions)
.select()
.single();
console.log('Updating record:', updated);
if (updateError) return { error: updateError.message };
authoritativeRecords.push(updated);
} else {
authoritativeRecords.push(serverData);
}
}
}
return { data: authoritativeRecords };
};
try {
const [booksResult, configsResult, notesResult] = await Promise.all([
upsertRecords('books', ['book_hash'], books as BookDataRecord[]),
upsertRecords('book_configs', ['book_hash'], configs as BookDataRecord[]),
upsertRecords('book_notes', ['book_hash', 'id'], notes as BookDataRecord[]),
]);
if (booksResult?.error) throw new Error(booksResult.error);
if (configsResult?.error) throw new Error(configsResult.error);
if (notesResult?.error) throw new Error(notesResult.error);
return NextResponse.json(
{
books: booksResult?.data || [],
configs: configsResult?.data || [],
notes: notesResult?.data || [],
},
{ status: 200 },
);
} catch (error: unknown) {
console.error(error);
const errorMessage = (error as PostgrestError).message || 'Unknown error';
return NextResponse.json({ error: errorMessage }, { status: 500 });
}
}
apps/readest-app/src/app/library/components/Bookshelf.tsx
+3 -3
View File
@@ -26,19 +26,19 @@ const generateBookshelfItems = (books: Book[]): BookshelfItem[] => {
const booksGroup = acc[acc.findIndex((group) => group.name === book.group)];
if (booksGroup) {
booksGroup.books.push(book);
booksGroup.lastUpdated = Math.max(acc[groupIndex]!.lastUpdated, book.lastUpdated);
booksGroup.updatedAt = Math.max(acc[groupIndex]!.updatedAt, book.updatedAt);
} else {
acc.push({
name: book.group,
books: [book],
lastUpdated: book.lastUpdated,
updatedAt: book.updatedAt,
});
}
return acc;
}, []);
const ungroupedBooks: Book[] = groups.find((group) => group.name === UNGROUPED_NAME)?.books || [];
const groupedBooks: BooksGroup[] = groups.filter((group) => group.name !== UNGROUPED_NAME);
return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.lastUpdated - a.lastUpdated);
return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.updatedAt - a.updatedAt);
};
interface BookshelfProps {
apps/readest-app/src/app/library/components/SettingsMenu.tsx
+7
View File
@@ -8,6 +8,8 @@ import { setAboutDialogVisible } from '@/components/AboutWindow';
import { isWebAppPlatform } from '@/services/environment';
import { DOWNLOAD_READEST_URL } from '@/services/constants';
import { useAuth } from '@/context/AuthContext';
import { useEnv } from '@/context/EnvContext';
import { useSettingsStore } from '@/store/settingsStore';
import MenuItem from '@/components/MenuItem';
interface BookMenuProps {
@@ -16,7 +18,9 @@ interface BookMenuProps {
const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
const router = useRouter();
const { envConfig } = useEnv();
const { user, logout } = useAuth();
const { settings, setSettings, saveSettings } = useSettingsStore();
const showAboutReadest = () => {
setAboutDialogVisible(true);
@@ -34,6 +38,9 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
const handleUserLogout = () => {
logout();
settings.keepLogin = false;
setSettings(settings);
saveSettings(envConfig, settings);
setIsDropdownOpen?.(false);
};
apps/readest-app/src/app/library/page.tsx
+18 -1
View File
@@ -13,6 +13,7 @@ import { checkForAppUpdates } from '@/helpers/updater';
import { FILE_ACCEPT_FORMATS, SUPPORTED_FILE_EXTS } from '@/services/constants';
import { useEnv } from '@/context/EnvContext';
import { useAuth } from '@/context/AuthContext';
import { useTheme } from '@/hooks/useTheme';
import { useLibraryStore } from '@/store/libraryStore';
import { useSettingsStore } from '@/store/settingsStore';
@@ -26,6 +27,7 @@ import { AboutWindow } from '@/components/AboutWindow';
const LibraryPage = () => {
const router = useRouter();
const { envConfig, appService } = useEnv();
const { token, user } = useAuth();
const {
library: libraryBooks,
setLibrary,
@@ -33,7 +35,7 @@ const LibraryPage = () => {
clearOpenWithBooks,
} = useLibraryStore();
useTheme();
const { setSettings } = useSettingsStore();
const { setSettings, saveSettings } = useSettingsStore();
const [loading, setLoading] = useState(false);
const isInitiating = useRef(false);
const [libraryLoaded, setLibraryLoaded] = useState(false);
@@ -74,6 +76,20 @@ const LibraryPage = () => {
if (isInitiating.current) return;
isInitiating.current = true;
const initLogin = async () => {
const appService = await envConfig.getAppService();
const settings = await appService.loadSettings();
if (token && user) {
if (!settings.keepLogin) {
settings.keepLogin = true;
setSettings(settings);
saveSettings(envConfig, settings);
}
} else if (settings.keepLogin) {
router.push('/auth');
}
};
const loadingTimeout = setTimeout(() => setLoading(true), 300);
const initLibrary = async () => {
const appService = await envConfig.getAppService();
@@ -104,6 +120,7 @@ const LibraryPage = () => {
}
};
initLogin();
initLibrary();
return () => {
clearOpenWithBooks();
apps/readest-app/src/app/reader/components/BookmarkToggler.tsx
+2 -1
View File
@@ -38,7 +38,8 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
cfi,
text: truncatedText,
note: '',
created: Date.now(),
createdAt: Date.now(),
updatedAt: Date.now(),
};
bookmarks.push(bookmark);
const updatedConfig = updateBooknotes(bookKey, bookmarks);
apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+28 -156
View File
@@ -1,10 +1,13 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { BookDoc, getDirection } from '@/libs/document';
import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
import { BookConfig } from '@/types/book';
import { FoliateView, wrappedFoliateView } from '@/types/view';
import { useReaderStore } from '@/store/readerStore';
import { useParallelViewStore } from '@/store/parallelViewStore';
import { useClickEvent } from '../hooks/useClickEvent';
import { useFoliateEvents } from '../hooks/useFoliateEvents';
import { getOSPlatform } from '@/utils/misc';
import { useProgressSync } from '../hooks/useProgressSync';
import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
import { getStyles, mountAdditionalFonts } from '@/utils/style';
import { useTheme } from '@/hooks/useTheme';
import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
@@ -15,57 +18,7 @@ import {
handleClick,
handleWheel,
} from '../utils/iframeEventHandlers';
import { eventDispatcher } from '@/utils/event';
export interface FoliateView extends HTMLElement {
open: (book: BookDoc) => Promise<void>;
close: () => void;
init: (options: { lastLocation: string }) => void;
goTo: (href: string) => void;
goToFraction: (fraction: number) => void;
prev: (distance: number) => void;
next: (distance: number) => void;
goLeft: () => void;
goRight: () => void;
getCFI: (index: number, range: Range) => string;
addAnnotation: (note: BookNote, remove?: boolean) => { index: number; label: string };
search: (config: BookSearchConfig) => AsyncGenerator<BookSearchResult | string, void, void>;
clearSearch: () => void;
select: (target: string | number | { fraction: number }) => void;
deselect: () => void;
history: {
canGoBack: boolean;
canGoForward: boolean;
back: () => void;
forward: () => void;
clear: () => void;
};
renderer: {
scrolled?: boolean;
viewSize: number;
setAttribute: (name: string, value: string | number) => void;
removeAttribute: (name: string) => void;
next: () => Promise<void>;
prev: () => Promise<void>;
goTo?: (params: { index: number; anchor: number }) => void;
setStyles?: (css: string) => void;
addEventListener: (type: string, listener: EventListener) => void;
removeEventListener: (type: string, listener: EventListener) => void;
};
}
const wrappedFoliateView = (originalView: FoliateView): FoliateView => {
const originalAddAnnotation = originalView.addAnnotation.bind(originalView);
originalView.addAnnotation = (note: BookNote, remove = false) => {
// transform BookNote to foliate annotation
const annotation = {
value: note.cfi,
...note,
};
return originalAddAnnotation(annotation, remove);
};
return originalView;
};
import Toast from '@/components/Toast';
const FoliateViewer: React.FC<{
bookKey: string;
@@ -75,12 +28,18 @@ const FoliateViewer: React.FC<{
const containerRef = useRef<HTMLDivElement>(null);
const viewRef = useRef<FoliateView | null>(null);
const isViewCreated = useRef(false);
const { getView, setView: setFoliateView, setProgress, getViewSettings } = useReaderStore();
const { hoveredBookKey, setHoveredBookKey, setViewSettings } = useReaderStore();
const { getView, setView: setFoliateView, setProgress } = useReaderStore();
const { getViewSettings, setViewSettings } = useReaderStore();
const { getParallels } = useParallelViewStore();
const { themeCode } = useTheme();
const shouldAutoHideScrollbar = ['macos', 'ios'].includes(getOSPlatform());
const [toastMessage, setToastMessage] = useState('');
useEffect(() => {
const timer = setTimeout(() => setToastMessage(''), 2000);
return () => clearTimeout(timer);
}, [toastMessage]);
useProgressSync(bookKey, config, setToastMessage);
const progressRelocateHandler = (event: Event) => {
const detail = (event as CustomEvent).detail;
@@ -88,34 +47,7 @@ const FoliateViewer: React.FC<{
setProgress(bookKey, detail.cfi, detail.tocItem, detail.section, detail.location, detail.range);
};
const handleScrollbarAutoHide = (doc: Document) => {
if (doc && doc.defaultView && doc.defaultView.frameElement) {
const iframe = doc.defaultView.frameElement as HTMLIFrameElement;
const container = iframe.parentElement?.parentElement;
if (!container) return;
let hideScrollbarTimeout: ReturnType<typeof setTimeout>;
const showScrollbar = () => {
container.style.overflow = 'auto';
container.style.scrollbarWidth = 'thin';
};
const hideScrollbar = () => {
container.style.overflow = 'hidden';
container.style.scrollbarWidth = 'none';
requestAnimationFrame(() => {
container.style.overflow = 'auto';
});
};
container.addEventListener('scroll', () => {
showScrollbar();
clearTimeout(hideScrollbarTimeout);
hideScrollbarTimeout = setTimeout(hideScrollbar, 1000);
});
hideScrollbar();
}
};
const { shouldAutoHideScrollbar, handleScrollbarAutoHide } = useAutoHideScrollbar();
const docLoadHandler = (event: Event) => {
const detail = (event as CustomEvent).detail;
console.log('doc loaded:', detail);
@@ -157,72 +89,7 @@ const FoliateViewer: React.FC<{
}
};
const handleTurnPage = (msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (msg instanceof MessageEvent) {
if (msg.data && msg.data.bookKey === bookKey) {
const viewSettings = getViewSettings(bookKey)!;
if (msg.data.type === 'iframe-single-click') {
if (viewSettings.disableClick!) {
return;
}
const viewElement = containerRef.current;
if (viewElement) {
const rect = viewElement.getBoundingClientRect();
const { screenX, screenY } = msg.data;
const consumed = eventDispatcher.dispatchSync('iframe-single-click', {
screenX,
screenY,
});
if (!consumed) {
const centerStartX = rect.left + rect.width * 0.375;
const centerEndX = rect.left + rect.width * 0.625;
const centerStartY = rect.top + rect.height * 0.375;
const centerEndY = rect.top + rect.height * 0.625;
if (
screenX >= centerStartX &&
screenX <= centerEndX &&
screenY >= centerStartY &&
screenY <= centerEndY
) {
// toggle visibility of the header bar and the footer bar
setHoveredBookKey(hoveredBookKey ? '' : bookKey);
} else if (screenX >= rect.left + rect.width / 2) {
viewRef.current?.goRight();
} else if (screenX < rect.left + rect.width / 2) {
viewRef.current?.goLeft();
}
}
}
} else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
const { deltaY } = msg.data;
if (deltaY > 0) {
viewRef.current?.next(1);
} else if (deltaY < 0) {
viewRef.current?.prev(1);
}
}
}
} else {
const { clientX } = msg;
const width = window.innerWidth;
const leftThreshold = width * 0.5;
const rightThreshold = width * 0.5;
if (clientX < leftThreshold) {
viewRef.current?.goLeft();
} else if (clientX > rightThreshold) {
viewRef.current?.goRight();
}
}
};
useEffect(() => {
window.addEventListener('message', handleTurnPage);
return () => {
window.removeEventListener('message', handleTurnPage);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hoveredBookKey, viewRef]);
const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
useFoliateEvents(viewRef.current, {
onLoad: docLoadHandler,
onRelocate: progressRelocateHandler,
@@ -291,11 +158,16 @@ const FoliateViewer: React.FC<{
}, []);
return (
<div
className='foliate-viewer h-[100%] w-[100%]'
onClick={(event) => handleTurnPage(event)}
ref={containerRef}
/>
<>
<div
className='foliate-viewer h-[100%] w-[100%]'
onClick={(event) => handleTurnPage(event)}
ref={containerRef}
/>
{toastMessage && (
<Toast message={toastMessage} toastClass='toast-top toast-end' alertClass='alert-success' />
)}
</>
);
};
apps/readest-app/src/app/reader/components/FootnotePopup.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
import { useTheme } from '@/hooks/useTheme';
import { getStyles } from '@/utils/style';
import { getPopupPosition, getPosition, Position } from '@/utils/sel';
import { FoliateView } from './FoliateViewer';
import { FoliateView } from '@/types/view';
import { FootnoteHandler } from 'foliate-js/footnotes.js';
import Popup from '@/components/Popup';
apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+5 -3
View File
@@ -225,7 +225,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
cfi,
text: selection.text,
note: '',
created: Date.now(),
createdAt: Date.now(),
updatedAt: Date.now(),
};
const existingIndex = annotations.findIndex(
@@ -260,7 +261,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
color,
text: selection.text,
note: '',
created: Date.now(),
createdAt: Date.now(),
updatedAt: Date.now(),
};
const existingIndex = annotations.findIndex(
(annotation) => annotation.cfi === cfi && annotation.type === 'annotation',
@@ -389,7 +391,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
/>
)}
{toastMessage && <Toast message={toastMessage} />}
{toastMessage && <Toast message={toastMessage} alertClass='bg-neutual text-content' />}
</div>
);
};
apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+5 -4
View File
@@ -73,7 +73,8 @@ const Notebook: React.FC = ({}) => {
cfi,
note,
text: selection.text,
created: Date.now(),
createdAt: Date.now(),
updatedAt: Date.now(),
};
annotations.push(annotation);
const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
@@ -89,7 +90,7 @@ const Notebook: React.FC = ({}) => {
const { booknotes: annotations = [] } = config;
const existingIndex = annotations.findIndex((item) => item.id === annotation.id);
if (existingIndex === -1) return;
annotation.modified = Date.now();
annotation.updatedAt = Date.now();
annotations[existingIndex] = annotation;
const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
if (updatedConfig) {
@@ -117,10 +118,10 @@ const Notebook: React.FC = ({}) => {
const { booknotes: allNotes = [] } = config || {};
const annotationNotes = allNotes
.filter((note) => note.type === 'annotation' && note.note)
.sort((a, b) => b.created - a.created);
.sort((a, b) => b.createdAt - a.createdAt);
const excerptNotes = allNotes
.filter((note) => note.type === 'excerpt')
.sort((a, b) => a.created - b.created);
.sort((a, b) => a.createdAt - b.createdAt);
return isNotebookVisible ? (
<>
apps/readest-app/src/app/reader/hooks/useAutoHideScrollbar.ts
+34
View File
@@ -0,0 +1,34 @@
import { getOSPlatform } from '@/utils/misc';
export const useAutoHideScrollbar = () => {
const shouldAutoHideScrollbar = ['macos', 'ios'].includes(getOSPlatform());
const handleScrollbarAutoHide = (doc: Document) => {
if (doc && doc.defaultView && doc.defaultView.frameElement) {
const iframe = doc.defaultView.frameElement as HTMLIFrameElement;
const container = iframe.parentElement?.parentElement;
if (!container) return;
let hideScrollbarTimeout: ReturnType<typeof setTimeout>;
const showScrollbar = () => {
container.style.overflow = 'auto';
container.style.scrollbarWidth = 'thin';
};
const hideScrollbar = () => {
container.style.overflow = 'hidden';
container.style.scrollbarWidth = 'none';
requestAnimationFrame(() => {
container.style.overflow = 'auto';
});
};
container.addEventListener('scroll', () => {
showScrollbar();
clearTimeout(hideScrollbarTimeout);
hideScrollbarTimeout = setTimeout(hideScrollbar, 1000);
});
hideScrollbar();
}
};
return { shouldAutoHideScrollbar, handleScrollbarAutoHide };
};
apps/readest-app/src/app/reader/hooks/useClickEvent.ts
+82
View File
@@ -0,0 +1,82 @@
import { useEffect } from 'react';
import { FoliateView } from '@/types/view';
import { useReaderStore } from '@/store/readerStore';
import { eventDispatcher } from '@/utils/event';
export const useClickEvent = (
bookKey: string,
viewRef: React.MutableRefObject<FoliateView | null>,
containerRef: React.RefObject<HTMLDivElement>,
) => {
const { getViewSettings } = useReaderStore();
const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
const handleTurnPage = (msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (msg instanceof MessageEvent) {
if (msg.data && msg.data.bookKey === bookKey) {
const viewSettings = getViewSettings(bookKey)!;
if (msg.data.type === 'iframe-single-click') {
if (viewSettings.disableClick!) {
return;
}
const viewElement = containerRef.current;
if (viewElement) {
const rect = viewElement.getBoundingClientRect();
const { screenX, screenY } = msg.data;
const consumed = eventDispatcher.dispatchSync('iframe-single-click', {
screenX,
screenY,
});
if (!consumed) {
const centerStartX = rect.left + rect.width * 0.375;
const centerEndX = rect.left + rect.width * 0.625;
const centerStartY = rect.top + rect.height * 0.375;
const centerEndY = rect.top + rect.height * 0.625;
if (
screenX >= centerStartX &&
screenX <= centerEndX &&
screenY >= centerStartY &&
screenY <= centerEndY
) {
// toggle visibility of the header bar and the footer bar
setHoveredBookKey(hoveredBookKey ? '' : bookKey);
} else if (screenX >= rect.left + rect.width / 2) {
viewRef.current?.goRight();
} else if (screenX < rect.left + rect.width / 2) {
viewRef.current?.goLeft();
}
}
}
} else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
const { deltaY } = msg.data;
if (deltaY > 0) {
viewRef.current?.next(1);
} else if (deltaY < 0) {
viewRef.current?.prev(1);
}
}
}
} else {
const { clientX } = msg;
const width = window.innerWidth;
const leftThreshold = width * 0.5;
const rightThreshold = width * 0.5;
if (clientX < leftThreshold) {
viewRef.current?.goLeft();
} else if (clientX > rightThreshold) {
viewRef.current?.goRight();
}
}
};
useEffect(() => {
window.addEventListener('message', handleTurnPage);
return () => {
window.removeEventListener('message', handleTurnPage);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hoveredBookKey, viewRef]);
return {
handleTurnPage,
};
};
apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { FoliateView } from '@/app/reader/components/FoliateViewer';
import { FoliateView } from '@/types/view';
type FoliateEventHandler = {
onLoad?: (event: Event) => void;
apps/readest-app/src/app/reader/hooks/useProgressSync.ts
+90
View File
@@ -0,0 +1,90 @@
import { useEffect, useRef } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useSync } from '@/hooks/useSync';
import { BookConfig } from '@/types/book';
import { deserializeConfig, serializeConfig } from '@/utils/serializer';
import { useBookDataStore } from '@/store/bookDataStore';
import { DEFAULT_BOOK_SEARCH_CONFIG, SYNC_PROGRESS_INTERVAL_SEC } from '@/services/constants';
import { useReaderStore } from '@/store/readerStore';
import { useSettingsStore } from '@/store/settingsStore';
export const useProgressSync = (
bookKey: string,
config: BookConfig,
setToastMessage?: React.Dispatch<React.SetStateAction<string>>,
) => {
const { setConfig } = useBookDataStore();
const { getView } = useReaderStore();
const { settings } = useSettingsStore();
const { syncedConfigs, syncConfigs } = useSync();
const { user } = useAuth();
const view = getView(bookKey);
const pushConfig = (bookKey: string, config: BookConfig) => {
const bookHash = bookKey.split('-')[0]!;
const newConfig = { bookHash, ...config };
const compressedConfig = JSON.parse(
serializeConfig(newConfig, settings.globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG),
);
syncConfigs([compressedConfig], bookHash, 'push');
};
useEffect(() => {
if (!user) return;
const bookHash = bookKey.split('-')[0]!;
syncConfigs([], bookHash, 'pull');
return () => {
pushConfig(bookKey, config);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const lastProgressSyncTime = useRef<number>(0);
const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
if (!user) return;
const now = Date.now();
const timeSinceLastSync = now - lastProgressSyncTime.current;
if (configSynced.current && timeSinceLastSync > SYNC_PROGRESS_INTERVAL_SEC * 1000) {
lastProgressSyncTime.current = now;
pushConfig(bookKey, config);
} else {
if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
syncTimeoutRef.current = setTimeout(
() => {
lastProgressSyncTime.current = Date.now();
pushConfig(bookKey, config);
syncTimeoutRef.current = null;
},
SYNC_PROGRESS_INTERVAL_SEC * 1000 - timeSinceLastSync,
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [config]);
// sync progress once when the book is opened
const configSynced = useRef(false);
useEffect(() => {
if (!configSynced.current && syncedConfigs?.length > 0) {
const syncedConfig = syncedConfigs.filter((c) => c.bookHash === bookKey.split('-')[0])[0];
if (syncedConfig) {
const newConfig = deserializeConfig(
JSON.stringify(syncedConfig),
settings.globalViewSettings,
DEFAULT_BOOK_SEARCH_CONFIG,
);
setConfig(bookKey, { ...config, ...newConfig });
configSynced.current = true;
if ((syncedConfig.progress?.[1] ?? 0) > 0 && (config.progress?.[1] ?? 0) > 0) {
const syncedFraction = syncedConfig.progress![0] / syncedConfig.progress![1];
const configFraction = config.progress![0] / config.progress![1];
if (syncedFraction > configFraction) {
view?.goToFraction(syncedFraction);
setToastMessage?.('Progress synced');
}
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [syncedConfigs]);
};
apps/readest-app/src/components/Toast.tsx
+8 -3
View File
@@ -1,8 +1,13 @@
import clsx from 'clsx';
import React from 'react';
const Toast: React.FC<{ message: string }> = ({ message }) => (
<div className='toast toast-center toast-middle'>
<div className='alert flex items-center justify-center border-0 bg-gray-600 text-white'>
const Toast: React.FC<{ message: string; toastClass?: string; alertClass?: string }> = ({
message,
toastClass,
alertClass,
}) => (
<div className={clsx('toast toast-center toast-middle', toastClass)}>
<div className={clsx('alert flex items-center justify-center border-0', alertClass)}>
<span>{message}</span>
</div>
</div>
apps/readest-app/src/context/AuthContext.tsx
+3 -3
View File
@@ -32,7 +32,6 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
const fetchSession = async () => {
const {
data: { session },
error,
} = await supabase.auth.getSession();
if (session) {
const { access_token, user } = session;
@@ -40,8 +39,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
setUser(user);
localStorage.setItem('token', access_token);
localStorage.setItem('user', JSON.stringify(user));
} else if (error) {
console.error('Error fetching session:', error);
} else {
localStorage.removeItem('token');
localStorage.removeItem('user');
setToken(null);
@@ -54,6 +52,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
}, [token]);
const login = (newToken: string, newUser: User) => {
console.log('Logging in');
setToken(newToken);
setUser(newUser);
localStorage.setItem('token', newToken);
@@ -61,6 +60,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
};
const logout = () => {
console.log('Logging out');
setToken(null);
setUser(null);
localStorage.removeItem('token');
apps/readest-app/src/context/SyncContext.tsx
+18
View File
@@ -0,0 +1,18 @@
'use client';
import React, { createContext, useContext } from 'react';
import { SyncClient } from '@/libs/sync';
const syncClient = new SyncClient();
interface SyncContextType {
syncClient: SyncClient;
}
const SyncContext = createContext<SyncContextType>({ syncClient });
export const SyncProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return <SyncContext.Provider value={{ syncClient }}>{children}</SyncContext.Provider>;
};
export const useSyncContext = () => useContext(SyncContext);
apps/readest-app/src/hooks/useSync.ts
+194
View File
@@ -0,0 +1,194 @@
import { useEffect, useState } from 'react';
import { useSyncContext } from '@/context/SyncContext';
import { SyncData, SyncOp, SyncResult, SyncType } from '@/libs/sync';
import { useSettingsStore } from '@/store/settingsStore';
import { useBookDataStore } from '@/store/bookDataStore';
import { transformBookConfigFromDB } from '@/utils/transform';
import { transformBookNoteFromDB } from '@/utils/transform';
import { transformBookFromDB } from '@/utils/transform';
import { DBBook, DBBookConfig, DBBookNote } from '@/types/records';
import { Book, BookConfig, BookDataRecord, BookNote } from '@/types/book';
const transformsFromDB = {
books: transformBookFromDB,
notes: transformBookNoteFromDB,
configs: transformBookConfigFromDB,
};
const computeMaxTimestamp = (records: BookDataRecord[]): number => {
let maxTime = 0;
for (const rec of records) {
if (rec.updated_at) {
const updatedTime = new Date(rec.updated_at).getTime();
maxTime = Math.max(maxTime, updatedTime);
}
if (rec.deleted_at) {
const deletedTime = new Date(rec.deleted_at).getTime();
maxTime = Math.max(maxTime, deletedTime);
}
}
return maxTime;
};
export function useSync(bookKey?: string) {
const { settings } = useSettingsStore();
const { getConfig } = useBookDataStore();
const config = bookKey ? getConfig(bookKey) : null;
const [syncingBooks, setSyncingBooks] = useState(false);
const [syncingConfigs, setSyncingConfigs] = useState(false);
const [syncingNotes, setSyncingNotes] = useState(false);
const [syncError, setSyncError] = useState<string | null>(null);
const [lastSyncedAtBooks, setLastSyncedAtBooks] = useState<number>(
settings.lastSyncedAtBooks ?? 0,
);
const [lastSyncedAtConfigs, setLastSyncedAtConfigs] = useState<number>(
config?.lastSyncedAtConfig ?? settings.lastSyncedAtConfigs ?? 0,
);
const [lastSyncedAtNotes, setLastSyncedAtNotes] = useState<number>(
config?.lastSyncedAtNotes ?? settings.lastSyncedAtNotes ?? 0,
);
const [syncing, setSyncing] = useState(false);
const [syncResult, setSyncResult] = useState<SyncResult>({
books: [],
configs: [],
notes: [],
});
const [syncedBooks, setSyncedBooks] = useState<Book[]>([]);
const [syncedConfigs, setSyncedConfigs] = useState<BookConfig[]>([]);
const [syncedNotes, setSyncedNotes] = useState<BookNote[]>([]);
const { syncClient } = useSyncContext();
// bookId is for configs and notes only, if bookId is provided, only pull changes for that book
// and update the lastSyncedAt for that book in the book config
const pullChanges = async (
type: SyncType,
since: number,
setLastSyncedAt: React.Dispatch<React.SetStateAction<number>>,
setSyncing: React.Dispatch<React.SetStateAction<boolean>>,
bookId?: string,
) => {
setSyncing(true);
setSyncError(null);
try {
const result = await syncClient.pullChanges(since, type, bookId);
const maxTime = computeMaxTimestamp(result[type]);
setLastSyncedAt(maxTime);
switch (type) {
case 'books':
settings.lastSyncedAtBooks = maxTime;
break;
case 'configs':
if (!bookId) {
settings.lastSyncedAtConfigs = maxTime;
} else if (config) {
config.lastSyncedAtConfig = maxTime;
}
break;
case 'notes':
if (!bookId) {
settings.lastSyncedAtNotes = maxTime;
} else if (config) {
config.lastSyncedAtNotes = maxTime;
}
break;
}
} catch (err: unknown) {
console.error(err);
if (err instanceof Error) {
setSyncError(err.message || `Error pulling ${type}`);
} else {
setSyncError(`Error pulling ${type}`);
}
} finally {
setSyncing(false);
}
};
const pushChanges = async (payload: SyncData) => {
setSyncing(true);
setSyncError(null);
try {
const result = await syncClient.pushChanges(payload);
setSyncResult(result);
} catch (err: unknown) {
console.error(err);
if (err instanceof Error) {
setSyncError(err.message || 'Error pushing changes');
} else {
setSyncError('Error pushing changes');
}
} finally {
setSyncing(false);
}
};
const syncBooks = async (books?: Book[], op: SyncOp = 'both') => {
if ((op === 'push' || op === 'both') && books?.length) {
await pushChanges({ books });
}
if (op === 'pull' || op === 'both') {
await pullChanges('books', lastSyncedAtBooks, setLastSyncedAtBooks, setSyncingBooks);
}
};
const syncConfigs = async (bookConfigs?: BookConfig[], bookId?: string, op: SyncOp = 'both') => {
if ((op === 'push' || op === 'both') && bookConfigs?.length) {
await pushChanges({ configs: bookConfigs });
}
if (op === 'pull' || op === 'both') {
await pullChanges(
'configs',
lastSyncedAtConfigs,
setLastSyncedAtConfigs,
setSyncingConfigs,
bookId,
);
}
};
const syncNotes = async (bookNotes?: BookNote[], bookId?: string, op: SyncOp = 'both') => {
if ((op === 'push' || op === 'both') && bookNotes?.length) {
await pushChanges({ notes: bookNotes });
}
if (op === 'pull' || op === 'both') {
await pullChanges('notes', lastSyncedAtNotes, setLastSyncedAtNotes, setSyncingNotes, bookId);
}
};
useEffect(() => {
if (!syncing && syncResult) {
const { books: dbBooks, configs: dbBookConfigs, notes: dbBookNotes } = syncResult;
const books = dbBooks.map((dbBook) => transformsFromDB['books'](dbBook as unknown as DBBook));
const configs = dbBookConfigs.map((dbBookConfig) =>
transformsFromDB['configs'](dbBookConfig as unknown as DBBookConfig),
);
const notes = dbBookNotes.map((dbBookNote) =>
transformsFromDB['notes'](dbBookNote as unknown as DBBookNote),
);
if (books.length) setSyncedBooks(books);
if (configs.length) setSyncedConfigs(configs);
if (notes.length) setSyncedNotes(notes);
}
}, [syncResult, syncing]);
return {
syncing: syncingBooks || syncingConfigs || syncingNotes,
syncError,
syncResult,
syncedBooks,
syncedConfigs,
syncedNotes,
pullChanges,
pushChanges,
syncBooks,
syncConfigs,
syncNotes,
};
}
apps/readest-app/src/libs/sync.ts
+79
View File
@@ -0,0 +1,79 @@
import { supabase } from '@/utils/supabase';
import { Book, BookConfig, BookNote, BookDataRecord } from '@/types/book';
import { READEST_WEB_BASE_URL } from '@/services/constants';
const BASE_URL = process.env['NODE_ENV'] === 'production' ? READEST_WEB_BASE_URL : '';
export type SyncType = 'books' | 'configs' | 'notes';
export type SyncOp = 'push' | 'pull' | 'both';
interface BookRecord extends BookDataRecord, Book {}
interface BookConfigRecord extends BookDataRecord, BookConfig {}
interface BookNoteRecord extends BookDataRecord, BookNote {}
export interface SyncResult {
books: BookRecord[];
notes: BookNoteRecord[];
configs: BookConfigRecord[];
}
export interface SyncData {
books?: Partial<BookRecord>[];
notes?: Partial<BookNoteRecord>[];
configs?: Partial<BookConfigRecord>[];
}
export class SyncClient {
/**
* Pull incremental changes since a given timestamp (in ms).
* Returns updated or deleted records since that time.
*/
async pullChanges(since: number, type?: SyncType, book?: string): Promise<SyncResult> {
const token = await this.getAccessToken();
if (!token) throw new Error('Not authenticated');
const url = `${BASE_URL}/api/sync?since=${encodeURIComponent(since)}&type=${type ?? ''}&book=${book ?? ''}`;
const res = await fetch(url, {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) {
const error = await res.json();
throw new Error(`Failed to pull changes: ${error.error || res.statusText}`);
}
return res.json();
}
/**
* Push local changes to the server.
* Uses last-writer-wins logic as implemented on the server side.
*/
async pushChanges(payload: SyncData): Promise<SyncResult> {
const token = await this.getAccessToken();
if (!token) throw new Error('Not authenticated');
const res = await fetch(`${BASE_URL}/api/sync`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(payload),
});
if (!res.ok) {
const error = await res.json();
throw new Error(`Failed to push changes: ${error.error || res.statusText}`);
}
return res.json();
}
private async getAccessToken(): Promise<string | null> {
const { data } = await supabase.auth.getSession();
return data?.session?.access_token ?? null;
}
}
apps/readest-app/src/services/appService.ts
+19 -23
View File
@@ -2,7 +2,7 @@ import { AppPlatform, AppService, ToastType } from '@/types/system';
import { SystemSettings } from '@/types/settings';
import { FileSystem, BaseDir } from '@/types/system';
import { Book, BookConfig, BookContent, BookFormat, ViewSettings } from '@/types/book';
import { Book, BookConfig, BookContent, BookFormat } from '@/types/book';
import {
getDir,
getFilename,
@@ -26,6 +26,7 @@ import {
DEFAULT_BOOK_SEARCH_CONFIG,
} from './constants';
import { isValidURL } from '@/utils/misc';
import { deserializeConfig, serializeConfig } from '@/utils/serializer';
export abstract class BaseAppService implements AppService {
localBooksDir: string = '';
@@ -70,6 +71,10 @@ export abstract class BaseAppService implements AppService {
settings = {
version: SYSTEM_SETTINGS_VERSION,
localBooksDir: await this.getInitBooksDir(),
lastSyncedAtBooks: 0,
lastSyncedAtConfigs: 0,
lastSyncedAtNotes: 0,
keepLogin: false,
globalReadSettings: DEFAULT_READSETTINGS,
globalViewSettings: {
...DEFAULT_BOOK_LAYOUT,
@@ -126,10 +131,10 @@ export abstract class BaseAppService implements AppService {
const hash = await partialMD5(fileobj);
const existingBook = books.filter((b) => b.hash === hash)[0];
if (existingBook) {
if (existingBook.isRemoved) {
delete existingBook.isRemoved;
if (existingBook.deletedAt) {
delete existingBook.deletedAt;
}
existingBook.lastUpdated = Date.now();
existingBook.updatedAt = Date.now();
}
const book: Book = {
@@ -137,7 +142,8 @@ export abstract class BaseAppService implements AppService {
format,
title: formatTitle(loadedBook.metadata.title),
author: formatAuthors(loadedBook.metadata.language, loadedBook.metadata.author),
lastUpdated: Date.now(),
createdAt: existingBook ? existingBook.createdAt : Date.now(),
updatedAt: Date.now(),
};
if (!(await this.fs.exists(getDir(book), 'Books'))) {
await this.fs.createDir(getDir(book), 'Books');
@@ -206,33 +212,22 @@ export abstract class BaseAppService implements AppService {
async loadBookConfig(book: Book, settings: SystemSettings): Promise<BookConfig> {
try {
const str = await this.fs.readFile(getConfigFilename(book), 'Books', 'text');
const config = JSON.parse(str as string) as BookConfig;
const { globalViewSettings } = settings;
const { viewSettings } = config;
config.viewSettings = { ...globalViewSettings, ...viewSettings };
config.searchConfig ??= DEFAULT_BOOK_SEARCH_CONFIG;
return config;
return deserializeConfig(str as string, globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG);
} catch {
return INIT_BOOK_CONFIG;
}
}
async saveBookConfig(book: Book, config: BookConfig, settings?: SystemSettings) {
let serializedConfig: string;
if (settings) {
config = JSON.parse(JSON.stringify(config));
const globalViewSettings = settings.globalViewSettings as ViewSettings;
const viewSettings = config.viewSettings as Partial<ViewSettings>;
config.viewSettings = Object.entries(viewSettings).reduce(
(acc: Partial<Record<keyof ViewSettings, unknown>>, [key, value]) => {
if (globalViewSettings[key as keyof ViewSettings] !== value) {
acc[key as keyof ViewSettings] = value;
}
return acc;
},
{} as Partial<Record<keyof ViewSettings, unknown>>,
) as Partial<ViewSettings>;
const { globalViewSettings } = settings;
serializedConfig = serializeConfig(config, globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG);
} else {
serializedConfig = JSON.stringify(config);
}
await this.fs.writeFile(getConfigFilename(book), 'Books', JSON.stringify(config));
await this.fs.writeFile(getConfigFilename(book), 'Books', serializedConfig);
}
async loadLibraryBooks(): Promise<Book[]> {
@@ -255,6 +250,7 @@ export abstract class BaseAppService implements AppService {
} else {
book.coverImageUrl = this.getCoverImageUrl(book);
}
book.updatedAt ??= book.lastUpdated || Date.now();
return book;
}),
);
apps/readest-app/src/services/constants.ts
+4
View File
@@ -84,3 +84,7 @@ export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;
export const BOOK_IDS_SEPARATOR = '+';
export const DOWNLOAD_READEST_URL = 'https://readest.com?utm_source=readest_web';
export const READEST_WEB_BASE_URL = 'https://web.readest.com';
export const SYNC_PROGRESS_INTERVAL_SEC = 30;
apps/readest-app/src/store/bookDataStore.ts
+19 -4
View File
@@ -17,6 +17,7 @@ interface BookData {
interface BookDataState {
booksData: { [id: string]: BookData };
getConfig: (key: string | null) => BookConfig | null;
setConfig: (key: string, config: BookConfig) => void;
saveConfig: (
envConfig: EnvConfigType,
bookKey: string,
@@ -38,6 +39,20 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
const id = key.split('-')[0]!;
return get().booksData[id]?.config || null;
},
setConfig: (key: string, config: BookConfig) => {
set((state: BookDataState) => {
const id = key.split('-')[0]!;
return {
booksData: {
...state.booksData,
[id]: {
...state.booksData[id]!,
config,
},
},
};
});
},
saveConfig: async (
envConfig: EnvConfigType,
bookKey: string,
@@ -49,10 +64,10 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
const bookIndex = library.findIndex((b) => b.hash === bookKey.split('-')[0]);
if (bookIndex == -1) return;
const book = library.splice(bookIndex, 1)[0]!;
book.lastUpdated = Date.now();
book.updatedAt = Date.now();
library.unshift(book);
setLibrary(library);
config.lastUpdated = Date.now();
config.updatedAt = Date.now();
appService.saveBookConfig(book, config, settings);
appService.saveLibraryBooks(library);
},
@@ -67,7 +82,7 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
);
updatedConfig = {
...book.config,
lastUpdated: Date.now(),
updatedAt: Date.now(),
booknotes: dedupedBooknotes,
};
return {
@@ -77,7 +92,7 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
...book,
config: {
...book.config,
lastUpdated: Date.now(),
updatedAt: Date.now(),
booknotes: dedupedBooknotes,
},
},
apps/readest-app/src/store/readerStore.ts
+3 -3
View File
@@ -2,7 +2,7 @@ import { create } from 'zustand';
import { BookContent, BookConfig, PageInfo, BookProgress, ViewSettings } from '@/types/book';
import { EnvConfigType } from '@/services/environment';
import { FoliateView } from '@/app/reader/components/FoliateViewer';
import { FoliateView } from '@/types/view';
import { BookDoc, DocumentLoader, SectionItem, TOCItem } from '@/libs/document';
import { updateTocCFI, updateTocID } from '@/utils/toc';
import { useSettingsStore } from './settingsStore';
@@ -182,7 +182,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
...bookData,
config: {
...bookData.config,
lastUpdated: Date.now(),
updatedAt: Date.now(),
viewSettings,
},
},
@@ -216,7 +216,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
const oldConfig = bookData.config;
const newConfig = {
...bookData.config,
lastUpdated: Date.now(),
updatedAt: Date.now(),
progress: [pageinfo.current, pageinfo.total] as [number, number],
location,
};
apps/readest-app/src/types/book.ts
+28 -7
View File
@@ -12,9 +12,13 @@ export interface Book {
author: string;
group?: string;
tags?: string[];
lastUpdated: number;
isRemoved?: boolean;
coverImageUrl?: string | null;
createdAt: number;
updatedAt: number;
deletedAt?: number;
lastUpdated?: number; // deprecated in favor of updatedAt
}
export interface PageInfo {
@@ -24,6 +28,7 @@ export interface PageInfo {
}
export interface BookNote {
bookHash?: string;
id: string;
type: BookNoteType;
cfi: string;
@@ -31,8 +36,10 @@ export interface BookNote {
style?: HighlightStyle;
color?: HighlightColor;
note: string;
created: number;
modified?: number;
createdAt: number;
updatedAt: number;
deletedAt?: number;
}
export interface BookLayout {
@@ -107,18 +114,32 @@ export interface BookSearchResult {
}
export interface BookConfig {
lastUpdated: number;
bookHash?: string;
progress?: [number, number];
location?: string;
booknotes?: BookNote[];
searchConfig?: BookSearchConfig;
searchConfig?: Partial<BookSearchConfig>;
viewSettings?: Partial<ViewSettings>;
lastSyncedAtConfig?: number;
lastSyncedAtNotes?: number;
updatedAt: number;
}
export interface BookDataRecord {
id: string;
book_hash: string;
user_id: string;
updated_at: number | null;
deleted_at: number | null;
}
export interface BooksGroup {
name: string;
books: Book[];
lastUpdated: number;
updatedAt: number;
}
export interface BookContent {
book: Book;
apps/readest-app/src/types/records.ts
+42
View File
@@ -0,0 +1,42 @@
export interface DBBook {
user_id: string;
book_hash: string;
format: string;
title: string;
author: string;
group?: string;
tags?: string;
created_at?: string;
updated_at?: string;
deleted_at?: string | null;
}
export interface DBBookConfig {
user_id: string;
book_hash: string;
location?: string;
progress?: string;
search_config?: string;
view_settings?: string;
created_at?: string;
updated_at?: string;
deleted_at?: string | null;
}
export interface DBBookNote {
user_id: string;
book_hash: string;
id: string;
type: string;
cfi: string;
text?: string;
style?: string;
color?: string;
note: string;
created_at?: string;
updated_at?: string;
deleted_at?: string | null;
}
apps/readest-app/src/types/settings.ts
+5
View File
@@ -18,6 +18,11 @@ export interface ReadSettings {
export interface SystemSettings {
version: number;
localBooksDir: string;
keepLogin: boolean;
lastSyncedAtBooks: number;
lastSyncedAtConfigs: number;
lastSyncedAtNotes: number;
globalReadSettings: ReadSettings;
globalViewSettings: ViewSettings;
apps/readest-app/src/types/view.ts
+52
View File
@@ -0,0 +1,52 @@
import { BookDoc } from '@/libs/document';
import { BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
export interface FoliateView extends HTMLElement {
open: (book: BookDoc) => Promise<void>;
close: () => void;
init: (options: { lastLocation: string }) => void;
goTo: (href: string) => void;
goToFraction: (fraction: number) => void;
prev: (distance: number) => void;
next: (distance: number) => void;
goLeft: () => void;
goRight: () => void;
getCFI: (index: number, range: Range) => string;
addAnnotation: (note: BookNote, remove?: boolean) => { index: number; label: string };
search: (config: BookSearchConfig) => AsyncGenerator<BookSearchResult | string, void, void>;
clearSearch: () => void;
select: (target: string | number | { fraction: number }) => void;
deselect: () => void;
history: {
canGoBack: boolean;
canGoForward: boolean;
back: () => void;
forward: () => void;
clear: () => void;
};
renderer: {
scrolled?: boolean;
viewSize: number;
setAttribute: (name: string, value: string | number) => void;
removeAttribute: (name: string) => void;
next: () => Promise<void>;
prev: () => Promise<void>;
goTo?: (params: { index: number; anchor: number }) => void;
setStyles?: (css: string) => void;
addEventListener: (type: string, listener: EventListener) => void;
removeEventListener: (type: string, listener: EventListener) => void;
};
}
export const wrappedFoliateView = (originalView: FoliateView): FoliateView => {
const originalAddAnnotation = originalView.addAnnotation.bind(originalView);
originalView.addAnnotation = (note: BookNote, remove = false) => {
// transform BookNote to foliate annotation
const annotation = {
value: note.cfi,
...note,
};
return originalAddAnnotation(annotation, remove);
};
return originalView;
};
apps/readest-app/src/utils/book.ts
+1 -1
View File
@@ -26,7 +26,7 @@ export const getBaseFilename = (filename: string) => {
return baseName;
};
export const INIT_BOOK_CONFIG: BookConfig = {
lastUpdated: 0,
updatedAt: 0,
};
interface LanguageMap {
apps/readest-app/src/utils/serializer.ts
+52
View File
@@ -0,0 +1,52 @@
import { BookConfig, BookSearchConfig, ViewSettings } from '@/types/book';
export const serializeConfig = (
config: BookConfig,
globalViewSettings: ViewSettings,
defaultSearchConfig: BookSearchConfig,
): string => {
config = JSON.parse(JSON.stringify(config));
const viewSettings = config.viewSettings as Partial<ViewSettings>;
const searchConfig = config.searchConfig as Partial<BookSearchConfig>;
config.viewSettings = Object.entries(viewSettings).reduce(
(acc: Partial<Record<keyof ViewSettings, unknown>>, [key, value]) => {
if (globalViewSettings[key as keyof ViewSettings] !== value) {
acc[key as keyof ViewSettings] = value;
}
return acc;
},
{} as Partial<Record<keyof ViewSettings, unknown>>,
) as Partial<ViewSettings>;
config.searchConfig = Object.entries(searchConfig).reduce(
(acc: Partial<Record<keyof BookSearchConfig, unknown>>, [key, value]) => {
if (defaultSearchConfig[key as keyof BookSearchConfig] !== value) {
acc[key as keyof BookSearchConfig] = value;
}
return acc;
},
{} as Partial<BookSearchConfig>,
) as Partial<BookSearchConfig>;
return JSON.stringify(config);
};
export const deserializeConfig = (
str: string,
globalViewSettings: ViewSettings,
defaultSearchConfig: BookSearchConfig,
): BookConfig => {
const config = JSON.parse(str) as BookConfig;
const { viewSettings, searchConfig } = config;
config.viewSettings = { ...globalViewSettings, ...viewSettings };
config.searchConfig = { ...defaultSearchConfig, ...searchConfig };
config.updatedAt ??= Date.now();
return config;
};
export const compressConfig = (
config: BookConfig,
globalViewSettings: ViewSettings,
defaultSearchConfig: BookSearchConfig,
): string => {
return JSON.parse(serializeConfig(config, globalViewSettings, defaultSearchConfig));
};
apps/readest-app/src/utils/supabase.ts
+12
View File
@@ -6,3 +6,15 @@ const supabaseAnonKey =
process.env['NEXT_PUBLIC_SUPABASE_ANON_KEY'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_ANON_KEY']!;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
export const createSupabaseClient = (accessToken?: string) => {
return createClient(supabaseUrl, supabaseAnonKey, {
global: {
headers: accessToken
? {
Authorization: `Bearer ${accessToken}`,
}
: {},
},
});
};
apps/readest-app/src/utils/transform.ts
+111
View File
@@ -0,0 +1,111 @@
import {
Book,
BookConfig,
BookFormat,
BookNote,
BookNoteType,
HighlightColor,
HighlightStyle,
} from '@/types/book';
import { DBBookConfig, DBBook, DBBookNote } from '@/types/records';
export const transformBookConfigToDB = (bookConfig: unknown, userId: string): DBBookConfig => {
const { bookHash, progress, location, searchConfig, viewSettings, updatedAt } =
bookConfig as BookConfig;
return {
user_id: userId,
book_hash: bookHash!,
location: location,
progress: progress && JSON.stringify(progress),
search_config: searchConfig && JSON.stringify(searchConfig),
view_settings: viewSettings && JSON.stringify(viewSettings),
updated_at: new Date(updatedAt).toISOString(),
};
};
export const transformBookConfigFromDB = (dbBookConfig: DBBookConfig): BookConfig => {
const { book_hash, progress, location, search_config, view_settings, updated_at } = dbBookConfig;
return {
bookHash: book_hash,
location,
progress: progress && JSON.parse(progress),
searchConfig: search_config && JSON.parse(search_config),
viewSettings: view_settings && JSON.parse(view_settings),
updatedAt: new Date(updated_at!).getTime(),
} as BookConfig;
};
export const transformBookToDB = (book: unknown, userId: string): DBBook => {
const { hash, format, title, author, group, tags, createdAt, updatedAt, deletedAt } =
book as Book;
return {
user_id: userId,
book_hash: hash,
format,
title,
author,
group,
tags: tags && JSON.stringify(tags),
created_at: new Date(createdAt).toISOString(),
updated_at: new Date(updatedAt).toISOString(),
deleted_at: deletedAt ? new Date(deletedAt).toISOString() : undefined,
};
};
export const transformBookFromDB = (dbBook: DBBook): Book => {
const { book_hash, format, title, author, group, tags, created_at, updated_at, deleted_at } =
dbBook;
return {
hash: book_hash,
format: format as BookFormat,
title,
author,
group,
tags: tags && JSON.parse(tags),
createdAt: new Date(created_at!).getTime(),
updatedAt: new Date(updated_at!).getTime(),
deletedAt: deleted_at ? new Date(deleted_at!).getTime() : undefined,
};
};
export const transformBookNoteToDB = (bookNote: unknown, userId: string): DBBookNote => {
const { bookHash, id, type, cfi, text, style, color, note, createdAt, updatedAt, deletedAt } =
bookNote as BookNote;
return {
user_id: userId,
book_hash: bookHash!,
id,
type,
cfi,
text,
style,
color,
note,
created_at: new Date(createdAt).toISOString(),
updated_at: new Date(updatedAt).toISOString(),
deleted_at: deletedAt ? new Date(deletedAt).toISOString() : undefined,
};
};
export const transformBookNoteFromDB = (dbBookNote: DBBookNote): BookNote => {
const { book_hash, id, type, cfi, text, style, color, note, created_at, updated_at, deleted_at } =
dbBookNote;
return {
bookHash: book_hash,
id,
type: type as BookNoteType,
cfi,
text,
style: style as HighlightStyle,
color: color as HighlightColor,
note,
createdAt: new Date(created_at!).getTime(),
updatedAt: new Date(updated_at!).getTime(),
deletedAt: deleted_at ? new Date(deleted_at!).getTime() : undefined,
};
};