From 70d45f86456c0fb88bd8a2352451c4a46047a58f Mon Sep 17 00:00:00 2001
From: kishorekumarns <kishore.ns@bitmovin.com>
Date: Tue, 28 Jun 2022 17:14:54 +0530
Subject: [PATCH 01/26] Add menu captions to the TV UI

---
 src/scss/skin-modern/_skin-tv.scss        |  2 +-
 src/ts/components/menucaption.ts          | 26 +++++++++++++++++++++++
 src/ts/components/settingstogglebutton.ts | 10 +++++++++
 src/ts/uifactory.ts                       | 22 ++++++++++++++-----
 4 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 src/ts/components/menucaption.ts

diff --git a/src/scss/skin-modern/_skin-tv.scss b/src/scss/skin-modern/_skin-tv.scss
index ace0d7b7e..8d42f106f 100644
--- a/src/scss/skin-modern/_skin-tv.scss
+++ b/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 {
diff --git a/src/ts/components/menucaption.ts b/src/ts/components/menucaption.ts
new file mode 100644
index 000000000..a56478ef2
--- /dev/null
+++ b/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);
+    });
+  }
+}
\ No newline at end of file
diff --git a/src/ts/components/settingstogglebutton.ts b/src/ts/components/settingstogglebutton.ts
index 5626f6d37..d2de7b3fd 100644
--- a/src/ts/components/settingstogglebutton.ts
+++ b/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
diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index eead75864..f28ff1244 100644
--- a/src/ts/uifactory.ts
+++ b/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,11 +416,13 @@ 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({
           components: [
-            new SettingsPanelItem(null, new SubtitleListBox()),
+            new SubtitleListBox(),
           ],
         }),
       ],
@@ -430,7 +433,7 @@ export namespace UIFactory {
       components: [
         new SettingsPanelPage({
           components: [
-            new SettingsPanelItem(null, new AudioTrackListBox()),
+            new AudioTrackListBox(),
           ],
         }),
       ],
@@ -456,18 +459,27 @@ 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,
-                  autoHideWhenNoActiveSettings: true,
+                  menuCaption : subtitleMenuCaption,
+                  autoHideWhenNoActiveSettings: false,
                   cssClass: 'ui-subtitlesettingstogglebutton',
                   text: i18n.getLocalizer('settings.subtitles'),
                 }),
                 new SettingsToggleButton({
                   settingsPanel: audioTrackListPanel,
-                  autoHideWhenNoActiveSettings: true,
+                  menuCaption : audioMenuCaption,
+                  autoHideWhenNoActiveSettings: false,
                   cssClass: 'ui-audiotracksettingstogglebutton',
                   ariaLabel: i18n.getLocalizer('settings.audio.track'),
                   text: i18n.getLocalizer('settings.audio.track'),

From ed0bb8137a18074e7b0f28dd164f78d4ee1ffa7e Mon Sep 17 00:00:00 2001
From: kishorekumarns <kishore.ns@bitmovin.com>
Date: Tue, 28 Jun 2022 17:28:42 +0530
Subject: [PATCH 02/26] fix the merge conflicts

---
 src/ts/uifactory.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index f28ff1244..7e0b9a173 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -422,7 +422,7 @@ export namespace UIFactory {
       components: [
         new SettingsPanelPage({
           components: [
-            new SubtitleListBox(),
+            new SettingsPanelItem(null, new SubtitleListBox()),
           ],
         }),
       ],
@@ -433,7 +433,7 @@ export namespace UIFactory {
       components: [
         new SettingsPanelPage({
           components: [
-            new AudioTrackListBox(),
+            new SettingsPanelItem(null, new AudioTrackListBox()),
           ],
         }),
       ],
@@ -472,14 +472,14 @@ export namespace UIFactory {
                  new SettingsToggleButton({
                   settingsPanel: subtitleListPanel,
                   menuCaption : subtitleMenuCaption,
-                  autoHideWhenNoActiveSettings: false,
+                  autoHideWhenNoActiveSettings: true,
                   cssClass: 'ui-subtitlesettingstogglebutton',
                   text: i18n.getLocalizer('settings.subtitles'),
                 }),
                 new SettingsToggleButton({
                   settingsPanel: audioTrackListPanel,
                   menuCaption : audioMenuCaption,
-                  autoHideWhenNoActiveSettings: false,
+                  autoHideWhenNoActiveSettings: true,
                   cssClass: 'ui-audiotracksettingstogglebutton',
                   ariaLabel: i18n.getLocalizer('settings.audio.track'),
                   text: i18n.getLocalizer('settings.audio.track'),

From a6ac6a173fb06689c1abfdb96458fcaa263764a2 Mon Sep 17 00:00:00 2001
From: Kishore NS <66994293+kishorens@users.noreply.github.com>
Date: Fri, 8 Jul 2022 11:12:32 +0530
Subject: [PATCH 03/26] Update src/ts/components/settingstogglebutton.ts

Co-authored-by: Daniel Weinberger <dweinber@users.noreply.github.com>
---
 src/ts/components/settingstogglebutton.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ts/components/settingstogglebutton.ts b/src/ts/components/settingstogglebutton.ts
index d2de7b3fd..319c88038 100644
--- a/src/ts/components/settingstogglebutton.ts
+++ b/src/ts/components/settingstogglebutton.ts
@@ -5,7 +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';
+import { Menucaption } from './menucaption';
 
 /**
  * Configuration interface for the {@link SettingsToggleButton}.

From 861cb28497789205970ed8c723f998da3db5f34d Mon Sep 17 00:00:00 2001
From: Kishore NS <66994293+kishorens@users.noreply.github.com>
Date: Fri, 8 Jul 2022 11:12:43 +0530
Subject: [PATCH 04/26] Update src/ts/components/menucaption.ts

Co-authored-by: Daniel Weinberger <dweinber@users.noreply.github.com>
---
 src/ts/components/menucaption.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ts/components/menucaption.ts b/src/ts/components/menucaption.ts
index a56478ef2..c525a798f 100644
--- a/src/ts/components/menucaption.ts
+++ b/src/ts/components/menucaption.ts
@@ -1,5 +1,5 @@
-import {Label, LabelConfig} from './label';
-import {UIInstanceManager} from '../uimanager';
+import { Label, LabelConfig } from './label';
+import { UIInstanceManager } from '../uimanager';
 import { PlayerAPI } from 'bitmovin-player';
 
 /**

From 3c04fad6440e0274b4d292a59c937659a90b27fa Mon Sep 17 00:00:00 2001
From: Kishore NS <66994293+kishorens@users.noreply.github.com>
Date: Fri, 8 Jul 2022 11:12:57 +0530
Subject: [PATCH 05/26] Update src/ts/uifactory.ts

Co-authored-by: Daniel Weinberger <dweinber@users.noreply.github.com>
---
 src/ts/uifactory.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index 7e0b9a173..6a37fb9cd 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -47,7 +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';
+import { Menucaption } from './components/menucaption';
 
 export namespace UIFactory {
 

From 098a82da7457df03d0e324cee91ec14f4e8f6909 Mon Sep 17 00:00:00 2001
From: Kishore NS <66994293+kishorens@users.noreply.github.com>
Date: Fri, 8 Jul 2022 11:13:10 +0530
Subject: [PATCH 06/26] Update src/ts/uifactory.ts

Co-authored-by: Daniel Weinberger <dweinber@users.noreply.github.com>
---
 src/ts/uifactory.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index 6a37fb9cd..8e8a5e05b 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -469,7 +469,7 @@ export namespace UIFactory {
             new Container({
               components: [
                 new MetadataLabel({ content: MetadataLabelContent.Title }),
-                 new SettingsToggleButton({
+                new SettingsToggleButton({
                   settingsPanel: subtitleListPanel,
                   menuCaption : subtitleMenuCaption,
                   autoHideWhenNoActiveSettings: true,

From f1f96882573012bc15f03a96fd03e3be6d3d60cc Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:24:55 +0200
Subject: [PATCH 07/26] Rename MenuCaption component (camel-case)

---
 src/ts/components/menucaption.ts          | 2 +-
 src/ts/components/settingstogglebutton.ts | 4 ++--
 src/ts/uifactory.ts                       | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ts/components/menucaption.ts b/src/ts/components/menucaption.ts
index c525a798f..47966c752 100644
--- a/src/ts/components/menucaption.ts
+++ b/src/ts/components/menucaption.ts
@@ -5,7 +5,7 @@ import { PlayerAPI } from 'bitmovin-player';
 /**
  * A label that displays a caption about the menu.
  */
-export class Menucaption extends Label<LabelConfig> {
+export class MenuCaption extends Label<LabelConfig> {
 
   constructor(config: LabelConfig = {}) {
     super(config);
diff --git a/src/ts/components/settingstogglebutton.ts b/src/ts/components/settingstogglebutton.ts
index 319c88038..64f7f4c2e 100644
--- a/src/ts/components/settingstogglebutton.ts
+++ b/src/ts/components/settingstogglebutton.ts
@@ -5,7 +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';
+import { MenuCaption } from './menucaption';
 
 /**
  * Configuration interface for the {@link SettingsToggleButton}.
@@ -25,7 +25,7 @@ export interface SettingsToggleButtonConfig extends ToggleButtonConfig {
   /**
    * The Menu caption component whose visibility the button should toggle.
    */
-  menuCaption?: Menucaption;
+  menuCaption?: MenuCaption;
 }
 
 /**
diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index c267a02a3..c098a1a45 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -51,7 +51,7 @@ import { SpatialNavigation } from './spatialnavigation/spatialnavigation';
 import { RootNavigationGroup } from './spatialnavigation/rootnavigationgroup';
 import { ListNavigationGroup, ListOrientation } from './spatialnavigation/ListNavigationGroup';
 import { EcoModeContainer } from './components/ecomodecontainer';
-import { Menucaption } from './components/menucaption';
+import { MenuCaption } from './components/menucaption';
 
 export namespace UIFactory {
   export function buildDefaultUI(player: PlayerAPI, config: UIConfig = {}): UIManager {
@@ -481,8 +481,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 subtitleMenuCaption = new MenuCaption({text: i18n.getLocalizer('settings.subtitles')});
+    const audioMenuCaption = new MenuCaption({text: i18n.getLocalizer('settings.audio.track')});
     const subtitleListBox = new SubtitleListBox();
     const subtitleListPanel = new SettingsPanel({
       components: [

From 9c1f3b6fe6142fe3fe40f18ca4911264beedd8f5 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:25:40 +0200
Subject: [PATCH 08/26] Export component

---
 src/ts/main.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ts/main.ts b/src/ts/main.ts
index d7524bcbe..8a68ddda5 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -88,6 +88,7 @@ export { SubtitleSettingsPanelPage } from './components/subtitlesettings/subtitl
 export { SettingsPanelItem } from './components/settingspanelitem';
 export { ReplayButton } from './components/replaybutton';
 export { QuickSeekButton, QuickSeekButtonConfig } from './components/quickseekbutton';
+export { MenuCaption } from './components/menucaption';
 
 // Object.assign polyfill for ES5/IE9
 // https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

From 13a84d6190843babe8c1c25c06948e89d0c7e7ec Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:26:12 +0200
Subject: [PATCH 09/26] Change positioning of the MenuCaption components in the
 TV UI

---
 src/ts/uifactory.ts | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index c098a1a45..71a71d643 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -545,13 +545,6 @@ export namespace UIFactory {
         }),
         new TitleBar({
           components: [
-            new Container({
-              components: [
-                subtitleMenuCaption,
-                audioMenuCaption,
-              ],
-              cssClasses: ['ui-menucaption'],
-            }),
             new Container({
               components: [
                 new MetadataLabel({ content: MetadataLabelContent.Title }),
@@ -565,6 +558,8 @@ export namespace UIFactory {
                 new MetadataLabel({ content: MetadataLabelContent.Description }),
                 subtitleListPanel,
                 audioTrackListPanel,
+                subtitleMenuCaption,
+                audioMenuCaption,
               ],
               cssClasses: ['ui-titlebar-bottom'],
             }),

From a05a2e5d5386836e1d71c3012413b3a599e3beab Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:28:09 +0200
Subject: [PATCH 10/26] Change MenuCaption to show when the button is focused,
 e.g. it is hovered or "selected" (but not activated)

---
 src/ts/components/settingstogglebutton.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ts/components/settingstogglebutton.ts b/src/ts/components/settingstogglebutton.ts
index 64f7f4c2e..307bfb5fb 100644
--- a/src/ts/components/settingstogglebutton.ts
+++ b/src/ts/components/settingstogglebutton.ts
@@ -83,12 +83,10 @@ 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
@@ -119,5 +117,16 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
       // Call handler for first init at startup
       settingsPanelItemsChangedHandler();
     }
+
+    this.getDomElement().on('focusin', (e) => {
+      if (menuCaption) {
+        menuCaption.show();
+      }
+    });
+    this.getDomElement().on('focusout', (e) => {
+      if (menuCaption) {
+        menuCaption.hide();
+      }
+    });
   }
 }

From 7f5c3da479db0cd5222427de6ae2d3cd9eef07d9 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:41:56 +0200
Subject: [PATCH 11/26] Use the UI's standard Label component instead of the
 new menuCaption component

---
 src/ts/components/settingstogglebutton.ts | 16 ++++++++--------
 src/ts/uifactory.ts                       | 20 +++++++++++++-------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/ts/components/settingstogglebutton.ts b/src/ts/components/settingstogglebutton.ts
index 307bfb5fb..20b2faf31 100644
--- a/src/ts/components/settingstogglebutton.ts
+++ b/src/ts/components/settingstogglebutton.ts
@@ -5,7 +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';
+import { Label, LabelConfig } from './label';
 
 /**
  * Configuration interface for the {@link SettingsToggleButton}.
@@ -25,7 +25,7 @@ export interface SettingsToggleButtonConfig extends ToggleButtonConfig {
   /**
    * The Menu caption component whose visibility the button should toggle.
    */
-  menuCaption?: MenuCaption;
+  menuLabel?: Label<LabelConfig>;
 }
 
 /**
@@ -46,7 +46,7 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
       cssClass: 'ui-settingstogglebutton',
       text: i18n.getLocalizer('settings'),
       settingsPanel: null,
-      menuCaption: null,
+      menuLabel: null,
       autoHideWhenNoActiveSettings: true,
       role: 'pop-up button',
     }, <SettingsToggleButtonConfig>this.config);
@@ -68,7 +68,7 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
 
     let config = this.getConfig();
     let settingsPanel = config.settingsPanel;
-    let menuCaption = config.menuCaption;
+    let menuLabel = config.menuLabel;
 
     this.onClick.subscribe(() => {
       // only hide other `SettingsPanel`s if a new one will be opened
@@ -119,13 +119,13 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
     }
 
     this.getDomElement().on('focusin', (e) => {
-      if (menuCaption) {
-        menuCaption.show();
+      if (menuLabel) {
+        menuLabel.show();
       }
     });
     this.getDomElement().on('focusout', (e) => {
-      if (menuCaption) {
-        menuCaption.hide();
+      if (menuLabel) {
+        menuLabel.hide();
       }
     });
   }
diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index 71a71d643..ed1ae7b1b 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -39,7 +39,7 @@ import { AdSkipButton } from './components/adskipbutton';
 import { CloseButton } from './components/closebutton';
 import { MetadataLabel, MetadataLabelContent } from './components/metadatalabel';
 import { PlayerUtils } from './playerutils';
-import { Label } from './components/label';
+import { Label, LabelConfig } from './components/label';
 import { CastUIContainer } from './components/castuicontainer';
 import { UIConditionContext, UIManager } from './uimanager';
 import { UIConfig } from './uiconfig';
@@ -481,8 +481,14 @@ 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 subtitleMenuLabel = new Label<LabelConfig>({
+      text: i18n.getLocalizer('settings.subtitles'),
+      hidden: true
+    });
+    const audioMenuLabel = new Label<LabelConfig>({
+      text: i18n.getLocalizer('settings.audio.track'),
+      hidden: true
+    });
     const subtitleListBox = new SubtitleListBox();
     const subtitleListPanel = new SettingsPanel({
       components: [
@@ -507,14 +513,14 @@ export namespace UIFactory {
     const playbackToggleOverlay = new PlaybackToggleOverlay();
     const subtitleToggleButton = new SettingsToggleButton({
       settingsPanel: subtitleListPanel,
-      menuCaption: subtitleMenuCaption,
+      menuLabel: subtitleMenuLabel,
       autoHideWhenNoActiveSettings: true,
       cssClass: 'ui-subtitlesettingstogglebutton',
       text: i18n.getLocalizer('settings.subtitles'),
     });
     const audioToggleButton = new SettingsToggleButton({
       settingsPanel: audioTrackListPanel,
-      menuCaption: audioMenuCaption,
+      menuLabel: audioMenuLabel,
       autoHideWhenNoActiveSettings: true,
       cssClass: 'ui-audiotracksettingstogglebutton',
       ariaLabel: i18n.getLocalizer('settings.audio.track'),
@@ -558,8 +564,8 @@ export namespace UIFactory {
                 new MetadataLabel({ content: MetadataLabelContent.Description }),
                 subtitleListPanel,
                 audioTrackListPanel,
-                subtitleMenuCaption,
-                audioMenuCaption,
+                subtitleMenuLabel,
+                audioMenuLabel,
               ],
               cssClasses: ['ui-titlebar-bottom'],
             }),

From 01cf093e385d54eb589f12e2b7b08805030ba920 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:42:14 +0200
Subject: [PATCH 12/26] Remove menuCaption component as it's not needed

---
 src/ts/components/menucaption.ts | 26 --------------------------
 src/ts/main.ts                   |  1 -
 src/ts/uifactory.ts              |  1 -
 3 files changed, 28 deletions(-)
 delete mode 100644 src/ts/components/menucaption.ts

diff --git a/src/ts/components/menucaption.ts b/src/ts/components/menucaption.ts
deleted file mode 100644
index 47966c752..000000000
--- a/src/ts/components/menucaption.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-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);
-    });
-  }
-}
\ No newline at end of file
diff --git a/src/ts/main.ts b/src/ts/main.ts
index 8a68ddda5..d7524bcbe 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -88,7 +88,6 @@ export { SubtitleSettingsPanelPage } from './components/subtitlesettings/subtitl
 export { SettingsPanelItem } from './components/settingspanelitem';
 export { ReplayButton } from './components/replaybutton';
 export { QuickSeekButton, QuickSeekButtonConfig } from './components/quickseekbutton';
-export { MenuCaption } from './components/menucaption';
 
 // Object.assign polyfill for ES5/IE9
 // https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index ed1ae7b1b..a58e42031 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -51,7 +51,6 @@ import { SpatialNavigation } from './spatialnavigation/spatialnavigation';
 import { RootNavigationGroup } from './spatialnavigation/rootnavigationgroup';
 import { ListNavigationGroup, ListOrientation } from './spatialnavigation/ListNavigationGroup';
 import { EcoModeContainer } from './components/ecomodecontainer';
-import { MenuCaption } from './components/menucaption';
 
 export namespace UIFactory {
   export function buildDefaultUI(player: PlayerAPI, config: UIConfig = {}): UIManager {

From 2c57d86d818c7f1994fdece4978af70ece03a6f6 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Mon, 1 Jul 2024 09:35:20 +0200
Subject: [PATCH 13/26] Fix lint-sass warnings in TV UI SCSS

---
 src/scss/skin-modern/_skin-tv.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/scss/skin-modern/_skin-tv.scss b/src/scss/skin-modern/_skin-tv.scss
index 4fcbdab0d..7b88230ba 100644
--- a/src/scss/skin-modern/_skin-tv.scss
+++ b/src/scss/skin-modern/_skin-tv.scss
@@ -16,7 +16,8 @@
     }
   }
 
-  .#{$prefix}-ui-titlebar-top,.#{$prefix}-ui-menucaption {
+  .#{$prefix}-ui-titlebar-top,
+  .#{$prefix}-ui-menucaption {
     margin-bottom: 1vh;
 
     > .#{$prefix}-container-wrapper {

From cea5b6c1361e2dfa963a938dd670487a1d443f94 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Mon, 1 Jul 2024 09:41:55 +0200
Subject: [PATCH 14/26] Fix tslint errors

---
 src/ts/uifactory.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index a58e42031..573a027c2 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -482,11 +482,11 @@ export namespace UIFactory {
   export function modernTvUI() {
     const subtitleMenuLabel = new Label<LabelConfig>({
       text: i18n.getLocalizer('settings.subtitles'),
-      hidden: true
+      hidden: true,
     });
     const audioMenuLabel = new Label<LabelConfig>({
       text: i18n.getLocalizer('settings.audio.track'),
-      hidden: true
+      hidden: true,
     });
     const subtitleListBox = new SubtitleListBox();
     const subtitleListPanel = new SettingsPanel({

From 9f277e7c09db408857a9988b70288b2c8a136000 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Mon, 1 Jul 2024 09:42:03 +0200
Subject: [PATCH 15/26] Add changelog entry

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c3567e0c..5ad6c9249 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [unreleased]
+
+### Added
+- Menu title `Label` in default TV UI
+
 ## [3.64.0] - 2024-05-28
 
 ### Added

From 10a6ba016f5889147dbef5f72b5341dc58e5e8f9 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:26:10 +0200
Subject: [PATCH 16/26] Remove menuLabel code from settingstogglebutton

---
 src/ts/components/settingstogglebutton.ts | 19 -------------------
 src/ts/uifactory.ts                       | 12 ------------
 2 files changed, 31 deletions(-)

diff --git a/src/ts/components/settingstogglebutton.ts b/src/ts/components/settingstogglebutton.ts
index 20b2faf31..5626f6d37 100644
--- a/src/ts/components/settingstogglebutton.ts
+++ b/src/ts/components/settingstogglebutton.ts
@@ -5,7 +5,6 @@ import {Component, ComponentConfig} from './component';
 import {ArrayUtils} from '../arrayutils';
 import { PlayerAPI } from 'bitmovin-player';
 import { i18n } from '../localization/i18n';
-import { Label, LabelConfig } from './label';
 
 /**
  * Configuration interface for the {@link SettingsToggleButton}.
@@ -21,11 +20,6 @@ export interface SettingsToggleButtonConfig extends ToggleButtonConfig {
    * Default: true
    */
   autoHideWhenNoActiveSettings?: boolean;
-
-  /**
-   * The Menu caption component whose visibility the button should toggle.
-   */
-  menuLabel?: Label<LabelConfig>;
 }
 
 /**
@@ -46,7 +40,6 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
       cssClass: 'ui-settingstogglebutton',
       text: i18n.getLocalizer('settings'),
       settingsPanel: null,
-      menuLabel: null,
       autoHideWhenNoActiveSettings: true,
       role: 'pop-up button',
     }, <SettingsToggleButtonConfig>this.config);
@@ -68,7 +61,6 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
 
     let config = this.getConfig();
     let settingsPanel = config.settingsPanel;
-    let menuLabel = config.menuLabel;
 
     this.onClick.subscribe(() => {
       // only hide other `SettingsPanel`s if a new one will be opened
@@ -117,16 +109,5 @@ export class SettingsToggleButton extends ToggleButton<SettingsToggleButtonConfi
       // Call handler for first init at startup
       settingsPanelItemsChangedHandler();
     }
-
-    this.getDomElement().on('focusin', (e) => {
-      if (menuLabel) {
-        menuLabel.show();
-      }
-    });
-    this.getDomElement().on('focusout', (e) => {
-      if (menuLabel) {
-        menuLabel.hide();
-      }
-    });
   }
 }
diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index 573a027c2..f6d5852df 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -480,14 +480,6 @@ export namespace UIFactory {
   }
 
   export function modernTvUI() {
-    const subtitleMenuLabel = new Label<LabelConfig>({
-      text: i18n.getLocalizer('settings.subtitles'),
-      hidden: true,
-    });
-    const audioMenuLabel = new Label<LabelConfig>({
-      text: i18n.getLocalizer('settings.audio.track'),
-      hidden: true,
-    });
     const subtitleListBox = new SubtitleListBox();
     const subtitleListPanel = new SettingsPanel({
       components: [
@@ -512,14 +504,12 @@ export namespace UIFactory {
     const playbackToggleOverlay = new PlaybackToggleOverlay();
     const subtitleToggleButton = new SettingsToggleButton({
       settingsPanel: subtitleListPanel,
-      menuLabel: subtitleMenuLabel,
       autoHideWhenNoActiveSettings: true,
       cssClass: 'ui-subtitlesettingstogglebutton',
       text: i18n.getLocalizer('settings.subtitles'),
     });
     const audioToggleButton = new SettingsToggleButton({
       settingsPanel: audioTrackListPanel,
-      menuLabel: audioMenuLabel,
       autoHideWhenNoActiveSettings: true,
       cssClass: 'ui-audiotracksettingstogglebutton',
       ariaLabel: i18n.getLocalizer('settings.audio.track'),
@@ -563,8 +553,6 @@ export namespace UIFactory {
                 new MetadataLabel({ content: MetadataLabelContent.Description }),
                 subtitleListPanel,
                 audioTrackListPanel,
-                subtitleMenuLabel,
-                audioMenuLabel,
               ],
               cssClasses: ['ui-titlebar-bottom'],
             }),

From 44ae9cef15bd75eaa9e3b8912a87f605bec0dad5 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:33:07 +0200
Subject: [PATCH 17/26] Use the Label component instead of creating a
 label/span HTML element on the fly

---
 src/ts/components/button.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index fe7671ba9..a74995a2f 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -2,6 +2,7 @@ import {ComponentConfig, Component} from './component';
 import {DOM} from '../dom';
 import {EventDispatcher, NoArgs, Event} from '../eventdispatcher';
 import { LocalizableText , i18n } from '../localization/i18n';
+import { Label, LabelConfig } from './label';
 
 /**
  * Configuration interface for a {@link Button} component.
@@ -28,6 +29,7 @@ export interface ButtonConfig extends ComponentConfig {
  * A simple clickable button.
  */
 export class Button<Config extends ButtonConfig> extends Component<Config> {
+  protected textLabel: Label<LabelConfig>;
 
   private buttonEvents = {
     onClick: new EventDispatcher<Button<Config>, NoArgs>(),
@@ -42,6 +44,12 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
       tabIndex: 0,
       acceptsTouchWithUiHidden: false,
     } as Config, this.config);
+
+    this.textLabel = new Label({
+      text: i18n.performLocalization(this.config.text),
+      for: this.config.id,
+      hidden: true,
+    });
   }
 
   protected toDomElement(): DOM {
@@ -62,9 +70,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     }
 
     // Create the button element with the text label
-    let buttonElement = new DOM('button', buttonElementAttributes, this).append(new DOM('span', {
-      'class': this.prefixCss('label'),
-    }).html(i18n.performLocalization(this.config.text)));
+    let buttonElement = new DOM('button', buttonElementAttributes, this).append(this.textLabel.getDomElement());
 
     // Listen for the click event on the button element and trigger the corresponding event on the button component
     buttonElement.on('click', () => {
@@ -86,6 +92,10 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     this.buttonEvents.onClick.dispatch(this);
   }
 
+  initialize(): void {
+    this.textLabel.initialize();
+  }
+
   /**
    * Gets the event that is fired when the button is clicked.
    * @returns {Event<Button<Config>, NoArgs>}

From cb3c3c4cf733f470a40e2ae88befb3f22512ba93 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:44:47 +0200
Subject: [PATCH 18/26] Add a new option for all buttons to show the associated
 label(/span) text when hovering/focusing the button

---
 src/scss/skin-modern/components/_button.scss | 19 +++++++++++++++++++
 src/ts/components/button.ts                  | 17 +++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/scss/skin-modern/components/_button.scss b/src/scss/skin-modern/components/_button.scss
index 108a574ed..be7f4a7a1 100644
--- a/src/scss/skin-modern/components/_button.scss
+++ b/src/scss/skin-modern/components/_button.scss
@@ -43,3 +43,22 @@
 .#{$prefix}-ui-button {
   @extend %ui-button;
 }
+
+.#{$prefix}-ui-labeledbutton {
+  @extend %ui-button;
+
+  span,
+  label {
+    text-align: center;
+    margin-top: 1.2em;
+    position: absolute;
+    color: $color-primary;
+    transform: translateX(-50%);
+    white-space: normal;
+  }
+
+  span.#{$prefix}-hidden,
+  label.#{$prefix}-hidden {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index a74995a2f..dd78d9677 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -23,6 +23,11 @@ export interface ButtonConfig extends ComponentConfig {
    * Default: false
    */
   acceptsTouchWithUiHidden?: boolean;
+
+  /**
+   * 
+   */
+  showTextOnFocus?: boolean
 }
 
 /**
@@ -43,6 +48,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
       role: 'button',
       tabIndex: 0,
       acceptsTouchWithUiHidden: false,
+      showTextOnFocus: false,
     } as Config, this.config);
 
     this.textLabel = new Label({
@@ -50,6 +56,10 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
       for: this.config.id,
       hidden: true,
     });
+
+    if (this.config.showTextOnFocus) {
+      this.config.cssClasses = this.config.cssClasses.concat('ui-labeledbutton');
+    }
   }
 
   protected toDomElement(): DOM {
@@ -72,6 +82,13 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     // Create the button element with the text label
     let buttonElement = new DOM('button', buttonElementAttributes, this).append(this.textLabel.getDomElement());
 
+    if (this.config.showTextOnFocus) {
+      buttonElement.on('focusin', (e) => this.textLabel.show());
+      buttonElement.on('mouseenter', (e) => this.textLabel.show());
+      buttonElement.on('focusout', (e) => this.textLabel.hide());
+      buttonElement.on('mouseleave', (e) => this.textLabel.hide());
+    }
+
     // Listen for the click event on the button element and trigger the corresponding event on the button component
     buttonElement.on('click', () => {
       this.onClickEvent();

From 363c53b5bd86b3c50f0991cb9d9e3ceaff8a5456 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 14:41:25 +0200
Subject: [PATCH 19/26] Use different offsets from the button depending on
 whether the button is in the title bar (top) or controlbar (bottom)

---
 src/scss/skin-modern/components/_button.scss | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/scss/skin-modern/components/_button.scss b/src/scss/skin-modern/components/_button.scss
index be7f4a7a1..8cdfaca81 100644
--- a/src/scss/skin-modern/components/_button.scss
+++ b/src/scss/skin-modern/components/_button.scss
@@ -50,7 +50,6 @@
   span,
   label {
     text-align: center;
-    margin-top: 1.2em;
     position: absolute;
     color: $color-primary;
     transform: translateX(-50%);
@@ -61,4 +60,22 @@
   label.#{$prefix}-hidden {
     display: none;
   }
+}
+
+.#{$prefix}-ui-controlbar {
+  .#{$prefix}-ui-labeledbutton {
+    span,
+    label {
+      margin-top: -1.7em;
+    }
+  }
+}
+
+.#{$prefix}-ui-titlebar {
+  .#{$prefix}-ui-labeledbutton {
+    span,
+    label {
+      margin-top: 1.2em;
+    }
+  }
 }
\ No newline at end of file

From 604c91ffe93f906047c1e40d6f3f72d349941b6e Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 15:05:33 +0200
Subject: [PATCH 20/26] Add documentation for new config option

---
 src/ts/components/button.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index dd78d9677..f8ff0c8c1 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -25,9 +25,11 @@ export interface ButtonConfig extends ComponentConfig {
   acceptsTouchWithUiHidden?: boolean;
 
   /**
-   * 
+   * Specifies whether the text of the button should be shown when the button is hovered or focused.
+   *
+   * Default: false
    */
-  showTextOnFocus?: boolean
+  showTextOnFocus?: boolean;
 }
 
 /**

From eb04be354e38f438214955040b0ebb2ee57f61cb Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:23:41 +0200
Subject: [PATCH 21/26] Use component's setText method

---
 src/ts/components/button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index f8ff0c8c1..6ccf84a33 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -104,7 +104,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
    * @param text the text to put into the label of the button
    */
   setText(text: LocalizableText): void {
-    this.getDomElement().find('.' + this.prefixCss('label')).html(i18n.performLocalization(text));
+    this.textLabel.setText(text)
   }
 
   protected onClickEvent() {

From 99ff56a9b5e0b9a458bc62e4f42092cb613aa9a7 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:24:13 +0200
Subject: [PATCH 22/26] Initialize and release the super class as well

---
 src/ts/components/button.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index 6ccf84a33..757ad8443 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -112,9 +112,15 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
   }
 
   initialize(): void {
+    super.initialize();
     this.textLabel.initialize();
   }
 
+  release(): void {
+    super.release();
+    this.textLabel.release();
+  }
+
   /**
    * Gets the event that is fired when the button is clicked.
    * @returns {Event<Button<Config>, NoArgs>}

From f5b814c1fefe4c3402fcb06a3f72d14d95235fa0 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:24:44 +0200
Subject: [PATCH 23/26] Mock the textLabel property

---
 spec/components/fullscreentogglebutton.spec.ts       | 8 ++++++++
 spec/components/pictureinpicturetogglebutton.spec.ts | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/spec/components/fullscreentogglebutton.spec.ts b/spec/components/fullscreentogglebutton.spec.ts
index 9e89f4ec5..46fd7ad21 100644
--- a/spec/components/fullscreentogglebutton.spec.ts
+++ b/spec/components/fullscreentogglebutton.spec.ts
@@ -14,6 +14,14 @@ describe('FullscreenToggleButton', () => {
     uiInstanceManagerMock = MockHelper.getUiInstanceManagerMock();
 
     fullscreenToggleButton = new FullscreenToggleButton();
+    (<any>fullscreenToggleButton).textLabel = {
+      setText: jest.fn(),
+      getDomElement: () => MockHelper.generateDOMMock(),
+      initialize: jest.fn(),
+      show: jest.fn(),
+      hide: jest.fn(),
+      release: jest.fn(),
+    };
     fullscreenToggleButton.initialize();
 
     // Setup DOM Mock
diff --git a/spec/components/pictureinpicturetogglebutton.spec.ts b/spec/components/pictureinpicturetogglebutton.spec.ts
index edc9daec7..2c5ef5862 100644
--- a/spec/components/pictureinpicturetogglebutton.spec.ts
+++ b/spec/components/pictureinpicturetogglebutton.spec.ts
@@ -14,6 +14,14 @@ describe('PictureInPictureToggleButton', () => {
     uiInstanceManagerMock = MockHelper.getUiInstanceManagerMock();
 
     pictureInPictureToggleButton = new PictureInPictureToggleButton();
+    (<any>pictureInPictureToggleButton).textLabel = {
+      setText: jest.fn(),
+      getDomElement: () => MockHelper.generateDOMMock(),
+      initialize: jest.fn(),
+      show: jest.fn(),
+      hide: jest.fn(),
+      release: jest.fn(),
+    };
     pictureInPictureToggleButton.initialize();
 
     // Setup DOM Mock

From 67482e088e9fd223f9fa10ca1324845e4cc4cdc2 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:25:57 +0200
Subject: [PATCH 24/26] Move label creation to the toDomElement method to be
 inline with other components

---
 src/ts/components/button.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index 757ad8443..11f35ba1e 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -53,12 +53,6 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
       showTextOnFocus: false,
     } as Config, this.config);
 
-    this.textLabel = new Label({
-      text: i18n.performLocalization(this.config.text),
-      for: this.config.id,
-      hidden: true,
-    });
-
     if (this.config.showTextOnFocus) {
       this.config.cssClasses = this.config.cssClasses.concat('ui-labeledbutton');
     }
@@ -81,6 +75,12 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
       buttonElementAttributes['role'] = this.config.role;
     }
 
+    this.textLabel = new Label({
+      text: i18n.performLocalization(this.config.text),
+      for: this.config.id,
+      hidden: true,
+    });
+
     // Create the button element with the text label
     let buttonElement = new DOM('button', buttonElementAttributes, this).append(this.textLabel.getDomElement());
 

From 5efe823e19738cf3d2890f9c834b60fe112d18d0 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:27:10 +0200
Subject: [PATCH 25/26] Remove outdated CSS class

---
 src/scss/skin-modern/_skin-tv.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/scss/skin-modern/_skin-tv.scss b/src/scss/skin-modern/_skin-tv.scss
index 7b88230ba..1a066187d 100644
--- a/src/scss/skin-modern/_skin-tv.scss
+++ b/src/scss/skin-modern/_skin-tv.scss
@@ -16,8 +16,7 @@
     }
   }
 
-  .#{$prefix}-ui-titlebar-top,
-  .#{$prefix}-ui-menucaption {
+  .#{$prefix}-ui-titlebar-top {
     margin-bottom: 1vh;
 
     > .#{$prefix}-container-wrapper {

From f185b58af4c9ae8fcfc92c57e1bc9793359e6fd4 Mon Sep 17 00:00:00 2001
From: Daniel Weinberger <dweinber@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:29:23 +0200
Subject: [PATCH 26/26] Satisfy the linter

---
 src/ts/components/button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
index 11f35ba1e..f5d92ceaa 100644
--- a/src/ts/components/button.ts
+++ b/src/ts/components/button.ts
@@ -104,7 +104,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
    * @param text the text to put into the label of the button
    */
   setText(text: LocalizableText): void {
-    this.textLabel.setText(text)
+    this.textLabel.setText(text);
   }
 
   protected onClickEvent() {