From 2aa9e63e14bd152aa2d7f8f2317b4f6c96a3cdf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Fri, 20 May 2022 02:15:56 +0400
Subject: [PATCH] Change teks to parole

---
 components/awtis/mizik-badj-meni.js | 12 +++---
 components/awtis/mizik-lis.js       | 22 +++++-----
 components/teks/denye-teks.js       |  2 +-
 components/teks/drawer-bar.js       | 26 ++++++------
 components/teks/lekte.js            | 20 ++++-----
 components/teks/oki-mizik.js        |  6 +--
 components/teks/pataje.js           | 10 ++---
 components/teks/teks-drawer.js      | 35 +++++++++-------
 components/teks/teks-kat.js         | 20 ++++-----
 components/teks/teks.js             | 59 +++++++++++++-------------
 components/teks/vwe-koute-achte.js  | 20 ++++-----
 pages/paroles/[slug].js             | 65 +++++++++++++++--------------
 pages/paroles/index.js              | 14 +++----
 13 files changed, 158 insertions(+), 153 deletions(-)

diff --git a/components/awtis/mizik-badj-meni.js b/components/awtis/mizik-badj-meni.js
index e27a437..777bb07 100644
--- a/components/awtis/mizik-badj-meni.js
+++ b/components/awtis/mizik-badj-meni.js
@@ -37,13 +37,13 @@ const Root = styled('div')((
   }
 }))
 
-const sortTeks = teks => teks.sort((a, b) => b.id - a.id)
+const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id)
 
-export default function MizikBadjMeni({teks}) {
+export default function MizikBadjMeni({paroles}) {
   const [open, setOpen] = useState(false)
   const anchorRef = useRef(null)
   const router = useRouter()
-  const sortedTeks = sortTeks(teks)
+  const sortedTeks = sortTeks(paroles)
 
   const handleToggle = () => {
     setOpen(previousOpen_ => !previousOpen_)
@@ -90,7 +90,7 @@ export default function MizikBadjMeni({teks}) {
             vertical: 'top',
             horizontal: 'right'
           }}
-          badgeContent={teks.length}
+          badgeContent={paroles.length}
           color='primary'
         >
           <MenuBookIcon style={{fontSize: 30}} />
@@ -105,7 +105,7 @@ export default function MizikBadjMeni({teks}) {
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}>
-                  {sortedTeks.map(t => <MenuItem key={t.id} onClick={() => handleClick(t.slug)}>{t.tit}</MenuItem>)}
+                  {sortedTeks.map(({id, attributes}) => <MenuItem key={id} onClick={() => handleClick(attributes.slug)}>{attributes.titre}</MenuItem>)}
                 </MenuList>
               </ClickAwayListener>
             </Paper>
@@ -117,5 +117,5 @@ export default function MizikBadjMeni({teks}) {
 }
 
 MizikBadjMeni.propTypes = {
-  teks: PropTypes.array.isRequired
+  paroles: PropTypes.array.isRequired
 }
diff --git a/components/awtis/mizik-lis.js b/components/awtis/mizik-lis.js
index c54bfa8..5709591 100644
--- a/components/awtis/mizik-lis.js
+++ b/components/awtis/mizik-lis.js
@@ -27,7 +27,7 @@ const StyledList = styled(List)((
   }
 }))
 
-export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
+export default function MizikLis({meteEsMobilOuve, niAwtis, paroles, slugTeksChwazi, meteSlugTeksChwazi}) {
   const router = useRouter()
 
   const handleClick = slug => {
@@ -50,22 +50,22 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
 
   return (
     <StyledList component='nav' className={classes.root} aria-label='mizik'>
-      {teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => (
+      {paroles.map(({id, attributes}) => (
         <ListItem
-          key={slug}
+          key={id}
           button
-          id={slug}
-          selected={slugTeksChwazi === slug}
-          onClick={() => handleClick(slug)}
+          id={attributes.slug}
+          selected={slugTeksChwazi === attributes.slug}
+          onClick={() => handleClick(attributes.slug)}
         >
-          <ListItemText primary={tit} secondary={niAwtis ? new Intl.ListFormat('fr').format(awtis.map(({alias}) => alias)) : null} />
-          {eksplisit && (
+          <ListItemText primary={attributes.titre} secondary={niAwtis ? new Intl.ListFormat('fr').format(attributes.artistes.data.map(({attributes}) => attributes.alias)) : null} />
+          {attributes.explicite && (
             <ExplicitIcon style={{marginRight: 5}} color='secondary' />
           )}
-          {okiMizikID && (
+          {attributes.okiMizikID && (
             <LibraryMusicIcon style={{fontSize: 40}} color='primary' />
           )}
-          {esBrandNew(published_at) && (
+          {esBrandNew(attributes.publishedAt) && (
             <FiberNewOutlinedIcon style={{fontSize: 40}} color='primary' />
           )}
         </ListItem>
@@ -77,7 +77,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
 MizikLis.propTypes = {
   meteEsMobilOuve: PropTypes.func,
   niAwtis: PropTypes.bool,
-  teks: PropTypes.array.isRequired,
+  paroles: PropTypes.array.isRequired,
   slugTeksChwazi: PropTypes.string,
   meteSlugTeksChwazi: PropTypes.func
 }
diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js
index 15f5290..78cef36 100644
--- a/components/teks/denye-teks.js
+++ b/components/teks/denye-teks.js
@@ -30,7 +30,7 @@ export default function DenyeTeks({denyeTeks}) {
           </Container>
         )}
         <Grid container spacing={3}>
-          {denyeTeks.map(t => <TeksKat key={t.id} teks={t} />)}
+          {denyeTeks.map(t => <TeksKat key={t.id} parole={t} />)}
         </Grid>
       </Container>
     </Root>
diff --git a/components/teks/drawer-bar.js b/components/teks/drawer-bar.js
index 167885d..467378b 100644
--- a/components/teks/drawer-bar.js
+++ b/components/teks/drawer-bar.js
@@ -44,15 +44,15 @@ const Root = styled('div')((
   }
 }))
 
-const getMizikFiltered = (teks, filter) => {
-  if (teks) {
-    const filteredTitre = teks.filter(({tit}) => {
-      const deburredTit = deburr(tit)
+const getMizikFiltered = (paroles, filter) => {
+  if (paroles) {
+    const filteredTitre = paroles.filter(({attributes}) => {
+      const deburredTit = deburr(attributes.titre)
       return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
     })
 
-    const filteredAlias = teks.filter(({awtis}) => {
-      const aliasLis = awtis.map(({alias}) => deburr(alias)).join(', ')
+    const filteredAlias = paroles.filter(({attributes}) => {
+      const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
       return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
     })
 
@@ -60,13 +60,13 @@ const getMizikFiltered = (teks, filter) => {
   }
 }
 
-export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
-  const slug = anTeks ? anTeks.slug : null
+export default function DrawerBar({meteEsMobilOuve, paroles, parole}) {
+  const slug = parole ? parole.slug : null
 
   const [search, setSearch] = useState('')
   const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
 
-  const mizikFiltered = getMizikFiltered(teks, search)
+  const mizikFiltered = getMizikFiltered(paroles, search)
 
   const handleSearch = event => {
     event.preventDefault()
@@ -94,7 +94,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
         <MizikLis
           niAwtis
           meteEsMobilOuve={meteEsMobilOuve}
-          teks={mizikFiltered}
+          paroles={mizikFiltered}
           slugTeksChwazi={slugTeksChwazi}
           meteSlugTeksChwazi={meteSlugTeksChwazi}
         />
@@ -105,11 +105,11 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
 
 DrawerBar.propTypes = {
   meteEsMobilOuve: PropTypes.func,
-  teks: PropTypes.array.isRequired,
-  anTeks: PropTypes.object
+  paroles: PropTypes.array.isRequired,
+  parole: PropTypes.object
 }
 
 DrawerBar.defaultProps = {
   meteEsMobilOuve: null,
-  anTeks: null
+  parole: null
 }
diff --git a/components/teks/lekte.js b/components/teks/lekte.js
index 17a96af..d376d51 100644
--- a/components/teks/lekte.js
+++ b/components/teks/lekte.js
@@ -14,7 +14,7 @@ import Image from 'next/image'
 import {grey} from '@mui/material/colors'
 import {Link} from '@mui/material'
 
-const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
 const Widget = styled('div')(({theme}) => ({
   padding: 16,
@@ -49,7 +49,7 @@ const TinyText = styled(Typography)({
   letterSpacing: 0.2,
 })
 
-export default function Lekte({audio, url, teks}) {
+export default function Lekte({audio, url, parole}) {
   const audioRef = useRef(new Audio(audio))
   const intervalRef = useRef()
   const isReady = useRef(false)
@@ -58,7 +58,7 @@ export default function Lekte({audio, url, teks}) {
   const [position, setPosition] = useState(0)
   const [volume, setVolume] = useState(100)
   const [isPlaying, setIsPlaying] = useState(false)
-  const awtis = teks.awtis.map(({alias}) => alias)
+  const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
 
   function formatDuration(value) {
     const minute = Math.floor(value / 60)
@@ -139,10 +139,10 @@ export default function Lekte({audio, url, teks}) {
         <Box sx={{display: 'flex', alignItems: 'center'}}>
           <CoverImage>
             <Image
-              alt={teks.tit}
-              src={teks?.kouveti?.formats?.thumbnail ? `${apiUrl}${teks.kouveti.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
-              width={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.width : 192}
-              height={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.height : 192}
+              alt={parole.titre}
+              src={parole?.couverture?.data?.attributes?.formats?.thumbnail ? `${IMAGE_URL}${parole.couverture.data.attributes.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
+              width={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.width : 192}
+              height={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.height : 192}
             />
           </CoverImage>
           <Box sx={{ml: 1.5, minWidth: 0}}>
@@ -151,11 +151,11 @@ export default function Lekte({audio, url, teks}) {
             </Typography>
             <Typography>
               <Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>
-                <strong>{teks.tit}</strong>
+                <strong>{parole.titre}</strong>
               </Link>
             </Typography>
             <Typography variant='caption'>
-              <i>{teks.lanne}</i>
+              <i>{parole.annee}</i>
             </Typography>
           </Box>
         </Box>
@@ -263,5 +263,5 @@ export default function Lekte({audio, url, teks}) {
 Lekte.propTypes = {
   audio: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
-  teks: PropTypes.object.isRequired
+  parole: PropTypes.object.isRequired
 }
diff --git a/components/teks/oki-mizik.js b/components/teks/oki-mizik.js
index aa21a9e..e3715d9 100644
--- a/components/teks/oki-mizik.js
+++ b/components/teks/oki-mizik.js
@@ -11,18 +11,18 @@ const DinamikLekte = dynamic(
   {ssr: false, loading: () => <CircularProgress sx={{color: '#29d'}} />}
 )
 
-export default function OkiMizik({id, teks}) {
+export default function OkiMizik({id, parole}) {
   const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}`
   const detailsUrl = `${MIZIK_URL}/library/tracks/${id}`
 
   return (
     <Box style={{marginTop: '0.3em', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-      <DinamikLekte audio={mizikStreamUrl} url={detailsUrl} teks={teks} />
+      <DinamikLekte audio={mizikStreamUrl} url={detailsUrl} parole={parole} />
     </Box>
   )
 }
 
 OkiMizik.propTypes = {
   id: PropTypes.number.isRequired,
-  teks: PropTypes.object.isRequired
+  parole: PropTypes.object.isRequired
 }
diff --git a/components/teks/pataje.js b/components/teks/pataje.js
index 52bfb66..428b414 100644
--- a/components/teks/pataje.js
+++ b/components/teks/pataje.js
@@ -43,15 +43,15 @@ const actions = [
   {icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
 ]
 
-export default function Pataje({teks, setError, setSuccess}) {
-  const {tit, awtis, slug} = teks
+export default function Pataje({parole, setError, setSuccess}) {
+  const {titre, artistes, slug} = parole
   const [open, setOpen] = useState(false)
 
   const patajeUrl = `${SITE_URL}/paroles/${slug}`
-  const alias = awtis.map(({alias}) => alias)
+  const alias = artistes.data.map(({attributes}) => attributes.alias)
   const renderAwtis = new Intl.ListFormat('fr').format(alias)
 
-  const text = teks.user || teks.userAdmin ? `${renderAwtis} - ${tit} (Paroles et Traductions) - (texte soumis par ${teks?.user?.username || teks.userAdmin})` : `${renderAwtis} - ${tit} (Paroles et Traductions)`
+  const text = parole.user || parole.userAdmin ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (texte soumis par ${parole?.user?.username || parole.userAdmin})` : `${renderAwtis} - ${parole} (Paroles et Traductions)`
 
   const handleClose = () => {
     setOpen(false)
@@ -123,7 +123,7 @@ export default function Pataje({teks, setError, setSuccess}) {
 }
 
 Pataje.propTypes = {
-  teks: PropTypes.object.isRequired,
+  parole: PropTypes.object.isRequired,
   setError: PropTypes.func.isRequired,
   setSuccess: PropTypes.func.isRequired
 }
diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index c2c3d48..95bd24f 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -117,7 +117,7 @@ const Root = styled('div')((
 
 const drawerWidth = 240
 
-export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
+export default function TeksDrawer({paroles, parole, paroleId, commentaires, denyeTeks}) {
   const theme = useTheme()
   const [esMobilOuve, meteEsMobilOuve] = useState(false)
   const [open, setOpen] = useState(false)
@@ -161,21 +161,21 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
           >
             <MenuIcon />
           </IconButton>
-          {anTeks ? (
+          {parole ? (
             <>
               <Link passHref href='/paroles'>
                 <IconButton aria-label='return' size='medium'>
                   <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                 </IconButton>
               </Link>
-              {anTeks.lyen && anTeks.lyen.length > 0 && (
+              {parole.streamVideo && parole.streamVideo.length > 0 && (
                 <div className={classes.vwe}>
-                  <VweKouteAchte niVideyo anTeks={anTeks} />
+                  <VweKouteAchte niVideyo parole={parole} />
                 </div>
               )}
-              {anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
+              {parole.streamVideo && parole.streamVideo.length > 0 && (
                 <div className={classes.koute}>
-                  <VweKouteAchte niOdyo anTeks={anTeks} />
+                  <VweKouteAchte niOdyo parole={parole} />
                 </div>
               )}
             </>
@@ -201,7 +201,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
             }}
             onClose={handleDrawerToggle}
           >
-            <DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
+            <DrawerBar meteEsMobilOuve={meteEsMobilOuve} paroles={paroles} parole={parole} />
           </Drawer>
         </Hidden>
         <Hidden smDown implementation='css'>
@@ -212,15 +212,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
             }}
             variant='permanent'
           >
-            <DrawerBar teks={teks} anTeks={anTeks} />
+            <DrawerBar paroles={paroles} parole={parole} />
           </Drawer>
         </Hidden>
       </nav>
       <main className={classes.content}>
-        {anTeks ? (
+        {parole ? (
           <Teks
-            anTeks={anTeks}
-            komante={komante}
+            parole={parole}
+            paroleId={paroleId}
+            commentaires={commentaires}
             open={open}
             success={success}
             error={error}
@@ -239,14 +240,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
 }
 
 TeksDrawer.propTypes = {
-  teks: PropTypes.array.isRequired,
-  anTeks: PropTypes.object,
-  komante: PropTypes.array,
+  paroles: PropTypes.array.isRequired,
+  parole: PropTypes.object,
+  paroleId: PropTypes.number,
+  commentaires: PropTypes.array,
   denyeTeks: PropTypes.array
 }
 
 TeksDrawer.defaultProps = {
-  anTeks: null,
-  komante: null,
+  parole: null,
+  paroleId: null,
+  commentaires: null,
   denyeTeks: null
 }
diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js
index bc178d2..b7b8283 100644
--- a/components/teks/teks-kat.js
+++ b/components/teks/teks-kat.js
@@ -31,11 +31,11 @@ const StyledGrid = styled(Grid)({
   }
 })
 
-const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
+const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
 
-export default function TeksKat({teks}) {
+export default function TeksKat({parole}) {
   const router = useRouter()
-  const {attributes} = teks
+  const {attributes} = parole
   const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
 
   const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
@@ -53,25 +53,25 @@ export default function TeksKat({teks}) {
             className={classes.media}
             component='img'
             alt={titre}
-            image={couverture ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
+            image={couverture?.data?.attributes?.url ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
             title={titre}
           />
           <CardContent>
             <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
               {titre}
             </Typography>
-            {teks.eksplisit && (
+            {parole.eksplisit && (
               <ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
             )}
             <Typography variant='caption'>
-              {teks.user && (
+              {parole.user && (
                 <>
-                  (<i>texte soumis par {teks.user.username}</i>)
+                  (<i>texte soumis par {parole.user.username}</i>)
                 </>
               )}
-              {teks.userAdmin && !teks.user && (
+              {parole.userAdmin && !parole.user && (
                 <>
-                  (<i>texte soumis par {teks.userAdmin}</i>)
+                  (<i>texte soumis par {parole.userAdmin}</i>)
                 </>
               )}
             </Typography>
@@ -92,5 +92,5 @@ export default function TeksKat({teks}) {
 }
 
 TeksKat.propTypes = {
-  teks: PropTypes.object.isRequired
+  parole: PropTypes.object.isRequired
 }
diff --git a/components/teks/teks.js b/components/teks/teks.js
index de5aaa1..cb5a4ef 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -66,30 +66,30 @@ const Root = styled('div')((
   }
 }))
 
-const langToArray = anTeks => {
+const langToArray = parole => {
   const langArray = []
 
-  if (anTeks && anTeks.tradiksyon) {
-    const {francais, english, espagnol, deutsch, italiano} = anTeks.tradiksyon
+  if (parole && parole.traductions) {
+    const {francais, anglais, espagnol, allemand, italien} = parole.traductions
 
     if (francais) {
       langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
     }
 
-    if (english) {
-      langArray.push({title: 'Translation', flag: 'en', lang: english})
+    if (anglais) {
+      langArray.push({title: 'Translation', flag: 'en', lang: anglais})
     }
 
     if (espagnol) {
       langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
     }
 
-    if (deutsch) {
-      langArray.push({title: 'Übersetzung', flag: 'de', lang: deutsch})
+    if (allemand) {
+      langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
     }
 
-    if (italiano) {
-      langArray.push({title: 'Traduzione', flag: 'it', lang: italiano})
+    if (italien) {
+      langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
     }
   }
 
@@ -120,15 +120,15 @@ const Alert = forwardRef(function Alert(props, ref) {
 
 const ExplicitTooltip = Tooltip
 
-export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
+export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
   const isMobile = useMediaQuery('(max-width:800px)')
-  const langArray = langToArray(anTeks)
-  const awtis = anTeks.awtis.map(({alias}) => alias)
+  const langArray = langToArray(parole)
+  const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
 
   return (
     <Root>
       <div className={classes.pataje}>
-        <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
+        <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
       </div>
       <Box sx={{textAlign: 'center', marginTop: 9}}>
         <Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'>
@@ -136,8 +136,8 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
             {new Intl.ListFormat('fr').format(awtis)}
           </Typography>
           <Typography variant='h5' component='div'>
-            {anTeks.tit} <small>({anTeks?.lanne})</small>
-            {anTeks.eksplisit && (
+            {parole.titre} <small>({parole?.annee})</small>
+            {parole.explicite && (
               <ExplicitTooltip
                 title='Explicit Lyrics'
                 placement='bottom'
@@ -151,29 +151,29 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
             )}
           </Typography>
           <Grid container alignItems='center' justifyContent='center'>
-            {komante && (
-              <VweKomante komante={komante} teks={anTeks} />
+            {commentaires && (
+              <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
             )}
           </Grid>
         </Typography>
-        {anTeks.user && (
+        {parole?.user?.data && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-            <i>texte soumis par {anTeks.user.username}</i>
+            <i>texte soumis par {parole.user.data.attributes.username}</i>
           </Typography>
         )}
-        {anTeks.userAdmin && !anTeks.user && (
+        {parole.userAdmin && !parole.user && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-            <i>texte soumis par {anTeks.userAdmin}</i>
+            <i>texte soumis par {parole.userAdmin}</i>
           </Typography>
         )}
       </Box>
-      {(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
+      {(parole.okiMizikID || parole.streamAudio.length > 0) && (
         <Box sx={{textAlign: 'center'}}>
-          <EntegreMizik anTeks={anTeks} isMobile={isMobile} />
+          <EntegreMizik parole={parole} isMobile={isMobile} />
         </Box>
       )}
-      {anTeks.okiMizikID && (
-        <OkiMizik id={anTeks.okiMizikID} teks={anTeks} />
+      {parole.okiMizikID && (
+        <OkiMizik id={parole.okiMizikID} parole={parole} />
       )}
       <Grid container justifyContent='start' spacing={1}>
         <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
@@ -182,7 +182,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
               Transcription
             </Typography>
             <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
-              {formatJsonString(anTeks.transkripsyon)}
+              {formatJsonString(parole.transcription)}
             </Typography>
           </div>
         </Grid>
@@ -242,8 +242,9 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
 }
 
 Teks.propTypes = {
-  anTeks: PropTypes.object.isRequired,
-  komante: PropTypes.array,
+  parole: PropTypes.object.isRequired,
+  paroleId: PropTypes.number.isRequired,
+  commentaires: PropTypes.array,
   open: PropTypes.bool.isRequired,
   success: PropTypes.string,
   error: PropTypes.string,
@@ -253,7 +254,7 @@ Teks.propTypes = {
 }
 
 Teks.defaultProps = {
-  komante: null,
+  commentaires: null,
   success: '',
   error: ''
 }
diff --git a/components/teks/vwe-koute-achte.js b/components/teks/vwe-koute-achte.js
index 690b325..b9a89b7 100644
--- a/components/teks/vwe-koute-achte.js
+++ b/components/teks/vwe-koute-achte.js
@@ -49,22 +49,22 @@ const vweyIcons = {
   Dailymotion: <Dailymotion />,
   Lbry: <Lbry />,
   Rumble: <PlayCircleFilledIcon />,
-  Peertube: <Peertube />
+  Gadé: <Peertube />
 }
 
-export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
+export default function VweKouteAchte({parole, niVideyo, niOdyo}) {
   const [ouve, meteOuve] = useState(false)
-  const {kouteyAchtey, lyen} = anTeks
+  const {streamAudio, streamVideo} = parole
 
-  const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => ({
-    icon: kouteyAchteyIcons[boutik],
-    name: boutik,
+  const kouteyAchteyActions = streamAudio.map(({plateforme, url}) => ({
+    icon: kouteyAchteyIcons[plateforme],
+    name: plateforme,
     link: url
   }))
 
-  const vweyActions = lyen.map(({url, sit}) => ({
-    icon: vweyIcons[sit],
-    name: sit,
+  const vweyActions = streamVideo.map(({plateforme, url}) => ({
+    icon: vweyIcons[plateforme],
+    name: plateforme,
     link: url
   }))
 
@@ -115,7 +115,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
 }
 
 VweKouteAchte.propTypes = {
-  anTeks: PropTypes.object.isRequired,
+  parole: PropTypes.object.isRequired,
   niVideyo: PropTypes.bool,
   niOdyo: PropTypes.bool
 }
diff --git a/pages/paroles/[slug].js b/pages/paroles/[slug].js
index 8486fa9..d3f595f 100644
--- a/pages/paroles/[slug].js
+++ b/pages/paroles/[slug].js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-import {jwennTeksEpiSlug, jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api'
+import {jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api'
 
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
@@ -8,41 +8,41 @@ import HeadLayout from '../../components/head-layout'
 import Custom500 from '../500'
 import Custom404 from '../404'
 
-const jwennAwtis = awtis => {
-  const alias = awtis.map(({alias}) => alias)
+const jwennAwtis = artiste => {
+  const alias = artiste.data.map(({attributes}) => attributes.alias)
   return new Intl.ListFormat('fr').format(alias)
 }
 
-export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, komante}) {
+export default function SlugTeks({hasError, errorMessage, paroles, parole, slug, commentaires}) {
   if (hasError) {
     console.log('⚠️ error :', errorMessage)
     return <Custom500 />
   }
 
-  if (!anTeks) {
+  if (!parole) {
     return <Custom404 />
   }
 
-  const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)
-  const {kouveti} = anTeks
+  const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : jwennAwtis(parole.attributes.artistes)
+  const {couverture} = parole.attributes
   const formatKouveti = () => {
-    if (!kouveti) {
+    if (!couverture) {
       return null
     }
 
-    if (kouveti && kouveti.formats && kouveti.formats.large) {
-      return kouveti.formats.large
+    if (couverture && couverture.formats && couverture.formats.large) {
+      return couverture.formats.large
     }
 
-    if (kouveti && kouveti.formats && kouveti.formats.medium) {
-      return kouveti.formats.medium
+    if (couverture && couverture.formats && couverture.formats.medium) {
+      return couverture.formats.medium
     }
 
-    if (kouveti && kouveti.formats && kouveti.formats.small) {
-      return kouveti.formats.small
+    if (couverture && couverture.formats && couverture.formats.small) {
+      return couverture.formats.small
     }
 
-    return kouveti
+    return couverture
   }
 
   return (
@@ -51,25 +51,26 @@ export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, ko
       imageWidth={formatKouveti() ? formatKouveti().width : null}
       imageHeight={formatKouveti() ? formatKouveti().height : null}
       imageMime={formatKouveti() ? formatKouveti().mime : null}
-      title={`${awtis} - ${anTeks.tit} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
+      title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
     >
-      <TeksDrawer teks={teks} anTeks={anTeks} komante={komante} />
+      <TeksDrawer paroles={paroles} parole={parole.attributes} paroleId={parole.id} commentaires={commentaires} />
     </HeadLayout>
   )
 }
 
 export async function getServerSideProps({query}) {
   const {slug} = query
-  let teks
-  let anTeks
+  let paroles
+  let parole
   let hasError
   let errorMessage
-  let komante
+  let commentaires
 
   try {
-    teks = await jwennTeks()
-    anTeks = await jwennTeksEpiSlug(slug)
-    komante = await jwennKomanteEpiTeksId(anTeks?.id)
+    paroles = await jwennTeks()
+    parole = paroles.find(({attributes}) => attributes.slug === slug)
+    commentaires = paroles.map(({attributes}) => attributes.commentaires)
+    commentaires = await jwennKomanteEpiTeksId(parole?.id)
   } catch (error) {
     errorMessage = error
     hasError = true
@@ -79,10 +80,10 @@ export async function getServerSideProps({query}) {
     props: {
       hasError: hasError || null,
       errorMessage: errorMessage ? errorMessage.message : null,
-      teks: teks || null,
-      anTeks: anTeks || null,
+      paroles: paroles || null,
+      parole: parole || null,
       slug,
-      komante: komante || null
+      commentaires: commentaires || null
     }
   }
 }
@@ -90,16 +91,16 @@ export async function getServerSideProps({query}) {
 SlugTeks.defaultProps = {
   hasError: null,
   errorMessage: null,
-  teks: null,
-  anTeks: null,
-  komante: null
+  paroles: null,
+  parole: null,
+  commentaires: null
 }
 
 SlugTeks.propTypes = {
   hasError: PropTypes.bool,
   errorMessage: PropTypes.string,
-  teks: PropTypes.array,
-  anTeks: PropTypes.object,
+  paroles: PropTypes.array,
+  parole: PropTypes.object,
   slug: PropTypes.string.isRequired,
-  komante: PropTypes.array
+  commentaires: PropTypes.array
 }
diff --git a/pages/paroles/index.js b/pages/paroles/index.js
index c5e7037..ac56a58 100644
--- a/pages/paroles/index.js
+++ b/pages/paroles/index.js
@@ -7,7 +7,7 @@ import HeadLayout from '../../components/head-layout'
 
 import Custom500 from '../500'
 
-export default function Teks({errorCode, errorMessage, teks, denyeTeks}) {
+export default function Teks({errorCode, errorMessage, paroles, denyeTeks}) {
   if (errorCode) {
     console.log('⚠️ error', errorMessage)
     return <Custom500 />
@@ -15,19 +15,19 @@ export default function Teks({errorCode, errorMessage, teks, denyeTeks}) {
 
   return (
     <HeadLayout title='Paroles et Traductions' tab={1} slug='paroles'>
-      <TeksDrawer teks={teks} denyeTeks={denyeTeks} />
+      <TeksDrawer paroles={paroles} denyeTeks={denyeTeks} />
     </HeadLayout>
   )
 }
 
 export async function getServerSideProps() {
-  let teks
+  let paroles
   let denyeTeks
   let hasError
   let errorMessage
 
   try {
-    teks = await jwennTeks()
+    paroles = await jwennTeks()
     denyeTeks = await jwennDenyeTeks()
   } catch (error) {
     errorMessage = error.message
@@ -38,7 +38,7 @@ export async function getServerSideProps() {
     props: {
       errorCode: hasError || null,
       errorMessage: errorMessage || null,
-      teks: teks || null,
+      paroles: paroles || null,
       denyeTeks: denyeTeks || null
     }
   }
@@ -47,13 +47,13 @@ export async function getServerSideProps() {
 Teks.defaultProps = {
   errorCode: null,
   errorMessage: null,
-  teks: null,
+  paroles: null,
   denyeTeks: null
 }
 
 Teks.propTypes = {
   errorCode: PropTypes.bool,
   errorMessage: PropTypes.string,
-  teks: PropTypes.array,
+  paroles: PropTypes.array,
   denyeTeks: PropTypes.array
 }