fix: icônes partage/streaming ne dépendent plus du plafond de 100

app/paroles/layout.js

@@ -1,6 +1,6 @@
 import {Suspense} from 'react'
 import {notFound} from 'next/navigation'
-import {jwennTeks} from '../../lib/oki-api'
+import {jwennTeks, jwennTeksEpiSlug} from '../../lib/oki-api'
 import TeksDrawer from '../../components/teks/teks-drawer'
 import Loading from './loading'
 
@@ -49,13 +49,15 @@ async function jwennDotDone() {
   return teks
 }
 
-export default async function PawolLayout({children}) {
+export default async function PawolLayout({children, params}) {
+  const {slug} = await params
   const teks = await jwennDotDone()
+  const parole = slug ? await jwennTeksEpiSlug(slug) : null
 
   return (
     <>
       <Suspense fallback={<Loading />}>
-        <TeksDrawer paroles={teks} />
+        <TeksDrawer paroles={teks} parole={parole} />
       </Suspense>
       <section>
         {children}

components/awtis/awtis-detay.js

@@ -146,23 +146,27 @@ export default function AwtisDetay({anAwtis}) {
               <Grid container>
                 {coverUrl && (
                   <Grid size={{xs: 12, sm: 4}}>
-                    <Box sx={{position: 'relative', minHeight: 130, height: '100%'}}>
+                    <Link href={`/paroles/${titrePhare.slug}`} style={{display: 'block', height: '100%'}}>
-                      <Image
+                      <Box sx={{position: 'relative', minHeight: 130, height: '100%'}}>
-                        src={coverUrl}
+                        <Image
-                        alt={titrePhare.titre}
+                          src={coverUrl}
-                        fill
+                          alt={titrePhare.titre}
-                        placeholder='blur'
+                          fill
-                        blurDataURL={BLUR_DATA_URL}
+                          placeholder='blur'
-                        sizes='200px'
+                          blurDataURL={BLUR_DATA_URL}
-                        style={{objectFit: 'cover'}}
+                          sizes='200px'
-                      />
+                          style={{objectFit: 'cover'}}
-                    </Box>
+                        />
+                      </Box>
+                    </Link>
                   </Grid>
                 )}
                 <Grid size={{xs: 12, sm: coverUrl ? 8 : 12}}>
                   <CardContent>
                     <Typography variant='subtitle1' sx={{fontWeight: 700}} gutterBottom>
-                      {titrePhare.titre}
+                      <Link href={`/paroles/${titrePhare.slug}`} style={{color: 'inherit', textDecoration: 'none'}}>
+                        {titrePhare.titre}
+                      </Link>
                     </Typography>
                     <Typography variant='caption' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
                       Écouter sur

components/files/kits-dialog.js

@@ -21,7 +21,7 @@ const PLATFORM_ICON = {
   kDrive: CloudDownloadIcon,
 }
 
-export default function StemsDialog({stems}) {
+export default function KitsDialog({kits}) {
   const [open, setOpen] = useState(false)
   const theme = useTheme()
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
@@ -37,26 +37,26 @@ export default function StemsDialog({stems}) {
   return (
     <>
       <Button endIcon={<CloudDownloadIcon />} sx={{marginBottom: 2}} variant='outlined' onClick={handleClickOpen}>
-        Stems
+        Kits
       </Button>
       <Dialog
         fullScreen={fullScreen}
         open={open}
-        aria-labelledby='StemsDialog'
+        aria-labelledby='KitsDialog'
         onClose={handleClose}
       >
-        <DialogTitle>Télécharger les stems</DialogTitle>
+        <DialogTitle>Télécharger un kit</DialogTitle>
         <DialogContent dividers>
           <List>
-            {stems.map((stem, index) => {
+            {kits.map((kit, index) => {
-              const PlatformIcon = PLATFORM_ICON[stem.plateforme] ?? CloudDownloadIcon
+              const PlatformIcon = PLATFORM_ICON[kit.plateforme] ?? CloudDownloadIcon
               return (
                 <ListItem key={index} disablePadding>
-                  <ListItemButton component='a' href={stem.url} target='_blank' rel='noopener noreferrer'>
+                  <ListItemButton component='a' href={kit.url} target='_blank' rel='noopener noreferrer'>
                     <ListItemIcon>
                       <PlatformIcon />
                     </ListItemIcon>
-                    <ListItemText primary={stem.plateforme} />
+                    <ListItemText primary={kit.type} secondary={kit.plateforme} />
                   </ListItemButton>
                 </ListItem>
               )
@@ -73,6 +73,6 @@ export default function StemsDialog({stems}) {
   )
 }
 
-StemsDialog.propTypes = {
+KitsDialog.propTypes = {
-  stems: PropTypes.array.isRequired
+  kits: PropTypes.array.isRequired
 }

components/teks/teks-drawer.js

@@ -2,7 +2,6 @@
 
 import {useState, useEffect, forwardRef} from 'react'
 import Link from 'next/link'
-import {useParams} from 'next/navigation'
 import PropTypes from 'prop-types'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
@@ -26,15 +25,12 @@ const Alert = forwardRef(function Alert(props, ref) {
   return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
 })
 
-export default function TeksDrawer({paroles}) {
+export default function TeksDrawer({paroles, parole}) {
-  const {slug} = useParams()
   const [mobileOpen, setMobileOpen] = useState(false)
   const [open, setOpen] = useState(false)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
-  const parole = paroles.find((parole) => parole.slug === slug)  
-
   useEffect(() => {
     if (error || success) {
       setOpen(true)
@@ -161,4 +157,5 @@ export default function TeksDrawer({paroles}) {
 
 TeksDrawer.propTypes = {
   paroles: PropTypes.array,
+  parole: PropTypes.object,
 }

components/teks/teks.js

@@ -23,7 +23,7 @@ import {formatKuveti} from '../../lib/kuveti'
 
 import LicenseModal from '../cc/license-modal'
 import FilesDialog from '../files/files-dialog'
-import StemsDialog from '../files/stems-dialog'
+import KitsDialog from '../files/kits-dialog'
 import {StreamButton} from '../streaming-buttons'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
@@ -185,13 +185,13 @@ export default function Teks({parole}) {
             <LicenseModal license={parole.creativeCommons.toLowerCase()} sourceOriginale={parole.sourceOriginale ?? null} remixes={parole.remixes?.length ? parole.remixes : null} />
           </Box>
         )}
-        {(parole?.files || (parole.creativeCommons && parole.stems?.length > 0)) && (
+        {(parole?.files || (parole.creativeCommons && parole.kits?.length > 0)) && (
           <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
             {parole?.files && (
               <FilesDialog files={parole.files} />
             )}
-            {parole.creativeCommons && parole.stems?.length > 0 && (
+            {parole.creativeCommons && parole.kits?.length > 0 && (
-              <StemsDialog stems={parole.stems} />
+              <KitsDialog kits={parole.kits} />
             )}
           </Box>
         )}

lib/oki-api.js

@@ -54,7 +54,7 @@ export async function jwennTeksEpiSlug(slug) {
       streamVideo: {
         populate: '*'
       },
-      stems: {
+      kits: {
         populate: '*'
       },
       traductions: {
@@ -146,34 +146,11 @@ export async function jwennToutAwtis() {
 export async function jwennTeks() {
   const query = qs.stringify({
     populate: {
-      user: {
-        fields: ['username']
-      },
-      userAdmin: {
-        fields: ['username', 'firstname']
-      },
-      commentaires: {
-        fields: ['contenu', 'datePublication'],
-        populate: {
-          user: {
-            fields: ['username']
-          }
-        }
-      },
       couverture: {
         populate: '*'
       },
       artistes: {
         fields: ['alias', 'slug']
-      },
-      streamAudio: {
-        populate: '*'
-      },
-      streamVideo: {
-        populate: '*'
-      },
-      traductions: {
-        populate: '*'
       }
     },
     sort: ['titre:asc'],