Last playlist item title in structured nav blinks bold when last item finishes playing

[elynema]

Description

Once a playlist with auto-play set to true finishes playing the last item in the playlist, the playlist item title in the structured navigation flashes bold in and out repeatedly. Looks as if Ramp thinks it should be highlighted as active item then un-does the highlighting.

Private Zenhub Video

[joncameron]

Also needs retesting since a new Ramp build has since been added to Avalon.

[elynema]

Re-tested and still seeing this issue. It blinks bold in Chrome, but in Safari and Firefox, it is much worse, as the enter list of playlists items starts flashing.

Private Zenhub Video

[elynema]

@masaball I'm still seeing some flashing in Safari on Ramp and in avalon-dev, even after a hard refresh, so I think this is not yet fully solved. I haven't tested Chrome/Firefox yet.

Private Zenhub Video

[masaball]

I just now did some quick testing on Safari and was only able to get it to trigger three times out of a couple dozen runs so it seems to be pretty flaky. In checking the other browsers, I sometimes get a single flicker but not the consistent flashing. My guess would be that this is another case of Safari dropping or ignoring an event. I will circle back to this and try get it fully working in Safari after I'm done on #394.

[masaball]

After more testing, this is not just limited to Safari and there are non-flaky cases. I have a playlist item that still continuously flashes every time in all browsers. I have not fully investigated but I think it may be that custom timespans are not being marked as ended properly? VideoJS sees the whole length of the duration, but the played duration does not match when we try to tell VJS that play has ended and maybe that is confusing VJS? Will continue to investigate and get a fix put together.

[elynema]

For testing purposes, we are also getting flashing when auto-play is turned off and the playlist item that was playing ends. This only happens if auto-play is turned off while the playlist item is playing.

[elynema]

I'm also seeing some weird flashing in Safari when using prev/next canvas buttons to advance through a playlist. The current playlist item flashes bold 1-3 times before the bold advances to the next playlist item. It is a little hard to tell if this is happening in Ramp, since the demo site reloads to the top of the page every time you click next canvas, and you have to scroll back down to see the playlist items, but I don't think it is happening in the demo site.

This should be re-tested.

Private Zenhub Video

[elynema]

Did a quick test in Ramp demo site on Safari and Chrome on macOS. I tested what happens when the last item in the playlist finishes, when the user advances to the next item using the next button, and when an item completes playback and auto-play is turned off (all cases noted above). I'm not seeing the crazy flashing. In each of these scenarios, the current playlist item flashes bold once in the list of items. This doesn't seem like a dealbreaker, so probably good to go ahead with this in the Ramp build as is?

I also did a quick test in Safari on iPad and Chrome on Android and saw very similar behavior.

Note that the playlist item title also blinks bold once whenever you play/pause the item. It's possible the blinking is always related to that. This is annoying, but again, maybe not a dealbreaker?

[elynema]

@masaball @joncameron Tested this in macOS Safari in avalon-dev now that we have a new Ramp build. Overall, it is much improved. I am still seeing sometimes 1 and sometimes 3-4 blinks when clicking on an item in the playlist and using the next button to advance to the next canvas, as well as a blink when starting/stopping playback. Should I re-write this blinking as another issue? It's definitely odd and should be fixed at some point, but it doesn't really break anything.

Private Zenhub Video

[joncameron]

I'll create a new lower priority issue for removing all blinking behavior, but this issue can be closed since the primary case is handled here.