@npo/player 1.26.0 → 1.27.0

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>;

package/lib/services/errors/errorText.js

@@ -0,0 +1,59 @@
+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.',
+    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.',
+    1106: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1107: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1108: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1113: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1200: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1201: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1202: 'Dit item kon niet worden geladen.',
+    1203: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
+    1204: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
+    1205: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
+    1206: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
+    1207: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1208: 'Dit item kon niet worden geladen.',
+    1209: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1210: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1211: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1301: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1304: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    1400: 'Er is iets mis met uw internet-verbinding',
+    1401: 'Er is een serverfout opgetreden. Controleer je internetverbinding.',
+    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.',
+    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',
+    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.',
+    2010: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
+    2011: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    2012: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    2013: 'Dit item is niet beschikbaar op dit apparaat. Controleer of jouw apparaat geschikt is voor het afspelen van beveiligde content.',
+    2015: 'Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    2101: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    3001: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    3002: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    3003: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    3004: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.',
+    4000: 'Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.'
+};
+export const npoBusinessErrors = {
+    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.',
+    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

@@ -0,0 +1,66 @@
+import { customSpecificErrorMessageOverlayConfig } from './errorText';
+describe('Test custom error messages', () => {
+    it('should return a 1000 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1000]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 1001 error message', () => {
+        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.');
+    });
+    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.');
+    });
+    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.');
+    });
+    it('should return a 1104 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1104]).toBe('Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 1113 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1113]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 1201 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1201]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 1202 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1202]).toBe('Dit item kon niet worden geladen.');
+    });
+    it('should return a 1203 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1203]).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 1400 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1400]).toBe('Er is iets mis met uw internet-verbinding');
+    });
+    it('should return a 1401 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1401]).toBe('Er is een serverfout opgetreden. Controleer je internetverbinding.');
+    });
+    it('should return a 1402 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[1402]).toBe('Er is een serverfout opgetreden. Controleer je internetverbinding.');
+    });
+    it('should return a 1403 error message', () => {
+        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');
+    });
+    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.');
+    });
+    it('should return a 2013 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[2013]).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 2015 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[2015]).toBe('Er is een licentie-fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 3001 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[3001]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 3003 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[3003]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+    it('should return a 4000 error message', () => {
+        expect(customSpecificErrorMessageOverlayConfig[4000]).toBe('Er is een onbekende fout opgetreden. Als het probleem zich blijft voordoen, neem dan contact op met onze klantenservice.');
+    });
+});

package/lib/services/keyboardHandlers/resolvekeypress.js

@@ -1,39 +1,43 @@
-import { ViewMode } from '../../types/interfaces';
+import { NpoPlayerUIVariants, ViewMode } from '../../types/interfaces';
 export function resolveKeyPress(playerContext, e) {
-    const isMuted = playerContext.player.isMuted() ?? false;
-    const isPaused = playerContext.player.isPaused() ?? false;
-    const viewMode = playerContext.player.getViewMode();
+    const { player, npoPlayer } = playerContext;
+    const isMuted = player.isMuted() ?? false;
+    const isPaused = player.isPaused() ?? false;
+    const viewMode = player.getViewMode();
+    const variant = npoPlayer.variant;
     if (['Space', 'ArrowUp', 'ArrowDown'].includes(e.code))
         e.preventDefault();
     const actions = {
-        KeyM: () => (isMuted ? playerContext.player.unmute() : playerContext.player.mute()),
-        KeyF: () => viewMode === ViewMode.Fullscreen
-            ? playerContext.player.setViewMode(ViewMode.Inline)
-            : playerContext.player.setViewMode(ViewMode.Fullscreen),
+        KeyM: () => (isMuted ? player.unmute() : player.mute()),
+        KeyF: () => viewMode === ViewMode.Fullscreen ? player.setViewMode(ViewMode.Inline) : player.setViewMode(ViewMode.Fullscreen),
         Space: () => {
             if (isPaused) {
-                playerContext.player.play().catch((error) => {
+                player.play().catch((error) => {
                     console.error('Failed to play:', error);
                 });
             }
             else {
-                playerContext.player.pause();
+                player.pause();
             }
         },
         ArrowUp: () => {
+            if (variant === NpoPlayerUIVariants.VERTICAL)
+                return;
             if (isMuted)
-                playerContext.player.unmute();
-            playerContext.npoPlayer.increaseVolume();
+                player.unmute();
+            npoPlayer.increaseVolume();
         },
         ArrowDown: () => {
+            if (variant === NpoPlayerUIVariants.VERTICAL)
+                return;
             if (isMuted)
-                playerContext.player.unmute();
-            playerContext.npoPlayer.decreaseVolume();
+                player.unmute();
+            npoPlayer.decreaseVolume();
         },
-        ArrowLeft: () => playerContext.npoPlayer.goBackwards(10),
-        ArrowRight: () => playerContext.npoPlayer.goForward(10),
+        ArrowLeft: () => npoPlayer.goBackwards(10),
+        ArrowRight: () => npoPlayer.goForward(10),
         Escape: () => {
-            const { settingsPanels } = playerContext.npoPlayer.uiComponents;
+            const { settingsPanels } = npoPlayer.uiComponents;
             if (settingsPanels && settingsPanels.length > 0) {
                 for (const panel of settingsPanels) {
                     if (panel.isShown()) {

package/lib/services/localStorageHandlers/localStorageHandlers.js

@@ -1,3 +1,4 @@
+import { NpoPlayerUIVariants } from '../../types/interfaces';
 export function setLocalStorage(key, value) {
     const prefixedKey = `npoplayer-${key}`;
     localStorage.setItem(prefixedKey, JSON.stringify(value));
@@ -18,12 +19,14 @@ export function getLocalStorage() {
 }
 export function setValuesBasedOnLocalStorage(playerContext) {
     const localStorageData = getLocalStorage();
-    const { player } = playerContext;
+    const { player, npoPlayer } = playerContext;
     if (!player) {
         console.error('Player is undefined in playerContext');
         return;
     }
-    player.setVolume(localStorageData.volume ?? 100);
+    if (npoPlayer.variant !== NpoPlayerUIVariants.VERTICAL) {
+        player.setVolume(localStorageData.volume ?? 100);
+    }
     if (localStorageData.ismuted === 'true') {
         player.mute();
     }

package/lib/services/localStorageHandlers/localStorageHandlers.test.js

@@ -64,7 +64,6 @@ describe('localStorageHandler', () => {
                     playerConfig: {},
                     initPlayer: () => { },
                     loadStream: () => Promise.resolve(),
-                    doError: () => { },
                     play: async () => { },
                     pause: () => { },
                     setVolume: () => { },

package/lib/services/nicamHandlers/nicamhandler.js

@@ -1,4 +1,3 @@
-import { NpoPlayerEvent } from '../../types/events';
 export function processNicam(playerContext, nicamElement) {
     const streamOptions = playerContext.npoPlayer.streamOptions;
     const metadata = playerContext?.npoPlayer?.streamObject?.metadata ?? {};
@@ -50,9 +49,6 @@ export function showNicamAfterUiDelay(playerContext) {
     const { uiManager } = npoPlayer;
     const showNicamClassName = 'bmpui-show-nicam';
     const playerContainer = player.getNpoPlayerElement();
-    player.off(NpoPlayerEvent.Ready, () => {
-        npoPlayer.npoPlayerServices.showNicamAfterUiDelay(playerContext);
-    });
     if (!playerContainer || !uiManager)
         return;
     uiManager.activeUi.onControlsHide.subscribe(() => {

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

@@ -1,7 +1,6 @@
 import { processNicam, showNicamAfterUiDelay } from './nicamhandler';
 import '@testing-library/jest-dom';
 import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
-import { NpoPlayerEvent } from '../../types/events';
 describe('NICAM Processing', () => {
     let mockElement;
     beforeEach(() => {
@@ -124,9 +123,5 @@ describe('NICAM Visibility Management', () => {
             expect(mockUiManager.activeUi.onControlsHide.subscribe).not.toHaveBeenCalled();
             expect(mockUiManager.activeUi.onControlsShow.subscribe).not.toHaveBeenCalled();
         });
-        it('should clean up event listeners when the player is ready', () => {
-            showNicamAfterUiDelay(mockPlayerContext);
-            expect(mockPlayer.off).toHaveBeenCalledWith(NpoPlayerEvent.Ready, expect.any(Function));
-        });
     });
 });

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

@@ -3,3 +3,23 @@ export declare const PREVENT_UI_DELAY = -1;
 export declare const VOLUME_STEP = 10;
 export declare const VOLUME_MIN = 0;
 export declare const VOLUME_MAX = 100;
+export declare const emptyStreamObject: {
+    stream: {
+        drmType: string;
+        streamProfile: string;
+        streamURL: string;
+        avType: string;
+        sourceProfile: string;
+    };
+    metadata: {
+        title: string;
+        description: string;
+    };
+    assets: {
+        scrubbingThumbnail: string;
+        subtitles: never[];
+    };
+    user: {
+        type: "anonymous" | "plus";
+    };
+};

package/lib/services/npoPlayerAPI/contants.js

@@ -3,3 +3,9 @@ export const PREVENT_UI_DELAY = -1;
 export const VOLUME_STEP = 10;
 export const VOLUME_MIN = 0;
 export const VOLUME_MAX = 100;
+export const emptyStreamObject = {
+    stream: { drmType: '', streamProfile: '', streamURL: '', avType: '', sourceProfile: '' },
+    metadata: { title: '', description: '' },
+    assets: { scrubbingThumbnail: '', subtitles: [] },
+    user: { type: 'anonymous' }
+};

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

@@ -6,6 +6,7 @@ export declare class NpoPlayerAPI {
     playerAPI: PlayerAPI;
     constructor(playerAPI: PlayerAPI);
     load(sourceConfig: SourceConfig): Promise<void>;
+    unload(): Promise<void>;
     play(): Promise<void>;
     pause(): void;
     mute(): void;
@@ -27,6 +28,7 @@ export declare class NpoPlayerAPI {
     off(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     on(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     isCastAvailable(): boolean;
+    isCasting(): boolean;
     seek(time: number): void;
     timeShift(time: number): void;
     getContainer(): HTMLElement;
@@ -38,7 +40,8 @@ export declare class NpoPlayerAPI {
     getDuration(): number;
     getTimeShift(): number;
     scheduleAds(adConfig: AdConfig): Promise<AdBreak[]>;
+    handleErrorRetry(playerContext: PlayerContext): void;
     getActiveAdBreak(): AdBreak | null;
     getConfig(mergedConfig?: boolean): PlayerConfig;
-    createUIManager(playerContext: PlayerContext, variant: NpoPlayerUIVariants): Promise<void | UIManager>;
+    createUIManager(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void | UIManager;
 }

package/lib/services/npoPlayerAPI/npoPlayerAPI.js

@@ -1,5 +1,5 @@
 import { UIManager } from 'bitmovin-player-ui';
-import { customSpecificErrorMessageOverlayConfig } from '../../js/playeractions/handlers/customerrors';
+import { customSpecificErrorMessageOverlayConfig } from '../errors/errorText';
 import { createUIContainer } from '../../ui/uicontainer';
 import { playerEventMap } from '../../types/events';
 import { VOLUME_MAX, VOLUME_MIN, VOLUME_STEP } from './contants';
@@ -11,8 +11,19 @@ export class NpoPlayerAPI {
     async load(sourceConfig) {
         await this.playerAPI.load(sourceConfig);
     }
+    async unload() {
+        await this.playerAPI.unload();
+    }
     async play() {
-        await this.playerAPI.play();
+        await this.playerAPI.play().catch((error) => {
+            console.error('Playback error:', error);
+            if (error.code === 1201) {
+                console.error('No source was loaded. Please load a source before playing.');
+            }
+            else {
+                console.error('An unexpected playback error occurred.');
+            }
+        });
     }
     pause() {
         this.playerAPI.pause();
@@ -95,6 +106,9 @@ export class NpoPlayerAPI {
     isCastAvailable() {
         return this.playerAPI.isCastAvailable();
     }
+    isCasting() {
+        return this.playerAPI.isCasting();
+    }
     seek(time) {
         this.playerAPI.seek(time);
     }
@@ -128,25 +142,35 @@ export class NpoPlayerAPI {
     async scheduleAds(adConfig) {
         return this.playerAPI.ads.schedule(adConfig);
     }
+    handleErrorRetry(playerContext) {
+        if (playerContext.npoPlayer.streamOptions.retryCallback === undefined) {
+            console.error('No retry callback found in stream options');
+            return;
+        }
+        return playerContext.npoPlayer.streamOptions.retryCallback();
+    }
     getActiveAdBreak() {
         return this.playerAPI.ads.getActiveAdBreak();
     }
     getConfig(mergedConfig) {
         return this.playerAPI.getConfig(mergedConfig);
     }
-    async createUIManager(playerContext, variant) {
+    createUIManager(playerContext, variant) {
         const { npoPlayerServices } = playerContext.npoPlayer;
-        npoPlayerServices.removeUivisiblityHandlers(playerContext);
         if (playerContext.npoPlayer.uiManager === undefined || variant !== playerContext.npoPlayer.variant) {
+            npoPlayerServices.removeUivisiblityHandlers(playerContext);
             const uiConfig = {
                 errorMessages: customSpecificErrorMessageOverlayConfig,
                 disableAutoHideWhenHovered: true,
                 seekbarSnappingEnabled: false
             };
-            playerContext.npoPlayer.variant = variant;
+            npoPlayerServices.removeUivisiblityHandlers(playerContext);
+            playerContext.npoPlayer.uiManager?.release();
             const uiManager = new UIManager(this.playerAPI, createUIContainer(playerContext, this.playerAPI, variant), uiConfig);
             playerContext.npoPlayer.uiManager = uiManager;
+            playerContext.npoPlayer.variant = variant;
             npoPlayerServices.addUivisiblityHandlers(playerContext);
+            npoPlayerServices.showNicamAfterUiDelay(playerContext);
         }
     }
 }

package/lib/services/npoPlayerAPI/npoPlayerAPI.test.js

@@ -20,9 +20,20 @@ describe('NpoPlayerAPI', () => {
         npoPlayerAPI = new NpoPlayerAPI(mockPlayerAPI);
     });
     it('should call play on the PlayerAPI', async () => {
+        mockPlayerAPI.play.mockResolvedValueOnce(undefined);
         await npoPlayerAPI.play();
         expect(mockPlayerAPI.play).toHaveBeenCalled();
     });
+    it('should handle error when play throws an error', async () => {
+        const error = { code: 1201, message: 'No source loaded' };
+        mockPlayerAPI.play.mockRejectedValueOnce(error);
+        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {
+        });
+        await npoPlayerAPI.play();
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Playback error:', error);
+        expect(consoleErrorSpy).toHaveBeenCalledWith('No source was loaded. Please load a source before playing.');
+        consoleErrorSpy.mockRestore();
+    });
     it('should call pause on the PlayerAPI', () => {
         npoPlayerAPI.pause();
         expect(mockPlayerAPI.pause).toHaveBeenCalled();

package/lib/services/services.d.ts

@@ -1,4 +1,4 @@
-import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, NpoPlayerUIVariants } from '../types/interfaces';
+import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, StreamObject, PlayerTrackerParams, LogEventParams } from '../types/interfaces';
 import { AVType } from '@npotag/tag/dist/types/src/streamTracker';
 export declare class NpoPlayerServices {
     getAVType(avType: string): AVType;
@@ -13,11 +13,17 @@ export declare class NpoPlayerServices {
     setAccessibilityAttributes(playerContext: PlayerContext): void;
     schedulePreRolls(playerContext: PlayerContext): Promise<void>;
     discardAdBreak(playerContext: PlayerContext): void;
-    handleVerticalVideoControls(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void;
+    handleVerticalVideoControls(playerContext: PlayerContext): void;
+    handleVerticalVideoSettings(playerContext: PlayerContext): void;
     showNicamAfterUiDelay(playerContext: PlayerContext | undefined): void;
     setupNicamKijkwijzerIcons(playerContext: PlayerContext): void;
     handlePreferences(playerContext: PlayerContext): void;
     addUivisiblityHandlers(playerContext: PlayerContext): void;
     removeUivisiblityHandlers(playerContext: PlayerContext): void;
     handleStreamOptions(playerContext: PlayerContext): void;
+    handleError(playerContext: PlayerContext, input: number): Promise<void>;
+    fetchStream(playerContext: PlayerContext, payload: ApiPayload): Promise<StreamObject>;
+    startPlayerTracker({ playerContext, source, duration }: PlayerTrackerParams): void;
+    initPlayerTracker(playerContext: PlayerContext): void;
+    logEvent({ playerContext, event, data }: LogEventParams): void;
 }

package/lib/services/services.js

@@ -7,11 +7,15 @@ import { getLocalStorage, setLocalStorage, setValuesBasedOnLocalStorage } from '
 import { getAVType } from './avTypeHandlers/getAVType';
 import { handlePreRolls } from './advertHandlers/handlePreRolls';
 import { handleVerticalVideoControls } from './verticalVideoHandlers/handleVerticalVideoControls';
+import { handleVerticalVideoSettings } from './verticalVideoHandlers/handleVerticalVideoSettings';
 import { setupNicamKijkwijzerIcons, showNicamAfterUiDelay } from './nicamHandlers/nicamhandler';
 import { handlePreferences } from './preferences/handlePreferences';
 import { addUivisiblityHandlers, removeUivisiblityHandlers } from './uiHandlers/uiVisiblityHandler';
 import { discardAdBreak } from './advertHandlers/discardAdBreak';
 import { handleStreamOptions } from './streamoptionsHandlers/streamOptionsHandler';
+import { handlePlayerError } from './errors/errorHandler';
+import { fetchStream } from './streamFetchHandler/fetchStream';
+import { startPlayerTracker, initPlayerTracker, logEvent } from './trackingHandlers';
 export class NpoPlayerServices {
     getAVType(avType) {
         return getAVType(avType);
@@ -57,8 +61,11 @@ export class NpoPlayerServices {
     discardAdBreak(playerContext) {
         discardAdBreak(playerContext);
     }
-    handleVerticalVideoControls(playerContext, variant) {
-        return handleVerticalVideoControls(playerContext, variant);
+    handleVerticalVideoControls(playerContext) {
+        return handleVerticalVideoControls(playerContext);
+    }
+    handleVerticalVideoSettings(playerContext) {
+        return handleVerticalVideoSettings(playerContext);
     }
     showNicamAfterUiDelay(playerContext) {
         return showNicamAfterUiDelay(playerContext);
@@ -78,4 +85,23 @@ export class NpoPlayerServices {
     handleStreamOptions(playerContext) {
         handleStreamOptions(playerContext);
     }
+    async handleError(playerContext, input) {
+        await handlePlayerError(playerContext, input);
+    }
+    async fetchStream(playerContext, payload) {
+        return await fetchStream(playerContext, payload);
+    }
+    startPlayerTracker({ playerContext, source, duration }) {
+        startPlayerTracker({
+            playerContext,
+            source,
+            duration
+        });
+    }
+    initPlayerTracker(playerContext) {
+        initPlayerTracker(playerContext);
+    }
+    logEvent({ playerContext, event, data }) {
+        logEvent({ playerContext, event, data });
+    }
 }

package/lib/services/streamFetchHandler/fetchStream.d.ts

@@ -0,0 +1,2 @@
+import { type ApiPayload, PlayerContext, StreamObject } from '../../types/interfaces';
+export declare function fetchStream(playerContext: PlayerContext, payload: ApiPayload): Promise<StreamObject>;