available versions page fully tranlated (exept dates)

assets/jsons/translations/en-EN.json

@@ -1,5 +1,12 @@
 {
+   "misc":{
+      "download": "Download",
+      "verify": "Verify"
+   },
    "pages":{
+      "available-versions":{
+         "title": "Select a version"
+      },
       "settings":{
          "steam":{
             "title":"Steam",

assets/jsons/translations/en-US.json

@@ -1,5 +1,12 @@
 {
+   "misc":{
+      "download": "Download",
+      "verify": "Verify"
+   },
    "pages":{
+      "available-versions":{
+         "title": "Select a version"
+      },
       "settings":{
          "steam":{
             "title":"Steam",

assets/jsons/translations/es-ES.json

@@ -1,5 +1,12 @@
 {
+   "misc":{
+      "download": "Descargar",
+      "verify": "Verificar"
+   },
 	"pages":{
+      "available-versions":{
+         "title": "Seleccione una versión"
+      },
 		"settings":{
 			"steam":{
             "title":"Steam",

assets/jsons/translations/fr-FR.json

@@ -1,5 +1,12 @@
 {
+   "misc":{
+      "download": "Télécharger",
+      "verify": "Vérifier"
+   },
    "pages":{
+      "available-versions":{
+         "title": "Choisi une version"
+      },
       "settings":{
          "steam":{
          	"title":"Steam",

src/renderer/hooks/use-translation.hook.ts

@@ -6,6 +6,9 @@ export function useTranslation(): (translationKey: string) => string{
     const i18nService = I18nService.getInstance();
 
     return (key: string) => {
-        return useMemo(() => i18nService.translate(key), [key, i18nService.currentLanguage]);
+        return useMemo(() => {
+         const tranlatables = key.split(" ");
+         return tranlatables.map((key) => i18nService.translate(key)).join(" ");
+      }, [key, i18nService.currentLanguage]);
     }
 }

src/renderer/pages/available-versions-list.components.tsx

@@ -6,8 +6,9 @@ import { BSVersion } from "main/services/bs-version-manager.service";
 import { ProgressBarService } from "renderer/services/progress-bar.service";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { AnimatePresence, motion } from "framer-motion";
-import { distinctUntilChanged } from "rxjs";
 import { NotificationService } from "renderer/services/notification.service";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
 
 export function AvailableVersionsList() {
 
@@ -23,9 +24,10 @@ export function AvailableVersionsList() {
   const bsDownloaderService: BsDownloaderService = BsDownloaderService.getInstance();
   const progressBarService: ProgressBarService = ProgressBarService.getInstance();
   const notificationService: NotificationService = NotificationService.getInstance();
+  const versionManagerService: BSVersionManagerService = BSVersionManagerService.getInstance();
 
   const [versionSelected, setVersionSelected] = useState(null as BSVersion);
-  const [progressBarVisible, setProgressBarVisible] = useState(false);
+  const t = useTranslation();
 
   const startDownload = () => {
     if(progressBarService.visible$.value){ return; }
@@ -44,10 +46,6 @@ export function AvailableVersionsList() {
       setVersionSelected(version);
     });
 
-    const progressBarVisibleSub = progressBarService.visible$.pipe(distinctUntilChanged()).subscribe(visible => {
-      setProgressBarVisible(visible);
-    })
-
     return () => {
       versionSelectedSub.unsubscribe();
     }
@@ -57,13 +55,13 @@ export function AvailableVersionsList() {
   return (
     <div className="relative h-full w-full flex items-center flex-col pt-2">
       <Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
-      <h1 className="text-gray-100 text-2xl mb-4 z-[1]">Select a Version</h1>
+      <h1 className="text-gray-100 text-2xl mb-4 z-[1]">{t("pages.available-versions.title")}</h1>
       <AvailableVersionsSlider/>
 
       <AnimatePresence>
         { versionSelected && !progressBarService.visible$.value && (
           <motion.div initial={{y:"150%"}} animate={{y:"0%"}} exit={{y:"150%"}} className="absolute bottom-5" onClick={startDownload}>
-            <BsmButton text={`Download`} className="relative bg-light-main-color-2 text-gray-800 dark:text-gray-100 dark:bg-main-color-2 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black"/>
+            <BsmButton text={versionManagerService.isVersionInstalled(versionSelected) ? "misc.verify" : "misc.download"} className="relative bg-light-main-color-2 text-gray-800 dark:text-gray-100 dark:bg-main-color-2 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black"/>
           </motion.div>
         )}
       </AnimatePresence>

src/renderer/services/bs-version-manager.service.ts

@@ -51,6 +51,10 @@ export class BSVersionManagerService {
       return [...new Set(this.availableVersions$.value.map(v => v.year))].sort((a, b) => b.localeCompare(a));
     }
 
+    public isVersionInstalled(version: BSVersion): boolean{
+      return !!this.getInstalledVersions().find(v => v.BSVersion === version.BSVersion && v.steam === version.steam);
+    }
+
     public getAvaibleVersionsOfYear(year: string): BSVersion[]{
       return this.availableVersions$.value.filter(v => v.year === year).sort((a, b) => +b.ReleaseDate - +a.ReleaseDate);
     }