pawol.nu/components/teks/entegre-mizik.js

import {Box, IconButton} from '@mui/material'
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'

import {
  Tidal,
  Spotify,
  Deezer,
  Soundcloud,
  Applemusic
} from '@icons-pack/react-simple-icons'
import {useEffect, useState} from 'react'

const kouteyAchteyIcons = {
  Tidal: <Tidal />,
  Deezer: <Deezer />,
  Spotify: <Spotify />,
  Soundcloud: <Soundcloud />,
  Applemusic: <Applemusic />
}

function RannIframe({plateforme, url, isMobile}) {
  let src = ''
  switch (plateforme) {
    case 'Tidal': {
      const trackArray = url.split('/')
      const trackId = trackArray[trackArray.length - 1]
      src = `https://embed.tidal.com/tracks/${trackId}?disableAnalytics=true`

      break
    }

    case 'Deezer': {
      const trackArray = url.split('/')
      const trackId = trackArray[trackArray.length - 1]
      src = `https://widget.deezer.com/widget/auto/track/${trackId}?tracklist=false`

      break
    }

    case 'Spotify': {
      const trackArray = url.split('/')
      const trackId = trackArray[trackArray.length - 1]
      src = `https://open.spotify.com/embed/track/${trackId}`

      break
    }

    case 'Soundcloud': {
      src = `https://w.soundcloud.com/player/?url=${url}`

      break
    }

    case 'Applemusic': {
      const embedUrl = url.replace('//music', '//embed.music')
      src = embedUrl

      break
    }
  // No default
  }

  return (
    <div style={{marginTop: 5}}>
      {plateforme === 'Tidal' && (
        <iframe
          src={src}
          allowFullScreen='allowfullscreen'
          frameBorder='0'
          width={`${isMobile ? '100%' : '50%'}`}
          height='96px'
        />
      )}

      {plateforme === 'Deezer' && (
        <iframe
          title='deezer-widget'
          frameBorder='0'
          src={src}
          allow='encrypted-media; clipboard-write'
          allowtransparency='true'
        />
      )}

      {plateforme === 'Spotify' && (
        <iframe
          src={src}
          width={`${isMobile ? '100%' : '50%'}`}
          height='80'
          frameBorder='0'
          allowtransparency='true'
          allow='encrypted-media'
        />
      )}

      {plateforme === 'Soundcloud' && (
        <iframe
          src={src}
          width={`${isMobile ? '100%' : '50%'}`}
          height='166'
          scrolling='no'
          frameBorder='no'
        />
      )}

      {plateforme === 'Applemusic' && (
        <iframe
          src={src}
          width={`${isMobile ? '100%' : '50%'}`}
          height='175'
          frameBorder='0'
          allowtransparency='true'
          allow='encrypted-media'
          sandbox='allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation'
        />
      )}
    </div>
  )
}

function EntegreMizik({parole, isMobile}) {
  const [chwaMizik, meteChwaMizik] = useState(null)
  const router = useRouter()
  const {streamAudio, slug, okiMizikID} = parole
  const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud' || plateforme === 'Applemusic')

  const handleClick = (plateforme, url) => {
    if (chwaMizik && chwaMizik.plateforme === plateforme) {
      return meteChwaMizik(null)
    }

    meteChwaMizik({plateforme, url})
  }

  useEffect(() => {
    if (router.asPath === `/paroles/${slug}` || router.asPath === `/paroles/${slug}#${slug}`) {
      meteChwaMizik(null)
    }
  }, [router, slug])

  return (
    <Box align='center'>
      {!okiMizikID && filteredKouteyAchtey.map(({id, plateforme, url}) => (
        <IconButton
          key={id}
          aria-label='player'
          size='large'
          onClick={() => handleClick(plateforme, url)}
        >
          {kouteyAchteyIcons[plateforme]}
        </IconButton>
      ))}

      {chwaMizik && (
        <RannIframe plateforme={chwaMizik.plateforme} url={chwaMizik.url} isMobile={isMobile} />
      )}
    </Box>
  )
}

EntegreMizik.propTypes = {
  parole: PropTypes.object.isRequired,
  isMobile: PropTypes.bool.isRequired
}

RannIframe.propTypes = {
  plateforme: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  isMobile: PropTypes.bool.isRequired
}

export default EntegreMizik