From c9cd08192137800697b6bf26c3ba61ef380af2a2 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 12 Feb 2025 09:35:14 +0100
Subject: [PATCH] fix: correction de l'erreur navigator is not defined dans
 SeriesHeader

---
 src/components/series/SeriesHeader.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index a57f95d..0e019cf 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import { ImageOff } from "lucide-react";
 import { KomgaSeries } from "@/types/komga";
+import { useState, useEffect } from "react";
 
 interface SeriesHeaderProps {
   series: KomgaSeries;
@@ -10,6 +11,22 @@ interface SeriesHeaderProps {
 }
 
 export function SeriesHeader({ series, serverUrl }: SeriesHeaderProps) {
+  const [languageDisplay, setLanguageDisplay] = useState<string>(series.metadata.language);
+
+  useEffect(() => {
+    try {
+      if (series.metadata.language) {
+        const displayNames = new Intl.DisplayNames([navigator.language || "fr-FR"], {
+          type: "language",
+        });
+        setLanguageDisplay(displayNames.of(series.metadata.language) || series.metadata.language);
+      }
+    } catch (error) {
+      console.error("Erreur lors de la traduction de la langue:", error);
+      setLanguageDisplay(series.metadata.language);
+    }
+  }, [series.metadata.language]);
+
   return (
     <div className="flex flex-col md:flex-row gap-8">
       {/* Couverture */}
@@ -73,10 +90,7 @@ export function SeriesHeader({ series, serverUrl }: SeriesHeaderProps) {
           )}
           {series.metadata.language && (
             <div>
-              <span className="font-medium">Langue :</span>{" "}
-              {new Intl.DisplayNames([navigator.language], { type: "language" }).of(
-                series.metadata.language
-              )}
+              <span className="font-medium">Langue :</span> {languageDisplay}
             </div>
           )}
           {series.metadata.ageRating && (