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

feat: enable zoom functionality in PhotoswipeReader and adjust global styles to manage pinch-zoom behavior

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-18 21:35:16 +02:00
parent 13626d56c2
commit 0c0456aade
3 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout.tsx
View File

@@ -92,7 +92,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
<head> <head>
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" content="width=device-width, initial-scale=1, viewport-fit=cover"
/> />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -145,7 +145,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
/> />
</head> </head>
<body <body
className={cn("min-h-screen bg-background font-sans antialiased h-full", inter.className)} className={cn("min-h-screen bg-background font-sans antialiased h-full no-pinch-zoom", inter.className)}
> >
<AuthProvider> <AuthProvider>
<I18nProvider locale={locale}> <I18nProvider locale={locale}>

11
src/components/reader/PhotoswipeReader.tsx
View File

@@ -46,6 +46,15 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
currentPageRef.current = currentPage; currentPageRef.current = currentPage;
}, [currentPage]); }, [currentPage]);
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
useEffect(() => {
document.body.classList.remove('no-pinch-zoom');
return () => {
document.body.classList.add('no-pinch-zoom');
};
}, []);
// Auto double page en paysage // Auto double page en paysage
useEffect(() => { useEffect(() => {
setIsDoublePage(isLandscape); setIsDoublePage(isLandscape);
@@ -393,7 +402,7 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
return ( return (
<div <div
ref={readerRef} ref={readerRef}
className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden" className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
onClick={() => setShowControls(!showControls)} onClick={() => setShowControls(!showControls)}
> >
<div className="relative h-full flex flex-col items-center justify-center"> <div className="relative h-full flex flex-col items-center justify-center">

13
src/styles/globals.css
View File

@@ -7,6 +7,12 @@ body {
overscroll-behavior: none; overscroll-behavior: none;
} }
/* Bloque le zoom partout sauf reader */
body.no-pinch-zoom,
body.no-pinch-zoom * {
touch-action: pan-x pan-y;
}
/* Ajout des règles pour gérer le safe-area-inset sur iOS /* Ajout des règles pour gérer le safe-area-inset sur iOS
@supports (padding-top: env(safe-area-inset-top)) { @supports (padding-top: env(safe-area-inset-top)) {
body { body {
@@ -92,6 +98,13 @@ body {
body { body {
@apply text-foreground; @apply text-foreground;
} }
/* Empêche le zoom automatique iOS sur les inputs */
input,
textarea,
select {
font-size: 16px;
}
} }
@layer utilities { @layer utilities {