julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-18 22:37:59 +02:00
parent 0806487fe7
commit e923343f08
6 changed files with 279 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/api/komga/random-book/route.ts Normal file
View File

@@ -0,0 +1,53 @@
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { BookService } from "@/lib/services/book.service";
import { ERROR_CODES } from "@/constants/errorCodes";
import { AppError } from "@/utils/errors";
import { getErrorMessage } from "@/utils/errors";
export const dynamic = "force-dynamic";
export async function GET(request: NextRequest) {
try {
const { searchParams } = new URL(request.url);
const libraryIds = searchParams.get("libraryIds")?.split(",") || [];
if (libraryIds.length === 0) {
return NextResponse.json(
{
error: {
code: ERROR_CODES.LIBRARY.FETCH_ERROR,
message: "Au moins une bibliothèque doit être sélectionnée",
},
},
{ status: 400 }
);
}
const bookId = await BookService.getRandomBookFromLibraries(libraryIds);
return NextResponse.json({ bookId });
} catch (error) {
console.error("Erreur lors de la récupération d'un livre aléatoire:", error);
if (error instanceof AppError) {
return NextResponse.json(
{
error: {
code: error.code,
message: getErrorMessage(error.code),
},
},
{ status: 500 }
);
}
return NextResponse.json(
{
error: {
code: ERROR_CODES.SERIES.FETCH_ERROR,
message: getErrorMessage(ERROR_CODES.SERIES.FETCH_ERROR),
},
},
{ status: 500 }
);
}
}

52
src/components/layout/ClientLayout.tsx
View File

@@ -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;
@@ -48,8 +73,18 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
};
}
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}

27
src/components/layout/Header.tsx
View File

@@ -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}

85
src/components/settings/BackgroundSettings.tsx
View File

@@ -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">

68
src/lib/services/book.service.ts
View File

@@ -6,6 +6,7 @@ import { PreferencesService } from "./preferences.service";
import { ERROR_CODES } from "../../constants/errorCodes";
import { AppError } from "../../utils/errors";
import { SeriesService } from "./series.service";
import type { Series } from "@/types/series";
export class BookService extends BaseApiService {
static async getBook(bookId: string): Promise<KomgaBookWithPages> {
@@ -162,4 +163,71 @@ export class BookService extends BaseApiService {
static getCoverUrl(bookId: string): string {
return `/api/komga/images/books/${bookId}/thumbnail`;
}
static async getRandomBookFromLibraries(libraryIds: string[]): Promise<string> {
try {
if (libraryIds.length === 0) {
throw new AppError(ERROR_CODES.LIBRARY.NOT_FOUND, { message: "Aucune bibliothèque sélectionnée" });
}
const { LibraryService } = await import("./library.service");
// Essayer d'abord d'utiliser le cache des bibliothèques
const allSeriesFromCache: Series[] = [];
for (const libraryId of libraryIds) {
try {
// Essayer de récupérer les séries depuis le cache (rapide si en cache)
const series = await LibraryService.getAllLibrarySeries(libraryId);
allSeriesFromCache.push(...series);
} catch {
// Si erreur, on continue avec les autres bibliothèques
}
}
if (allSeriesFromCache.length > 0) {
// Choisir une série au hasard parmi toutes celles trouvées
const randomSeriesIndex = Math.floor(Math.random() * allSeriesFromCache.length);
const randomSeries = allSeriesFromCache[randomSeriesIndex];
// Récupérer les books de cette série
const books = await SeriesService.getAllSeriesBooks(randomSeries.id);
if (books.length > 0) {
const randomBookIndex = Math.floor(Math.random() * books.length);
return books[randomBookIndex].id;
}
}
// Si pas de cache, faire une requête légère : prendre une page de séries d'une bibliothèque au hasard
const randomLibraryIndex = Math.floor(Math.random() * libraryIds.length);
const randomLibraryId = libraryIds[randomLibraryIndex];
// Récupérer juste une page de séries (pas toutes)
const seriesResponse = await LibraryService.getLibrarySeries(randomLibraryId, 0, 20);
if (seriesResponse.content.length === 0) {
throw new AppError(ERROR_CODES.BOOK.NOT_FOUND, { message: "Aucune série trouvée dans les bibliothèques sélectionnées" });
}
// Choisir une série au hasard parmi celles récupérées
const randomSeriesIndex = Math.floor(Math.random() * seriesResponse.content.length);
const randomSeries = seriesResponse.content[randomSeriesIndex];
// Récupérer les books de cette série
const books = await SeriesService.getAllSeriesBooks(randomSeries.id);
if (books.length === 0) {
throw new AppError(ERROR_CODES.BOOK.NOT_FOUND, { message: "Aucun livre trouvé dans la série" });
}
const randomBookIndex = Math.floor(Math.random() * books.length);
return books[randomBookIndex].id;
} catch (error) {
if (error instanceof AppError) {
throw error;
}
throw new AppError(ERROR_CODES.SERIES.FETCH_ERROR, {}, error);
}
}
}

3
src/types/preferences.ts
View File

@@ -1,4 +1,4 @@
export type BackgroundType = "default" | "gradient" | "image";
export type BackgroundType = "default" | "gradient" | "image" | "komga-random";
export interface BackgroundPreferences {
type: BackgroundType;
@@ -6,6 +6,7 @@ export interface BackgroundPreferences {
imageUrl?: string;
opacity?: number; // 0-100
blur?: number; // 0-20 (px)
komgaLibraries?: string[]; // IDs des bibliothèques Komga sélectionnées
}
export interface UserPreferences {