diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index af89376..113f5d7 100644
--- a/components/awtis/awtis-detay.js
+++ b/components/awtis/awtis-detay.js
@@ -21,25 +21,13 @@ 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 {StreamButton} from '../streaming-buttons'
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'
diff --git a/components/streaming-buttons.js b/components/streaming-buttons.js
new file mode 100644
index 0000000..7f5e4b6
--- /dev/null
+++ b/components/streaming-buttons.js
@@ -0,0 +1,41 @@
+'use client'
+
+import Button from '@mui/material/Button'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import {Spotify, Applemusic, Deezer, Tidal, Youtubemusic, Amazon, Soundcloud} from '@icons-pack/react-simple-icons'
+
+export 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},
+}
+
+export 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}
+
+ )
+}
diff --git a/components/teks/teks.js b/components/teks/teks.js
index 186877c..54dd5db 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -20,6 +20,7 @@ import {formatKuveti} from '../../lib/kuveti'
import LicenseModal from '../cc/license-modal'
import FilesDialog from '../files/files-dialog'
+import {StreamButton} from '../streaming-buttons'
import EntegreMizik from './entegre-mizik'
import OkiMizik from './oki-mizik'
import DiferansDialog from './diferans-dialog'
@@ -217,6 +218,18 @@ export default function Teks({parole}) {
{parole?.difference?.length > 0 && (
)}
+ {parole.streamAudio?.length > 0 && (
+
+
+ Écouter sur
+
+
+ {parole.streamAudio.map((lyen, i) => (
+
+ ))}
+
+
+ )}
0 ? 6 : null}}>