diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index f00c29e..a5aec00 100644
--- a/components/awtis/awtis-detay.js
+++ b/components/awtis/awtis-detay.js
@@ -1,6 +1,7 @@
'use client'
import {useState} from 'react'
+import Image from 'next/image'
import Link from 'next/link'
import PropTypes from 'prop-types'
import Accordion from '@mui/material/Accordion'
@@ -9,14 +10,12 @@ import AccordionSummary from '@mui/material/AccordionSummary'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import CardActionArea from '@mui/material/CardActionArea'
-import CardMedia from '@mui/material/CardMedia'
import Chip from '@mui/material/Chip'
import Container from '@mui/material/Container'
import Grid from '@mui/material/Grid'
import Paper from '@mui/material/Paper'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
-import Avatar from '@mui/material/Avatar'
import Typography from '@mui/material/Typography'
import {green} from '@mui/material/colors'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
@@ -24,40 +23,15 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
import VerifiedIcon from '@mui/icons-material/Verified'
import {formatKuveti} from '../../lib/kuveti'
-import {PLATFORM_CONFIG, StreamButtonComponent} from '../streaming-buttons'
+import {StreamButton} from '../streaming-buttons'
import AwtisBiyografi from './awtis-biyografi'
import MizikLyen from './mizik-lyen'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
-const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
+const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
-function StreamButton({lyen}) {
- const config = PLATFORM_CONFIG[lyen.plateforme] || {label: lyen.plateforme, bg: '#555', color: '#fff', Icon: null}
- const PlatformIcon = config.Icon
- return (
- : null}
- endIcon={}
- sx={{
- bgcolor: config.bg,
- color: config.color,
- fontWeight: 700,
- fontSize: '0.72rem',
- textTransform: 'none',
- '&:hover': {bgcolor: config.bg, opacity: 0.85},
- }}
- >
- {config.label}
-
- )
-}
-
export default function AwtisDetay({anAwtis}) {
const [esByografiOuve, meteEsByografiOuve] = useState(false)
const {alias, biographie, paroles, photo, isOKIAwtis, titrePhare} = anAwtis
@@ -70,6 +44,10 @@ export default function AwtisDetay({anAwtis}) {
? `${IMAGE_URL}${titrePhare.couverture.formats?.small?.url || titrePhare.couverture.formats?.thumbnail?.url || titrePhare.couverture.url}`
: null
+ const photoUrl = photo?.url
+ ? `${IMAGE_URL}${photo.formats?.small?.url || photo.formats?.thumbnail?.url || photo.url}`
+ : null
+
return (
@@ -79,11 +57,28 @@ export default function AwtisDetay({anAwtis}) {
-
+
+ {photoUrl ? (
+
+ ) : (
+
+ )}
+
{isOKIAwtis && (
@@ -95,7 +90,7 @@ export default function AwtisDetay({anAwtis}) {
sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
/>
- Musiques publiées en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
+ Paroles publiées en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
)}
@@ -123,12 +118,17 @@ export default function AwtisDetay({anAwtis}) {
{coverUrl && (
-
+
+
+
)}
@@ -141,7 +141,7 @@ export default function AwtisDetay({anAwtis}) {
{titrePhare.streamAudio.map((lyen, i) => (
-
+
))}