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

feat(reader): right to left read

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-21 22:41:11 +01:00
parent d90b120649
commit c62cff07d2
5 changed files with 143 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { NavigationBar } from "./components/NavigationBar";
import { ControlButtons } from "./components/ControlButtons";
import { ImageLoader } from "@/components/ui/image-loader";
import { cn } from "@/lib/utils";
import { useReadingDirection } from "./hooks/useReadingDirection";
export function BookReader({ book, pages, onClose }: BookReaderProps) {
const [isDoublePage, setIsDoublePage] = useState(false);
@@ -17,6 +18,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
const [isFullscreen, setIsFullscreen] = useState(false);
const readerRef = useRef<HTMLDivElement>(null);
const isLandscape = useOrientation();
const { direction, toggleDirection, isRTL } = useReadingDirection();
const {
currentPage,
@@ -33,6 +35,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
pages,
isDoublePage,
onClose,
direction,
});
const { preloadPage, getPageUrl, cleanCache } = usePageCache({
@@ -133,7 +136,15 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
return () => {
isMounted = false;
};
}, [currentPage, isDoublePage, shouldShowDoublePage, preloadPage, cleanCache, pages.length]);
}, [
currentPage,
isDoublePage,
shouldShowDoublePage,
preloadPage,
cleanCache,
pages.length,
isRTL,
]);
// Effet pour gérer le mode double page automatiquement en paysage
useEffect(() => {
@@ -200,6 +211,8 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
console.error("Erreur lors du changement de mode plein écran:", error);
}
}}
direction={direction}
onToggleDirection={toggleDirection}
/>
{/* Pages */}
@@ -216,7 +229,8 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
<div
className={cn(
"relative h-full flex items-center",
isDoublePage ? "w-1/2 justify-end" : "w-full justify-center"
isDoublePage ? "w-1/2 justify-end" : "w-full justify-center",
direction === "rtl" && isDoublePage && "justify-start"
)}
>
<ImageLoader isLoading={isLoading} />
@@ -235,7 +249,12 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
{/* Deuxième page en mode double page */}
{isDoublePage && shouldShowDoublePage(currentPage) && (
<div className="relative h-full w-1/2 flex items-center justify-start">
<div
className={cn(
"relative h-full w-1/2 flex items-center",
direction === "rtl" ? "justify-end" : "justify-start"
)}
>
<ImageLoader isLoading={secondPageLoading} />
{nextPageUrl && (
<img
@@ -252,8 +271,8 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
)}
</div>
</div>
</div>
{/* Barre de navigation */}
<NavigationBar
currentPage={currentPage}
pages={pages}
@@ -263,5 +282,6 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
/>
</div>
</div>
</div>
);
}

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

@@ -7,6 +7,7 @@ import {
LayoutTemplate,
Maximize2,
Minimize2,
ArrowLeftRight,
} from "lucide-react";
import { cn } from "@/lib/utils";
@@ -22,6 +23,8 @@ export const ControlButtons = ({
onToggleDoublePage,
isFullscreen,
onToggleFullscreen,
direction,
onToggleDirection,
}: ControlButtonsProps) => {
return (
<>
@@ -52,6 +55,20 @@ export const ControlButtons = ({
<SplitSquareVertical className="h-6 w-6" />
)}
</button>
<button
onClick={(e) => {
e.stopPropagation();
onToggleDirection();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
aria-label={`Changer le sens de lecture (actuellement de ${
direction === "ltr" ? "gauche à droite" : "droite à gauche"
})`}
>
<ArrowLeftRight
className={cn("h-6 w-6 transition-transform", direction === "rtl" && "rotate-180")}
/>
</button>
<button
onClick={(e) => {
e.stopPropagation();
@@ -89,7 +106,8 @@ export const ControlButtons = ({
onPreviousPage();
}}
className={cn(
"absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
direction === "rtl" ? "right-4" : "left-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Page précédente"
@@ -106,7 +124,8 @@ export const ControlButtons = ({
onNextPage();
}}
className={cn(
"absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
direction === "rtl" ? "left-4" : "right-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Page suivante"

76
src/components/reader/hooks/usePageNavigation.ts
View File

@@ -6,6 +6,7 @@ interface UsePageNavigationProps {
pages: number[];
isDoublePage: boolean;
onClose?: () => void;
direction: "ltr" | "rtl";
}
export const usePageNavigation = ({
@@ -13,6 +14,7 @@ export const usePageNavigation = ({
pages,
isDoublePage,
onClose,
direction,
}: UsePageNavigationProps) => {
const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
const [isLoading, setIsLoading] = useState(true);
@@ -21,6 +23,7 @@ export const usePageNavigation = ({
const touchStartXRef = useRef<number | null>(null);
const touchStartYRef = useRef<number | null>(null);
const currentPageRef = useRef(currentPage);
const isRTL = direction === "rtl";
useEffect(() => {
currentPageRef.current = currentPage;
@@ -74,32 +77,40 @@ export const usePageNavigation = ({
const navigateToPage = useCallback(
(page: number) => {
// if (page >= 1 && page <= pages.length) {
setCurrentPage(page);
setIsLoading(true);
setSecondPageLoading(true);
debouncedSyncReadProgress(page);
// }
},
[debouncedSyncReadProgress]
);
const handlePreviousPage = useCallback(() => {
if (currentPage > 1) {
const newPage = isDoublePage && currentPage > 2 ? currentPage - 2 : currentPage - 1;
navigateToPage(newPage);
if (isDoublePage && shouldShowDoublePage(currentPage - 2)) {
navigateToPage(Math.max(1, currentPage - 2));
} else {
navigateToPage(Math.max(1, currentPage - 1));
}
}, [currentPage, isDoublePage, navigateToPage]);
}, [currentPage, isDoublePage, navigateToPage, shouldShowDoublePage]);
const handleNextPage = useCallback(() => {
if (currentPage < pages.length) {
const newPage = isDoublePage ? Math.min(currentPage + 2, pages.length) : currentPage + 1;
navigateToPage(newPage);
if (isDoublePage && shouldShowDoublePage(currentPage)) {
navigateToPage(Math.min(pages.length, currentPage + 2));
} else {
navigateToPage(Math.min(pages.length, currentPage + 1));
}
}, [currentPage, pages.length, isDoublePage, navigateToPage]);
}, [currentPage, isDoublePage, navigateToPage, pages.length, shouldShowDoublePage]);
const handleTouchStart = useCallback((event: TouchEvent) => {
const handleTouchStart = useCallback(
(event: TouchEvent) => {
touchStartXRef.current = event.touches[0].clientX;
touchStartYRef.current = event.touches[0].clientY;
}, []);
currentPageRef.current = currentPage;
},
[currentPage]
);
const handleTouchEnd = useCallback(
(event: TouchEvent) => {
@@ -108,23 +119,35 @@ export const usePageNavigation = ({
const touchEndX = event.changedTouches[0].clientX;
const touchEndY = event.changedTouches[0].clientY;
const deltaX = touchEndX - touchStartXRef.current;
const deltaY = Math.abs(touchEndY - touchStartYRef.current);
const minSwipeDistance = 50;
const deltaY = touchEndY - touchStartYRef.current;
if (deltaY > Math.abs(deltaX)) return;
// Si le déplacement vertical est plus important que le déplacement horizontal,
// on ne fait rien (pour éviter de confondre avec un scroll)
if (Math.abs(deltaY) > Math.abs(deltaX)) return;
if (Math.abs(deltaX) > minSwipeDistance) {
// On vérifie si le déplacement est suffisant pour changer de page
if (Math.abs(deltaX) > 50) {
if (deltaX > 0) {
// Swipe vers la droite
if (isRTL) {
handleNextPage();
} else {
handlePreviousPage();
}
} else {
// Swipe vers la gauche
if (isRTL) {
handlePreviousPage();
} else {
handleNextPage();
}
}
}
touchStartXRef.current = null;
touchStartYRef.current = null;
},
[handlePreviousPage, handleNextPage]
[handleNextPage, handlePreviousPage, isRTL]
);
useEffect(() => {
@@ -133,12 +156,23 @@ export const usePageNavigation = ({
}, [isDoublePage]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") {
handlePreviousPage();
} else if (event.key === "ArrowRight") {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "ArrowLeft") {
e.preventDefault();
if (isRTL) {
handleNextPage();
} else if (event.key === "Escape" && onClose) {
} else {
handlePreviousPage();
}
} else if (e.key === "ArrowRight") {
e.preventDefault();
if (isRTL) {
handlePreviousPage();
} else {
handleNextPage();
}
} else if (e.key === "Escape" && onClose) {
e.preventDefault();
onClose();
}
};
@@ -152,7 +186,7 @@ export const usePageNavigation = ({
window.removeEventListener("touchstart", handleTouchStart);
window.removeEventListener("touchend", handleTouchEnd);
};
}, [handlePreviousPage, handleNextPage, handleTouchStart, handleTouchEnd, onClose]);
}, [handleNextPage, handlePreviousPage, handleTouchStart, handleTouchEnd, onClose, isRTL]);
useEffect(() => {
return () => {

28
src/components/reader/hooks/useReadingDirection.ts Normal file
View File

@@ -0,0 +1,28 @@
import { useState, useEffect } from "react";
type ReadingDirection = "ltr" | "rtl";
export const useReadingDirection = () => {
const [direction, setDirection] = useState<ReadingDirection>(() => {
if (typeof window !== "undefined") {
const savedDirection = localStorage.getItem("reading-direction") as ReadingDirection;
return savedDirection === "rtl" ? "rtl" : "ltr";
}
return "ltr";
});
useEffect(() => {
localStorage.setItem("reading-direction", direction);
}, [direction]);
const toggleDirection = () => {
setDirection((prev) => (prev === "ltr" ? "rtl" : "ltr"));
};
return {
direction,
setDirection,
toggleDirection,
isRTL: direction === "rtl",
};
};

3
src/components/reader/types.ts
View File

@@ -45,6 +45,8 @@ export interface ControlButtonsProps {
onToggleDoublePage: () => void;
isFullscreen: boolean;
onToggleFullscreen: () => void;
direction: "ltr" | "rtl";
onToggleDirection: () => void;
}
export interface UsePageNavigationProps {
@@ -52,4 +54,5 @@ export interface UsePageNavigationProps {
pages: number[];
isDoublePage: boolean;
onClose?: () => void;
direction: "ltr" | "rtl";
}