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