From 9fbceb1fe4bc4c6cc7d894c817689263baab73f9 Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Sat, 15 Oct 2022 18:46:48 +0200
Subject: [PATCH] use custom image component for slideshow

---
 src/renderer/components/shared/bsm-image.component.tsx    | 6 ++++--
 src/renderer/components/slideshow/slideshow.component.tsx | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/shared/bsm-image.component.tsx b/src/renderer/components/shared/bsm-image.component.tsx
index ad0c3ceb..1e6aa242 100644
--- a/src/renderer/components/shared/bsm-image.component.tsx
+++ b/src/renderer/components/shared/bsm-image.component.tsx
@@ -1,6 +1,8 @@
-export function BsmImage({className, image, errorImage, placeholder, loading}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager"}) {
+import { CSSProperties } from "react";
+
+export function BsmImage({className, image, errorImage, placeholder, loading, style}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager", style?: CSSProperties}) {
 
   return (
-    <img className={className} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage ? errorImage : "" }} style={{backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}}/>
+    <img className={`${className} pointer-events-none`} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage || "" }} style={{...style, backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}} alt=""/>
   )
 }
diff --git a/src/renderer/components/slideshow/slideshow.component.tsx b/src/renderer/components/slideshow/slideshow.component.tsx
index 37d44681..0aa4169c 100644
--- a/src/renderer/components/slideshow/slideshow.component.tsx
+++ b/src/renderer/components/slideshow/slideshow.component.tsx
@@ -1,10 +1,11 @@
+import { BsmImage } from '../shared/bsm-image.component';
 import './slideshow.component.css';
 
 export function Slideshow(props: {className: string, images: string[]}) {
   return (
     <div className={`slide ${props.className}`}>
       {
-        props.images.map((i, index) => <img key={index} className='w-full h-full object-cover' src={i} style={{animationDelay: `${index * 10}s`}}></img>)
+        props.images.map((i, index) => <BsmImage key={i} className='w-full h-full object-cover' image={i} style={{animationDelay: `${index * 10}s`}}/>)
       }
     </div>
   )