samvera-labs / ramp

Interactive, IIIF powered audio/video media player React components library. Styleguidist Docs: https://samvera-labs.github.io/ramp/
https://ramp.avalonmediasystem.org/
30 stars 5 forks source link

[BUG] Playlist item does not playback intermittently in Safari #560

Closed elynema closed 1 month ago

elynema commented 1 month ago

Describe the bug In our testing playlist, there is a playlist item that sometimes will not play when advancing to it using the next canvas button. This has been observed in Safari with the playlist on both avalon-dev and in the Ramp demo site. This happens intermittently (so not always).

It is unknown if this problem might occur for other playlist items.

To Reproduce Steps to reproduce the behavior:

  1. Go to playlist: https://avalon-dev.dlib.indiana.edu/playlists/5/manifest.json
  2. Select playlist item 17, and hit the next canvas button.
  3. Playlist item 18 loads, but can't actually play (just spins if you try to play it, and the poster image doesn't load)
  4. In the Ramp demo site, the playlist actually jumps ahead to playlist item 19 if auto-play is turned on but playlist item 18 can't be played.

Expected behavior When you advance to playlist item 18 using the next canvas button, the poster image should load and the content should play if the user hits the play button.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Dananji commented 1 month ago

This seems to be a timing issue with player events and the custom progress bar updates not aligning properly. I have tried fixing the timing in multiple places, and it breaks in another place. This is intermittent in behavior.

As this is not urgent for 7.8 and will probably go in to the next release and we've been having issues with timing in events in the progress updates lately that we've been patching up, I thought this would be good chance to re-examine the implementation of the custom progress bar.

So I'm trying to re-organize the Video.js components using Video.js' native progress control with some custom implementations to see whether we can overcome these timing issues.

Dananji commented 1 month ago

I was not able to make it work with re-organizing the Video.js components using Video.js' native progress control. However using React refs for variables along with the fix for #580 this seems to be working.

joncameron commented 1 month ago

Could no longer reproduce. đź‘Ť