diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index c43d74e..a46a8f6 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -21,6 +21,7 @@ import {makeStyles, useTheme} from '@material-ui/core/styles'
import DrawerBar from './drawer-bar'
import DenyeTeks from './denye-teks'
+import VweKouteAchte from './vwe-koute-achte'
const drawerWidth = 240
@@ -79,6 +80,22 @@ const useStyles = makeStyles(theme => ({
},
grid: {
marginTop: '1em'
+ },
+ koute: {
+ position: 'absolute',
+ right: '25px',
+ top: '8px',
+ [theme.breakpoints.up('sm')]: {
+ top: '10px'
+ }
+ },
+ vwe: {
+ position: 'absolute',
+ right: '90px',
+ top: '8px',
+ [theme.breakpoints.up('sm')]: {
+ top: '10px'
+ }
}
}))
@@ -122,6 +139,16 @@ export default function TeksDrawer({miziks, mizik}) {
{teks.titre}
+ {teks.liens && teks.liens.length > 0 && (
+
+
+
+ )}
+ {teks.kouteyAchtey && teks.kouteyAchtey.length > 0 && (
+
+
+
+ )}
>
) : (
diff --git a/components/teks/vwe-koute-achte.js b/components/teks/vwe-koute-achte.js
new file mode 100644
index 0000000..5bd4c5c
--- /dev/null
+++ b/components/teks/vwe-koute-achte.js
@@ -0,0 +1,119 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+ Youtube,
+ Dailymotion,
+ Youtubemusic,
+ Applemusic,
+ Tidal,
+ Spotify,
+ Deezer,
+ Amazon,
+ Soundcloud
+} from '@icons-pack/react-simple-icons'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import AlbumIcon from '@material-ui/icons/Album'
+import {makeStyles} from '@material-ui/core/styles'
+import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
+
+const useStyles = makeStyles(() => ({
+ root: {
+ height: 0,
+ transform: 'translateZ(0px)'
+ }
+}))
+
+const kouteyAchteyIcons = {
+ Qobuz: ,
+ Deezer: ,
+ Spotify: ,
+ Tidal: ,
+ Amazon: ,
+ Applemusic: ,
+ Youtubemusic:
+}
+
+const vweyIcons = {
+ Youtube: ,
+ Dailymotion: ,
+ Soundcloud:
+}
+
+export default function VweKouteAchte({teks, isVideo, isAudio}) {
+ const classes = useStyles()
+ const [open, setOpen] = React.useState(false)
+ const {kouteyAchtey, liens} = teks
+
+ const kouteyAchteyActions = kouteyAchtey.map(({store, lien}) => {
+ return {
+ icon: kouteyAchteyIcons[store],
+ name: store,
+ link: lien
+ }
+ })
+
+ const vweyActions = liens.map(({lien, hebergeur}) => {
+ return {
+ icon: vweyIcons[hebergeur],
+ name: hebergeur,
+ link: lien
+ }
+ })
+
+ const handleOpen = () => {
+ setOpen(true)
+ }
+
+ const handleClick = link => {
+ window.location = link
+ }
+
+ const handleClose = () => {
+ setOpen(false)
+ }
+
+ return (
+
+
:
} />}
+ open={open}
+ onClose={handleClose}
+ onOpen={handleOpen}
+ >
+ {isAudio && kouteyAchteyActions.map(action => (
+
handleClick(action.link)}
+ />
+ ))}
+ {isVideo && vweyActions.map(action => (
+ handleClick(action.link)}
+ />
+ ))}
+
+
+ )
+}
+
+VweKouteAchte.propTypes = {
+ teks: PropTypes.object.isRequired,
+ isVideo: PropTypes.bool,
+ isAudio: PropTypes.bool
+}
+
+VweKouteAchte.defaultProps = {
+ isVideo: false,
+ isAudio: false
+}