@npo/player 1.22.4 → 1.23.0

package/lib/js/tracking/handlers/playertrackerstart.js

@@ -1,23 +1,18 @@
 import { newStreamTracker } from '@npotag/tag';
 import { bindPlayerEvents } from './eventbinding';
-import { validatePrid } from '../../utilities/utilities';
+import { validatePrid } from '../../utilities/utilities.stream';
 export function startPlayerTracker(playerInstance, duration, version, source) {
-    playerInstance.streamTracker = null;
-    let streamTrackerConfig = null;
-    if (playerInstance.npoTag?.pageTracker == null) {
+    playerInstance.streamTracker = undefined;
+    let streamTrackerConfig = undefined;
+    if (playerInstance.npoTag?.pageTracker == undefined) {
         console.error('No pageTracker available');
     }
     else {
-        const avTypeMapping = {
-            'vod': 'video',
-            'aod': 'audio'
-        };
-        const avType = avTypeMapping[playerInstance.streamObject.stream.avType];
         streamTrackerConfig = {
             stream_length: duration,
             stream_id: validatePrid(source),
             player_id: 'npoplayer-web',
-            av_type: avType,
+            av_type: playerInstance.npoplayerServices.getAVType(playerInstance.streamObject.stream.avType),
             player_version: version,
             sko_player_version: '1.0.0'
         };

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

@@ -0,0 +1,10 @@
+interface ElementByQuery {
+    container: HTMLElement;
+    query: string;
+}
+interface RemoveClassFromElementByQuery extends ElementByQuery {
+    className: string;
+}
+export declare function getElementByQuery({ container, query }: ElementByQuery): Element | null;
+export declare function removeClassFromElementByQuery(params: RemoveClassFromElementByQuery): void;
+export {};

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

@@ -0,0 +1,8 @@
+export function getElementByQuery({ container, query }) {
+    return container.querySelector(query);
+}
+export function removeClassFromElementByQuery(params) {
+    const { className, container, query } = params;
+    const element = getElementByQuery({ container, query });
+    element?.classList.remove(className);
+}

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

@@ -0,0 +1,25 @@
+import { getElementByQuery, removeClassFromElementByQuery } from './utilities.element';
+const CLASS = 'element-class';
+const ID = 'element-id';
+const PARENT_ELEMENT = document.createElement('div');
+const CHILD_ELEMENT_WITH_ID = document.createElement('div');
+const CHILD_ELEMENT_WITH_CLASS = document.createElement('div');
+CHILD_ELEMENT_WITH_ID.setAttribute('id', ID);
+CHILD_ELEMENT_WITH_CLASS.setAttribute('class', CLASS);
+PARENT_ELEMENT.appendChild(CHILD_ELEMENT_WITH_ID);
+PARENT_ELEMENT.appendChild(CHILD_ELEMENT_WITH_CLASS);
+describe('getElementByQuery', () => {
+    it('should return the child element', () => {
+        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({
+            container: PARENT_ELEMENT,
+            query: `.${CLASS}`,
+            className: CLASS
+        });
+        expect(PARENT_ELEMENT.querySelector(`.${CLASS}`)).toBeNull();
+    });
+});

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

@@ -0,0 +1,3 @@
+export declare const convertBase64ToObject: (value: string) => Record<string, any>;
+export declare const convertJwtToBase64: (jwt: string) => string;
+export declare function isJWTToken(token: string): boolean;

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

@@ -0,0 +1,22 @@
+export const convertBase64ToObject = (value) => {
+    try {
+        const decodedValue = [...window.atob(value)];
+        const mappedValue = decodedValue.map((c) => {
+            const codePoint = c.codePointAt(0);
+            if (codePoint === undefined)
+                return;
+            return '%' + ('00' + codePoint.toString(16)).slice(-2);
+        });
+        return JSON.parse(decodeURIComponent(mappedValue.join('')));
+    }
+    catch {
+        return {};
+    }
+};
+export const convertJwtToBase64 = (jwt) => {
+    return jwt.toString().split('.')[1].replace('-', '+').replace('_', '/');
+};
+export function isJWTToken(token) {
+    const JWT_REGEX = /^(?:[\w=-]+\.){2}[\w+./=-]+$/;
+    return JWT_REGEX.test(token);
+}

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

@@ -0,0 +1,32 @@
+import { convertBase64ToObject, convertJwtToBase64, isJWTToken } from './utilities.jwt';
+describe('convertBase64ToObject', () => {
+    test('base64 string should return an object', () => {
+        const BASE64 = 'eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ';
+        const exptectedObject = { sub: '1234567890', name: 'John Doe', iat: 1516239022 };
+        expect(convertBase64ToObject(BASE64)).toMatchObject(exptectedObject);
+    });
+    test('invalid base64 string should return an empty object', () => {
+        expect(convertBase64ToObject('e2ludmFsaWRPYmplY3R9=')).toMatchObject({});
+    });
+});
+describe('convertJwtToBase64', () => {
+    test('convert a JWT to a base64 string', () => {
+        const BASE64 = 'eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ';
+        const JWT = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
+        expect(convertJwtToBase64(JWT)).toBe(BASE64);
+    });
+});
+describe('isJWTToken', () => {
+    test('valid JWT token should return true', () => {
+        const validToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJucG8iLCJpYXQiOjE3MDA1Nzk4ODgsImxpY2Vuc2VfcHJvZmlsZSI6IndlYiIsImRybV90eXBlIjoid2lkZXZpbmUiLCJjbGllbnRfaXAiOiIzMS4yMS4yMDUuMTcxIn0.mxNDb_gx8nqwc5p-PwSPnJgjPB8_L-niXm_gIcgkQBw';
+        expect(isJWTToken(validToken)).toBe(true);
+    });
+    test('invalid JWT token should return false', () => {
+        const invalidToken = 'invalidToken';
+        expect(isJWTToken(invalidToken)).toBe(false);
+    });
+    test('an url input should return false, despite 3 dots', () => {
+        const invalidToken = 'https://www.example.com';
+        expect(isJWTToken(invalidToken)).toBe(false);
+    });
+});

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

@@ -0,0 +1,2 @@
+import { type LocalizableText } from 'bitmovin-player-ui/dist/js/framework/localization/i18n';
+export declare function localizeKey(key: string): LocalizableText;

package/lib/js/utilities/utilities.locale.js

@@ -0,0 +1,4 @@
+import { i18n } from 'bitmovin-player-ui/dist/js/framework/localization/i18n';
+export function localizeKey(key) {
+    return i18n.getLocalizer(key);
+}

package/lib/js/utilities/utilities.locale.test.js

@@ -0,0 +1,10 @@
+import { i18n } from 'bitmovin-player-ui/dist/js/framework/localization/i18n';
+import { localizeKey } from './utilities.locale';
+const KEY = 'settings.value';
+describe('localizeKey', () => {
+    it('should return a localized key', () => {
+        const spy = jest.spyOn(i18n, 'getLocalizer');
+        localizeKey(KEY);
+        expect(spy).toHaveBeenCalledWith(KEY);
+    });
+});

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

@@ -0,0 +1 @@
+export declare function getModuleExport(module: unknown): unknown;

package/lib/js/utilities/utilities.module.js

@@ -0,0 +1,4 @@
+export function getModuleExport(module) {
+    const isDefaultExport = typeof module === 'object' && module !== null && 'default' in module;
+    return isDefaultExport ? module.default : module;
+}

package/lib/js/utilities/utilities.module.test.js

@@ -0,0 +1,19 @@
+import { getModuleExport } from './utilities.module';
+describe('getModuleExport', () => {
+    it('should return null for the module', () => {
+        const MODULE = undefined;
+        expect(getModuleExport(MODULE)).toBeUndefined();
+    });
+    it('should return a string as module', () => {
+        const MODULE = 'module';
+        expect(getModuleExport(MODULE)).toBe(MODULE);
+    });
+    it('should return a non-default object as module', () => {
+        const MODULE = { module: true };
+        expect(getModuleExport(MODULE)).toMatchObject(MODULE);
+    });
+    it('should return the default module', () => {
+        const MODULE = { default: true };
+        expect(getModuleExport(MODULE)).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,7 @@
+interface StreamDurationInSecondsParams {
+    duration: string | number | undefined;
+    durationIsInMs?: boolean;
+}
+export declare function getStreamDurationInSeconds(params: StreamDurationInSecondsParams): number;
+export declare function validatePrid(prid: string | undefined): string;
+export {};

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

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

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

@@ -0,0 +1,32 @@
+import { getStreamDurationInSeconds, validatePrid } from './utilities.stream';
+describe('getStreamDurationInSeconds', () => {
+    it('shoud return -1 for an undefined duration', () => {
+        expect(getStreamDurationInSeconds({ duration: undefined })).toBe(-1);
+    });
+    it('shoud return -1 for an infinite duration', () => {
+        expect(getStreamDurationInSeconds({ duration: Number.POSITIVE_INFINITY })).toBe(-1);
+    });
+    it('shoud return the duration in seconds with a string as input', () => {
+        expect(getStreamDurationInSeconds({ duration: '10' })).toBe(10);
+    });
+    it('shoud return the duration in seconds with a number as input', () => {
+        expect(getStreamDurationInSeconds({ duration: 10 })).toBe(10);
+    });
+    it('shoud return the duration in seconds with a string as input in ms', () => {
+        expect(getStreamDurationInSeconds({ duration: '10000', durationIsInMs: true })).toBe(10);
+    });
+    it('shoud return the duration in seconds with a number as input in ms', () => {
+        expect(getStreamDurationInSeconds({ duration: 10000, durationIsInMs: true })).toBe(10);
+    });
+});
+describe('validatePrid', () => {
+    it('should return "unknown" for an empty prid', () => {
+        expect(validatePrid('')).toBe('unknown');
+    });
+    it('should return "unknown" for a null value', () => {
+        expect(validatePrid(undefined)).toBe('unknown');
+    });
+    it('should return the prid', () => {
+        expect(validatePrid('PRID')).toBe('PRID');
+    });
+});

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

@@ -0,0 +1 @@
+export declare function replaceSpecialCharacters(text: string): string;

package/lib/js/utilities/utilities.text.js

@@ -0,0 +1,3 @@
+export function replaceSpecialCharacters(text) {
+    return text.replace(/['()*]/g, (char) => `%${char.codePointAt(0)?.toString(16).toUpperCase()}`);
+}

package/lib/js/utilities/utilities.text.test.js

@@ -0,0 +1,18 @@
+import { replaceSpecialCharacters } from './utilities.text';
+describe('replaceSpecialCharacters', () => {
+    it('should replace special characters with their hexadecimal representation', () => {
+        const inputText = 'This is a test with ( and * characters.';
+        const result = replaceSpecialCharacters(inputText);
+        expect(result).toBe('This is a test with %28 and %2A characters.');
+    });
+    it('should handle an empty string', () => {
+        const inputText = '';
+        const result = replaceSpecialCharacters(inputText);
+        expect(result).toBe('');
+    });
+    it('should handle a string with no special characters', () => {
+        const inputText = 'This is a normal string without special characters.';
+        const result = replaceSpecialCharacters(inputText);
+        expect(result).toBe(inputText);
+    });
+});

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

@@ -0,0 +1 @@
+export declare function convertMsToSeconds(ms: number): number;

package/lib/js/utilities/utilities.time.js

@@ -0,0 +1,3 @@
+export function convertMsToSeconds(ms) {
+    return ms / 1000;
+}

package/lib/js/utilities/utilities.time.test.js

@@ -0,0 +1,8 @@
+import { convertMsToSeconds } from './utilities.time';
+describe('convertMsToSeconds', () => {
+    test('convert milliseconds to seconds', () => {
+        const TIME_IN_MS = 5000;
+        const TIME_IN_SECONDS = 5;
+        expect(convertMsToSeconds(TIME_IN_MS)).toBe(TIME_IN_SECONDS);
+    });
+});

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

@@ -0,0 +1,3 @@
+export declare function isMediaUrl(url: string): Promise<boolean>;
+export declare function isUrl(url: string): boolean;
+export declare const removeTrailingSlash: (url: string) => string;

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

@@ -0,0 +1,29 @@
+const supportedMediaTypes = [
+    'video/',
+    'audio/',
+    'application/octet-stream',
+    'application/mp4',
+    'application/x-mpegURL',
+    'application/vnd.apple.mpegurl',
+    'application/ogg'
+];
+export async function isMediaUrl(url) {
+    if (!isUrl(url))
+        return false;
+    try {
+        const response = await fetch(url, { method: 'HEAD' });
+        const header = response.headers.get('Content-Type') || '';
+        return supportedMediaTypes.some((mediaType) => header.startsWith(mediaType));
+    }
+    catch (error) {
+        console.error('Failed to fetch the URL', error);
+        return false;
+    }
+}
+export function isUrl(url) {
+    const URL_REGEX = /^(http|https):\/\/(?:www\.)?[\dA-Za-z-]+(?:\.[A-Za-z]{2,})+(?:\/[^ "]+)?(?:\?.*)?$/;
+    return URL_REGEX.test(url);
+}
+export const removeTrailingSlash = (url) => {
+    return url.slice(-1) === '/' ? (url = url.slice(0, -1)) : url;
+};

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

@@ -0,0 +1,46 @@
+import fetchMock from 'jest-fetch-mock';
+import { isMediaUrl, isUrl, removeTrailingSlash } from './utilities.url';
+fetchMock.enableMocks();
+const INVALID_URL = 'invalidurl';
+const VALID_URL = 'https://example.com';
+describe('isMediaUrl', () => {
+    it('should return false for an invalid url', async () => {
+        expect(await isMediaUrl(INVALID_URL)).toBeFalsy();
+    });
+    it('should fail to fetch the url and return false', async () => {
+        expect(await isMediaUrl(VALID_URL)).toBeFalsy();
+    });
+    it('should not contain a header with a mediaType and return false', async () => {
+        fetchMock.mockResponseOnce('', { headers: { 'Content-Type': 'application/json' } });
+        expect(await isMediaUrl(VALID_URL)).toBeFalsy();
+    });
+    it('should contain a header with a mediaType and return true', async () => {
+        fetchMock.mockResponseOnce('', { headers: { 'Content-Type': 'application/vnd.apple.mpegurl' } });
+        expect(await isMediaUrl(VALID_URL)).toBeTruthy();
+    });
+});
+describe('isUrl', () => {
+    test('valid URL should return true', () => {
+        const VALID_URL = 'https://www.example.com';
+        expect(isUrl(VALID_URL)).toBeTruthy();
+    });
+    test('valid URL with parameters should return true', () => {
+        const VALID_URL = 'https://www.example.com?foo=bar';
+        expect(isUrl(VALID_URL)).toBeTruthy();
+    });
+    test('valid URL with parameters should return true', () => {
+        const VALID_URL = 'https://example.com';
+        expect(isUrl(VALID_URL)).toBeTruthy();
+    });
+    test('invalid URL should return false', () => {
+        const INVALID_URL = 'invalidurl';
+        expect(isUrl(INVALID_URL)).toBeFalsy();
+    });
+});
+describe('removeTrailingSlash', () => {
+    test('trailing slash should be removed from url', () => {
+        const URL_BASE = 'https://www.example.com';
+        const URL_WITH_TRAILING_SLASH = URL_BASE + '/';
+        expect(removeTrailingSlash(URL_WITH_TRAILING_SLASH)).toBe(URL_BASE);
+    });
+});

package/lib/js/utilities/utilities.user-agent.d.ts

@@ -0,0 +1,3 @@
+export declare function isFairPlayDrmSupported(keySystems: string[]): boolean;
+export declare const isSafariUserAgent: (userAgent: string) => boolean;
+export declare function isSafari(): boolean;

package/lib/js/utilities/utilities.user-agent.js

@@ -0,0 +1,13 @@
+import { supportedKeySystems } from '../settings/settings.user-agent';
+export function isFairPlayDrmSupported(keySystems) {
+    return keySystems.some((keySystem) => window.WebKitMediaKeys?.isTypeSupported(keySystem, 'video/mp4'));
+}
+export const isSafariUserAgent = (userAgent) => userAgent.includes('Safari') &&
+    !userAgent.includes('Chrome') &&
+    !userAgent.includes('IEMobile') &&
+    !userAgent.includes('Edge') &&
+    !userAgent.includes('Chromium') &&
+    !userAgent.includes('Android');
+export function isSafari() {
+    return isSafariUserAgent(navigator.userAgent) || isFairPlayDrmSupported(supportedKeySystems);
+}

package/lib/js/utilities/utilities.user-agent.test.js

@@ -0,0 +1,60 @@
+import { isFairPlayDrmSupported, isSafari, isSafariUserAgent } from './utilities.user-agent';
+const defaultKeySystems = ['com.apple.fps.1_0', 'com.apple.fps.2_0'];
+describe('isFairPlayDrmSupported', () => {
+    it('should call WebKitMediaKeys.isTypeSupported with the right parameters', () => {
+        const isTypeSupported = jest.fn();
+        Object.defineProperty(window, 'WebKitMediaKeys', {
+            value: { isTypeSupported },
+            writable: true
+        });
+        isFairPlayDrmSupported(defaultKeySystems);
+        expect(isTypeSupported).toHaveBeenCalledWith('com.apple.fps.1_0', 'video/mp4');
+        expect(isTypeSupported).toHaveBeenCalledWith('com.apple.fps.2_0', 'video/mp4');
+    });
+    it('should return false if WebKitMediaKeys is not available', () => {
+        Object.defineProperty(window, 'WebKitMediaKeys', {
+            value: undefined,
+            writable: true
+        });
+        expect(isFairPlayDrmSupported(defaultKeySystems)).toBe(false);
+    });
+    it('should return false if an empty array of key systems is provided', () => {
+        Object.defineProperty(window, 'WebKitMediaKeys', {
+            value: { isTypeSupported: () => true },
+            writable: true
+        });
+        expect(isFairPlayDrmSupported([])).toBe(false);
+    });
+});
+describe('isSafariUserAgent', () => {
+    it('should return true for Safari', () => {
+        expect(isSafariUserAgent('Safari')).toBe(true);
+    });
+    it('should return false for other user agents', () => {
+        expect(isSafariUserAgent('Chrome')).toBe(false);
+        expect(isSafariUserAgent('IEMobile')).toBe(false);
+        expect(isSafariUserAgent('Edge')).toBe(false);
+        expect(isSafariUserAgent('Chromium')).toBe(false);
+        expect(isSafariUserAgent('Android')).toBe(false);
+    });
+});
+describe('isSafari', () => {
+    it('should return true if the user agent is Safari', () => {
+        jest.spyOn(global.navigator, 'userAgent', 'get').mockReturnValue('Safari');
+        expect(isSafari()).toBe(true);
+    });
+    it('should return true if FairPlayDrm is supported', () => {
+        ;
+        window.WebKitMediaKeys = function () { };
+        window.WebKitMediaKeys.isTypeSupported = () => true;
+        jest.spyOn(global.navigator, 'userAgent', 'get').mockReturnValue('Chrome');
+        expect(isSafari()).toBe(true);
+    });
+    it('should return false if the user agent is not Safari and FairPlayDrm is not supported', () => {
+        ;
+        window.WebKitMediaKeys = function () { };
+        window.WebKitMediaKeys.isTypeSupported = () => false;
+        jest.spyOn(global.navigator, 'userAgent', 'get').mockReturnValue('Safari Chrome IEMobile Edge Chromium Android');
+        expect(isSafari()).toBe(false);
+    });
+});

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

@@ -0,0 +1 @@
+export declare function logVersion(version: string): void;

package/lib/js/utilities/{printversion.js → utilities.version.js}

@@ -1,5 +1,5 @@
-export function printVersion(version) {
-    const asciiArt = `
+export function logVersion(version) {
+    const ASCII_ART = `
                    ╔▒▒╖                        
                 _╔╠╠╠╠╠╠╠φ_                    
               _#╠╠╠╠╠╠╠╠╠╠╠#_                  
@@ -17,10 +17,10 @@ export function printVersion(version) {
                  \`╝╠╠╠╠╠╩\`                     
                    \`╙╙╙                        
 `;
-    const title = 'NPO Player';
-    const versionString = 'v' + String(version);
-    const colorCode = '#ff6d00';
-    const titleStyle = `font-size: 24px; font-weight: bold; color: ${colorCode}; padding: 2px 4px;`;
-    const versionStyle = 'font-size: 24px; font-weight: bold; padding: 2px 4px;';
-    console.log(`%c${asciiArt}%c${title} %c${versionString}`, `color: ${colorCode}; background-color: rgb(11, 28, 54);`, titleStyle, versionStyle);
+    const COLOR_CODE = '#ff6d00';
+    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);
+    const VERSION_STYLE = 'font-size: 24px; font-weight: bold; padding: 2px 4px;';
+    console.log(`%c${ASCII_ART}%c${TITLE} %c${VERSION_STRING}`, `color: ${COLOR_CODE}; background-color: rgb(11, 28, 54);`, TITLE_STYLE, VERSION_STYLE);
 }

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

@@ -0,0 +1,26 @@
+import { logVersion } from './utilities.version';
+describe('logVersion', () => {
+    it('should print the current version', () => {
+        const logSpy = jest.spyOn(console, 'log');
+        logVersion('1.0.0');
+        const ASCII_ART = `
+                   ╔▒▒╖                        
+                _╔╠╠╠╠╠╠╠φ_                    
+              _#╠╠╠╠╠╠╠╠╠╠╠#_                  
+            ╓╔╠╠╠╠╝╝╠╠╠╠╠╠╠╠╠▒,                
+          ╔╬╠╠╠╠╠    '╚╠╠╠╠╠╠╠╠▒╖              
+        ╔╬╠╠╠╠╠╠╠       '╚╠╠╠╠╠╠╠╬╦            
+     _╓╠╠╠╠╠╠╠╠╠╠          '╚╠╠╠╠╠╠╠╖╖         
+     ╠╠╠╠╠╠╠╠╠╠╠╠            ╠╠╠╠╠╠╠╠▒         
+     ╬╠╠╠╠╠╠╠╠╠╠╠          _╔╬╠╠╠╠╠╠╠╝         
+      \`╝╠╠╠╠╠╠╠╠╠       _╔╠╠╠╠╠╠╠╠╠╩\`          
+        \`╚╠╠╠╠╠╠╠    _╔╬╠╠╠╠╠╠╠╠╠╩             
+           ╙╠╠╠╠╠▒╗φ╬╠╠╠╠╠╠╠╠╠╠╜               
+             ╙╬╠╠╠╠╠╠╠╠╠╠╠╠╠╠╙                 
+               '╬╠╠╠╠╠╠╠╠╠╝^                   
+                 \`╝╠╠╠╠╠╩\`                     
+                   \`╙╙╙                        
+`;
+        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;');
+    });
+});

package/lib/lang/nl.json

@@ -69,5 +69,6 @@
     "seekBar": "Video tijdlijn",
     "seekBar.value": "Waarde",
     "seekBar.timeshift": "Timeshift",
-    "seekBar.durationText": "out of"
+    "seekBar.durationText": "out of",
+    "segment.unplayableTitle": "Niet beschikbaar"
 }

package/lib/npoplayer-bridge.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/lib/npoplayer-bridge.test.js

@@ -1,14 +1,16 @@
-jest.mock('./js/ui/nativemobileuifactory', () => ({
-    nativeMobileUiFactory: jest.fn(),
+import '@testing-library/jest-dom';
+jest.mock('./ui/nativemobileuifactory', () => ({
+    nativeMobileUiFactory: jest.fn()
 }));
-const { nativeMobileUiFactory } = require('./js/ui/nativemobileuifactory');
+const { nativeMobileUiFactory } = require('./ui/nativemobileuifactory');
 beforeAll(() => {
+    ;
     window.bitmovin = {};
     window.bitmovin.playerui = () => { };
     window.bitmovin.playerui.UIFactory = {
         buildDefaultSmallScreenUI: (player, config = {}) => {
             return nativeMobileUiFactory(player, config);
-        },
+        }
     };
 });
 beforeEach(() => {
@@ -20,4 +22,3 @@ test('Bridge initation: nativeMobileUiFactory is called with correct arguments f
     window.bitmovin.playerui.UIFactory.buildDefaultSmallScreenUI(mockPlayer, mockConfig);
     expect(nativeMobileUiFactory).toHaveBeenCalledWith(mockPlayer, mockConfig);
 });
-export {};

package/lib/npoplayer.d.ts

@@ -1,21 +1,21 @@
+import { NpoPlayerServices } from './services/services';
 import { type StreamTracker, type NPOTag } 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';
 import { LogEmitter } from './types/classes';
-import { type DRMProfile, type ApiPayload, type NPOTagObject, type Section, type StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, NpoPlayerUIVariants } from './types/interfaces';
-export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants, };
+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;
     sourceConfig: SourceConfig;
     streamObject: StreamObject;
-    player: PlayerAPI | null;
-    uiManager: UIManager | null;
+    player: PlayerAPI | undefined;
+    uiManager: UIManager | undefined;
     npoTag: NPOTagObject | undefined;
-    streamTracker: StreamTracker | null;
+    streamTracker: StreamTracker | undefined;
     logEmitter: LogEmitter;
     uiComponents: UIComponents;
-    fragment: Section | null;
     container: HTMLElement;
     streamOptions: StreamOptions;
     jwt: string;
@@ -26,13 +26,17 @@ export default class NpoPlayer {
     variant: NpoPlayerUIVariants;
     isShowingPlayNextScreen: boolean;
     canceledPlayNextScreen: boolean;
-    constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | null, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
+    playerContext: PlayerContext | undefined;
+    npoplayerServices: NpoPlayerServices;
+    eventListeners: EventListeners | undefined;
+    mockNpoPlayer: any;
+    userPreferences: LocalStorageData;
+    constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | undefined, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig, variant: NpoPlayerUIVariants): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
-    createUIManager(player: PlayerAPI, variant: NpoPlayerUIVariants): Promise<void>;
+    createUIManager(player: PlayerAPI, playerContext: PlayerContext, variant: NpoPlayerUIVariants): Promise<void>;
     doError(input: any, status?: number): void;
-    keyPress(e: KeyboardEvent): void;
-    play(): void;
+    play(): Promise<void>;
     pause(): void;
     setVolume(volume: number): void;
     increaseVolume(): void;