52 lines
No EOL
1.2 KiB
TypeScript
52 lines
No EOL
1.2 KiB
TypeScript
import React, { useState, useCallback, useEffect } from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon } from 'UI';
|
|
|
|
import cls from './PlayIconLayer.module.css';
|
|
import clsOv from './overlay.module.css';
|
|
|
|
interface Props {
|
|
togglePlay: () => void,
|
|
playing: boolean,
|
|
}
|
|
|
|
export default function PlayIconLayer({ playing, togglePlay }: Props) {
|
|
const [ showPlayOverlayIcon, setShowPlayOverlayIcon ] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// TODO Find a better way to do this
|
|
document.addEventListener('keydown', onKeyDown);
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', onKeyDown);
|
|
}
|
|
}, [])
|
|
|
|
const onKeyDown = (e) => {
|
|
if (e.key === ' ') {
|
|
togglePlayAnimated()
|
|
}
|
|
}
|
|
|
|
const togglePlayAnimated = useCallback(() => {
|
|
setShowPlayOverlayIcon(true);
|
|
togglePlay();
|
|
setTimeout(() => setShowPlayOverlayIcon(false), 800);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={ clsOv.overlay } onClick={ togglePlayAnimated }>
|
|
<div
|
|
className={ cn(cls.iconWrapper, {
|
|
[ cls.zoomIcon ]: showPlayOverlayIcon
|
|
}) }
|
|
>
|
|
<Icon
|
|
name={ playing ? "play" : "pause" }
|
|
color="gray-medium"
|
|
size={30}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |