121 lines
2.8 KiB
JavaScript
121 lines
2.8 KiB
JavaScript
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {
|
|
Youtube,
|
|
Dailymotion,
|
|
Youtubemusic,
|
|
Applemusic,
|
|
Tidal,
|
|
Spotify,
|
|
Deezer,
|
|
Amazon,
|
|
Soundcloud,
|
|
Lbry,
|
|
Peertube
|
|
} from '@icons-pack/react-simple-icons'
|
|
import VideocamIcon from '@mui/icons-material/Videocam'
|
|
import MusicNoteIcon from '@mui/icons-material/MusicNote'
|
|
import AlbumIcon from '@mui/icons-material/Album'
|
|
import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled'
|
|
import {styled} from '@mui/material/styles'
|
|
import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@mui/material'
|
|
|
|
const PREFIX = 'vwe-koute-achte'
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`
|
|
}
|
|
|
|
const Root = styled('div')(() => ({
|
|
[`&.${classes.root}`]: {
|
|
height: 0,
|
|
transform: 'translateZ(0px)'
|
|
}
|
|
}))
|
|
|
|
const kouteyAchteyIcons = {
|
|
Qobuz: <AlbumIcon />,
|
|
Deezer: <Deezer />,
|
|
Spotify: <Spotify />,
|
|
Tidal: <Tidal />,
|
|
Amazon: <Amazon />,
|
|
Applemusic: <Applemusic />,
|
|
Youtubemusic: <Youtubemusic />,
|
|
Soundcloud: <Soundcloud />
|
|
}
|
|
|
|
const vweyIcons = {
|
|
Youtube: <Youtube />,
|
|
Dailymotion: <Dailymotion />,
|
|
Lbry: <Lbry />,
|
|
Rumble: <PlayCircleFilledIcon />,
|
|
Gadé: <Peertube />
|
|
}
|
|
|
|
export default function VweKouteAchte({parole, niVideyo, niOdyo}) {
|
|
const [ouve, meteOuve] = useState(false)
|
|
const {streamAudio, streamVideo} = parole
|
|
|
|
const kouteyAchteyActions = streamAudio.map(({plateforme, url}) => ({
|
|
icon: kouteyAchteyIcons[plateforme],
|
|
name: plateforme,
|
|
link: url
|
|
}))
|
|
|
|
const vweyActions = streamVideo.map(({plateforme, url}) => ({
|
|
icon: vweyIcons[plateforme],
|
|
name: plateforme,
|
|
link: url
|
|
}))
|
|
|
|
const handleOpen = () => {
|
|
meteOuve(true)
|
|
}
|
|
|
|
const handleClick = link => {
|
|
window.location = link
|
|
}
|
|
|
|
const handleClose = () => {
|
|
meteOuve(false)
|
|
}
|
|
|
|
return (
|
|
<Root className={classes.root}>
|
|
<SpeedDial
|
|
FabProps={{size: 'small', margin: 'auto', color: 'secondary'}}
|
|
ariaLabel='SpeedDial openIcon example'
|
|
className={classes.speedDial}
|
|
direction='down'
|
|
icon={<SpeedDialIcon icon={niOdyo ? <MusicNoteIcon /> : <VideocamIcon />} />}
|
|
open={ouve}
|
|
onClose={handleClose}
|
|
onOpen={handleOpen}
|
|
>
|
|
{niOdyo && kouteyAchteyActions.map(action => (
|
|
<SpeedDialAction
|
|
key={action.name}
|
|
icon={action.icon}
|
|
title={action.name}
|
|
onClick={() => handleClick(action.link)}
|
|
/>
|
|
))}
|
|
{niVideyo && vweyActions.map(action => (
|
|
<SpeedDialAction
|
|
key={action.name}
|
|
icon={action.icon}
|
|
title={action.name}
|
|
onClick={() => handleClick(action.link)}
|
|
/>
|
|
))}
|
|
</SpeedDial>
|
|
</Root>
|
|
)
|
|
}
|
|
|
|
VweKouteAchte.propTypes = {
|
|
parole: PropTypes.object.isRequired,
|
|
niVideyo: PropTypes.bool,
|
|
niOdyo: PropTypes.bool
|
|
}
|