@npo/player 1.24.6 → 1.25.0

package/lib/npoplayer.js

@@ -11,19 +11,16 @@ import { isMediaUrl, isUrl } from './js/utilities/utilities.url';
 import { logVersion } from './js/utilities/utilities.version';
 import { getStreamDurationInSeconds } from './js/utilities/utilities.stream';
 import { LogEmitter } from './types/classes';
-import { handlePreRolls } from './services/advertHandlers/handlePreRolls';
 import pkg from '../package.json';
 import { NpoPlayerUIVariants, LocalStorageValues } from './types/interfaces';
 import { nativeMobileUiFactory } from './ui/nativemobileuifactory';
 import { setupMediaSessionActionHandlers } from './js/playeractions/handlers/mediasessionactions';
 import { removeReplayClass } from './js/playeractions/handlers/removereplayclass';
-import { showNicamAfterUiDelay } from './ui/handlers/nicamhandler';
 import { updateLiveMarkers } from './js/markers/updateLiveMarkers';
 import { NpoPlayerAPI } from './services/npoPlayerAPI/npoPlayerAPI';
-import { discardAdBreak } from './services/advertHandlers/discardAdBreak';
 export { NpoPlayerUIVariants };
 export default class NpoPlayer {
-    constructor(_container, _playerConfig, _npotag, _npotaginstance, _variant) {
+    constructor(container, playerConfig, npoTag, npoTagInstance, variant, npoTagPageTracker) {
         this.sourceConfig = {};
         this.streamObject = {
             stream: { drmType: '', streamProfile: '', streamURL: '', avType: '', sourceProfile: '' },
@@ -33,6 +30,9 @@ export default class NpoPlayer {
         };
         this.player = undefined;
         this.uiManager = undefined;
+        this.npoTagInitialisation = undefined;
+        this.npoTagInstance = undefined;
+        this.npoTagPageTracker = undefined;
         this.streamTracker = undefined;
         this.logEmitter = new LogEmitter();
         this.uiComponents = {};
@@ -48,11 +48,32 @@ export default class NpoPlayer {
         this.npoplayerServices = new NpoPlayerServices();
         this.eventListeners = undefined;
         this.userPreferences = {};
-        this.playerConfig = _playerConfig;
-        this.container = _container;
-        this.variant = _variant || NpoPlayerUIVariants.DEFAULT;
-        initPlayerTracker(this, _npotag, _npotaginstance);
-        this.initPlayer(this.container, _playerConfig);
+        if (typeof container === 'object' && !(container instanceof HTMLElement)) {
+            const params = container;
+            this.container = params.container;
+            this.playerConfig = params.playerConfig;
+            this.npoTagInitialisation = params.npoTag || undefined;
+            this.npoTagInstance = params.npoTagInstance;
+            this.variant = params.variant || NpoPlayerUIVariants.DEFAULT;
+            this.npoTagPageTracker = params.npoTagPageTracker || undefined;
+        }
+        else {
+            this.container = container;
+            this.playerConfig = playerConfig || undefined;
+            this.npoTagInitialisation = npoTag || undefined;
+            this.npoTagInstance = npoTagInstance;
+            this.variant = variant || NpoPlayerUIVariants.DEFAULT;
+            this.npoTagPageTracker = npoTagPageTracker || undefined;
+            console.warn('As of NPO Player version 1.25, parameter-based initialization has been deprecated in favor of object-based initialization. This feature will be removed in version 2.0. Please update your implementation to ensure compatibility. For more details, refer to the documentation at: https://docs.npoplayer.nl/implementation/web/player.');
+        }
+        if (!this.playerConfig) {
+            console.error('Player configuration is missing. Ensure that playerConfig is properly initialized before using the player.');
+            return;
+        }
+        if (this.npoTagInstance) {
+            initPlayerTracker(this, this.npoTagInitialisation, this.npoTagInstance, this.npoTagPageTracker);
+        }
+        this.initPlayer(this.container, this.playerConfig);
     }
     initPlayer(_container, playerConfig) {
         const processedPlayerConfig = playerAction.processPlayerConfig(this, playerConfig);
@@ -84,8 +105,9 @@ export default class NpoPlayer {
             console.error('Er is nog geen player geladen.');
             return;
         }
-        if (this.playerContext) {
-            discardAdBreak(this.playerContext);
+        if (this.adBreakActive) {
+            const currentAd = this.player.ads.getActiveAdBreak().id;
+            this.player.ads.discardAdBreak(currentAd);
         }
         let _streamObject;
         const sourceIsUrl = isUrl(source);
@@ -105,7 +127,7 @@ export default class NpoPlayer {
                 analytics: {
                     customData2: 'other',
                     customData3: 'unknown',
-                    customData4: this.npoTag?.npoTagInstance?.getParty(),
+                    customData4: this.npoTagInstance?.getParty(),
                     customData5: this.version
                 }
             };
@@ -146,7 +168,7 @@ export default class NpoPlayer {
             if (this.streamObject?.stream == undefined)
                 return;
             const drmType = this.streamObject.stream.drmType ?? undefined;
-            this.sourceConfig = await playerAction.processSourceConfig(this.npoplayerServices, options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : undefined, this.streamOptions, this.version, this.npoTag?.npoTagInstance?.getParty(), this.npoplayerServices);
+            this.sourceConfig = await playerAction.processSourceConfig(this.npoplayerServices, source, options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : undefined, this.streamOptions, this.version, this.npoTag?.npoTagInstance);
             await this.npoplayerServices.verifyDRM(this.playerContext, payload);
             setupMediaSessionActionHandlers(this.player, this.sourceConfig, _streamObject);
             logEvent(this, 'load');
@@ -170,7 +192,7 @@ export default class NpoPlayer {
                 this.streamObject.assets.preroll) {
                 this.player.on(PlayerEvent.AdBreakFinished, initAndStartTracker);
                 this.player.on(PlayerEvent.AdError, initAndStartTracker);
-                await handlePreRolls(this.playerContext);
+                await this.npoplayerServices.schedulePreRolls(this.playerContext);
             }
             else {
                 initAndStartTracker();
@@ -179,12 +201,11 @@ export default class NpoPlayer {
         else {
             this.doError(`Het is niet gelukt de stream op te halen: \n Input is geen valide token of media object.`, 500);
         }
+        this.npoplayerServices.setupNicamKijkwijzerIcons(this.playerContext);
+        this.player.on(PlayerEvent.Play, () => {
+            this.npoplayerServices.showNicamAfterUiDelay(this.playerContext, this.uiManager);
+        });
         this.npoplayerServices.handleVerticalVideoControls(this.playerContext, this.variant);
-        if (this.sourceConfig?.metadata) {
-            this.sourceConfig.metadata.jwt = source;
-            this.sourceConfig.metadata.streamLinkAsJsonString = JSON.stringify(this.streamObject);
-            this.sourceConfig.metadata.npoTagSession = String(this.npoTag?.npoTagInstance?.getSerializedSessionInfo());
-        }
         this.player.on(PlayerEvent.Seek, () => {
             removeReplayClass(this.player);
         });
@@ -196,16 +217,13 @@ export default class NpoPlayer {
                 this.hidePlayNextScreen();
             });
         }
-        this.player.on(PlayerEvent.Play, () => {
-            showNicamAfterUiDelay(this.player, this.uiManager);
-        });
         const setLiveOffsetListener = function () {
             if (this.playerContext === undefined)
                 return;
-            this.player?.off(PlayerEvent.SourceLoaded, setLiveOffsetListener);
+            this.player?.off(PlayerEvent.Ready, setLiveOffsetListener);
             playerAction.handleLiveOffsetLogic(this.playerContext, options);
         }.bind(this);
-        this.player.on(PlayerEvent.SourceLoaded, setLiveOffsetListener);
+        this.player.on(PlayerEvent.Ready, setLiveOffsetListener);
     }
     doError(input, status) {
         if (this.player == undefined)
@@ -307,7 +325,7 @@ export default class NpoPlayer {
         const destroyLogic = async () => {
             try {
                 if (this.npoTag != undefined) {
-                    clearInterval(this.npoTag.heartbeatInterval);
+                    clearInterval(this.npoTag?.heartbeatInterval);
                 }
                 logEvent(this, 'stop');
                 this.uiManager?.release();
@@ -332,9 +350,6 @@ export default class NpoPlayer {
                 if (this.npoTag != undefined) {
                     clearInterval(this.npoTag.heartbeatInterval);
                 }
-                if (this.playerContext) {
-                    discardAdBreak(this.playerContext);
-                }
                 this.hidePlayNextScreen();
                 await this.player?.unload();
                 return true;

package/lib/npoplayer.test.js

@@ -3,12 +3,20 @@ const div = document.createElement('div');
 const testPlayerConfig = {
     key: 'dummy-key'
 };
-jest.mock('./ui/handlers/streamhandler', () => ({
-    processStream: jest.fn()
+jest.mock('./services/streamoptionsHandlers/steamOptionsHandler', () => ({
+    handleStreamOptions: jest.fn()
 }));
 let player;
-test('player init', async () => {
+test('player init with parameters', async () => {
     player = new NpoPlayer(div, testPlayerConfig);
     expect(player).toBeInstanceOf(NpoPlayer);
-    expect(player.playerConfig.key).toBe(testPlayerConfig.key);
+    expect(player.playerConfig?.key).toBe(testPlayerConfig.key);
+});
+test('player init with parameters', async () => {
+    player = new NpoPlayer({
+        container: div,
+        playerConfig: testPlayerConfig
+    });
+    expect(player).toBeInstanceOf(NpoPlayer);
+    expect(player.playerConfig?.key).toBe(testPlayerConfig.key);
 });

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.24.6",
+  "version": "1.25.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@npotag/tag": "3.2.1",
-    "bitmovin-player": "8.173.0",
+    "bitmovin-player": "^8.166.0",
     "bitmovin-player-ui": "3.67.0"
   },
   "browserslist": [

package/lib/services/cdnProviders/cdnProviders.js

@@ -2,9 +2,11 @@ export function createImmutableMap(entries) {
     const map = new Map(entries);
     return Object.freeze(map);
 }
+const nepFastlyProvider = 'NEP-FASTLY';
 export const npoCdnProvidersData = [
-    ['nep.global.ssl.fastly.net', 'NEP-FASTLY'],
-    ['npo-fsly.cdn.streamgate.io', 'NEP-FASTLY'],
+    ['nep.global.ssl.fastly.net', nepFastlyProvider],
+    ['npo-fsly.cdn.streamgate.io', nepFastlyProvider],
+    ['npo-fsly-2.cdn.streamgate.io', nepFastlyProvider],
     ['cdn.streamgate.nl', 'NEP'],
     ['pr.lswcdn.net', 'NEP-LSW'],
     ['cdn.eurovisioncdn.net', 'EUROVISION'],

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

@@ -0,0 +1,6 @@
+import { UIManager } from 'bitmovin-player-ui';
+import { PlayerContext } from '../../types/interfaces';
+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, uiManager: UIManager | undefined): void;
+export declare function setupNicamKijkwijzerIcons(playerContext: PlayerContext): void;

package/lib/{ui/handlers → services/nicamHandlers}/nicamhandler.js

@@ -1,6 +1,8 @@
-import { PlayerEvent } from 'bitmovin-player';
-export function processNicam(streamObject, nicamElement, streamOptions) {
-    const effectiveMetadata = streamOptions ? { ...streamObject.metadata, ...streamOptions } : streamObject.metadata;
+import { NpoPlayerEvent } from '../../types/events';
+export function processNicam(playerContext, nicamElement) {
+    const streamOptions = playerContext.npoplayer.streamOptions;
+    const metadata = playerContext?.npoplayer?.streamObject?.metadata ?? {};
+    const effectiveMetadata = { ...metadata, ...streamOptions };
     if (nicamElement) {
         nicamElement.innerHTML = '';
         if (effectiveMetadata.ageRating !== undefined && isNicamIconValid(effectiveMetadata.ageRating.toLowerCase())) {
@@ -43,9 +45,10 @@ export function addNicamIcon(character, nicamElement) {
     span.classList.add('nicam-icon', iconClass);
     nicamElement.appendChild(span);
 }
-export function showNicamAfterUiDelay(player, uiManager) {
-    player.off(PlayerEvent.Play, () => {
-        showNicamAfterUiDelay(player, uiManager);
+export function showNicamAfterUiDelay(playerContext, uiManager) {
+    const player = playerContext.player;
+    player.off(NpoPlayerEvent.Play, () => {
+        showNicamAfterUiDelay(playerContext, uiManager);
     });
     if (uiManager === null)
         return;
@@ -61,3 +64,8 @@ export function showNicamAfterUiDelay(player, uiManager) {
         }, 3000);
     });
 }
+export function setupNicamKijkwijzerIcons(playerContext) {
+    const { container } = playerContext.npoplayer;
+    const nicamElement = container.querySelector('.bmpui-nicam');
+    processNicam(playerContext, nicamElement);
+}

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

@@ -0,0 +1,69 @@
+import { processNicam } from './nicamhandler';
+import '@testing-library/jest-dom';
+import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
+describe('NICAM Processing', () => {
+    let mockElement;
+    beforeEach(() => {
+        mockElement = { innerHTML: '', appendChild: jest.fn() };
+        document.querySelector = jest.fn().mockReturnValue(mockElement);
+    });
+    it('processes NICAM from the streamObject', () => {
+        const mockElement = document.createElement('div');
+        const npoplayerMock = createMockNpoPlayer({
+            streamObject: {
+                metadata: {
+                    ageRating: '12',
+                    nicam: ['GEWELD', 'ANGST', 'DRUGS_EN_ALCOHOL', 'GROF_TAALGEBRUIK']
+                }
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        processNicam(playerContextMock, mockElement);
+        expect(mockElement.children).toHaveLength(5);
+    });
+    it('processes NICAM and age rating with streamOptions taking priority', () => {
+        const mockElement = document.createElement('div');
+        const npoplayerMock = createMockNpoPlayer({
+            streamObject: {
+                metadata: {
+                    ageRating: '12',
+                    nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK']
+                }
+            },
+            streamOptions: {
+                ageRating: '16',
+                nicam: ['DRUGS_EN_ALCOHOL']
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        processNicam(playerContextMock, mockElement);
+        expect(mockElement.children).toHaveLength(2);
+    });
+    it('does nothing if no NICAM element found', () => {
+        document.querySelector = jest.fn().mockReturnValue(undefined);
+        const npoplayerMock = createMockNpoPlayer({
+            streamObject: {
+                metadata: {
+                    ageRating: '12',
+                    nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK']
+                }
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        processNicam(playerContextMock, mockElement);
+    });
+    it('does nothing if no metadata and no streamOptions', () => {
+        const npoplayerMock = createMockNpoPlayer({});
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        processNicam(playerContextMock, mockElement);
+        expect(mockElement.appendChild).not.toHaveBeenCalled();
+    });
+});

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

@@ -25,6 +25,7 @@ export declare class NpoPlayerAPI {
     getSupportedTech(): Technology[];
     off(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     on(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
+    isCastAvailable(): boolean;
     seek(time: number): void;
     timeShift(time: number): void;
     getContainer(): HTMLElement;

package/lib/services/npoPlayerAPI/npoPlayerAPI.js

@@ -1,6 +1,6 @@
 import { UIManager } from 'bitmovin-player-ui';
 import { customSpecificErrorMessageOverlayConfig } from '../../js/playeractions/handlers/customerrors';
-import { processStream } from '../../ui/handlers/streamhandler';
+import { handleStreamOptions } from '../streamoptionsHandlers/steamOptionsHandler';
 import { createUIContainer } from '../../ui/uicontainer';
 import { playerEventMap } from '../../types/events';
 import { VOLUME_MAX, VOLUME_MIN, VOLUME_STEP } from './contants';
@@ -99,6 +99,9 @@ export class NpoPlayerAPI {
         }
         this.playerAPI.on(externalEventType, externalCallback);
     }
+    isCastAvailable() {
+        return this.playerAPI.isCastAvailable();
+    }
     seek(time) {
         this.playerAPI.seek(time);
     }
@@ -148,9 +151,9 @@ export class NpoPlayerAPI {
                 disableAutoHideWhenHovered: true,
                 seekbarSnappingEnabled: false
             };
-            playerContext.npoplayer.uiManager = new UIManager(this.playerAPI, createUIContainer(playerContext.npoplayer, this.playerAPI, variant, playerContext.npoplayer.container), uiConfig);
+            playerContext.npoplayer.uiManager = new UIManager(this.playerAPI, createUIContainer(playerContext, this.playerAPI, variant), uiConfig);
             playerContext.npoplayer.variant = variant;
         }
-        processStream(playerContext);
+        handleStreamOptions(playerContext);
     }
 }

package/lib/services/segmentHandlers/setSegmentMarkers.js

@@ -1,4 +1,4 @@
-import * as nlJson from '../../lang/nl.json';
+import nlJson from '../../lang/nl.json';
 export function setSegmentMarkers(segment, title) {
     const unplayableClass = 'seekbar-marker-unplayable';
     const unplayableTitle = nlJson['segment.unplayableTitle'];

package/lib/services/services.d.ts

@@ -1,5 +1,6 @@
 import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, NpoPlayerUIVariants } from '../types/interfaces';
 import { AVType } from '@npotag/tag/dist/types/src/streamTracker';
+import { UIManager } from 'bitmovin-player-ui';
 export declare class NpoPlayerServices {
     getAVType(avType: string): AVType;
     keyboardHandler(playerContext: PlayerContext, e: KeyboardEvent): void;
@@ -13,4 +14,6 @@ export declare class NpoPlayerServices {
     setAccessibilityAttributes(playerContext: PlayerContext): void;
     schedulePreRolls(playerContext: PlayerContext): Promise<void>;
     handleVerticalVideoControls(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void;
+    showNicamAfterUiDelay(playerContext: PlayerContext | undefined, uiManager: UIManager | undefined): void;
+    setupNicamKijkwijzerIcons(playerContext: PlayerContext): void;
 }

package/lib/services/services.js

@@ -7,6 +7,7 @@ import { getLocalStorage, setLocalStorage, setValuesBasedOnLocalStorage } from '
 import { getAVType } from './avTypeHandlers/getAVType';
 import { handlePreRolls } from './advertHandlers/handlePreRolls';
 import { handleVerticalVideoControls } from './verticalVideoHandlers/handleVerticalVideoControls';
+import { setupNicamKijkwijzerIcons, showNicamAfterUiDelay } from './nicamHandlers/nicamhandler';
 export class NpoPlayerServices {
     getAVType(avType) {
         return getAVType(avType);
@@ -52,4 +53,10 @@ export class NpoPlayerServices {
     handleVerticalVideoControls(playerContext, variant) {
         return handleVerticalVideoControls(playerContext, variant);
     }
+    showNicamAfterUiDelay(playerContext, uiManager) {
+        return showNicamAfterUiDelay(playerContext, uiManager);
+    }
+    setupNicamKijkwijzerIcons(playerContext) {
+        return setupNicamKijkwijzerIcons(playerContext);
+    }
 }

package/lib/services/streamoptionsHandlers/steamOptionsHandler.d.ts

@@ -0,0 +1,6 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function handleStreamOptions(playerContext: PlayerContext): void;
+export declare function initializeFragment(playerContext: PlayerContext): void;
+export declare function handleStartOffset(playerContext: PlayerContext): void;
+export declare function updateStreamClasses(playerContext: PlayerContext): void;
+export declare function setupAutoplay(playerContext: PlayerContext): void;

package/lib/services/streamoptionsHandlers/steamOptionsHandler.js

@@ -0,0 +1,78 @@
+import * as playerAction from '../../js/playeractions/playeractions';
+import { initSegment } from '../../services/segmentHandlers/initSegment';
+import { handleLiveStreamControls } from '../../services/liveStreamHandlers/handleLiveStreamControls';
+import { removeEventListeners } from '../../services/eventListenerHandlers/removeEventListeners';
+import { NpoPlayerEvent } from '../../types/events';
+import { updateClassFromElementByQuery } from '../../js/utilities/utilities.element';
+export function handleStreamOptions(playerContext) {
+    const { streamObject, uiManager } = playerContext.npoplayer;
+    if (!streamObject || !uiManager)
+        return;
+    removeEventListeners(playerContext);
+    initializeFragment(playerContext);
+    handleStartOffset(playerContext);
+    updateStreamClasses(playerContext);
+    const isAutoplayEnabled = getAutoplayStatus(playerContext);
+    if (isAutoplayEnabled) {
+        setupAutoplay(playerContext);
+    }
+}
+export function initializeFragment(playerContext) {
+    const { streamObject, streamOptions } = playerContext.npoplayer;
+    initSegment(playerContext, {
+        segment: streamObject.segment,
+        fragment: streamOptions?.fragments
+    });
+}
+export function handleStartOffset(playerContext) {
+    const streamOptions = playerContext.npoplayer.streamOptions;
+    if (streamOptions?.startOffset) {
+        playerAction.handleStartOffset(playerContext, streamOptions.startOffset);
+    }
+}
+export function updateStreamClasses(playerContext) {
+    const { streamObject, container } = playerContext.npoplayer;
+    const containerClassString = '.bmpui-ui-uicontainer';
+    const playerContainer = container;
+    const queries = [
+        {
+            container: playerContainer,
+            query: containerClassString,
+            className: 'livestream-no-dvr',
+            condition: !!(streamObject.stream.isLiveStream && !streamObject.stream.hasDvrWindow)
+        },
+        {
+            container: playerContainer,
+            query: containerClassString,
+            className: 'audio-only',
+            condition: !!(streamObject.stream.avType === 'aod' || streamObject.stream.avType === 'audio')
+        },
+        {
+            container: playerContainer,
+            query: '.bitmovinplayer-poster',
+            className: 'audio-only',
+            condition: !!(streamObject.stream.avType === 'aod' || streamObject.stream.avType === 'audio')
+        }
+    ];
+    for (const query of queries)
+        updateClassFromElementByQuery(query);
+    if (streamObject.stream.isLiveStream && streamObject.stream.hasDvrWindow) {
+        handleLiveStreamControls(playerContext);
+    }
+}
+function getAutoplayStatus(playerContext) {
+    return (playerContext.npoplayer.streamOptions?.autoplay ?? playerContext.player.getConfig()?.playback?.autoplay ?? false);
+}
+export function setupAutoplay(playerContext) {
+    const player = playerContext.player;
+    const handleAutoPlay = () => {
+        doAutoPlay().catch((error) => {
+            console.error('Error attempting to autoplay:', error);
+        });
+    };
+    const doAutoPlay = async () => {
+        player.off(NpoPlayerEvent.SourceLoaded, handleAutoPlay);
+        await player.play();
+    };
+    player.on(NpoPlayerEvent.SourceLoaded, handleAutoPlay);
+}