@npo/player 1.27.7 → 1.28.0

package/README.md

@@ -1,4 +1,5 @@
-[![NPO](https://objectstorage.nl-ams-1.scalia.io/npostart-npoplayer-test/assets/player/npo_player.png 'NPO Player Logo')](https://npo.nl)
+
+![npoplayer](https://github.com/user-attachments/assets/d03de645-572c-499e-9481-60f73fbf49aa)
 
 # NPO Player
 
@@ -11,7 +12,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.27.0
+Current version: v1.28.0
 
 The changelog is available at https://docs.npoplayer.nl/implementation/web/changelog/
 
@@ -20,8 +21,4 @@ The changelog is available at https://docs.npoplayer.nl/implementation/web/chang
 MIT
 
 [JWT.IO - JSON Web Tokens Introduction]: https://jwt.io/introduction
-[self generated JWT]: https://www.npmjs.com/package/jsonwebtoken
-
-## Native mobile development
-
-For detailed information on the JavaScript player integration for ios and Android, including custom message handling, UI customization, and interaction with native mobile SDKs, see the [Bitmovin Player Integration for Native Mobile SDKs](src/js/ui/README.md) located in the `src/js/ui` directory.
+[self generated JWT]: https://www.npmjs.com/package/jsonwebtoken

package/lib/js/markers/updateLiveMarkers.d.ts

@@ -1,4 +1,9 @@
-import { PlayerAPI } from 'bitmovin-player';
+import { PlayerAPI } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { UIManager } from 'bitmovin-player-ui';
 import { TimeLineMarker } from 'types/interfaces';
-export declare function updateLiveMarkers(timeLineMarkers: TimeLineMarker[], player: PlayerAPI, uiManager: UIManager, autoFillTimeLineMarkerDuration: boolean): void;
+export declare function updateLiveMarkers({ timeLineMarkers, player, uiManager, autoFillTimeLineMarkerDuration }: {
+    timeLineMarkers: TimeLineMarker[];
+    player: PlayerAPI;
+    uiManager: UIManager;
+    autoFillTimeLineMarkerDuration: boolean;
+}): void;

package/lib/js/markers/updateLiveMarkers.js

@@ -1,4 +1,4 @@
-export function updateLiveMarkers(timeLineMarkers, player, uiManager, autoFillTimeLineMarkerDuration) {
+export function updateLiveMarkers({ timeLineMarkers, player, uiManager, autoFillTimeLineMarkerDuration }) {
     if (!player || !uiManager) {
         console.error('Player or UIManager is null');
         return;
@@ -6,14 +6,21 @@ export function updateLiveMarkers(timeLineMarkers, player, uiManager, autoFillTi
     removeAllMarkers(uiManager);
     const currentTimeEpoch = Math.floor(Date.now() / 1000);
     timeLineMarkers.sort((a, b) => a.time - b.time);
-    const relativeTimeMarkers = timeLineMarkers.map((marker, index) => transformMarker(marker, index, timeLineMarkers, currentTimeEpoch, player, autoFillTimeLineMarkerDuration));
+    const relativeTimeMarkers = timeLineMarkers.map((marker, index) => transformMarker({
+        marker,
+        index,
+        timeLineMarkers,
+        currentTimeEpoch,
+        player,
+        autoFillTimeLineMarkerDuration
+    }));
     for (const marker of relativeTimeMarkers) {
         uiManager?.addTimelineMarker(marker);
     }
 }
-function transformMarker(marker, index, timeLineMarkers, currentTimeEpoch, player, autoFillTimeLineMarkerDuration) {
+function transformMarker({ marker, index, timeLineMarkers, currentTimeEpoch, player, autoFillTimeLineMarkerDuration }) {
     const DVR_WINDOW_LENGTH = Math.abs(player.getMaxTimeShift());
-    let duration = marker.duration === undefined ? 0 : marker.duration;
+    let duration = marker.duration ?? 0;
     let startTimeRelativeToCurrent = marker.time - currentTimeEpoch;
     if (autoFillTimeLineMarkerDuration) {
         duration =

package/lib/js/markers/updateLiveMarkers.test.js

@@ -9,7 +9,7 @@ jest.mock('bitmovin-player-ui', () => {
         }))
     };
 });
-jest.mock('bitmovin-player', () => ({
+jest.mock('bitmovin-player/modules/bitmovinplayer-core', () => ({
     PlayerAPI: jest.fn()
 }));
 describe('updateLiveMarkers', () => {
@@ -27,7 +27,12 @@ describe('updateLiveMarkers', () => {
             { time: 3000, title: 'Marker 2' },
             { time: 1000, title: 'Marker 1' }
         ];
-        updateLiveMarkers(timeLineMarkers, player, uiManager, true);
+        updateLiveMarkers({
+            timeLineMarkers,
+            player,
+            uiManager,
+            autoFillTimeLineMarkerDuration: true
+        });
         expect(uiManager.getTimelineMarkers).toHaveBeenCalled();
         expect(uiManager.removeTimelineMarker).toHaveBeenCalledTimes(0);
         expect(uiManager.addTimelineMarker).toHaveBeenCalledTimes(2);
@@ -46,7 +51,12 @@ describe('updateLiveMarkers', () => {
         ;
         uiManager.getTimelineMarkers.mockReturnValue([{ time: 2000, title: 'Existing Marker' }]);
         const timeLineMarkers = [{ time: 1000, title: 'New Marker' }];
-        updateLiveMarkers(timeLineMarkers, player, uiManager, true);
+        updateLiveMarkers({
+            timeLineMarkers,
+            player,
+            uiManager,
+            autoFillTimeLineMarkerDuration: true
+        });
         expect(uiManager.removeTimelineMarker).toHaveBeenCalledTimes(1);
         expect(uiManager.addTimelineMarker).toHaveBeenCalledTimes(1);
     });

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

@@ -1,4 +1,4 @@
-import { PlayerEvent } from 'bitmovin-player';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { createPlayerContextMock, createMockNpoPlayerAPI } from '../../../../tests/mocks/playerContextMock';
 import { handleStartOffset, shiftToProgramStart } from './handleoffsets';
 describe('Test offset handling', () => {

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

@@ -1,2 +1,7 @@
-import { PlayerAPI, SourceConfig } from 'bitmovin-player';
-export declare function setupMediaSessionActionHandlers(player: PlayerAPI, sourceConfig: SourceConfig, _streamObject: any): void;
+import { PlayerAPI, SourceConfig } from 'bitmovin-player/modules/bitmovinplayer-core';
+import { StreamObject } from 'types/interfaces';
+export declare function setupMediaSessionActionHandlers({ player, sourceConfig, streamObject }: {
+    player: PlayerAPI;
+    sourceConfig: SourceConfig;
+    streamObject: StreamObject;
+}): void;

package/lib/js/playeractions/handlers/mediasessionactions.js

@@ -1,5 +1,5 @@
-import { PlayerEvent } from 'bitmovin-player';
-export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObject) {
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
+export function setupMediaSessionActionHandlers({ player, sourceConfig, streamObject }) {
     function handlePlaying() {
         player.off(PlayerEvent.Playing, handlePlaying);
         if (!('mediaSession' in navigator)) {
@@ -50,12 +50,12 @@ export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObj
     function setMediaSessionMetadata() {
         const metadata = {
             title: sourceConfig.title,
-            artist: _streamObject.metadata.broadcaster || ''
+            artist: streamObject.metadata.broadcaster || ''
         };
-        if (sourceConfig.poster || _streamObject.metadata.poster) {
+        if (sourceConfig.poster || streamObject.metadata.poster) {
             metadata.artwork = [
                 {
-                    src: sourceConfig.poster || _streamObject.metadata.poster
+                    src: sourceConfig.poster ?? streamObject.metadata.poster ?? ''
                 }
             ];
         }
@@ -67,7 +67,7 @@ export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObj
             {
                 action: 'seekbackward',
                 handler: (details) => {
-                    const skipTime = details.seekOffset || defaultSkipTime;
+                    const skipTime = details.seekOffset ?? defaultSkipTime;
                     player.seek(Math.max(player.getCurrentTime() - skipTime, 0));
                     updatePositionState();
                 }
@@ -75,7 +75,7 @@ export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObj
             {
                 action: 'seekforward',
                 handler: (details) => {
-                    const skipTime = details.seekOffset || defaultSkipTime;
+                    const skipTime = details.seekOffset ?? defaultSkipTime;
                     player.seek(Math.min(player.getCurrentTime() + skipTime, player.getDuration()));
                     updatePositionState();
                 }

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

@@ -1,3 +1,3 @@
-import { type PlayerConfig } from 'bitmovin-player';
+import { type PlayerConfig } from 'bitmovin-player/modules/bitmovinplayer-core';
 import NpoPlayer from 'npoplayer';
 export declare function processPlayerConfig(npoPlayer: NpoPlayer, playerConfig: PlayerConfig): PlayerConfig;

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

@@ -1,4 +1,4 @@
-import { LogLevel } from 'bitmovin-player';
+import { LogLevel } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { isSafari } from '../../utilities/utilities.user-agent';
 export function processPlayerConfig(npoPlayer, playerConfig) {
     const processedConfig = playerConfig;

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

@@ -1,4 +1,4 @@
-import { LogLevel } from 'bitmovin-player';
+import { LogLevel } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { isSafari } from '../../utilities/utilities.user-agent';
 import { processPlayerConfig } from './processplayerconfig';
 jest.mock('../../utilities/utilities.user-agent', () => ({

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

@@ -1,6 +1,15 @@
 import { StreamObject, StreamOptions } from 'types/interfaces';
-import { SourceConfig } from 'bitmovin-player';
+import { SourceConfig } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { NpoPlayerServices } from '../../../services/services';
 import { NPOTag } from '@npotag/tag';
 export declare const getSubtitleLabels: (data: any) => string;
-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>;
+export declare function processSourceConfig({ npoPlayerServices, source, _sourceConfig, _streamObject, drm, streamOptions, version, npoTagInstance }: {
+    npoPlayerServices: NpoPlayerServices;
+    source: string;
+    _sourceConfig: SourceConfig;
+    _streamObject: StreamObject;
+    drm: string | undefined;
+    streamOptions: StreamOptions;
+    version: string;
+    npoTagInstance: NPOTag | undefined;
+}): Promise<SourceConfig>;

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

@@ -1,21 +1,21 @@
-import { HttpResponseType } from 'bitmovin-player';
+import { HttpResponseType } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { npoCdnProviders } from '../../../services/cdnProviders/cdnProviders';
 import { replaceSpecialCharacters } from '../../utilities/utilities.text';
 import subtitleLabelMap from '../../../lang/subtitleLabels/nl.json';
-async function setDrm(sourceConfig, drm, _streamObject, useWidevineServerCertificate) {
+async function setDrm({ sourceConfig, drm, streamObject, useWidevineServerCertificate }) {
     const npoDrmGateway = 'https://npo-drm-gateway.samgcloud.nepworldwide.nl/authentication?custom_data=';
     switch (drm) {
         case 'fairplay': {
             sourceConfig.drm = {
                 fairplay: {
                     certificateURL: 'https://fairplay.npo.nl/certificate/fairplay.cer',
-                    LA_URL: npoDrmGateway + _streamObject.stream.drmToken,
+                    LA_URL: npoDrmGateway + streamObject.stream.drmToken,
                     prepareMessage: (event) => {
                         return new Uint8Array(event.message);
                     },
                     prepareContentId: (url) => {
                         const link = document.createElement('a');
-                        const trimmedUrl = [...url].filter((char) => !(char.codePointAt(0) == undefined)).join('');
+                        const trimmedUrl = [...url].filter((char) => char.codePointAt(0) !== undefined).join('');
                         link.href = trimmedUrl.replace('T', '');
                         return link.hostname;
                     },
@@ -38,7 +38,7 @@ async function setDrm(sourceConfig, drm, _streamObject, useWidevineServerCertifi
             try {
                 sourceConfig.drm = {
                     widevine: {
-                        LA_URL: npoDrmGateway + _streamObject.stream.drmToken,
+                        LA_URL: npoDrmGateway + streamObject.stream.drmToken,
                         audioRobustness: 'SW_SECURE_CRYPTO',
                         videoRobustness: 'SW_SECURE_CRYPTO',
                         serverCertificate: useWidevineServerCertificate
@@ -55,12 +55,16 @@ async function setDrm(sourceConfig, drm, _streamObject, useWidevineServerCertifi
         case 'playready': {
             sourceConfig.drm = {
                 playready: {
-                    LA_URL: npoDrmGateway + _streamObject.stream.drmToken
+                    LA_URL: npoDrmGateway + streamObject.stream.drmToken
                 }
             };
             break;
         }
     }
+    sourceConfig.drm = {
+        ...sourceConfig.drm,
+        immediateLicenseRequest: true
+    };
     return sourceConfig;
 }
 async function getServerCertificate(url) {
@@ -74,9 +78,9 @@ export const getSubtitleLabels = function (data) {
 const getQualityLabels = function (data) {
     return data.height + 'p';
 };
-function setStreamProfile(sourceConfig, _sourceConfig, _streamObject) {
-    const streamProfile = _streamObject.stream.streamProfile;
-    const streamURL = _streamObject.stream.streamURL;
+function setStreamProfile({ sourceConfig, _sourceConfig, streamObject }) {
+    const streamProfile = streamObject.stream.streamProfile;
+    const streamURL = streamObject.stream.streamURL;
     const configMapping = {
         hls: _sourceConfig.hls,
         dash: _sourceConfig.dash,
@@ -101,7 +105,7 @@ function setStreamProfile(sourceConfig, _sourceConfig, _streamObject) {
     }
     return sourceConfig;
 }
-export async function processSourceConfig(npoPlayerServices, source, _sourceConfig = {}, _streamObject, drm = undefined, streamOptions, version, npoTagInstance) {
+export async function processSourceConfig({ npoPlayerServices, source, _sourceConfig, _streamObject, drm, streamOptions, version, npoTagInstance }) {
     let sourceConfig = {};
     sourceConfig.title = _sourceConfig.title
         ? replacePlaceholders(_sourceConfig.title, _streamObject.metadata)
@@ -109,7 +113,11 @@ export async function processSourceConfig(npoPlayerServices, source, _sourceConf
     sourceConfig.description = _sourceConfig.description
         ? replacePlaceholders(_sourceConfig.description, _streamObject.metadata)
         : _streamObject.metadata.description ?? '';
-    sourceConfig.poster = decidePoster(_streamObject, _sourceConfig, streamOptions);
+    sourceConfig.poster = decidePoster({
+        streamObject: _streamObject,
+        sourceConfig: _sourceConfig,
+        streamOptions
+    });
     sourceConfig.metadata = {
         title: sourceConfig.title,
         description: sourceConfig.description,
@@ -139,8 +147,13 @@ export async function processSourceConfig(npoPlayerServices, source, _sourceConf
         _sourceConfig.thumbnailTrack ?? _streamObject.assets.scrubbingThumbnail
             ? { url: _streamObject.assets.scrubbingThumbnail }
             : undefined;
-    sourceConfig = setStreamProfile(sourceConfig, _sourceConfig, _streamObject);
-    sourceConfig = await setDrm(sourceConfig, drm, _streamObject, streamOptions.useWidevineServerCertificate ?? true);
+    sourceConfig = setStreamProfile({ sourceConfig, _sourceConfig, streamObject: _streamObject });
+    sourceConfig = await setDrm({
+        sourceConfig,
+        drm,
+        streamObject: _streamObject,
+        useWidevineServerCertificate: streamOptions.useWidevineServerCertificate ?? true
+    });
     const streamSource = _streamObject.stream.streamURL;
     let cdnString = streamSource;
     if (streamSource.startsWith('file:///')) {
@@ -184,15 +197,15 @@ export async function processSourceConfig(npoPlayerServices, source, _sourceConf
     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.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.description = sourceConfig.description ?? '';
     sourceConfig.metadata.avType = npoPlayerServices.getAVType(_streamObject.stream.avType);
     return sourceConfig;
 }
-function decidePoster(streamObject, sourceConfig, streamOptions) {
+function decidePoster({ streamObject, sourceConfig, streamOptions }) {
     if (sourceConfig.poster) {
         return replaceSpecialCharacters(sourceConfig.poster);
     }
@@ -208,7 +221,11 @@ function replacePlaceholders(template, metadata) {
     return template.replace(/{([^{}]*)}/g, (match, key) => {
         const value = metadata[key];
         if (Array.isArray(value)) {
-            return value.map((item) => item.trim()).join(', ');
+            return value
+                .map((item) => {
+                return typeof item === 'string' ? item.trim() : String(item);
+            })
+                .join(', ');
         }
         return value === undefined ? '' : String(value);
     });

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

@@ -1,2 +1,2 @@
-import { PlayerAPI } from 'bitmovin-player';
+import { PlayerAPI } from 'bitmovin-player/modules/bitmovinplayer-core';
 export declare function removeReplayClass(player: PlayerAPI | undefined): void;

package/lib/js/playeractions/handlers/removereplayclass.js

@@ -1,4 +1,4 @@
-import { PlayerEvent } from 'bitmovin-player';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 export function removeReplayClass(player) {
     if (!player)
         return;

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

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { removeReplayClass } from './removereplayclass';
-import { PlayerEvent } from 'bitmovin-player';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 describe('removeReplayClass', () => {
     let mockPlayer;
     let mockPlayerContainer;

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

@@ -68,6 +68,7 @@ export declare const localizationConfig: {
             connectingTo: string;
             watermarkLink: string;
             controlBar: string;
+            "controlBar.bottom": string;
             player: string;
             videoPlayer: string;
             audioPlayer: string;

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

@@ -1,3 +1,5 @@
 export declare const convertBase64ToObject: (value: string) => Record<string, any>;
 export declare const convertJwtToBase64: (jwt: string) => string;
 export declare function isJWTToken(token: string): boolean;
+export declare function getJwtIat(jwt: string): number;
+export declare function isJwtFresh(jwt: string, maxAgeSeconds?: number): boolean;

package/lib/js/utilities/utilities.jwt.js

@@ -20,3 +20,25 @@ export function isJWTToken(token) {
     const JWT_REGEX = /^(?:[\w=-]+\.){2}[\w+./=-]+$/;
     return JWT_REGEX.test(token);
 }
+export function getJwtIat(jwt) {
+    const parts = jwt.split('.');
+    if (parts.length !== 3) {
+        throw new Error('Invalid JWT format');
+    }
+    const payloadJson = Buffer.from(parts[1], 'base64').toString('utf8');
+    const payload = JSON.parse(payloadJson);
+    if (typeof payload.iat !== 'number') {
+        throw new TypeError('JWT `iat` claim missing or not a number');
+    }
+    return payload.iat;
+}
+export function isJwtFresh(jwt, maxAgeSeconds = 3600) {
+    try {
+        const issuedAt = getJwtIat(jwt);
+        const ageSeconds = Date.now() / 1000 - issuedAt;
+        return ageSeconds <= maxAgeSeconds;
+    }
+    catch {
+        return false;
+    }
+}

package/lib/js/utilities/utilities.stream.js

@@ -1,9 +1,18 @@
 import { convertMsToSeconds } from './utilities.time';
 export function getStreamDurationInSeconds(params) {
     const { duration, durationIsInMs } = params;
-    if (duration === undefined || duration === Number.POSITIVE_INFINITY)
+    if (duration === undefined || duration === Number.POSITIVE_INFINITY) {
         return -1;
-    return durationIsInMs ? convertMsToSeconds(Number(duration)) : Number.isFinite(+duration) ? Number(duration) : -1;
+    }
+    if (durationIsInMs) {
+        return convertMsToSeconds(Number(duration));
+    }
+    else if (Number.isFinite(+duration)) {
+        return Number(duration);
+    }
+    else {
+        return -1;
+    }
 }
 export function validatePrid(prid) {
     return prid !== '' && prid !== undefined ? prid : 'unknown';

package/lib/js/utilities/utilities.url.js

@@ -12,7 +12,7 @@ export async function isMediaUrl(url) {
         return false;
     try {
         const response = await fetch(url, { method: 'HEAD' });
-        const header = response.headers.get('Content-Type') || '';
+        const header = response.headers.get('Content-Type') ?? '';
         return supportedMediaTypes.some((mediaType) => header.startsWith(mediaType));
     }
     catch (error) {
@@ -25,5 +25,5 @@ export function isUrl(url) {
     return URL_REGEX.test(url);
 }
 export const removeTrailingSlash = (url) => {
-    return url.slice(-1) === '/' ? (url = url.slice(0, -1)) : url;
+    return url.endsWith('/') ? url.slice(0, -1) : url;
 };

package/lib/js/utilities/utilities.version.js

@@ -17,7 +17,7 @@ export function logVersion(version) {
                  \`╝╠╠╠╠╠╩\`                     
                    \`╙╙╙                        
 `;
-    const COLOR_CODE = '#ff6d00';
+    const COLOR_CODE = '#f56A00';
     const TITLE = 'NPO Player';
     const TITLE_STYLE = `font-size: 24px; font-weight: bold; color: ${COLOR_CODE}; padding: 2px 4px;`;
     const VERSION_STRING = 'v' + String(version);

package/lib/js/utilities/utilities.version.test.js

@@ -21,6 +21,6 @@ describe('logVersion', () => {
                  \`╝╠╠╠╠╠╩\`                     
                    \`╙╙╙                        
 `;
-        expect(logSpy).toHaveBeenCalledWith(`%c${ASCII_ART}%cNPO Player %cv1.0.0`, 'color: #ff6d00; background-color: rgb(11, 28, 54);', 'font-size: 24px; font-weight: bold; color: #ff6d00; padding: 2px 4px;', 'font-size: 24px; font-weight: bold; padding: 2px 4px;');
+        expect(logSpy).toHaveBeenCalledWith(`%c${ASCII_ART}%cNPO Player %cv1.0.0`, 'color: #f56A00; background-color: rgb(11, 28, 54);', 'font-size: 24px; font-weight: bold; color: #f56A00; padding: 2px 4px;', 'font-size: 24px; font-weight: bold; padding: 2px 4px;');
     });
 });

package/lib/lang/nl.json

@@ -65,12 +65,13 @@
     "connectingTo": "Maakt verbinding met <strong>{castDeviceName}</strong>...",
     "watermarkLink": "Link to Homepage",
     "controlBar": "Video speler bedieningselementen",
+    "controlBar.bottom": "Tijdlijn en navigatie video speler",
     "player": "Video speler",
     "videoPlayer": "Video speler",
     "audioPlayer": "Audio speler",
     "seekBar": "Video tijdlijn",
     "seekBar.value": "Waarde",
     "seekBar.timeshift": "Timeshift",
-    "seekBar.durationText": "out of",
+    "seekBar.durationText": "van",
     "segment.unplayableTitle": "Niet beschikbaar"
 }

package/lib/npoplayer.d.ts

@@ -1,10 +1,11 @@
 import { NpoPlayerServices } from './services/services';
 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 { type PlayerAPI, type PlayerConfig, type SourceConfig } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { UIManager } from 'bitmovin-player-ui';
 import { LogEmitter } from './types/classes';
 import { type DRMProfile, type ApiPayload, type NPOTagObject, type StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, type PlayerContext, type EventListeners, NpoPlayerUIVariants } from './types/interfaces';
+import { ChapterHandler } from './services/chapterHandlers/chapterHandler';
 export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants };
 export default class NpoPlayer {
     playerConfig: PlayerConfig | undefined;
@@ -32,14 +33,14 @@ export default class NpoPlayer {
     playerContext: PlayerContext | undefined;
     npoPlayerServices: NpoPlayerServices;
     eventListeners: EventListeners | undefined;
-    mockNpoPlayer: any;
+    chapterHandler: ChapterHandler | undefined;
     constructor(container: HTMLElement | {
         container: HTMLElement;
         playerConfig: PlayerConfig;
-        npoTag?: InitialisationProps | undefined;
-        npoTagInstance?: NPOTag | undefined;
+        npoTag?: InitialisationProps;
+        npoTagInstance?: NPOTag;
         variant?: NpoPlayerUIVariants;
-        npoTagPageTracker?: PageTracker | undefined;
+        npoTagPageTracker?: PageTracker;
     }, playerConfig?: PlayerConfig | undefined, npoTag?: InitialisationProps | undefined, npoTagInstance?: NPOTag | undefined, variant?: NpoPlayerUIVariants, npoTagPageTracker?: PageTracker | undefined);
     keydownHandler: (e: KeyboardEvent) => void;
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig): void;