benwiley4000 / cassette

📼 A flexible media player component library for React that requires no up-front config
https://benwiley4000.github.io/cassette/styleguide
MIT License
184 stars 28 forks source link

Problems with displaying/seeking time when track has Infinity duration #374

Closed benwiley4000 closed 5 years ago

benwiley4000 commented 5 years ago

I noticed some issues while testing #373. If we are playing an unbounded media stream with Infinity duration, we have an undesirable time progress display:

screenshot from 2019-02-17 20-16-26

As we can see for the duration the minute count is Infinity and the second count is NaN. The current time display is unaffected.

However if we begin seeking the currentTime ends up displaying the same way:

screenshot from 2019-02-17 20-09-46

And as soon as we try to set the currentTime to the seek time, we encounter a runtime error:

screenshot from 2019-02-17 20-16-53

Solution

When the track duration is Infinity, instead of storing that as the duration, we should use the highest known buffered time value and pass that through context as the duration value. If there is no known buffered time value, we will pass 0.

We can store the highestKnownBufferedTime in state when we handle the progress event by extracting the end value at the last index of the bufferedRanges array and returning the max of that and the previous max value.

benwiley4000 commented 5 years ago

Going to track currentTime instead of bufferedRanges since in practice these values seem to be roughly the same but the max buffered value increases sporadically, making playback progress look kind of crazy.