Media Player Has Gray Overlay When Moving Between Items

[joncameron]

Description

If you start from a playable playlist item that immediately follows an inaccessible item and click previous canvas, the inaccessible item doesn't fully load. It displays with timer, but is grayed out looking and the previous and next buttons are disabled. To reproduce, load the playlist, click on playlist item #8 and click the previous canvas button. Note that after I've played with this playlist a bunch, the problem is not always reproducible unless I reload the playlist.

Related bugs

• Select playlist item 17, and hit the next canvas button, playlist item 18 never loads unless I select it from the structured navigation.
• Select playlist item 24, I can use next canvas to advance to 25, but then the next canvas button does nothing (won't advance to 26).
• In Safari on iPad, if I advance to or select item 2, the next/previous canvas button will not return to me to item 1 (an inaccessible item) or item 3 (an accessible item). This was not observed on desktop.
• In Safari on iPad, if I select 29, the previous and next canvas buttons do not work (nothing happens when I click them). This was not observed in Safari on desktop (worked properly).
• If I use the next canvas button to advance to 29, the previous canvas button skips 28 (an inaccessible item). Observed in Safari on desktop and iPad. In Chrome on Android, the previous canvas button returns to 8 as it should, but sometimes there is a gray overlay.

Example

https://avalon-dev.dlib.indiana.edu/playlists/5

Done Looks Like

• [x] Gray overlay doesn't stick around or block UI when moving between playlist items
• [x] Test transition from playable item to inaccessible item
• [x] Test transition from inaccessible item to playable item
• [x] Next/Previous canvas buttons work when clicked
• [x] When using previous/next canvas buttons the previous/next items fully load;
  • [x] a playable canvas shows player controls and can be played
  • [x] an inaccessible items shows the previous/next buttons with a timer (when autoplay is on) without a grey overlay

[Dananji]

Created a new issue for the mobile devices: https://github.com/samvera-labs/ramp/issues/552

[elynema]

@Dananji I tested the 4 cases listed above that mentioned desktop in Safari and Chrome.

I ran into 2 issues that were intermittent, unfortunately. Perhaps you can see if you are able to reproduce them?

1. [In Safari only] Select playlist item 17, and hit the next canvas button. Playlist item 18 loads, but can't actually play (just spins if you try to play it, and the poster doesn't load). This happens intermittently, not always, and maybe be unrelated to the prev/next actions?
2. [In Safari only] Select playlist item 26, use next canvas buttons to advance through to item number 29. Use the previous canvas buttons to go backward. Sometimes when going back from playlist item 28 to playlist item 27, the playlist jumps to 27 and then back to 28. This happened to me multiple times, but every time I tried to record a video, it worked fine. [In Chrome only] When trying this in Chrome, I got the gray overlay when I clicked Previous from playlist item 28 to go back to item 27.

[Dananji]

@elynema I was able to reproduce issue 1 in Safari and the Chrome issue in 2 intermittently, but not the issue 2 in Safari.

As you mentioned both these are unrelated to prev/next button functionality.

These could be related to player events that are used for identifying the status to reveal the player as needed. We've had issues with player events not triggering in Safari but not Chrome before. Maybe create a new bug ticket for these?

[elynema]

@Dananji Is the Chrome issue for 2 related to this ticket since it is also a situation where we are getting the gray overlay when moving between items?

[Dananji]

Yes I think so. I'll do that work as a part of this ticket.

[elynema]

I've created Ramp #560 and #561 for Safari issue 1 and 2.

[joncameron]

👍