feat: implement random book background feature in ClientLayout, allowing dynamic background images from selected Komga libraries

2025-10-18 22:37:59 +02:00
parent 0806487fe7
commit e923343f08
6 changed files with 279 additions and 9 deletions
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { ThemeProvider } from "next-themes";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { Header } from "@/components/layout/Header";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { InstallPWA } from "../ui/InstallPWA";
@@ -24,9 +24,34 @@ interface ClientLayoutProps {

 export default function ClientLayout({ children, initialLibraries = [], initialFavorites = [], userIsAdmin = false }: ClientLayoutProps) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [randomBookId, setRandomBookId] = useState<string | null>(null);
  const pathname = usePathname();
  const { preferences } = usePreferences();

+  // Récupérer un book aléatoire pour le background
+  const fetchRandomBook = useCallback(async () => {
+    if (
+      preferences.background.type === "komga-random" &&
+      preferences.background.komgaLibraries &&
+      preferences.background.komgaLibraries.length > 0
+    ) {
+      try {
+        const libraryIds = preferences.background.komgaLibraries.join(",");
+        const response = await fetch(`/api/komga/random-book?libraryIds=${libraryIds}`);
+        if (response.ok) {
+          const data = await response.json();
+          setRandomBookId(data.bookId);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la récupération d'un book aléatoire:", error);
+      }
+    }
+  }, [preferences.background.type, preferences.background.komgaLibraries]);
+
+  useEffect(() => {
+    fetchRandomBook();
+  }, [fetchRandomBook]);
+
  const backgroundStyle = useMemo(() => {
    const bg = preferences.background;
    const blur = bg.blur || 0;
@@ -47,9 +72,19 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
        filter: blur > 0 ? `blur(${blur}px)` : undefined,
      };
    }
+
+    if (bg.type === "komga-random" && randomBookId) {
+      return {
+        backgroundImage: `url(/api/komga/images/books/${randomBookId}/thumbnail)`,
+        backgroundSize: "cover" as const,
+        backgroundPosition: "center" as const,
+        backgroundRepeat: "no-repeat" as const,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
+      };
+    }
    
    return {};
-  }, [preferences.background]);
+  }, [preferences.background, randomBookId]);

  const handleCloseSidebar = () => {
    setIsSidebarOpen(false);
@@ -92,7 +127,10 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
  // Ne pas afficher le header et la sidebar sur les routes publiques et le reader
  const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith('/books/');

-  const hasCustomBackground = preferences.background.type === "gradient" || preferences.background.type === "image";
+  const hasCustomBackground = 
+    preferences.background.type === "gradient" || 
+    preferences.background.type === "image" ||
+    (preferences.background.type === "komga-random" && randomBookId);
  const contentOpacity = (preferences.background.opacity || 100) / 100;

  return (
@@ -108,7 +146,13 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
        className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
        style={hasCustomBackground ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` } : undefined}
      >
-        {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
+        {!isPublicRoute && (
+          <Header 
+            onToggleSidebar={handleToggleSidebar}
+            onRefreshBackground={fetchRandomBook}
+            showRefreshBackground={preferences.background.type === "komga-random"}
+          />
+        )}
        {!isPublicRoute && (
          <Sidebar 
            isOpen={isSidebarOpen} 
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,21 +1,33 @@
-import { Menu, Moon, Sun } from "lucide-react";
+import { Menu, Moon, Sun, RefreshCw } from "lucide-react";
 import { useTheme } from "next-themes";
 import LanguageSelector from "@/components/LanguageSelector";
 import { useTranslation } from "react-i18next";
 import { IconButton } from "@/components/ui/icon-button";
+import { useState } from "react";

 interface HeaderProps {
  onToggleSidebar: () => void;
+  onRefreshBackground?: () => Promise<void>;
+  showRefreshBackground?: boolean;
 }

-export function Header({ onToggleSidebar }: HeaderProps) {
+export function Header({ onToggleSidebar, onRefreshBackground, showRefreshBackground = false }: HeaderProps) {
  const { theme, setTheme } = useTheme();
  const { t } = useTranslation();
+  const [isRefreshing, setIsRefreshing] = useState(false);

  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

+  const handleRefreshBackground = async () => {
+    if (onRefreshBackground && !isRefreshing) {
+      setIsRefreshing(true);
+      await onRefreshBackground();
+      setIsRefreshing(false);
+    }
+  };
+
  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/50 pt-safe">
      <div className="container flex h-14 max-w-screen-2xl items-center">
@@ -37,6 +49,17 @@ export function Header({ onToggleSidebar }: HeaderProps) {

        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          <nav className="flex items-center space-x-2">
+            {showRefreshBackground && (
+              <button
+                onClick={handleRefreshBackground}
+                disabled={isRefreshing}
+                className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Rafraîchir l'image de fond"
+              >
+                <RefreshCw className={`h-[1.2rem] w-[1.2rem] ${isRefreshing ? 'animate-spin' : ''}`} />
+                <span className="sr-only">Rafraîchir l&apos;image de fond</span>
+              </button>
+            )}
            <LanguageSelector />
            <button
              onClick={toggleTheme}
--- a/src/components/settings/BackgroundSettings.tsx
+++ b/src/components/settings/BackgroundSettings.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslate } from "@/hooks/useTranslate";
 import { usePreferences } from "@/contexts/PreferencesContext";
 import { Label } from "@/components/ui/label";
@@ -13,12 +13,37 @@ import type { BackgroundType } from "@/types/preferences";
 import { Check, Minus, Plus } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Slider } from "@/components/ui/slider";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { KomgaLibrary } from "@/types/komga";

 export function BackgroundSettings() {
  const { t } = useTranslate();
  const { toast } = useToast();
  const { preferences, updatePreferences } = usePreferences();
  const [customImageUrl, setCustomImageUrl] = useState(preferences.background.imageUrl || "");
+  const [komgaConfigValid, setKomgaConfigValid] = useState(false);
+  const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
+  const [selectedLibraries, setSelectedLibraries] = useState<string[]>(
+    preferences.background.komgaLibraries || []
+  );
+
+  // Vérifier la config Komga au chargement
+  useEffect(() => {
+    const checkKomgaConfig = async () => {
+      try {
+        const response = await fetch("/api/komga/libraries");
+        if (response.ok) {
+          const libs = await response.json();
+          setLibraries(libs);
+          setKomgaConfigValid(libs.length > 0);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la vérification de la config Komga:", error);
+        setKomgaConfigValid(false);
+      }
+    };
+    checkKomgaConfig();
+  }, []);

  const handleBackgroundTypeChange = async (type: BackgroundType) => {
    try {
@@ -141,6 +166,25 @@ export function BackgroundSettings() {
    }
  };

+  const handleLibraryToggle = async (libraryId: string) => {
+    const newSelection = selectedLibraries.includes(libraryId)
+      ? selectedLibraries.filter((id) => id !== libraryId)
+      : [...selectedLibraries, libraryId];
+
+    setSelectedLibraries(newSelection);
+
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          komgaLibraries: newSelection,
+        },
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+    }
+  };
+
  return (
    <Card>
      <CardHeader>
@@ -176,6 +220,14 @@ export function BackgroundSettings() {
                  {t("settings.background.type.image")}
                </Label>
              </div>
+              {komgaConfigValid && (
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="komga-random" id="bg-komga-random" />
+                  <Label htmlFor="bg-komga-random" className="cursor-pointer font-normal">
+                    Cover Komga aléatoire
+                  </Label>
+                </div>
+              )}
            </RadioGroup>
          </div>

@@ -232,8 +284,37 @@ export function BackgroundSettings() {
            </div>
          )}

+          {/* Sélection des bibliothèques Komga */}
+          {preferences.background.type === "komga-random" && (
+            <div className="space-y-3">
+              <Label>Bibliothèques</Label>
+              <div className="space-y-2">
+                {libraries.map((library) => (
+                  <div key={library.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`lib-${library.id}`}
+                      checked={selectedLibraries.includes(library.id)}
+                      onCheckedChange={() => handleLibraryToggle(library.id)}
+                    />
+                    <Label
+                      htmlFor={`lib-${library.id}`}
+                      className="cursor-pointer font-normal text-sm"
+                    >
+                      {library.name} ({library.booksCount} livres)
+                    </Label>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Sélectionnez une ou plusieurs bibliothèques pour choisir une cover aléatoire
+              </p>
+            </div>
+          )}
+
          {/* Contrôles d'opacité et de flou */}
-          {(preferences.background.type === "gradient" || preferences.background.type === "image") && (
+          {(preferences.background.type === "gradient" ||
+            preferences.background.type === "image" ||
+            preferences.background.type === "komga-random") && (
            <>
              <div className="space-y-3">
                <div className="flex items-center justify-between">