81 lines
1.9 KiB
JavaScript
81 lines
1.9 KiB
JavaScript
|
import React, { useState } from 'react'
|
||
|
|
import { useSelector } from 'react-redux'
|
||
|
|
import {
|
||
|
|
Menu,
|
||
|
|
Badge,
|
||
|
|
CircularProgress,
|
||
|
|
IconButton,
|
||
|
|
makeStyles,
|
||
|
|
Tooltip,
|
||
|
|
MenuItem,
|
||
|
|
} from '@material-ui/core'
|
||
|
|
import { FiActivity } from 'react-icons/fi'
|
||
|
|
import subsonic from '../subsonic'
|
||
|
|
|
||
|
|
const useStyles = makeStyles((theme) => ({
|
||
|
|
wrapper: {
|
||
|
|
position: 'relative',
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
position: 'absolute',
|
||
|
|
top: -1,
|
||
|
|
left: 0,
|
||
|
|
zIndex: 1,
|
||
|
|
},
|
||
|
|
button: {
|
||
|
|
zIndex: 2,
|
||
|
|
},
|
||
|
|
}))
|
||
|
|
|
||
|
|
const ActivityMenu = () => {
|
||
|
|
const classes = useStyles()
|
||
|
|
const [anchorEl, setAnchorEl] = useState(null)
|
||
|
|
const scanStatus = useSelector((state) => state.activity.scanStatus)
|
||
|
|
|
||
|
|
const open = Boolean(anchorEl)
|
||
|
|
|
||
|
|
const handleMenu = (event) => setAnchorEl(event.currentTarget)
|
||
|
|
const handleClose = () => setAnchorEl(null)
|
||
|
|
const startScan = () => fetch(subsonic.url('startScan', null))
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classes.wrapper}>
|
||
|
|
<Tooltip title={'Activity'}>
|
||
|
|
<IconButton className={classes.button} onClick={handleMenu}>
|
||
|
|
<Badge badgeContent={null} color="secondary">
|
||
|
|
<FiActivity size={'20'} />
|
||
|
|
</Badge>
|
||
|
|
</IconButton>
|
||
|
|
</Tooltip>
|
||
|
|
{scanStatus.scanning && (
|
||
|
|
<CircularProgress size={46} className={classes.progress} />
|
||
|
|
)}
|
||
|
|
<Menu
|
||
|
|
id="menu-activity"
|
||
|
|
anchorEl={anchorEl}
|
||
|
|
anchorOrigin={{
|
||
|
|
vertical: 'top',
|
||
|
|
horizontal: 'right',
|
||
|
|
}}
|
||
|
|
transformOrigin={{
|
||
|
|
vertical: 'top',
|
||
|
|
horizontal: 'right',
|
||
|
|
}}
|
||
|
|
open={open}
|
||
|
|
onClose={handleClose}
|
||
|
|
>
|
||
|
|
<MenuItem
|
||
|
|
className={classes.root}
|
||
|
|
activeClassName={classes.active}
|
||
|
|
onClick={startScan}
|
||
|
|
sidebarIsOpen={true}
|
||
|
|
>
|
||
|
|
{`Scanned: ${scanStatus.count}`}
|
||
|
|
</MenuItem>
|
||
|
|
</Menu>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ActivityMenu
|