@npo/player 1.27.7 → 1.28.0

package/lib/ui/components/ctabar.js

@@ -1,18 +1,19 @@
 import { Container } from 'bitmovin-player-ui';
-import { createGoBackLiveButton, createWatchFromStartButton } from './buttons';
+import { createGoBackLiveButton, createWatchFromStartButton, createSkipChapterButton } from './buttons';
 import { createAdButton } from './adbutton';
 import { createAdLabel } from './adlabel';
 import { NpoPlayerUIVariants } from '../../types/interfaces';
-export function createCTABar(player, npoPlayer, variant) {
+export function createCTABar(playerContext, variant) {
     const barComponents = [];
     if (variant === NpoPlayerUIVariants.DEFAULT) {
-        const goBackLiveButton = createGoBackLiveButton(player);
-        const watchFromStartButton = createWatchFromStartButton(player, npoPlayer);
-        barComponents.push(watchFromStartButton, goBackLiveButton);
+        const goBackLiveButton = createGoBackLiveButton(playerContext);
+        const watchFromStartButton = createWatchFromStartButton(playerContext);
+        const skipChapterButton = createSkipChapterButton(playerContext);
+        barComponents.push(watchFromStartButton, goBackLiveButton, skipChapterButton);
     }
     if (variant === NpoPlayerUIVariants.AD) {
-        const adLabel = createAdLabel(npoPlayer);
-        const adButton = createAdButton(npoPlayer);
+        const adLabel = createAdLabel(playerContext);
+        const adButton = createAdButton(playerContext);
         barComponents.push(adLabel, adButton);
         adLabel.hide();
     }

package/lib/ui/components/infopanel/infopanel.d.ts

@@ -0,0 +1,3 @@
+import { Container, ContainerConfig } from 'bitmovin-player-ui';
+import { PlayerContext } from '../../../types/interfaces';
+export declare function createInfoPanel(playerContext: PlayerContext): Container<ContainerConfig>;

package/lib/ui/components/infopanel/infopanel.js

@@ -0,0 +1,40 @@
+import { Container, Button } from 'bitmovin-player-ui';
+export function createInfoPanel(playerContext) {
+    const { npoPlayer } = playerContext;
+    const infoPanel = new Container({
+        hidden: true,
+        cssClass: 'info-panel'
+    });
+    const infoToggleButtons = npoPlayer.uiComponents.infoPanelToggleButtons ?? [];
+    const settingsPanels = npoPlayer.uiComponents.settingsPanels ?? [];
+    infoPanel.onHide.subscribe(() => {
+        for (const button of infoToggleButtons) {
+            button.off();
+        }
+    });
+    infoPanel.onShow.subscribe(() => {
+        for (const panel of settingsPanels) {
+            panel.hide();
+        }
+        for (const button of infoToggleButtons) {
+            button.on();
+        }
+    });
+    const closeButton = new Button({
+        cssClass: 'info-panel-close-button'
+    });
+    closeButton.onClick.subscribe(() => {
+        infoPanel.hide();
+    });
+    infoPanel.addComponent(closeButton);
+    const contentContainer = new Container({
+        cssClass: 'info-panel-content'
+    });
+    infoPanel.addComponent(contentContainer);
+    const uiComponents = npoPlayer.uiComponents;
+    uiComponents.infoPanel = infoPanel;
+    infoPanel.setHtmlContent = (html) => {
+        contentContainer.getDomElement().html(html);
+    };
+    return infoPanel;
+}

package/lib/ui/components/infopanel/togglebutton.d.ts

@@ -0,0 +1,3 @@
+import { ToggleButton, ToggleButtonConfig } from 'bitmovin-player-ui';
+import { PlayerContext } from 'types/interfaces';
+export declare function createInfoPanelToggleButton(playerContext: PlayerContext): ToggleButton<ToggleButtonConfig>;

package/lib/ui/components/infopanel/togglebutton.js

@@ -0,0 +1,18 @@
+import { ToggleButton } from 'bitmovin-player-ui';
+export function createInfoPanelToggleButton(playerContext) {
+    const { npoPlayer } = playerContext;
+    const uiComponents = npoPlayer.uiComponents;
+    const toggleButton = new ToggleButton({
+        cssClass: 'info-panel-toggle-button',
+        hidden: true
+    });
+    toggleButton.onClick.subscribe(() => {
+        const infoPanel = uiComponents.infoPanel;
+        infoPanel?.toggleHidden();
+    });
+    toggleButton.getDomElement().attr('aria-haspopup', 'true');
+    uiComponents.infoPanelToggleButtons = uiComponents.infoPanelToggleButtons
+        ? [...uiComponents.infoPanelToggleButtons, toggleButton]
+        : [toggleButton];
+    return toggleButton;
+}

package/lib/ui/components/playnext.d.ts

@@ -1,10 +1,4 @@
 import { Container } from 'bitmovin-player-ui';
-import { type PlayerAPI } from 'bitmovin-player';
-import type NpoPlayer from '../../npoplayer';
-export declare function createPlayNextScreen(player: PlayerAPI, npoPlayer: NpoPlayer): Container<{
-    components: import("bitmovin-player-ui").Button<{
-        cssClass: string;
-        ariaLabel: string;
-    }>[];
-    cssClasses: string[];
-}>;
+import { ContainerConfig } from 'bitmovin-player-ui/dist/js/framework/components/container';
+import { PlayerContext } from '../../types/interfaces';
+export declare function createPlayNextScreen(playerContext: PlayerContext): Container<ContainerConfig>;

package/lib/ui/components/playnext.js

@@ -1,8 +1,8 @@
 import { Container } from 'bitmovin-player-ui';
 import { createPlayNextButton, createCancelPlayNextButton } from './buttons';
-export function createPlayNextScreen(player, npoPlayer) {
-    const playNextButton = createPlayNextButton(player, npoPlayer);
-    const cancelButton = createCancelPlayNextButton(player, npoPlayer);
+export function createPlayNextScreen(playerContext) {
+    const playNextButton = createPlayNextButton(playerContext);
+    const cancelButton = createCancelPlayNextButton(playerContext);
     return new Container({
         components: [cancelButton, playNextButton],
         cssClasses: ['overlay-playnext']

package/lib/ui/components/seekbar.d.ts

@@ -1,7 +1,6 @@
 import { Container, PlaybackTimeLabel, SeekBar } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-import { NpoPlayerUIVariants } from '../../npoplayer';
-export declare function createSeekBar(npoPlayer: NpoPlayer, variant: NpoPlayerUIVariants): Container<{
+import { NpoPlayerUIVariants, PlayerContext } from '../../types/interfaces';
+export declare function createSeekBar(playerContext: PlayerContext, variant: NpoPlayerUIVariants): Container<{
     components: (SeekBar | PlaybackTimeLabel)[];
     cssClasses: string[];
 }>;

package/lib/ui/components/seekbar.js

@@ -1,7 +1,11 @@
 import { Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel } from 'bitmovin-player-ui';
-import { NpoPlayerUIVariants } from '../../npoplayer';
-export function createSeekBar(npoPlayer, variant) {
-    const seekBar = new SeekBar({ label: new SeekBarLabel() });
+import { NpoPlayerUIVariants } from '../../types/interfaces';
+export function createSeekBar(playerContext, variant) {
+    const { npoPlayer } = playerContext;
+    const seekBar = new SeekBar({
+        label: new SeekBarLabel(),
+        addCurrentTimeToAriaLabel: true
+    });
     npoPlayer.uiComponents.seekBar = seekBar;
     const isAdUi = variant === NpoPlayerUIVariants.AD;
     return new Container({

package/lib/ui/components/settingspanel.d.ts

@@ -1,4 +1,3 @@
 import { SettingsPanel } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-import { PlayerAPI } from 'bitmovin-player';
-export declare function createSettingsPanel(npoPlayer: NpoPlayer | PlayerAPI): SettingsPanel;
+import { PlayerContext } from '../../types/interfaces';
+export declare function createSettingsPanel(playerContext: PlayerContext): SettingsPanel;

package/lib/ui/components/settingspanel.js

@@ -1,23 +1,23 @@
 import { SubtitleListBox, ListBox, SettingsPanel, SettingsPanelPage, SettingsPanelPageOpenButton, SettingsPanelPageBackButton, SettingsToggleButton, Button, Label, SettingsPanelItem, AudioQualitySelectBox, AudioTrackSelectBox } from 'bitmovin-player-ui';
 import { localizeKey } from '../../js/utilities/utilities.locale';
 import { handleSubtitleListBoxItemSelected, handleSpeedListBoxItemSelected, handleQualityListBoxItemSelected } from '../handlers/listboxhandlers';
-import { PlayerEvent } from 'bitmovin-player';
+import { NpoPlayerEvent } from '../../types/events';
 const createListBox = (items) => new ListBox({ items });
-const createPanelPage = (components, cssClasses) => new SettingsPanelPage({ components, cssClasses });
-const createSettingsPanelPageBackButton = (targetPage, container, text, cssClasses) => new SettingsPanelPageBackButton({
+const createPanelPage = (components, cssClasses) => new SettingsPanelPage({ components, cssClasses, role: 'group' });
+const createSettingsPanelPageBackButton = ({ targetPage, container, text, cssClasses }) => new SettingsPanelPageBackButton({
     targetPage,
     container,
     text,
     cssClasses
 });
-const createSettingsOpenButton = (targetPage, container, text, cssClasses) => new SettingsPanelPageOpenButton({
+const createSettingsOpenButton = ({ targetPage, container, text, cssClasses }) => new SettingsPanelPageOpenButton({
     targetPage,
     container,
     text,
     cssClasses
 });
-export function createSettingsPanel(npoPlayer) {
-    const player = 'player' in npoPlayer ? npoPlayer.player : npoPlayer;
+export function createSettingsPanel(playerContext) {
+    const { npoPlayer, player } = playerContext;
     const subtitleListBox = new SubtitleListBox();
     const speedListBox = createListBox([
         { key: '0.25', label: '0.25x' },
@@ -39,15 +39,19 @@ export function createSettingsPanel(npoPlayer) {
     const settingsBackButtonClass = 'settings-back-button';
     const listboxPanelClass = 'listbox-panel';
     const listboxPagerButtonClass = 'listbox-pager-button';
-    const subtitlePanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', subtitleListBox)], [listboxPanelClass]);
-    const speedPanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', speedListBox)], [listboxPanelClass]);
-    const qualityPanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', qualityListBox)], [listboxPanelClass]);
+    const settingsPanelItemConfig = { role: 'group' };
+    const subtitlePanelPage = createPanelPage([
+        new Button({ cssClass: settingTriggerClass }),
+        new SettingsPanelItem('', subtitleListBox, settingsPanelItemConfig)
+    ], [listboxPanelClass]);
+    const speedPanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', speedListBox, settingsPanelItemConfig)], [listboxPanelClass]);
+    const qualityPanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', qualityListBox, settingsPanelItemConfig)], [listboxPanelClass]);
     const settingsTriggerButton = new Button({ cssClass: settingTriggerClass });
     const mainSettingsPage = createPanelPage([
         settingsTriggerButton,
         new Label({ text: settingsLabel, cssClass: 'setting-header' }),
-        new SettingsPanelItem(audioqualityLabel, new AudioQualitySelectBox()),
-        new SettingsPanelItem(audiotrackLabel, new AudioTrackSelectBox())
+        new SettingsPanelItem(audioqualityLabel, new AudioQualitySelectBox(), settingsPanelItemConfig),
+        new SettingsPanelItem(audiotrackLabel, new AudioTrackSelectBox(), settingsPanelItemConfig)
     ], ['main-panel']);
     const settingsPanel = new SettingsPanel({
         components: [mainSettingsPage, subtitlePanelPage, speedPanelPage, qualityPanelPage],
@@ -55,79 +59,101 @@ export function createSettingsPanel(npoPlayer) {
         pageTransitionAnimation: false,
         hideDelay: -1
     });
-    const subtitleSettingsOpenButton = createSettingsOpenButton(subtitlePanelPage, settingsPanel, offLabel, [
-        listboxPagerButtonClass
-    ]);
-    const speedSettingsOpenButton = createSettingsOpenButton(speedPanelPage, settingsPanel, '1x', [
-        listboxPagerButtonClass
-    ]);
-    const qualitySettingsOpenButton = createSettingsOpenButton(qualityPanelPage, settingsPanel, autoLabel, [
-        listboxPagerButtonClass
-    ]);
-    const subtitlesPanelItem = new SettingsPanelItem(subtitlesLabel, subtitleSettingsOpenButton, { hidden: false });
-    const speedPanelItem = new SettingsPanelItem(speedLabel, speedSettingsOpenButton);
-    const qualityPanelItem = new SettingsPanelItem(videoqualityLabel, qualitySettingsOpenButton, { hidden: false });
-    for (const item of [
-        subtitlesPanelItem,
-        speedPanelItem,
-        qualityPanelItem,
-        new SettingsToggleButton({ settingsPanel })
-    ])
+    const subtitleSettingsOpenButton = createSettingsOpenButton({
+        targetPage: subtitlePanelPage,
+        container: settingsPanel,
+        text: offLabel,
+        cssClasses: [listboxPagerButtonClass]
+    });
+    const speedSettingsOpenButton = createSettingsOpenButton({
+        targetPage: speedPanelPage,
+        container: settingsPanel,
+        text: '1x',
+        cssClasses: [listboxPagerButtonClass]
+    });
+    const qualitySettingsOpenButton = createSettingsOpenButton({
+        targetPage: qualityPanelPage,
+        container: settingsPanel,
+        text: autoLabel,
+        cssClasses: [listboxPagerButtonClass]
+    });
+    const subtitlesPanelItem = new SettingsPanelItem(subtitlesLabel, subtitleSettingsOpenButton, {
+        ...settingsPanelItemConfig,
+        hidden: false
+    });
+    const speedPanelItem = new SettingsPanelItem(speedLabel, speedSettingsOpenButton, {
+        ...settingsPanelItemConfig,
+        hidden: false
+    });
+    const qualityPanelItem = new SettingsPanelItem(videoqualityLabel, qualitySettingsOpenButton, {
+        ...settingsPanelItemConfig,
+        hidden: false
+    });
+    const settingsToggleButton = new SettingsToggleButton({ settingsPanel, role: 'button' });
+    settingsToggleButton.getDomElement().attr('aria-haspopup', 'true');
+    for (const item of [subtitlesPanelItem, speedPanelItem, qualityPanelItem, settingsToggleButton])
         mainSettingsPage.addComponent(item);
     for (const [index, panelPage] of [subtitlePanelPage, speedPanelPage, qualityPanelPage].entries()) {
         const labels = [subtitlesLabel, speedLabel, videoqualityLabel];
-        panelPage.addComponent(createSettingsPanelPageBackButton(mainSettingsPage, settingsPanel, labels[index], [
-            settingsBackButtonClass
-        ]));
+        panelPage.addComponent(createSettingsPanelPageBackButton({
+            targetPage: mainSettingsPage,
+            container: settingsPanel,
+            text: labels[index],
+            cssClasses: [settingsBackButtonClass]
+        }));
     }
-    if ('uiComponents' in npoPlayer) {
-        npoPlayer.uiComponents.subtitlesButton = subtitlesPanelItem;
-        npoPlayer.uiComponents.qualityButton = qualityPanelItem;
-    }
-    subtitleListBox.onItemSelected.subscribe(handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton, settingsPanel, mainSettingsPage));
+    npoPlayer.uiComponents.subtitlesButton = subtitlesPanelItem;
+    npoPlayer.uiComponents.qualityButton = qualityPanelItem;
+    subtitleListBox.onItemSelected.subscribe(handleSubtitleListBoxItemSelected({ subtitleSettingsOpenButton, settingsPanel, mainSettingsPage }));
     if (player) {
         speedListBox.selectItem('1');
-        speedListBox.onItemSelected.subscribe(handleSpeedListBoxItemSelected(player, speedSettingsOpenButton, settingsPanel, mainSettingsPage));
+        speedListBox.onItemSelected.subscribe(handleSpeedListBoxItemSelected({ playerContext, speedSettingsOpenButton, settingsPanel, mainSettingsPage }));
         qualityListBox.selectItem('auto');
-        qualityListBox.onItemSelected.subscribe(handleQualityListBoxItemSelected(player, qualitySettingsOpenButton, settingsPanel, mainSettingsPage));
-    }
-    if (npoPlayer.uiComponents) {
-        const uiComponents = npoPlayer.uiComponents;
-        uiComponents.settingsPanels = uiComponents.settingsPanels
-            ? [...uiComponents.settingsPanels, settingsPanel]
-            : [settingsPanel];
+        qualityListBox.onItemSelected.subscribe(handleQualityListBoxItemSelected({ playerContext, qualitySettingsOpenButton, settingsPanel, mainSettingsPage }));
     }
+    const uiComponents = npoPlayer.uiComponents;
+    uiComponents.settingsPanels = uiComponents.settingsPanels
+        ? [...uiComponents.settingsPanels, settingsPanel]
+        : [settingsPanel];
     const checkSubtitles = () => {
-        const subtitles = player?.subtitles?.list();
+        const subtitles = player.listSubtitles();
         subtitlesPanelItem.hide();
         if (subtitles?.length) {
             subtitlesPanelItem.show();
         }
     };
     const checkQualities = () => {
-        const availableVideoQualities = player?.getAvailableVideoQualities() || [];
+        const availableVideoQualities = player.getAvailableVideoQualities() || [];
         qualityListBox.clearItems();
         qualityPanelItem.hide();
         if (availableVideoQualities?.length) {
-            for (const quality of availableVideoQualities)
-                qualityListBox.addItem(quality.id, quality.label ?? 'test');
+            for (const quality of availableVideoQualities) {
+                const label = quality.label === 'unknown' ? `${quality.height}p` : quality.label;
+                qualityListBox.addItem(quality.id, label ?? 'unknown');
+            }
             qualityListBox.addItem('auto', autoLabel);
             qualityListBox.selectItem('auto');
             qualityPanelItem.show();
         }
     };
     settingsPanel.onHide.subscribe(() => {
-        player?.getContainer().querySelector('.bmpui-npo-player')?.classList.remove('bmpui-settings-panel-shown');
+        player.removeClassFromNpoPlayerElement('bmpui-settings-panel-shown');
     });
     settingsPanel.onShow.subscribe(() => {
-        player?.getContainer().querySelector('.bmpui-npo-player')?.classList.add('bmpui-settings-panel-shown');
+        player.addClassToNpoPlayerElement('bmpui-settings-panel-shown');
+        const infoPanel = npoPlayer.uiComponents.infoPanel;
+        const infoToggleButtons = npoPlayer.uiComponents.infoPanelToggleButtons ?? [];
+        infoPanel?.hide();
+        for (const button of infoToggleButtons) {
+            button.off();
+        }
     });
     const checkQualitiesAndSubtitles = () => {
         checkQualities();
         checkSubtitles();
     };
-    player?.off(PlayerEvent.SourceLoaded, checkQualitiesAndSubtitles);
-    player?.on(PlayerEvent.SourceLoaded, checkQualitiesAndSubtitles);
+    player?.off(NpoPlayerEvent.SourceLoaded, checkQualitiesAndSubtitles);
+    player?.on(NpoPlayerEvent.SourceLoaded, checkQualitiesAndSubtitles);
     checkQualitiesAndSubtitles();
     return settingsPanel;
 }

package/lib/ui/components/titlebar.d.ts

@@ -1,3 +1,3 @@
 import { TitleBar } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-export declare function createTitleBar(npoPlayer: NpoPlayer): TitleBar;
+import { PlayerContext } from '../../types/interfaces';
+export declare function createTitleBar(playerContext: PlayerContext): TitleBar;

package/lib/ui/components/titlebar.js

@@ -1,5 +1,6 @@
 import { Label, TitleBar } from 'bitmovin-player-ui';
-export function createTitleBar(npoPlayer) {
+export function createTitleBar(playerContext) {
+    const { npoPlayer } = playerContext;
     const nicam = new Label({ text: '', cssClass: 'nicam' });
     const titleBar = new TitleBar({ cssClasses: ['metadata'] });
     titleBar.addComponent(nicam);

package/lib/ui/components/topbar.js

@@ -1,10 +1,12 @@
 import { Container, TitleBar, PictureInPictureToggleButton, AirPlayToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeControlButton } from 'bitmovin-player-ui';
 import { createSettingsPanel } from './settingspanel';
 import { createChromecastButton } from './buttons';
+import { createInfoPanelToggleButton } from './infopanel/togglebutton';
 export function createTopBar(playerContext) {
-    const { npoPlayer, player } = playerContext;
-    const settingsPanel = createSettingsPanel(npoPlayer);
-    const chromeCastButton = createChromecastButton(player, npoPlayer);
+    const settingsPanel = createSettingsPanel(playerContext);
+    const chromeCastButton = createChromecastButton(playerContext);
+    const settingsToggleButton = new SettingsToggleButton({ settingsPanel, role: 'button' });
+    settingsToggleButton.getDomElement().attr('aria-haspopup', 'true');
     return new TitleBar({
         components: [
             new Container({
@@ -12,12 +14,13 @@ export function createTopBar(playerContext) {
                     new PictureInPictureToggleButton(),
                     new AirPlayToggleButton(),
                     chromeCastButton,
-                    new SettingsToggleButton({ settingsPanel }),
+                    settingsToggleButton,
                     settingsPanel,
                     new VolumeControlButton({
                         vertical: true
                     }),
-                    new FullscreenToggleButton()
+                    new FullscreenToggleButton(),
+                    createInfoPanelToggleButton(playerContext)
                 ],
                 cssClasses: ['controlbar-top', 'controlbar-small']
             })

package/lib/ui/components/verticalvideo/controlbar.js

@@ -6,7 +6,10 @@ export function createVerticalVideoControlBar(playerContext, settingsPanel) {
     const { npoPlayer } = playerContext;
     const rewindButton = createRewindButton(playerContext);
     const forwardButton = createForwardButton(playerContext);
-    const seekBar = new SeekBar({ label: new SeekBarLabel() });
+    const seekBar = new SeekBar({
+        label: new SeekBarLabel(),
+        addCurrentTimeToAriaLabel: true
+    });
     npoPlayer.uiComponents.seekBar = seekBar;
     const settingsToggleButton = new SettingsToggleButton({
         settingsPanel: settingsPanel,
@@ -26,7 +29,7 @@ export function createVerticalVideoControlBar(playerContext, settingsPanel) {
     const controlBar = new ControlBar({
         components: [
             settingsToggleButton,
-            createSeekBar(npoPlayer, NpoPlayerUIVariants.VERTICAL),
+            createSeekBar(playerContext, NpoPlayerUIVariants.VERTICAL),
             controlBarButtonsContainer
         ],
         cssClasses: ['ui-controlbar-bottom']

package/lib/ui/components/verticalvideo/settingspanel.js

@@ -5,7 +5,8 @@ export function createVerticalVideoSettingsPanel() {
     });
     const mainSettingsPage = new SettingsPanelPage({
         components: [subtitleListBox],
-        cssClasses: ['main-panel']
+        cssClasses: ['main-panel'],
+        role: 'group'
     });
     const settingsPanel = new SettingsPanel({
         components: [mainSettingsPage],
@@ -13,9 +14,12 @@ export function createVerticalVideoSettingsPanel() {
         pageTransitionAnimation: false,
         hideDelay: -1
     });
-    mainSettingsPage.addComponent(new SettingsToggleButton({
-        settingsPanel: settingsPanel,
-        autoHideWhenNoActiveSettings: false
-    }));
+    const settingsToggleButton = new SettingsToggleButton({
+        settingsPanel,
+        autoHideWhenNoActiveSettings: false,
+        role: 'button'
+    });
+    settingsToggleButton.getDomElement().attr('aria-haspopup', 'true');
+    mainSettingsPage.addComponent(settingsToggleButton);
     return settingsPanel;
 }

package/lib/ui/handlers/accessibilityhandler.js

@@ -1,33 +1,22 @@
-export function addAccessibilityAttributes(container, metadata) {
-    const label = 'aria-label';
+const ariaLabel = 'aria-label';
+function setVideoAriaLabels(container, title) {
     const videoEl = container.querySelector('video');
     const hugePlayBackToggleButton = container.querySelector('.bmpui-ui-hugeplaybacktogglebutton');
-    videoEl?.setAttribute(label, metadata.title);
-    hugePlayBackToggleButton?.setAttribute(label, metadata.title);
+    videoEl?.setAttribute(ariaLabel, title);
+    hugePlayBackToggleButton?.setAttribute(ariaLabel, title);
     const description = container.querySelector('.bmpui-label-metadata-description');
     if (description) {
         videoEl?.setAttribute('aria-describedby', description.id);
         hugePlayBackToggleButton?.setAttribute('aria-describedby', description.id);
     }
+}
+function setImageAriaLabels(container, title) {
     const imgRoles = container.querySelectorAll('[role="img"]');
     for (const imgRole of imgRoles) {
-        imgRole.setAttribute(label, metadata.title);
-    }
-    const popupButtons = container.querySelectorAll('[role="pop-up button"]');
-    for (const popupButton of popupButtons) {
-        popupButton.setAttribute('role', 'button');
-        popupButton.setAttribute('aria-haspopup', 'menu');
-    }
-    const menuItems = container.querySelectorAll('[role="menuitem"][aria-pressed]');
-    for (const menuitem of menuItems) {
-        menuitem.removeAttribute('aria-pressed');
-    }
-    const panelItems = container.querySelectorAll('.bmpui-ui-settings-panel-item[role="menuitem"]');
-    for (const panelItem of panelItems) {
-        panelItem.setAttribute('role', 'group');
-    }
-    const panelPages = container.querySelectorAll('.bmpui-ui-settings-panel-page.bmpui-listbox-panel[role="menu"]');
-    for (const panelPage of panelPages) {
-        panelPage.setAttribute('role', 'group');
+        imgRole.setAttribute(ariaLabel, title);
     }
 }
+export function addAccessibilityAttributes(container, metadata) {
+    setVideoAriaLabels(container, metadata.title);
+    setImageAriaLabels(container, metadata.title);
+}

package/lib/ui/handlers/accessibilityhandler.test.js

@@ -3,7 +3,6 @@ import { JSDOM } from 'jsdom';
 describe('addAccessibilityAttributes', () => {
     let container;
     const mockMetadata = { title: 'Mocked Video Title', description: 'Mocked Description' };
-    const label = 'aria-label';
     beforeEach(() => {
         const { window } = new JSDOM(`
             <div>
@@ -11,53 +10,45 @@ describe('addAccessibilityAttributes', () => {
                 <div class="bmpui-ui-hugeplaybacktogglebutton"></div>
                 <div class="bmpui-label-metadata-description" id="desc">Description</div>
                 <div role="img"></div>
-                <div role="pop-up button"></div>
-                <div role="menuitem" aria-pressed="true"></div>
-                <div class="bmpui-ui-settings-panel-item" role="menuitem"></div>
-                <div class="bmpui-ui-settings-panel-page bmpui-listbox-panel" role="menu"></div>
             </div>
         `);
         container = window.document.body.firstChild;
     });
-    function expectAttribute(selector, attribute, expectedValue) {
+    function expectAttributes({ selector, attributes }) {
         const element = container?.querySelector(selector);
-        expect(element?.getAttribute(attribute)).toBe(expectedValue);
+        for (const [attribute, expectedValue] of Object.entries(attributes)) {
+            expect(element?.getAttribute(attribute)).toBe(expectedValue);
+        }
     }
     it('adds correct aria-labels', () => {
         if (!container)
             return;
         addAccessibilityAttributes(container, mockMetadata);
-        expectAttribute('video', label, mockMetadata.title);
-        expectAttribute('.bmpui-ui-hugeplaybacktogglebutton', label, mockMetadata.title);
-        expectAttribute('[role="img"]', label, mockMetadata.title);
+        expectAttributes({
+            selector: 'video',
+            attributes: { 'aria-label': mockMetadata.title }
+        });
+        expectAttributes({
+            selector: '.bmpui-ui-hugeplaybacktogglebutton',
+            attributes: { 'aria-label': mockMetadata.title }
+        });
+        expectAttributes({
+            selector: '[role="img"]',
+            attributes: { 'aria-label': mockMetadata.title }
+        });
     });
     it('handles aria-describedby correctly', () => {
         if (!container)
             return;
         addAccessibilityAttributes(container, mockMetadata);
-        const descriptionId = container.querySelector('.bmpui-label-metadata-description')?.id;
-        expectAttribute('video', 'aria-describedby', descriptionId ? descriptionId : '');
-        expectAttribute('.bmpui-ui-hugeplaybacktogglebutton', 'aria-describedby', descriptionId ? descriptionId : '');
-    });
-    it('correctly adjusts role and aria-haspopup attributes', () => {
-        if (!container)
-            return;
-        addAccessibilityAttributes(container, mockMetadata);
-        const popupButton = container.querySelector('[role="button"]');
-        expect(popupButton).toBeTruthy();
-        expect(popupButton?.getAttribute('aria-haspopup')).toBe('menu');
-    });
-    it('removes aria-pressed from menuitems', () => {
-        if (!container)
-            return;
-        addAccessibilityAttributes(container, mockMetadata);
-        expect(container.querySelector('[role="menuitem"][aria-pressed]')).toBeFalsy();
-    });
-    it('changes the role of menuitems and menus correctly', () => {
-        if (!container)
-            return;
-        addAccessibilityAttributes(container, mockMetadata);
-        expectAttribute('.bmpui-ui-settings-panel-item', 'role', 'group');
-        expectAttribute('.bmpui-ui-settings-panel-page', 'role', 'group');
+        const descriptionId = container.querySelector('.bmpui-label-metadata-description')?.id || '';
+        expectAttributes({
+            selector: 'video',
+            attributes: { 'aria-describedby': descriptionId ?? '' }
+        });
+        expectAttributes({
+            selector: '.bmpui-ui-hugeplaybacktogglebutton',
+            attributes: { 'aria-describedby': descriptionId ?? '' }
+        });
     });
 });

package/lib/ui/handlers/domhandlers.d.ts

@@ -1,3 +1,3 @@
-import { StreamObject } from 'types/interfaces';
-import { PlayerAPI } from 'bitmovin-player';
+import { StreamObject } from '../../types/interfaces';
+import { PlayerAPI } from 'bitmovin-player/modules/bitmovinplayer-core';
 export declare function handleLiveStreamNoDvr(player: PlayerAPI, streamObject: StreamObject): void;

package/lib/ui/handlers/listboxhandlers.d.ts

@@ -1,5 +1,19 @@
-import { type PlayerAPI } from 'bitmovin-player';
 import { type SettingsPanel, type SettingsPanelPage, type SettingsPanelPageOpenButton } from 'bitmovin-player-ui';
-export declare function handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (e: any) => void;
-export declare function handleSpeedListBoxItemSelected(player: PlayerAPI, speedSettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (source: any, args: any) => void;
-export declare function handleQualityListBoxItemSelected(player: PlayerAPI, qualitySettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (source: any, args: any) => void;
+import { PlayerContext } from 'types/interfaces';
+export declare function handleSubtitleListBoxItemSelected({ subtitleSettingsOpenButton, settingsPanel, mainSettingsPage }: {
+    subtitleSettingsOpenButton: SettingsPanelPageOpenButton;
+    settingsPanel: SettingsPanel;
+    mainSettingsPage: SettingsPanelPage;
+}): (e: any) => void;
+export declare function handleSpeedListBoxItemSelected({ playerContext, speedSettingsOpenButton, settingsPanel, mainSettingsPage }: {
+    playerContext: PlayerContext;
+    speedSettingsOpenButton: SettingsPanelPageOpenButton;
+    settingsPanel: SettingsPanel;
+    mainSettingsPage: SettingsPanelPage;
+}): (source: any, args: any) => void;
+export declare function handleQualityListBoxItemSelected({ playerContext, qualitySettingsOpenButton, settingsPanel, mainSettingsPage }: {
+    playerContext: PlayerContext;
+    qualitySettingsOpenButton: SettingsPanelPageOpenButton;
+    settingsPanel: SettingsPanel;
+    mainSettingsPage: SettingsPanelPage;
+}): (source: any, args: any) => void;