const VideoPlayer: React.FC<VideoPlayerProps> = ({ sourceItem }) => {
 const videoMedia = sourceItem.media[0] as Video;
 const playerRef = useRef<any>(null);
 const [isPlaying, setIsPlaying] = useState(false);
 const [isHover, setIsHover] = useState(false);
 const playerSource: SourceInfo = {
 type: "video" as const,
 title: sourceItem.title || "",
 sources: videoMedia.version_list.map((v: VideoVersion) => ({
 src: v.url,
 type: v.url.endsWith(".webm") ? "video/webm" : "video/mp4",
 size: v.height,
 })),
 poster: "",
 previewThumbnails: undefined,
 tracks: [],
 };
 const plyrOptions: Options = {
 controls: [],
 clickToPlay: true,
 autopause: true,
 };
 useEffect(() => {
 const plyrInstance = playerRef.current?.plyr;
 if (!plyrInstance) return;
 if (isHover) {
 plyrInstance.play();
 setIsPlaying(true);
 } else {
 plyrInstance.pause();
 setIsPlaying(false);
 }
 }, [isHover]);
 const handleVideoClick = () => {
 const plyrInstance = playerRef.current?.plyr;
 if (!plyrInstance) return;
 if (isPlaying) {
 plyrInstance.pause();
 setIsPlaying(false);
 } else {
 plyrInstance.play();
 setIsPlaying(true);
 }
 };
 const containerStyle: React.CSSProperties = {
 position: "relative",
 width: "100%",
 height: "auto",
 borderRadius: "8px",
 overflow: "hidden",
 cursor: "pointer",
 };
 return (
 <div
 style={containerStyle}
 // onMouseEnter={() => setIsHover(true)}
 // onMouseLeave={() => setIsHover(false)}
 onClick={handleVideoClick}
 >
 <Plyr ref={playerRef} source={playerSource} options={plyrOptions} />
 </div>
 );
};
export default VideoPlayer;