feat: display stems download links for CC tracks

components/files/stems-dialog.js

@@ -0,0 +1,78 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
+
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import {Nextcloud} from '@icons-pack/react-simple-icons'
+
+const PLATFORM_ICON = {
+  NIYAJ: Nextcloud,
+  kDrive: CloudDownloadIcon,
+}
+
+export default function StemsDialog({stems}) {
+  const [open, setOpen] = useState(false)
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button endIcon={<CloudDownloadIcon />} sx={{marginBottom: 2}} variant='outlined' onClick={handleClickOpen}>
+        Stems
+      </Button>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        aria-labelledby='StemsDialog'
+        onClose={handleClose}
+      >
+        <DialogTitle>Télécharger les stems</DialogTitle>
+        <DialogContent dividers>
+          <List>
+            {stems.map((stem, index) => {
+              const PlatformIcon = PLATFORM_ICON[stem.plateforme] ?? CloudDownloadIcon
+              return (
+                <ListItem key={index} disablePadding>
+                  <ListItemButton component='a' href={stem.url} target='_blank' rel='noopener noreferrer'>
+                    <ListItemIcon>
+                      <PlatformIcon />
+                    </ListItemIcon>
+                    <ListItemText primary={stem.plateforme} />
+                  </ListItemButton>
+                </ListItem>
+              )
+            })}
+          </List>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Fermer
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+StemsDialog.propTypes = {
+  stems: PropTypes.array.isRequired
+}

components/teks/teks.js

@@ -21,6 +21,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 {StreamButton} from '../streaming-buttons'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
@@ -182,9 +183,16 @@ 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)) && (
+          <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
             {parole?.files && (
               <FilesDialog files={parole.files} />
             )}
+            {parole.creativeCommons && parole.stems?.length > 0 && (
+              <StemsDialog stems={parole.stems} />
+            )}
+          </Box>
+        )}
         {(parole.okiMizikID || parole.streamAudio.length > 0 || parole.gadeEmbed) && (
           <Box sx={{textAlign: 'center'}}>
             <EntegreMizik parole={parole} isMobile={isMobile} />

lib/oki-api.js

@@ -54,6 +54,9 @@ export async function jwennTeksEpiSlug(slug) {
       streamVideo: {
         populate: '*'
       },
+      stems: {
+        populate: '*'
+      },
       traductions: {
         populate: '*'
       },