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

refactor: polish reader chrome and visual immersion

Browse Source
This commit is contained in:
Julien Froidefond
2026-02-28 21:15:03 +01:00
parent 6ce8a6e38d
commit 25ede2532e
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/reader/components/ControlButtons.tsx
View File

@@ -45,7 +45,7 @@ export const ControlButtons = ({
{/* Boutons de contrôle */}
<div
className={cn(
"absolute top-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 transition-all duration-300 p-1.5 rounded-full bg-background/70 backdrop-blur-md",
"absolute left-1/2 top-4 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-border/60 bg-background/55 p-1.5 shadow-[0_8px_28px_-18px_rgba(0,0,0,0.75)] backdrop-blur-xl transition-all duration-300",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
onClick={(e) => {
@@ -178,7 +178,7 @@ export const ControlButtons = ({
tooltip={t("reader.controls.previousPage")}
iconClassName="h-8 w-8"
className={cn(
"absolute top-1/2 -translate-y-1/2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/60 bg-background/55 shadow-[0_8px_24px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl transition-all duration-300 hover:bg-background/70",
direction === "rtl" ? "right-4" : "left-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
@@ -198,7 +198,7 @@ export const ControlButtons = ({
tooltip={t("reader.controls.nextPage")}
iconClassName="h-8 w-8"
className={cn(
"absolute top-1/2 -translate-y-1/2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/60 bg-background/55 shadow-[0_8px_24px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl transition-all duration-300 hover:bg-background/70",
direction === "rtl" ? "left-4" : "right-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}

8
src/components/reader/components/NavigationBar.tsx
View File

@@ -55,7 +55,7 @@ export const NavigationBar = ({
return (
<div
className={cn(
"absolute bottom-0 left-0 right-0 bg-background/70 backdrop-blur-md border-t border-border/40 transition-all duration-300 ease-in-out z-30",
"absolute bottom-0 left-0 right-0 z-30 border-t border-border/60 bg-background/60 backdrop-blur-xl transition-all duration-300 ease-in-out",
showThumbnails ? "h-52 opacity-100" : "h-0 opacity-0"
)}
>
@@ -63,7 +63,7 @@ export const NavigationBar = ({
<>
<div
id="thumbnails-container"
className="h-full overflow-x-auto flex items-center gap-2 px-4 scroll-smooth snap-x snap-mandatory"
className="flex h-full snap-x snap-mandatory items-center gap-2 overflow-x-auto px-4 scroll-smooth"
onTouchStart={(e) => e.stopPropagation()}
onTouchMove={(e) => e.stopPropagation()}
onTouchEnd={(e) => e.stopPropagation()}
@@ -89,8 +89,8 @@ export const NavigationBar = ({
<div className="w-[calc(50vw-18rem)] flex-shrink-0" />
</div>
{showControls && (
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/70 backdrop-blur-md text-sm">
{showControls && (
<div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full rounded-full border border-border/60 bg-background/60 px-4 py-2 text-sm shadow-[0_8px_24px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl">
Page {currentPage} / {pages.length}
</div>
)}

8
src/components/reader/components/PageDisplay.tsx
View File

@@ -38,8 +38,8 @@ export function PageDisplay({
}, [currentPage, isDoublePage]);
return (
<div className="relative flex-1 flex items-center justify-center overflow-hidden w-full">
<div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center gap-1">
<div className="relative flex w-full flex-1 items-center justify-center overflow-hidden">
<div className="relative flex h-[calc(100vh-2.5rem)] w-full items-center justify-center gap-1 px-2 sm:px-4">
{/* Page 1 */}
<div
className={cn(
@@ -69,7 +69,7 @@ export function PageDisplay({
src={imageBlobUrls[currentPage] || getPageUrl(currentPage)}
alt={`Page ${currentPage}`}
className={cn(
"max-h-full max-w-full object-contain transition-opacity cursor-pointer",
"max-h-full max-w-full cursor-pointer rounded-md object-contain transition-opacity",
isLoading ? "opacity-0" : "opacity-100"
)}
loading="eager"
@@ -109,7 +109,7 @@ export function PageDisplay({
src={imageBlobUrls[currentPage + 1] || getPageUrl(currentPage + 1)}
alt={`Page ${currentPage + 1}`}
className={cn(
"max-h-full max-w-full object-contain transition-opacity cursor-pointer",
"max-h-full max-w-full cursor-pointer rounded-md object-contain transition-opacity",
secondPageLoading ? "opacity-0" : "opacity-100"
)}
loading="eager"

2
src/components/reader/components/ReaderContainer.tsx
View File

@@ -18,7 +18,7 @@ export function ReaderContainer({ children, onContainerClick }: ReaderContainerP
return (
<div
ref={readerRef}
className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
className="reader-zoom-enabled fixed inset-0 z-50 overflow-hidden bg-[radial-gradient(90%_70%_at_50%_8%,hsl(var(--primary)/0.1),transparent_50%),linear-gradient(to_bottom,hsl(var(--background)/0.97),hsl(var(--background)/0.93)_40%,hsl(var(--background)))] backdrop-blur-sm"
onClick={handleContainerClick}
>
<div className="relative h-full flex flex-col items-center justify-center">{children}</div>