Add menu captions to the TV UI

[kishorens]

Jira - https://bitmovin.atlassian.net/browse/SOL-3687

Checklist (for PR submitter and reviewers)

• CHANGELOG entry

[dweinber]

Thanks for working on this! The code looks good (apart from a few nitpicks about code style / white spaces).

I'm afraid we'll need to tweak the functionality and design though:

1. When the MenuCaption gets displayed, the SettingsToggleButtons get pushed down. I don't think we should do that, the buttons must not move.
2. The MenuCaption should be displayed when the SettingsToggleButton has the focus (e.g. when navigating via TAB there on desktop) as well as when the button is clicked (= menu is opened). The first part is not in place yet.

[dweinber]

I've made a few changes to this PR:

• It uses the existing Label component instead of creating a new one
• It is shown when the SettingsToggleButton is focused (e.g. hovered or selected (but not activated) via spatial navigation) and hidden if not focused
• Position is now below the buttons, so that hide/show doesn't trigger layout changes.

@felix-hoc would appreciate if you could review this one.

Screenshots:

@bit-jacoba let me know if you're happy with that.

[dweinber]

(Need to check why the CI failed 🤔)

[dweinber]

(CI failure was just a tslint error, which is fixed now)

[felix-hoc]

Implementation looks OK from my side, just not sure about the design/concept. It feels a bit "unfinished". Perhaps we could at least center the labels underneath the buttons? But the Audio Track one might be a bit too long.

Alternatively, what if we just had the label displayed when the menu is opened? So as a header to the select box.

[dweinber]

I changed the approach quite a bit as I realized that all the buttons already have span/label elements included. There's now a new (optional) config option for all buttons (including ToggleButton, SettingsToggleButton etc) to show the label on hover/focus.

However, I'm still not 100% happy with this, as long texts could be cut off for buttons on the right or left side, but I don't have a better idea.

This is how it looks like now:

[felix-hoc]

Nice, IMO this approach is better 👍🏼

Could we also get rid of the blue glow in the background of the text?

[dweinber]

Could we also get rid of the blue glow in the background of the text?

I really tried but didn't manage. Happy to receive any suggestions or help 😅