|
import React, {useState} from 'react'; |
|
import Slider from '@mui/material/Slider'; |
|
import Box from '@mui/material/Box'; |
|
import {Accordion, AccordionSummary, AccordionDetails, Button} from '@mui/material'; |
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; |
|
|
|
let _animationProgress; |
|
|
|
export function setAnimationProgress(animationProgress) { |
|
_animationProgress = animationProgress; |
|
|
|
|
|
} |
|
|
|
function AnimationPanel({setAnimationPlaying, setAnimationStopPlaying, controlAnimation}) { |
|
const [value, setValue] = useState(0); |
|
|
|
return ( |
|
<div> |
|
<Box mb={1} mt={1}> |
|
<Accordion> |
|
<AccordionSummary expandIcon={<ExpandMoreIcon/>}> |
|
Animation |
|
</AccordionSummary> |
|
<AccordionDetails> |
|
<Button variant="contained" color="primary" fullWidth sx={{margin: '2px'}} onClick={() => { |
|
if (setAnimationPlaying) { |
|
setAnimationPlaying(); |
|
} |
|
}}>Play/Pause</Button> |
|
<Button variant="contained" color="primary" fullWidth sx={{margin: '2px'}} |
|
onClick={setAnimationStopPlaying}>Stop</Button> |
|
<Box width="100%"> |
|
<Slider min={0} max={100} |
|
value={value} |
|
onChange={(event, newValue) => { |
|
setValue(newValue); |
|
controlAnimation(newValue); |
|
}} |
|
aria-labelledby="continuous-slider" |
|
/> |
|
</Box> |
|
</AccordionDetails> |
|
</Accordion> |
|
</Box> |
|
</div> |
|
); |
|
} |
|
|
|
export default AnimationPanel; |
|
|