Create EntegreMizik component

2021-07-15 00:58:21 +02:00
parent 69f598cb48
commit e19fef6021
1 changed files with 137 additions and 0 deletions
@@ -0,0 +1,137 @@
+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='h6'>
+        Écouter
+      </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