Adapt EntegreMizik component to new properties

components/teks/entegre-mizik.js

@@ -17,9 +17,9 @@ const kouteyAchteyIcons = {
   Soundcloud: <Soundcloud />
 }
 
-function RannIframe({boutik, url, isMobile}) {
+function RannIframe({plateforme, url, isMobile}) {
   let src = ''
-  switch (boutik) {
+  switch (plateforme) {
     case 'Tidal': {
       const trackArray = url.split('/')
       const trackId = trackArray[trackArray.length - 1]
@@ -54,7 +54,7 @@ function RannIframe({boutik, url, isMobile}) {
 
   return (
     <div style={{marginTop: 5}}>
-      {boutik === 'Tidal' && (
+      {plateforme === 'Tidal' && (
         <iframe
           src={src}
           allowFullScreen='allowfullscreen'
@@ -64,7 +64,7 @@ function RannIframe({boutik, url, isMobile}) {
         />
       )}
 
-      {boutik === 'Deezer' && (
+      {plateforme === 'Deezer' && (
         <iframe
           title='deezer-widget'
           frameBorder='0'
@@ -74,7 +74,7 @@ function RannIframe({boutik, url, isMobile}) {
         />
       )}
 
-      {boutik === 'Spotify' && (
+      {plateforme === 'Spotify' && (
         <iframe
           src={src}
           width={`${isMobile ? '100%' : '50%'}`}
@@ -85,7 +85,7 @@ function RannIframe({boutik, url, isMobile}) {
         />
       )}
 
-      {boutik === 'Soundcloud' && (
+      {plateforme === 'Soundcloud' && (
         <iframe
           src={src}
           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 router = useRouter()
-  const {kouteyAchtey, slug, okiMizikID} = anTeks
-  const filteredKouteyAchtey = kouteyAchtey.filter(({boutik}) => boutik === 'Tidal' || boutik === 'Spotify' || boutik === 'Deezer' || boutik === 'Soundcloud')
+  const {streamAudio, slug, okiMizikID} = parole
+  const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud')
 
-  const handleClick = (boutik, url) => {
-    if (chwaMizik && chwaMizik.boutik === boutik) {
+  const handleClick = (plateforme, url) => {
+    if (chwaMizik && chwaMizik.plateforme === plateforme) {
       return meteChwaMizik(null)
     }
 
-    meteChwaMizik({boutik, url})
+    meteChwaMizik({plateforme, url})
   }
 
   useEffect(() => {
@@ -121,31 +121,31 @@ function EntegreMizik({anTeks, isMobile}) {
 
   return (
     <Box align='center'>
-      {!okiMizikID && filteredKouteyAchtey.map(({id, boutik, url}) => (
+      {!okiMizikID && filteredKouteyAchtey.map(({id, plateforme, url}) => (
         <IconButton
           key={id}
           aria-label='player'
           size='large'
-          onClick={() => handleClick(boutik, url)}
+          onClick={() => handleClick(plateforme, url)}
         >
-          {kouteyAchteyIcons[boutik]}
+          {kouteyAchteyIcons[plateforme]}
         </IconButton>
       ))}
 
       {chwaMizik && (
-        <RannIframe boutik={chwaMizik.boutik} url={chwaMizik.url} isMobile={isMobile} />
+        <RannIframe plateforme={chwaMizik.plateforme} url={chwaMizik.url} isMobile={isMobile} />
       )}
     </Box>
   )
 }
 
 EntegreMizik.propTypes = {
-  anTeks: PropTypes.object.isRequired,
+  parole: PropTypes.object.isRequired,
   isMobile: PropTypes.bool.isRequired
 }
 
 RannIframe.propTypes = {
-  boutik: PropTypes.string.isRequired,
+  plateforme: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
   isMobile: PropTypes.bool.isRequired
 }