feat: add sourceOriginale to CC modal

components/cc/license-modal.js

@@ -8,11 +8,13 @@ import Box from '@mui/material/Box'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
+import Divider from '@mui/material/Divider'
+import Link from '@mui/material/Link'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import {useTheme} from '@mui/material/styles'
 import LicensesInfo from './licenses-infos'
 
-export default function LicenseModal({license}) {
+export default function LicenseModal({license, sourceOriginale, remixes}) {
   const [open, setOpen] = useState(false)
   const theme = useTheme()
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
@@ -53,6 +55,48 @@ export default function LicenseModal({license}) {
           </Box>
         </DialogTitle>
         <DialogContent dividers>
+          {sourceOriginale && (
+            <Box sx={{mb: 3}}>
+              <Typography variant='overline' color='text.secondary' display='block' gutterBottom>
+                Basé sur
+              </Typography>
+              <Link href={`/paroles/${sourceOriginale.slug}`} underline='hover' color='inherit'>
+                <Typography variant='h6' fontWeight='bold'>{sourceOriginale.titre}</Typography>
+              </Link>
+              {sourceOriginale.artistes?.length > 0 && (
+                <Typography variant='body1' color='text.secondary'>
+                  {sourceOriginale.artistes.map(a => a.alias).join(', ')}
+                </Typography>
+              )}
+              {sourceOriginale.annee && (
+                <Typography variant='body2' color='text.secondary'>{sourceOriginale.annee}</Typography>
+              )}
+              <Divider sx={{mt: 2}} />
+            </Box>
+          )}
+          {remixes && (
+            <Box sx={{mb: 3}}>
+              <Typography variant='overline' color='text.secondary' display='block' gutterBottom>
+                Déclinaisons
+              </Typography>
+              {remixes.map(remix => (
+                <Box key={remix.slug} sx={{mb: 1.5}}>
+                  <Link href={`/paroles/${remix.slug}`} underline='hover' color='inherit'>
+                    <Typography variant='h6' fontWeight='bold'>{remix.titre}</Typography>
+                  </Link>
+                  {remix.artistes?.length > 0 && (
+                    <Typography variant='body1' color='text.secondary'>
+                      {remix.artistes.map(a => a.alias).join(', ')}
+                    </Typography>
+                  )}
+                  {remix.annee && (
+                    <Typography variant='body2' color='text.secondary'>{remix.annee}</Typography>
+                  )}
+                </Box>
+              ))}
+              <Divider sx={{mt: 2}} />
+            </Box>
+          )}
           <LicensesInfo license={license} />
         </DialogContent>
         <DialogActions>
@@ -66,5 +110,7 @@ export default function LicenseModal({license}) {
 }
 
 LicenseModal.propTypes = {
-  license: PropTypes.string.isRequired
+  license: PropTypes.string.isRequired,
+  sourceOriginale: PropTypes.object,
+  remixes: PropTypes.array
 }

components/teks/teks.js

@@ -77,6 +77,8 @@ const Root = styled('div')((
   },
 }))
 
+const LANG_NAMES = {fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano'}
+
 const langToArray = parole => {
   const langArray = []
 
@@ -84,23 +86,23 @@ const langToArray = parole => {
     const {francais, anglais, espagnol, allemand, italien} = parole.traductions
 
     if (anglais) {
-      langArray.push({title: 'Translation', flag: 'en', lang: anglais})
+      langArray.push({title: 'English', lang: anglais})
     }
 
     if (francais) {
-      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
+      langArray.push({title: 'Français', lang: francais})
     }
 
     if (espagnol) {
-      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
+      langArray.push({title: 'Español', lang: espagnol})
     }
 
     if (allemand) {
-      langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
+      langArray.push({title: 'Deutsch', lang: allemand})
     }
 
     if (italien) {
-      langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
+      langArray.push({title: 'Italiano', lang: italien})
     }
   }
 
@@ -198,7 +200,7 @@ export default function Teks({parole}) {
         )}
         {parole.creativeCommons && (
           <Box sx={{maxWidth: 220, margin: '0 auto', textAlign: 'center'}}>
-            <LicenseModal license={parole.creativeCommons.toLowerCase()} />
+            <LicenseModal license={parole.creativeCommons.toLowerCase()} sourceOriginale={parole.sourceOriginale ?? null} remixes={parole.remixes?.length ? parole.remixes : null} />
           </Box>
         )}
         {parole?.files && (
@@ -221,41 +223,22 @@ export default function Teks({parole}) {
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
+              {parole.langueSource && parole.langueSource !== 'ka' && (
+                <Typography component='span' variant='body2' color='text.secondary' sx={{ml: 1}}>
+                  ({LANG_NAMES[parole.langueSource]})
+                </Typography>
+              )}
             </Typography>
             <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
           </Box>
         </Grid>
-        {langArray.map(({title, flag, lang}) => (
+        {langArray.map(({title, lang}) => (
           <Grid key={title} size={{xs: 12, md: 6}}>
             <Box className={classes.gridText}>
               <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-                {flag === 'fr' && (
+                {title}
-                  <span>
-                    🇫🇷
-                  </span>
-                )}
-                {flag === 'en' && (
-                  <span>
-                    🇺🇸
-                  </span>
-                )}
-                {flag === 'es' && (
-                  <span>
-                    🇪🇸
-                  </span>
-                )}
-                {flag === 'de' && (
-                  <span>
-                    🇩🇪
-                  </span>
-                )}
-                {flag === 'it' && (
-                  <span>
-                    🇮🇹
-                  </span>
-                )} {title}
               </Typography>
               <Typography paragraph='true' align='justify' component='span'>
                 {formatJsonString(lang)}

lib/oki-api.js

@@ -59,6 +59,22 @@ export async function jwennTeksEpiSlug(slug) {
       },
       pawol: {
         populate: '*'
+      },
+      sourceOriginale: {
+        fields: ['titre', 'slug', 'annee'],
+        populate: {
+          artistes: {
+            fields: ['alias', 'slug']
+          }
+        }
+      },
+      remixes: {
+        fields: ['titre', 'slug', 'annee'],
+        populate: {
+          artistes: {
+            fields: ['alias', 'slug']
+          }
+        }
       }
     },
     filters: {