fix: respect RTL direction for reader arrow buttons and swipe navigation
Arrow buttons now swap next/previous in RTL mode. Swipe navigation receives isRTL from parent state instead of creating its own independent copy, so toggling direction takes effect immediately without reload. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -76,6 +76,7 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
|||||||
onPreviousPage: handlePreviousPage,
|
onPreviousPage: handlePreviousPage,
|
||||||
onNextPage: handleNextPage,
|
onNextPage: handleNextPage,
|
||||||
pswpRef,
|
pswpRef,
|
||||||
|
isRTL,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
|
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
|
||||||
|
|||||||
@@ -173,7 +173,7 @@ export const ControlButtons = ({
|
|||||||
icon={ChevronLeft}
|
icon={ChevronLeft}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onPreviousPage();
|
direction === "rtl" ? onNextPage() : onPreviousPage();
|
||||||
}}
|
}}
|
||||||
tooltip={t("reader.controls.previousPage")}
|
tooltip={t("reader.controls.previousPage")}
|
||||||
iconClassName="h-8 w-8"
|
iconClassName="h-8 w-8"
|
||||||
@@ -193,7 +193,7 @@ export const ControlButtons = ({
|
|||||||
icon={ChevronRight}
|
icon={ChevronRight}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onNextPage();
|
direction === "rtl" ? onPreviousPage() : onNextPage();
|
||||||
}}
|
}}
|
||||||
tooltip={t("reader.controls.nextPage")}
|
tooltip={t("reader.controls.nextPage")}
|
||||||
iconClassName="h-8 w-8"
|
iconClassName="h-8 w-8"
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
import { useCallback, useRef, useEffect } from "react";
|
import { useCallback, useRef, useEffect } from "react";
|
||||||
import { useReadingDirection } from "./useReadingDirection";
|
|
||||||
|
|
||||||
interface UseTouchNavigationProps {
|
interface UseTouchNavigationProps {
|
||||||
onPreviousPage: () => void;
|
onPreviousPage: () => void;
|
||||||
onNextPage: () => void;
|
onNextPage: () => void;
|
||||||
pswpRef: React.MutableRefObject<unknown>;
|
pswpRef: React.MutableRefObject<unknown>;
|
||||||
|
isRTL: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTouchNavigation({
|
export function useTouchNavigation({
|
||||||
onPreviousPage,
|
onPreviousPage,
|
||||||
onNextPage,
|
onNextPage,
|
||||||
pswpRef,
|
pswpRef,
|
||||||
|
isRTL,
|
||||||
}: UseTouchNavigationProps) {
|
}: UseTouchNavigationProps) {
|
||||||
const { isRTL } = useReadingDirection();
|
|
||||||
const touchStartXRef = useRef<number | null>(null);
|
const touchStartXRef = useRef<number | null>(null);
|
||||||
const touchStartYRef = useRef<number | null>(null);
|
const touchStartYRef = useRef<number | null>(null);
|
||||||
const isPinchingRef = useRef(false);
|
const isPinchingRef = useRef(false);
|
||||||
|
|||||||
Reference in New Issue
Block a user