You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
866 B
27 lines
866 B
import { Icon, Icons } from "@/components/Icon"; |
|
import { useCallback } from "react"; |
|
import { useVideoPlayerState } from "../VideoContext"; |
|
|
|
export function MiddlePauseControl() { |
|
const { videoState } = useVideoPlayerState(); |
|
|
|
const handleClick = useCallback(() => { |
|
if (videoState?.isPlaying) videoState.pause(); |
|
else videoState.play(); |
|
}, [videoState]); |
|
|
|
if (videoState.hasPlayedOnce) return null; |
|
if (videoState.isPlaying) return null; |
|
|
|
return ( |
|
<div |
|
onClick={handleClick} |
|
className="group pointer-events-auto flex h-16 w-16 items-center justify-center rounded-full bg-denim-400 text-white transition-[background-color,transform] hover:scale-125 hover:bg-denim-500 active:scale-100" |
|
> |
|
<Icon |
|
icon={Icons.PLAY} |
|
className="text-2xl transition-transform group-hover:scale-125" |
|
/> |
|
</div> |
|
); |
|
}
|
|
|