diff --git a/src/components/reader/BookReader.tsx b/src/components/reader/BookReader.tsx index 18f708d..7ec0724 100644 --- a/src/components/reader/BookReader.tsx +++ b/src/components/reader/BookReader.tsx @@ -4,7 +4,7 @@ import { BookReaderProps } from "./types"; import { useOrientation } from "./hooks/useOrientation"; import { usePageNavigation } from "./hooks/usePageNavigation"; import { usePageCache } from "./hooks/usePageCache"; -import { useState, useEffect, useCallback } from "react"; +import { useState, useEffect, useCallback, useRef } from "react"; import { NavigationBar } from "./components/NavigationBar"; import { ControlButtons } from "./components/ControlButtons"; import { ImageLoader } from "@/components/ui/image-loader"; @@ -13,6 +13,8 @@ import { cn } from "@/lib/utils"; export function BookReader({ book, pages, onClose }: BookReaderProps) { const [isDoublePage, setIsDoublePage] = useState(false); const [showControls, setShowControls] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + const readerRef = useRef(null); const isLandscape = useOrientation(); const { @@ -138,6 +140,34 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) { setIsDoublePage(isLandscape); }, [isLandscape]); + // Effet pour gérer le fullscreen + useEffect(() => { + const enterFullscreen = async () => { + try { + if (readerRef.current && !isFullscreen) { + await readerRef.current.requestFullscreen(); + setIsFullscreen(true); + } + } catch (error) { + console.error("Erreur lors du passage en plein écran:", error); + } + }; + + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement); + }; + + document.addEventListener("fullscreenchange", handleFullscreenChange); + enterFullscreen(); + + return () => { + document.removeEventListener("fullscreenchange", handleFullscreenChange); + if (document.fullscreenElement) { + document.exitFullscreen().catch(console.error); + } + }; + }, []); + const handleThumbnailLoad = useCallback( (pageNumber: number) => { if (pageNumber === currentPage) { @@ -150,7 +180,10 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) { ); return ( -
+
setShowControls(!showControls)} @@ -167,6 +200,18 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) { totalPages={pages.length} isDoublePage={isDoublePage} onToggleDoublePage={() => setIsDoublePage(!isDoublePage)} + isFullscreen={isFullscreen} + onToggleFullscreen={async () => { + try { + if (isFullscreen) { + await document.exitFullscreen(); + } else if (readerRef.current) { + await readerRef.current.requestFullscreen(); + } + } catch (error) { + console.error("Erreur lors du changement de mode plein écran:", error); + } + }} /> {/* Pages */} @@ -175,8 +220,8 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) { {/* Page courante */}
diff --git a/src/components/reader/components/ControlButtons.tsx b/src/components/reader/components/ControlButtons.tsx index b3d552d..513e976 100644 --- a/src/components/reader/components/ControlButtons.tsx +++ b/src/components/reader/components/ControlButtons.tsx @@ -1,6 +1,14 @@ import { ControlButtonsProps } from "../types"; +import { + ChevronLeft, + ChevronRight, + X, + SplitSquareVertical, + LayoutTemplate, + Maximize2, + Minimize2, +} from "lucide-react"; import { cn } from "@/lib/utils"; -import { ChevronLeft, ChevronRight, X, SplitSquareVertical, LayoutTemplate } from "lucide-react"; export const ControlButtons = ({ showControls, @@ -12,13 +20,15 @@ export const ControlButtons = ({ totalPages, isDoublePage, onToggleDoublePage, + isFullscreen, + onToggleFullscreen, }: ControlButtonsProps) => { return ( <> {/* Bouton mode double page */}
@@ -38,6 +48,16 @@ export const ControlButtons = ({ )} +
{/* Bouton fermer */} diff --git a/src/components/reader/types.ts b/src/components/reader/types.ts index 6c82873..cdd4d8c 100644 --- a/src/components/reader/types.ts +++ b/src/components/reader/types.ts @@ -43,6 +43,8 @@ export interface ControlButtonsProps { totalPages: number; isDoublePage: boolean; onToggleDoublePage: () => void; + isFullscreen: boolean; + onToggleFullscreen: () => void; } export interface UsePageNavigationProps {