From 1ff8121d8167b5735c74976a7d7aeac2b7e072ba Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 14 Jan 2025 16:20:19 +0100 Subject: [PATCH 1/3] dismiss the SettingsPanel on ESC keyboard input --- src/ts/components/settings/SettingsPanel.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/ts/components/settings/SettingsPanel.ts b/src/ts/components/settings/SettingsPanel.ts index c7f1e23d2..f86d2abd3 100644 --- a/src/ts/components/settings/SettingsPanel.ts +++ b/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 { 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 { // 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 { // Activate timeout when shown this.hideTimeout.start(); } + + document.addEventListener('keyup', maybeCloseSettingsPanel); }); // pass event from root page through From 3604060d8fe35b754f25ba75a869aea6f4e40a2e Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 14 Jan 2025 16:25:46 +0100 Subject: [PATCH 2/3] add a DismissClickOverlay component to dismiss any component on click outside of it --- src/scss/bitmovinplayer-ui.scss | 1 + .../overlays/_clicktodismissoverlay.scss | 7 ++++ src/ts/UIFactory.ts | 3 ++ .../overlays/DismissClickOverlay.ts | 32 +++++++++++++++++++ 4 files changed, 43 insertions(+) create mode 100644 src/scss/components/overlays/_clicktodismissoverlay.scss create mode 100644 src/ts/components/overlays/DismissClickOverlay.ts diff --git a/src/scss/bitmovinplayer-ui.scss b/src/scss/bitmovinplayer-ui.scss index 8d65a7b7d..eab901623 100644 --- a/src/scss/bitmovinplayer-ui.scss +++ b/src/scss/bitmovinplayer-ui.scss @@ -35,6 +35,7 @@ @import 'components/titlebar'; @import 'components/overlays/recommendationoverlay'; @import 'components/overlays/clickoverlay'; +@import 'components/overlays/clicktodismissoverlay'; @import 'components/buttons/hugereplaybutton'; @import 'components/buttons/replaybutton'; @import 'components/labels/playbacktimelabel'; diff --git a/src/scss/components/overlays/_clicktodismissoverlay.scss b/src/scss/components/overlays/_clicktodismissoverlay.scss new file mode 100644 index 000000000..2a060d4ec --- /dev/null +++ b/src/scss/components/overlays/_clicktodismissoverlay.scss @@ -0,0 +1,7 @@ +@import '../../variables'; +@import '../../mixins'; + +.#{$prefix}-ui-dismiss-click-overlay { + @include layout-cover; + @include hidden; +} diff --git a/src/ts/UIFactory.ts b/src/ts/UIFactory.ts index 6fcb23890..75183d02e 100644 --- a/src/ts/UIFactory.ts +++ b/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 { ClickToDismissOverlay, DismissClickOverlay } from './components/overlays/DismissClickOverlay'; /** * Provides factory methods to create Bitmovin provided UIs. @@ -313,6 +314,7 @@ function uiLayout(config: UIConfig) { new TitleBar(), new RecommendationOverlay(), new Watermark(), + new DismissClickOverlay({ target: settingsPanel }), settingsPanel, new ErrorMessageOverlay(), ], @@ -479,6 +481,7 @@ function smallScreenUILayout() { new VRToggleButton(), ], }), + new DismissClickOverlay({ target: settingsPanel }), settingsPanel, new ErrorMessageOverlay(), ], diff --git a/src/ts/components/overlays/DismissClickOverlay.ts b/src/ts/components/overlays/DismissClickOverlay.ts new file mode 100644 index 000000000..72d5ed5ab --- /dev/null +++ b/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; +} + +export class DismissClickOverlay extends Container { + constructor(config: DismissClickOverlayConfig) { + super(config); + + this.config = this.mergeConfig(config, { + cssClass: 'ui-dismiss-click-overlay', + role: this.config.role, + }, 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(); + }); + } +} From c6a7ae3c6e7cba83fbcd376a496bc5783f4ea622 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 14 Jan 2025 16:34:00 +0100 Subject: [PATCH 3/3] fix outdated import --- 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 75183d02e..7b2f6af22 100644 --- a/src/ts/UIFactory.ts +++ b/src/ts/UIFactory.ts @@ -50,7 +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 { ClickToDismissOverlay, DismissClickOverlay } from './components/overlays/DismissClickOverlay'; +import { DismissClickOverlay } from './components/overlays/DismissClickOverlay'; /** * Provides factory methods to create Bitmovin provided UIs.