Display previous/next buttons and timer for inaccessible canvases

[Dananji]

Related issue: #501

It was not possible to implement what was described in the done looks like in the ticket, as Video.js requires at least one source to build the player and its controls. And for inaccessible items the sources list is empty in the Canvas.

Therefore this UI was implemented, by wiring the same functions the previous/next buttons use in the player controls to the buttons in the display.

When first item is inaccessible only display the next button; (and only displays previous button when last item is inaccessible)

Previous and next buttons when item is in the middle of the list;

Hides the timer display when auto-advance is turned off;

[cjcolvar]

Looks good overall as far as I can tell.

If auto advance is turned off then should the timer countdown be hidden instead of dimmed?

[Dananji]

I did think to hide the timer instead of dimming it and with the flexbox CSS it seemed to shift the content up and down when hiding and showing the timer. And I thought that behavior wouldn't be desirable so opted to dim the timer. But hiding the timer is a better option I can explore more on that.

[cjcolvar]

What do you think of putting the countdown below the previous/next buttons? If it were below then there shouldn't be shifting from hiding/showing, right?

[Dananji]

Using visibility: hidden; instead of display: none; seems to fix the issue with shifting elements.

And I removed checkAutoAdvance param in switchPlayer() function as it is not used in the current code. This flag seemed to be used when we had switchPlayer() triggered within the custom VideoJS progress component. And this was removed recently with the Video.js refactor.

[cjcolvar]

Looks great!