components/teks/entegre-mizik.js

@@ -2,7 +2,7 @@
 
 import {Box, IconButton} from '@mui/material'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/navigation'
+import {usePathname} from 'next/navigation'
 
 import {
   Tidal,
@@ -69,10 +69,12 @@ function RannIframe({plateforme, url, titre, isMobile}) {
       {plateforme === 'Tidal' && (
         <iframe
           src={src}
+          title={titre}
           allowFullScreen='allowfullscreen'
           frameBorder='0'
           width={`${isMobile ? '100%' : '50%'}`}
           height='96px'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
@@ -90,38 +92,44 @@ function RannIframe({plateforme, url, titre, isMobile}) {
 
       {plateforme === 'Deezer' && (
         <iframe
-          title='deezer-widget'
+          title={titre || 'deezer-widget'}
           frameBorder='0'
           src={src}
           allow='encrypted-media; clipboard-write'
           allowtransparency='true'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Spotify' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='80'
           frameBorder='0'
           allowtransparency='true'
           allow='encrypted-media'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Soundcloud' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='166'
           scrolling='no'
           frameBorder='no'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Applemusic' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='175'
           frameBorder='0'
@@ -136,7 +144,7 @@ function RannIframe({plateforme, url, titre, isMobile}) {
 
 function EntegreMizik({parole, isMobile}) {
   const [chwaMizik, meteChwaMizik] = useState(null)
-  const router = useRouter()
+  const pathname = usePathname()
   const {streamAudio, slug, okiMizikID, gadeEmbed, titre} = parole
 
   const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud' || plateforme === 'Applemusic')
@@ -150,10 +158,10 @@ function EntegreMizik({parole, isMobile}) {
   }
 
   useEffect(() => {
-    if (router.asPath === `/paroles/${slug}` || router.asPath === `/paroles/${slug}#${slug}`) {
+    if (pathname === `/paroles/${slug}`) {
       meteChwaMizik(null)
     }
-  }, [router, slug])
+  }, [pathname, slug])
 
   return (
     <Box align='center'>
@@ -162,7 +170,7 @@ function EntegreMizik({parole, isMobile}) {
           key={id}
           aria-label='player'
           size='large'
-          onClick={() => handleClick(plateforme, url)}
+          onClick={() => handleClick(plateforme, url, titre)}
         >
           {kouteyAchteyIcons[plateforme]}
         </IconButton>