feat: ajout de la navigation tactile dans le lecteur
This commit is contained in:
@@ -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 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user