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 (
+ <>
+ } sx={{marginBottom: 2}} variant='outlined' onClick={handleClickOpen}>
+ Stems
+
+
+ >
+ )
+}
+
+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: '*'
},