feat(reader): add document mode to the PDF viewer, overhaul PDF viewer, add different modes to CBX viewer#306
Conversation
…r, add different modes to CBX viewer
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (14)
📝 WalkthroughWalkthroughThis PR adds comprehensive multimedia viewer enhancements across the application. Backend changes introduce dark theme support for PDF viewers, a book content replacement endpoint, and CBX page dimension retrieval. Frontend changes include a canvas-based CBX renderer with brightness control and book-emulation mode, PDF viewer dark theme and fullscreen capabilities with an EmbedPDF document mode, ebook reader immersive mode, and a wake-lock service. Database migrations update PDF preferences schema and change spread-mode defaults. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CBXReader as CBX Reader Component
participant DimensionSvc as Page Dimension Service
participant Backend as Backend API
participant Canvas as Canvas Renderer
User->>CBXReader: Load book
par Load Data
CBXReader->>Backend: GET /api/v1/pages
Backend-->>CBXReader: Image URLs
and
CBXReader->>DimensionSvc: getPageDimensions(bookId)
DimensionSvc->>Backend: GET /api/v1/cbx/{bookId}/page-dimensions
Backend-->>DimensionSvc: CbxPageDimension[]
DimensionSvc->>DimensionSvc: Cache & compute doublePairs
DimensionSvc-->>CBXReader: pageDimensions + doublePairs
end
CBXReader->>CBXReader: updateCurrentImageUrls() with pageDimensions
CBXReader->>CBXReader: Determine if wide page (use pageDimensions[i].wide)
alt Canvas Rendering Enabled
CBXReader->>Canvas: Render with splitState
Canvas->>Canvas: Load image with CORS
Canvas->>Canvas: Draw full or split half
Canvas-->>CBXReader: Rendered canvas
else Standard Image Rendering
CBXReader->>CBXReader: Render <img> list
end
sequenceDiagram
participant User
participant PDFReader as PDF Reader Component
participant EmbedPDF as EmbedPDF iFrame
participant Backend as Backend API
User->>PDFReader: Load PDF
PDFReader->>PDFReader: Check viewerMode (book/document)
alt Book Mode
PDFReader->>Backend: GET PDF content
Backend-->>PDFReader: PDF blob
PDFReader->>PDFReader: Load in ngx-extended-pdf-viewer
PDFReader->>PDFReader: Apply isDarkTheme setting
else Document Mode
PDFReader->>EmbedPDF: Create iframe
PDFReader->>EmbedPDF: postMessage({type: 'init', pdf, theme})
EmbedPDF->>EmbedPDF: Load WASM, initialize viewer
EmbedPDF-->>PDFReader: postMessage({type: 'ready'})
User->>PDFReader: Toggle dark theme
PDFReader->>EmbedPDF: postMessage({type: 'setTheme'})
User->>PDFReader: Save/Close
PDFReader->>EmbedPDF: postMessage({type: 'save'})
EmbedPDF-->>PDFReader: postMessage({type: 'saveResponse', buffer})
end
PDFReader->>Backend: Persist isDarkTheme setting
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes The PR involves substantial heterogeneous changes across multiple reader components (CBX, PDF, EBook) with significant new logic: canvas-based rendering with split-state management, dimension-aware page pairing, EmbedPDF integration with iframe communication, immersive mode with visibility management, and extended settings persistence. While individual file changes follow consistent patterns, the cross-component interactions, new services, and complex state management in multiple readers demand careful reasoning for each subsystem. Poem
✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Comment |
…ode, and click-to-paginate options
Description
Linked Issue: Fixes #
Changes
This pull request introduces several enhancements and fixes to both the backend and frontend of the Booklore project, focusing on improved PDF/CBX handling, user settings, and support for new features in the document viewer. Notably, it adds support for dark theme preferences in PDF viewing, allows book content replacement via API, exposes CBX page dimensions, and updates default viewer settings. There are also infrastructure updates for WASM-based PDF rendering and some frontend dependency/configuration changes.
Backend Enhancements:
PDF and CBX Viewer Improvements
isDarkThemeto PDF viewer preferences (including database migration, DTO, entity, and service layer updates) to support dark mode in the PDF viewer.CbxPageDimension.Book Content Management
Viewer Settings and Defaults
'odd'to'off'(single page view), including a migration to update user and per-book settings.CbxPageScrollModeenum to include aLONG_STRIPmode.Security and WASM Support
Cross-Origin-Opener-PolicyandCross-Origin-Embedder-Policyheaders, required for WASM-based PDF rendering (pdfium).Frontend and Infrastructure:
PDFium and WASM Integration
@embedpdf/pdfiumand@embedpdf/snippetas dependencies, and updated Angular build configuration to copy their assets and set required cross-origin headers during development.User Settings and Filters
BookFilterComponentto use a reactive effect for user settings, simplifying the subscription logic.PdfViewerSettinginterface to include the newisDarkThemeproperty.Yarn and Package Management
.yarnrc.ymlto configure node linker and caching strategy for the frontend project.Most important changes:
PDF/CBX Viewer Features:
Book Content API:
Viewer Defaults and Enums:
'odd'to'off'(single page view) and migrated existing settings; addedLONG_STRIPto CBX scroll modesWASM/PDFium Support:
Frontend Refactors:
BookFilterComponentfor improved reactivity and maintainability.Summary by CodeRabbit
Release Notes