feat: display stream links on teks

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'
 

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 (
+    <Button
+      href={lyen.url}
+      target='_blank'
+      rel='noopener noreferrer'
+      size='small'
+      startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
+      endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
+      sx={{
+        bgcolor: config.bg,
+        color: config.color,
+        fontWeight: 700,
+        fontSize: '0.72rem',
+        textTransform: 'none',
+        '&:hover': {bgcolor: config.bg, opacity: 0.85},
+      }}
+    >
+      {config.label}
+    </Button>
+  )
+}

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 && (
           <DiferansDialog difference={parole.difference} />
         )}
+        {parole.streamAudio?.length > 0 && (
+          <Box sx={{mt: 2, mb: 1}}>
+            <Typography variant='overline' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
+              Écouter sur
+            </Typography>
+            <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
+              {parole.streamAudio.map((lyen, i) => (
+                <StreamButton key={i} lyen={lyen} />
+              ))}
+            </Box>
+          </Box>
+        )}
       </Box>
       <Grid container justifycontent='center' spacing={1}>
         <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>