feat: ajout de la navigation tactile dans le lecteur

This commit is contained in:
Julien Froidefond
2025-02-12 21:00:13 +01:00
parent 71e4662047
commit 750824ad1d

View File

@@ -281,9 +281,44 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
}; };
}, []); }, []);
const [touchStart, setTouchStart] = useState<number | null>(null);
const [touchEnd, setTouchEnd] = useState<number | null>(null);
// Seuil minimum de déplacement pour déclencher un swipe
const minSwipeDistance = 50;
const onTouchStart = (e: React.TouchEvent) => {
setTouchEnd(null);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: React.TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
if (isLeftSwipe && currentPage < pages.length) {
handleNextPage();
}
if (isRightSwipe && currentPage > 1) {
handlePreviousPage();
}
};
return ( return (
<div className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50"> <div className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50">
<div className="relative h-full flex flex-col items-center justify-center"> <div
className="relative h-full flex flex-col items-center justify-center"
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
{/* Contenu principal */} {/* Contenu principal */}
<div className="relative h-full w-full flex items-center justify-center"> <div className="relative h-full w-full flex items-center justify-center">
{/* Boutons en haut */} {/* Boutons en haut */}