pawol.nu/components/teks/vwe-koute-achte.js

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
}