Create VweKouteAchte display links

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}) {
               <Typography noWrap variant='h6'>
                 {teks.titre}
               </Typography>
+              {teks.liens && teks.liens.length > 0 && (
+                <div className={classes.vwe}>
+                  <VweKouteAchte isVideo teks={teks} />
+                </div>
+              )}
+              {teks.kouteyAchtey && teks.kouteyAchtey.length > 0 && (
+                <div className={classes.koute}>
+                  <VweKouteAchte isAudio teks={teks} />
+                </div>
+              )}
             </>
           ) : (
             <Typography noWrap variant='h6'>

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: <AlbumIcon />,
+  Deezer: <Deezer />,
+  Spotify: <Spotify />,
+  Tidal: <Tidal />,
+  Amazon: <Amazon />,
+  Applemusic: <Applemusic />,
+  Youtubemusic: <Youtubemusic />
+}
+
+const vweyIcons = {
+  Youtube: <Youtube />,
+  Dailymotion: <Dailymotion />,
+  Soundcloud: <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 (
+    <div className={classes.root}>
+      <SpeedDial
+        color='secondary'
+        FabProps={{size: 'small', margin: 'auto', color: 'default'}}
+        ariaLabel='SpeedDial openIcon example'
+        className={classes.speedDial}
+        direction='down'
+        icon={<SpeedDialIcon icon={isAudio ? <MusicNoteIcon /> : <PlayArrowIcon />} />}
+        open={open}
+        onClose={handleClose}
+        onOpen={handleOpen}
+      >
+        {isAudio && kouteyAchteyActions.map(action => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+            onClick={() => handleClick(action.link)}
+          />
+        ))}
+        {isVideo && vweyActions.map(action => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+            onClick={() => handleClick(action.link)}
+          />
+        ))}
+      </SpeedDial>
+    </div>
+  )
+}
+
+VweKouteAchte.propTypes = {
+  teks: PropTypes.object.isRequired,
+  isVideo: PropTypes.bool,
+  isAudio: PropTypes.bool
+}
+
+VweKouteAchte.defaultProps = {
+  isVideo: false,
+  isAudio: false
+}