No progress bar

[GalliLuca]

Hi. I'm working with a functional component in React. If I request a video with an http async request and then put it into a state (setting it into useEffect), the player doesn't work correctly: the video is shown and can be played/paused, and you can also skip frames, but the progress bar is white and the time is 00:00/00:00.

I need to fix it since I have to work with markers after requesting the video.

Your help will be really appreciated, thanks!

[amittkSharma]

@GalliLuca: Can you please share a sample code or repository where you are doing this thing? I will be really happy to help you in this matter

[GalliLuca]

const VideoTest = () => {

const [volume, setVolume] = useState(0.7)
const [isPlaying, setIsPlaying] = useState(false)
const [markers, setMarkers] = useState([])
const [vid, setVid] = useState()

useEffect(async () => {
    const { data } = await axios.get(`http://localhost:5000/objdatas/46`)
    if (data) {
        setVid(require(`../../../medias/full/${data[0].filename}.${data[0].fullpath.split('.')[1]}`))
    }
}, []);

return( <VideoPlayer url={vid} isPlaying={isPlaying} volume={volume} onPlay={handlePlay} onPause={handlePause} onVolume={handleVolume} markers={markers} controls={['Play', 'Time', 'Progress', 'FullScreen', 'LastFrame', 'NextFrame']} onProgress={handleTime} width={800} height={600} onLoadedMetadata={handleMetadata} /> ) }

[GalliLuca]

As you can see, even if the video is there and playable, I can't see the time and progress bar as I normally would importing the video without the async request.

[amittkSharma]

@GalliLuca: I checked your code. There are a few minor adjustments that need to be made. I commented on them in the code below. Please use version 7.1.0 of the library. Below is the code

import axios from "axios";
import React, { useEffect, useState } from "react";
import VideoPlayer, { ProgressProps } from "react-video-player-extended";

export const VideoAsFuncComp: React.FC = () => {
  const [volume, setVolume] = useState(0.7);
  const [isPlaying, setIsPlaying] = useState(false);
  const [markers] = useState([]);
  const [vid, setVid] = useState();

  const handlePlay = () => {
    setIsPlaying(true);
  };

  const handlePause = () => {
    setIsPlaying(false);
  };

  const handleVolume = (value: number) => {
    setVolume(value);
  };

  const handleProgress = (_ev: Event, progressProps: ProgressProps) => {
    const { currentTime, percentage, duration } = progressProps;
    console.log(currentTime, percentage, duration);
  };

  **// UseEffect must be used like this**
  useEffect(() => {
    async function fetchVideo() {
      const { data } = await axios.get(`SOME API DATA...`);
      if (data) {
        const fullPath = `/video/trailer.mp4`;
        const fileName = "trailer";
        const extension = fullPath.split(".")[1];
        console.log(fileName, extension);
        setVid(require(`./video/${fileName}.${extension}`));
      } else {
        console.log(`No Data found...`);
      }
    }
    fetchVideo();
  }, []);

  return (
    <>
      {vid ? (
        <VideoPlayer
          url={vid}
          isPlaying={isPlaying}
          volume={volume}
          onPlay={handlePlay}
          onPause={handlePause}
          onVolume={handleVolume}
          markers={markers}
          controls={[
            "Play",
            "Time",
            "Progress",
            "FullScreen",
            "LastFrame",
            "NextFrame",
          ]}
          onProgress={handleProgress}
          **// Dimensions must be strings**
          // width={800}
          // height={600}
          width="800px"
          height="600px"
          onLoadedMetadata={(e) => {
            console.log(`Metadata loaded: ${e}`);
          }}
        />
      ) : (
        <p>Waiting for Video to load</p>
      )}
    </>
  );
};

Please try it out and let me know. I will be happy to help further

Thanks and regards

[GalliLuca]

It works! Thanks a lot for the tips, even if the {vid ? VideoPlayer : "Loading"} control was enough (it was sooo easy ahah). Thanks for your kindness!