fix: icônes partage/streaming via contexte au lieu du layout

components/teks/current-track-context.js

@@ -0,0 +1,24 @@
+'use client'
+
+import {createContext, useContext, useState} from 'react'
+import PropTypes from 'prop-types'
+
+const CurrentTrackContext = createContext([null, () => {}])
+
+export function CurrentTrackProvider({children}) {
+  const state = useState(null)
+
+  return (
+    <CurrentTrackContext.Provider value={state}>
+      {children}
+    </CurrentTrackContext.Provider>
+  )
+}
+
+export function useCurrentTrack() {
+  return useContext(CurrentTrackContext)
+}
+
+CurrentTrackProvider.propTypes = {
+  children: PropTypes.node.isRequired
+}

components/teks/teks-drawer.js

@@ -18,6 +18,7 @@ import VweKouteAchte from './vwe-koute-achte'
 import DrawerBar from './drawer-bar'
 import Pataje from './pataje'
 import KaraokeModal from './karaoke-modal'
+import {useCurrentTrack} from './current-track-context'
 
 const drawerWidth = 240
 
@@ -25,7 +26,8 @@ const Alert = forwardRef(function Alert(props, ref) {
   return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
 })
 
-export default function TeksDrawer({paroles, parole}) {
+export default function TeksDrawer({paroles}) {
+  const [parole] = useCurrentTrack()
   const [mobileOpen, setMobileOpen] = useState(false)
   const [open, setOpen] = useState(false)
   const [error, setError] = useState('')
@@ -157,5 +159,4 @@ export default function TeksDrawer({paroles, parole}) {
 
 TeksDrawer.propTypes = {
   paroles: PropTypes.array,
-  parole: PropTypes.object,
 }

components/teks/teks.js

@@ -28,6 +28,7 @@ import {StreamButton} from '../streaming-buttons'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
 import DiferansDialog from './diferans-dialog'
+import {useCurrentTrack} from './current-track-context'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -116,6 +117,7 @@ export default function Teks({parole}) {
   const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
   const coverFmt = formatKuveti(parole.couverture)
   const [tab, setTab] = useState(0)
+  const [, setCurrentTrack] = useCurrentTrack()
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -126,6 +128,11 @@ export default function Teks({parole}) {
     window.scrollTo({top: 0, behavior: 'smooth'})
   }, [])
 
+  useEffect(() => {
+    setCurrentTrack(parole)
+    return () => setCurrentTrack(null)
+  }, [parole, setCurrentTrack])
+
   return (
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 12}}>