325 lines
11 KiB
TypeScript
325 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useTranslate } from "@/hooks/useTranslate";
|
|
import { usePreferences } from "@/contexts/PreferencesContext";
|
|
import { Label } from "@/components/ui/label";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { GRADIENT_PRESETS } from "@/types/preferences";
|
|
import type { BackgroundType } from "@/types/preferences";
|
|
import { Check } from "lucide-react";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { SliderControl } from "@/components/ui/slider-control";
|
|
import type { KomgaLibrary } from "@/types/komga";
|
|
import logger from "@/lib/logger";
|
|
|
|
interface BackgroundSettingsProps {
|
|
initialLibraries: KomgaLibrary[];
|
|
}
|
|
|
|
export function BackgroundSettings({ initialLibraries }: BackgroundSettingsProps) {
|
|
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[]>(initialLibraries || []);
|
|
const [selectedLibraries, setSelectedLibraries] = useState<string[]>(
|
|
preferences.background.komgaLibraries || []
|
|
);
|
|
|
|
useEffect(() => {
|
|
setLibraries(initialLibraries || []);
|
|
}, [initialLibraries]);
|
|
|
|
useEffect(() => {
|
|
setKomgaConfigValid(libraries.length > 0);
|
|
}, [libraries]);
|
|
|
|
const handleBackgroundTypeChange = async (type: BackgroundType) => {
|
|
try {
|
|
await updatePreferences({
|
|
background: {
|
|
...preferences.background,
|
|
type,
|
|
},
|
|
});
|
|
toast({
|
|
title: t("settings.title"),
|
|
description: t("settings.komga.messages.configSaved"),
|
|
});
|
|
} catch (error) {
|
|
logger.error({ err: error }, "Erreur:");
|
|
toast({
|
|
variant: "destructive",
|
|
title: t("settings.error.title"),
|
|
description: t("settings.error.message"),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleGradientSelect = async (gradient: string) => {
|
|
try {
|
|
await updatePreferences({
|
|
background: {
|
|
...preferences.background,
|
|
type: "gradient",
|
|
gradient,
|
|
},
|
|
});
|
|
toast({
|
|
title: t("settings.title"),
|
|
description: t("settings.komga.messages.configSaved"),
|
|
});
|
|
} catch (error) {
|
|
logger.error({ err: error }, "Erreur:");
|
|
toast({
|
|
variant: "destructive",
|
|
title: t("settings.error.title"),
|
|
description: t("settings.error.message"),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleCustomImageSave = async () => {
|
|
if (!customImageUrl.trim()) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: t("settings.error.title"),
|
|
description: "Veuillez entrer une URL valide",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await updatePreferences({
|
|
background: {
|
|
...preferences.background,
|
|
type: "image",
|
|
imageUrl: customImageUrl,
|
|
},
|
|
});
|
|
toast({
|
|
title: t("settings.title"),
|
|
description: t("settings.komga.messages.configSaved"),
|
|
});
|
|
} catch (error) {
|
|
logger.error({ err: error }, "Erreur:");
|
|
toast({
|
|
variant: "destructive",
|
|
title: t("settings.error.title"),
|
|
description: t("settings.error.message"),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleOpacityChange = async (value: number[]) => {
|
|
try {
|
|
await updatePreferences({
|
|
background: {
|
|
...preferences.background,
|
|
opacity: value[0],
|
|
},
|
|
});
|
|
} catch (error) {
|
|
logger.error({ err: error }, "Erreur:");
|
|
}
|
|
};
|
|
|
|
const handleBlurChange = async (value: number[]) => {
|
|
try {
|
|
await updatePreferences({
|
|
background: {
|
|
...preferences.background,
|
|
blur: value[0],
|
|
},
|
|
});
|
|
} catch (error) {
|
|
logger.error({ err: error }, "Erreur:");
|
|
}
|
|
};
|
|
|
|
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) {
|
|
logger.error({ err: error }, "Erreur:");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("settings.background.title")}</CardTitle>
|
|
<CardDescription>{t("settings.background.description")}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-6">
|
|
{/* Type de background */}
|
|
<div className="space-y-3">
|
|
<Label>{t("settings.background.type.label")}</Label>
|
|
<RadioGroup
|
|
value={preferences.background.type}
|
|
onValueChange={(value) => handleBackgroundTypeChange(value as BackgroundType)}
|
|
className="space-y-2"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="default" id="bg-default" />
|
|
<Label htmlFor="bg-default" className="cursor-pointer font-normal">
|
|
{t("settings.background.type.default")}
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="gradient" id="bg-gradient" />
|
|
<Label htmlFor="bg-gradient" className="cursor-pointer font-normal">
|
|
{t("settings.background.type.gradient")}
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="image" id="bg-image" />
|
|
<Label htmlFor="bg-image" className="cursor-pointer font-normal">
|
|
{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>
|
|
|
|
{/* Sélection de dégradé */}
|
|
{preferences.background.type === "gradient" && (
|
|
<div className="space-y-3">
|
|
<Label>{t("settings.background.gradient.label")}</Label>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
{GRADIENT_PRESETS.map((preset) => (
|
|
<button
|
|
key={preset.id}
|
|
onClick={() => handleGradientSelect(preset.gradient)}
|
|
className="relative group rounded-lg overflow-hidden h-20 border-2 transition-all hover:scale-105"
|
|
style={{
|
|
background: preset.gradient,
|
|
borderColor:
|
|
preferences.background.gradient === preset.gradient
|
|
? "hsl(var(--primary))"
|
|
: "transparent",
|
|
}}
|
|
>
|
|
{preferences.background.gradient === preset.gradient && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/20">
|
|
<Check className="w-6 h-6 text-white" />
|
|
</div>
|
|
)}
|
|
<div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{preset.name}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* URL d'image personnalisée */}
|
|
{preferences.background.type === "image" && (
|
|
<div className="space-y-3">
|
|
<Label htmlFor="custom-bg-url">{t("settings.background.image.label")}</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="custom-bg-url"
|
|
type="url"
|
|
placeholder="https://example.com/image.jpg"
|
|
value={customImageUrl}
|
|
onChange={(e) => setCustomImageUrl(e.target.value)}
|
|
className="flex-1"
|
|
/>
|
|
<Button onClick={handleCustomImageSave}>
|
|
{t("settings.background.image.save")}
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("settings.background.image.description")}
|
|
</p>
|
|
</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 === "komga-random") && (
|
|
<>
|
|
<SliderControl
|
|
label="Opacité du contenu"
|
|
value={preferences.background.opacity || 10}
|
|
min={0}
|
|
max={100}
|
|
step={5}
|
|
unit="%"
|
|
description="Contrôle la transparence du contenu par rapport au background"
|
|
onChange={(value) => handleOpacityChange([value])}
|
|
/>
|
|
|
|
<SliderControl
|
|
label="Flou du background"
|
|
value={preferences.background.blur || 0}
|
|
min={0}
|
|
max={20}
|
|
step={1}
|
|
unit="px"
|
|
description="Applique un effet de flou au background"
|
|
onChange={(value) => handleBlurChange([value])}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|