@npo/player 1.27.7 → 1.28.0

package/lib/services/errors/errorHandler.js

@@ -1,46 +1,59 @@
 import { customSpecificErrorMessageOverlayConfig, npoBusinessErrors } from './errorText';
-export async function handlePlayerError(playerContext, status) {
+import { isJwtFresh } from '../../js/utilities/utilities.jwt';
+export async function handlePlayerError({ playerContext, status, context }) {
     const { player, npoPlayer } = playerContext;
+    const { jwt, streamOptions: { retryCallback } } = npoPlayer;
     const uiComponents = npoPlayer.uiComponents;
     const errorContainerClass = 'npo-player-error';
-    const shouldRetry = status >= 1000 && npoPlayer.streamOptions.retryCallback !== undefined;
+    let shouldRetry = false;
+    if (isJwtFresh(jwt) || retryCallback !== undefined) {
+        shouldRetry = status >= 1000;
+    }
     const message = generateErrorMessage(status, shouldRetry);
-    npoPlayer.logEmitter.emit('logError', status);
+    npoPlayer.logEmitter.emit('logError', status, context);
     await player.unload();
-    uiComponents.controlBar?.hide();
     const errorMessageOverlay = uiComponents.errorMessageOverlay;
     if (!errorMessageOverlay)
         return;
     player.addClassToNpoPlayerElement(errorContainerClass);
+    const containerEl = player.getNpoPlayerElement();
+    if (containerEl instanceof HTMLElement) {
+        containerEl.classList.add(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';
+export 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) {
+export 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);
+            ;
+            (async () => {
+                target.style.visibility = 'hidden';
+                await playerContext.player.handleErrorRetry(playerContext);
+                playerContext.player.removeClassFromNpoPlayerElement(errorContainerClass);
+                setTimeout(() => {
+                    target.style.visibility = 'visible';
+                }, 200);
+            })().catch((error) => {
+                console.error('Retry handler failed:', error);
+            });
         }
     });
 }
 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');
+    playerContainer?.style.setProperty('--npo-player-errormessage-background-image', posterImage ? `url(${posterImage})` : 'none');
 }

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

@@ -0,0 +1,148 @@
+import { jest } from '@jest/globals';
+import '@testing-library/jest-dom';
+import { handlePlayerError, generateErrorMessage, setupRetryHandler, setErrorBackground } from './errorHandler';
+import * as jwtUtils from '../../js/utilities/utilities.jwt';
+import { npoBusinessErrors, customSpecificErrorMessageOverlayConfig } from './errorText';
+const retryButtonClass = 'retry-button';
+describe('generateErrorMessage', () => {
+    it('falls back to default message and no retry button when shouldRetry is false', () => {
+        const status = 999;
+        const html = generateErrorMessage(status, false);
+        expect(html).toContain(`Foutcode ${status}`);
+        expect(html).toContain('De video kan niet worden geladen');
+        expect(html).not.toContain(retryButtonClass);
+    });
+    it('includes retry button when shouldRetry is true', () => {
+        const status = 1234;
+        const html = generateErrorMessage(status, true);
+        expect(html).toContain(`Foutcode ${status}`);
+        expect(html).toMatch(/<button class="retry-button">Opnieuw proberen<\/button>/);
+    });
+    it('uses business mapping if present', () => {
+        const codes = Object.keys(npoBusinessErrors).map(Number);
+        if (codes.length > 0) {
+            const code = codes[0];
+            const mapped = npoBusinessErrors[code];
+            expect(generateErrorMessage(code, false)).toContain(mapped);
+        }
+    });
+    it('uses custom overlay mapping if present', () => {
+        const codes = Object.keys(customSpecificErrorMessageOverlayConfig).map(Number);
+        if (codes.length > 0) {
+            const code = codes[0];
+            const mapped = customSpecificErrorMessageOverlayConfig[code];
+            expect(generateErrorMessage(code, false)).toContain(mapped);
+        }
+    });
+});
+describe('setErrorBackground', () => {
+    let playerContext;
+    beforeEach(() => {
+        const container = document.createElement('div');
+        playerContext = {
+            player: { getNpoPlayerElement: () => container },
+            npoPlayer: { sourceConfig: { poster: 'http://example.com/poster.jpg' } }
+        };
+    });
+    it('sets CSS var to the poster URL', () => {
+        const el = playerContext.player.getNpoPlayerElement();
+        setErrorBackground(playerContext);
+        expect(el.style.getPropertyValue('--npo-player-errormessage-background-image')).toBe('url(http://example.com/poster.jpg)');
+    });
+    it('falls back to "none" when poster is empty', () => {
+        playerContext.npoPlayer.sourceConfig.poster = '';
+        const el = playerContext.player.getNpoPlayerElement();
+        setErrorBackground(playerContext);
+        expect(el.style.getPropertyValue('--npo-player-errormessage-background-image')).toBe('none');
+    });
+});
+describe('setupRetryHandler', () => {
+    const ERROR_CLASS = 'npo-player-error';
+    let playerContext;
+    let container;
+    beforeEach(() => {
+        jest.useFakeTimers();
+        container = document.createElement('div');
+        container.classList.add(ERROR_CLASS);
+        const btn = document.createElement('button');
+        btn.classList.add('retry-button');
+        container.appendChild(btn);
+        playerContext = {
+            player: {
+                getNpoPlayerElement: () => container,
+                handleErrorRetry: jest.fn().mockImplementation(() => Promise.resolve()),
+                removeClassFromNpoPlayerElement: jest.fn()
+            }
+        };
+        setupRetryHandler(playerContext, ERROR_CLASS);
+    });
+    afterEach(() => {
+        jest.runOnlyPendingTimers();
+        jest.useRealTimers();
+    });
+    it('invokes handleErrorRetry and restores button visibility', async () => {
+        const btn = container.querySelector('.retry-button');
+        btn.click();
+        expect(btn).toHaveStyle({ visibility: 'hidden' });
+        await Promise.resolve();
+        expect(playerContext.player.handleErrorRetry).toHaveBeenCalled();
+        expect(playerContext.player.removeClassFromNpoPlayerElement).toHaveBeenCalledWith(ERROR_CLASS);
+        jest.advanceTimersByTime(200);
+        expect(btn).toHaveStyle({ visibility: 'visible' });
+    });
+});
+describe('handlePlayerError', () => {
+    let playerContext;
+    let emitLog;
+    let unload;
+    let display;
+    let addClass;
+    beforeEach(() => {
+        jest.spyOn(jwtUtils, 'isJwtFresh').mockReturnValue(true);
+        emitLog = jest.fn();
+        unload = jest.fn().mockImplementation(() => Promise.resolve());
+        display = jest.fn();
+        addClass = jest.fn();
+        const playerEl = document.createElement('div');
+        const ui = {
+            errorMessageOverlay: { display }
+        };
+        const playerMock = {
+            unload,
+            addClassToNpoPlayerElement: addClass,
+            getNpoPlayerElement: () => playerEl,
+            handleErrorRetry: jest.fn().mockImplementation(() => Promise.resolve())
+        };
+        playerContext = {
+            player: playerMock,
+            npoPlayer: {
+                jwt: 'token',
+                streamOptions: {},
+                uiComponents: ui,
+                logEmitter: { emit: emitLog },
+                sourceConfig: { poster: 'p.jpg' }
+            }
+        };
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it('logs, hides controls, shows error without retry for status<1000', async () => {
+        await handlePlayerError({ playerContext, status: 404 });
+        expect(emitLog).toHaveBeenCalledWith('logError', 404, undefined);
+        expect(addClass).toHaveBeenCalledWith('npo-player-error');
+        expect(display).toHaveBeenCalledWith(expect.stringContaining('Foutcode 404'));
+        expect(display).not.toHaveBeenCalledWith(expect.stringContaining(retryButtonClass));
+    });
+    it('logs and shows retry button when status>=1000, and attaches retry handler', async () => {
+        await handlePlayerError({ playerContext, status: 1500 });
+        expect(emitLog).toHaveBeenCalledWith('logError', 1500, undefined);
+        expect(display).toHaveBeenCalledWith(expect.stringContaining(retryButtonClass));
+        const el = playerContext.player.getNpoPlayerElement();
+        el.innerHTML = display.mock.calls[0][0];
+        const btn = el.querySelector('.retry-button');
+        btn.click();
+        await Promise.resolve();
+        expect(playerContext.player.handleErrorRetry).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,2 @@
+import { PlayerContext } from 'types/interfaces';
+export declare function handleErrorRetry(playerContext: PlayerContext): Promise<void>;

package/lib/services/errors/errorRetryHandler.js

@@ -0,0 +1,14 @@
+import { isJwtFresh } from '../../js/utilities/utilities.jwt';
+export async function handleErrorRetry(playerContext) {
+    const { sourceConfig, jwt, streamOptions: { retryCallback } } = playerContext.npoPlayer;
+    if (!isJwtFresh(jwt) && retryCallback !== undefined) {
+        return retryCallback?.();
+    }
+    try {
+        await playerContext.player.playerAPI.load(sourceConfig);
+    }
+    catch (error) {
+        console.error('Retry failed', error);
+        return;
+    }
+}

package/lib/services/errors/errorRetryHandler.test.d.ts

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

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

@@ -0,0 +1,62 @@
+import { handleErrorRetry } from './errorRetryHandler';
+import { isJwtFresh } from '../../js/utilities/utilities.jwt';
+jest.mock('../../js/utilities/utilities.jwt', () => ({
+    isJwtFresh: jest.fn()
+}));
+describe('handleErrorRetry', () => {
+    let retryCallback;
+    let loadMock;
+    let consoleErrorSpy;
+    let dummyConfig;
+    let playerContext;
+    beforeEach(() => {
+        retryCallback = jest.fn();
+        loadMock = jest.fn().mockResolvedValue(undefined);
+        consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {
+        });
+        dummyConfig = {};
+        playerContext = {
+            npoPlayer: {
+                sourceConfig: dummyConfig,
+                jwt: 'some.token',
+                streamOptions: { retryCallback }
+            },
+            player: {
+                playerAPI: { load: loadMock }
+            }
+        };
+    });
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+    it('calls retryCallback and does not call load when JWT is stale and retryCallback is provided', async () => {
+        ;
+        isJwtFresh.mockReturnValue(false);
+        await handleErrorRetry(playerContext);
+        expect(retryCallback).toHaveBeenCalledTimes(1);
+        expect(loadMock).not.toHaveBeenCalled();
+    });
+    it('falls back to load when JWT is stale but retryCallback is undefined', async () => {
+        ;
+        isJwtFresh.mockReturnValue(false);
+        playerContext.npoPlayer.streamOptions.retryCallback = undefined;
+        await handleErrorRetry(playerContext);
+        expect(loadMock).toHaveBeenCalledWith(dummyConfig);
+    });
+    it('calls load when JWT is fresh', async () => {
+        ;
+        isJwtFresh.mockReturnValue(true);
+        await handleErrorRetry(playerContext);
+        expect(retryCallback).not.toHaveBeenCalled();
+        expect(loadMock).toHaveBeenCalledWith(dummyConfig);
+    });
+    it('catches errors from load and logs them', async () => {
+        ;
+        isJwtFresh.mockReturnValue(true);
+        const testError = new Error('boom');
+        loadMock.mockRejectedValue(testError);
+        await handleErrorRetry(playerContext);
+        expect(loadMock).toHaveBeenCalledWith(dummyConfig);
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Retry failed', testError);
+    });
+});

package/lib/services/errors/errorText.js

@@ -1,8 +1,8 @@
 export const customSpecificErrorMessageOverlayConfig = {
     1000: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
     1001: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
-    1101: 'Er is een configuratie fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
-    1102: 'Er is een configuratie fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1101: 'Er is een configuratiefout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1102: 'Er is een configuratiefout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
     1103: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
     1104: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
     1105: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
@@ -29,11 +29,11 @@ export const customSpecificErrorMessageOverlayConfig = {
     1402: 'Er is een serverfout opgetreden. Controleer je internetverbinding.',
     1403: 'Er is een serverfout opgetreden. Controleer je internetverbinding.',
     1404: 'Er is een serverfout opgetreden. Controleer je internetverbinding.',
-    2001: 'Er is een configuratie fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
-    2002: 'Er is een configuratie fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    2001: 'Er is een configuratiefout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    2002: 'Er is een configuratiefout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
     2003: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
     2005: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
-    2006: 'Oeps, er is iets mis met de DRM',
+    2006: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
     2007: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
     2008: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
     2009: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
@@ -50,10 +50,13 @@ export const customSpecificErrorMessageOverlayConfig = {
     4000: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.'
 };
 export const npoBusinessErrors = {
+    401: 'Dit item is momenteel niet beschikbaar.',
     402: 'Dit programma is alleen te zien op NPO Start met een plus-abonnement.',
     403: 'Dit item is momenteel niet beschikbaar.',
     404: 'Dit item is momenteel niet beschikbaar.',
     410: 'Dit item is momenteel niet beschikbaar.',
+    412: 'Dit item is momenteel niet beschikbaar.',
+    422: 'Dit item kan niet worden afgespeeld vanwege een configuratiefout.',
     450: 'Dit item heeft een leeftijdsrestrictie en is alleen beschikbaar tussen 20:00 uur en 06:00 uur of te streamen op NPO Start met een plus-abonnement.',
     451: 'Dit item is niet beschikbaar op jouw locatie.'
 };

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

@@ -7,10 +7,10 @@ describe('Test custom error messages', () => {
         expect(customSpecificErrorMessageOverlayConfig[1001]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
     });
     it('should return a 1101 error message', () => {
-        expect(customSpecificErrorMessageOverlayConfig[1101]).toBe('Er is een configuratie fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+        expect(customSpecificErrorMessageOverlayConfig[1101]).toBe('Er is een configuratiefout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
     });
     it('should return a 1102 error message', () => {
-        expect(customSpecificErrorMessageOverlayConfig[1102]).toBe('Er is een configuratie fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+        expect(customSpecificErrorMessageOverlayConfig[1102]).toBe('Er is een configuratiefout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
     });
     it('should return a 1103 error message', () => {
         expect(customSpecificErrorMessageOverlayConfig[1103]).toBe('Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
@@ -43,7 +43,7 @@ describe('Test custom error messages', () => {
         expect(customSpecificErrorMessageOverlayConfig[1403]).toBe('Er is een serverfout opgetreden. Controleer je internetverbinding.');
     });
     it('should return a 2006 error message', () => {
-        expect(customSpecificErrorMessageOverlayConfig[2006]).toBe('Oeps, er is iets mis met de DRM');
+        expect(customSpecificErrorMessageOverlayConfig[2006]).toBe('Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.');
     });
     it('should return a 2007 error message', () => {
         expect(customSpecificErrorMessageOverlayConfig[2007]).toBe('Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.');

package/lib/services/infoPanel/infoPanel.d.ts

@@ -0,0 +1,3 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function addDataInInfoPanel(playerContext: PlayerContext): void;
+export declare function clearInfoPanel(playerContext: PlayerContext): void;

package/lib/services/infoPanel/infoPanel.js

@@ -0,0 +1,35 @@
+export function addDataInInfoPanel(playerContext) {
+    const { npoPlayer } = playerContext;
+    const infoPanel = npoPlayer.uiComponents.infoPanel;
+    const infoToggleButtons = npoPlayer.uiComponents.infoPanelToggleButtons ?? [];
+    const htmlContent = npoPlayer.streamOptions.infoPanelHTML || '';
+    if (!infoPanel)
+        return;
+    infoPanel.hide();
+    infoPanel.setHtmlContent(htmlContent);
+    if (htmlContent) {
+        for (const button of infoToggleButtons) {
+            button.show();
+            button.off();
+        }
+    }
+    else {
+        for (const button of infoToggleButtons) {
+            button.hide();
+            button.off();
+        }
+    }
+}
+export function clearInfoPanel(playerContext) {
+    const { npoPlayer } = playerContext;
+    const infoPanel = npoPlayer.uiComponents.infoPanel;
+    const infoToggleButtons = npoPlayer.uiComponents.infoPanelToggleButtons ?? [];
+    if (!infoPanel)
+        return;
+    infoPanel.hide();
+    infoPanel.setHtmlContent('');
+    for (const button of infoToggleButtons) {
+        button.hide();
+        button.off();
+    }
+}

package/lib/services/infoPanel/infoPanel.test.d.ts

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

package/lib/services/infoPanel/infoPanel.test.js

@@ -0,0 +1,70 @@
+import { mockNpoPlayer } from '../../../tests/mocks/mockNpoplayer';
+import { addDataInInfoPanel, clearInfoPanel } from './infoPanel';
+describe('InfoPanel helpers', () => {
+    let infoPanel;
+    let toggleButtons;
+    let mockPlayerContext;
+    beforeEach(() => {
+        infoPanel = {
+            hide: jest.fn(),
+            setHtmlContent: jest.fn()
+        };
+        toggleButtons = [
+            { show: jest.fn(), hide: jest.fn(), off: jest.fn() },
+            { show: jest.fn(), hide: jest.fn(), off: jest.fn() }
+        ];
+        mockPlayerContext = { player: {}, npoPlayer: mockNpoPlayer };
+        mockPlayerContext.npoPlayer.uiComponents.infoPanel = infoPanel;
+        mockPlayerContext.npoPlayer.uiComponents.infoPanelToggleButtons = toggleButtons;
+    });
+    describe('addDataInInfoPanel', () => {
+        it('should hide the info panel and set empty content when no HTML is provided', () => {
+            mockPlayerContext.npoPlayer.streamOptions.infoPanelHTML = '';
+            addDataInInfoPanel(mockPlayerContext);
+            expect(infoPanel.hide).toHaveBeenCalled();
+            expect(infoPanel.setHtmlContent).toHaveBeenCalledWith('');
+            for (const button of toggleButtons) {
+                expect(button.hide).toHaveBeenCalled();
+                expect(button.off).toHaveBeenCalled();
+                expect(button.show).not.toHaveBeenCalled();
+            }
+        });
+        it('should set HTML content and show buttons when HTML is provided', () => {
+            mockPlayerContext.npoPlayer.streamOptions.infoPanelHTML = '<p>Info</p>';
+            addDataInInfoPanel(mockPlayerContext);
+            expect(infoPanel.hide).toHaveBeenCalled();
+            expect(infoPanel.setHtmlContent).toHaveBeenCalledWith('<p>Info</p>');
+            for (const button of toggleButtons) {
+                expect(button.show).toHaveBeenCalled();
+                expect(button.off).toHaveBeenCalled();
+                expect(button.hide).not.toHaveBeenCalled();
+            }
+        });
+        it('should return early if infoPanel is not available', () => {
+            mockPlayerContext.npoPlayer.uiComponents.infoPanel = undefined;
+            addDataInInfoPanel(mockPlayerContext);
+            for (const button of toggleButtons) {
+                expect(button.show).not.toHaveBeenCalled();
+                expect(button.hide).not.toHaveBeenCalled();
+            }
+        });
+    });
+    describe('clearInfoPanel', () => {
+        it('should hide panel, clear content and hide all buttons', () => {
+            clearInfoPanel(mockPlayerContext);
+            expect(infoPanel.hide).toHaveBeenCalled();
+            expect(infoPanel.setHtmlContent).toHaveBeenCalledWith('');
+            for (const button of toggleButtons) {
+                expect(button.hide).toHaveBeenCalled();
+                expect(button.off).toHaveBeenCalled();
+            }
+        });
+        it('should return early if infoPanel is not available', () => {
+            mockPlayerContext.npoPlayer.uiComponents.infoPanel = undefined;
+            clearInfoPanel(mockPlayerContext);
+            for (const button of toggleButtons) {
+                expect(button.hide).not.toHaveBeenCalled();
+            }
+        });
+    });
+});

package/lib/services/keyboardHandlers/resolvekeypress.js

@@ -37,7 +37,7 @@ export function resolveKeyPress(playerContext, e) {
         ArrowLeft: () => npoPlayer.goBackwards(10),
         ArrowRight: () => npoPlayer.goForward(10),
         Escape: () => {
-            const { settingsPanels } = npoPlayer.uiComponents;
+            const { settingsPanels, infoPanel, infoPanelToggleButtons } = npoPlayer.uiComponents;
             if (settingsPanels && settingsPanels.length > 0) {
                 for (const panel of settingsPanels) {
                     if (panel.isShown()) {
@@ -45,6 +45,16 @@ export function resolveKeyPress(playerContext, e) {
                     }
                 }
             }
+            if (infoPanel && infoPanel.isShown()) {
+                infoPanel.hide();
+            }
+            if (infoPanelToggleButtons && infoPanelToggleButtons.length > 0) {
+                for (const button of infoPanelToggleButtons) {
+                    if (button.isOn()) {
+                        button.off();
+                    }
+                }
+            }
         }
     };
     const action = actions[e.code];

package/lib/services/keyboardHandlers/resolvekeypress.test.js

@@ -79,10 +79,14 @@ describe('resolveKeyPress', () => {
         resolveKeyPress(mockPlayerContext, { ...e, code: 'ArrowRight' });
         expect(mockNpoplayer.goForward).toHaveBeenCalledWith(10);
     });
-    it('should hide the settings panel when "Escape" is pressed', () => {
+    it('should hide the settings panel and info panel when "Escape" is pressed', () => {
+        resolveKeyPress(mockPlayerContext, { ...e, code: 'Escape' });
         if (mockNpoplayer.uiComponents.settingsPanels) {
-            resolveKeyPress(mockPlayerContext, { ...e, code: 'Escape' });
             expect(mockNpoplayer.uiComponents.settingsPanels[0].hide).toHaveBeenCalled();
         }
+        expect(mockNpoplayer.uiComponents.infoPanel?.hide).toHaveBeenCalled();
+        if (mockNpoplayer.uiComponents.infoPanelToggleButtons) {
+            expect(mockNpoplayer.uiComponents.infoPanelToggleButtons[0].off).toHaveBeenCalled();
+        }
     });
 });

package/lib/services/nicamHandlers/nicamhandler.d.ts

@@ -1,4 +1,5 @@
 import { PlayerContext } from '../../types/interfaces';
+export declare const SHOW_NICAM_AFTER_UI_HIDE_DURATION = 5000;
 export declare function processNicam(playerContext: PlayerContext, nicamElement: HTMLElement | undefined): void;
 export declare function addNicamIcon(character: string, nicamElement: Element): void;
 export declare function showNicamAfterUiDelay(playerContext: PlayerContext): void;

package/lib/services/nicamHandlers/nicamhandler.js

@@ -1,3 +1,4 @@
+export const SHOW_NICAM_AFTER_UI_HIDE_DURATION = 5000;
 export function processNicam(playerContext, nicamElement) {
     const streamOptions = playerContext.npoPlayer.streamOptions;
     const metadata = playerContext?.npoPlayer?.streamObject?.metadata ?? {};
@@ -55,7 +56,7 @@ export function showNicamAfterUiDelay(playerContext) {
         playerContainer.classList.add(showNicamClassName);
         setTimeout(() => {
             playerContainer.classList.remove(showNicamClassName);
-        }, 3000);
+        }, SHOW_NICAM_AFTER_UI_HIDE_DURATION);
     });
     uiManager?.activeUi.onControlsShow.subscribe(() => {
         playerContainer.classList.remove(showNicamClassName);

package/lib/services/nicamHandlers/nicamhandler.test.js

@@ -1,4 +1,4 @@
-import { processNicam, showNicamAfterUiDelay } from './nicamhandler';
+import { processNicam, SHOW_NICAM_AFTER_UI_HIDE_DURATION, showNicamAfterUiDelay } from './nicamhandler';
 import '@testing-library/jest-dom';
 import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
 describe('NICAM Processing', () => {
@@ -105,7 +105,7 @@ describe('NICAM Visibility Management', () => {
             showNicamAfterUiDelay(mockPlayerContext);
             mockUiManager.activeUi.onControlsHide.subscribe.mock.calls[0][0]();
             expect(mockContainer).toHaveClass(showNicamClass);
-            jest.advanceTimersByTime(3000);
+            jest.advanceTimersByTime(SHOW_NICAM_AFTER_UI_HIDE_DURATION);
             expect(mockContainer).not.toHaveClass(showNicamClass);
             jest.useRealTimers();
         });

package/lib/services/npoPlayerAPI/npoPlayerAPI.d.ts

@@ -1,4 +1,6 @@
-import { AdBreak, AdConfig, PlayerAPI, PlayerConfig, SourceConfig, TimeMode, ViewMode } from 'bitmovin-player';
+import { PlayerAPI, PlayerConfig, SourceConfig, TimeMode, VideoQuality, ViewMode } from 'bitmovin-player/modules/bitmovinplayer-core';
+import { AdBreak, AdConfig } from 'bitmovin-player/modules/bitmovinplayer-advertising-core';
+import { SubtitleTrack } from 'bitmovin-player/modules/bitmovinplayer-subtitles';
 import { UIManager } from 'bitmovin-player-ui';
 import { NpoPlayerUIVariants, PlayerContext, Technology } from 'types/interfaces';
 import { NpoPlayerEventCallback, NpoPlayerEvent } from '../../types/events';
@@ -40,8 +42,12 @@ export declare class NpoPlayerAPI {
     getDuration(): number;
     getTimeShift(): number;
     scheduleAds(adConfig: AdConfig): Promise<AdBreak[]>;
-    handleErrorRetry(playerContext: PlayerContext): void;
+    handleErrorRetry(playerContext: PlayerContext): Promise<void>;
     getActiveAdBreak(): AdBreak | null;
     getConfig(mergedConfig?: boolean): PlayerConfig;
     createUIManager(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void | UIManager;
+    getAvailableVideoQualities(): VideoQuality[];
+    listSubtitles(): SubtitleTrack[];
+    setPlaybackSpeed(speed: number): void;
+    setVideoQuality(VideoQualityId: string): void;
 }