React video player

by sanat gupta

HTML

<div id="app"></div>

CSS

.video{
   display:flex;
   justify-content: space-around;
}
.controls{
  background:gray;
  width:200px;
  padding:20px;
  display:flex;
  position:relative;
  top:80px;
  top: 120px;
  opacity: 0.6;
  box-shadow: 3px 3px 5px black;
}
.video_player{
  position:absolute;
}

React

const Videos = () => {
	const [videoStatus,setVideoStatus] = React.useState(false)
  const [controlPanel,setControlPanel] = React.useState(false)
 	const [duration,setDuration] = React.useState('')
  
  	let media = document.querySelector('video');
    const playPauseMedia = () => {
   	media = document.querySelector('video');
     if(media.paused) {
        media.play();
        setVideoStatus(true)
      } else {
        media.pause();
        setVideoStatus(false)
      }
    }
    
    const handleControlPanel = () => {
     media = document.querySelector('video');
    	if(media.readyState){
        let minutes = parseInt(media.duration / 60, 10);
				let seconds = media.duration % 60;
        setDuration(`${parseInt(minutes)}:${parseInt(seconds)}`)
      }
      setControlPanel(true)
    }
    
    const forwordVideo = () => {
       media = document.querySelector('video');
        media.currentTime += 5;
       	if(media.paused) {
          media.pause();
        }else{
          media.play();
        }
    }
    
    const backwordVideo = () => {
      media = document.querySelector('video');
      media.currentTime -= 5;
      if(media.paused) {
      	media.pause();
      }else{
        media.play();
      }
    }
    
 
     console.log('media',media)
    return (
    <div className="video" tabIndex={0}>
         <video 
         id="myVideo"
         className="video_player"
         onMouseOver={handleControlPanel}
        
          controlsList="nodownload"
          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
          poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
          width="400">

      Sorry, your browser doesn't support embedded videos,
      but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
      and watch it with your favorite video player!

        </video>
      
      {controlPanel &&  <div...