julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(reader): safari page at left

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-13 12:56:41 +01:00
parent b9d7ebc2ae
commit 358aad06a1
1 changed files with 18 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/reader/BookReader.tsx
View File

@@ -423,7 +423,6 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
/> />
</button> </button>
</div> </div>
{/* Bouton précédent */} {/* Bouton précédent */}
{currentPage > 1 && ( {currentPage > 1 && (
<button <button
@@ -434,53 +433,32 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
<ChevronLeft className="h-8 w-8" /> <ChevronLeft className="h-8 w-8" />
</button> </button>
)} )}
{/* Pages */} {/* Pages */}
<div className="relative h-full max-h-full w-auto max-w-full p-4 flex gap-2 z-10"> <div className="relative flex-1 flex items-center justify-center overflow-hidden p-1">
<div className="relative w-full h-full flex items-center justify-center">
{/* Page courante */} {/* Page courante */}
<div className="relative h-full w-auto"> <div className="relative max-h-[calc(100vh-2rem)] flex items-center justify-center">
{isLoading && ( <img
<div className="absolute inset-0 flex items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin" />
</div>
)}
{!imageError ? (
<Image
src={getPageUrl(currentPage)} src={getPageUrl(currentPage)}
alt={`Page ${currentPage}`} alt={`Page ${currentPage}`}
className="h-full w-auto object-contain" className="max-h-[calc(100vh-2rem)] w-auto object-contain"
width={800} onLoad={() => handleThumbnailLoad(currentPage)}
height={1200}
priority
onLoad={() => setIsLoading(false)}
onError={() => {
setIsLoading(false);
setImageError(true);
}}
/> />
) : (
<div className="h-full w-96 flex items-center justify-center bg-muted rounded-lg">
<ImageOff className="h-12 w-12" />
</div>
)}
</div> </div>
{/* Deuxième page en mode double page */} {/* Deuxième page en mode double page */}
{shouldShowDoublePage(currentPage) && ( {isDoublePage && shouldShowDoublePage(currentPage) && (
<div className="relative h-full w-auto"> <div className="relative max-h-[calc(100vh-2rem)] flex items-center justify-center">
<Image <img
src={getPageUrl(currentPage + 1)} src={getPageUrl(currentPage + 1)}
alt={`Page ${currentPage + 1}`} alt={`Page ${currentPage + 1}`}
className="h-full w-auto object-contain" className="max-h-[calc(100vh-2rem)] w-auto object-contain"
width={800} onLoad={() => handleThumbnailLoad(currentPage + 1)}
height={1200}
priority
onError={() => setImageError(true)}
/> />
</div> </div>
)} )}
</div> </div>
</div>
{/* Bouton suivant */} {/* Bouton suivant */}
{currentPage < pages.length && ( {currentPage < pages.length && (
<button <button
@@ -491,7 +469,6 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
<ChevronRight className="h-8 w-8" /> <ChevronRight className="h-8 w-8" />
</button> </button>
)} )}
{/* Bouton fermer */} {/* Bouton fermer */}
{onClose && ( {onClose && (
<button <button