From c4dca87b613a5183ffb86d186356d17a28e81c8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sat, 4 Jul 2026 01:20:53 +0400
Subject: [PATCH] fix: unifier la logique de choix de taille d'image via
 formatKuveti

---
 components/awtis/awtis-detay.js  |  8 +++----
 components/awtis/awtis-kat.js    |  3 ++-
 components/awtis/cheche-awtis.js |  3 ++-
 components/awtis/mizik-lis.js    |  2 +-
 components/teks/lekte.js         |  8 ++++---
 components/teks/teks-kat.js      |  3 ++-
 lib/__tests__/kuveti.test.js     | 38 ++++++++++++++++++++++++++++++++
 lib/kuveti.js                    |  7 +++---
 8 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 lib/__tests__/kuveti.test.js

diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index 972b674..83f89e1 100644
--- a/components/awtis/awtis-detay.js
+++ b/components/awtis/awtis-detay.js
@@ -45,11 +45,11 @@ export default function AwtisDetay({anAwtis}) {
 
   const hasStreaming = isExclusiveArtist && titrePhare?.streamAudio?.length > 0
   const coverUrl = titrePhare?.couverture
-    ? `${IMAGE_URL}${titrePhare.couverture.formats?.small?.url || titrePhare.couverture.formats?.thumbnail?.url || titrePhare.couverture.url}`
+    ? `${IMAGE_URL}${formatKuveti(titrePhare.couverture, 'small')?.url}`
     : null
 
   const photoUrl = photo?.url
-    ? `${IMAGE_URL}${photo.formats?.small?.url || photo.formats?.thumbnail?.url || photo.url}`
+    ? `${IMAGE_URL}${formatKuveti(photo, 'small')?.url}`
     : null
 
   return (
@@ -193,7 +193,7 @@ export default function AwtisDetay({anAwtis}) {
               <AccordionDetails sx={{paddingInline: 0}}>
                 {sortedTeks.map(anPawol => {
                   const {couverture} = anPawol
-                  const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture, 'small')
+                  const kuvetiFormat = formatKuveti(couverture, 'thumbnail')
                   return (
                     <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
                       <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
@@ -210,7 +210,7 @@ export default function AwtisDetay({anAwtis}) {
             <Box>
               <Typography gutterBottom variant='body1'><strong>Parole</strong></Typography>
               <Paper sx={{paddingBlock: 2}}>
-                <MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture, 'small')} />
+                <MizikLyen anPawol={paroles[0]} kuveti={formatKuveti(paroles[0].couverture, 'thumbnail')} />
               </Paper>
             </Box>
           )}
diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js
index 921e9ba..c508c8c 100644
--- a/components/awtis/awtis-kat.js
+++ b/components/awtis/awtis-kat.js
@@ -15,6 +15,7 @@ import Chip from '@mui/material/Chip'
 import {styled} from '@mui/material/styles'
 import VerifiedIcon from '@mui/icons-material/Verified'
 
+import {formatKuveti} from '../../lib/kuveti'
 import AwtisBiyografi from './awtis-biyografi'
 
 const PREFIX = 'awtis-kat'
@@ -82,7 +83,7 @@ export default function AwtisKat({artiste}) {
               className={classes.media}
               component='img'
               alt={alias}
-              image={`${photo?.url ? `${IMAGE_URL}${photo?.formats?.thumbnail?.url || photo?.url}` : noImageUrl}`}
+              image={`${photo?.url ? `${IMAGE_URL}${formatKuveti(photo, 'thumbnail')?.url}` : noImageUrl}`}
             loading='lazy'
               title={alias}
             />
diff --git a/components/awtis/cheche-awtis.js b/components/awtis/cheche-awtis.js
index 3d3c897..36125cf 100644
--- a/components/awtis/cheche-awtis.js
+++ b/components/awtis/cheche-awtis.js
@@ -9,6 +9,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import Container from '@mui/material/Container'
 
 import {jwennToutAwtis} from '../../lib/oki-api'
+import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -79,7 +80,7 @@ export default function ChecheAwtis() {
               <Avatar
                 style={{ marginRight: 8 }}
                 alt={option?.alias}
-                src={`${IMAGE_URL}${option?.photo?.formats?.thumbnail?.url || option?.photo?.url || ''}`}
+                src={`${IMAGE_URL}${formatKuveti(option?.photo, 'thumbnail')?.url || ''}`}
               />
               {option?.alias}
             </li>
diff --git a/components/awtis/mizik-lis.js b/components/awtis/mizik-lis.js
index cea36e4..c68fb77 100644
--- a/components/awtis/mizik-lis.js
+++ b/components/awtis/mizik-lis.js
@@ -34,7 +34,7 @@ export default function MizikLis({niAwtis, paroles, meteEsMobilOuve}) {
       itemContent={index => {
         const anPawol = pawol[index]
         const {couverture} = anPawol
-        const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture, 'small')
+        const kuvetiFormat = formatKuveti(couverture, 'thumbnail')
 
         return (
           <MizikLyen niAwtis={niAwtis} anPawol={anPawol} kuveti={kuvetiFormat} slug={params.slug} meteEsMobilOuve={meteEsMobilOuve} />
diff --git a/components/teks/lekte.js b/components/teks/lekte.js
index 408bfcb..9cee8ee 100644
--- a/components/teks/lekte.js
+++ b/components/teks/lekte.js
@@ -17,6 +17,7 @@ import {grey} from '@mui/material/colors'
 import {Link} from '@mui/material'
 
 import {getAlias} from '../../lib/utils/format'
+import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -187,9 +188,10 @@ export default function Lekte({audio, url, parole}) {
     audioRef.current.volume = value / 100
   }
 
-  const imagePath = parole?.couverture?.formats?.thumbnail?.url
-  const width = parole?.couverture?.formats?.thumbnail?.width || 192
-  const height = parole?.couverture?.formats?.thumbnail?.height || 192
+  const couvertureFormat = formatKuveti(parole?.couverture, 'thumbnail')
+  const imagePath = couvertureFormat?.url
+  const width = couvertureFormat?.width || 192
+  const height = couvertureFormat?.height || 192
 
   const imageSrc = imagePath
     ? new URL(imagePath, IMAGE_URL).toString()
diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js
index 80e5e52..444eef8 100644
--- a/components/teks/teks-kat.js
+++ b/components/teks/teks-kat.js
@@ -16,6 +16,7 @@ import ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 
 import {getAlias} from '../../lib/utils/format'
+import {formatKuveti} from '../../lib/kuveti'
 
 const PREFIX = 'teks-kat'
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
@@ -50,7 +51,7 @@ export default function TeksKat({parole}) {
           <Box sx={{position: 'relative', height: 240}}>
             {couverture?.url ? (
               <Image
-                src={`${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}`}
+                src={`${IMAGE_URL}${formatKuveti(couverture, 'thumbnail')?.url}`}
                 alt={titre}
                 fill
                 placeholder='blur'
diff --git a/lib/__tests__/kuveti.test.js b/lib/__tests__/kuveti.test.js
new file mode 100644
index 0000000..9ff067e
--- /dev/null
+++ b/lib/__tests__/kuveti.test.js
@@ -0,0 +1,38 @@
+import {describe, it, expect} from 'vitest'
+import {formatKuveti} from '../kuveti'
+
+const kuveti = {
+  url: '/uploads/original.jpg',
+  formats: {
+    thumbnail: {url: '/uploads/thumbnail.jpg', width: 156, height: 156},
+    small: {url: '/uploads/small.jpg', width: 500, height: 500},
+    medium: {url: '/uploads/medium.jpg', width: 750, height: 750},
+    large: {url: '/uploads/large.jpg', width: 1000, height: 1000},
+  }
+}
+
+describe('formatKuveti', () => {
+  it('returns null when there is no image', () => {
+    expect(formatKuveti(null)).toBeNull()
+    expect(formatKuveti(undefined)).toBeNull()
+  })
+
+  it('defaults to the large format', () => {
+    expect(formatKuveti(kuveti)).toBe(kuveti.formats.large)
+  })
+
+  it('prefers the thumbnail format when asked', () => {
+    expect(formatKuveti(kuveti, 'thumbnail')).toBe(kuveti.formats.thumbnail)
+  })
+
+  it('falls back to small then medium then large when thumbnail is missing', () => {
+    const {thumbnail, ...rest} = kuveti.formats
+    const withoutThumbnail = {...kuveti, formats: rest}
+    expect(formatKuveti(withoutThumbnail, 'thumbnail')).toBe(rest.small)
+  })
+
+  it('falls back to the original file when no format matches', () => {
+    const noFormats = {url: '/uploads/original.jpg', formats: {}}
+    expect(formatKuveti(noFormats, 'thumbnail')).toBe(noFormats)
+  })
+})
diff --git a/lib/kuveti.js b/lib/kuveti.js
index c5ddd99..864c00f 100644
--- a/lib/kuveti.js
+++ b/lib/kuveti.js
@@ -1,7 +1,8 @@
 const SIZE_ORDER = {
-  large:  ['large', 'medium', 'small'],
-  medium: ['medium', 'small', 'large'],
-  small:  ['small', 'medium', 'large'],
+  large:     ['large', 'medium', 'small'],
+  medium:    ['medium', 'small', 'large'],
+  small:     ['small', 'medium', 'large'],
+  thumbnail: ['thumbnail', 'small', 'medium', 'large'],
 }
 
 export const formatKuveti = (kuveti, preferred = 'large') => {