Zoom icons 596

[Dananji]

Related issue: #596

Included in this PR:

• Re-arrange the player controls to provide more space for the controls when the UI is zoomed-in
• Set player's min-width so that, all player controls are displayed without overflowing when the UI is zoomed-in

[elynema]

@Dananji Looking at the screenshot, it looks like it's showing the progress bar above the other player controls to create space for the progress bar. I think this looks ok just from the screenshot (although I do notice that the icons on the second row are not vertically aligned).

We'll have to test this out once committed to see how we feel about the min-width.

[elynema]

@joncameron You ok with moving the progress bar to a separate line once screen width starts to decrease.

[joncameron]

Yep, I'm good with this. @Dananji please go ahead and update the PR from draft so we can merge it in and play around with the change.

[Dananji]

I did not test this out in mobile devices as part of the work I did. So, I will test in mobile devices to make sure everything works as expected and make any changes as needed.
And fix vertical alignment of the icons.

[Dananji]

Changes made to controls in last commit;

Volume panel change in video player;

Volume panel change in audio player;

[cjcolvar]

Looks good overall! I just had one question.

[elynema]

@joncameron Dananji changed the volume control so that it would not expand upward over top of the progress bar in these situations. Is that ok with you for first pass and we can try it out once this gets to QA?

@Dananji Did you consider using the horizontal volume slider like we use for audio only items?

[Dananji]

Yes, I did. And it looked a bit odd with the empty space on top and bottom for me. I think this wasn't noticeable before with the audio player because the control bar height was smaller then. In this work I increased the control bar height a little bit to make space.
If the horizontal volume panel with the mute toggle is preferred I can make that change for both audio and video player instances.
The only limitation with this design is that we can't use the vertical volume panel for video like before.

[cjcolvar]

👍