Add more information on touch devices in settings

[stonko1994]

Description

Adds a More page to mobile settings panels so touch users can access Bitmovin Player and UI version information without relying on the desktop context menu.

Checklist (for PR submitter and reviewers)

• CHANGELOG entry

[Copilot]

Pull request overview

Adds a “More” page to the mobile settings panel so touch/mobile users can access Bitmovin Player and UI version information without relying on the desktop context menu.

Changes:

• Adds new settings components for page navigation, separators, and a player info page, and wires them into the default mobile settings panel.
• Simplifies spatial-navigation focus handling in settings pages by treating all InteractiveSettingsPanelItems uniformly.
• Adds the new settings.more i18n key across supported languages and includes new SCSS styling + changelog entry.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/ts/UIFactory.ts	Adds “More” entry + separator to mobile settings and registers the new info page.
src/ts/spatialnavigation/SettingsPanelNavigationGroup.ts	Updates focusable-resolution logic to use InteractiveSettingsPanelItem.
src/ts/main.ts	Exports newly added settings components/pages.
src/ts/localization/languages/en.json	Adds settings.more translation.
src/ts/localization/languages/de.json	Adds settings.more translation.
src/ts/localization/languages/es.json	Adds settings.more translation.
src/ts/localization/languages/fr.json	Adds settings.more translation.
src/ts/localization/languages/nl.json	Adds settings.more translation.
src/ts/localization/languages/pt.json	Adds settings.more translation.
src/ts/localization/i18n.ts	Extends Vocabulary with settings.more.
src/ts/components/settings/SettingsPanelSeparator.ts	Introduces a visual separator component for settings rows.
src/ts/components/settings/SettingsPanelPageNavigationItem.ts	Adds a clickable settings-row component that navigates to another settings page.
src/ts/components/settings/PlayerInfoSettingsPanelPage.ts	Adds the “More” destination page showing player/UI version info.
src/scss/components/settings/_settings-panel-separator.scss	Styles the new separator row.
src/scss/components/settings/_settings-panel-page-navigation-item.scss	Styles the new navigation row (trailing chevron).
src/scss/components/settings/_player-info-settings-panel-page.scss	Styles the new player info page layout.
src/scss/bitmovinplayer-ui.scss	Includes the new SCSS partials in the main stylesheet.
CHANGELOG.md	Documents the new “More” page on mobile settings panels.

Comments suppressed due to low confidence (1)

src/ts/spatialnavigation/SettingsPanelNavigationGroup.ts:63

• This change alters how focusable components are resolved (treating all InteractiveSettingsPanelItems as single focus targets). There are Jest specs for SettingsPanel/spatial navigation, but none covering this SettingsPanelNavigationGroup.getComponents() behavior; adding a unit test would help prevent regressions for keyboard/remote navigation across different item types.

  override getComponents(): Focusable[] {
    const activeSettingsPanelPage = this.settingsPanel.getActivePage();
    const pageComponents = activeSettingsPanelPage.getItems();

    const componentsToConsider: Focusable[] = [];
    pageComponents.forEach(component => {
      if (component instanceof InteractiveSettingsPanelItem) {
        componentsToConsider.push(component);
      } else {
        componentsToConsider.push(...resolveAllComponents(component));
      }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.