Explore background to bring together progress bar and video.js widgets

[elynema]

Description

In the new multi-line display of progress bar and video.js widgets in Ramp, there's not background color that brings those 2 elements together into a group. Some type of gray background could be useful here.

Current Ramp in Avalon:

Current MCO:

LinkedIn example:

Done Looks Like

• Gather more example of UI design for demarcating the player controls from the video image
• Generate some UI design proposals for possible changes to the contrast between player controls and other elements of the media player

[Dananji]

I found a VideoJS plugin which brings together icons in the progress bar: https://github.com/samueleastdev/videojs-setting-menu
There are 2 reasons why we can't use it out of the box;

1. When I tried to install it using yarn into Ramp, it gave an error. Related to other VideoJS dependencies we are using in Ramp
2. We can't customize the icons and menus that goes into the plugin at the moment. i.e. it has a static set of icons and this cannot be changed when initializing in Ramp

So, I brought in the code to Ramp as a custom plugin to see whether we can change things around to include what we want in the menu and I got the following;

Settings menu;

Captions menu opened within settings;

Work to do:

1. Fix the settings menu icon and styling to match Ramp
2. Check for accessibility when using the settings menu
3. When using the settings menu; the icons that goes into it still needs to be initialized as control-bar children in VideoJS options list, which for a couple of seconds shows up in the control bar when player is loading
4. Customize the menus that goes into settings menu using props like enableFileDownload
5. Test this implementation for mobile and how it works in that platform

Related work:
https://github.com/samvera-labs/ramp/tree/settings-menu-659

[Dananji]

After standup and being clarified on the issue; I looked at the following players to see how the popup menus look like;

1. YouTube: has a darker color (background: rgba(28,28,28,.9)) with a higher opacity than Ramp. You can still see the movements in the video underneath the popup menu when playing. The area underneath the progress-bar is transparent.
2. Vimeo: has a darker color (background: rgba(0,0,0,.8)) with a higher opacity than Ramp. You can see the color but not so much the images underneath the popup menu when playing. Container around the progress-bar is darkened which separates the progress-bar from the video.
3. Netflix: has an opaque (background: rgb(28,28,28)) dark background for popup menus, which hides part of the video when the menus are opened.

For reference Ramp's player has background: rgba(43, 51, 63, 0.7) for popup menus in VideoJS.

[Dananji]

@joncameron and @elynema I forgot ask about this in Backlog buddies. Is there any preferred changes to the popup menus we can do based on these findings? Or do we need further investigation?

[elynema]

We are looking at shading behind the widget bar and progress bar, not behind the popup menus:

LinkedIn Learning (above) does have a shading you can see, although opacity decreases as the shading moves up to the progress bar. Looking at Youtube, there is a very subtle shading at the bottom that seems to fade away before the progress bar. I didn't see any shading on Netflix.

Given what I was seeing with Youtube, we might want to come back to this after we add some padding around the progress bar and see if we feel like it is still needed.

[elynema]

With padding changes from #687, I think things look ok and we don't need any changes to background color / opacity.