diff --git a/app/paroles/layout.js b/app/paroles/layout.js index 6831fa7..3ee017d 100644 --- a/app/paroles/layout.js +++ b/app/paroles/layout.js @@ -1,7 +1,8 @@ import {Suspense} from 'react' import {notFound} from 'next/navigation' -import {jwennTeks, jwennTeksEpiSlug} from '../../lib/oki-api' +import {jwennTeks} from '../../lib/oki-api' import TeksDrawer from '../../components/teks/teks-drawer' +import {CurrentTrackProvider} from '../../components/teks/current-track-context' import Loading from './loading' const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.' @@ -49,19 +50,17 @@ async function jwennDotDone() { return teks } -export default async function PawolLayout({children, params}) { - const {slug} = await params +export default async function PawolLayout({children}) { const teks = await jwennDotDone() - const parole = slug ? await jwennTeksEpiSlug(slug) : null return ( - <> + }> - +
{children}
- +
) } diff --git a/components/teks/current-track-context.js b/components/teks/current-track-context.js new file mode 100644 index 0000000..3c2774e --- /dev/null +++ b/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 ( + + {children} + + ) +} + +export function useCurrentTrack() { + return useContext(CurrentTrackContext) +} + +CurrentTrackProvider.propTypes = { + children: PropTypes.node.isRequired +} diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js index 845c530..4c5f1a8 100644 --- a/components/teks/teks-drawer.js +++ b/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 }) -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, } diff --git a/components/teks/teks.js b/components/teks/teks.js index 1ac8dd4..3828e0b 100644 --- a/components/teks/teks.js +++ b/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 (