@npo/player 1.21.1 → 1.22.0

package/README.md

@@ -11,7 +11,7 @@ Extensive and up-to-date documentation is available at https://docs.npoplayer.nl
 Code quality is analysed by SonarCloud. The project can be found at https://sonarcloud.io/project/overview?id=NPOstart_npo-player
 
 # Changelog
-Current version: v1.21.0
+Current version: v1.22.0
 
 The changelog is available at https://docs.npoplayer.nl/implementation/web/changelog/
 
@@ -25,4 +25,3 @@ MIT
 ## 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/drm/handlers/verifydrm.test.js

@@ -12,6 +12,6 @@ const payload = {
 describe("Test DRM verification", () => {
     it("should call player.load when the drmToken is null", async () => {
         await verifyDRM(npoplayer, player, payload);
-        expect(load).toBeCalled();
+        expect(load).toHaveBeenCalled();
     });
 });

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

@@ -1,4 +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;
+export declare function updateLiveMarkers(timeLineMarkers: TimeLineMarker[], player: PlayerAPI, uiManager: UIManager, autoFillTimeLineMarkerDuration: boolean): void;

package/lib/js/markers/updateLiveMarkers.js

@@ -1,21 +1,50 @@
-export function updateLiveMarkers(timeLineMarkers, player, uiManager) {
+export function updateLiveMarkers(timeLineMarkers, player, uiManager, autoFillTimeLineMarkerDuration) {
     if (!player || !uiManager) {
         console.error('Player or UIManager is null');
         return;
     }
+    removeAllMarkers(uiManager);
+    let currentTimeEpoch = Math.floor(Date.now() / 1000);
     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 => {
+    let relativeTimeMarkers = timeLineMarkers.map((marker, index) => transformMarker(marker, index, timeLineMarkers, currentTimeEpoch, player, autoFillTimeLineMarkerDuration));
+    relativeTimeMarkers.forEach(marker => {
         uiManager?.addTimelineMarker(marker);
     });
 }
+function transformMarker(marker, index, timeLineMarkers, currentTimeEpoch, player, autoFillTimeLineMarkerDuration) {
+    const DVR_WINDOW_LENGTH = Math.abs(player.getMaxTimeShift());
+    let duration = marker.duration !== undefined ? marker.duration : 0;
+    let startTimeRelativeToCurrent = marker.time - currentTimeEpoch;
+    if (autoFillTimeLineMarkerDuration) {
+        if (index === timeLineMarkers.length - 1) {
+            duration = Math.min(currentTimeEpoch, marker.time + DVR_WINDOW_LENGTH) - marker.time;
+        }
+        else {
+            duration = timeLineMarkers[index + 1].time - marker.time;
+        }
+        if (startTimeRelativeToCurrent < -DVR_WINDOW_LENGTH) {
+            duration = index === timeLineMarkers.length - 1 ?
+                currentTimeEpoch - (currentTimeEpoch - DVR_WINDOW_LENGTH) :
+                timeLineMarkers[index + 1].time - (currentTimeEpoch - DVR_WINDOW_LENGTH);
+            startTimeRelativeToCurrent = -DVR_WINDOW_LENGTH;
+        }
+    }
+    return {
+        time: marker.time,
+        duration: duration,
+        title: marker.title,
+        cssClasses: ['npo-livestream-marker'],
+    };
+}
+function removeAllMarkers(uiManager) {
+    let existingTimelineMarkers = uiManager.getTimelineMarkers();
+    while (existingTimelineMarkers.length > 0) {
+        const marker = existingTimelineMarkers[0];
+        const removed = uiManager?.removeTimelineMarker(marker);
+        if (removed) {
+            existingTimelineMarkers = uiManager.getTimelineMarkers();
+            continue;
+        }
+        break;
+    }
+}

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

@@ -15,6 +15,7 @@ jest.mock("bitmovin-player", () => ({
 describe('updateLiveMarkers', () => {
     const player = {
         getCurrentTime: jest.fn().mockReturnValue(10),
+        getMaxTimeShift: jest.fn().mockReturnValue(-3600)
     };
     let uiManager;
     let ui;
@@ -26,7 +27,7 @@ describe('updateLiveMarkers', () => {
             { time: 3000, title: 'Marker 2' },
             { time: 1000, title: 'Marker 1' },
         ];
-        updateLiveMarkers(timeLineMarkers, player, uiManager);
+        updateLiveMarkers(timeLineMarkers, player, uiManager, true);
         expect(uiManager.getTimelineMarkers).toHaveBeenCalled();
         expect(uiManager.removeTimelineMarker).toHaveBeenCalledTimes(0);
         expect(uiManager.addTimelineMarker).toHaveBeenCalledTimes(2);
@@ -46,7 +47,7 @@ describe('updateLiveMarkers', () => {
         const timeLineMarkers = [
             { time: 1000, title: 'New Marker' },
         ];
-        updateLiveMarkers(timeLineMarkers, player, uiManager);
+        updateLiveMarkers(timeLineMarkers, player, uiManager, true);
         expect(uiManager.removeTimelineMarker).toHaveBeenCalledTimes(1);
         expect(uiManager.addTimelineMarker).toHaveBeenCalledTimes(1);
     });

package/lib/js/playeractions/handlers/error.test.js

@@ -18,11 +18,11 @@ describe("Test DRM verification", () => {
     });
     it("should call player.unload", () => {
         handlePlayerError(player, uiComponents, input);
-        expect(unload).toBeCalled();
+        expect(unload).toHaveBeenCalled();
     });
     it("should hide the controlbar", () => {
         handlePlayerError(player, uiComponents, input);
-        expect(hide).toBeCalled();
+        expect(hide).toHaveBeenCalled();
     });
     it("should not hide the controlbar", () => {
         const components = {
@@ -30,15 +30,15 @@ describe("Test DRM verification", () => {
             controlbar: undefined,
         };
         handlePlayerError(player, components, input);
-        expect(hide).not.toBeCalled();
+        expect(hide).not.toHaveBeenCalled();
     });
     it("should show the message overlay", () => {
         handlePlayerError(player, uiComponents, input);
-        expect(show).toBeCalled();
-        expect(setText).toBeCalled();
+        expect(show).toHaveBeenCalled();
+        expect(setText).toHaveBeenCalled();
     });
     it("should not show the message overlay", () => {
         handlePlayerError(player, { ...uiComponents, errorMessageOverlay: undefined }, input);
-        expect(show).not.toBeCalled();
+        expect(show).not.toHaveBeenCalled();
     });
 });

package/lib/js/playeractions/handlers/handleoffsets.test.js

@@ -15,15 +15,15 @@ describe("Test offset handling", () => {
     });
     it("should not seek when player is live", () => {
         handleStartOffset(player, offset);
-        expect(onReady).not.toBeCalled();
+        expect(onReady).not.toHaveBeenCalled();
     });
     it("should not seek when offset is undefined", () => {
         handleStartOffset({ ...player, isLive: () => false });
-        expect(onReady).not.toBeCalled();
+        expect(onReady).not.toHaveBeenCalled();
     });
     it("should seek when player is not live and offset is defined", () => {
         handleStartOffset({ ...player, isLive: () => false }, offset);
-        expect(onReady).toBeCalled();
+        expect(onReady).toHaveBeenCalled();
     });
 });
 describe("Test programStart shift", () => {
@@ -32,18 +32,18 @@ describe("Test programStart shift", () => {
     });
     it("should not call timeshift when player is null", () => {
         shiftToProgramStart(null, timestamp);
-        expect(timeShift).not.toBeCalled();
+        expect(timeShift).not.toHaveBeenCalled();
     });
     it("should not call timeshift when timestamp is undefined", () => {
         shiftToProgramStart(player);
-        expect(timeShift).not.toBeCalled();
+        expect(timeShift).not.toHaveBeenCalled();
     });
     it("should not call timeshift when player is not live", () => {
         shiftToProgramStart({ ...player, isLive: () => false }, timestamp);
-        expect(timeShift).not.toBeCalled();
+        expect(timeShift).not.toHaveBeenCalled();
     });
     it("should not call timeshift when player is live and timestamp is set", () => {
         shiftToProgramStart(player, timestamp);
-        expect(timeShift).toBeCalled();
+        expect(timeShift).toHaveBeenCalled();
     });
 });

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

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

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

@@ -91,7 +91,7 @@ function setStreamProfile(sourceConfig, _sourceConfig, _streamObject) {
     }
     return sourceConfig;
 }
-export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm = null, useWidevineServerCertificate) {
+export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm = null, streamOptions, version, npoTagPartyId) {
     let sourceConfig = {};
     sourceConfig.title =
         _sourceConfig.title ?? _streamObject.metadata.title ?? '';
@@ -99,9 +99,7 @@ export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm
         _sourceConfig.description ??
             _streamObject.metadata.description ??
             '';
-    sourceConfig.poster =
-        _sourceConfig.poster ?? _streamObject.metadata.poster ?? '';
-    sourceConfig.poster = replaceSpecialChars(sourceConfig.poster);
+    sourceConfig.poster = decidePoster(_streamObject, _sourceConfig, streamOptions);
     sourceConfig.metadata = {
         title: sourceConfig.title,
         description: sourceConfig.description,
@@ -125,7 +123,7 @@ export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm
             : undefined;
     sourceConfig.options = _sourceConfig.options;
     sourceConfig = setStreamProfile(sourceConfig, _sourceConfig, _streamObject);
-    sourceConfig = await setDrm(sourceConfig, drm, _streamObject, useWidevineServerCertificate);
+    sourceConfig = await setDrm(sourceConfig, drm, _streamObject, streamOptions.useWidevineServerCertificate ?? true);
     const streamSource = _streamObject.stream.streamURL;
     let cdnString = streamSource;
     if (streamSource.startsWith('file:///')) {
@@ -143,9 +141,13 @@ export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm
     sourceConfig.analytics.cdnProvider = cdnString;
     sourceConfig.analytics.videoId = _streamObject.metadata.prid;
     sourceConfig.analytics.title = _streamObject.metadata.title;
+    sourceConfig.analytics.customData2 = _streamObject.user.type;
+    sourceConfig.analytics.customData3 = _streamObject.stream.avType;
+    sourceConfig.analytics.customData4 = npoTagPartyId;
+    sourceConfig.analytics.customData5 = version;
     sourceConfig.analytics = {
         ...sourceConfig.analytics,
-        ..._sourceConfig.analytics
+        ..._sourceConfig.analytics,
     };
     const getSubtitleLabels = function (data) {
         if (data.label === 'nl') {
@@ -170,3 +172,15 @@ export async function processSourceConfig(_sourceConfig = {}, _streamObject, drm
     }
     return sourceConfig;
 }
+function decidePoster(streamObject, sourceConfig, streamOptions) {
+    if (sourceConfig.poster) {
+        return replaceSpecialChars(sourceConfig.poster);
+    }
+    if (streamObject.metadata.poster && !streamObject.metadata.posterIsDefault) {
+        return streamObject.metadata.poster;
+    }
+    if (streamObject.metadata.posterIsDefault && streamOptions.customFallbackPoster) {
+        return replaceSpecialChars(streamOptions.customFallbackPoster);
+    }
+    return streamObject.metadata.poster ?? '';
+}

package/lib/js/playeractions/handlers/removereplayclass.js

@@ -5,7 +5,8 @@ export function removeReplayClass(player) {
     player.off(PlayerEvent.Seek, () => {
         removeReplayClass(player);
     });
-    const playerContainer = player.getContainer();
-    playerContainer.classList.remove('bmpui-player-state-finished');
-    playerContainer.classList.remove('bmpui-player-state-replay');
+    const playerContainer = player.getContainer().querySelector('.bmpui-npo-player');
+    playerContainer?.classList.remove('bmpui-player-state-finished');
+    playerContainer?.classList.remove('bmpui-player-state-replay');
+    playerContainer?.classList.add('bmpui-player-state-paused');
 }

package/lib/js/playeractions/handlers/removereplayclass.test.js

@@ -3,10 +3,13 @@ import { PlayerEvent } from 'bitmovin-player';
 describe('removeReplayClass', () => {
     let mockPlayer;
     let mockPlayerContainer;
+    let mockPlayerWrapper;
     beforeEach(() => {
         jest.clearAllMocks();
         mockPlayerContainer = document.createElement('div');
-        mockPlayerContainer.classList.add('bmpui-player-state-finished', 'bmpui-player-state-replay');
+        mockPlayerWrapper = document.createElement('div');
+        mockPlayerWrapper.classList.add('bmpui-npo-player', 'bmpui-player-state-finished', 'bmpui-player-state-replay');
+        mockPlayerContainer.appendChild(mockPlayerWrapper);
         mockPlayer = {
             off: jest.fn(),
             getContainer: jest.fn().mockReturnValue(mockPlayerContainer),
@@ -14,8 +17,9 @@ describe('removeReplayClass', () => {
     });
     it('should remove "bmpui-player-state-finished" and "bmpui-player-state-replay" classes from the player container', () => {
         removeReplayClass(mockPlayer);
-        expect(mockPlayerContainer.classList.contains('bmpui-player-state-finished')).toBe(false);
-        expect(mockPlayerContainer.classList.contains('bmpui-player-state-replay')).toBe(false);
+        expect(mockPlayerWrapper.classList.contains('bmpui-player-state-finished')).toBe(false);
+        expect(mockPlayerWrapper.classList.contains('bmpui-player-state-replay')).toBe(false);
+        expect(mockPlayerWrapper.classList.contains('bmpui-player-state-paused')).toBe(true);
     });
     it('should unregister the Seek event listener', () => {
         removeReplayClass(mockPlayer);

package/lib/js/tracking/handlers/eventbinding.js

@@ -4,14 +4,20 @@ const logEventHandlers = new Map();
 export function bindPlayerEvents(npoplayer, player) {
     if (player == null)
         return;
-    let isNewSource = false;
     let isSeeking = false;
+    let isLiveStream = npoplayer.streamObject.stream.isLiveStream;
+    let currentTime = 0;
+    let isNewSource = true;
+    const timeDifference = (time) => {
+        if (time === undefined || time === null)
+            return;
+        currentTime = isLiveStream ? +(time - Date.now() / 1000).toFixed(3) : +time.toFixed(3);
+        return currentTime;
+    };
     const logEventHandler = (eventName) => {
-        return (event) => {
-            const timeDifference = npoplayer.streamObject.stream.isLiveStream
-                ? event.position - Date.now() / 1000
-                : event.position;
-            logEvent(npoplayer, eventName, timeDifference);
+        return (e) => {
+            const eventTime = e.time !== undefined ? timeDifference(e.time) : undefined;
+            logEvent(npoplayer, eventName, eventTime);
         };
     };
     const seekHandler = (e) => {
@@ -33,33 +39,38 @@ export function bindPlayerEvents(npoplayer, player) {
         }
         logEvent(npoplayer, e.type, data);
     };
-    const handleSourceLoaded = (e) => {
+    const handleSourceLoaded = () => {
         isNewSource = true;
-        if (npoplayer.streamObject.stream.isLiveStream) {
-            logEvent(npoplayer, 'stop', e.position);
+        if (isLiveStream) {
+            logEvent(npoplayer, 'stop');
         }
     };
     const handlePlay = (e) => {
         if (!isNewSource && !isSeeking) {
-            logEvent(npoplayer, 'resume', e.position);
+            logEvent(npoplayer, 'resume', timeDifference(e.time));
         }
     };
-    const handlePlaying = (e) => {
+    const handlePlaying = () => {
         if (isSeeking) {
             isSeeking = false;
         }
-        if (isNewSource) {
-            logEvent(npoplayer, 'start', e.position);
+    };
+    const handleTime = (e) => {
+        if (isNewSource && !npoplayer.adBreakActive) {
+            logEvent(npoplayer, 'start', timeDifference(e.time));
             isNewSource = false;
         }
+        else {
+            logEvent(npoplayer, 'time', timeDifference(e.time));
+        }
     };
-    const handleViewModeChange = (e) => {
+    const handleViewModeChange = () => {
         const newViewMode = player.getViewMode();
         if (newViewMode === ViewMode.Fullscreen) {
-            logEvent(npoplayer, 'fullscreen', e.position);
+            logEvent(npoplayer, 'fullscreen', currentTime);
         }
         else {
-            logEvent(npoplayer, 'windowed', e.position);
+            logEvent(npoplayer, 'windowed', currentTime);
         }
     };
     const stopBeforeUnload = () => {
@@ -71,30 +82,29 @@ export function bindPlayerEvents(npoplayer, player) {
     window.removeEventListener('beforeunload', logEventHandlers.get('stopBeforeUnload'));
     logEventHandlers.clear();
     const playerEvents = [
+        { event: PlayerEvent.Ready, name: 'load_complete' },
         { event: PlayerEvent.Paused, name: 'pause' },
+        { event: PlayerEvent.Play, handler: handlePlay },
         { event: PlayerEvent.SourceLoaded, handler: handleSourceLoaded },
-        { event: PlayerEvent.Ready, name: 'load_complete' },
         { event: PlayerEvent.StallStarted, name: 'buffering' },
         { event: PlayerEvent.StallEnded, name: 'buffering_complete' },
         { event: PlayerEvent.PlaybackFinished, name: 'complete' },
-        { event: PlayerEvent.TimeChanged, name: 'time' },
         { event: PlayerEvent.SourceUnloaded, name: 'stop' },
+        { event: PlayerEvent.Seek, handler: seekHandler },
+        { event: PlayerEvent.TimeShift, handler: seekHandler },
+        { event: PlayerEvent.TimeChanged, handler: handleTime },
+        { event: PlayerEvent.ViewModeChanged, handler: handleViewModeChange },
     ];
     playerEvents.forEach(({ event, name, handler }) => {
-        handler = handler || logEventHandler(name);
-        logEventHandlers.set(event, handler);
-        player.on(event, handler);
+        const effectiveName = name || 'unnamed_event';
+        const eventHandler = handler || logEventHandler(effectiveName);
+        logEventHandlers.set(event, eventHandler);
+        player.on(event, eventHandler);
     });
-    logEventHandlers.set(PlayerEvent.Seek, seekHandler);
-    player.on(PlayerEvent.Seek, seekHandler);
-    logEventHandlers.set(PlayerEvent.TimeShift, seekHandler);
-    player.on(PlayerEvent.TimeShift, seekHandler);
-    logEventHandlers.set(PlayerEvent.Play, handlePlay);
-    player.on(PlayerEvent.Play, handlePlay);
-    logEventHandlers.set(PlayerEvent.Playing, handlePlaying);
-    player.on(PlayerEvent.Playing, handlePlaying);
-    logEventHandlers.set(PlayerEvent.ViewModeChanged, handleViewModeChange);
-    player.on(PlayerEvent.ViewModeChanged, handleViewModeChange);
+    if (npoplayer.streamObject.assets.preroll === null) {
+        logEventHandlers.set(PlayerEvent.Playing, handlePlaying);
+        player.on(PlayerEvent.Playing, handlePlaying);
+    }
     logEventHandlers.set('beforeunload', stopBeforeUnload);
     window.addEventListener('beforeunload', stopBeforeUnload);
 }

package/lib/js/tracking/handlers/eventlogging.d.ts

@@ -1,2 +1,2 @@
-import NpoPlayer from "../../../npoplayer";
+import NpoPlayer from '../../../npoplayer';
 export declare function logEvent(npoplayer: NpoPlayer, event: string, data?: any): void;

package/lib/js/tracking/handlers/eventlogging.js

@@ -26,6 +26,6 @@ export function logEvent(npoplayer, event, data) {
         }
     };
     const streamTrackerHandler = eventHandlers[event];
-    npoplayer.logEmitter.emit('logEvent', event);
+    npoplayer.logEmitter.emit('logEvent', event, data);
     streamTrackerHandler(streamOptions);
 }

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

@@ -38,8 +38,8 @@ export function createForwardButton(player) {
 export function createPlayNextButton(player, npoplayer) {
     const playNextButton = new Button({
         cssClass: 'ui-textbutton ui-playNextButton bmpui-ui-button',
-        text: 'Volgende aflevering over <span class="countdown"></span>…',
-        ariaLabel: 'Speel volgende aflevering af',
+        text: '<span class="bmpui-ui-textbutton-icon bmpui-ui-textbutton-icon-play"></span> Volgende aflevering',
+        ariaLabel: 'Volgende aflevering',
         hidden: false
     });
     playNextButton.onClick.subscribe(() => {

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

@@ -1,18 +1,6 @@
 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(player: PlayerAPI): Button<{
-    cssClass: string;
-    text: string;
-    ariaLabel: string;
-    hidden: false;
-}>;
-export declare function createCancelPlayNextButton(player: PlayerAPI): Button<{
-    cssClass: string;
-    text: string;
-    ariaLabel: string;
-    hidden: false;
-}>;
 export declare function createWatchFromStartButton(): Button<{
     cssClass: string;
     text: string;

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

@@ -3,7 +3,6 @@ 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'
@@ -30,46 +29,6 @@ export function createMiddleButtons(player) {
         cssClasses: ['controlbar-middle']
     });
 }
-export function createPlayNextButton(player) {
-    const playNextButton = new Button({
-        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.PLAY_NEXT_PROCEED_CLICK);
-        hidePlayNextScreen(container, true);
-    };
-    playNextButton.onClick.subscribe(() => {
-        playNextButtonClickHandler();
-    });
-    playNextButton.onClick.unsubscribe(() => {
-        playNextButtonClickHandler();
-    });
-    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/handlers/domhandlers.test.js

@@ -28,7 +28,8 @@ describe('handleLiveStreamNoDvr', () => {
                 scrubbingThumbnail: "",
                 subtitles: null,
                 preroll: ""
-            }
+            },
+            user: { type: 'anonymous' }
         };
         mockContainer = document.createElement('div');
         mockPlayerElement = document.createElement('div');

package/lib/{src/js/ui/components/shared → js/ui/handlers}/playnextscreen.d.ts

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

package/lib/js/ui/handlers/playnextscreen.js

@@ -0,0 +1,26 @@
+let countdownInterval = null;
+export function showPlayNextScreenIfNeeded(overlayDuration, containerEl, proceedCallBack) {
+    const playnextOverlay = containerEl.querySelector('.bmpui-overlay-playnext');
+    if (playnextOverlay?.classList.contains('show'))
+        return;
+    playnextOverlay?.classList.add('show');
+    const playNextButton = playnextOverlay?.querySelector('.ui-playNextButton');
+    if (playNextButton) {
+        playNextButton.style.setProperty('--animation-duration', `${overlayDuration}s`);
+        playNextButton.focus();
+    }
+    let countdown = overlayDuration - 1;
+    countdownInterval = window.setInterval(() => {
+        if (playnextOverlay?.classList.contains('show')) {
+            countdown--;
+            if (countdown < 0) {
+                clearInterval(countdownInterval);
+                proceedCallBack?.();
+                playnextOverlay?.classList.remove('show');
+            }
+        }
+    }, 1000);
+}
+export function hidePlayNextScreen(containerEl) {
+    containerEl.querySelector('.bmpui-overlay-playnext')?.classList.remove('show');
+}

package/lib/js/ui/{components/shared → handlers}/playnextstreen.test.js

@@ -1,7 +1,6 @@
 import { showPlayNextScreenIfNeeded } from './playnextscreen';
-import { sendCustomMessage } from '../../nativemobileuicontainer';
-import { CustomMessages } from '../../../../types/interfaces';
-jest.mock('../../nativemobileuicontainer');
+import { sendCustomMessage } from '../nativemobileuicontainer';
+jest.mock('../nativemobileuicontainer');
 describe('showPlayNextScreenIfNeeded', () => {
     let containerEl;
     let playnextOverlay;
@@ -27,30 +26,21 @@ describe('showPlayNextScreenIfNeeded', () => {
     });
     it('should not show overlay if it is already shown', () => {
         playnextOverlay.classList.add('show');
-        showPlayNextScreenIfNeeded(10, containerEl, proceedCallBack, false);
+        showPlayNextScreenIfNeeded(10, containerEl, proceedCallBack);
         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);
+        showPlayNextScreenIfNeeded(10, containerEl, proceedCallBack);
         expect(playnextOverlay.classList.contains('show')).toBe(true);
-        expect(countdownLabel.innerHTML).toBe('10');
-        jest.advanceTimersByTime(1000);
-        expect(countdownLabel.innerHTML).toBe('9');
+        expect(playNextButton.style.getPropertyValue('--animation-duration')).toBe('10s');
     });
     it('should call proceedCallBack and hide overlay when countdown finishes', () => {
         jest.useFakeTimers();
-        showPlayNextScreenIfNeeded(1, containerEl, proceedCallBack, false);
+        showPlayNextScreenIfNeeded(1, containerEl, proceedCallBack);
         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/nativemobileuicontainer.js

@@ -1,5 +1,4 @@
 import { BufferingOverlay, CastStatusOverlay, ErrorMessageOverlay, PlaybackToggleOverlay, PlayerUtils, SubtitleOverlay, UIContainer, } from 'bitmovin-player-ui';
-import { createPlayNextScreen } from './components/nativemobile/playnext';
 import { createCTABar } from './components/nativemobile/ctabar';
 import { createControlBar } from './components/nativemobile/controlbar';
 import { createTopBar } from './components/nativemobile/topbar';
@@ -24,7 +23,6 @@ export function sendCustomMessage(message, data) {
 }
 export function nativeMobileUIContainer(player) {
     const middleButtons = createMiddleButtons(player);
-    const playNextScreen = createPlayNextScreen(player);
     const settingsPanel = createSettingsPanel(player);
     const ctaBar = createCTABar(player);
     const topBar = createTopBar(player, settingsPanel);
@@ -38,13 +36,12 @@ export function nativeMobileUIContainer(player) {
             new CastStatusOverlay(),
             middleButtons,
             controlBar,
-            playNextScreen,
             ctaBar,
             topBar,
             createTitleBar(),
             errorMessageOverlay
         ],
         cssClasses: ['npo-player', 'native-mobile'],
-        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused],
+        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Finished],
     });
 }