@npo/player 1.25.0 → 1.27.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.25.0
+Current version: v1.27.0
 
 The changelog is available at https://docs.npoplayer.nl/implementation/web/changelog/
 

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

@@ -8,11 +8,13 @@ export function handleStartOffset(playerContext, offset) {
         return;
     }
     const seek = () => {
+        player.off(NpoPlayerEvent.Ready, seek);
         player.off(NpoPlayerEvent.SourceLoaded, seek);
         player.off(NpoPlayerEvent.AdBreakFinished, seek);
         player.off(NpoPlayerEvent.AdError, seek);
         player.seek(offset);
     };
+    player.on(NpoPlayerEvent.Ready, seek);
     player.on(NpoPlayerEvent.SourceLoaded, seek);
     player.on(NpoPlayerEvent.AdBreakFinished, seek);
     player.on(NpoPlayerEvent.AdError, seek);
@@ -28,22 +30,22 @@ export function shiftToProgramStart(playerContext, timestamp) {
     player.timeShift(timestamp);
 }
 export function handleLiveOffsetLogic(playerContext, options) {
-    const { player, npoplayer } = playerContext;
-    if (npoplayer.uiComponents.watchFromStartButton == undefined)
+    const { player, npoPlayer } = playerContext;
+    if (npoPlayer.uiComponents.watchFromStartButton == undefined)
         return;
     if (options?.liveProgramTime == undefined) {
-        npoplayer.uiComponents.watchFromStartButton.hide();
+        npoPlayer.uiComponents.watchFromStartButton.hide();
         return;
     }
-    npoplayer.streamOptions.liveProgramTime = options.liveProgramTime;
+    npoPlayer.streamOptions.liveProgramTime = options.liveProgramTime;
     if (player.isLive() && options.liveProgramTime > 0) {
-        npoplayer.uiComponents.watchFromStartButton.show();
+        npoPlayer.uiComponents.watchFromStartButton.show();
     }
     else {
-        npoplayer.uiComponents.watchFromStartButton.hide();
+        npoPlayer.uiComponents.watchFromStartButton.hide();
     }
     if (options.liveOffset !== null && options.liveOffset !== false && options.liveProgramTime > 0) {
-        npoplayer.uiComponents.watchFromStartButton.hide();
+        npoPlayer.uiComponents.watchFromStartButton.hide();
         shiftToProgramStart(playerContext, options.liveProgramTime);
     }
 }

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

@@ -39,7 +39,7 @@ describe('Test offset handling', () => {
             seek: seekMock,
             off: jest.fn(),
             on: jest.fn((event, callback) => {
-                if (event === PlayerEvent.SourceLoaded) {
+                if (event === PlayerEvent.Ready) {
                     callback();
                 }
             })

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

@@ -91,7 +91,7 @@ export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObj
             },
             {
                 action: 'play',
-                handler: () => player.play()
+                handler: () => void player.play()
             },
             {
                 action: 'pause',
@@ -99,7 +99,7 @@ export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObj
             },
             {
                 action: 'stop',
-                handler: () => player.unload()
+                handler: () => void player.unload()
             }
         ];
         for (const { action, handler } of actionHandlers) {

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

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

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

@@ -1,6 +1,6 @@
 import { LogLevel } from 'bitmovin-player';
 import { isSafari } from '../../utilities/utilities.user-agent';
-export function processPlayerConfig(npoplayer, playerConfig) {
+export function processPlayerConfig(npoPlayer, playerConfig) {
     const processedConfig = playerConfig;
     if (isSafari()) {
         processedConfig.playback = {
@@ -17,9 +17,9 @@ export function processPlayerConfig(npoplayer, playerConfig) {
         receiverVersion: 'v3',
         messageNamespace: 'urn:x-cast:com.bitmovin.player.caf',
         customReceiverConfig: {
-            drm: npoplayer.drmProfile.drm,
-            profileName: npoplayer.drmProfile.profileName,
-            jwt: npoplayer.jwt
+            drm: npoPlayer.drmProfile.drm,
+            profileName: npoPlayer.drmProfile.profileName,
+            jwt: npoPlayer.jwt
         }
     };
     const userRemoteControlConfig = processedConfig.remotecontrol || defaultRemoteControlConfig;

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

@@ -2,4 +2,5 @@ import { StreamObject, StreamOptions } from 'types/interfaces';
 import { SourceConfig } from 'bitmovin-player';
 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>;

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

@@ -1,6 +1,7 @@
 import { HttpResponseType } from 'bitmovin-player';
 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) {
     const npoDrmGateway = 'https://npo-drm-gateway.samgcloud.nepworldwide.nl/authentication?custom_data=';
     switch (drm) {
@@ -66,11 +67,9 @@ async function getServerCertificate(url) {
     const response = await fetch(url);
     return response.arrayBuffer();
 }
-const getSubtitleLabels = function (data) {
-    if (data.label === 'nl') {
-        return 'Nederlands';
-    }
-    return data.label;
+export const getSubtitleLabels = function (data) {
+    const langKey = data.lang.toLowerCase();
+    return subtitleLabelMap[langKey] || data.label || langKey;
 };
 const getQualityLabels = function (data) {
     return data.height + 'p';

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

@@ -0,0 +1,25 @@
+import { getSubtitleLabels } from './processsourceconfig';
+describe('getSubtitleLabels', () => {
+    it('should return the correct language label for known lang codes', () => {
+        expect(getSubtitleLabels({ lang: 'ar' })).toBe('Arabisch');
+        expect(getSubtitleLabels({ lang: 'bg' })).toBe('Bulgaars');
+        expect(getSubtitleLabels({ lang: 'de' })).toBe('Duits');
+        expect(getSubtitleLabels({ lang: 'en' })).toBe('Engels');
+        expect(getSubtitleLabels({ lang: 'es' })).toBe('Spaans');
+        expect(getSubtitleLabels({ lang: 'fr' })).toBe('Frans');
+        expect(getSubtitleLabels({ lang: 'it' })).toBe('Italiaans');
+        expect(getSubtitleLabels({ lang: 'nl' })).toBe('Nederlands');
+        expect(getSubtitleLabels({ lang: 'ma' })).toBe('Marokkaans');
+        expect(getSubtitleLabels({ lang: 'pl' })).toBe('Pools');
+        expect(getSubtitleLabels({ lang: 'ua' })).toBe('Oekraïens');
+        expect(getSubtitleLabels({ lang: 'tr' })).toBe('Turks');
+    });
+    it('should return the original label if the lang code is unknown', () => {
+        expect(getSubtitleLabels({ lang: 'jp', label: 'Japanese' })).toBe('Japanese');
+        expect(getSubtitleLabels({ lang: 'jp' })).toBe('jp');
+    });
+    it('should handle mixed case lang codes', () => {
+        expect(getSubtitleLabels({ lang: 'EN' })).toBe('Engels');
+        expect(getSubtitleLabels({ lang: 'Fr' })).toBe('Frans');
+    });
+});

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

@@ -1,4 +1,3 @@
 export { handleStartOffset, handleLiveOffsetLogic, shiftToProgramStart } from './handlers/handleoffsets';
-export { handlePlayerError } from './handlers/error';
 export { processPlayerConfig } from './handlers/processplayerconfig';
 export { processSourceConfig } from './handlers/processsourceconfig';

package/lib/js/playeractions/playeractions.js

@@ -1,4 +1,3 @@
 export { handleStartOffset, handleLiveOffsetLogic, shiftToProgramStart } from './handlers/handleoffsets';
-export { handlePlayerError } from './handlers/error';
 export { processPlayerConfig } from './handlers/processplayerconfig';
 export { processSourceConfig } from './handlers/processsourceconfig';

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

@@ -0,0 +1,6 @@
+import { SourceConfig, StreamObject } from 'types/interfaces';
+export declare function getAnalyticsPrid(params: {
+    source: string;
+    sourceConfig?: SourceConfig;
+    streamObject?: StreamObject;
+}): string;

package/lib/js/utilities/utilities.prid.js

@@ -0,0 +1,8 @@
+import { isJWTToken } from './utilities.jwt';
+export function getAnalyticsPrid(params) {
+    const { source, sourceConfig, streamObject } = params;
+    if (isJWTToken(source)) {
+        return streamObject?.metadata?.prid ?? '';
+    }
+    return sourceConfig?.metadata?.prid ?? source;
+}

package/lib/js/utilities/utilities.prid.test.js

@@ -0,0 +1,46 @@
+import { mockStreamObject } from '../../../tests/mocks/mockStreamObject';
+import { getAnalyticsPrid } from './utilities.prid';
+describe('getAnalyticsPrid', () => {
+    it('should return the prid from streamObject if the source is a JWT token', () => {
+        const result = getAnalyticsPrid({
+            source: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+            sourceConfig: undefined,
+            streamObject: {
+                ...mockStreamObject,
+                metadata: {
+                    ...mockStreamObject.metadata,
+                    prid: '123'
+                }
+            }
+        });
+        expect(result).toBe('123');
+    });
+    it('should return an empty string if the source is a JWT token but no prid is present in streamObject', () => {
+        const result = getAnalyticsPrid({
+            source: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+            sourceConfig: undefined,
+            streamObject: {
+                ...mockStreamObject
+            }
+        });
+        expect(result).toBe('');
+    });
+    it('should return the prid from sourceConfig if the source is a media file URL', () => {
+        const result = getAnalyticsPrid({
+            source: 'https://example.com/media/video.mp4',
+            sourceConfig: { metadata: { prid: '456' } },
+            streamObject: undefined
+        });
+        expect(result).toBe('456');
+    });
+    it('should return the source (media file URL) if no prid is found', () => {
+        const result = getAnalyticsPrid({
+            source: 'https://example.com/media/audio.mp3',
+            sourceConfig: undefined,
+            streamObject: {
+                ...mockStreamObject
+            }
+        });
+        expect(result).toBe('https://example.com/media/audio.mp3');
+    });
+});

package/lib/lang/nl.json

@@ -52,7 +52,7 @@
     "googleCast": "Google Cast",
     "vr": "VR",
     "off": "Uit",
-    "auto": "automatisch",
+    "auto": "Automatisch",
     "back": "Terug",
     "reset": "Herstellen",
     "replay": "Replay",

package/lib/lang/subtitleLabels/nl.json

@@ -0,0 +1,14 @@
+{
+    "ar": "Arabisch",
+    "bg": "Bulgaars",
+    "de": "Duits",
+    "en": "Engels",
+    "es": "Spaans",
+    "fr": "Frans",
+    "it": "Italiaans",
+    "nl": "Nederlands",
+    "ma": "Marokkaans",
+    "pl": "Pools",
+    "ua": "Oekraïens",
+    "tr": "Turks"
+}

package/lib/npoplayer.d.ts

@@ -4,7 +4,7 @@ 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 StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, type LocalStorageData, type PlayerContext, type EventListeners, NpoPlayerUIVariants } from './types/interfaces';
+import { type DRMProfile, type ApiPayload, type NPOTagObject, type StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, type PlayerContext, type EventListeners, NpoPlayerUIVariants } from './types/interfaces';
 export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants };
 export default class NpoPlayer {
     playerConfig: PlayerConfig | undefined;
@@ -30,10 +30,9 @@ export default class NpoPlayer {
     isShowingPlayNextScreen: boolean;
     canceledPlayNextScreen: boolean;
     playerContext: PlayerContext | undefined;
-    npoplayerServices: NpoPlayerServices;
+    npoPlayerServices: NpoPlayerServices;
     eventListeners: EventListeners | undefined;
     mockNpoPlayer: any;
-    userPreferences: LocalStorageData;
     constructor(container: HTMLElement | {
         container: HTMLElement;
         playerConfig: PlayerConfig;
@@ -42,9 +41,9 @@ export default class NpoPlayer {
         variant?: NpoPlayerUIVariants;
         npoTagPageTracker?: PageTracker | undefined;
     }, playerConfig?: PlayerConfig | undefined, npoTag?: InitialisationProps | undefined, npoTagInstance?: NPOTag | undefined, variant?: NpoPlayerUIVariants, npoTagPageTracker?: PageTracker | undefined);
+    keydownHandler: (e: KeyboardEvent) => void;
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
-    doError(input: any, status?: number): void;
     play(): Promise<void>;
     pause(): void;
     setVolume(volume: number): void;

package/lib/npoplayer.js

@@ -1,33 +1,26 @@
 import { NpoPlayerServices } from './services/services';
 import { Player, PlayerEvent } from 'bitmovin-player';
 import AdsModuleBM from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
-import { logEvent, initPlayerTracker, startPlayerTracker } from './js/tracking/playertracker';
 import { hidePlayNextScreen, showPlayNextScreenIfNeeded } from './ui/handlers/playnextscreen';
 import * as playerAction from './js/playeractions/playeractions';
 import { getModuleExport } from './js/utilities/utilities.module';
-import { getStreamObject } from './js/api/getstreamobject';
 import { isJWTToken } from './js/utilities/utilities.jwt';
 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 pkg from '../package.json';
-import { NpoPlayerUIVariants, LocalStorageValues } from './types/interfaces';
+import { NpoPlayerUIVariants } from './types/interfaces';
 import { nativeMobileUiFactory } from './ui/nativemobileuifactory';
 import { setupMediaSessionActionHandlers } from './js/playeractions/handlers/mediasessionactions';
 import { removeReplayClass } from './js/playeractions/handlers/removereplayclass';
 import { updateLiveMarkers } from './js/markers/updateLiveMarkers';
 import { NpoPlayerAPI } from './services/npoPlayerAPI/npoPlayerAPI';
+import { emptyStreamObject } from './services/npoPlayerAPI/contants';
 export { NpoPlayerUIVariants };
 export default class NpoPlayer {
     constructor(container, playerConfig, npoTag, npoTagInstance, variant, npoTagPageTracker) {
         this.sourceConfig = {};
-        this.streamObject = {
-            stream: { drmType: '', streamProfile: '', streamURL: '', avType: '', sourceProfile: '' },
-            metadata: { title: '', description: '' },
-            assets: { scrubbingThumbnail: '', subtitles: [] },
-            user: { type: 'anonymous' }
-        };
+        this.streamObject = emptyStreamObject;
         this.player = undefined;
         this.uiManager = undefined;
         this.npoTagInitialisation = undefined;
@@ -45,9 +38,13 @@ export default class NpoPlayer {
         this.isShowingPlayNextScreen = false;
         this.canceledPlayNextScreen = false;
         this.playerContext = undefined;
-        this.npoplayerServices = new NpoPlayerServices();
+        this.npoPlayerServices = new NpoPlayerServices();
         this.eventListeners = undefined;
-        this.userPreferences = {};
+        this.keydownHandler = (e) => {
+            if (!this.playerContext)
+                return;
+            this.npoPlayerServices.keyboardHandler(this.playerContext, e);
+        };
         if (typeof container === 'object' && !(container instanceof HTMLElement)) {
             const params = container;
             this.container = params.container;
@@ -70,9 +67,6 @@ export default class NpoPlayer {
             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) {
@@ -80,47 +74,31 @@ export default class NpoPlayer {
         this.player = new Player(_container, processedPlayerConfig);
         Player.addModule(getModuleExport(AdsModuleBM));
         const npoPlayerAPI = new NpoPlayerAPI(this.player);
-        this.playerContext = { player: npoPlayerAPI, npoplayer: this };
-        this.userPreferences = this.npoplayerServices.getStoredUserPrefs();
-        this.npoplayerServices.handleUserPrefs(this.playerContext);
-        this.npoplayerServices.setAccessibilityAttributes(this.playerContext);
-        window.addEventListener('beforeunload', () => {
-            if (this.player) {
-                this.npoplayerServices.setStoredUserPrefs(LocalStorageValues.SUBTITLES_ENABLED, npoPlayerAPI.areSubtitlesEnabled().toString());
-                this.npoplayerServices.setStoredUserPrefs(LocalStorageValues.VOLUME, npoPlayerAPI.getVolume());
-                this.npoplayerServices.setStoredUserPrefs(LocalStorageValues.IS_MUTED, npoPlayerAPI.isMuted().toString());
-            }
-        });
-        this.container.addEventListener('keydown', (e) => {
-            if (!this.playerContext)
-                return;
-            this.npoplayerServices.keyboardHandler(this.playerContext, e);
-        }, true);
+        this.playerContext = { player: npoPlayerAPI, npoPlayer: this };
+        this.npoPlayerServices.initPlayerTracker(this.playerContext);
+        this.npoPlayerServices.handleUserPrefs(this.playerContext);
+        this.npoPlayerServices.setAccessibilityAttributes(this.playerContext);
+        this.npoPlayerServices.handlePreferences(this.playerContext);
+        this.container.addEventListener('keydown', this.keydownHandler, true);
     }
     async loadStream(source, options = {}) {
-        if (!this.playerContext)
-            return;
-        this.streamOptions = options;
-        if (this.player == undefined) {
+        if (!this.playerContext || !this.player) {
             console.error('Er is nog geen player geladen.');
             return;
         }
-        if (this.adBreakActive) {
-            const currentAd = this.player.ads.getActiveAdBreak().id;
-            this.player.ads.discardAdBreak(currentAd);
-        }
+        this.streamOptions = options;
+        this.playerContext.player.removeClassFromNpoPlayerElement('npo-player-error');
+        this.npoPlayerServices.discardAdBreak(this.playerContext);
         let _streamObject;
         const sourceIsUrl = isUrl(source);
         const sourceIsMedia = await isMediaUrl(source);
         const sourceIsJWTToken = isJWTToken(source);
-        const getDurationAndStartPlayerTracker = function () {
-            if (this.player === null)
-                return;
-            const prid = (isJWTToken(source) ? this.streamObject?.metadata.prid : source) || 'unknown';
-            const duration = this.player ? this.player.getDuration() : undefined;
-            startPlayerTracker(this, getStreamDurationInSeconds({ duration: duration }), this.version, prid);
-        }.bind(this);
+        if (this.streamOptions.npoTagPageTracker) {
+            this.npoTagPageTracker = this.streamOptions.npoTagPageTracker;
+        }
         if (sourceIsUrl && sourceIsMedia) {
+            _streamObject = emptyStreamObject;
+            this.streamObject = _streamObject;
             this.sourceConfig = {
                 ...options.sourceConfig,
                 progressive: source,
@@ -131,12 +109,17 @@ export default class NpoPlayer {
                     customData5: this.version
                 }
             };
+            void this.playerContext.player.createUIManager(this.playerContext, this.variant);
             await this.playerContext.player?.load(this.sourceConfig);
-            getDurationAndStartPlayerTracker();
+            this.npoPlayerServices.startPlayerTracker({
+                playerContext: this.playerContext,
+                source: source,
+                duration: undefined
+            });
         }
         else if (sourceIsJWTToken) {
             this.jwt = source;
-            const profile = await this.npoplayerServices.decideProfile(this.playerContext, options?.preferredDRM ?? '');
+            const profile = await this.npoPlayerServices.decideProfile(this.playerContext, options?.preferredDRM ?? '');
             const defaultEndpoint = 'https://prod.npoplayer.nl/';
             const endpoint = options?.endpoint ?? defaultEndpoint;
             const payload = {
@@ -153,59 +136,58 @@ export default class NpoPlayer {
                     }
                 }
             };
+            void this.playerContext.player.createUIManager(this.playerContext, this.variant);
             try {
-                _streamObject = await getStreamObject(this, payload);
+                _streamObject = await this.npoPlayerServices.fetchStream(this.playerContext, payload);
                 this.streamObject = _streamObject;
-                if (_streamObject) {
-                    await this.playerContext.player.createUIManager(this.playerContext, this.variant);
-                }
             }
-            catch (error) {
-                this.doError('Het is niet gelukt de stream op te halen. \n' + error);
+            catch {
                 this.player.pause();
                 return;
             }
             if (this.streamObject?.stream == undefined)
                 return;
             const drmType = this.streamObject.stream.drmType ?? undefined;
-            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');
-            let streamDuration = _streamObject.metadata.duration;
-            const streamPrid = this.streamObject.metadata.prid || _streamObject.metadata.prid;
-            if (this.isShowingPlayNextScreen) {
-                this.hidePlayNextScreen();
+            if (drmType !== undefined && drmType !== profile.drm) {
+                await this.npoPlayerServices.handleError(this.playerContext, 2007);
+                return;
             }
+            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);
+            this.hidePlayNextScreen();
+            const streamDuration = _streamObject.metadata.duration;
             const initAndStartTracker = () => {
-                if (this.player === null)
+                if (!this.playerContext || !this.player)
                     return;
                 this.player?.off(PlayerEvent.AdBreakFinished, initAndStartTracker);
                 this.player?.off(PlayerEvent.AdError, initAndStartTracker);
-                streamDuration =
-                    streamDuration == undefined
-                        ? getDurationAndStartPlayerTracker()
-                        : startPlayerTracker(this, getStreamDurationInSeconds({ duration: streamDuration, durationIsInMs: true }), this.version, streamPrid);
+                this.npoPlayerServices.startPlayerTracker({
+                    playerContext: this.playerContext,
+                    source: source,
+                    duration: streamDuration ? Number(streamDuration) : undefined
+                });
             };
             if (this.variant === NpoPlayerUIVariants.DEFAULT &&
                 this.streamObject.metadata.hasPreroll === 'true' &&
                 this.streamObject.assets.preroll) {
                 this.player.on(PlayerEvent.AdBreakFinished, initAndStartTracker);
                 this.player.on(PlayerEvent.AdError, initAndStartTracker);
-                await this.npoplayerServices.schedulePreRolls(this.playerContext);
+                await this.npoPlayerServices.schedulePreRolls(this.playerContext);
             }
             else {
                 initAndStartTracker();
             }
         }
         else {
-            this.doError(`Het is niet gelukt de stream op te halen: \n Input is geen valide token of media object.`, 500);
+            await this.npoPlayerServices.handleError(this.playerContext, 500);
+        }
+        this.npoPlayerServices.handleStreamOptions(this.playerContext);
+        this.npoPlayerServices.setupNicamKijkwijzerIcons(this.playerContext);
+        if (this.variant === NpoPlayerUIVariants.VERTICAL) {
+            this.npoPlayerServices.handleVerticalVideoControls(this.playerContext);
+            this.npoPlayerServices.handleVerticalVideoSettings(this.playerContext);
         }
-        this.npoplayerServices.setupNicamKijkwijzerIcons(this.playerContext);
-        this.player.on(PlayerEvent.Play, () => {
-            this.npoplayerServices.showNicamAfterUiDelay(this.playerContext, this.uiManager);
-        });
-        this.npoplayerServices.handleVerticalVideoControls(this.playerContext, this.variant);
         this.player.on(PlayerEvent.Seek, () => {
             removeReplayClass(this.player);
         });
@@ -225,14 +207,6 @@ export default class NpoPlayer {
         }.bind(this);
         this.player.on(PlayerEvent.Ready, setLiveOffsetListener);
     }
-    doError(input, status) {
-        if (this.player == undefined)
-            return;
-        if (status) {
-            this.logEmitter.emit('logError', status);
-        }
-        playerAction.handlePlayerError(this.player, this.uiComponents, input);
-    }
     async play() {
         await this.playerContext?.player.play();
     }
@@ -311,6 +285,8 @@ export default class NpoPlayer {
         this.streamOptions.playNext?.cancelCallback?.();
     }
     hidePlayNextScreen() {
+        if (!this.isShowingPlayNextScreen)
+            return;
         this.player?.off(PlayerEvent.Paused, () => {
             this.hidePlayNextScreen();
         });
@@ -327,9 +303,16 @@ export default class NpoPlayer {
                 if (this.npoTag != undefined) {
                     clearInterval(this.npoTag?.heartbeatInterval);
                 }
-                logEvent(this, 'stop');
+                if (this.playerContext) {
+                    this.npoPlayerServices.logEvent({
+                        playerContext: this.playerContext,
+                        event: 'stop'
+                    });
+                    this.npoPlayerServices.removeUivisiblityHandlers(this.playerContext);
+                }
                 this.uiManager?.release();
                 this.uiManager = undefined;
+                this.container.removeEventListener('keydown', this.keydownHandler, true);
                 await this.player?.destroy();
                 return true;
             }

package/lib/npoplayer.test.js

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

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -89,7 +89,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "3.2.1",
+    "@npotag/tag": "3.2.4",
     "bitmovin-player": "^8.166.0",
     "bitmovin-player-ui": "3.67.0"
   },

package/lib/services/a11y/setup.js

@@ -1,16 +1,13 @@
 import { NpoPlayerEvent } from '../../types/events';
 import { addAccessibilityAttributes } from '../../ui/handlers/accessibilityhandler';
 export function setupAccessibilityAttributes(playerContext) {
-    const { player, npoplayer } = playerContext;
+    const { player, npoPlayer } = playerContext;
     const events = [NpoPlayerEvent.SourceLoaded, NpoPlayerEvent.AdBreakFinished, NpoPlayerEvent.AdError];
     const triggerAddAccessibilityAttributes = () => {
         for (const event of events) {
             player?.off(event, triggerAddAccessibilityAttributes);
         }
-        if (npoplayer.streamOptions.enableSubtitles === true || npoplayer.userPreferences.subtitles_enabled === 'true') {
-            player?.enableSubtitles();
-        }
-        addAccessibilityAttributes(npoplayer.container, npoplayer.streamObject.metadata);
+        addAccessibilityAttributes(npoPlayer.container, npoPlayer.streamObject.metadata);
     };
     for (const event of events) {
         player?.on(event, triggerAddAccessibilityAttributes);