From 00752c3971b66d3431ee7c34a6778aeb38921be3 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 19 Jun 2022 21:54:48 +0200
Subject: [PATCH] use of new custom image component and add css scale effect

---
 .../available-version-item.component.tsx                  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx
index 5e6ebc3a..ca32ee08 100644
--- a/src/renderer/components/available-versions/available-version-item.component.tsx
+++ b/src/renderer/components/available-versions/available-version-item.component.tsx
@@ -6,6 +6,7 @@ import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { distinctUntilChanged } from "rxjs";
 import defaultImage from '../../../../assets/default-version-img.jpg'
 import dateFormat from "dateformat";
+import { BsmImage } from "../shared/bsm-image.component";
 
 export function AvailableVersionItem(props: {version: BSVersion}) {
 
@@ -16,6 +17,7 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
   const formatedDate = (() => { return dateFormat(+props.version.ReleaseDate*1000, "ddd. dS mmm yyyy"); })()
 
   const toggleSelect = () => {
+    if(bsDownloaderService.isDownloading){ return; }
     if(selected){ bsDownloaderService.selectedBsVersion$.next(null); }
     else{ bsDownloaderService.selectedBsVersion$.next(props.version); }
   }
@@ -33,11 +35,11 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
   }, [])
 
   return (
-    <div className="group m-3 relative w-72 h-60" onClick={toggleSelect}>
+    <div className="group m-3 relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect}>
       <div className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "opacity-100"}`}></div>
       <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 bg-main-color-2 cursor-pointer group-hover:shadow-none duration-300 ${!selected && "shadow-lg shadow-gray-900"}`}>
-        <img alt="version image" src={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy" onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = defaultImage }}></img>
-        <img src={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy" onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = defaultImage }}/>
+        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
+        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
         <div className="relative z-[1] p-2 w-full flex items-center justify-between grow">
           <div>
             <span className="block text-xl font-bold text-white tracking-wider">{props.version.BSVersion}</span>