Improve UX on dismissing the SettingsPanel

src/scss/bitmovinplayer-ui.scss

@@ -35,6 +35,7 @@
 @import 'components/title-bar';
 @import 'components/overlays/recommendation-overlay';
 @import 'components/overlays/click-overlay';
+@import 'components/overlays/click-to-dismiss-overlay';
 @import 'components/buttons/huge-replay-button';
 @import 'components/buttons/replay-button';
 @import 'components/labels/playback-time-label';

src/scss/components/overlays/_click-to-dismiss-overlay.scss

@@ -0,0 +1,7 @@
+@import '../../variables';
+@import '../../mixins';
+
+.#{$prefix}-ui-dismiss-click-overlay {
+  @include layout-cover;
+  @include hidden;
+}

src/ts/UIFactory.ts

@@ -50,6 +50,7 @@ import { EcoModeContainer } from './components/EcoModeContainer';
 import { DynamicSettingsPanelItem } from './components/settings/DynamicSettingsPanelItem';
 import { TouchControlOverlay } from './components/overlays/TouchControlOverlay';
 import { AdStatusOverlay } from './components/ads/AdStatusOverlay';
+import { DismissClickOverlay } from './components/overlays/DismissClickOverlay';
 
 /**
  * Provides factory methods to create Bitmovin provided UIs.
@@ -322,8 +323,9 @@ function uiLayout(config: UIConfig) {
       controlBar,
       new TitleBar(),
       new RecommendationOverlay(),
-      settingsPanel,
       ...conditionalComponents,
+      new DismissClickOverlay({ target: settingsPanel }),
+      settingsPanel,
       new ErrorMessageOverlay(),
     ],
     hideDelay: 2000,
@@ -489,6 +491,7 @@ function smallScreenUILayout() {
           new VRToggleButton(),
         ],
       }),
+      new DismissClickOverlay({ target: settingsPanel }),
       settingsPanel,
       new ErrorMessageOverlay(),
     ],

src/ts/components/overlays/DismissClickOverlay.ts

@@ -0,0 +1,32 @@
+import { ButtonConfig } from '../buttons/Button';
+import { Component, ComponentConfig } from '../Component';
+import { Container } from '../Container';
+import { PlayerAPI } from 'bitmovin-player';
+import { UIInstanceManager } from '../../UIManager';
+
+export interface DismissClickOverlayConfig extends ButtonConfig {
+  target: Component<ComponentConfig>;
+}
+
+export class DismissClickOverlay extends Container<DismissClickOverlayConfig> {
+  constructor(config: DismissClickOverlayConfig) {
+    super(config);
+
+    this.config = this.mergeConfig(config, {
+      cssClass: 'ui-dismiss-click-overlay',
+      role: this.config.role,
+    }, <DismissClickOverlayConfig>this.config);
+  }
+
+  configure(player: PlayerAPI, uimanager: UIInstanceManager) {
+    super.configure(player, uimanager);
+
+    this.config.target.onShow.subscribe(() => { this.show(); });
+    this.config.target.onHide.subscribe(() => { this.hide(); });
+
+    let element = this.getDomElement();
+    element.on('click', () => {
+      this.config.target.hide();
+    });
+  }
+}

src/ts/components/settings/SettingsPanel.ts

@@ -7,6 +7,8 @@ import { SettingsPanelPage, SettingsPanelPageConfig } from './SettingsPanelPage'
 import { SettingsPanelItem, SettingsPanelItemConfig } from './SettingsPanelItem';
 import { PlayerAPI } from 'bitmovin-player';
 import { Component, ComponentConfig } from '../Component';
+import { getKeyMapForPlatform } from '../../spatialnavigation/getKeyMapForPlatform';
+import { Action } from '../../spatialnavigation/types';
 
 /**
  * Configuration interface for a {@link SettingsPanel}.
@@ -124,6 +126,13 @@ export class SettingsPanel extends Container<SettingsPanelConfig> {
       player.on(player.exports.PlayerEvent.PlayerResized, handleResize);
     }
 
+    const maybeCloseSettingsPanel = (event: KeyboardEvent) => {
+      const action = getKeyMapForPlatform()[event.keyCode];
+      if (action === Action.BACK) {
+        this.hide();
+      }
+    };
+
     this.onHide.subscribe(() => {
       if (config.hideDelay > -1) {
         // Clear timeout when hidden from outside
@@ -133,6 +142,8 @@ export class SettingsPanel extends Container<SettingsPanelConfig> {
       // Since we don't reset the actual navigation here we need to simulate a onInactive event in case some panel
       // needs to do something when they become invisible / inactive.
       this.activePage.onInactiveEvent();
+
+      document.removeEventListener('keyup', maybeCloseSettingsPanel);
     });
 
     this.onShow.subscribe(() => {
@@ -146,6 +157,8 @@ export class SettingsPanel extends Container<SettingsPanelConfig> {
         // Activate timeout when shown
         this.hideTimeout.start();
       }
+
+      document.addEventListener('keyup', maybeCloseSettingsPanel);
     });
 
     // pass event from root page through