@npo/player 1.20.4 → 1.21.1

package/README.md

@@ -21,3 +21,8 @@ MIT
 
 [JWT.IO - JSON Web Tokens Introduction]: https://jwt.io/introduction
 [self generated JWT]: https://www.npmjs.com/package/jsonwebtoken
+
+## Native mobile development
+
+For detailed information on the JavaScript player integration for ios and Android, including custom message handling, UI customization, and interaction with native mobile SDKs, see the [Bitmovin Player Integration for Native Mobile SDKs](src/js/ui/README.md) located in the `src/js/ui` directory.
+

package/lib/js/api/getstreamobject.test.js

@@ -9,9 +9,9 @@ describe('getStreamObject', () => {
     let npoplayer;
     let apiPayload;
     const testPlayerConfig = {
-        key: "D634EA2C-BFE7-4BB6-9EAA-CDCC7B1EDFFA",
+        key: 'dummy key',
     };
-    const div = document.createElement("div");
+    const div = document.createElement('div');
     beforeEach(() => {
         npoplayer = new NpoPlayer(div, testPlayerConfig);
         apiPayload = {

package/lib/js/markers/updateLiveMarkers.d.ts

@@ -0,0 +1,4 @@
+import { PlayerAPI } from "bitmovin-player";
+import { UIManager } from "bitmovin-player-ui";
+import { TimeLineMarker } from "types/interfaces";
+export declare function updateLiveMarkers(timeLineMarkers: TimeLineMarker[], player: PlayerAPI, uiManager: UIManager): void;

package/lib/js/markers/updateLiveMarkers.js

@@ -0,0 +1,21 @@
+export function updateLiveMarkers(timeLineMarkers, player, uiManager) {
+    if (!player || !uiManager) {
+        console.error('Player or UIManager is null');
+        return;
+    }
+    timeLineMarkers.sort((a, b) => a.time - b.time);
+    let markesWithClass = timeLineMarkers.map((marker) => {
+        return {
+            time: marker.time,
+            title: marker.title,
+            cssClasses: ['npo-livestream-marker'],
+        };
+    });
+    const existingTimelineMarkers = uiManager.getTimelineMarkers();
+    existingTimelineMarkers.forEach((marker) => {
+        uiManager?.removeTimelineMarker(marker);
+    });
+    markesWithClass.forEach(marker => {
+        uiManager?.addTimelineMarker(marker);
+    });
+}

package/lib/js/markers/updateLiveMarkers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/js/markers/updateLiveMarkers.test.js

@@ -0,0 +1,53 @@
+import { updateLiveMarkers } from './updateLiveMarkers';
+import { UIManager } from "bitmovin-player-ui";
+jest.mock("bitmovin-player-ui", () => {
+    return {
+        UIManager: jest.fn().mockImplementation(() => ({
+            getTimelineMarkers: jest.fn().mockReturnValue([]),
+            addTimelineMarker: jest.fn(),
+            removeTimelineMarker: jest.fn(),
+        })),
+    };
+});
+jest.mock("bitmovin-player", () => ({
+    PlayerAPI: jest.fn(),
+}));
+describe('updateLiveMarkers', () => {
+    const player = {
+        getCurrentTime: jest.fn().mockReturnValue(10),
+    };
+    let uiManager;
+    let ui;
+    beforeEach(() => {
+        uiManager = new UIManager(player, ui);
+    });
+    test('should correctly update UI manager with sorted and transformed markers', () => {
+        const timeLineMarkers = [
+            { time: 3000, title: 'Marker 2' },
+            { time: 1000, title: 'Marker 1' },
+        ];
+        updateLiveMarkers(timeLineMarkers, player, uiManager);
+        expect(uiManager.getTimelineMarkers).toHaveBeenCalled();
+        expect(uiManager.removeTimelineMarker).toHaveBeenCalledTimes(0);
+        expect(uiManager.addTimelineMarker).toHaveBeenCalledTimes(2);
+        expect(uiManager.addTimelineMarker).toHaveBeenCalledWith(expect.objectContaining({
+            time: 1000,
+            title: 'Marker 1',
+            cssClasses: ['npo-livestream-marker'],
+        }));
+        expect(uiManager.addTimelineMarker).toHaveBeenCalledWith(expect.objectContaining({
+            time: 3000,
+            title: 'Marker 2',
+            cssClasses: ['npo-livestream-marker'],
+        }));
+    });
+    test('should remove existing markers before adding new ones', () => {
+        uiManager.getTimelineMarkers.mockReturnValue([{ time: 2000, title: 'Existing Marker' }]);
+        const timeLineMarkers = [
+            { time: 1000, title: 'New Marker' },
+        ];
+        updateLiveMarkers(timeLineMarkers, player, uiManager);
+        expect(uiManager.removeTimelineMarker).toHaveBeenCalledTimes(1);
+        expect(uiManager.addTimelineMarker).toHaveBeenCalledTimes(1);
+    });
+});

package/lib/js/playeractions/handlers/error.d.ts

@@ -1,3 +1,3 @@
-import { PlayerAPI } from "bitmovin-player";
-import { UIComponents } from "../../../types/interfaces";
+import { PlayerAPI } from 'bitmovin-player';
+import { UIComponents } from '../../../types/interfaces';
 export declare function handlePlayerError(player: PlayerAPI, uiComponents: UIComponents, input: any): void;

package/lib/js/playeractions/handlers/processsourceconfig.d.ts

@@ -1,3 +1,3 @@
 import { StreamObject } from 'types/interfaces';
 import { SourceConfig } from 'bitmovin-player';
-export declare function processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm?: string | null): Promise<SourceConfig>;
+export declare function processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | null | undefined, useWidevineServerCertificate: boolean): Promise<SourceConfig>;

package/lib/js/playeractions/handlers/processsourceconfig.js

@@ -1,7 +1,7 @@
 import { HttpResponseType } from 'bitmovin-player';
 import { npoCdnProviders } from '../../cdnproviders';
 import { replaceSpecialChars } from '../../utilities/utilities';
-async function setDrm(sourceConfig, drm, _streamObject) {
+async function setDrm(sourceConfig, drm, _streamObject, useWidevineServerCertificate) {
     const npoDrmGateway = 'https://npo-drm-gateway.samgcloud.nepworldwide.nl/authentication?custom_data=';
     switch (drm) {
         case 'fairplay':
@@ -37,14 +37,14 @@ async function setDrm(sourceConfig, drm, _streamObject) {
             break;
         case 'widevine':
             try {
-                const response = await fetch('https://widevine.npoplayer.nl/widevine_player_cert.bin');
-                const certificate = await response.arrayBuffer();
                 sourceConfig.drm = {
                     widevine: {
-                        serverCertificate: certificate,
                         LA_URL: npoDrmGateway + _streamObject.stream.drmToken,
                         audioRobustness: 'SW_SECURE_CRYPTO',
-                        videoRobustness: 'SW_SECURE_CRYPTO'
+                        videoRobustness: 'SW_SECURE_CRYPTO',
+                        serverCertificate: useWidevineServerCertificate
+                            ? await (await fetch('https://widevine.npoplayer.nl/widevine_player_cert.bin')).arrayBuffer()
+                            : undefined
                     }
                 };
             }
@@ -91,7 +91,7 @@ function setStreamProfile(sourceConfig, _sourceConfig, _streamObject) {
     }
     return sourceConfig;
 }
-export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm = null) {
+export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm = null, useWidevineServerCertificate) {
     let sourceConfig = {};
     sourceConfig.title =
         _sourceConfig.title ?? _streamObject.metadata.title ?? '';
@@ -125,7 +125,7 @@ export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm
             : undefined;
     sourceConfig.options = _sourceConfig.options;
     sourceConfig = setStreamProfile(sourceConfig, _sourceConfig, _streamObject);
-    sourceConfig = await setDrm(sourceConfig, drm, _streamObject);
+    sourceConfig = await setDrm(sourceConfig, drm, _streamObject, useWidevineServerCertificate);
     const streamSource = _streamObject.stream.streamURL;
     let cdnString = streamSource;
     if (streamSource.startsWith('file:///')) {

package/lib/js/ui/components/adbutton.js

@@ -3,7 +3,7 @@ export function createAdButton(npoplayer) {
     npoplayer.uiComponents.adbutton = undefined;
     const adButton = new Button({
         cssClass: 'ui-textbutton ui-sterbutton bmpui-ui-button',
-        text: 'Meer info',
+        text: 'Ga naar website van adverteerder',
         hidden: true
     });
     npoplayer.uiComponents.adbutton = adButton;

package/lib/js/ui/components/buttons.js

@@ -14,7 +14,7 @@ export function createMiddleButtons(player) {
 export function createRewindButton(player) {
     const rewindButton = new Button({
         cssClass: 'ui-rewindbutton bmpui-ui-button',
-        ariaLabel: 'Spoel 10 seconde terug',
+        ariaLabel: 'Spoel 10 seconden terug',
     });
     if (player) {
         rewindButton.onClick.subscribe(() => {
@@ -26,7 +26,7 @@ export function createRewindButton(player) {
 export function createForwardButton(player) {
     const forwardButton = new Button({
         cssClass: 'ui-forwardbutton bmpui-ui-button',
-        ariaLabel: 'Spoel 10 seconde vooruit',
+        ariaLabel: 'Spoel 10 seconden vooruit',
     });
     if (player) {
         forwardButton.onClick.subscribe(() => {

package/lib/js/ui/components/nativemobile/buttons.d.ts

@@ -1,7 +1,13 @@
 import { AirPlayToggleButton, Button, CastToggleButton, ControlBar, FullscreenToggleButton, PictureInPictureToggleButton, PlaybackToggleButton, SettingsPanel, SettingsToggleButton, VolumeToggleButton } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
 export declare function createMiddleButtons(player: PlayerAPI): ControlBar;
-export declare function createPlayNextButton(): Button<{
+export declare function createPlayNextButton(player: PlayerAPI): Button<{
+    cssClass: string;
+    text: string;
+    ariaLabel: string;
+    hidden: false;
+}>;
+export declare function createCancelPlayNextButton(player: PlayerAPI): Button<{
     cssClass: string;
     text: string;
     ariaLabel: string;

package/lib/js/ui/components/nativemobile/buttons.js

@@ -3,6 +3,7 @@ import { sendCustomMessage } from '../../nativemobileuicontainer';
 import { CustomMessages } from '../../../../types/interfaces';
 import { ViewMode } from 'bitmovin-player';
 import { createForwardButton, createRewindButton } from '../../components/buttons';
+import { hidePlayNextScreen } from '../shared/playnextscreen';
 function createBigPlayToggleButton() {
     const bigPlayToggleButton = new PlaybackToggleButton({
         cssClass: 'ui-playbacktogglebutton'
@@ -29,15 +30,17 @@ export function createMiddleButtons(player) {
         cssClasses: ['controlbar-middle']
     });
 }
-export function createPlayNextButton() {
+export function createPlayNextButton(player) {
     const playNextButton = new Button({
-        cssClass: 'ui-hugeplaynextbacktogglebutton ui-playNextButton bmpui-ui-button',
-        text: 'De volgende aflevering wordt zo afgespeeld...',
+        cssClass: 'ui-textbutton ui-playNextButton bmpui-ui-button',
+        text: 'Volgende aflevering over <span class="countdown"></span>…',
         ariaLabel: 'Speel volgende aflevering af',
         hidden: false
     });
+    const container = player.getContainer();
     const playNextButtonClickHandler = () => {
-        sendCustomMessage(CustomMessages.CLICK_PLAY_NEXT);
+        sendCustomMessage(CustomMessages.PLAY_NEXT_PROCEED_CLICK);
+        hidePlayNextScreen(container, true);
     };
     playNextButton.onClick.subscribe(() => {
         playNextButtonClickHandler();
@@ -47,6 +50,26 @@ export function createPlayNextButton() {
     });
     return playNextButton;
 }
+export function createCancelPlayNextButton(player) {
+    const cancelPlayNextButton = new Button({
+        cssClass: 'ui-textbutton ui-cancelPlayNextButton bmpui-ui-button',
+        text: 'Annuleer',
+        ariaLabel: 'Annuleer',
+        hidden: false
+    });
+    const container = player.getContainer();
+    const cancelPlayNextButtonClickHandler = () => {
+        hidePlayNextScreen(container, true);
+        sendCustomMessage(CustomMessages.PLAY_NEXT_CANCEL_CLICK);
+        cancelPlayNextButton.onClick.unsubscribe(() => {
+            cancelPlayNextButtonClickHandler();
+        });
+    };
+    cancelPlayNextButton.onClick.subscribe(() => {
+        cancelPlayNextButtonClickHandler();
+    });
+    return cancelPlayNextButton;
+}
 export function createWatchFromStartButton() {
     const watchFromStartButton = new Button({
         cssClass: 'ui-textbutton ui-watchfromstartbutton bmpui-ui-button',

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

@@ -1,4 +1,4 @@
-import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel, VolumeSlider, Spacer, } from 'bitmovin-player-ui';
+import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel, Spacer, } from 'bitmovin-player-ui';
 import { createForwardButton, createRewindButton } from '../buttons';
 import { createAirPlayToggleButton, createCastToggleButton, createFullscreenToggleButton, createPictureInPictureToggleButton, createPlaybackToggleButton, createSettingsButton, createVolumeToggleButton, } from './buttons';
 export function createControlBar(player, settingsPanel) {
@@ -26,7 +26,6 @@ export function createControlBar(player, settingsPanel) {
                 components: [
                     createPlaybackToggleButton(),
                     createVolumeToggleButton(player),
-                    new VolumeSlider(),
                     rewindButton,
                     forwardButton,
                     new Spacer(),

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

@@ -1,5 +1,6 @@
 import { Container } from 'bitmovin-player-ui';
-export declare function createPlayNextScreen(): Container<{
+import { PlayerAPI } from 'bitmovin-player';
+export declare function createPlayNextScreen(player: PlayerAPI): Container<{
     components: import("bitmovin-player-ui").Button<{
         cssClass: string;
         text: string;

package/lib/js/ui/components/nativemobile/playnext.js

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

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

@@ -48,7 +48,13 @@ export function createSettingsPanel(npoplayer) {
         cssClasses: [listboxPanelClass]
     });
     const settingsTriggerButton = new Button({ cssClass: settingTriggerClass });
-    const mainSettingsPage = new SettingsPanelPage({
+    class CustomSettingsPanelPage extends SettingsPanelPage {
+        constructor(config) {
+            super(config);
+        }
+        onActiveEvent() { }
+    }
+    const mainSettingsPage = new CustomSettingsPanelPage({
         components: [
             settingsTriggerButton,
             new Label({ text: settingsLabel, cssClass: 'setting-header' }),
@@ -57,13 +63,11 @@ export function createSettingsPanel(npoplayer) {
         ],
         cssClasses: ['main-panel']
     });
-    mainSettingsPage.onActive.subscribeOnce(() => {
-        qualityListBox.addItem('auto', autoLabel);
-        player?.getAvailableVideoQualities().forEach(quality => {
-            qualityListBox.addItem(quality.id, quality.label ?? 'test');
-        });
-        qualityListBox.selectItem('auto');
-    });
+    const onSourceLoaded = () => {
+        player?.off(PlayerEvent.SourceLoaded, onSourceLoaded);
+        checkQualities();
+        checkSubtitles();
+    };
     const settingsPanel = new SettingsPanel({
         components: [
             mainSettingsPage,
@@ -72,7 +76,8 @@ export function createSettingsPanel(npoplayer) {
             qualityPanelPage
         ],
         hidden: true,
-        pageTransitionAnimation: false
+        pageTransitionAnimation: false,
+        hideDelay: -1,
     });
     const subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({
         targetPage: subtitlePanelPage,
@@ -131,9 +136,6 @@ export function createSettingsPanel(npoplayer) {
         npoplayer.uiComponents.settingsPanel = settingsPanel;
     }
     const checkSubtitles = () => {
-        player?.off(PlayerEvent.SourceLoaded, checkSubtitles);
-        player?.off(PlayerEvent.AdBreakFinished, checkSubtitles);
-        player?.off(PlayerEvent.AdError, checkSubtitles);
         const subtitles = player?.subtitles?.list();
         if (subtitles != null && subtitles.length > 0) {
             subtitlesPanelItem.show();
@@ -142,22 +144,27 @@ export function createSettingsPanel(npoplayer) {
             subtitlesPanelItem.hide();
         }
     };
-    const checkQuality = () => {
-        player?.off(PlayerEvent.SourceLoaded, checkQuality);
-        player?.off(PlayerEvent.AdBreakFinished, checkQuality);
-        player?.off(PlayerEvent.AdError, checkQuality);
-        if (player?.getAvailableVideoQualities() !== undefined && player?.getAvailableVideoQualities().length > 0) {
+    const checkQualities = () => {
+        const availableVideoQualities = player?.getAvailableVideoQualities();
+        qualityListBox.clearItems();
+        if (availableVideoQualities?.length) {
+            player?.getAvailableVideoQualities().forEach(quality => {
+                qualityListBox.addItem(quality.id, quality.label ?? 'test');
+            });
+            qualityListBox.addItem('auto', autoLabel);
+            qualityListBox.selectItem('auto');
             qualityPanelItem.show();
         }
         else {
             qualityPanelItem.hide();
         }
     };
-    player?.on(PlayerEvent.SourceLoaded, checkSubtitles);
-    player?.on(PlayerEvent.SourceLoaded, checkQuality);
-    player?.on(PlayerEvent.AdBreakFinished, checkSubtitles);
-    player?.on(PlayerEvent.AdBreakFinished, checkQuality);
-    player?.on(PlayerEvent.AdError, checkSubtitles);
-    player?.on(PlayerEvent.AdError, checkQuality);
+    player?.on(PlayerEvent.SourceLoaded, onSourceLoaded);
+    settingsPanel.onHide.subscribe(() => {
+        player?.getContainer().querySelector('.bmpui-npo-player')?.classList.remove('bmpui-settings-panel-shown');
+    });
+    settingsPanel.onShow.subscribe(() => {
+        player?.getContainer().querySelector('.bmpui-npo-player')?.classList.add('bmpui-settings-panel-shown');
+    });
     return settingsPanel;
 }

package/lib/js/ui/components/shared/playnextscreen.d.ts

@@ -1,2 +1,2 @@
-export declare function showPlayNextScreen(overlayDuration: number, containerEl: HTMLElement, proceedCallBack?: () => void): void;
-export declare function hidePlayNextScreen(containerEl: HTMLElement): void;
+export declare function showPlayNextScreenIfNeeded(overlayDuration: number, containerEl: HTMLElement, proceedCallBack?: () => void, nativeUI?: boolean): void;
+export declare function hidePlayNextScreen(containerEl: HTMLElement, nativeUI?: boolean): void;

package/lib/js/ui/components/shared/playnextscreen.js

@@ -1,11 +1,17 @@
+import { sendCustomMessage } from '../../nativemobileuicontainer';
+import { CustomMessages } from '../../../../types/interfaces';
 let countdownInterval = null;
-export function showPlayNextScreen(overlayDuration, containerEl, proceedCallBack) {
+export function showPlayNextScreenIfNeeded(overlayDuration, containerEl, proceedCallBack, nativeUI = false) {
     const playnextOverlay = containerEl.querySelector('.bmpui-overlay-playnext');
     const countdownLabel = playnextOverlay?.querySelector('.countdown');
+    if (playnextOverlay?.classList.contains('show'))
+        return;
     if (countdownLabel) {
         countdownLabel.innerHTML = overlayDuration.toString();
     }
     playnextOverlay?.classList.add('show');
+    if (nativeUI)
+        sendCustomMessage(CustomMessages.PLAY_NEXT_OVERLAY_SHOWN);
     const playNextButton = playnextOverlay?.querySelector('.ui-playNextButton');
     if (playNextButton) {
         playNextButton.focus();
@@ -15,18 +21,24 @@ export function showPlayNextScreen(overlayDuration, containerEl, proceedCallBack
         if (playnextOverlay?.classList.contains('show') && countdownLabel) {
             countdownLabel.innerHTML = countdown.toString();
             countdown -= 1;
+            if (nativeUI)
+                sendCustomMessage(CustomMessages.PLAY_NEXT_COUNTDOWN_PROGRESS, { playNext: { remainingCountDownDuration: countdown } });
         }
         if (countdown < 0) {
             clearInterval(countdownInterval);
             if (playnextOverlay?.classList.contains('show')) {
                 proceedCallBack?.();
                 playnextOverlay?.classList.remove('show');
+                if (nativeUI)
+                    sendCustomMessage(CustomMessages.PLAY_NEXT_COUNTDOWN_FINISHED);
             }
         }
     }, 1000);
 }
-export function hidePlayNextScreen(containerEl) {
+export function hidePlayNextScreen(containerEl, nativeUI = false) {
     containerEl.querySelector('.bmpui-overlay-playnext')?.classList.remove('show');
+    if (nativeUI)
+        sendCustomMessage(CustomMessages.PLAY_NEXT_OVERLAY_HIDDEN);
     if (countdownInterval !== null) {
         clearInterval(countdownInterval);
         countdownInterval = null;

package/lib/js/ui/components/shared/playnextstreen.test.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        bitmovin: any;
+    }
+}
+export {};

package/lib/js/ui/components/shared/playnextstreen.test.js

@@ -0,0 +1,56 @@
+import { showPlayNextScreenIfNeeded } from './playnextscreen';
+import { sendCustomMessage } from '../../nativemobileuicontainer';
+import { CustomMessages } from '../../../../types/interfaces';
+jest.mock('../../nativemobileuicontainer');
+describe('showPlayNextScreenIfNeeded', () => {
+    let containerEl;
+    let playnextOverlay;
+    let countdownLabel;
+    let playNextButton;
+    let proceedCallBack;
+    beforeEach(() => {
+        sendCustomMessage.mockClear();
+        playnextOverlay = document.createElement('div');
+        playnextOverlay.classList.add('bmpui-overlay-playnext');
+        countdownLabel = document.createElement('div');
+        countdownLabel.classList.add('countdown');
+        playnextOverlay.appendChild(countdownLabel);
+        playNextButton = document.createElement('button');
+        playNextButton.classList.add('ui-playNextButton');
+        playnextOverlay.appendChild(playNextButton);
+        containerEl = document.createElement('div');
+        containerEl.appendChild(playnextOverlay);
+        proceedCallBack = jest.fn();
+    });
+    afterEach(() => {
+        jest.clearAllTimers();
+    });
+    it('should not show overlay if it is already shown', () => {
+        playnextOverlay.classList.add('show');
+        showPlayNextScreenIfNeeded(10, containerEl, proceedCallBack, false);
+        expect(playnextOverlay.classList.contains('show')).toBe(true);
+        expect(proceedCallBack).not.toHaveBeenCalled();
+    });
+    it('should show overlay and start countdown', () => {
+        jest.useFakeTimers();
+        showPlayNextScreenIfNeeded(10, containerEl, proceedCallBack, false);
+        expect(playnextOverlay.classList.contains('show')).toBe(true);
+        expect(countdownLabel.innerHTML).toBe('10');
+        jest.advanceTimersByTime(1000);
+        expect(countdownLabel.innerHTML).toBe('9');
+    });
+    it('should call proceedCallBack and hide overlay when countdown finishes', () => {
+        jest.useFakeTimers();
+        showPlayNextScreenIfNeeded(1, containerEl, proceedCallBack, false);
+        jest.advanceTimersByTime(2000);
+        expect(proceedCallBack).toHaveBeenCalled();
+        expect(playnextOverlay.classList.contains('show')).toBe(false);
+    });
+    it('should send custom messages when nativeUI is true', () => {
+        jest.useFakeTimers();
+        showPlayNextScreenIfNeeded(5, containerEl, proceedCallBack, true);
+        jest.advanceTimersByTime(1000);
+        expect(sendCustomMessage).toHaveBeenCalledWith(CustomMessages.PLAY_NEXT_OVERLAY_SHOWN);
+        expect(sendCustomMessage).toHaveBeenCalledWith(CustomMessages.PLAY_NEXT_COUNTDOWN_PROGRESS, { playNext: { remainingCountDownDuration: 3 } });
+    });
+});

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,63 @@
+import { addAccessibilityAttributes } from './accessibilityhandler';
+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>
+                <video></video>
+                <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) {
+        const element = container?.querySelector(selector);
+        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);
+    });
+    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');
+    });
+});

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

@@ -0,0 +1,3 @@
+import { StreamObject } from "types/interfaces";
+import { PlayerAPI } from "bitmovin-player";
+export declare function handleLiveStreamNoDvr(player: PlayerAPI, streamObject: StreamObject, container: HTMLElement): void;

package/lib/js/ui/handlers/domhandlers.js

@@ -0,0 +1,7 @@
+import { getPlayerElement } from "../../utilities/utilities";
+export function handleLiveStreamNoDvr(player, streamObject, container) {
+    const isLiveStreamNoDvr = streamObject.stream.isLiveStream && streamObject.stream.hasDvrWindow === false;
+    const playerElement = getPlayerElement(player, '.bmpui-npo-player');
+    const noDvrClass = 'livestream-no-dvr';
+    playerElement?.classList[isLiveStreamNoDvr ? 'add' : 'remove'](noDvrClass);
+}

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

@@ -0,0 +1 @@
+export {};