@npo/player 1.25.0 → 1.27.0

package/lib/services/a11y/setup.test.js

@@ -31,20 +31,16 @@ describe('setupAccessibilityAttributes', () => {
         };
         playerContext = {
             player: mockPlayerAPI,
-            npoplayer: {
+            npoPlayer: {
                 ...mockNpoPlayer,
                 streamOptions: {
                     enableSubtitles: false
                 },
-                userPreferences: {
-                    subtitles_enabled: 'false'
-                },
                 container: document.createElement('div'),
                 streamObject: {},
                 playerConfig: {},
                 initPlayer: () => { },
                 loadStream: () => Promise.resolve(),
-                doError: () => { },
                 play: async () => { },
                 pause: () => { },
                 setVolume: () => { },
@@ -69,20 +65,6 @@ describe('setupAccessibilityAttributes', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
-    it('should enable subtitles if playerContext.npoplayer.userPreferences.subtitles_enabled is "true"', () => {
-        playerContext.npoplayer.userPreferences.subtitles_enabled = 'true';
-        setupAccessibilityAttributes(playerContext);
-        const triggerFunction = mockAddEventListener.mock.calls[0][1];
-        triggerFunction();
-        expect(mockEnableSubtitles).toHaveBeenCalled();
-    });
-    it('should enable subtitles if streamOptions.enableSubtitles is true', () => {
-        playerContext.npoplayer.streamOptions.enableSubtitles = true;
-        setupAccessibilityAttributes(playerContext);
-        const triggerFunction = mockAddEventListener.mock.calls[0][1];
-        triggerFunction();
-        expect(mockEnableSubtitles).toHaveBeenCalled();
-    });
     it('should set up event listeners for specified events', () => {
         setupAccessibilityAttributes(playerContext);
         expect(mockAddEventListener).toHaveBeenCalledTimes(3);
@@ -103,6 +85,6 @@ describe('setupAccessibilityAttributes', () => {
         setupAccessibilityAttributes(playerContext);
         const triggerFunction = mockAddEventListener.mock.calls[0][1];
         triggerFunction();
-        expect(addAccessibilityAttributes).toHaveBeenCalledWith(playerContext.npoplayer.container, playerContext.npoplayer.streamObject.metadata);
+        expect(addAccessibilityAttributes).toHaveBeenCalledWith(playerContext.npoPlayer.container, playerContext.npoPlayer.streamObject.metadata);
     });
 });

package/lib/services/advertHandlers/discardAdBreak.js

@@ -1,11 +1,13 @@
+import { NpoPlayerUIVariants } from '../../types/interfaces';
 export function discardAdBreak(playerContext) {
-    const { npoplayer, player } = playerContext;
-    const { adBreakActive } = npoplayer;
+    const { npoPlayer, player } = playerContext;
+    const { adBreakActive } = npoPlayer;
     if (!player || adBreakActive === false)
         return;
+    void playerContext.player.createUIManager(playerContext, NpoPlayerUIVariants.DEFAULT);
     const activeAdBreak = player.getActiveAdBreak();
     if (activeAdBreak?.id) {
-        player.discardAdBreak(activeAdBreak.id);
+        player.playerAPI.ads.discardAdBreak(activeAdBreak.id);
     }
-    npoplayer.adBreakActive = false;
+    npoPlayer.adBreakActive = false;
 }

package/lib/services/advertHandlers/discardAdBreak.test.js

@@ -1,60 +1,77 @@
 import createPlayerContextMock, { createMockNpoPlayer, createMockNpoPlayerAPI } from '../../../tests/mocks/playerContextMock';
+import { NpoPlayerUIVariants } from '../../types/interfaces';
 import { discardAdBreak } from './discardAdBreak';
 describe('discardAdBreak', () => {
     let mockNpoPlayerAPI;
-    let npoplayerMock;
+    let npoPlayerMock;
     const activeAdBreakMock = { id: 'ad-break-id' };
     afterEach(() => {
         jest.resetAllMocks();
     });
+    it('should not discard ad break if player is undefined', () => {
+        npoPlayerMock = createMockNpoPlayer({
+            adBreakActive: true
+        });
+        const playerContextMock = createPlayerContextMock({
+            player: undefined,
+            npoPlayer: npoPlayerMock
+        });
+        discardAdBreak(playerContextMock);
+        expect(npoPlayerMock.adBreakActive).toBe(true);
+    });
     it('should not discard ad break if adBreakActive is false', () => {
         mockNpoPlayerAPI = createMockNpoPlayerAPI({
-            getActiveAdBreak: jest.fn().mockReturnValue(undefined),
+            getActiveAdBreak: jest.fn().mockReturnValue(activeAdBreakMock),
             discardAdBreak: jest.fn()
         });
-        npoplayerMock = createMockNpoPlayer({
+        npoPlayerMock = createMockNpoPlayer({
             adBreakActive: false
         });
         const playerContextMock = createPlayerContextMock({
             player: mockNpoPlayerAPI,
-            npoplayer: npoplayerMock
+            npoPlayer: npoPlayerMock
         });
         discardAdBreak(playerContextMock);
         expect(mockNpoPlayerAPI.getActiveAdBreak).not.toHaveBeenCalled();
-        expect(mockNpoPlayerAPI.discardAdBreak).not.toHaveBeenCalled();
+        expect(mockNpoPlayerAPI.playerAPI.ads.discardAdBreak).not.toHaveBeenCalled();
+        expect(npoPlayerMock.adBreakActive).toBe(false);
+        expect(playerContextMock.player.createUIManager).not.toHaveBeenCalled();
     });
     it('should discard active ad break if adBreakActive is true and ad break exists', () => {
         mockNpoPlayerAPI = createMockNpoPlayerAPI({
             getActiveAdBreak: jest.fn().mockReturnValue(activeAdBreakMock),
-            discardAdBreak: jest.fn()
+            discardAdBreak: jest.fn(),
+            variant: NpoPlayerUIVariants.AD
         });
-        npoplayerMock = createMockNpoPlayer({
+        npoPlayerMock = createMockNpoPlayer({
             adBreakActive: true
         });
         const playerContextMock = createPlayerContextMock({
             player: mockNpoPlayerAPI,
-            npoplayer: npoplayerMock
+            npoPlayer: npoPlayerMock
         });
         discardAdBreak(playerContextMock);
         expect(mockNpoPlayerAPI.getActiveAdBreak).toHaveBeenCalled();
-        expect(mockNpoPlayerAPI.discardAdBreak).toHaveBeenCalledWith(activeAdBreakMock.id);
-        expect(npoplayerMock.adBreakActive).toBe(false);
+        expect(mockNpoPlayerAPI.playerAPI.ads.discardAdBreak).toHaveBeenCalledWith(activeAdBreakMock.id);
+        expect(npoPlayerMock.adBreakActive).toBe(false);
+        expect(playerContextMock.player.createUIManager).toHaveBeenCalledWith(playerContextMock, NpoPlayerUIVariants.DEFAULT);
     });
     it('should not discard ad break if active ad break does not exist', () => {
         mockNpoPlayerAPI = createMockNpoPlayerAPI({
             getActiveAdBreak: jest.fn().mockReturnValue(undefined),
             discardAdBreak: jest.fn()
         });
-        npoplayerMock = createMockNpoPlayer({
+        npoPlayerMock = createMockNpoPlayer({
             adBreakActive: true
         });
         const playerContextMock = createPlayerContextMock({
             player: mockNpoPlayerAPI,
-            npoplayer: npoplayerMock
+            npoPlayer: npoPlayerMock
         });
         discardAdBreak(playerContextMock);
         expect(mockNpoPlayerAPI.getActiveAdBreak).toHaveBeenCalled();
-        expect(mockNpoPlayerAPI.discardAdBreak).not.toHaveBeenCalled();
-        expect(npoplayerMock.adBreakActive).toBe(false);
+        expect(mockNpoPlayerAPI.playerAPI.ads.discardAdBreak).not.toHaveBeenCalled();
+        expect(npoPlayerMock.adBreakActive).toBe(false);
+        expect(playerContextMock.player.createUIManager).toHaveBeenCalledWith(playerContextMock, NpoPlayerUIVariants.DEFAULT);
     });
 });

package/lib/services/advertHandlers/handlePreRolls.js

@@ -3,12 +3,12 @@ import { NpoPlayerUIVariants } from '../../types/interfaces';
 import { NpoPlayerEvent } from '../../types/events';
 export async function handlePreRolls(playerContext) {
     return new Promise((resolve) => {
-        if (playerContext.npoplayer.streamObject.metadata.hasPreroll == 'false' ||
-            playerContext.npoplayer.streamObject.assets.preroll == undefined) {
+        if (playerContext.npoPlayer.streamObject.metadata.hasPreroll == 'false' ||
+            playerContext.npoPlayer.streamObject.assets.preroll == undefined) {
             resolve();
             return;
         }
-        const prerollUrl = playerContext.npoplayer.streamObject.assets.preroll;
+        const prerollUrl = playerContext.npoPlayer.streamObject.assets.preroll;
         let adIndex = 0;
         let totalAds = 0;
         let currentClickListener;
@@ -26,7 +26,7 @@ export async function handlePreRolls(playerContext) {
             await playerContext.player.scheduleAds(advertConfig);
         }
         playerContext.player.on(NpoPlayerEvent.Ready, handleReady);
-        async function handlePlay() {
+        function handlePlay() {
             playerContext.player.off(NpoPlayerEvent.Play, handlePlay);
             attemptSetAdUi();
         }
@@ -35,13 +35,11 @@ export async function handlePreRolls(playerContext) {
             const activeAdBreak = playerContext.player.getActiveAdBreak();
             if (!activeAdBreak || !activeAdBreak.ads)
                 return false;
-            playerContext.npoplayer.uiManager?.release();
-            playerContext.npoplayer.uiManager = undefined;
-            if (playerContext.npoplayer.playerContext) {
-                playerContext.player.createUIManager(playerContext, NpoPlayerUIVariants.AD);
-            }
+            playerContext.npoPlayer.uiManager?.release();
+            playerContext.npoPlayer.uiManager = undefined;
+            void playerContext.player.createUIManager(playerContext, NpoPlayerUIVariants.AD);
             adUiSet = true;
-            const adButton = playerContext.npoplayer.uiComponents.adbutton;
+            const adButton = playerContext.npoPlayer.uiComponents.adbutton;
             const currentAd = activeAdBreak.ads[0];
             adIndex = 1;
             totalAds = activeAdBreak.ads.length;
@@ -49,7 +47,7 @@ export async function handlePreRolls(playerContext) {
                 adButton.show();
                 adClickHandler(currentAd, adButton);
             }
-            playerContext.npoplayer.uiComponents.adlabel?.setText(`Advertentie 1 van ${activeAdBreak.ads.length}`);
+            playerContext.npoPlayer.uiComponents.adlabel?.setText(`Advertentie 1 van ${activeAdBreak.ads.length}`);
             return true;
         }
         function attemptSetAdUi(attemptsLeft = 10) {
@@ -71,7 +69,7 @@ export async function handlePreRolls(playerContext) {
             }
             if (!adUiSet)
                 attemptSetAdUi();
-            playerContext.npoplayer.adBreakActive = true;
+            playerContext.npoPlayer.adBreakActive = true;
         }
         playerContext.player.on(NpoPlayerEvent.AdStarted, handleAdStarted);
         function adClickHandler(ad, button) {
@@ -102,26 +100,26 @@ export async function handlePreRolls(playerContext) {
                 handleAdBreakFinished();
                 return;
             }
-            const adButton = playerContext.npoplayer.uiComponents.adbutton;
+            const adButton = playerContext.npoPlayer.uiComponents.adbutton;
             const nextAd = activeAdBreak.ads[adIndex];
             adIndex += 1;
             if (adButton) {
                 adButton.show();
                 adClickHandler(nextAd, adButton);
             }
-            playerContext.npoplayer.uiComponents.adlabel?.setText(`Advertentie ${adIndex} van ${activeAdBreak.ads.length}`);
+            playerContext.npoPlayer.uiComponents.adlabel?.setText(`Advertentie ${adIndex} van ${activeAdBreak.ads.length}`);
         }
         playerContext.player.on(NpoPlayerEvent.AdFinished, handleAdFinished);
         function handleAdBreakFinished() {
             playerContext.player.off(NpoPlayerEvent.AdBreakFinished, handleAdBreakFinished);
             playerContext.player.off(NpoPlayerEvent.AdError, handleAdBreakFinished);
-            playerContext.npoplayer.adBreakActive = false;
-            playerContext.npoplayer.uiComponents.adbutton?.hide();
-            playerContext.npoplayer.uiComponents.adlabel?.hide();
-            playerContext.npoplayer.uiManager?.release();
-            playerContext.npoplayer.uiManager = undefined;
-            if (playerContext.npoplayer.playerContext) {
-                playerContext.player.createUIManager(playerContext, NpoPlayerUIVariants.DEFAULT);
+            playerContext.npoPlayer.adBreakActive = false;
+            playerContext.npoPlayer.uiComponents.adbutton?.hide();
+            playerContext.npoPlayer.uiComponents.adlabel?.hide();
+            playerContext.npoPlayer.uiManager?.release();
+            playerContext.npoPlayer.uiManager = undefined;
+            if (playerContext.npoPlayer.playerContext) {
+                void playerContext.player.createUIManager(playerContext, NpoPlayerUIVariants.DEFAULT);
             }
             adUiSet = false;
             resolve();

package/lib/services/advertHandlers/handlePrerolls.test.js

@@ -1,4 +1,5 @@
 import { handlePreRolls } from './handlePreRolls';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
 jest.mock('bitmovin-player');
 jest.mock('../../npoplayer');
@@ -11,11 +12,12 @@ describe('handlePreRolls', () => {
                 getActiveAdBreak: jest.fn()
             },
             on: jest.fn(),
-            off: jest.fn()
+            off: jest.fn(),
+            scheduleAds: jest.fn()
         };
     });
     it('should not schedule ads when hasPreroll is false', async () => {
-        const npoplayerMock = createMockNpoPlayer({
+        const npoPlayerMock = createMockNpoPlayer({
             streamObject: {
                 metadata: {
                     hasPreroll: 'false'
@@ -26,13 +28,13 @@ describe('handlePreRolls', () => {
             }
         });
         const playerContextMock = createPlayerContextMock({
-            npoplayer: npoplayerMock
+            npoPlayer: npoPlayerMock
         });
         await handlePreRolls(playerContextMock);
         expect(mockPlayerAPI.ads.schedule).not.toHaveBeenCalled();
     });
     it('should not schedule ads if preroll URL is missing', async () => {
-        const npoplayerMock = createMockNpoPlayer({
+        const npoPlayerMock = createMockNpoPlayer({
             streamObject: {
                 metadata: {
                     hasPreroll: 'true'
@@ -41,7 +43,7 @@ describe('handlePreRolls', () => {
             }
         });
         const playerContextMock = createPlayerContextMock({
-            npoplayer: npoplayerMock
+            npoPlayer: npoPlayerMock
         });
         await handlePreRolls(playerContextMock);
         expect(mockPlayerAPI.ads.schedule).not.toHaveBeenCalled();
@@ -49,4 +51,63 @@ describe('handlePreRolls', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
+    it('should schedule ads when hasPreroll is true and preroll URL exists', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        const npoPlayerMock = createMockNpoPlayer({
+            streamObject: {
+                metadata: {
+                    hasPreroll: 'true'
+                },
+                assets: {
+                    preroll: 'sample_url'
+                }
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoPlayer: npoPlayerMock,
+            player: mockPlayerAPI
+        });
+        const readyCallback = jest.fn();
+        mockPlayerAPI.on.mockImplementation((event, callback) => {
+            if (event === PlayerEvent.Ready) {
+                readyCallback.mockImplementation(callback);
+            }
+        });
+        void handlePreRolls(playerContextMock);
+        readyCallback();
+        expect(playerContextMock.player.scheduleAds).toHaveBeenCalledWith({
+            tag: {
+                url: 'sample_url',
+                type: 'vast'
+            },
+            id: 'Ad',
+            position: 'pre'
+        });
+    });
+    it('should cleanup UI and resolve when AdBreakFinished event occurs', async () => {
+        const npoPlayerMock = createMockNpoPlayer({
+            streamObject: {
+                metadata: {
+                    hasPreroll: 'true'
+                },
+                assets: {
+                    preroll: 'sample_url'
+                }
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoPlayer: npoPlayerMock,
+            player: mockPlayerAPI
+        });
+        const adBreakFinishedHandler = jest.fn();
+        mockPlayerAPI.on.mockImplementation((event, handler) => {
+            if (event === PlayerEvent.AdBreakFinished) {
+                adBreakFinishedHandler.mockImplementation(handler);
+            }
+        });
+        const handlePromise = handlePreRolls(playerContextMock);
+        adBreakFinishedHandler();
+        await handlePromise;
+        expect(playerContextMock.npoPlayer.uiManager).toBeUndefined();
+    });
 });

package/lib/services/drmHandlers/decideprofile.js

@@ -5,7 +5,7 @@ export async function decideProfile(playerContext, preferredDRM = '') {
         console.error('No player detected');
         return { profileName: '', drm: '' };
     }
-    const player = playerContext.player;
+    const { player } = playerContext;
     const supportedTech = player.getSupportedTech();
     const supportedDRM = await player.getSupportedDRM();
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -15,7 +15,7 @@ export async function decideProfile(playerContext, preferredDRM = '') {
     }
     const { bestWithDRM, bestDRM } = determineBestWithDRM(supportedTech, { supportedDRM, preferredDRM });
     const bestWithoutDRM = determineBestWithoutDRM(supportedTech);
-    return bestWithDRM ? { profileName: bestWithDRM, drm: bestDRM } : { profileName: bestWithoutDRM, drm: bestDRM };
+    return bestWithDRM ? { profileName: bestWithDRM, drm: bestDRM } : { profileName: bestWithoutDRM, drm: '' };
 }
 function determineBestWithDRM(supportedTech, drmInfo) {
     let bestWithDRM = '';
@@ -33,6 +33,12 @@ function determineBestWithDRM(supportedTech, drmInfo) {
             continue;
         if (techMap[tech.streaming]) {
             const { drm, stream } = techMap[tech.streaming];
+            if ((drmInfo.preferredDRM === DRM_TYPES.PLAYREADY || drmInfo.supportedDRM.includes(DRM_TYPES.PLAYREADY)) &&
+                tech.streaming === STREAM_TYPES.DASH) {
+                bestWithDRM = STREAM_TYPES.DASH;
+                bestDRM = DRM_TYPES.PLAYREADY;
+                break;
+            }
             if (drmInfo.preferredDRM !== drm) {
                 bestDRM =
                     tech.streaming === STREAM_TYPES.DASH ? getBestDRMForDash(drmInfo) : getBestDRMForHls(drmInfo);

package/lib/services/drmHandlers/decideprofile.test.js

@@ -13,7 +13,7 @@ describe('decideProfile', () => {
                 .fn()
                 .mockResolvedValue(['com.widevine.alpha', 'com.microsoft.playready', 'com.apple.fps.1_0'])
         };
-        mockPlayerContext = { player: mockPlayer, npoplayer: mockNpoplayer };
+        mockPlayerContext = { player: mockPlayer, npoPlayer: mockNpoplayer };
     });
     afterEach(() => {
         jest.clearAllMocks();
@@ -31,4 +31,8 @@ describe('decideProfile', () => {
         const result = await decideProfile(mockPlayerContext, DRM_TYPES.FAIRPLAY);
         expect(result).toEqual({ profileName: STREAM_TYPES.HLS, drm: DRM_TYPES.FAIRPLAY });
     });
+    it('should return profile with dash streaming and playready DRM when preferred DRM is PlayReady', async () => {
+        const result = await decideProfile(mockPlayerContext, DRM_TYPES.PLAYREADY);
+        expect(result).toEqual({ profileName: STREAM_TYPES.DASH, drm: DRM_TYPES.PLAYREADY });
+    });
 });

package/lib/services/drmHandlers/verifydrm.js

@@ -1,8 +1,7 @@
 import { convertJwtToBase64, convertBase64ToObject } from '../../js/utilities/utilities.jwt';
-import { getStreamObject } from '../../js/api/getstreamobject';
 export async function verifyDRM(playerContext, payload) {
     try {
-        const { player, npoplayer: { streamObject, sourceConfig } } = playerContext;
+        const { player, npoPlayer: { streamObject, sourceConfig } } = playerContext;
         const { stream } = streamObject;
         if (stream.drmToken) {
             const drmJsonTimestamp = getDRMTokenTimestamp(stream.drmToken);
@@ -29,12 +28,12 @@ function getDRMTokenTimestamp(drmToken) {
     return convertBase64ToObject(drmBase64).iat;
 }
 async function refreshDRMToken(playerContext, payload) {
-    const backupStreamObject = await getStreamObject(playerContext.npoplayer, payload);
-    const newDrmToken = backupStreamObject.stream.drmToken;
+    const { npoPlayer: { npoPlayerServices, streamObject, sourceConfig } } = playerContext;
+    const { stream: { drmToken: newDrmToken } } = await npoPlayerServices.fetchStream(playerContext, payload);
     const clonedStreamObject = {
-        ...playerContext.npoplayer.streamObject,
-        stream: { ...playerContext.npoplayer.streamObject.stream, drmToken: newDrmToken }
+        ...streamObject,
+        stream: { ...streamObject.stream, drmToken: newDrmToken }
     };
-    playerContext.npoplayer.streamObject = clonedStreamObject;
-    await loadPlayer(playerContext, playerContext.npoplayer.sourceConfig);
+    playerContext.npoPlayer.streamObject = clonedStreamObject;
+    await loadPlayer(playerContext, sourceConfig);
 }

package/lib/services/drmHandlers/verifydrm.test.js

@@ -1,24 +1,42 @@
 import { verifyDRM } from './verifydrm';
 import { mockNpoPlayer } from '../../../tests/mocks/mockNpoplayer';
 import { convertBase64ToObject, convertJwtToBase64 } from '../../js/utilities/utilities.jwt';
-import { getStreamObject } from '../../js/api/getstreamobject';
 jest.mock('../../js/utilities/utilities.jwt', () => ({
     convertBase64ToObject: jest.fn(),
     convertJwtToBase64: jest.fn()
 }));
-jest.mock('../../js/api/getstreamobject', () => ({
-    getStreamObject: jest.fn()
+jest.mock('../streamFetchHandler/fetchStream', () => ({
+    fetchStream: jest.fn()
 }));
 let mockPlayer;
 const mockNpoplayer = mockNpoPlayer;
 let mockPlayerContext;
+function createMockStreamObject(overrides = {}) {
+    return {
+        stream: {
+            avType: '',
+            drmType: '',
+            streamProfile: '',
+            sourceProfile: '',
+            streamURL: '',
+            drmToken: 'newToken'
+        },
+        metadata: { description: 'default description', title: 'default title' },
+        assets: { scrubbingThumbnail: 'thumbnail.jpg', subtitles: [] },
+        user: { type: 'anonymous' },
+        ...overrides
+    };
+}
 beforeEach(() => {
     jest.clearAllMocks();
     mockPlayer = {
         streamObject: { stream: { drmToken: undefined } },
         load: jest.fn()
     };
-    mockPlayerContext = { player: mockPlayer, npoplayer: mockNpoplayer };
+    mockNpoplayer.npoPlayerServices = {
+        fetchStream: jest.fn()
+    };
+    mockPlayerContext = { player: mockPlayer, npoPlayer: mockNpoplayer };
 });
 afterEach(() => {
     jest.clearAllMocks();
@@ -42,7 +60,7 @@ describe('Test DRM verification', () => {
             streamURL: '',
             drmToken: drmToken
         };
-        mockPlayerContext.npoplayer.sourceConfig = sourceConfig;
+        mockPlayerContext.npoPlayer.sourceConfig = sourceConfig;
         jest.spyOn(global.Date, 'now').mockImplementation(() => currentTime * 1000);
         convertJwtToBase64.mockReturnValue(JSON.stringify({ iat: drmJsonTimestamp }));
         convertBase64ToObject.mockReturnValue({ iat: drmJsonTimestamp });
@@ -62,14 +80,19 @@ describe('Test DRM verification', () => {
             streamURL: '',
             drmToken: drmToken
         };
-        mockPlayerContext.npoplayer.sourceConfig = sourceConfig;
+        mockPlayerContext.npoPlayer.sourceConfig = sourceConfig;
         jest.spyOn(global.Date, 'now').mockImplementation(() => currentTime * 1000);
         convertJwtToBase64.mockReturnValue(JSON.stringify({ iat: drmJsonTimestamp }));
         convertBase64ToObject.mockReturnValue({ iat: drmJsonTimestamp });
-        getStreamObject.mockResolvedValue({ stream: { drmToken: 'newToken' } });
+        jest.spyOn(mockNpoplayer.npoPlayerServices, 'fetchStream').mockResolvedValue(createMockStreamObject({
+            stream: {
+                ...createMockStreamObject().stream,
+                drmToken: 'overriddenToken'
+            }
+        }));
         jest.spyOn(mockPlayerContext.player, 'load').mockResolvedValue(undefined);
         await verifyDRM(mockPlayerContext, payload);
-        expect(getStreamObject).toHaveBeenCalledWith(mockPlayerContext.npoplayer, payload);
+        expect(mockNpoplayer.npoPlayerServices.fetchStream).toHaveBeenCalledWith(mockPlayerContext, payload);
         expect(mockPlayerContext.player.load).toHaveBeenCalledWith(sourceConfig);
     });
     it('should call loadPlayer when the drmToken is null', async () => {
@@ -82,7 +105,7 @@ describe('Test DRM verification', () => {
             streamURL: '',
             drmToken: undefined
         };
-        mockPlayerContext.npoplayer.sourceConfig = sourceConfig;
+        mockPlayerContext.npoPlayer.sourceConfig = sourceConfig;
         await verifyDRM(mockPlayerContext, payload);
         expect(mockPlayerContext.player.load).toHaveBeenCalledWith(sourceConfig);
     });

package/lib/services/errors/errorBackground.test.js

@@ -0,0 +1,48 @@
+import { setErrorBackground } from './errorHandler';
+const posterUrl = 'https://example.com/poster.jpg';
+describe('setErrorBackground', () => {
+    it('sets the error background image correctly', () => {
+        const mockPlayerContainer = document.createElement('div');
+        const mockPlayerContext = {
+            player: {
+                getNpoPlayerElement: jest.fn(() => mockPlayerContainer)
+            },
+            npoPlayer: {
+                sourceConfig: {
+                    poster: posterUrl
+                }
+            }
+        };
+        setErrorBackground(mockPlayerContext);
+        expect(mockPlayerContainer.style.getPropertyValue('--npo-player-errormessage-background-image')).toBe(posterUrl);
+    });
+    it('sets the error background image to "none" if poster is not provided', () => {
+        const mockPlayerContainer = document.createElement('div');
+        const mockPlayerContext = {
+            player: {
+                getNpoPlayerElement: jest.fn(() => mockPlayerContainer)
+            },
+            npoPlayer: {
+                sourceConfig: {
+                    poster: undefined
+                }
+            }
+        };
+        setErrorBackground(mockPlayerContext);
+        expect(mockPlayerContainer.style.getPropertyValue('--npo-player-errormessage-background-image')).toBe('none');
+    });
+    it('does nothing if getNpoPlayerElement returns undefined', () => {
+        const mockPlayerContext = {
+            player: {
+                getNpoPlayerElement: jest.fn(() => undefined)
+            },
+            npoPlayer: {
+                sourceConfig: {
+                    poster: posterUrl
+                }
+            }
+        };
+        setErrorBackground(mockPlayerContext);
+        expect(() => setErrorBackground(mockPlayerContext)).not.toThrow();
+    });
+});

package/lib/services/errors/errorHandler.d.ts

@@ -0,0 +1,3 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function handlePlayerError(playerContext: PlayerContext, status: number): Promise<void>;
+export declare function setErrorBackground(playerContext: PlayerContext): void;

package/lib/services/errors/errorHandler.js

@@ -0,0 +1,45 @@
+import { customSpecificErrorMessageOverlayConfig, npoBusinessErrors } from './errorText';
+export async function handlePlayerError(playerContext, status) {
+    const { player, npoPlayer } = playerContext;
+    const uiComponents = npoPlayer.uiComponents;
+    const errorContainerClass = 'npo-player-error';
+    const shouldRetry = status >= 1000 && npoPlayer.streamOptions.retryCallback !== undefined;
+    const message = generateErrorMessage(status, shouldRetry);
+    await player.unload();
+    uiComponents.controlBar?.hide();
+    const errorMessageOverlay = uiComponents.errorMessageOverlay;
+    if (!errorMessageOverlay)
+        return;
+    player.addClassToNpoPlayerElement(errorContainerClass);
+    setErrorBackground(playerContext);
+    errorMessageOverlay.display(message);
+    if (shouldRetry) {
+        setupRetryHandler(playerContext, errorContainerClass);
+    }
+}
+function generateErrorMessage(status, shouldRetry) {
+    const baseMessage = npoBusinessErrors[status] ?? customSpecificErrorMessageOverlayConfig[status] ?? 'De video kan niet worden geladen';
+    const retryMessage = shouldRetry
+        ? '<br>Klik om het opnieuw te proberen.<br><br><button class="retry-button">Opnieuw proberen</button>'
+        : '';
+    return `<span class="errorcode">Foutcode ${status}</span>\n${baseMessage}${retryMessage}`;
+}
+function setupRetryHandler(playerContext, errorContainerClass) {
+    const playerContainer = playerContext.player.getNpoPlayerElement();
+    playerContainer.addEventListener('click', (event) => {
+        const target = event.target;
+        if (target.classList.contains('retry-button') && playerContainer.classList.contains(errorContainerClass)) {
+            target.style.visibility = 'hidden';
+            playerContext.player.handleErrorRetry(playerContext);
+            playerContext.player.removeClassFromNpoPlayerElement(errorContainerClass);
+            setTimeout(() => {
+                target.style.visibility = 'visible';
+            }, 200);
+        }
+    });
+}
+export function setErrorBackground(playerContext) {
+    const playerContainer = playerContext.player.getNpoPlayerElement();
+    const posterImage = playerContext.npoPlayer.sourceConfig.poster;
+    playerContainer?.style.setProperty('--npo-player-errormessage-background-image', posterImage || 'none');
+}

package/lib/services/errors/errorText.d.ts

@@ -0,0 +1,2 @@
+export declare const customSpecificErrorMessageOverlayConfig: Record<number, string>;
+export declare const npoBusinessErrors: Record<number, string>;