How can I adapt this JS code to my Reactjs app so that I can customize my video player?

Question

I have been trying to customize my video element and wanted to be able to toggle play/pause move and change some colors from the predetermined player, but I am new to react and was wondering if someone could help me adapt this Js code to reactjs.

Here below is all my code for the player:

JS

    const video = document.querySelector(".video");
    const juice = document.querySelector(".orange-juice");
    const bin = document.querySelector("play-pause");

    function togglePlayPause() {
        if (video.paused) {
            btn.className = "pause";
            video.play();
        } else {
            btn.className = "play";
            video.pause();
        }
    }

    btn.onclick = function () {
        togglePlayPause();
    };

    video.addEventListener('timeupdate', function () {
        var juicePos = video.currentTime / video.duration;
        juice.style.width = juicePos * 100 + "%";
        if (video.ended) {
            btn.className = 'play';
        }
    });

html inside react

<div class="c-video">
   <video
      loop
      muted
      playsInline
      className="Video"
      src={videoUrl}
      style={videoStyle}
      controls="controls"
      />
   <div class="controls">
      <div class="orange-bar">
         <div class="orange-juice"></div>
      </div>
      <div class="buttons">
         <button id="play-pause"> </button>
      </div>
   </div>
</div>

CSS

.Video {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-height: 51vmin;
}

.c-video {
 width: 100%;
 position: relative;
 overflow: hidden;
}

.c-video:hover .controls{
    transform: translateY(0);
}

.controls {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
   flex-wrap: wrap;
   background: black;
   transform: translateY(100%) translateY(-5px);
   transition: all .2s;
}

.buttons{
    padding: 10px;
}

.buttons button.play:before {
    padding: 10px;
    content: 'play';
}
.buttons button.pause:before {
    padding: 10px;
    content: 'pause';
}

.buttons button {
    background: none;
    border: 0; 
    outline: 0;
    cursor: pointer;
}

.buttons button:before {
    content: 'play';
    width: 30px;
    height: 30px;
    display:inline-block;
    font-size: 28px;
    color:white;
    -webkit-font-smoothing: antialiased;
}

.orange-bar {
    height: 10px;
    top: 0;
    left: 0; 
    background:black;
    width: 100%
}

.orange-juice {
    height: 10px;
    width: 100px;
    background-color: orangered;
}

Answer 1

To be able to interact with DOM directly you should get a ref

function Component() {
  const videoRef = React.useRef();

  const handleTimeUpdated = () => {
    // do something on time update
  }

  const handlePlay = () => {
    videoRef.current.play();
  }

  const handlePause = () => {
    videoRef.current.pause();
  }

  return (
    <div className="c-video">
      <video
          loop
          muted
          playsInline
          className="motivesVideo"
          src={videoUrl}
          style={videoStyle}
          controls="controls"
          ref={videoRef} // it was added
          onTimeUpdate={handleTimeUpdated}
       />
       <button onClick={handlePlay}>Play</button>
       <button onClick={handlePause}>Pause</button>
    </div>
  );
}

You can take a look at the component here: https://github.com/video-react/video-react/blob/master/src/components/Video.js#L572