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?

why aren't you just using `url` instead of `{videoUrl.current?.player?.player?.player?.currentSrc}`? You already have the URL right there in React state. — Zeke Hernandez, Dec 04 '20 at 19:18
but `videoUrl` won't cause a re-render when it changes because it's just a ref; so when your app renders with a new URL `ReactPlayer` won't update videoUrl until after that render (and since it's just a ref, if won't trigger another render). — Zeke Hernandez, Dec 04 '20 at 19:19
Because URL won't show the current playing video but will show all the URLs available, u can check it yourself on codesandbox demo — The Dead Man, Dec 05 '20 at 11:04

Montecamo · Accepted Answer · 2020-12-04T19:34:20.367

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)
  }} 
/>

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

1 Answers1