@npo/player 1.27.7 → 1.28.0

package/lib/services/npoPlayerAPI/npoPlayerAPI.js

@@ -4,6 +4,7 @@ import { createUIContainer } from '../../ui/uicontainer';
 import { playerEventMap } from '../../types/events';
 import { VOLUME_MAX, VOLUME_MIN, VOLUME_STEP } from './contants';
 import { localizationConfig } from '../../js/settings/localization';
+import { handleErrorRetry } from '../../services/errors/errorRetryHandler';
 const externalCallbacksMap = new WeakMap();
 export class NpoPlayerAPI {
     constructor(playerAPI) {
@@ -57,17 +58,19 @@ export class NpoPlayerAPI {
         return this.playerAPI.getViewMode();
     }
     areSubtitlesEnabled() {
-        return this.playerAPI.subtitles.list().some((subtitle) => subtitle.enabled);
+        const subtitles = this.listSubtitles();
+        return subtitles ? subtitles.some((subtitle) => subtitle.enabled) : false;
     }
     getCurrentSubtitle() {
-        const currentSubtitle = this.playerAPI.subtitles.list().find((subtitle) => subtitle.enabled);
+        const subtitles = this.listSubtitles();
+        const currentSubtitle = subtitles.find((subtitle) => subtitle.enabled);
         return currentSubtitle ? currentSubtitle.lang : undefined;
     }
     enableSubtitles(selectedLang = 'nl') {
-        const subtitleTracks = this.playerAPI.subtitles.list();
+        const subtitleTracks = this.listSubtitles();
         const subtitleToEnable = subtitleTracks.find((subtitle) => subtitle.lang === selectedLang);
         if (subtitleToEnable && !subtitleToEnable.enabled) {
-            this.playerAPI.subtitles.enable(subtitleToEnable.id);
+            this.playerAPI.subtitles?.enable(subtitleToEnable.id);
         }
     }
     isPaused() {
@@ -80,7 +83,7 @@ export class NpoPlayerAPI {
         return this.playerAPI.isLive();
     }
     async getSupportedDRM() {
-        return (await this.playerAPI.getSupportedDRM());
+        return await this.playerAPI.getSupportedDRM();
     }
     getSupportedTech() {
         return this.playerAPI.getSupportedTech();
@@ -143,12 +146,8 @@ 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();
+    async handleErrorRetry(playerContext) {
+        return handleErrorRetry(playerContext);
     }
     getActiveAdBreak() {
         return this.playerAPI.ads.getActiveAdBreak();
@@ -168,12 +167,26 @@ export class NpoPlayerAPI {
             npoPlayerServices.removeUivisiblityHandlers(playerContext);
             playerContext.npoPlayer.uiManager?.release();
             UIManager.setLocalizationConfig(localizationConfig);
-            const uiManager = new UIManager(this.playerAPI, createUIContainer(playerContext, this.playerAPI, variant), uiConfig);
+            const uiContainer = createUIContainer(playerContext, variant);
+            const uiManager = new UIManager(this.playerAPI, uiContainer, uiConfig);
             playerContext.npoPlayer.uiManager = uiManager;
             playerContext.npoPlayer.variant = variant;
             npoPlayerServices.addUivisiblityHandlers(playerContext);
             npoPlayerServices.setupNicamKijkwijzerIcons(playerContext);
             npoPlayerServices.showNicamAfterUiDelay(playerContext);
+            npoPlayerServices.addDataInInfoPanel(playerContext);
         }
     }
+    getAvailableVideoQualities() {
+        return this.playerAPI.getAvailableVideoQualities();
+    }
+    listSubtitles() {
+        return this.playerAPI.subtitles?.list() || [];
+    }
+    setPlaybackSpeed(speed) {
+        this.playerAPI.setPlaybackSpeed(speed);
+    }
+    setVideoQuality(VideoQualityId) {
+        this.playerAPI.setVideoQuality(VideoQualityId);
+    }
 }

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

@@ -0,0 +1 @@
+export declare const playerModules: any[];

package/lib/services/npoPlayerAPI/playerModules.js

@@ -0,0 +1,46 @@
+import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
+import EngineNativeModule from 'bitmovin-player/modules/bitmovinplayer-engine-native';
+import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
+import DashModule from 'bitmovin-player/modules/bitmovinplayer-dash';
+import ContainerMP4 from 'bitmovin-player/modules/bitmovinplayer-container-mp4';
+import ContainerTS from 'bitmovin-player/modules/bitmovinplayer-container-ts';
+import AbrModule from 'bitmovin-player/modules/bitmovinplayer-abr';
+import DrmModule from 'bitmovin-player/modules/bitmovinplayer-drm';
+import XmlModule from 'bitmovin-player/modules/bitmovinplayer-xml';
+import Subtitles from 'bitmovin-player/modules/bitmovinplayer-subtitles';
+import SubtitlesWebVTT from 'bitmovin-player/modules/bitmovinplayer-subtitles-vtt';
+import SubtitlesCEA608 from 'bitmovin-player/modules/bitmovinplayer-subtitles-cea608';
+import SubtitlesTTML from 'bitmovin-player/modules/bitmovinplayer-subtitles-ttml';
+import SubtitlesNative from 'bitmovin-player/modules/bitmovinplayer-subtitles-native';
+import AdvertisingCoreModule from 'bitmovin-player/modules/bitmovinplayer-advertising-core';
+import AdvertisingBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
+import AnalyticsModule from 'bitmovin-player/modules/bitmovinplayer-analytics';
+import HlsModule from 'bitmovin-player/modules/bitmovinplayer-hls';
+import StyleModule from 'bitmovin-player/modules/bitmovinplayer-style';
+import CryptoModule from 'bitmovin-player/modules/bitmovinplayer-crypto';
+import PatchModule from 'bitmovin-player/modules/bitmovinplayer-patch';
+import ThumbnailModule from 'bitmovin-player/modules/bitmovinplayer-thumbnail';
+export const playerModules = [
+    EngineBitmovinModule,
+    EngineNativeModule,
+    XmlModule,
+    MseRendererModule,
+    AbrModule,
+    HlsModule,
+    DrmModule,
+    DashModule,
+    ContainerMP4,
+    ContainerTS,
+    CryptoModule,
+    PatchModule,
+    Subtitles,
+    SubtitlesCEA608,
+    SubtitlesWebVTT,
+    SubtitlesTTML,
+    SubtitlesNative,
+    StyleModule,
+    AdvertisingCoreModule,
+    AdvertisingBitmovinModule,
+    AnalyticsModule,
+    ThumbnailModule
+];

package/lib/services/preferences/handlePreferences.js

@@ -3,7 +3,7 @@ import { LocalStorageValues } from '../../types/interfaces';
 export function handlePreferences(playerContext) {
     const { player, npoPlayer } = playerContext;
     const { npoPlayerServices } = npoPlayer;
-    const handleSourceLoaded = () => {
+    const handleReady = () => {
         const storedUserPrefs = npoPlayerServices.getStoredUserPrefs();
         const subtitlesEnabledInPrefs = storedUserPrefs?.subtitles_enabled === 'true';
         const preferredSubtitleLang = storedUserPrefs?.subtitles_language?.toString();
@@ -13,8 +13,8 @@ export function handlePreferences(playerContext) {
         }
     };
     const handleSubtitleEnabled = () => {
-        const currentSubtitleTrack = player.playerAPI.subtitles.list();
-        const enabledSubtitle = currentSubtitleTrack.find((subtitle) => subtitle.enabled);
+        const subtitlesList = player.listSubtitles();
+        const enabledSubtitle = subtitlesList.find((subtitle) => subtitle.enabled);
         if (enabledSubtitle) {
             npoPlayerServices.setStoredUserPrefs(LocalStorageValues.SUBTITLES_LANGUAGE, enabledSubtitle.lang);
             npoPlayerServices.setStoredUserPrefs(LocalStorageValues.SUBTITLES_ENABLED, 'true');
@@ -29,11 +29,16 @@ export function handlePreferences(playerContext) {
     };
     const handleMuted = () => {
         npoPlayerServices.setStoredUserPrefs(LocalStorageValues.IS_MUTED, 'true');
+        const volume = player.getVolume();
+        if (volume === 0) {
+            player.setVolume(100);
+            player.mute();
+        }
     };
     const handleUnmuted = () => {
         npoPlayerServices.setStoredUserPrefs(LocalStorageValues.IS_MUTED, 'false');
     };
-    player.on(NpoPlayerEvent.SourceLoaded, handleSourceLoaded);
+    player.on(NpoPlayerEvent.Ready, handleReady);
     player.on(NpoPlayerEvent.SubtitleEnabled, handleSubtitleEnabled);
     player.on(NpoPlayerEvent.SubtitleDisabled, handleSubtitleDisabled);
     player.on(NpoPlayerEvent.VolumeChanged, handleVolumeChanged);

package/lib/services/preferences/handlePreferences.test.js

@@ -2,20 +2,14 @@ import createPlayerContextMock, { createMockNpoPlayer, createMockNpoPlayerAPI }
 import { handlePreferences } from './handlePreferences';
 import { NpoPlayerEvent } from '../../types/events';
 import { LocalStorageValues } from '../../types/interfaces';
+const setupServicesErrorMessage = 'mockNpoPlayer.npoPlayerServices is undefined, test setup is incorrect';
+const setupStreamOptionsErrorMessage = 'mockNpoPlayer.streamOptions is undefined, test setup is incorrect';
 describe('handlePreferences', () => {
     let mockPlayerAPI;
     let mockNpoPlayer;
+    let playerContextMock;
     beforeEach(() => {
-        mockPlayerAPI = createMockNpoPlayerAPI({
-            getVolume: jest.fn().mockReturnValue(50),
-            on: jest.fn(),
-            enableSubtitles: jest.fn(),
-            playerAPI: {
-                subtitles: {
-                    list: jest.fn()
-                }
-            }
-        });
+        mockPlayerAPI = createMockNpoPlayerAPI();
         mockNpoPlayer = createMockNpoPlayer({
             streamOptions: {
                 enableSubtitles: false
@@ -28,42 +22,54 @@ describe('handlePreferences', () => {
                 setStoredUserPrefs: jest.fn()
             }
         });
-        const playerContextMock = createPlayerContextMock({
+        playerContextMock = createPlayerContextMock({
             player: mockPlayerAPI,
             npoPlayer: mockNpoPlayer
         });
         handlePreferences(playerContextMock);
     });
     test('should enable subtitles if streamOptions.enableSubtitles is true', () => {
+        if (!mockNpoPlayer.streamOptions) {
+            throw new Error(setupStreamOptionsErrorMessage);
+        }
         mockNpoPlayer.streamOptions.enableSubtitles = true;
         for (const [event, callback] of mockPlayerAPI.on.mock.calls) {
-            if (event === NpoPlayerEvent.SourceLoaded) {
-                callback(NpoPlayerEvent.SourceLoaded);
+            if (event === NpoPlayerEvent.Ready) {
+                callback(NpoPlayerEvent.Ready);
             }
         }
         expect(mockPlayerAPI.enableSubtitles).toHaveBeenCalledWith('nl');
     });
     test('should enable subtitles if subtitles_enabled in preferences is true', () => {
+        if (!mockNpoPlayer.streamOptions) {
+            throw new Error(setupStreamOptionsErrorMessage);
+        }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         mockNpoPlayer.streamOptions.enableSubtitles = false;
         mockNpoPlayer.npoPlayerServices.getStoredUserPrefs.mockReturnValueOnce({
             subtitles_enabled: 'true',
             subtitles_language: 'nl'
         });
         for (const [event, callback] of mockPlayerAPI.on.mock.calls) {
-            if (event === NpoPlayerEvent.SourceLoaded) {
-                callback(NpoPlayerEvent.SourceLoaded);
+            if (event === NpoPlayerEvent.Ready) {
+                callback(NpoPlayerEvent.Ready);
             }
         }
         expect(mockPlayerAPI.enableSubtitles).toHaveBeenCalledWith('nl');
     });
     test('should disable subtitles and set the preferences', () => {
         ;
-        mockPlayerAPI.playerAPI.subtitles.list.mockReturnValueOnce([{ lang: 'nl', enabled: true }]);
+        mockPlayerAPI.listSubtitles.mockReturnValueOnce([{ lang: 'nl', enabled: true }]);
         for (const [event, callback] of mockPlayerAPI.on.mock.calls) {
             if (event === NpoPlayerEvent.SubtitleEnabled) {
                 callback(NpoPlayerEvent.SubtitleEnable);
             }
         }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.SUBTITLES_LANGUAGE, 'nl');
         expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.SUBTITLES_ENABLED, 'true');
     });
@@ -73,6 +79,9 @@ describe('handlePreferences', () => {
                 callback(NpoPlayerEvent.SubtitleDisabled);
             }
         }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.SUBTITLES_ENABLED, 'false');
     });
     test('should set volume preferences', () => {
@@ -81,15 +90,39 @@ describe('handlePreferences', () => {
                 callback(NpoPlayerEvent.VolumeChanged);
             }
         }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.VOLUME, 50);
     });
-    test('should set muted preferences', () => {
+    test('should set muted preferences with volume > 0', () => {
         for (const [event, callback] of mockPlayerAPI.on.mock.calls) {
             if (event === NpoPlayerEvent.Muted) {
                 callback(NpoPlayerEvent.Muted);
             }
         }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.IS_MUTED, 'true');
+        expect(mockPlayerAPI.getVolume).toHaveBeenCalled();
+        expect(mockPlayerAPI.setVolume).not.toHaveBeenCalled();
+    });
+    test('should set muted preferences and reset volume when volume === 0', () => {
+        ;
+        mockPlayerAPI.getVolume.mockReturnValueOnce(0);
+        for (const [event, callback] of mockPlayerAPI.on.mock.calls) {
+            if (event === NpoPlayerEvent.Muted) {
+                callback(NpoPlayerEvent.Muted);
+            }
+        }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
+        expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.IS_MUTED, 'true');
+        expect(mockPlayerAPI.getVolume).toHaveBeenCalled();
+        expect(mockPlayerAPI.setVolume).toHaveBeenCalledWith(100);
+        expect(mockPlayerAPI.mute).toHaveBeenCalled();
     });
     test('should set unmuted preferences', () => {
         for (const [event, callback] of mockPlayerAPI.on.mock.calls) {
@@ -97,6 +130,9 @@ describe('handlePreferences', () => {
                 callback(NpoPlayerEvent.Unmuted);
             }
         }
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         expect(mockNpoPlayer.npoPlayerServices.setStoredUserPrefs).toHaveBeenCalledWith(LocalStorageValues.IS_MUTED, 'false');
     });
 });

package/lib/services/segmentHandlers/addSegmentEventListeners.test.js

@@ -1,4 +1,4 @@
-import { PlayerEvent } from 'bitmovin-player';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { addSegmentEventListeners } from './addSegmentEventListeners';
 import { handleSegmentTimeChanged } from './handleSegmentTimeChanged';
 import { handleSegmentSeek } from './handleSegmentSeek';

package/lib/services/segmentHandlers/isSegmentInBounds.d.ts

@@ -0,0 +1,2 @@
+import { Segment } from 'types/interfaces';
+export declare function isSegmentInBounds(segment: Segment | undefined, duration: number): boolean;

package/lib/services/segmentHandlers/isSegmentInBounds.js

@@ -0,0 +1,5 @@
+export function isSegmentInBounds(segment, duration) {
+    if (!segment)
+        return true;
+    return segment.inpoint < duration && segment.outpoint < duration;
+}

package/lib/services/segmentHandlers/isSegmentInBounds.test.d.ts

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

package/lib/services/segmentHandlers/isSegmentInBounds.test.js

@@ -0,0 +1,27 @@
+import { isSegmentInBounds } from './isSegmentInBounds';
+describe('isSegmentInBounds', () => {
+    const DUMMY_DURATION = 100;
+    it('returns true if segment is undefined', () => {
+        expect(isSegmentInBounds(undefined, DUMMY_DURATION)).toBe(true);
+    });
+    it('returns true if inpoint and outpoint are within duration', () => {
+        const segment = { inpoint: 10, outpoint: 50, duration: 40 };
+        expect(isSegmentInBounds(segment, DUMMY_DURATION)).toBe(true);
+    });
+    it('returns false if inpoint is greater than or equal to duration', () => {
+        const segment = { inpoint: 100, outpoint: 110, duration: 10 };
+        expect(isSegmentInBounds(segment, DUMMY_DURATION)).toBe(false);
+    });
+    it('returns false if outpoint is greater than or equal to duration', () => {
+        const segment = { inpoint: 10, outpoint: 120, duration: 110 };
+        expect(isSegmentInBounds(segment, DUMMY_DURATION)).toBe(false);
+    });
+    it('returns false if both inpoint and outpoint are greater than duration', () => {
+        const segment = { inpoint: 150, outpoint: 200, duration: 50 };
+        expect(isSegmentInBounds(segment, DUMMY_DURATION)).toBe(false);
+    });
+    it('returns false if outpoint is equal to duration', () => {
+        const segment = { inpoint: 10, outpoint: 100, duration: 90 };
+        expect(isSegmentInBounds(segment, DUMMY_DURATION)).toBe(false);
+    });
+});

package/lib/services/services.d.ts

@@ -1,4 +1,4 @@
-import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, StreamObject, PlayerTrackerParams, LogEventParams } from '../types/interfaces';
+import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, StreamObject, PlayerTrackerParams, LogEventParams, LogErrorParams } from '../types/interfaces';
 import { AVType } from '@npotag/tag/dist/types/src/streamTracker';
 export declare class NpoPlayerServices {
     getAVType(avType: string): AVType;
@@ -21,10 +21,13 @@ export declare class NpoPlayerServices {
     addUivisiblityHandlers(playerContext: PlayerContext): void;
     removeUivisiblityHandlers(playerContext: PlayerContext): void;
     handleStreamOptions(playerContext: PlayerContext): void;
-    handleError(playerContext: PlayerContext, input: number): Promise<void>;
+    handleError({ playerContext, status: input, context: context }: LogErrorParams): 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;
     removeEventListeners(playerContext: PlayerContext): void;
+    isSegmentInBounds(playerContext: PlayerContext): boolean;
+    addDataInInfoPanel(playerContext: PlayerContext): void;
+    clearInfoPanel(playerContext: PlayerContext): void;
 }

package/lib/services/services.js

@@ -17,6 +17,8 @@ import { handlePlayerError } from './errors/errorHandler';
 import { fetchStream } from './streamFetchHandler/fetchStream';
 import { startPlayerTracker, initPlayerTracker, logEvent } from './trackingHandlers';
 import { removeEventListeners } from './eventListenerHandlers/removeEventListeners';
+import { isSegmentInBounds } from './segmentHandlers/isSegmentInBounds';
+import { addDataInInfoPanel, clearInfoPanel } from './infoPanel/infoPanel';
 export class NpoPlayerServices {
     getAVType(avType) {
         return getAVType(avType);
@@ -86,8 +88,8 @@ export class NpoPlayerServices {
     handleStreamOptions(playerContext) {
         handleStreamOptions(playerContext);
     }
-    async handleError(playerContext, input) {
-        await handlePlayerError(playerContext, input);
+    async handleError({ playerContext, status: input, context: context }) {
+        await handlePlayerError({ playerContext, status: input, context: context });
     }
     async fetchStream(playerContext, payload) {
         return await fetchStream(playerContext, payload);
@@ -108,4 +110,15 @@ export class NpoPlayerServices {
     removeEventListeners(playerContext) {
         removeEventListeners(playerContext);
     }
+    isSegmentInBounds(playerContext) {
+        const segment = playerContext.npoPlayer.streamObject.segment;
+        const duration = playerContext.player.getDuration();
+        return isSegmentInBounds(segment, duration);
+    }
+    addDataInInfoPanel(playerContext) {
+        addDataInInfoPanel(playerContext);
+    }
+    clearInfoPanel(playerContext) {
+        clearInfoPanel(playerContext);
+    }
 }

package/lib/services/streamFetchHandler/fetchStream.js

@@ -3,10 +3,10 @@ export async function fetchStream(playerContext, payload) {
     const { npoPlayer } = playerContext;
     const genericError = 'Dit item on niet worden geladen.';
     let hasHandledError = false;
-    const handleStreamError = async (status, message) => {
+    const handleStreamError = async ({ status, message, context }) => {
         if (!hasHandledError) {
             hasHandledError = true;
-            await npoPlayer.npoPlayerServices.handleError(playerContext, status);
+            await npoPlayer.npoPlayerServices.handleError({ playerContext, status, context });
         }
         throw new Error(message);
     };
@@ -33,7 +33,8 @@ export async function fetchStream(playerContext, payload) {
         }
         else {
             const status = streamApiResponse?.status || 500;
-            return await handleStreamError(status, genericError);
+            const context = streamApiResponse?.context || undefined;
+            return await handleStreamError({ status, message: genericError, context });
         }
     }
     catch (error) {
@@ -41,7 +42,7 @@ export async function fetchStream(playerContext, payload) {
             const errorMessage = error instanceof Error && error.message === 'AbortError'
                 ? 'aborterror'
                 : 'Dit item on niet worden geladen. Het ophalen van de stream duurde te lang.';
-            return await handleStreamError(500, errorMessage);
+            return await handleStreamError({ status: 500, message: errorMessage });
         }
         throw error;
     }

package/lib/services/streamFetchHandler/fetchstream.test.js

@@ -1,5 +1,6 @@
 import { fetchStream } from './fetchStream';
 import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
+const setupServicesErrorMessage = 'mockNpoPlayer.npoPlayerServices is undefined, test setup is incorrect';
 describe('fetchStream', () => {
     let mockPlayerContext;
     let mockNpoPlayer;
@@ -35,6 +36,9 @@ describe('fetchStream', () => {
             }),
             body: JSON.stringify(mockPayload.data)
         }));
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
         expect(mockNpoPlayer.npoPlayerServices.handleError).not.toHaveBeenCalled();
     });
     it('calls handleError with 402 status and throws an error', async () => {
@@ -43,17 +47,35 @@ describe('fetchStream', () => {
             json: jest.fn().mockResolvedValue({ status: 402 })
         });
         await expect(fetchStream(mockPlayerContext, mockPayload)).rejects.toThrow('Dit item on niet worden geladen.');
-        expect(mockNpoPlayer.npoPlayerServices.handleError).toHaveBeenCalledWith(mockPlayerContext, 402);
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
+        expect(mockNpoPlayer.npoPlayerServices.handleError).toHaveBeenCalledWith({
+            playerContext: mockPlayerContext,
+            status: 402
+        });
     });
     it('calls handleError with 500 for timeout (AbortError)', async () => {
         global.fetch = jest.fn().mockImplementation(() => new Promise((_, reject) => reject(new Error('AbortError'))));
         await expect(fetchStream(mockPlayerContext, mockPayload)).rejects.toThrow('aborterror');
-        expect(mockNpoPlayer.npoPlayerServices.handleError).toHaveBeenCalledWith(mockPlayerContext, 500);
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
+        expect(mockNpoPlayer.npoPlayerServices.handleError).toHaveBeenCalledWith({
+            playerContext: mockPlayerContext,
+            status: 500
+        });
     });
     it('calls handleError with 500 for unexpected errors', async () => {
         global.fetch = jest.fn().mockRejectedValue(new Error('Unexpected error'));
         await expect(fetchStream(mockPlayerContext, mockPayload)).rejects.toThrow('Dit item on niet worden geladen. Het ophalen van de stream duurde te lang.');
-        expect(mockNpoPlayer.npoPlayerServices.handleError).toHaveBeenCalledWith(mockPlayerContext, 500);
+        if (!mockNpoPlayer.npoPlayerServices) {
+            throw new Error(setupServicesErrorMessage);
+        }
+        expect(mockNpoPlayer.npoPlayerServices.handleError).toHaveBeenCalledWith({
+            playerContext: mockPlayerContext,
+            status: 500
+        });
     });
     it('clears the timeout if fetch resolves before timeout', async () => {
         jest.useFakeTimers();

package/lib/services/streamoptionsHandlers/streamOptionsHandler.js

@@ -4,12 +4,13 @@ import { handleLiveStreamControls } from '../liveStreamHandlers/handleLiveStream
 import { NpoPlayerEvent } from '../../types/events';
 import { updateClassFromElementByQuery } from '../../js/utilities/utilities.element';
 export function handleStreamOptions(playerContext) {
-    const { streamObject, uiManager } = playerContext.npoPlayer;
+    const { streamObject, uiManager, npoPlayerServices } = playerContext.npoPlayer;
     if (!streamObject || !uiManager)
         return;
     initializeFragment(playerContext);
     handleStartOffset(playerContext);
     updateStreamClasses(playerContext);
+    npoPlayerServices.addDataInInfoPanel(playerContext);
     const isAutoplayEnabled = getAutoplayStatus(playerContext);
     if (isAutoplayEnabled) {
         setupAutoplay(playerContext);
@@ -29,27 +30,28 @@ export function handleStartOffset(playerContext) {
     }
 }
 export function updateStreamClasses(playerContext) {
-    const { streamObject, container } = playerContext.npoPlayer;
+    const { npoPlayer } = playerContext;
+    const { streamObject, container } = npoPlayer;
+    const { isLiveStream, hasDvrWindow, avType } = streamObject.stream;
     const containerClassString = '.bmpui-ui-uicontainer';
-    const playerContainer = container;
     const queries = [
         {
-            container: playerContainer,
+            container,
             query: containerClassString,
             className: 'livestream-no-dvr',
-            condition: !!(streamObject.stream.isLiveStream && !streamObject.stream.hasDvrWindow)
+            condition: !!(isLiveStream && !hasDvrWindow)
         },
         {
-            container: playerContainer,
+            container,
             query: containerClassString,
             className: 'audio-only',
-            condition: !!(streamObject.stream.avType === 'aod' || streamObject.stream.avType === 'audio')
+            condition: avType === 'aod' || avType === 'audio'
         },
         {
-            container: playerContainer,
+            container,
             query: '.bitmovinplayer-poster',
             className: 'audio-only',
-            condition: !!(streamObject.stream.avType === 'aod' || streamObject.stream.avType === 'audio')
+            condition: avType === 'aod' || avType === 'audio'
         }
     ];
     for (const query of queries)

package/lib/services/streamoptionsHandlers/streamOptionsHandler.test.js

@@ -47,10 +47,11 @@ describe('handleStreamOptions', () => {
         expect(handleStartOffset(playerContextMock)).toHaveBeenCalled;
         expect(updateStreamClasses(playerContextMock)).toHaveBeenCalled;
         expect(setupAutoplay(playerContextMock)).toHaveBeenCalled;
+        expect(playerContextMock.npoPlayer.npoPlayerServices.addDataInInfoPanel(playerContextMock)).toHaveBeenCalled;
     });
     it('should return early if uiManager is missing', () => {
         const npoPlayerMock = createMockNpoPlayer({
-            UIManager: null
+            UIManager: undefined
         });
         const playerContextMock = createPlayerContextMock({
             npoPlayer: npoPlayerMock
@@ -60,7 +61,7 @@ describe('handleStreamOptions', () => {
     });
     it('should return early if streamObject is missing', () => {
         const npoPlayerMock = createMockNpoPlayer({
-            streamObject: null
+            streamObject: undefined
         });
         const playerContextMock = createPlayerContextMock({
             npoPlayer: npoPlayerMock
@@ -119,6 +120,17 @@ describe('handleStreamOptions', () => {
             });
             updateStreamClasses(playerContextMock);
             expect(updateClassFromElementByQuery).toHaveBeenCalledWith(expect.objectContaining({
+                query: '.bmpui-ui-uicontainer',
+                className: 'livestream-no-dvr',
+                condition: false
+            }));
+            expect(updateClassFromElementByQuery).toHaveBeenCalledWith(expect.objectContaining({
+                query: '.bmpui-ui-uicontainer',
+                className: 'audio-only',
+                condition: true
+            }));
+            expect(updateClassFromElementByQuery).toHaveBeenCalledWith(expect.objectContaining({
+                query: '.bitmovinplayer-poster',
                 className: 'audio-only',
                 condition: true
             }));