Cédric FAMIBELLE-PRONZOLA
138 lines
3.6 KiB
JavaScript
138 lines
3.6 KiB
JavaScript
import {Box, IconButton, Typography} from '@material-ui/core'
|
|
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
|
|
import {
|
|
Tidal,
|
|
Spotify,
|
|
Deezer,
|
|
Soundcloud
|
|
} from '@icons-pack/react-simple-icons'
|
|
import {useEffect, useState} from 'react'
|
|
|
|
const kouteyAchteyIcons = {
|
|
Tidal: <Tidal />,
|
|
Deezer: <Deezer />,
|
|
Spotify: <Spotify />,
|
|
Soundcloud: <Soundcloud />
|
|
}
|
|
|
|
function RannIframe({boutik, url, isMobile}) {
|
|
let src = ''
|
|
if (boutik === 'Tidal') {
|
|
const trackArray = url.split('/')
|
|
const trackId = trackArray[trackArray.length - 1]
|
|
src = `https://embed.tidal.com/tracks/${trackId}?disableAnalytics=true`
|
|
} else if (boutik === 'Deezer') {
|
|
const trackArray = url.split('/')
|
|
const trackId = trackArray[trackArray.length - 1]
|
|
src = `https://widget.deezer.com/widget/auto/track/${trackId}?tracklist=false`
|
|
} else if (boutik === 'Spotify') {
|
|
const trackArray = url.split('/')
|
|
const trackId = trackArray[trackArray.length - 1]
|
|
src = `https://open.spotify.com/embed/track/${trackId}`
|
|
} else if (boutik === 'Soundcloud') {
|
|
src = `https://w.soundcloud.com/player/?url=${url}`
|
|
}
|
|
|
|
return (
|
|
<div style={{marginTop: 5}}>
|
|
{boutik === 'Tidal' && (
|
|
<iframe
|
|
src={src}
|
|
allowFullScreen='allowfullscreen'
|
|
frameBorder='0'
|
|
width={`${isMobile ? '100%' : '50%'}`}
|
|
height='96px'
|
|
/>
|
|
)}
|
|
|
|
{boutik === 'Deezer' && (
|
|
<iframe
|
|
title='deezer-widget'
|
|
frameBorder='0'
|
|
src={src}
|
|
allow='encrypted-media; clipboard-write'
|
|
allowtransparency='true'
|
|
/>
|
|
)}
|
|
|
|
{boutik === 'Spotify' && (
|
|
<iframe
|
|
src={src}
|
|
width={`${isMobile ? '100%' : '50%'}`}
|
|
height='80'
|
|
frameBorder='0'
|
|
allowtransparency='true'
|
|
allow='encrypted-media'
|
|
/>
|
|
)}
|
|
|
|
{boutik === 'Soundcloud' && (
|
|
<iframe
|
|
src={src}
|
|
width={`${isMobile ? '100%' : '50%'}`}
|
|
height='166'
|
|
scrolling='no'
|
|
frameBorder='no'
|
|
/>
|
|
)}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function EntegreMizik({anTeks, isMobile}) {
|
|
const [chwaMizik, meteChwaMizik] = useState(null)
|
|
const router = useRouter()
|
|
const {kouteyAchtey, slug, okiMizikID} = anTeks
|
|
const filteredKouteyAchtey = kouteyAchtey.filter(({boutik}) => boutik === 'Tidal' || boutik === 'Spotify' || boutik === 'Deezer' || boutik === 'Soundcloud')
|
|
|
|
const handleClick = (boutik, url) => {
|
|
if (chwaMizik && chwaMizik.boutik === boutik) {
|
|
return meteChwaMizik(null)
|
|
}
|
|
|
|
meteChwaMizik({boutik, url})
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (router.asPath === `/teks/${slug}` || router.asPath === `/teks/${slug}#${slug}`) {
|
|
meteChwaMizik(null)
|
|
}
|
|
}, [router, slug])
|
|
|
|
return (
|
|
<Box align='center'>
|
|
<Typography variant='overline' display='block'>
|
|
Écouter {okiMizikID ? '' : 'un extrait'}
|
|
</Typography>
|
|
|
|
{!okiMizikID && filteredKouteyAchtey.map(({_id, boutik, url}) => {
|
|
return (
|
|
<IconButton key={_id} aria-label='player' onClick={() => handleClick(boutik, url)}>
|
|
{kouteyAchteyIcons[boutik]}
|
|
</IconButton>
|
|
)
|
|
})}
|
|
|
|
{chwaMizik && (
|
|
<RannIframe boutik={chwaMizik.boutik} url={chwaMizik.url} isMobile={isMobile} />
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
EntegreMizik.propTypes = {
|
|
anTeks: PropTypes.object.isRequired,
|
|
isMobile: PropTypes.bool.isRequired
|
|
}
|
|
|
|
RannIframe.propTypes = {
|
|
boutik: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
isMobile: PropTypes.bool.isRequired
|
|
}
|
|
|
|
export default EntegreMizik
|