feat: SmartLogoBackground

src/main/webapp/src/components/SmartLogoBackground.jsx

@@ -0,0 +1,115 @@
+import {useEffect, useRef, useState, memo} from 'react';
+
+const cache = {};
+
+export function SmartLogoBackground({
+                                        src,
+                                        darkBackground = '#333333',
+                                        lightBackground = '#f0f0f0',
+                                        defaultBackground = 'transparent',
+                                        tolerance = 55,
+                                        minPixels = 10, // Seuil minimal de pixels détectés pour appliquer un fond
+                                        alt = 'Logo',
+                                        style = {},
+                                        imgClassName = '',
+                                    }) {
+    const canvasRef = useRef(null);
+    const [background, setBackground] = useState(defaultBackground);
+
+    useEffect(() => {
+        if (cache[src]) {
+            setBackground(cache[src]);
+            return;
+        }
+
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+
+        img.crossOrigin = 'Anonymous';
+        img.src = src;
+
+        img.onload = () => {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const pixels = imageData.data;
+            let lightBorderCount = 0;
+            let darkBorderCount = 0;
+
+            const isTransparent = (i) => pixels[i + 3] === 0;
+            const isLightColor = (i) => {
+                const r = pixels[i];
+                const g = pixels[i + 1];
+                const b = pixels[i + 2];
+                const a = pixels[i + 3];
+                return r > 255 - tolerance && g > 255 - tolerance && b > 255 - tolerance && a > 128;
+            };
+            const isDarkColor = (i) => {
+                const r = pixels[i];
+                const g = pixels[i + 1];
+                const b = pixels[i + 2];
+                const a = pixels[i + 3];
+                return r < tolerance && g < tolerance && b < tolerance && a > 128;
+            };
+
+            // Parcourir une ligne/colonne sur 3
+            for (let y = 0; y < canvas.height; y += Math.max(canvas.height / 500, 1)) {
+                for (let x = 0; x < canvas.width; x += Math.max(canvas.width / 500, 1)) {
+                    const i = Math.round(y * canvas.width + x) * 4;
+                    if (isTransparent(i)) {
+                        const neighbors = [
+                            i - 4, // Haut
+                            i + 4, // Bas
+                            i - 4 * canvas.width, // Gauche
+                            i + 4 * canvas.width, // Droite
+                        ];
+
+                        for (const neighbor of neighbors) {
+                            if (neighbor >= 0 && neighbor < pixels.length) {
+                                if (isLightColor(neighbor)) lightBorderCount++;
+                                if (isDarkColor(neighbor)) darkBorderCount++;
+                            }
+                        }
+                    }
+
+
+                    if (lightBorderCount >= 25 || darkBorderCount >= 25)
+                        break
+                }
+
+                if (lightBorderCount > darkBorderCount && lightBorderCount >= minPixels) {
+                    cache[src] = darkBackground;
+                    setBackground(darkBackground)
+                } else if (darkBorderCount > lightBorderCount && darkBorderCount >= minPixels) {
+                    cache[src] = lightBackground;
+                    setBackground(lightBackground)
+                } else {
+                    cache[src] = defaultBackground;
+                    setBackground(defaultBackground)
+                }
+            }
+        }
+
+        // Prevent error logging
+        img.onerror = e => {
+            //e.stopPropagation()
+            //e.stopImmediatePropagation()
+            //e.preventDefault()
+        }
+    }, [src, darkBackground, lightBackground, defaultBackground, tolerance, minPixels]);
+
+    return <>
+        <img className={imgClassName} src={src} alt={alt} style={{...style, filter: `drop-shadow(0 0 1rem ${background})`}}
+             onError={e => {
+                 e.preventDefault()
+                 e.target.style.opacity = "0"
+             }
+             } onLoad={e => e.target.style.opacity = "1"}/>
+        <canvas ref={canvasRef} style={{display: 'none'}}/>
+    </>
+}
+
+export const SmartLogoBackgroundMemo = memo(SmartLogoBackground);

src/main/webapp/src/pages/admin/club/ClubPage.jsx

@@ -14,6 +14,7 @@ import {ContactEditor} from "../../../components/Club/ContactEditor.jsx";
 import {HoraireEditor} from "../../../components/Club/HoraireEditor.jsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faFilePdf} from "@fortawesome/free-solid-svg-icons";
+import {SmartLogoBackground} from "../../../components/SmartLogoBackground.jsx";
 
 const vite_url = import.meta.env.VITE_URL;
 
@@ -109,10 +110,10 @@ function InformationForm({data}) {
                     <TextField name="name" text="Nom" value={data.name}/>
                     <CountryList name="country" text="Pays" value={data.country}/>
 
-                    <img
+                    <SmartLogoBackground
                         src={`${vite_url}/api/club/${data.clubId}/logo`}
                         alt="avatar"
-                        className="img-fluid" style={{object_fit: 'contain', maxHeight: '15em'}}/>
+                        imgClassName="img-fluid" style={{object_fit: 'contain', maxHeight: '15em'}}/>
                     <div className="mb-3">
                         <div className="input-group">
                             <label className="input-group-text" htmlFor="logo">Blason</label>

src/main/webapp/src/pages/club/club/MyClubPage.jsx

@@ -12,6 +12,7 @@ import {ContactEditor} from "../../../components/Club/ContactEditor.jsx";
 import {HoraireEditor} from "../../../components/Club/HoraireEditor.jsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faFilePdf} from "@fortawesome/free-solid-svg-icons";
+import {SmartLogoBackground} from "../../../components/SmartLogoBackground.jsx";
 
 const vite_url = import.meta.env.VITE_URL;
 
@@ -80,10 +81,10 @@ function InformationForm({data}) {
 
                     <div className="row mb-3">
                         <div className="col-md-6">
-                            <img
+                            <SmartLogoBackground
                                 src={`${vite_url}/api/club/${data.clubId}/logo`}
                                 alt="avatar"
-                                className="img-fluid" style={{object_fit: 'contain', maxHeight: '15em'}}/>
+                                ingClassName="img-fluid" style={{object_fit: 'contain', maxHeight: '15em'}}/>
                         </div>
                         <div className="col-md-6">
                             <a href={`${vite_url}/api/club/${data.id}/status`} target='_blank'>