collect-system/apps/web/src/components/presentation/video-player/ControlButtons/Play.tsx

26 lines
595 B
TypeScript

import { useContext } from "react";
import { VideoPlayerContext } from "../VideoPlayer";
import { PauseIcon, PlayIcon } from "@heroicons/react/24/solid";
export default function Play() {
const { isPlaying, videoRef } = useContext(VideoPlayerContext);
return (
<>
<button
onClick={() =>
videoRef.current?.paused
? videoRef.current.play()
: videoRef.current?.pause()
}
className="text-white hover:text-primaryHover">
{isPlaying ? (
<PauseIcon className="w-10 h-10" />
) : (
<PlayIcon className="w-10 h-10" />
)}
</button>
</>
);
}