React player not retrieving on time firebase video link's duration(/length)

Question

My project allows user to record his screen, then upload the screen recording on firebase. In a different component, I am using React Player component to which i'm passing the firebase video url.

My issue is that for some reason, the video never knows when playing to asses the duration/length of the video, and then it causes the following error, which causes malfunction in the seekBar.

When debugging with a breaking point onMouseUp event (over the seekbar), I notice that in react player's component FilePlayer.js the getDuration function fails on retrieving the duration of the video (the comments are not mine), which receives the value of 'Infinity':

key: "getDuration",
    value: function getDuration() {
      if (!this.player) return null;
      var _this$player = this.player, 
          duration = _this$player.duration,
          seekable = _this$player.seekable; // on iOS, live streams return Infinity for the duration
      // so instead we use the end of the seekable timerange

      if (duration === Infinity && seekable.length > 0) {
        return seekable.end(seekable.length - 1);
      }

      return duration;
    }

this causes later on the inability to navigate across the video, as in seekTo function, the player attempts to perform the following command:

this.player.seekTo(duration * amount);

Interestingly though, it is able to retrieve the duration after approximately half of the video's length have been watched.

The error:

FilePlayer.js:399 Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
    at FilePlayer.seekTo (FilePlayer.js:399:1)
    at Player.seekTo (Player.js:370:1)
    at ReactPlayer.seekTo (ReactPlayer.js:211:1)
    at handleSeekMouseUp (juno_react_player.js:98:23)
    at Slider.js:723:1
    at HTMLDocument.<anonymous> (useEventCallback.js:15:1)
    at Player.seekTo (Player.js:370:1)
    at ReactPlayer.seekTo (ReactPlayer.js:211:1)
    at handleSeekMouseUp (juno_react_player.js:98:23)
    at Slider.js:723:1

any ideas on how can I handle this issue?

Regards :_)

React player not retrieving on time firebase video link's duration(/length)

0 Answers0