Add Gade integration

components/teks/entegre-mizik.js

@@ -7,7 +7,8 @@ import {
   Spotify,
   Deezer,
   Soundcloud,
-  Applemusic
+  Applemusic,
+  Peertube
 } from '@icons-pack/react-simple-icons'
 import {useEffect, useState} from 'react'
 
@@ -19,7 +20,7 @@ const kouteyAchteyIcons = {
   Applemusic: <Applemusic />
 }
 
-function RannIframe({plateforme, url, isMobile}) {
+function RannIframe({plateforme, url, titre, isMobile}) {
   let src = ''
   switch (plateforme) {
     case 'Tidal': {
@@ -73,6 +74,18 @@ function RannIframe({plateforme, url, isMobile}) {
         />
       )}
 
+      {plateforme === 'Gade' && (
+        <iframe
+          src={`${url}?subtitle=fr&amp;warningTitle=0&amp;peertubeLink=0`}
+          allowFullScreen='allowfullscreen'
+          title={titre}
+          frameBorder='0'
+          height={isMobile ? '' : '315'}
+          width={isMobile ? '' : '560'}
+          sandbox='allow-same-origin allow-scripts allow-popups'
+        />
+      )}
+
       {plateforme === 'Deezer' && (
         <iframe
           title='deezer-widget'
@@ -122,15 +135,16 @@ function RannIframe({plateforme, url, isMobile}) {
 function EntegreMizik({parole, isMobile}) {
   const [chwaMizik, meteChwaMizik] = useState(null)
   const router = useRouter()
-  const {streamAudio, slug, okiMizikID} = parole
+  const {streamAudio, slug, okiMizikID, gadeEmbed, titre} = parole
+
   const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud' || plateforme === 'Applemusic')
 
-  const handleClick = (plateforme, url) => {
+  const handleClick = (plateforme, url, titre = null) => {
     if (chwaMizik && chwaMizik.plateforme === plateforme) {
       return meteChwaMizik(null)
     }
 
-    meteChwaMizik({plateforme, url})
+    meteChwaMizik({plateforme, url, titre})
   }
 
   useEffect(() => {
@@ -141,6 +155,16 @@ function EntegreMizik({parole, isMobile}) {
 
   return (
     <Box align='center'>
+      {!okiMizikID && gadeEmbed && (
+        <IconButton
+          aria-label='player'
+          size='large'
+          onClick={() => handleClick('Gade', gadeEmbed, titre)}
+        >
+          <Peertube />
+        </IconButton>
+      )}
+
       {!okiMizikID && filteredKouteyAchtey.map(({id, plateforme, url}) => (
         <IconButton
           key={id}
@@ -153,7 +177,7 @@ function EntegreMizik({parole, isMobile}) {
       ))}
 
       {chwaMizik && (
-        <RannIframe plateforme={chwaMizik.plateforme} url={chwaMizik.url} isMobile={isMobile} />
+        <RannIframe plateforme={chwaMizik.plateforme} url={chwaMizik.url} titre={chwaMizik.titre} isMobile={isMobile} />
       )}
     </Box>
   )
@@ -167,7 +191,12 @@ EntegreMizik.propTypes = {
 RannIframe.propTypes = {
   plateforme: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
+  titre: PropTypes.string,
   isMobile: PropTypes.bool.isRequired
 }
 
+RannIframe.defaultProp = {
+  titre: null
+}
+
 export default EntegreMizik