Subs Caps Button isn't sized fully in v6

[gkatsev]

Description

The new Subs Caps Button in v6 has full functionality, however, when you click on it, you can see that the focus outline is sized to only the font-icon rather than the entire button itself.

Where as it should look like so:

Steps to reproduce

1. Create a player
2. Add some captions or subtitles
3. Play the video
4. Click on the subs caps button.

Results

Expected

Expected to outline the entire button

Actual

The outline only covers the font icon itself

Proposed solution

In the button.scss file, add a new selector that targets .vjs-button class inside of a .vjs-control class and sizes it to be 100%

.vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

To rebuild the styles locally, you can then run grunt skin or npm run grunt -- skin.

[agiridharan]

HI I would like to help with this bug issue! Is there anyone else working on it right now?

[gkatsev]

@agiridharan feel free to grab this. No one is working on it as far as I know. Thanks!

[agiridharan]

Hi @gkatsev I'm not understanding how to setup the video.js. I have run the build command, but I'm stuck on what I should do after that.

[gkatsev]

@agiridharan hey, sorry it took so long for me to get back to you. Unfortunately, seems like someone already sniped this issue :( ( #4548 ). If you're still interested in trying to get this set up and working, I'd be happy to help you out. We have general docs about contributing but essentially, the best way to do it is by clone the repo, run npm install and then run npm start. Then you can do to localhost:9999/sandbox/. You'd also need to move sandbox/index.html.example to sandbox/index.html.

[gkatsev]

Also, I'd hope to get more first-timers-only issues soon.

[mugendin]

Hi @gkatsev, i would like to help.