reacto(bookreader): split and correct bug in thumbnails

src/components/reader/hooks/useOrientation.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+
+export const useOrientation = () => {
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  useEffect(() => {
+    const checkOrientation = () => {
+      setIsLandscape(window.innerWidth > window.innerHeight);
+    };
+
+    checkOrientation();
+    window.addEventListener("resize", checkOrientation);
+
+    return () => {
+      window.removeEventListener("resize", checkOrientation);
+    };
+  }, []);
+
+  return isLandscape;
+};

src/components/reader/hooks/usePageCache.ts

@@ -0,0 +1,97 @@
+import { useCallback, useRef } from "react";
+import { PageCache } from "../types";
+import { KomgaBook } from "@/types/komga";
+
+interface UsePageCacheProps {
+  book: KomgaBook;
+  pages: number[];
+}
+
+export const usePageCache = ({ book, pages }: UsePageCacheProps) => {
+  const pageCache = useRef<PageCache>({});
+
+  const preloadPage = useCallback(
+    async (pageNumber: number) => {
+      if (pageNumber > pages.length || pageNumber < 1) return;
+
+      if (pageCache.current[pageNumber]?.url) return;
+
+      if (pageCache.current[pageNumber]?.loading) {
+        await pageCache.current[pageNumber].loading;
+        return;
+      }
+
+      let resolveLoading: () => void;
+      const loadingPromise = new Promise<void>((resolve) => {
+        resolveLoading = resolve;
+      });
+
+      pageCache.current[pageNumber] = {
+        ...pageCache.current[pageNumber],
+        loading: loadingPromise,
+      };
+
+      try {
+        const response = await fetch(`/api/komga/books/${book.id}/pages/${pageNumber}`);
+        const blob = await response.blob();
+        const url = URL.createObjectURL(blob);
+
+        pageCache.current[pageNumber] = {
+          blob,
+          url,
+          timestamp: Date.now(),
+        };
+
+        resolveLoading!();
+      } catch (error) {
+        console.error(`Erreur lors du préchargement de la page ${pageNumber}:`, error);
+        delete pageCache.current[pageNumber];
+        resolveLoading!();
+      }
+    },
+    [book.id, pages.length]
+  );
+
+  const getPageUrl = useCallback(
+    async (pageNumber: number) => {
+      if (pageCache.current[pageNumber]?.url) {
+        return pageCache.current[pageNumber].url;
+      }
+
+      if (pageCache.current[pageNumber]?.loading) {
+        await pageCache.current[pageNumber].loading;
+        return pageCache.current[pageNumber].url;
+      }
+
+      await preloadPage(pageNumber);
+      return (
+        pageCache.current[pageNumber]?.url ||
+        `/api/komga/images/books/${book.id}/pages/${pageNumber}`
+      );
+    },
+    [book.id, preloadPage]
+  );
+
+  const cleanCache = useCallback(
+    (currentPageNumber: number) => {
+      const maxDistance = 8;
+      const minPage = Math.max(1, currentPageNumber - maxDistance);
+      const maxPage = Math.min(pages.length, currentPageNumber + maxDistance);
+
+      Object.entries(pageCache.current).forEach(([pageNum, cache]) => {
+        const page = parseInt(pageNum);
+        if (page < minPage || page > maxPage) {
+          URL.revokeObjectURL(cache.url);
+          delete pageCache.current[page];
+        }
+      });
+    },
+    [pages.length]
+  );
+
+  return {
+    preloadPage,
+    getPageUrl,
+    cleanCache,
+  };
+};

src/components/reader/hooks/usePageNavigation.ts

@@ -0,0 +1,105 @@
+import { useState, useCallback, useEffect } from "react";
+import { KomgaBook } from "@/types/komga";
+
+interface UsePageNavigationProps {
+  book: KomgaBook;
+  pages: number[];
+  isDoublePage: boolean;
+}
+
+export const usePageNavigation = ({ book, pages, isDoublePage }: UsePageNavigationProps) => {
+  const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
+  const [isLoading, setIsLoading] = useState(true);
+  const [secondPageLoading, setSecondPageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+
+  const syncReadProgress = useCallback(
+    async (page: number) => {
+      try {
+        const completed = page === pages.length;
+        await fetch(`/api/komga/books/${book.id}/read-progress`, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ page, completed }),
+        });
+      } catch (error) {
+        console.error("Erreur lors de la synchronisation de la progression:", error);
+      }
+    },
+    [book.id, pages.length]
+  );
+
+  const shouldShowDoublePage = useCallback(
+    (pageNumber: number) => {
+      if (!isDoublePage) return false;
+      if (pageNumber === 1) return false;
+      return pageNumber < pages.length;
+    },
+    [isDoublePage, pages.length]
+  );
+
+  const handlePreviousPage = useCallback(() => {
+    if (currentPage > 1) {
+      const newPage = isDoublePage && currentPage > 2 ? currentPage - 2 : currentPage - 1;
+      setCurrentPage(newPage);
+      setIsLoading(true);
+      setSecondPageLoading(true);
+      setImageError(false);
+
+      const timer = setTimeout(() => {
+        syncReadProgress(newPage);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [currentPage, isDoublePage, syncReadProgress]);
+
+  const handleNextPage = useCallback(() => {
+    if (currentPage < pages.length) {
+      const newPage = isDoublePage ? Math.min(currentPage + 2, pages.length) : currentPage + 1;
+      setCurrentPage(newPage);
+      setIsLoading(true);
+      setSecondPageLoading(true);
+      setImageError(false);
+
+      const timer = setTimeout(() => {
+        syncReadProgress(newPage);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [currentPage, pages.length, isDoublePage, syncReadProgress]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    setSecondPageLoading(true);
+  }, [isDoublePage]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowLeft") {
+        handlePreviousPage();
+      } else if (event.key === "ArrowRight") {
+        handleNextPage();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handlePreviousPage, handleNextPage]);
+
+  return {
+    currentPage,
+    setCurrentPage,
+    isLoading,
+    setIsLoading,
+    secondPageLoading,
+    setSecondPageLoading,
+    imageError,
+    setImageError,
+    handlePreviousPage,
+    handleNextPage,
+    shouldShowDoublePage,
+    syncReadProgress,
+  };
+};

src/components/reader/hooks/useThumbnails.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback, useEffect } from "react";
+import { KomgaBook } from "@/types/komga";
+
+interface UseThumbnailsProps {
+  book: KomgaBook;
+  currentPage: number;
+}
+
+export const useThumbnails = ({ book, currentPage }: UseThumbnailsProps) => {
+  const [loadedThumbnails, setLoadedThumbnails] = useState<{ [key: number]: boolean }>({});
+  const [visibleThumbnails, setVisibleThumbnails] = useState<number[]>([]);
+
+  const handleThumbnailLoad = useCallback((pageNumber: number) => {
+    setLoadedThumbnails((prev) => ({ ...prev, [pageNumber]: true }));
+  }, []);
+
+  const getThumbnailUrl = useCallback(
+    (pageNumber: number) => {
+      return `/api/komga/images/books/${book.id}/pages/${pageNumber}/thumbnail`;
+    },
+    [book.id]
+  );
+
+  // Mettre à jour les thumbnails visibles autour de la page courante
+  useEffect(() => {
+    const windowSize = 10; // Nombre de pages à charger de chaque côté
+    const start = Math.max(1, currentPage - windowSize);
+    const end = currentPage + windowSize;
+    const newVisibleThumbnails = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    setVisibleThumbnails(newVisibleThumbnails);
+  }, [currentPage]);
+
+  const scrollToActiveThumbnail = useCallback(() => {
+    const thumbnail = document.getElementById(`thumbnail-${currentPage}`);
+    if (thumbnail) {
+      thumbnail.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [currentPage]);
+
+  return {
+    loadedThumbnails,
+    handleThumbnailLoad,
+    getThumbnailUrl,
+    visibleThumbnails,
+    scrollToActiveThumbnail,
+  };
+};