ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adapt EntegreMizik component to new properties

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-05-20 02:20:09 +04:00
parent e76a7cf8cc
commit 5fc44efe3e
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/teks/entegre-mizik.js
+18 -18
View File
@@ -17,9 +17,9 @@ const kouteyAchteyIcons = {
Soundcloud: <Soundcloud /> Soundcloud: <Soundcloud />
} }
function RannIframe({boutik, url, isMobile}) { function RannIframe({plateforme, url, isMobile}) {
let src = '' let src = ''
switch (boutik) { switch (plateforme) {
case 'Tidal': { case 'Tidal': {
const trackArray = url.split('/') const trackArray = url.split('/')
const trackId = trackArray[trackArray.length - 1] const trackId = trackArray[trackArray.length - 1]
@@ -54,7 +54,7 @@ function RannIframe({boutik, url, isMobile}) {
return ( return (
<div style={{marginTop: 5}}> <div style={{marginTop: 5}}>
{boutik === 'Tidal' && ( {plateforme === 'Tidal' && (
<iframe <iframe
src={src} src={src}
allowFullScreen='allowfullscreen' allowFullScreen='allowfullscreen'
@@ -64,7 +64,7 @@ function RannIframe({boutik, url, isMobile}) {
/> />
)} )}
{boutik === 'Deezer' && ( {plateforme === 'Deezer' && (
<iframe <iframe
title='deezer-widget' title='deezer-widget'
frameBorder='0' frameBorder='0'
@@ -74,7 +74,7 @@ function RannIframe({boutik, url, isMobile}) {
/> />
)} )}
{boutik === 'Spotify' && ( {plateforme === 'Spotify' && (
<iframe <iframe
src={src} src={src}
width={`${isMobile ? '100%' : '50%'}`} width={`${isMobile ? '100%' : '50%'}`}
@@ -85,7 +85,7 @@ function RannIframe({boutik, url, isMobile}) {
/> />
)} )}
{boutik === 'Soundcloud' && ( {plateforme === 'Soundcloud' && (
<iframe <iframe
src={src} src={src}
width={`${isMobile ? '100%' : '50%'}`} width={`${isMobile ? '100%' : '50%'}`}
@@ -99,18 +99,18 @@ function RannIframe({boutik, url, isMobile}) {
) )
} }
function EntegreMizik({anTeks, isMobile}) { function EntegreMizik({parole, isMobile}) {
const [chwaMizik, meteChwaMizik] = useState(null) const [chwaMizik, meteChwaMizik] = useState(null)
const router = useRouter() const router = useRouter()
const {kouteyAchtey, slug, okiMizikID} = anTeks const {streamAudio, slug, okiMizikID} = parole
const filteredKouteyAchtey = kouteyAchtey.filter(({boutik}) => boutik === 'Tidal' || boutik === 'Spotify' || boutik === 'Deezer' || boutik === 'Soundcloud') const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud')
const handleClick = (boutik, url) => { const handleClick = (plateforme, url) => {
if (chwaMizik && chwaMizik.boutik === boutik) { if (chwaMizik && chwaMizik.plateforme === plateforme) {
return meteChwaMizik(null) return meteChwaMizik(null)
} }
meteChwaMizik({boutik, url}) meteChwaMizik({plateforme, url})
} }
useEffect(() => { useEffect(() => {
@@ -121,31 +121,31 @@ function EntegreMizik({anTeks, isMobile}) {
return ( return (
<Box align='center'> <Box align='center'>
{!okiMizikID && filteredKouteyAchtey.map(({id, boutik, url}) => ( {!okiMizikID && filteredKouteyAchtey.map(({id, plateforme, url}) => (
<IconButton <IconButton
key={id} key={id}
aria-label='player' aria-label='player'
size='large' size='large'
onClick={() => handleClick(boutik, url)} onClick={() => handleClick(plateforme, url)}
> >
{kouteyAchteyIcons[boutik]} {kouteyAchteyIcons[plateforme]}
</IconButton> </IconButton>
))} ))}
{chwaMizik && ( {chwaMizik && (
<RannIframe boutik={chwaMizik.boutik} url={chwaMizik.url} isMobile={isMobile} /> <RannIframe plateforme={chwaMizik.plateforme} url={chwaMizik.url} isMobile={isMobile} />
)} )}
</Box> </Box>
) )
} }
EntegreMizik.propTypes = { EntegreMizik.propTypes = {
anTeks: PropTypes.object.isRequired, parole: PropTypes.object.isRequired,
isMobile: PropTypes.bool.isRequired isMobile: PropTypes.bool.isRequired
} }
RannIframe.propTypes = { RannIframe.propTypes = {
boutik: PropTypes.string.isRequired, plateforme: PropTypes.string.isRequired,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
isMobile: PropTypes.bool.isRequired isMobile: PropTypes.bool.isRequired
} }