@npo/player 1.24.6 → 1.25.0

package/README.md

@@ -11,7 +11,7 @@ Extensive and up-to-date documentation is available at https://docs.npoplayer.nl
 Code quality is analysed by SonarCloud. The project can be found at https://sonarcloud.io/project/overview?id=NPOstart_npo-player
 
 # Changelog
-Current version: v1.24.0
+Current version: v1.25.0
 
 The changelog is available at https://docs.npoplayer.nl/implementation/web/changelog/
 

package/lib/js/api/getstreamobject.test.js

@@ -2,8 +2,8 @@ import { getStreamObject } from './getstreamobject';
 import NpoPlayer from '../../npoplayer';
 import fetchMock from 'jest-fetch-mock';
 fetchMock.enableMocks();
-jest.mock('../../ui/handlers/streamhandler', () => ({
-    processStream: jest.fn()
+jest.mock('../../services/streamoptionsHandlers/steamOptionsHandler', () => ({
+    handleStreamOptions: jest.fn()
 }));
 describe('getStreamObject', () => {
     let npoplayer;

package/lib/js/playeractions/handlers/processplayerconfig.js

@@ -32,6 +32,20 @@ export function processPlayerConfig(npoplayer, playerConfig) {
         }
     };
     processedConfig.remotecontrol = mergedRemoteControlConfig;
+    if (processedConfig.cast) {
+        console.warn("'cast' is deprecated in playerConfig. Please use 'remotecontrol' with 'GoogleCastRemoteControlConfig' instead.");
+        processedConfig.remotecontrol = {
+            ...processedConfig.remotecontrol,
+            customReceiverConfig: {
+                ...processedConfig.remotecontrol.customReceiverConfig,
+                ...processedConfig.cast,
+                enable: processedConfig.remotecontrol.customReceiverConfig?.enable ??
+                    (typeof processedConfig.cast?.enable === 'boolean'
+                        ? processedConfig.cast.enable.toString()
+                        : processedConfig.cast?.enable)
+            }
+        };
+    }
     if (!processedConfig.logs)
         processedConfig.logs = {
             level: LogLevel.ERROR

package/lib/js/playeractions/handlers/processplayerconfig.test.d.ts

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

package/lib/js/playeractions/handlers/processplayerconfig.test.js

@@ -0,0 +1,116 @@
+import { LogLevel } from 'bitmovin-player';
+import { isSafari } from '../../utilities/utilities.user-agent';
+import { processPlayerConfig } from './processplayerconfig';
+jest.mock('../../utilities/utilities.user-agent', () => ({
+    isSafari: jest.fn()
+}));
+const mockNpoPlayer = {
+    drmProfile: {
+        drm: 'mockDrm',
+        profileName: 'mockProfileName'
+    },
+    jwt: 'mockJwt'
+};
+describe('processPlayerConfig', () => {
+    let playerConfig;
+    beforeEach(() => {
+        playerConfig = {
+            key: 'dummy-key'
+        };
+    });
+    test('should disable autoplay and fix DRM issues on Safari', () => {
+        ;
+        isSafari.mockReturnValue(true);
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.playback?.autoplay).toBe(false);
+        expect(processedConfig.tweaks?.fairplay_ignore_duplicate_init_data_key_errors).toBe(true);
+    });
+    test('should always set bitmovin logging to false', () => {
+        playerConfig.logs = { bitmovin: true };
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.logs?.bitmovin).toEqual(false);
+    });
+    test('make sure there is an (empty) advertising object', () => {
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.advertising).toEqual({});
+    });
+    test('should set default remoteControlConfig if none is provided', () => {
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.remotecontrol).toEqual({
+            type: 'googlecast',
+            receiverApplicationId: 'CC38EB17',
+            receiverVersion: 'v3',
+            messageNamespace: 'urn:x-cast:com.bitmovin.player.caf',
+            customReceiverConfig: {
+                drm: 'mockDrm',
+                profileName: 'mockProfileName',
+                jwt: 'mockJwt'
+            }
+        });
+    });
+    test('should merge default remoteControlConfig with user-defined remoteControlConfig', () => {
+        playerConfig.remotecontrol = {
+            type: 'googlecast',
+            receiverApplicationId: 'user-receiver-application-id',
+            customReceiverConfig: {
+                primaryColor: 'rgb(255, 0, 0)',
+                enable: 'false'
+            }
+        };
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.remotecontrol).toEqual({
+            type: 'googlecast',
+            receiverApplicationId: 'user-receiver-application-id',
+            receiverVersion: 'v3',
+            messageNamespace: 'urn:x-cast:com.bitmovin.player.caf',
+            customReceiverConfig: {
+                drm: 'mockDrm',
+                profileName: 'mockProfileName',
+                jwt: 'mockJwt',
+                primaryColor: 'rgb(255, 0, 0)',
+                enable: 'false'
+            }
+        });
+    });
+    test('should convert deprecated cast configuration', () => {
+        playerConfig.cast = {
+            enable: false
+        };
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.remotecontrol?.customReceiverConfig?.enable).toBe('false');
+    });
+    test('should prefer customReceiverConfig over cast property', () => {
+        playerConfig = {
+            ...playerConfig,
+            cast: {
+                enable: false
+            }
+        };
+        playerConfig.remotecontrol = {
+            type: 'googlecast',
+            customReceiverConfig: {
+                enable: 'true'
+            }
+        };
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.remotecontrol?.customReceiverConfig?.enable).toBe('true');
+    });
+    test('should set default log level if logs are undefined', () => {
+        delete playerConfig.logs;
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.logs).toEqual({
+            bitmovin: false,
+            level: LogLevel.ERROR
+        });
+    });
+    test('should not set default log level if logs are defined', () => {
+        playerConfig.logs = {
+            level: LogLevel.WARN
+        };
+        const processedConfig = processPlayerConfig(mockNpoPlayer, playerConfig);
+        expect(processedConfig.logs).toEqual({
+            bitmovin: false,
+            level: LogLevel.WARN
+        });
+    });
+});

package/lib/js/playeractions/handlers/processsourceconfig.d.ts

@@ -1,4 +1,5 @@
 import { StreamObject, StreamOptions } from 'types/interfaces';
 import { SourceConfig } from 'bitmovin-player';
 import { NpoPlayerServices } from '../../../services/services';
-export declare function processSourceConfig(NpoPlayerServices: NpoPlayerServices, _sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | undefined, streamOptions: StreamOptions, version: string, npoTagPartyId: string | undefined, npoPlayerServices: NpoPlayerServices): Promise<SourceConfig>;
+import { NPOTag } from '@npotag/tag';
+export declare function processSourceConfig(npoPlayerServices: NpoPlayerServices, source: string, _sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | undefined, streamOptions: StreamOptions, version: string, npoTagInstance: NPOTag | undefined): Promise<SourceConfig>;

package/lib/js/playeractions/handlers/processsourceconfig.js

@@ -102,7 +102,7 @@ function setStreamProfile(sourceConfig, _sourceConfig, _streamObject) {
     }
     return sourceConfig;
 }
-export async function processSourceConfig(NpoPlayerServices, _sourceConfig = {}, _streamObject, drm = undefined, streamOptions, version, npoTagPartyId, npoPlayerServices) {
+export async function processSourceConfig(npoPlayerServices, source, _sourceConfig = {}, _streamObject, drm = undefined, streamOptions, version, npoTagInstance) {
     let sourceConfig = {};
     sourceConfig.title = _sourceConfig.title
         ? replacePlaceholders(_sourceConfig.title, _streamObject.metadata)
@@ -118,11 +118,11 @@ export async function processSourceConfig(NpoPlayerServices, _sourceConfig = {},
     };
     if (streamOptions.fragments || _streamObject.segment) {
         const segment = streamOptions.fragments
-            ? NpoPlayerServices.convertFragmentToSegment(streamOptions.fragments)
+            ? npoPlayerServices.convertFragmentToSegment(streamOptions.fragments)
             : _streamObject.segment;
         if (segment) {
             ;
-            sourceConfig.markers = NpoPlayerServices.segmentMarkersHandler(segment, sourceConfig.metadata.title);
+            sourceConfig.markers = npoPlayerServices.segmentMarkersHandler(segment, sourceConfig.metadata.title);
         }
     }
     sourceConfig.subtitleTracks =
@@ -140,7 +140,6 @@ export async function processSourceConfig(NpoPlayerServices, _sourceConfig = {},
         _sourceConfig.thumbnailTrack ?? _streamObject.assets.scrubbingThumbnail
             ? { url: _streamObject.assets.scrubbingThumbnail }
             : undefined;
-    sourceConfig.options = _sourceConfig.options;
     sourceConfig = setStreamProfile(sourceConfig, _sourceConfig, _streamObject);
     sourceConfig = await setDrm(sourceConfig, drm, _streamObject, streamOptions.useWidevineServerCertificate ?? true);
     const streamSource = _streamObject.stream.streamURL;
@@ -162,7 +161,7 @@ export async function processSourceConfig(NpoPlayerServices, _sourceConfig = {},
     sourceConfig.analytics.title = _streamObject.metadata.title;
     sourceConfig.analytics.customData2 = _streamObject.user.type;
     sourceConfig.analytics.customData3 = npoPlayerServices.getAVType(_streamObject.stream.avType);
-    sourceConfig.analytics.customData4 = npoTagPartyId;
+    sourceConfig.analytics.customData4 = npoTagInstance?.getParty();
     sourceConfig.analytics.customData5 = version;
     sourceConfig.analytics = {
         ...sourceConfig.analytics,
@@ -180,6 +179,18 @@ export async function processSourceConfig(NpoPlayerServices, _sourceConfig = {},
             }
         };
     }
+    sourceConfig.metadata = {
+        ...sourceConfig.metadata
+    };
+    sourceConfig.metadata.jwt = source;
+    sourceConfig.metadata.streamLinkAsJsonString = JSON.stringify(_streamObject);
+    sourceConfig.metadata.npoTagSession = String(npoTagInstance?.getSerializedSessionInfo());
+    sourceConfig.metadata.hasPreroll = _streamObject.metadata.hasPreroll || 'false';
+    sourceConfig.metadata.prerollUrl = _streamObject.assets.preroll || '';
+    sourceConfig.metadata.onScreenDebug = 'false';
+    sourceConfig.metadata.frameworkLevelDebug = 'false';
+    sourceConfig.metadata.description = sourceConfig.description || '';
+    sourceConfig.metadata.avType = npoPlayerServices.getAVType(_streamObject.stream.avType);
     return sourceConfig;
 }
 function decidePoster(streamObject, sourceConfig, streamOptions) {

package/lib/js/settings/localization.d.ts

@@ -1,6 +1,81 @@
 export declare const localizationConfig: {
     language: string;
     vocabularies: {
-        nl: Record<string, string>;
+        nl: {
+            "settings.video.quality": string;
+            "settings.audio.quality": string;
+            "settings.audio.track": string;
+            "settings.audio.mute": string;
+            "settings.audio.unmute": string;
+            "settings.audio.volume": string;
+            "settings.subtitles.window.color": string;
+            "settings.subtitles.window.opacity": string;
+            "settings.subtitles": string;
+            "settings.subtitles.font.color": string;
+            "settings.subtitles.font.opacity": string;
+            "settings.subtitles.background.color": string;
+            "settings.subtitles.background.opacity": string;
+            "colors.white": string;
+            "colors.black": string;
+            "colors.red": string;
+            "colors.green": string;
+            "colors.blue": string;
+            "colors.cyan": string;
+            "colors.yellow": string;
+            "colors.magenta": string;
+            percent: string;
+            "settings.subtitles.font.size": string;
+            "settings.subtitles.characterEdge": string;
+            "settings.subtitles.characterEdge.raised": string;
+            "settings.subtitles.characterEdge.depressed": string;
+            "settings.subtitles.characterEdge.uniform": string;
+            "settings.subtitles.characterEdge.dropshadowed": string;
+            "settings.subtitles.font.family": string;
+            "settings.subtitles.font.family.monospacedserif": string;
+            "settings.subtitles.font.family.proportionalserif": string;
+            "settings.subtitles.font.family.monospacedsansserif": string;
+            "settings.subtitles.font.family.proportionalsansserif": string;
+            "settings.subtitles.font.family.casual": string;
+            "settings.subtitles.font.family.cursive": string;
+            "settings.subtitles.font.family.smallcapital": string;
+            "settings.time.hours": string;
+            "settings.time.minutes": string;
+            "settings.time.seconds": string;
+            "ads.remainingTime": string;
+            settings: string;
+            fullscreen: string;
+            speed: string;
+            playPause: string;
+            play: string;
+            pause: string;
+            open: string;
+            close: string;
+            pictureInPicture: string;
+            appleAirplay: string;
+            googleCast: string;
+            vr: string;
+            off: string;
+            auto: string;
+            back: string;
+            reset: string;
+            replay: string;
+            normal: string;
+            default: string;
+            live: string;
+            "subtitle.example": string;
+            "subtitle.select": string;
+            playingOn: string;
+            connectingTo: string;
+            watermarkLink: string;
+            controlBar: string;
+            player: string;
+            videoPlayer: string;
+            audioPlayer: string;
+            seekBar: string;
+            "seekBar.value": string;
+            "seekBar.timeshift": string;
+            "seekBar.durationText": string;
+            "segment.unplayableTitle": string;
+        };
     };
 };

package/lib/js/settings/localization.js

@@ -1,7 +1,7 @@
-import * as nlJson from '../../lang/nl.json';
+import nlJson from '../../lang/nl.json';
 export const localizationConfig = {
     language: 'nl',
     vocabularies: {
-        nl: nlJson.default
+        nl: { ...nlJson }
     }
 };

package/lib/js/tracking/handlers/eventbinding.js

@@ -5,22 +5,24 @@ export function bindPlayerEvents(npoPlayer, player) {
     if (player == undefined)
         return;
     const isLiveStream = npoPlayer.streamObject.stream.isLiveStream;
-    let currentTime = 0;
     let isNewSource = true;
+    let data = {};
     const timeDifference = (time) => {
         if (time === undefined || time === null)
             return;
-        currentTime = isLiveStream ? +(time - Date.now() / 1000).toFixed(3) : +time.toFixed(3);
-        return currentTime;
+        const currentUnixTime = Date.now() / 1000;
+        const timeOffset = (time - currentUnixTime).toFixed(3);
+        const threeDecimalTime = time.toFixed(3);
+        const currentTime = isLiveStream ? +timeOffset : +threeDecimalTime;
+        data = { stream_position: currentTime };
     };
     const logEventHandler = (eventName) => {
         return (e) => {
-            const eventTime = e.time === undefined ? undefined : timeDifference(e.time);
-            logEvent(npoPlayer, eventName, eventTime);
+            timeDifference(e.time);
+            logEvent(npoPlayer, eventName, data);
         };
     };
     const seekHandler = (e) => {
-        let data = {};
         if (e.type === 'timeshift') {
             const timeDifferencePosition = -1 * (Date.now() / 1000 - e.position);
             const timeDifferenceTarget = -1 * (Date.now() / 1000 - e.target);
@@ -37,42 +39,48 @@ export function bindPlayerEvents(npoPlayer, player) {
         }
         logEvent(npoPlayer, 'seek', data);
     };
-    const handleSourceLoaded = () => {
+    const handleSourceLoaded = (e) => {
+        timeDifference(e.time);
         isNewSource = true;
         if (isLiveStream) {
-            logEvent(npoPlayer, 'stop');
+            logEvent(npoPlayer, 'stop', data);
         }
     };
     const handlePlay = (e) => {
+        timeDifference(e.time);
         if (!isNewSource && e.issuer !== 'ui-seek') {
-            logEvent(npoPlayer, 'resume', timeDifference(e.time));
+            logEvent(npoPlayer, 'resume', data);
         }
     };
     const pausedHandler = (e) => {
+        timeDifference(e.time);
         if (e.issuer !== 'ui-seek') {
-            logEvent(npoPlayer, 'pause', timeDifference(e.time));
+            logEvent(npoPlayer, 'pause', data);
         }
     };
     const handleTime = (e) => {
+        timeDifference(e.time);
         if (isNewSource && !npoPlayer.adBreakActive) {
-            logEvent(npoPlayer, 'start', timeDifference(e.time));
+            logEvent(npoPlayer, 'start', data);
             isNewSource = false;
         }
         else {
-            logEvent(npoPlayer, 'time', timeDifference(e.time));
+            logEvent(npoPlayer, 'time', data);
         }
     };
-    const handleViewModeChange = () => {
+    const handleViewModeChange = (e) => {
         const newViewMode = player.getViewMode();
+        timeDifference(e.time);
         if (newViewMode === ViewMode.Fullscreen) {
-            logEvent(npoPlayer, 'fullscreen', currentTime);
+            logEvent(npoPlayer, 'fullscreen', data);
         }
         else {
-            logEvent(npoPlayer, 'windowed', currentTime);
+            logEvent(npoPlayer, 'windowed', data);
         }
     };
-    const stopBeforeUnload = () => {
-        logEvent(npoPlayer, 'stop');
+    const stopBeforeUnload = (e) => {
+        timeDifference(e.time);
+        logEvent(npoPlayer, 'stop', data);
     };
     for (const [key, value] of logEventHandlers) {
         player.off(key, value);

package/lib/js/tracking/handlers/eventlogging.js

@@ -1,13 +1,8 @@
 export function logEvent(npoPlayer, event, data) {
     if (!npoPlayer.player || !npoPlayer.streamTracker || npoPlayer.adBreakActive || npoPlayer.player.isCasting())
         return;
-    try {
-        npoPlayer.player.getCurrentTime();
-    }
-    catch (error) {
-        console.warn('Er gaat iets mis met de player API', error);
-    }
-    const streamOptions = { stream_position: npoPlayer.player.getCurrentTime() };
+    if (data === undefined || Object.keys(data).length === 0)
+        data = { stream_position: 0 };
     const eventHandlers = {
         start: npoPlayer.streamTracker.start,
         buffering: npoPlayer.streamTracker.buffering,
@@ -27,5 +22,5 @@ export function logEvent(npoPlayer, event, data) {
     };
     const streamTrackerHandler = eventHandlers[event];
     npoPlayer.logEmitter.emit('logEvent', event, data);
-    streamTrackerHandler(streamOptions);
+    streamTrackerHandler(data);
 }

package/lib/js/tracking/handlers/playertrackerinit.d.ts

@@ -1,4 +1,4 @@
-import { type NPOTag } from '@npotag/tag';
+import { type NPOTag, type PageTracker } from '@npotag/tag';
 import { type InitialisationProps } from '@npotag/tag/dist/types/src/npoTag';
 import type NpoPlayer from '../../../npoplayer';
-export declare function initPlayerTracker(npoplayer: NpoPlayer, _npotag?: InitialisationProps | undefined, _npotaginstance?: NPOTag): void;
+export declare function initPlayerTracker(npoPlayer: NpoPlayer, _npoTag?: InitialisationProps, _npoTagInstance?: NPOTag, _npoTagPageTracker?: PageTracker): void;

package/lib/js/tracking/handlers/playertrackerinit.js

@@ -1,15 +1,17 @@
 import { newATInternetPlugin, newGovoltePlugin, newPageTracker, newTag } from '@npotag/tag';
 const npoTagPlugins = [newGovoltePlugin({ maxRetryCount: 5, delayBetweenRetriesInMs: 3000 }), newATInternetPlugin()];
-export function initPlayerTracker(npoplayer, _npotag, _npotaginstance) {
-    if (npoplayer.npoTag == undefined) {
-        npoplayer.npoTag = {
+export function initPlayerTracker(npoPlayer, _npoTag, _npoTagInstance, _npoTagPageTracker) {
+    if (!npoPlayer.npoTag) {
+        npoPlayer.npoTag = {
             npoTagInstance: undefined,
             pageTracker: undefined,
             heartbeatInterval: undefined
         };
     }
-    npoplayer.npoTag.npoTagInstance = _npotag == undefined ? _npotaginstance : newTag(_npotag, npoTagPlugins);
-    if (npoplayer.npoTag.npoTagInstance != undefined) {
-        npoplayer.npoTag.pageTracker = newPageTracker(npoplayer.npoTag.npoTagInstance);
+    if (!npoPlayer.npoTag?.npoTagInstance) {
+        npoPlayer.npoTag.npoTagInstance = _npoTagInstance ?? (_npoTag ? newTag(_npoTag, npoTagPlugins) : undefined);
+    }
+    if (!npoPlayer.npoTag?.pageTracker && npoPlayer.npoTag?.npoTagInstance) {
+        npoPlayer.npoTag.pageTracker = _npoTagPageTracker ?? newPageTracker(npoPlayer.npoTag.npoTagInstance);
     }
 }

package/lib/js/tracking/handlers/playertrackerinit.test.d.ts

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

package/lib/js/tracking/handlers/playertrackerinit.test.js

@@ -0,0 +1,74 @@
+import { newPageTracker, newTag } from '@npotag/tag';
+import { initPlayerTracker } from './playertrackerinit';
+jest.mock('@npotag/tag', () => ({
+    newATInternetPlugin: jest.fn(),
+    newGovoltePlugin: jest.fn(),
+    newPageTracker: jest.fn(),
+    newTag: jest.fn()
+}));
+describe('initPlayerTracker', () => {
+    let mockNpoPlayer;
+    beforeEach(() => {
+        mockNpoPlayer = {
+            npoTag: undefined
+        };
+        jest.clearAllMocks();
+    });
+    it('should initialize npoTag if it is undefined', () => {
+        initPlayerTracker(mockNpoPlayer);
+        expect(mockNpoPlayer.npoTag).toBeDefined();
+        expect(mockNpoPlayer.npoTag?.npoTagInstance).toBeUndefined();
+        expect(mockNpoPlayer.npoTag?.pageTracker).toBeUndefined();
+    });
+    it('should initialize npoTagInstance if _npoTagInstance is provided', () => {
+        const mockNpoTagInstance = {};
+        initPlayerTracker(mockNpoPlayer, undefined, mockNpoTagInstance);
+        expect(mockNpoPlayer.npoTag?.npoTagInstance).toBe(mockNpoTagInstance);
+        expect(mockNpoPlayer.npoTag?.pageTracker).toBeUndefined();
+    });
+    it('should create a new npoTagInstance if _npoTag is provided and _npoTagInstance is undefined', () => {
+        const mockNpoTag = {};
+        const mockNewTagInstance = {};
+        newTag.mockReturnValue(mockNewTagInstance);
+        initPlayerTracker(mockNpoPlayer, mockNpoTag);
+        expect(newTag).toHaveBeenCalledWith(mockNpoTag, expect.any(Array));
+        expect(mockNpoPlayer.npoTag?.npoTagInstance).toBe(mockNewTagInstance);
+        expect(mockNpoPlayer.npoTag?.pageTracker).toBeUndefined();
+    });
+    it('should initialize pageTracker if _npoTagPageTracker is provided', () => {
+        const mockPageTracker = {};
+        const mockNpoTagInstance = {};
+        mockNpoPlayer.npoTag = {
+            npoTagInstance: mockNpoTagInstance,
+            pageTracker: undefined,
+            heartbeatInterval: undefined
+        };
+        initPlayerTracker(mockNpoPlayer, undefined, mockNpoTagInstance, mockPageTracker);
+        expect(mockNpoPlayer.npoTag?.pageTracker).toBe(mockPageTracker);
+    });
+    it('should create a new pageTracker if _npoTagPageTracker is undefined', () => {
+        const mockNpoTagInstance = {};
+        const mockNewPageTracker = {};
+        newPageTracker.mockReturnValue(mockNewPageTracker);
+        mockNpoPlayer.npoTag = {
+            npoTagInstance: mockNpoTagInstance,
+            pageTracker: undefined,
+            heartbeatInterval: undefined
+        };
+        initPlayerTracker(mockNpoPlayer);
+        expect(newPageTracker).toHaveBeenCalledWith(mockNpoTagInstance);
+        expect(mockNpoPlayer.npoTag?.pageTracker).toBe(mockNewPageTracker);
+    });
+    it('should not overwrite existing pageTracker', () => {
+        const mockPageTracker = {};
+        const mockNpoTagInstance = {};
+        mockNpoPlayer.npoTag = {
+            npoTagInstance: mockNpoTagInstance,
+            pageTracker: mockPageTracker,
+            heartbeatInterval: undefined
+        };
+        initPlayerTracker(mockNpoPlayer);
+        expect(mockNpoPlayer.npoTag?.pageTracker).toBe(mockPageTracker);
+        expect(newPageTracker).not.toHaveBeenCalled();
+    });
+});

package/lib/js/utilities/utilities.element.d.ts

@@ -4,7 +4,13 @@ interface ElementByQuery {
 }
 interface RemoveClassFromElementByQuery extends ElementByQuery {
     className: string;
+    condition: boolean;
+}
+export interface UpdateClassFromElementByQuery extends ElementByQuery {
+    className: string;
+    condition: boolean;
 }
 export declare function getElementByQuery({ container, query }: ElementByQuery): Element | null;
 export declare function removeClassFromElementByQuery(params: RemoveClassFromElementByQuery): void;
+export declare function updateClassFromElementByQuery(params: UpdateClassFromElementByQuery): void;
 export {};

package/lib/js/utilities/utilities.element.js

@@ -6,3 +6,13 @@ export function removeClassFromElementByQuery(params) {
     const element = getElementByQuery({ container, query });
     element?.classList.remove(className);
 }
+export function updateClassFromElementByQuery(params) {
+    const { className, container, query, condition } = params;
+    const element = getElementByQuery({ container, query });
+    if (condition && element) {
+        element.classList.add(className);
+    }
+    else if (element) {
+        element.classList.remove(className);
+    }
+}

package/lib/js/utilities/utilities.element.test.js

@@ -1,5 +1,6 @@
-import { getElementByQuery, removeClassFromElementByQuery } from './utilities.element';
+import { getElementByQuery, updateClassFromElementByQuery } from './utilities.element';
 const CLASS = 'element-class';
+const NEW_CLASS = 'new-class';
 const ID = 'element-id';
 const PARENT_ELEMENT = document.createElement('div');
 const CHILD_ELEMENT_WITH_ID = document.createElement('div');
@@ -13,13 +14,25 @@ describe('getElementByQuery', () => {
         expect(getElementByQuery({ container: PARENT_ELEMENT, query: `#${ID}` })).toEqual(CHILD_ELEMENT_WITH_ID);
     });
 });
-describe('removeClassFromElementByQuery', () => {
-    it('should remove the specified class from from the queried element', () => {
-        removeClassFromElementByQuery({
+describe('updateClassFromElementByQuery', () => {
+    it('should remove the specified class from the queried element', () => {
+        updateClassFromElementByQuery({
             container: PARENT_ELEMENT,
             query: `.${CLASS}`,
-            className: CLASS
+            className: CLASS,
+            condition: false
         });
         expect(PARENT_ELEMENT.querySelector(`.${CLASS}`)).toBeNull();
     });
+    it('should add the specified class to the queried element', () => {
+        const ELEMENT_WITHOUT_CLASS = document.createElement('div');
+        PARENT_ELEMENT.appendChild(ELEMENT_WITHOUT_CLASS);
+        updateClassFromElementByQuery({
+            container: PARENT_ELEMENT,
+            query: 'div:not([class])',
+            className: NEW_CLASS,
+            condition: true
+        });
+        expect(PARENT_ELEMENT.querySelector(`.${NEW_CLASS}`)).not.toBeNull();
+    });
 });

package/lib/npoplayer.d.ts

@@ -1,5 +1,5 @@
 import { NpoPlayerServices } from './services/services';
-import { type StreamTracker, type NPOTag } from '@npotag/tag';
+import { type StreamTracker, type NPOTag, type PageTracker } from '@npotag/tag';
 import { type InitialisationProps } from '@npotag/tag/dist/types/src/npoTag';
 import { type PlayerAPI, type PlayerConfig, type SourceConfig } from 'bitmovin-player';
 import { UIManager } from 'bitmovin-player-ui';
@@ -7,12 +7,15 @@ import { LogEmitter } from './types/classes';
 import { type DRMProfile, type ApiPayload, type NPOTagObject, type StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, type LocalStorageData, type PlayerContext, type EventListeners, NpoPlayerUIVariants } from './types/interfaces';
 export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants };
 export default class NpoPlayer {
-    playerConfig: PlayerConfig;
+    playerConfig: PlayerConfig | undefined;
     sourceConfig: SourceConfig;
     streamObject: StreamObject;
     player: PlayerAPI | undefined;
     uiManager: UIManager | undefined;
     npoTag: NPOTagObject | undefined;
+    npoTagInitialisation: InitialisationProps | undefined;
+    npoTagInstance: NPOTag | undefined;
+    npoTagPageTracker: PageTracker | undefined;
     streamTracker: StreamTracker | undefined;
     logEmitter: LogEmitter;
     uiComponents: UIComponents;
@@ -31,7 +34,14 @@ export default class NpoPlayer {
     eventListeners: EventListeners | undefined;
     mockNpoPlayer: any;
     userPreferences: LocalStorageData;
-    constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | undefined, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
+    constructor(container: HTMLElement | {
+        container: HTMLElement;
+        playerConfig: PlayerConfig;
+        npoTag?: InitialisationProps | undefined;
+        npoTagInstance?: NPOTag | undefined;
+        variant?: NpoPlayerUIVariants;
+        npoTagPageTracker?: PageTracker | undefined;
+    }, playerConfig?: PlayerConfig | undefined, npoTag?: InitialisationProps | undefined, npoTagInstance?: NPOTag | undefined, variant?: NpoPlayerUIVariants, npoTagPageTracker?: PageTracker | undefined);
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
     doError(input: any, status?: number): void;