refacto: Split reader

src/components/reader/hooks/useFullscreen.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+export const useFullscreen = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      if (document.fullscreenElement) {
+        document.exitFullscreen().catch(console.error);
+      }
+    };
+  }, []);
+
+  const toggleFullscreen = async (element: HTMLElement | null) => {
+    try {
+      if (isFullscreen) {
+        await document.exitFullscreen();
+      } else if (element) {
+        await element.requestFullscreen();
+      }
+    } catch (error) {
+      console.error("Erreur lors du changement de mode plein écran:", error);
+    }
+  };
+
+  return {
+    isFullscreen,
+    toggleFullscreen,
+  };
+};

src/components/reader/hooks/usePageUrls.ts

@@ -0,0 +1,75 @@
+import { useState, useEffect } from "react";
+
+interface UsePageUrlsProps {
+  currentPage: number;
+  isDoublePage: boolean;
+  shouldShowDoublePage: (page: number) => boolean;
+  getPageUrl: (page: number) => Promise<string>;
+  setIsLoading: (loading: boolean) => void;
+  setSecondPageLoading: (loading: boolean) => void;
+}
+
+export const usePageUrls = ({
+  currentPage,
+  isDoublePage,
+  shouldShowDoublePage,
+  getPageUrl,
+  setIsLoading,
+  setSecondPageLoading,
+}: UsePageUrlsProps) => {
+  const [currentPageUrl, setCurrentPageUrl] = useState<string>("");
+  const [nextPageUrl, setNextPageUrl] = useState<string>("");
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadPageUrls = async () => {
+      try {
+        const url = await getPageUrl(currentPage);
+        if (isMounted) {
+          setCurrentPageUrl(url);
+          setIsLoading(false);
+        }
+
+        if (isDoublePage && shouldShowDoublePage(currentPage)) {
+          const nextUrl = await getPageUrl(currentPage + 1);
+          if (isMounted) {
+            setNextPageUrl(nextUrl);
+            setSecondPageLoading(false);
+          }
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error(
+            `Erreur de chargement des URLs pour la page ${currentPage}:`,
+            error.message
+          );
+        }
+        if (isMounted) {
+          setIsLoading(false);
+          setSecondPageLoading(false);
+        }
+      }
+    };
+
+    setIsLoading(true);
+    setSecondPageLoading(true);
+    loadPageUrls();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [
+    currentPage,
+    isDoublePage,
+    shouldShowDoublePage,
+    getPageUrl,
+    setIsLoading,
+    setSecondPageLoading,
+  ]);
+
+  return {
+    currentPageUrl,
+    nextPageUrl,
+  };
+};

src/components/reader/hooks/usePreloadPages.ts

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+
+interface UsePreloadPagesProps {
+  currentPage: number;
+  totalPages: number;
+  isDoublePage: boolean;
+  shouldShowDoublePage: (page: number) => boolean;
+  preloadPage: (page: number) => Promise<void>;
+  cleanCache: (currentPage: number) => void;
+}
+
+export const usePreloadPages = ({
+  currentPage,
+  totalPages,
+  isDoublePage,
+  shouldShowDoublePage,
+  preloadPage,
+  cleanCache,
+}: UsePreloadPagesProps) => {
+  useEffect(() => {
+    let isMounted = true;
+
+    const preloadCurrentPages = async () => {
+      if (!isMounted) return;
+
+      await preloadPage(currentPage);
+
+      if (!isMounted) return;
+
+      if (isDoublePage && shouldShowDoublePage(currentPage)) {
+        await preloadPage(currentPage + 1);
+      }
+
+      if (!isMounted) return;
+
+      const pagesToPreload = [];
+
+      // Précharger les 4 pages suivantes
+      for (let i = 1; i <= 4 && currentPage + i <= totalPages; i++) {
+        pagesToPreload.push(currentPage + i);
+      }
+
+      // Précharger les 2 pages précédentes
+      for (let i = 1; i <= 2 && currentPage - i >= 1; i++) {
+        pagesToPreload.push(currentPage - i);
+      }
+
+      for (const page of pagesToPreload) {
+        if (!isMounted) break;
+        await preloadPage(page);
+      }
+    };
+
+    preloadCurrentPages();
+    cleanCache(currentPage);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [currentPage, isDoublePage, shouldShowDoublePage, preloadPage, cleanCache, totalPages]);
+};