diff --git a/package.json b/package.json index ec5c9b6..9e7694c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "dependencies": { "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-dropdown-menu": "2.0.6", + "@radix-ui/react-label": "^2.1.2", "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-toast": "1.1.5", "@types/mongoose": "5.11.97", "class-variance-authority": "0.7.0", diff --git a/src/app/api/preferences/route.ts b/src/app/api/preferences/route.ts new file mode 100644 index 0000000..9d656de --- /dev/null +++ b/src/app/api/preferences/route.ts @@ -0,0 +1,23 @@ +import { NextRequest, NextResponse } from "next/server"; +import { PreferencesService } from "@/lib/services/preferences.service"; + +export async function GET() { + try { + const preferences = await PreferencesService.getPreferences(); + return NextResponse.json(preferences); + } catch (error) { + console.error("Erreur lors de la récupération des préférences:", error); + return new NextResponse("Erreur lors de la récupération des préférences", { status: 500 }); + } +} + +export async function PUT(request: NextRequest) { + try { + const preferences = await request.json(); + const updatedPreferences = await PreferencesService.updatePreferences(preferences); + return NextResponse.json(updatedPreferences); + } catch (error) { + console.error("Erreur lors de la mise à jour des préférences:", error); + return new NextResponse("Erreur lors de la mise à jour des préférences", { status: 500 }); + } +} diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx index bfca57f..db3670c 100644 --- a/src/components/layout/ClientLayout.tsx +++ b/src/components/layout/ClientLayout.tsx @@ -8,6 +8,7 @@ import { InstallPWA } from "../ui/InstallPWA"; import { Toaster } from "@/components/ui/toaster"; import { usePathname, useRouter } from "next/navigation"; import { authService } from "@/lib/services/auth.service"; +import { PreferencesProvider } from "@/contexts/PreferencesContext"; // Routes qui ne nécessitent pas d'authentification const publicRoutes = ["/login", "/register"]; @@ -69,13 +70,15 @@ export default function ClientLayout({ children }: { children: React.ReactNode } return ( -
- {!isPublicRoute &&
} - {!isPublicRoute && } -
{children}
- - -
+ +
+ {!isPublicRoute &&
} + {!isPublicRoute && } +
{children}
+ + +
+ ); } diff --git a/src/components/settings/ClientSettings.tsx b/src/components/settings/ClientSettings.tsx index 5160464..228cbbb 100644 --- a/src/components/settings/ClientSettings.tsx +++ b/src/components/settings/ClientSettings.tsx @@ -5,6 +5,9 @@ import { Loader2, Network, Trash2 } from "lucide-react"; import { useRouter } from "next/navigation"; import { AuthError } from "@/types/auth"; import { useToast } from "@/components/ui/use-toast"; +import { usePreferences } from "@/contexts/PreferencesContext"; +import { Switch } from "@/components/ui/switch"; +import { Label } from "@/components/ui/label"; interface ErrorMessage { message: string; @@ -54,6 +57,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin imagesTTL: 1440, } ); + const { preferences, updatePreferences } = usePreferences(); const handleClearCache = async () => { setIsCacheClearing(true); @@ -241,6 +245,22 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin } }; + const handleToggleThumbnails = async (checked: boolean) => { + try { + await updatePreferences({ showThumbnails: checked }); + toast({ + title: "Préférences sauvegardées", + description: "Les préférences ont été mises à jour avec succès", + }); + } catch (error) { + toast({ + variant: "destructive", + title: "Erreur", + description: "Une erreur est survenue lors de la mise à jour des préférences", + }); + } + }; + return (
@@ -260,6 +280,36 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin )}
+ {/* Section Préférences d'affichage */} +
+
+
+

+ Préférences d'affichage +

+

+ Personnalisez l'affichage de votre bibliothèque. +

+
+ +
+
+
+ +

+ Utiliser les vignettes au lieu des premières pages pour l'affichage des séries +

+
+ +
+
+
+
+ {/* Section Configuration Komga */}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..6ac6d6a --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,20 @@ +"use client"; + +import * as React from "react"; +import * as LabelPrimitive from "@radix-ui/react-label"; +import { cva, type VariantProps } from "class-variance-authority"; +import { cn } from "@/lib/utils"; + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +); + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, ...props }, ref) => ( + +)); +Label.displayName = LabelPrimitive.Root.displayName; + +export { Label }; diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..655d8bf --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,28 @@ +"use client"; + +import * as React from "react"; +import * as SwitchPrimitives from "@radix-ui/react-switch"; +import { cn } from "@/lib/utils"; + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +Switch.displayName = SwitchPrimitives.Root.displayName; + +export { Switch }; diff --git a/src/contexts/PreferencesContext.tsx b/src/contexts/PreferencesContext.tsx new file mode 100644 index 0000000..8b1c114 --- /dev/null +++ b/src/contexts/PreferencesContext.tsx @@ -0,0 +1,70 @@ +"use client"; + +import React, { createContext, useContext, useEffect, useState } from "react"; +import { UserPreferences } from "@/lib/services/preferences.service"; + +interface PreferencesContextType { + preferences: UserPreferences; + updatePreferences: (newPreferences: Partial) => Promise; + isLoading: boolean; +} + +const PreferencesContext = createContext(undefined); + +export function PreferencesProvider({ children }: { children: React.ReactNode }) { + const [preferences, setPreferences] = useState({ + showThumbnails: false, + }); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const fetchPreferences = async () => { + try { + const response = await fetch("/api/preferences"); + if (!response.ok) throw new Error("Erreur lors de la récupération des préférences"); + const data = await response.json(); + setPreferences(data); + } catch (error) { + console.error("Erreur lors de la récupération des préférences:", error); + } finally { + setIsLoading(false); + } + }; + + fetchPreferences(); + }, []); + + const updatePreferences = async (newPreferences: Partial) => { + try { + const response = await fetch("/api/preferences", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(newPreferences), + }); + + if (!response.ok) throw new Error("Erreur lors de la mise à jour des préférences"); + + const updatedPreferences = await response.json(); + setPreferences(updatedPreferences); + } catch (error) { + console.error("Erreur lors de la mise à jour des préférences:", error); + throw error; + } + }; + + return ( + + {children} + + ); +} + +export function usePreferences() { + const context = useContext(PreferencesContext); + if (context === undefined) { + throw new Error("usePreferences must be used within a PreferencesProvider"); + } + return context; +} diff --git a/src/lib/models/preferences.model.ts b/src/lib/models/preferences.model.ts new file mode 100644 index 0000000..0a86491 --- /dev/null +++ b/src/lib/models/preferences.model.ts @@ -0,0 +1,21 @@ +import mongoose from "mongoose"; + +const preferencesSchema = new mongoose.Schema( + { + userId: { + type: String, + required: true, + unique: true, + }, + showThumbnails: { + type: Boolean, + default: false, + }, + }, + { + timestamps: true, + } +); + +export const PreferencesModel = + mongoose.models.Preferences || mongoose.model("Preferences", preferencesSchema); diff --git a/src/lib/services/book.service.ts b/src/lib/services/book.service.ts index 95e0eba..54dc358 100644 --- a/src/lib/services/book.service.ts +++ b/src/lib/services/book.service.ts @@ -1,6 +1,7 @@ import { BaseApiService } from "./base-api.service"; import { KomgaBook } from "@/types/komga"; import { ImageService } from "./image.service"; +import { PreferencesService } from "./preferences.service"; export class BookService extends BaseApiService { static async getBook(bookId: string): Promise<{ book: KomgaBook; pages: number[] }> { @@ -66,6 +67,14 @@ export class BookService extends BaseApiService { static async getPage(bookId: string, pageNumber: number): Promise { try { + // Récupérer les préférences de l'utilisateur + const preferences = await PreferencesService.getPreferences(); + + // Si l'utilisateur préfère les vignettes, utiliser getPageThumbnail + if (preferences.showThumbnails) { + return this.getPageThumbnail(bookId, pageNumber); + } + // Ajuster le numéro de page pour l'API Komga (zero-based) const adjustedPageNumber = pageNumber - 1; const response = await ImageService.getImage( @@ -91,6 +100,7 @@ export class BookService extends BaseApiService { return new Response(response.buffer, { headers: { "Content-Type": response.contentType || "image/jpeg", + "Cache-Control": "public, max-age=31536000, immutable", }, }); } catch (error) { diff --git a/src/lib/services/preferences.service.ts b/src/lib/services/preferences.service.ts new file mode 100644 index 0000000..b989389 --- /dev/null +++ b/src/lib/services/preferences.service.ts @@ -0,0 +1,65 @@ +import { cookies } from "next/headers"; +import connectDB from "@/lib/mongodb"; +import { PreferencesModel } from "@/lib/models/preferences.model"; + +interface User { + id: string; + email: string; +} + +export interface UserPreferences { + showThumbnails: boolean; +} + +export class PreferencesService { + private static async getCurrentUser(): Promise { + const userCookie = cookies().get("stripUser"); + + if (!userCookie) { + throw new Error("Utilisateur non authentifié"); + } + + try { + return JSON.parse(atob(userCookie.value)); + } catch (error) { + console.error("Erreur lors de la récupération de l'utilisateur depuis le cookie:", error); + throw new Error("Utilisateur non authentifié"); + } + } + + static async getPreferences(): Promise { + await connectDB(); + const user = await this.getCurrentUser(); + + const preferences = await PreferencesModel.findOne({ userId: user.id }); + if (!preferences) { + // Créer les préférences par défaut si elles n'existent pas + const defaultPreferences = await PreferencesModel.create({ + userId: user.id, + showThumbnails: false, + }); + return { + showThumbnails: defaultPreferences.showThumbnails, + }; + } + + return { + showThumbnails: preferences.showThumbnails, + }; + } + + static async updatePreferences(preferences: Partial): Promise { + await connectDB(); + const user = await this.getCurrentUser(); + + const updatedPreferences = await PreferencesModel.findOneAndUpdate( + { userId: user.id }, + { $set: preferences }, + { new: true, upsert: true } + ); + + return { + showThumbnails: updatedPreferences.showThumbnails, + }; + } +} diff --git a/src/lib/services/series.service.ts b/src/lib/services/series.service.ts index 7412159..de67307 100644 --- a/src/lib/services/series.service.ts +++ b/src/lib/services/series.service.ts @@ -3,6 +3,7 @@ import { LibraryResponse } from "@/types/library"; import { KomgaBook, KomgaSeries } from "@/types/komga"; import { BookService } from "./book.service"; import { ImageService } from "./image.service"; +import { PreferencesService } from "./preferences.service"; export class SeriesService extends BaseApiService { static async getSeries(seriesId: string): Promise { @@ -78,22 +79,20 @@ export class SeriesService extends BaseApiService { static async getFirstPage(seriesId: string): Promise { try { - // Récupérer l'ID du premier livre - const firstBookId = await this.getFirstBook(seriesId); - return await BookService.getPage(firstBookId, 1); - } catch (error) { - // En cas d'erreur, on essaie de récupérer le thumbnail comme fallback - try { - const response = await ImageService.getImage(`series/${seriesId}/thumbnail`); - return new Response(response.buffer, { - headers: { - "Content-Type": response.contentType || "image/jpeg", - "Cache-Control": "public, max-age=31536000, immutable", - }, - }); - } catch (fallbackError) { - throw this.handleError(fallbackError, "Impossible de récupérer l'image de la série"); + // Récupérer les préférences de l'utilisateur + const preferences = await PreferencesService.getPreferences(); + + // Si l'utilisateur préfère les vignettes, utiliser getThumbnail + if (preferences.showThumbnails) { + return this.getThumbnail(seriesId); } + + // Sinon, récupérer la première page + const firstBookId = await this.getFirstBook(seriesId); + const response = await BookService.getPage(firstBookId, 1); + return response; + } catch (error) { + throw this.handleError(error, "Impossible de récupérer la première page"); } } diff --git a/yarn.lock b/yarn.lock index 007edf8..04194c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -363,6 +363,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/primitive@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3" + integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA== + "@radix-ui/react-arrow@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d" @@ -389,6 +394,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-compose-refs@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec" + integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw== + "@radix-ui/react-context@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c" @@ -396,6 +406,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-context@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a" + integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q== + "@radix-ui/react-dialog@1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300" @@ -475,6 +490,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "1.0.1" +"@radix-ui/react-label@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.1.2.tgz#994a5d815c2ff46e151410ae4e301f1b639f9971" + integrity sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw== + dependencies: + "@radix-ui/react-primitive" "2.0.2" + "@radix-ui/react-menu@2.0.6": version "2.0.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e" @@ -542,6 +564,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-slot" "1.0.2" +"@radix-ui/react-primitive@2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef" + integrity sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w== + dependencies: + "@radix-ui/react-slot" "1.1.2" + "@radix-ui/react-roving-focus@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974" @@ -566,6 +595,26 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.1" +"@radix-ui/react-slot@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6" + integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ== + dependencies: + "@radix-ui/react-compose-refs" "1.1.1" + +"@radix-ui/react-switch@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.3.tgz#cb6386909d1d3f65a2b81a3b15da8c91d18f49b0" + integrity sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ== + dependencies: + "@radix-ui/primitive" "1.1.1" + "@radix-ui/react-compose-refs" "1.1.1" + "@radix-ui/react-context" "1.1.1" + "@radix-ui/react-primitive" "2.0.2" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-previous" "1.1.0" + "@radix-ui/react-use-size" "1.1.0" + "@radix-ui/react-toast@1.1.5": version "1.1.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.5.tgz#f5788761c0142a5ae9eb97f0051fd3c48106d9e6" @@ -592,6 +641,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-callback-ref@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1" + integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw== + "@radix-ui/react-use-controllable-state@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286" @@ -600,6 +654,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "1.0.1" +"@radix-ui/react-use-controllable-state@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0" + integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw== + dependencies: + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-escape-keydown@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755" @@ -615,6 +676,16 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-layout-effect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" + integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== + +"@radix-ui/react-use-previous@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c" + integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og== + "@radix-ui/react-use-rect@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2" @@ -631,6 +702,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "1.0.1" +"@radix-ui/react-use-size@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b" + integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw== + dependencies: + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-visually-hidden@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"