remove the ModernSettingsPanel and ModernSettingsPanelPage and merge …

…functionality in the default ones

src/ts/components/modernsettingspanelitem.ts

@@ -3,20 +3,15 @@ import {UIInstanceManager} from '../uimanager';
 import {SelectBox} from './selectbox';
 import { PlayerAPI } from 'bitmovin-player';
 import { LocalizableText } from '../localization/i18n';
-import { ModernSettingsPanelPage } from './modernsettingspanelpage';
 import { ListSelector, ListSelectorConfig } from './listselector';
 import { SubtitleSelectBox } from './subtitleselectbox';
 import { SettingsPanelItem, SettingsPanelItemConfig } from './settingspanelitem';
-import {
-  Component,
-  ComponentConfig,
-  Container,
-  ContainerConfig,
-  SettingsPanelPageBackButton,
-  SubtitleSettingSelectBox, SubtitleSettingsLabel,
-} from '../main';
-import { ModernSettingsPanel } from './modernsettingspanel';
 import { ModernSettingsPanelSelectOption } from './modernsettingspanelselectoption';
+import { SettingsPanelPage } from './settingspanelpage';
+import { SubtitleSettingsLabel } from './subtitlesettings/subtitlesettingslabel';
+import { SettingsPanel } from './settingspanel';
+import { SettingsPanelPageBackButton } from './settingspanelpagebackbutton';
+import { SubtitleSettingSelectBox } from './subtitlesettings/subtitlesettingselectbox';
 
 /**
  * An item for a {@link ModernSettingsPanelPage},
@@ -26,7 +21,7 @@ import { ModernSettingsPanelSelectOption } from './modernsettingspanelselectopti
 export interface ModernSettingsPanelItemConfig extends SettingsPanelItemConfig {
   label: LocalizableText | SubtitleSettingsLabel;
   setting: ListSelector<ListSelectorConfig>;
-  container: ModernSettingsPanel;
+  container: SettingsPanel;
 }
 
 export class ModernSettingsPanelItem extends SettingsPanelItem<ModernSettingsPanelItemConfig> {
@@ -106,9 +101,9 @@ export class ModernSettingsPanelItem extends SettingsPanelItem<ModernSettingsPan
     this.getDomElement().on('click', (e) => { e.stopPropagation(); handleItemClick(); });
   }
 
-  private buildSubPanelPage(): ModernSettingsPanelPage {
+  private buildSubPanelPage(): SettingsPanelPage {
     const menuOptions = this.setting.getItems();
-    const page = new ModernSettingsPanelPage({}, true);
+    const page = new SettingsPanelPage({ removeOnPop: true });
 
     const text = this.config.label instanceof SubtitleSettingsLabel ? this.config.label.text : this.config.label;
 
@@ -155,7 +150,7 @@ export class ModernSettingsPanelItem extends SettingsPanelItem<ModernSettingsPan
 
   public displayItemsSubPage(): void {
     let page = this.buildSubPanelPage();
-    this.config.container.addDynamicPage(page);
+    this.config.container.addPage(page);
     this.config.container.setActivePage(page);
   }
 }

src/ts/components/settingspanel.ts

@@ -3,7 +3,7 @@ import { SelectBox } from './selectbox';
 import { UIInstanceManager } from '../uimanager';
 import { Timeout } from '../timeout';
 import { Event, EventDispatcher, NoArgs } from '../eventdispatcher';
-import { SettingsPanelPage } from './settingspanelpage';
+import { SettingsPanelPage, SettingsPanelPageConfig } from './settingspanelpage';
 import { SettingsPanelItem, SettingsPanelItemConfig } from './settingspanelitem';
 import { PlayerAPI } from 'bitmovin-player';
 import { Component, ComponentConfig } from './component';
@@ -261,6 +261,11 @@ export class SettingsPanel extends Container<SettingsPanelConfig> {
     super.addComponent(component);
   }
 
+  addPage(page: SettingsPanelPage) {
+    this.addComponent(page);
+    this.updateComponents();
+  }
+
   protected suspendHideTimeout() {
     this.hideTimeout.suspend();
   }

src/ts/components/settingspanelpage.ts

@@ -5,12 +5,16 @@ import {Event, EventDispatcher, NoArgs} from '../eventdispatcher';
 import { PlayerAPI } from 'bitmovin-player';
 import { BrowserUtils } from '../browserutils';
 
+export interface SettingsPanelPageConfig extends ContainerConfig {
+  removeOnPop?: Boolean;
+}
+
 /**
  * A panel containing a list of {@link SettingsPanelItem items} that represent labelled settings.
  *
  * @category Components
  */
-export class SettingsPanelPage extends Container<ContainerConfig> {
+export class SettingsPanelPage extends Container<SettingsPanelPageConfig> {
 
   private static readonly CLASS_LAST = 'last';
 
@@ -20,13 +24,14 @@ export class SettingsPanelPage extends Container<ContainerConfig> {
     onInactive: new EventDispatcher<SettingsPanelPage, NoArgs>(),
   };
 
-  constructor(config: ContainerConfig) {
+  constructor(config: SettingsPanelPageConfig) {
     super(config);
 
-    this.config = this.mergeConfig<ContainerConfig>(config, {
+    this.config = this.mergeConfig(config, {
       cssClass: 'ui-settings-panel-page',
       role: 'menu',
-    }, this.config);
+      removeOnPop: false,
+    } as SettingsPanelPageConfig, this.config);
   }
 
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {

src/ts/components/subtitlesettings/subtitlesettingspanelpage.ts

@@ -1,8 +1,7 @@
-import {SettingsPanelPage} from '../settingspanelpage';
+import { SettingsPanelPage, SettingsPanelPageConfig } from '../settingspanelpage';
 import {SettingsPanel} from '../settingspanel';
 import {SubtitleOverlay} from '../subtitleoverlay';
 import {ContainerConfig} from '../container';
-import {SubtitleSettingsManager} from './subtitlesettingsmanager';
 import {Component, ComponentConfig} from '../component';
 import {FontSizeSelectBox} from './fontsizeselectbox';
 import {FontFamilySelectBox} from './fontfamilyselectbox';
@@ -19,22 +18,20 @@ import {SettingsPanelPageBackButton} from '../settingspanelpagebackbutton';
 import {SettingsPanelItem} from '../settingspanelitem';
 import { PlayerAPI } from 'bitmovin-player';
 import { i18n } from '../../localization/i18n';
-import { ModernSettingsPanelPage } from '../modernsettingspanelpage';
 import { ModernSettingsPanelItem } from '../modernsettingspanelitem';
-import { ModernSettingsPanel } from '../modernsettingspanel';
 
 /**
  * @category Configs
  */
-export interface SubtitleSettingsPanelPageConfig extends ContainerConfig {
+export interface SubtitleSettingsPanelPageConfig extends SettingsPanelPageConfig {
   settingsPanel: SettingsPanel;
   overlay: SubtitleOverlay;
 }
 
 /**
  * @category Components
  */
-export class SubtitleSettingsPanelPage extends ModernSettingsPanelPage {
+export class SubtitleSettingsPanelPage extends SettingsPanelPage {
 
   private readonly overlay: SubtitleOverlay;
   private readonly settingsPanel: SettingsPanel;
@@ -59,63 +56,63 @@ export class SubtitleSettingsPanelPage extends ModernSettingsPanelPage {
           setting: new FontSizeSelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.font.family'),
           setting: new FontFamilySelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.font.color'),
           setting: new FontColorSelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.font.opacity'),
           setting: new FontOpacitySelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.characterEdge'),
           setting: new CharacterEdgeSelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.background.color'),
           setting: new BackgroundColorSelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.background.opacity'),
           setting: new BackgroundOpacitySelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.window.color'),
           setting: new WindowColorSelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.subtitles.window.opacity'),
           setting: new WindowOpacitySelectBox({
             overlay: this.overlay,
           }),
-          container: this.settingsPanel as ModernSettingsPanel,
+          container: this.settingsPanel,
         }),
       ],
     }, this.config);

src/ts/uifactory.ts

@@ -1,6 +1,6 @@
 import { SubtitleOverlay } from './components/subtitleoverlay';
-import { SettingsPanelPage } from './components/settingspanelpage';
-import { SettingsPanelItem, SettingsPanelItemConfig } from './components/settingspanelitem';
+import { SettingsPanelPage, SettingsPanelPageConfig } from './components/settingspanelpage';
+import { SettingsPanelItem } from './components/settingspanelitem';
 import { VideoQualitySelectBox } from './components/videoqualityselectbox';
 import { PlaybackSpeedSelectBox } from './components/playbackspeedselectbox';
 import { AudioTrackSelectBox } from './components/audiotrackselectbox';
@@ -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, LabelConfig } from './components/label';
+import { Label } from './components/label';
 import { CastUIContainer } from './components/castuicontainer';
 import { UIConditionContext, UIManager } from './uimanager';
 import { UIConfig } from './uiconfig';
@@ -51,10 +51,7 @@ import { SpatialNavigation } from './spatialnavigation/spatialnavigation';
 import { RootNavigationGroup } from './spatialnavigation/rootnavigationgroup';
 import { ListNavigationGroup, ListOrientation } from './spatialnavigation/ListNavigationGroup';
 import { EcoModeContainer } from './components/ecomodecontainer';
-import { SubtitleToggleButton } from './components/subtitletogglebutton';
 import { ModernSettingsPanelItem } from './components/modernsettingspanelitem';
-import { ModernSettingsPanelPage } from './components/modernsettingspanelpage';
-import { ModernSettingsPanel } from './components/modernsettingspanel';
 import { TouchControlOverlay } from './components/touchcontroloverlay';
 
 export namespace UIFactory {
@@ -453,14 +450,14 @@ export namespace UIFactory {
   export function superModernMobileUI() {
     let subtitleOverlay = new SubtitleOverlay();
 
-    let settingsPanel = new ModernSettingsPanel({
+    let settingsPanel = new SettingsPanel({
       components: [],
       hidden: true,
       pageTransitionAnimation: true,
       hideDelay: -1,
     });
 
-    let mainSettingsPanelPage = new ModernSettingsPanelPage({
+    let mainSettingsPanelPage = new SettingsPanelPage({
       components: [
         new ModernSettingsPanelItem({
           label: i18n.getLocalizer('settings.video.quality'),
@@ -576,7 +573,7 @@ export namespace UIFactory {
 
     let mainSettingsPanelPage: SettingsPanelPage;
 
-    let settingsPanel = new ModernSettingsPanel({
+    let settingsPanel = new SettingsPanel({
       components: [],
       hidden: true,
       pageTransitionAnimation: true,
@@ -614,7 +611,7 @@ export namespace UIFactory {
 
     components.unshift(ecoModeContainer);
 
-    mainSettingsPanelPage = new ModernSettingsPanelPage({
+    mainSettingsPanelPage = new SettingsPanelPage({
       components,
     });