[BUG] Scrubbing in Safari before playback doesn't work intermittently

[elynema]

Describe the bug
If the user selects a new section and quickly scrubs someplace fairly late in the video before beginning playback, the playhead will jump back to the beginning of the video.

If the user sits for a few seconds before scrubbing after selecting the section, the scrubbing works. Likely due to the video not being fully loaded.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://avalon-dev.dlib.indiana.edu/media_objects/fq977t794
2. select second section
3. Quickly click on progress bar to scrub to somewhere past the middle of the video.
4. Wait. You’ll see the playhead jump back before starting playback.

Expected behavior
Scrubbing should work even before video is fully loaded into the player.

Screenshots
Private Zenhub Video

Desktop (please complete the following information):

• OS: iOS
• Browser: Safari

[Dananji]

We are intentionally calling player.load() upon page load for Safari because the player doesn't fully load automatically like in other browsers. This helps us to use scrubbing/seeking on the player progress-bar or use structured navigation and playlist markers to scrub/seek before playback starts.
This is causing the player to reset on Safari, if the user scrubs/seeks within the window where, the player is revealed and player.load() is called.

[Dananji]

The fix put in place for this issue could create a race condition for player dispatches for current time updates in the state. I did the following in the demo instance to see whether this happens, and I did not run into any inconsistencies.

But we should probably do these extra tests once this is brought into Avalon, since that environment could create different results.

• Load a new section and seek immediately to a non-zero time and observe the section starts from the seeked time when it is played
  • load https://avalon-dev.dlib.indiana.edu/media_objects/g158bh28p
  • load second section immediately
  • seek to a timepoint > 7 minute mark
  • play the section; observe the player starts from seeked timepoint
• Load a new section and seek immediately to a non-zero time and load another section right after: observe the second section has the time set to zero
  • load https://avalon-dev.dlib.indiana.edu/media_objects/g158bh28p
  • load second section immediately
  • seek to a timepoint > 7 minute mark
  • load third/any other section; observe the time is set to zero in the player
• Load a new section and seek immediately non-zero time and load another section using the structure where the start time is non-zero
  • load https://avalon-dev.dlib.indiana.edu/media_objects/g158bh28p
  • load second section immediately
  • seek to a timepoint > 7 minute mark
  • load third section by clicking 1. test timespan (00:15)
  • observe the time is set to 0:15 in the player

[elynema]

@abankhele Can you QA this one?

[abankhele]

Yes, I will take it up.

[abankhele]

This bug now does not replicate on iOS (Safari). However, on desktop(macos) (Chrome), when a new window is opened, the media object URL is pasted, and the steps are followed, the error is reproducible.

[elynema]

@Dananji Can you take a look at this bug that Akanksha reported in QA testing?

[Dananji]

@abankhele and @elynema I was not able to reproduce this on Chrome.

Steps I tried:

• opened the item in Chrome, and followed the steps in the issue description
• copy and pasted the URL to a new tab, and followed the steps in the issue description
• for each case mentioned in my comment copy and pasted the URL to a new tab, and followed the steps

I was not able to reproduce this for any of these. Could you specify which steps you followed?

[abankhele]

I followed the same steps as before to reproduce the issue: opening the media object, clicking on the second section, scrubbing past the middle of the video, and clicking the play button. However, I was unable to replicate the issue today.