add translations

bryanlundberg · Jan 11, 2024 · c8cc52b · c8cc52b
1 parent a9cfe3c
commit c8cc52b
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 13 deletions.
diff --git a/src/components/menu-settings/CustomTheme.tsx b/src/components/menu-settings/CustomTheme.tsx
@@ -1,37 +1,56 @@
 import { ChangeEvent, useRef } from "react";
 import { Button } from "../button";
 import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
+import ImageIcon from "@/icons/ImageIcon";
+import { useSettingsModalStore } from "@/store/SettingsModalStore";
+import translation from "@/translations/global.json";
 
 export default function CustomTheme() {
   const dataInputRef = useRef<HTMLInputElement>(null);
   const { setBackgroundImage } = useBackgroundImageStore();
-
-  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const { lang } = useSettingsModalStore();
+  const handleImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
     const newBackgroundImage = event.target.files?.[0];
 
     if (!newBackgroundImage) return;
 
     const allowedImageTypes = ["image/jpeg", "image/png", "image/gif"];
+    const maxSizeInBytes = 4 * 1024 * 1024; // 4MB
 
     if (!allowedImageTypes.includes(newBackgroundImage.type)) {
-      alert("Only image files (JPEG, PNG, GIF) are allowed.");
+      alert(`${translation.settings["custom-background-image"][lang]}`);
+      if (dataInputRef.current) {
+        dataInputRef.current.value = "";
+      }
+      return;
+    }
+
+    if (newBackgroundImage.size > maxSizeInBytes) {
+      alert(`${translation.settings["max-file-size"][lang]}`);
       if (dataInputRef.current) {
         dataInputRef.current.value = "";
       }
       return;
     }
 
     // Convert image to string base64
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const base64Image = e.target?.result as string;
+    const base64Image = await readFileAsBase64(newBackgroundImage);
 
-      // Save to localstorage
-      localStorage.setItem("customBackgroundImage", base64Image);
-      setBackgroundImage(base64Image);
-    };
+    // Save to local storage
+    localStorage.setItem("customBackgroundImage", base64Image);
+    setBackgroundImage(base64Image);
+  };
 
-    reader.readAsDataURL(newBackgroundImage);
+  const readFileAsBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const base64Image = reader.result as string;
+        resolve(base64Image);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
   };
 
   return (
@@ -44,11 +63,15 @@ export default function CustomTheme() {
         onChange={handleImageChange}
       />
       <Button
-        className="ms-9 mt-3"
-        label="Custom background image"
+        className="ms-9 mt-3 font-normal"
+        label={translation.settings["custom-background-image"][lang]}
         minimalistic={false}
         onClick={() => dataInputRef.current && dataInputRef.current.click()}
+        icon={<ImageIcon />}
       />
+      <div className="block ms-9 text-xs align-bottom">
+        {translation.settings["format"][lang]} .png .jpg .gif
+      </div>
     </>
   );
 }
diff --git a/src/icons/ImageIcon.tsx b/src/icons/ImageIcon.tsx
@@ -0,0 +1,20 @@
+export default function ImageIcon() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-4 h-4"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+        />
+      </svg>
+    </>
+  );
+}
diff --git a/src/translations/global.json b/src/translations/global.json
@@ -627,6 +627,138 @@
       "fil": "Kulay ng Tema",
       "et": "Teema värv"
     },
+    "custom-background-image": {
+      "en": "Custom background image",
+      "es": "Imagen de fondo personalizada",
+      "fr": "Image d'arrière-plan personnalisée",
+      "de": "Benutzerdefiniertes Hintergrundbild",
+      "ja": "カスタム背景画像",
+      "zh": "自定义背景图",
+      "ru": "Пользовательский фоновый рисунок",
+      "hi": "कस्टम पृष्ठभूमि चित्र",
+      "pt": "Imagem de fundo personalizada",
+      "it": "Immagine di sfondo personalizzata",
+      "ko": "사용자 정의 배경 이미지",
+      "nl": "Aangepaste achtergrondafbeelding",
+      "sv": "Anpassad bakgrundsbild",
+      "tr": "Özel arka plan resmi",
+      "pl": "Niestandardowy obraz tła",
+      "vi": "Hình nền tùy chỉnh",
+      "th": "ภาพพื้นหลังที่กำหนดเอง",
+      "el": "Προσαρμοσμένη εικόνα φόντου",
+      "fi": "Mukautettu taustakuva",
+      "uk": "Користувацьке фонове зображення",
+      "cs": "Vlastní pozadí",
+      "ro": "Imagine de fundal personalizată",
+      "no": "Tilpasset bakgrunnsbilde",
+      "da": "Brugerdefineret baggrundsbillede",
+      "ms": "Imej latar belakang kustom",
+      "hu": "Egyedi háttérkép",
+      "id": "Gambar latar belakang kustom",
+      "bn": "কাস্টম পৃষ্ঠভূমি চিত্র",
+      "sk": "Vlastný pozadí",
+      "fil": "Personalisadong larawan ng likod",
+      "et": "Kohandatud taustapilt"
+    },
+    "format": {
+      "en": "Format",
+      "es": "Formato",
+      "fr": "Format",
+      "de": "Format",
+      "ja": "フォーマット",
+      "zh": "格式",
+      "ru": "Формат",
+      "hi": "स्वरूप",
+      "pt": "Formato",
+      "it": "Formato",
+      "ko": "형식",
+      "nl": "Formaat",
+      "sv": "Format",
+      "tr": "Biçim",
+      "pl": "Format",
+      "vi": "Định dạng",
+      "th": "รูปแบบ",
+      "el": "Μορφή",
+      "fi": "Muoto",
+      "uk": "Формат",
+      "cs": "Formát",
+      "ro": "Format",
+      "no": "Format",
+      "da": "Format",
+      "ms": "Format",
+      "hu": "Formátum",
+      "id": "Format",
+      "bn": "বিন্যাস",
+      "sk": "Formát",
+      "fil": "Anyo",
+      "et": "Vorming"
+    },
+    "allowed-file-types": {
+      "en": "Only image files (JPEG, PNG, GIF) are allowed.",
+      "es": "Solo se permiten archivos de imagen (JPEG, PNG, GIF).",
+      "fr": "Seuls les fichiers image (JPEG, PNG, GIF) sont autorisés.",
+      "de": "Es sind nur Bilddateien (JPEG, PNG, GIF) erlaubt.",
+      "ja": "画像ファイルのみ（JPEG、PNG、GIF）が許可されています。",
+      "zh": "仅允许图像文件（JPEG、PNG、GIF）。",
+      "ru": "Разрешены только файлы изображений (JPEG, PNG, GIF).",
+      "hi": "केवल छवि फ़ाइलें (JPEG, PNG, GIF) अनुमत हैं।",
+      "pt": "Apenas arquivos de imagem (JPEG, PNG, GIF) são permitidos.",
+      "it": "Sono ammessi solo file immagine (JPEG, PNG, GIF).",
+      "ko": "이미지 파일 (JPEG, PNG, GIF) 만 허용됩니다.",
+      "nl": "Alleen afbeeldingsbestanden (JPEG, PNG, GIF) zijn toegestaan.",
+      "sv": "Endast bildfiler (JPEG, PNG, GIF) är tillåtna.",
+      "tr": "Sadece resim dosyalarına izin verilir (JPEG, PNG, GIF).",
+      "pl": "Dozwolone są tylko pliki obrazów (JPEG, PNG, GIF).",
+      "vi": "Chỉ cho phép các tệp hình ảnh (JPEG, PNG, GIF).",
+      "th": "อนุญาตเฉพาะไฟล์รูปภาพ (JPEG, PNG, GIF) เท่านั้น.",
+      "el": "Επιτρέπονται μόνο αρχεία εικόνων (JPEG, PNG, GIF).",
+      "fi": "Vain kuvatiedostot (JPEG, PNG, GIF) ovat sallittuja.",
+      "uk": "Дозволені лише файлові зображень (JPEG, PNG, GIF).",
+      "cs": "Jsou povoleny pouze soubory obrázků (JPEG, PNG, GIF).",
+      "ro": "Sunt permise doar fișiere de imagine (JPEG, PNG, GIF).",
+      "no": "Bare bildefiler (JPEG, PNG, GIF) er tillatt.",
+      "da": "Kun billedfiler (JPEG, PNG, GIF) er tilladt.",
+      "ms": "Hanya fail imej (JPEG, PNG, GIF) yang dibenarkan.",
+      "hu": "Csak kép fájlok (JPEG, PNG, GIF) engedélyezettek.",
+      "id": "Hanya file gambar (JPEG, PNG, GIF) yang diizinkan.",
+      "bn": "কেবল ইমেজ ফাইল (JPEG, PNG, GIF) অনুমোদিত।",
+      "sk": "Povolené sú iba obrazové súbory (JPEG, PNG, GIF).",
+      "fil": "Tanging mga file ng larawan (JPEG, PNG, GIF) ang pinapayagan.",
+      "et": "Lubatud on ainult pildifailid (JPEG, PNG, GIF)."
+    },
+    "max-file-size": {
+      "en": "Maximum file size allowed is",
+      "es": "El tamaño máximo de archivo permitido es",
+      "fr": "La taille maximale de fichier autorisée est de",
+      "de": "Die maximale Dateigröße beträgt",
+      "ja": "許容される最大ファイルサイズは",
+      "zh": "允许的最大文件大小为",
+      "ru": "Максимально допустимый размер файла",
+      "hi": "अनुमत फ़ाइल का अधिकतम आकार है",
+      "pt": "O tamanho máximo de arquivo permitido é",
+      "it": "La dimensione massima del file consentita è",
+      "ko": "허용되는 최대 파일 크기는",
+      "nl": "Maximale bestandsgrootte is",
+      "sv": "Maximal tillåten filstorlek är",
+      "tr": "İzin verilen maksimum dosya boyutu",
+      "pl": "Maksymalny dozwolony rozmiar pliku to",
+      "vi": "Dung lượng tệp tối đa được phép là",
+      "th": "ขนาดไฟล์สูงสุดที่อนุญาตคือ",
+      "el": "Η μέγιστη επιτρεπόμενη μέγεθος αρχείου είναι",
+      "fi": "Sallittu enimmäiskoko on",
+      "uk": "Максимальний допустимий розмір файлу",
+      "cs": "Maximální povolená velikost souboru je",
+      "ro": "Dimensiunea maximă a fișierului permisă este",
+      "no": "Maksimal tillatt filstørrelse er",
+      "da": "Maksimal tilladt filstørrelse er",
+      "ms": "Saiz fail maksimum yang dibenarkan adalah",
+      "hu": "A maximálisan engedélyezett fájlméret",
+      "id": "Ukuran file maksimum yang diizinkan adalah",
+      "bn": "অনুমোদিত সর্বাধিক ফাইল আকার",
+      "sk": "Maximálna povolená veľkosť súboru je",
+      "fil": "Ang pinakamalaking sukat ng file na pinapayagan ay",
+      "et": "Lubatud on maksimaalne faili suurus"
+    },
     "data": {
       "en": "App Data",
       "es": "Datos de la Aplicación",