diff --git a/components/files/stems-dialog.js b/components/files/stems-dialog.js new file mode 100644 index 0000000..b5da56b --- /dev/null +++ b/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 ( + <> + + + Télécharger les stems + + + {stems.map((stem, index) => { + const PlatformIcon = PLATFORM_ICON[stem.plateforme] ?? CloudDownloadIcon + return ( + + + + + + + + + ) + })} + + + + + + + + ) +} + +StemsDialog.propTypes = { + stems: PropTypes.array.isRequired +} diff --git a/components/teks/teks.js b/components/teks/teks.js index 7ba498a..cdeb332 100644 --- a/components/teks/teks.js +++ b/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,8 +183,15 @@ export default function Teks({parole}) { )} - {parole?.files && ( - + {(parole?.files || (parole.creativeCommons && parole.stems?.length > 0)) && ( + + {parole?.files && ( + + )} + {parole.creativeCommons && parole.stems?.length > 0 && ( + + )} + )} {(parole.okiMizikID || parole.streamAudio.length > 0 || parole.gadeEmbed) && ( diff --git a/lib/oki-api.js b/lib/oki-api.js index c24fd01..fbb41d2 100644 --- a/lib/oki-api.js +++ b/lib/oki-api.js @@ -54,6 +54,9 @@ export async function jwennTeksEpiSlug(slug) { streamVideo: { populate: '*' }, + stems: { + populate: '*' + }, traductions: { populate: '*' },