Add menu captions to the TV UI

src/scss/skin-modern/_skin-tv.scss

@@ -16,7 +16,7 @@
     }
   }
 
-  .#{$prefix}-ui-titlebar-top {
+  .#{$prefix}-ui-titlebar-top,.#{$prefix}-ui-menucaption {
     margin-bottom: $medium-size;
 
     > .#{$prefix}-container-wrapper {

src/ts/components/menucaption.ts

@@ -0,0 +1,26 @@
+import {Label, LabelConfig} from './label';
+import {UIInstanceManager} from '../uimanager';
+import { PlayerAPI } from 'bitmovin-player';
+
+/**
+ * A label that displays a caption about the menu.
+ */
+export class Menucaption extends Label<LabelConfig> {
+
+  constructor(config: LabelConfig = {}) {
+    super(config);
+    this.config = this.mergeConfig(config, {
+      hidden: true,
+    }, this.config);
+  }
+
+  configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
+    super.configure(player, uimanager);
+    let config = this.getConfig();
+    let text = config.text;
+
+    this.onShow.subscribe(() => {
+     this.setText(text);
+    });
+  }
+}

src/ts/components/settingstogglebutton.ts

@@ -5,6 +5,7 @@ import {Component, ComponentConfig} from './component';
 import {ArrayUtils} from '../arrayutils';
 import { PlayerAPI } from 'bitmovin-player';
 import { i18n } from '../localization/i18n';
+import {Menucaption} from './menucaption';
 
 /**
  * Configuration interface for the {@link SettingsToggleButton}.
@@ -20,6 +21,11 @@ export interface SettingsToggleButtonConfig extends ToggleButtonConfig {
    * Default: true
    */
   autoHideWhenNoActiveSettings?: boolean;
+
+  /**
+   * The Menu caption component whose visibility the button should toggle.
+   */
+  menuCaption?: Menucaption;
 }
 
 /**
@@ -40,6 +46,7 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
       cssClass: 'ui-settingstogglebutton',
       text: i18n.getLocalizer('settings'),
       settingsPanel: null,
+      menuCaption: null,
       autoHideWhenNoActiveSettings: true,
       role: 'pop-up button',
     }, <SettingsToggleButtonConfig>this.config);
@@ -61,6 +68,7 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
 
     let config = this.getConfig();
     let settingsPanel = config.settingsPanel;
+    let menuCaption = config.menuCaption;
 
     this.onClick.subscribe(() => {
       // only hide other `SettingsPanel`s if a new one will be opened
@@ -75,10 +83,12 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
     settingsPanel.onShow.subscribe(() => {
       // Set toggle status to on when the settings panel shows
       this.on();
+      if (menuCaption) menuCaption.show();
     });
     settingsPanel.onHide.subscribe(() => {
       // Set toggle status to off when the settings panel hides
       this.off();
+      if (menuCaption) menuCaption.hide();
     });
 
     // Ensure that only one `SettingPanel` is visible at once

src/ts/uifactory.ts

@@ -47,6 +47,7 @@ import { PlayerAPI } from 'bitmovin-player';
 import { i18n } from './localization/i18n';
 import { SubtitleListBox } from './components/subtitlelistbox';
 import { AudioTrackListBox } from './main';
+import {Menucaption} from './components/menucaption';
 
 export namespace UIFactory {
 
@@ -415,6 +416,8 @@ export namespace UIFactory {
   }
 
   export function modernTvUI() {
+    const subtitleMenuCaption = new Menucaption({text: i18n.getLocalizer('settings.subtitles')});
+    const audioMenuCaption = new Menucaption({text: i18n.getLocalizer('settings.audio.track')});
     const subtitleListPanel = new SettingsPanel({
       components: [
         new SettingsPanelPage({
@@ -456,17 +459,26 @@ export namespace UIFactory {
         }),
         new TitleBar({
           components: [
+            new Container({
+              components: [
+                subtitleMenuCaption,
+                audioMenuCaption,
+              ],
+              cssClasses: ['ui-menucaption'],
+            }),
             new Container({
               components: [
                 new MetadataLabel({ content: MetadataLabelContent.Title }),
-                new SettingsToggleButton({
+                 new SettingsToggleButton({
                   settingsPanel: subtitleListPanel,
+                  menuCaption : subtitleMenuCaption,
                   autoHideWhenNoActiveSettings: true,
                   cssClass: 'ui-subtitlesettingstogglebutton',
                   text: i18n.getLocalizer('settings.subtitles'),
                 }),
                 new SettingsToggleButton({
                   settingsPanel: audioTrackListPanel,
+                  menuCaption : audioMenuCaption,
                   autoHideWhenNoActiveSettings: true,
                   cssClass: 'ui-audiotracksettingstogglebutton',
                   ariaLabel: i18n.getLocalizer('settings.audio.track'),