Control Bar Design Improvement

[MohitGupta12]

Proposed Changes

1. Introduce a settings icon to access video quality and playback speed options.
2. Move the progress bar above the control bar for improved visibility.
3. Apply a gradient background to enhance the control bar's aesthetics.

These changes will make a sleeker and more user-friendly control bar.

Visuals:

- Before Changes

- After Changes

Request for Assignment :

Can I go ahead with implementing these changes? If possible, could someone (@hkirat) assign this enhancement to me?

[sahilsuman933]

Honestly, it looks pretty good. Feel free to create a PR for it. I'm confident that @hkirat won't mind enhancing the cleanliness of the video player UI.

[MohitGupta12]

@sahilsuman933 i will start working on it can you assign this to me .

[sahilsuman933]

I don't have the permission to assign you! @MohitGupta12

[MohitGupta12]

@hkirat can you assign this to me

[MohitGupta12]

I don't have the permission to assign you! @MohitGupta12

I will just start working on it

[sahilsuman933]

It seems @pankaj-2503 has already started working on it.

// @MohitGupta12

[MohitGupta12]

he just added the color to the progress bar, that's fine I can manage the rest, thanks @pankaj-2503
I will make a PR after doing all of these necessary changes

[MohitGupta12]

@sahilsuman933 hey i was researching on this issue, so I found out that we were using video js for our video player and video js has various skins but nothing like youtube so should I came out with 2-3 solutions

• Create your control bar and hide videojs's control bar this will require to code functionality and style
• Overwrite videojs's control bar with our CSS this would bemainly styles

what would be better?