@npo/player 1.20.3 → 1.21.0

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

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

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

@@ -0,0 +1,49 @@
+import { handleLiveStreamNoDvr } from "./domhandlers";
+jest.mock("../../utilities/utilities", () => ({
+    getPlayerElement: jest.fn(),
+}));
+const { getPlayerElement } = require("../../utilities/utilities");
+describe('handleLiveStreamNoDvr', () => {
+    let mockPlayer;
+    let mockStreamObject;
+    let mockContainer;
+    let mockPlayerElement;
+    beforeEach(() => {
+        mockPlayer = {};
+        mockStreamObject = {
+            stream: {
+                isLiveStream: false,
+                hasDvrWindow: true,
+                avType: "",
+                drmType: "",
+                streamProfile: "",
+                sourceProfile: "",
+                streamURL: ""
+            },
+            metadata: {
+                description: "",
+                title: ""
+            },
+            assets: {
+                scrubbingThumbnail: "",
+                subtitles: null,
+                preroll: ""
+            }
+        };
+        mockContainer = document.createElement('div');
+        mockPlayerElement = document.createElement('div');
+        getPlayerElement.mockReturnValue(mockPlayerElement);
+    });
+    it('should add "livestream-no-dvr" class when isLiveStream is true and hasDvrWindow is false', () => {
+        mockStreamObject.stream.isLiveStream = true;
+        mockStreamObject.stream.hasDvrWindow = false;
+        handleLiveStreamNoDvr(mockPlayer, mockStreamObject, mockContainer);
+        expect(mockPlayerElement.classList.contains('livestream-no-dvr')).toBe(true);
+    });
+    it('should remove "livestream-no-dvr" class when isLiveStream is false or hasDvrWindow is true', () => {
+        mockStreamObject.stream.isLiveStream = false;
+        mockStreamObject.stream.hasDvrWindow = true;
+        handleLiveStreamNoDvr(mockPlayer, mockStreamObject, mockContainer);
+        expect(mockPlayerElement.classList.contains('livestream-no-dvr')).toBe(false);
+    });
+});

package/lib/js/ui/handlers/nicamhandler.js

@@ -33,7 +33,7 @@ export function showNicamAfterUiDelay(player, uiManager) {
     if (!playerContainer)
         return;
     uiManager.activeUi.onControlsHide.subscribeOnce(() => {
-        const className = 'show-nicam';
+        const className = 'bmpui-show-nicam';
         playerContainer.classList.add(className);
         setTimeout(() => {
             playerContainer.classList.remove(className);

package/lib/js/ui/handlers/streamhandler.js

@@ -16,15 +16,15 @@ export function processStream(streamObject, container, streamOptions, player, ui
     }
     else {
         setFragments(player, uiManager, { sections: [] });
-        const element = container.querySelector('.bmpui-seekbar-label-title');
-        if (element !== null) {
-            element.textContent = sourceConfig.title || '';
+        const seekbarTitle = container.querySelector('.bmpui-seekbar-label-title');
+        if (seekbarTitle !== null) {
+            seekbarTitle.textContent = sourceConfig.title || '';
         }
     }
     processNicam(streamObject, container.querySelector('.bmpui-nicam'), streamOptions);
     if (streamOptions?.startOffset != null)
         playerAction.handleStartOffset(player, streamOptions.startOffset);
-    const isLiveStreamNoDvr = streamObject.stream.isLiveStream && !streamObject.stream.hasDvrWindow;
+    const isLiveStreamNoDvr = streamObject.stream.isLiveStream && streamObject.stream.hasDvrWindow === false;
     if (isLiveStreamNoDvr) {
         container.querySelector('.bmpui-npo-player')?.classList.add('livestream-no-dvr');
     }

package/lib/js/ui/nativemobileuicontainer.js

@@ -1,4 +1,4 @@
-import { BufferingOverlay, CastStatusOverlay, ErrorMessageOverlay, PlaybackToggleOverlay, SubtitleOverlay, UIContainer, } from 'bitmovin-player-ui';
+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';
@@ -10,7 +10,6 @@ const defaultData = {
     defaultActionRequired: true,
 };
 export function sendCustomMessage(message, data) {
-    console.log('sendCustomMessage', message, data);
     try {
         if (data !== undefined) {
             return JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message, JSON.stringify(data)));
@@ -25,7 +24,7 @@ export function sendCustomMessage(message, data) {
 }
 export function nativeMobileUIContainer(player) {
     const middleButtons = createMiddleButtons(player);
-    const playNextScreen = createPlayNextScreen();
+    const playNextScreen = createPlayNextScreen(player);
     const settingsPanel = createSettingsPanel(player);
     const ctaBar = createCTABar(player);
     const topBar = createTopBar(player, settingsPanel);
@@ -35,16 +34,17 @@ export function nativeMobileUIContainer(player) {
         components: [
             new SubtitleOverlay(),
             new BufferingOverlay(),
-            new PlaybackToggleOverlay({ id: 'native-mobile-playbacktoggleoverlay' }),
+            new PlaybackToggleOverlay(),
             new CastStatusOverlay(),
-            playNextScreen,
             middleButtons,
             controlBar,
+            playNextScreen,
             ctaBar,
             topBar,
             createTitleBar(),
             errorMessageOverlay
         ],
         cssClasses: ['npo-player', 'native-mobile'],
+        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused],
     });
 }

package/lib/js/ui/nativemobileuifactory.js

@@ -7,81 +7,121 @@ import { addFragments } from '../ui/components/nativemobile/addFragments';
 import { CustomMessages } from '../../types/interfaces';
 import { processNicam } from './handlers/nicamhandler';
 import { removeFragments } from '../fragments/removefragments';
+import { showPlayNextScreenIfNeeded } from './components/shared/playnextscreen';
+import { getPlayerElement, removePlayerElementClass } from '../utilities/utilities';
+import { handleLiveStreamNoDvr } from './handlers/domhandlers';
 export function nativeMobileUiFactory(player, config = {}) {
     UIManager.setLocalizationConfig(localizationConfig);
+    const containerElement = getPlayerElement(player, '.bmpui-npo-player');
+    const nicamElement = getPlayerElement(player, '.bmpui-nicam');
+    const seekbarTitleElement = getPlayerElement(player, '.bmpui-seekbar-label-title');
+    let adBreakActive = false;
     const uiConfig = {
         ...config,
         errorMessages: customSpecificErrorMessageOverlayConfig,
         disableAutoHideWhenHovered: true,
     };
     const mobileUIManager = new UIManager(player, nativeMobileUIContainer(player), uiConfig);
-    let _streamObject = {};
+    let _webData = {};
     const removeFinishedClass = () => {
         player.off(PlayerEvent.Seeked, removeFinishedClass);
-        const playerFinishedElement = player.getContainer().querySelector('.bmpui-npo-player.bmpui-player-state-finished');
-        if (playerFinishedElement) {
-            playerFinishedElement.classList.remove('bmpui-player-state-finished');
-        }
+        removePlayerElementClass(player, '.bmpui-npo-player.bmpui-player-state-finished', 'bmpui-player-state-finished');
     };
     const clearUI = () => {
-        const nicamElement = player.getContainer().querySelector('.bmpui-nicam');
-        if (nicamElement) {
+        adBreakActive = false;
+        if (nicamElement)
             nicamElement.innerHTML = '';
-        }
-        player.getContainer().querySelector('.bmpui-npo-player')?.classList.remove('livestream-no-dvr');
-        const element = player.getContainer().querySelector('.bmpui-seekbar-label-title');
-        if (element) {
-            element.textContent = '';
-        }
+        if (seekbarTitleElement)
+            seekbarTitleElement.textContent = '';
+        removePlayerElementClass(player, '.bmpui-npo-player', 'livestream-no-dvr');
+        player.off(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
         removeFragments(mobileUIManager);
     };
     const updateUI = () => {
-        if (_streamObject.metadata?.ageRating) {
-            processNicam(_streamObject, player.getContainer().querySelector('.bmpui-nicam'), null);
-        }
-        const isLiveStreamNoDvr = _streamObject.stream?.isLiveStream && !_streamObject.stream?.hasDvrWindow;
-        if (isLiveStreamNoDvr) {
-            player.getContainer().querySelector('.bmpui-npo-player')?.classList.add('livestream-no-dvr');
+        if (_webData.assets.preroll) {
+            adBreakActive = true;
+            player.on(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
         }
-        if (_streamObject.segment) {
-            const seg = _streamObject.segment;
-            const section = {
-                start: seg.inpoint,
-                end: seg.outpoint,
-                title: _streamObject?.title || '',
-            };
-            addFragments(player, mobileUIManager, section);
+        if (_webData.metadata?.ageRating)
+            processNicam(_webData, nicamElement, null);
+        if (seekbarTitleElement)
+            seekbarTitleElement.textContent = _webData.title || '';
+        handleLiveStreamNoDvr(player, _webData, containerElement);
+        if (_webData.playNext?.showPlayNext) {
+            player.on(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
         }
-        else {
-            addFragments(player, mobileUIManager, null);
-        }
-        const element = player.getContainer().querySelector('.bmpui-seekbar-label-title');
-        if (element) {
-            element.textContent = _streamObject.title || '';
+        const section = _webData.segment ? {
+            start: _webData.segment.inpoint,
+            end: _webData.segment.outpoint,
+            title: _webData?.title || '',
+        } : null;
+        addFragments(player, mobileUIManager, section);
+    };
+    const setAdBreakActiveToFalse = () => {
+        adBreakActive = false;
+        player.off(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
+    };
+    const handleShowPlayNextScreen = () => {
+        let contentDuration = player.getDuration();
+        let playnextOffset = _webData.playNext.offset;
+        const container = player.getContainer();
+        if (player.getCurrentTime() >= contentDuration - playnextOffset && !adBreakActive) {
+            showPlayNextScreenIfNeeded(_webData.playNext.duration, container, undefined, true);
+            player.off(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
         }
     };
     if (window.bitmovin?.customMessageHandler) {
-        window.bitmovin.customMessageHandler.on(CustomMessages.SET_STREAM_LINK, (data) => {
+        const handleData = (data) => {
             clearUI();
             if (data) {
-                _streamObject = JSON.parse(data);
+                _webData = JSON.parse(data);
                 updateUI();
             }
+        };
+        window.bitmovin.customMessageHandler.on(CustomMessages.SET_STREAM_LINK, handleData);
+        window.bitmovin.customMessageHandler.on(CustomMessages.SET_WEB_DATA, handleData);
+        if (_webData.playNext?.showPlayNext === true) {
+            player.on(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
+        }
+        window.bitmovin.customMessageHandler.on(CustomMessages.DO_ERROR, (data) => {
+            if (!data)
+                return;
+            const messageData = JSON.parse(data);
+            if (messageData.errorMessage) {
+                doError(messageData.errorMessage);
+            }
         });
     }
     const addEventListeners = () => {
         player.off(PlayerEvent.Ready, addEventListeners);
         sendCustomMessage(CustomMessages.JAVASCRIPT_READY);
-        const playbackToggleElement = player.getContainer().querySelector('#native-mobile-playbacktoggleoverlay');
-        if (playbackToggleElement) {
-            playbackToggleElement.addEventListener('touchend', (event) => {
-                event.preventDefault();
-                player?.play();
-                sendCustomMessage(CustomMessages.TOGGLE_PLAY_PAUSE, { isChecked: true });
-            });
+    };
+    const doError = (data) => {
+        window.bitmovin.customMessageHandler.off(CustomMessages.DO_ERROR, data.toString());
+        const input = data.input;
+        if (input) {
+            const uiComponents = mobileUIManager.activeUi.getUI().getComponents();
+            const errorMessageOverlay = uiComponents.find(component => component.getConfig().cssClass === 'ui-errormessage-overlay');
+            if (!errorMessageOverlay)
+                return;
+            try {
+                errorMessageOverlay.display(input);
+            }
+            catch {
+                return;
+            }
         }
     };
+    const onPlayerError = (event) => {
+        player.off(PlayerEvent.Error, (event) => {
+            onPlayerError(event);
+        });
+        sendCustomMessage(CustomMessages.ERROR_TRIGGERED, { error: event });
+    };
     player.on(PlayerEvent.Seeked, removeFinishedClass);
     player.on(PlayerEvent.Ready, addEventListeners);
+    player.on(PlayerEvent.Error, (event) => {
+        onPlayerError(event);
+    });
     return mobileUIManager;
 }

package/lib/js/ui/nativemobileuifactory.test.d.ts

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

package/lib/js/ui/nativemobileuifactory.test.js

@@ -0,0 +1,66 @@
+import { nativeMobileUiFactory } from './nativemobileuifactory';
+import { CustomMessages } from '../../types/interfaces';
+const title = 'Test Stream';
+let storedCallbacks = {};
+jest.mock('bitmovin-player-ui', () => {
+    return jest.requireActual('../../../tests/mocks/mockPlayerUi').mockPlayerUi;
+});
+describe('nativeMobileUiFactory', () => {
+    let mockPlayer;
+    let containerElement;
+    beforeEach(() => {
+        containerElement = document.createElement('div');
+        const wrapperElement = document.createElement('div');
+        wrapperElement.className = 'bmpui-npo-player';
+        containerElement.appendChild(wrapperElement);
+        const seekbarTitleElement = document.createElement('div');
+        seekbarTitleElement.className = 'bmpui-seekbar-label-title';
+        wrapperElement.appendChild(seekbarTitleElement);
+        const nicamElement = document.createElement('div');
+        nicamElement.className = 'bmpui-nicam';
+        wrapperElement.appendChild(nicamElement);
+        mockPlayer = {
+            on: jest.fn(),
+            off: jest.fn(),
+            getContainer: () => containerElement,
+            getVolume: jest.fn().mockReturnValue(50),
+        };
+        storedCallbacks = {};
+        if (storedCallbacks) {
+            window.bitmovin = window.bitmovin || {};
+            window.bitmovin.customMessageHandler = {
+                on: jest.fn((messageType, callbackFn) => {
+                    storedCallbacks[messageType] = callbackFn;
+                }),
+            };
+        }
+        nativeMobileUiFactory(mockPlayer);
+    });
+    test('should update the DOM correctly when sendSynchronous is called with setstreamlink', () => {
+        const mockData = {
+            title: title,
+            metadata: {
+                ageRating: '12',
+                nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK'],
+            },
+            stream: {
+                isLiveStream: true,
+                hasDvrWindow: false
+            },
+            assets: {
+                preroll: null,
+            }
+        };
+        if (storedCallbacks[CustomMessages.SET_STREAM_LINK]) {
+            storedCallbacks[CustomMessages.SET_STREAM_LINK](JSON.stringify(mockData));
+        }
+        const container = mockPlayer.getContainer();
+        expect(container.querySelector('.bmpui-nicam')?.innerHTML).not.toBe('');
+        expect(container.querySelector('.bmpui-seekbar-label-title')?.textContent).toBe(title);
+        expect(container.querySelector('.bmpui-npo-player')?.classList.contains('livestream-no-dvr')).toBeTruthy();
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+        document.body.innerHTML = '';
+    });
+});

package/lib/js/ui/uicontainer.js

@@ -1,4 +1,4 @@
-import { UIContainer, PlaybackToggleOverlay, BufferingOverlay, CastStatusOverlay, SubtitleOverlay, ErrorMessageOverlay, UIManager, PlaybackToggleButton } from 'bitmovin-player-ui';
+import { UIContainer, PlaybackToggleOverlay, BufferingOverlay, CastStatusOverlay, SubtitleOverlay, ErrorMessageOverlay, UIManager, PlaybackToggleButton, PlayerUtils } from 'bitmovin-player-ui';
 import { createMiddleButtons } from './components/buttons';
 import { createPlayNextScreen } from './components/playnext';
 import { createSettingsPanel } from './components/settingspanel';
@@ -45,7 +45,6 @@ export function createUIContainer(npoplayer, player, variant, container) {
         bufferingOverlay,
         playbackToggleOverlay,
         new CastStatusOverlay(),
-        playNextScreen,
         middleButtons,
     ];
     const baseComponentsAfter = [
@@ -54,6 +53,7 @@ export function createUIContainer(npoplayer, player, variant, container) {
     let conditionalComponents = [];
     if (variant === NpoPlayerUIVariants.DEFAULT) {
         conditionalComponents.push(...baseComponentsBefore);
+        conditionalComponents.push(playNextScreen);
         conditionalComponents.push(controlBar);
         conditionalComponents.push(ctaBar);
         conditionalComponents.push(titleBar);
@@ -74,7 +74,8 @@ export function createUIContainer(npoplayer, player, variant, container) {
         components: [...conditionalComponents, ...baseComponentsAfter],
         cssClasses: cssClassArray,
         ariaLabel: localize('player'),
-        hideDelay: uiDelay
+        hideDelay: uiDelay,
+        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused],
     });
 }
 export function removeUIContainer(container) {

package/lib/js/utilities/utilities.d.ts

@@ -1,3 +1,4 @@
+import { PlayerAPI } from 'bitmovin-player';
 import { type LocalizableText } from 'bitmovin-player-ui/dist/js/framework/localization/i18n';
 export declare const jwtToBase64: (jwt: string) => string;
 export declare const base64ToObject: (base64: string) => Record<string, any>;
@@ -11,3 +12,5 @@ export declare function getModuleExport(module: unknown): unknown;
 export declare function isUrl(url: string): boolean;
 export declare function isMediaUrl(url: string): Promise<boolean>;
 export declare function replaceSpecialChars(text: string): string;
+export declare function getPlayerElement(player: PlayerAPI, query: string): Element | null;
+export declare function removePlayerElementClass(player: PlayerAPI, query: string, className: string): void;

package/lib/js/utilities/utilities.js

@@ -67,3 +67,12 @@ export async function isMediaUrl(url) {
 export function replaceSpecialChars(text) {
     return text.replace(/['()*]/g, (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`);
 }
+export function getPlayerElement(player, query) {
+    return player.getContainer().querySelector(query);
+}
+export function removePlayerElementClass(player, query, className) {
+    const element = getPlayerElement(player, query);
+    if (element) {
+        element.classList.remove(className);
+    }
+}

package/lib/lang/nl.json

@@ -37,7 +37,7 @@
     "settings.subtitles.font.family.smallcapital": "small capital",
     "settings.time.hours": "Uren",
     "settings.time.minutes": "Minuten",
-    "settings.time.seconds": "Secondes",
+    "settings.time.seconds": "Seconden",
     "ads.remainingTime": "De advertentie duurt nog {remainingTime} seconden.",
     "settings": "Instellingen",
     "fullscreen": "Volledig scherm",

package/lib/npoplayer-bridge.test.d.ts

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

package/lib/npoplayer-bridge.test.js

@@ -0,0 +1,23 @@
+jest.mock('./js/ui/nativemobileuifactory', () => ({
+    nativeMobileUiFactory: jest.fn(),
+}));
+const { nativeMobileUiFactory } = require('./js/ui/nativemobileuifactory');
+beforeAll(() => {
+    window.bitmovin = {};
+    window.bitmovin.playerui = () => { };
+    window.bitmovin.playerui.UIFactory = {
+        buildDefaultSmallScreenUI: (player, config = {}) => {
+            return nativeMobileUiFactory(player, config);
+        },
+    };
+});
+beforeEach(() => {
+    jest.clearAllMocks();
+});
+test('Bridge initation: nativeMobileUiFactory is called with correct arguments for building the default small screen UI', () => {
+    const mockPlayer = {};
+    const mockConfig = {};
+    window.bitmovin.playerui.UIFactory.buildDefaultSmallScreenUI(mockPlayer, mockConfig);
+    expect(nativeMobileUiFactory).toHaveBeenCalledWith(mockPlayer, mockConfig);
+});
+export {};

package/lib/npoplayer.d.ts

@@ -3,7 +3,7 @@ import { type InitialisationProps } from '@npotag/tag/dist/types/src/npoTag';
 import { type PlayerAPI, type PlayerConfig, type SourceConfig } from 'bitmovin-player';
 import { UIManager } from 'bitmovin-player-ui';
 import { LogEmitter } from './types/classes';
-import { type DRMProfile, type ApiPayload, type NPOTagObject, type Section, type StreamObject, type StreamOptions, type UIComponents, NpoPlayerUIVariants } from './types/interfaces';
+import { type DRMProfile, type ApiPayload, type NPOTagObject, type Section, type StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, NpoPlayerUIVariants } from './types/interfaces';
 export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants, };
 export default class NpoPlayer {
     playerConfig: PlayerConfig;
@@ -41,6 +41,7 @@ export default class NpoPlayer {
     goBackwards(seconds: number): void;
     watchFromStart(): void;
     showPlayNextScreen(): void;
+    updateMarkers(timeLineMarkers: TimeLineMarker[]): void;
     cancelPlayNextScreen(): void;
     hidePlayNextScreen(): void;
     doPlayNext(): void;

package/lib/npoplayer.js

@@ -1,7 +1,7 @@
 import { Player, PlayerEvent, } from 'bitmovin-player';
 import AdsModuleBM from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
 import { logEvent, initPlayerTracker, startPlayerTracker } from './js/tracking/playertracker';
-import { hidePlayNextScreen, showPlayNextScreen } from './js/ui/components/shared/playnextscreen';
+import { hidePlayNextScreen, showPlayNextScreenIfNeeded } from './js/ui/components/shared/playnextscreen';
 import * as utility from './js/utilities/utilities';
 import * as drm from './js/drm/drm';
 import * as playerAction from './js/playeractions/playeractions';
@@ -20,6 +20,7 @@ import { setupMediaSessionActionHandlers } from './js/playeractions/handlers/med
 import { processStream } from './js/ui/handlers/streamhandler';
 import { removeReplayClass } from './js/playeractions/handlers/removereplayclass';
 import { showNicamAfterUiDelay } from './js/ui/handlers/nicamhandler';
+import { updateLiveMarkers } from './js/markers/updateLiveMarkers';
 export { NpoPlayerUIVariants, };
 export default class NpoPlayer {
     constructor(_container, _playerConfig, _npotag, _npotaginstance, _variant) {
@@ -129,7 +130,7 @@ export default class NpoPlayer {
             if (this.streamObject?.stream == undefined)
                 return;
             const drmType = this.streamObject.stream.drmType ?? null;
-            this.sourceConfig = playerAction.processSourceConfig(options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : null);
+            this.sourceConfig = await playerAction.processSourceConfig(options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : null, this.streamOptions.useWidevineServerCertificate ?? true);
             await drm.verifyDRM(this, this.player, payload);
             setupMediaSessionActionHandlers(this.player, this.sourceConfig, _streamObject);
             logEvent(this, 'load');
@@ -152,6 +153,8 @@ export default class NpoPlayer {
             this.player?.off(PlayerEvent.SourceLoaded, triggerAddAccessibilityAttributes);
             this.player?.off(PlayerEvent.AdBreakFinished, triggerAddAccessibilityAttributes);
             this.player?.off(PlayerEvent.AdError, triggerAddAccessibilityAttributes);
+            if (this.streamOptions.enableSubtitles === true)
+                this.player?.subtitles.enable('sub0');
             void addAccessibilityAttributes(this.container, this.streamObject.metadata);
         };
         this.player.on(PlayerEvent.SourceLoaded, triggerAddAccessibilityAttributes);
@@ -182,7 +185,7 @@ export default class NpoPlayer {
             this.player.off(PlayerEvent.SourceLoaded, setLiveOffsetListener);
             playerAction.handleLiveOffsetLogic(this, this.player, options);
         }.bind(this);
-        this.player.on(PlayerEvent.SourceLoaded, setLiveOffsetListener);
+        this.player.on(PlayerEvent.Ready, setLiveOffsetListener);
     }
     async createUIManager(player, variant) {
         if (this.uiManager === null || variant !== this.variant) {
@@ -274,13 +277,19 @@ export default class NpoPlayer {
         const showPlayNextAt = videoDuration - offset;
         if (!this.isShowingPlayNextScreen && this.player.getCurrentTime() > showPlayNextAt && !this.canceledPlayNextScreen) {
             this.isShowingPlayNextScreen = true;
-            showPlayNextScreen(overlayDuration, this.container, this.streamOptions.playNext?.proceedCallback);
+            showPlayNextScreenIfNeeded(overlayDuration, this.container, this.streamOptions.playNext?.proceedCallback);
         }
         else if (this.isShowingPlayNextScreen && this.player.getCurrentTime() < showPlayNextAt) {
             this.isShowingPlayNextScreen = false;
             hidePlayNextScreen(this.container);
         }
     }
+    updateMarkers(timeLineMarkers) {
+        if (!(this.player && this.uiManager && this.streamObject.stream.isLiveStream))
+            return;
+        updateLiveMarkers(timeLineMarkers, this.player, this.uiManager);
+    }
+    ;
     cancelPlayNextScreen() {
         this.canceledPlayNextScreen = true;
         this.hidePlayNextScreen();

package/lib/npoplayer.test.js

@@ -1,13 +1,13 @@
-import NpoPlayer from "./npoplayer";
-const div = document.createElement("div");
+import NpoPlayer from './npoplayer';
+const div = document.createElement('div');
 const testPlayerConfig = {
-    key: "D634EA2C-BFE7-4BB6-9EAA-CDCC7B1EDFFA",
+    key: 'dummy-key',
 };
 jest.mock('./js/ui/handlers/streamhandler', () => ({
     processStream: jest.fn(),
 }));
 let player;
-test("player init", async () => {
+test('player init', async () => {
     player = new NpoPlayer(div, testPlayerConfig);
     expect(player).toBeInstanceOf(NpoPlayer);
     expect(player.playerConfig.key).toBe(testPlayerConfig.key);

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.20.3",
+  "version": "1.21.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -25,7 +25,8 @@
     "build:ts": "bash build-lib.sh",
     "test": "jest",
     "test:ci": "jest --collectCoverage --testResultsProcessor=jest-sonar-reporter",
-    "version:dev": "npm version prerelease --preid=dev --no-git-tag-version"
+    "version:dev": "npm version prerelease --preid=dev --no-git-tag-version",
+    "prepublishOnly": "aws codeartifact login --tool npm --namespace @npo-player --repository npo-player --domain npoplayer $([ -z \"$TF_BUILD\" ] && echo \" --profile codeartifact\")"
   },
   "files": [
     "LICENSE",

package/lib/src/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/src/js/markers/updateLiveMarkers.test.d.ts

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

package/lib/src/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/src/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): SourceConfig;
+export declare function processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | null | undefined, useWidevineServerCertificate: boolean): Promise<SourceConfig>;

package/lib/src/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/src/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/src/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/src/js/ui/components/shared/playnextstreen.test.d.ts

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

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

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