On click show the current playing url in a player using react

Question

I have a simple section in which I am displaying different video from different source eg youtube, direct links eg mp4, hls, dash etc I am using react-player plugin to display videos, on click I am changing the video url .

Now I would like to show the current video URL being played in a player.

Live demo : live demo code sand box

Here is my source code.

import React, { useState, useRef, useEffect } from "react";
import "./styles.css";
import ReactPlayer from "react-player";

export default function App() {
  const [url, setUrl] = useState([
    "https://ak.picdn.net/shutterstock/videos/32335450/preview/stock-footage-drone-scanning-farm-analyze-the-field-smart-agriculture-k-size-movie-internet-of-things-th.webm"
  ]);

  const videoUrl = useRef(null);

  const hanldeBtn = () => {
    setUrl([
      "//s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4",
      "https://www.youtube.com/watch?v=9W0Dy1nM-zU",
      "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
    ]);
  };

  return (
    <div>
      <div className="player-wrapper">
        <ReactPlayer
          ref={videoUrl}
          controls
          url={url}
          playsinline
          muted={true}
          playing={true}
          autoPlay
          width="100%"
          height="100%"
          className="react-player"
        />
      </div>

      <button onClick={hanldeBtn}>Change url</button>

      <div id="debug">
        {" "}
        {videoUrl.current ? (
          <>
            <span>
              New Url: {videoUrl.current?.player?.player?.player?.currentSrc}
            </span>
          </>
        ) : (
          <>
            <span>Default Url: {url} </span>
          </>
        )}
      </div>
    </div>
  );
}

Problem: Now when I click button change url it change the video url in a player but in a div where I want to show the current playing video url still shows the old video url, if Double click then it changes the url.

What is wrong here?

Answer 1

Ref change in react, doesn't trigger rerender. On first click, url state changes, component rerenders, ReactPlayer updates ref, but component doesn't render second time. On second click, url state changes again, component rerenders and previous ref value renders

You can use onPlay callback of ReactPlayer

const [currentUrl, setCurrentUrl] = useState('');
   
<ReactPlayer 
  onPlay={() => {
    setCurrentUrl(videoUrl.current?.player?.player?.player?.currentSrc)
  }} 
/>