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>
           )}

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}
             />

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>

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} />

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 couvertureFormat = formatKuveti(parole?.couverture, 'thumbnail')
-  const width = parole?.couverture?.formats?.thumbnail?.width || 192
+  const imagePath = couvertureFormat?.url
-  const height = parole?.couverture?.formats?.thumbnail?.height || 192
+  const width = couvertureFormat?.width || 192
+  const height = couvertureFormat?.height || 192
 
   const imageSrc = imagePath
     ? new URL(imagePath, IMAGE_URL).toString()

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'

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)
+  })
+})

lib/kuveti.js

@@ -1,7 +1,8 @@
 const SIZE_ORDER = {
-  large:  ['large', 'medium', 'small'],
+  large:     ['large', 'medium', 'small'],
-  medium: ['medium', 'small', 'large'],
+  medium:    ['medium', 'small', 'large'],
-  small:  ['small', 'medium', 'large'],
+  small:     ['small', 'medium', 'large'],
+  thumbnail: ['thumbnail', 'small', 'medium', 'large'],
 }
 
 export const formatKuveti = (kuveti, preferred = 'large') => {