30 lines
777 B
JavaScript
30 lines
777 B
JavaScript
import cn from 'classnames';
|
|
import { useCallback, useState } from 'react';
|
|
|
|
import { Icon } from 'UI';
|
|
|
|
import cls from './PlayOverlay.css';
|
|
|
|
export default function PlayOverlay({ player }) {
|
|
const [ iconVisible, setIconVisible ] = useState(false);
|
|
|
|
const togglePlay = useCallback(() => {
|
|
player.togglePlay();
|
|
setIconVisible(true);
|
|
setTimeout(
|
|
() => setIconVisible(false),
|
|
800,
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
onClick={ togglePlay }
|
|
>
|
|
<div className={ cn("flex items-center justify-center", cls.iconWrapper, { [ cls.zoomWrapper ]: iconVisible }) } >
|
|
<Icon name={ player.state.playing ? "play" : "pause"} size="30" color="gray-medium"/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|