diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index 562969b..af89376 100644
--- a/components/awtis/awtis-detay.js
+++ b/components/awtis/awtis-detay.js
@@ -9,6 +9,7 @@ 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'
@@ -20,44 +21,83 @@ import Typography from '@mui/material/Typography'
import {green} from '@mui/material/colors'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
-
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import VerifiedIcon from '@mui/icons-material/Verified'
+import {Spotify, Applemusic, Deezer, Tidal, Youtubemusic, Amazon, Soundcloud} from '@icons-pack/react-simple-icons'
import {formatKuveti} from '../../lib/kuveti'
import AwtisBiyografi from './awtis-biyografi'
import MizikLyen from './mizik-lyen'
+const PLATFORM_CONFIG = {
+ Spotify: {label: 'Spotify', bg: '#1DB954', color: '#fff', Icon: Spotify},
+ Applemusic: {label: 'Apple Music', bg: '#FC3C44', color: '#fff', Icon: Applemusic},
+ Deezer: {label: 'Deezer', bg: '#EF5466', color: '#fff', Icon: Deezer},
+ Tidal: {label: 'Tidal', bg: '#000000', color: '#fff', Icon: Tidal},
+ Qobuz: {label: 'Qobuz', bg: '#00245B', color: '#fff', Icon: null},
+ Youtubemusic: {label: 'YouTube Music', bg: '#FF0000', color: '#fff', Icon: Youtubemusic},
+ Amazon: {label: 'Amazon Music', bg: '#00A8E1', color: '#fff', Icon: Amazon},
+ Soundcloud: {label: 'SoundCloud', bg: '#FF5500', color: '#fff', Icon: Soundcloud},
+}
+
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
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} = anAwtis
+ const {alias, biographie, paroles, photo, isOKIAwtis, titrePhare} = anAwtis
const sortedTeks = sortTeks(paroles)
const gwanBiyo = biographie && biographie.length > 100
-
const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
- const handleClick = () => {
- meteEsByografiOuve(true)
- }
+ const hasStreaming = isOKIAwtis && titrePhare?.streamAudio?.length > 0
+ const coverUrl = titrePhare?.couverture
+ ? `${IMAGE_URL}${titrePhare.couverture.formats?.small?.url || titrePhare.couverture.formats?.thumbnail?.url || titrePhare.couverture.url}`
+ : null
return (
-
+
{alias}
-
+
+
+
{isOKIAwtis && (
)}
-
+
+
{biyo && (
-
+ meteEsByografiOuve(true)}>
Biographie
@@ -88,6 +129,39 @@ export default function AwtisDetay({anAwtis}) {
)}
+ {hasStreaming && (
+
+
+
+ {coverUrl && (
+
+
+
+ )}
+
+
+
+ {titrePhare.titre}
+
+
+ Écouter sur
+
+
+ {titrePhare.streamAudio.map((lyen, i) => (
+
+ ))}
+
+
+
+
+
+
+ )}
{paroles.length > 1 ? (
@@ -97,14 +171,13 @@ export default function AwtisDetay({anAwtis}) {
aria-controls='panel-teks-content'
id='panel-teks-header'
>
- Liste des paroles
+ Liste des paroles
{sortedTeks.map(anPawol => {
const {couverture} = anPawol
const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture)
-
return (
@@ -128,13 +201,15 @@ export default function AwtisDetay({anAwtis}) {
-
+
+
}>
Retour aux artistes
+
{esByografiOuve && (