@npo/player 1.22.4 → 1.23.0

package/lib/npoplayer.js

@@ -1,27 +1,30 @@
-import { Player, PlayerEvent, } from 'bitmovin-player';
+import { NpoPlayerServices } from './services/services';
+import { Player, PlayerEvent } from 'bitmovin-player';
+import { UIManager } from 'bitmovin-player-ui';
 import AdsModuleBM from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
 import { logEvent, initPlayerTracker, startPlayerTracker } from './js/tracking/playertracker';
-import { hidePlayNextScreen, showPlayNextScreenIfNeeded } from './js/ui/handlers/playnextscreen';
-import * as utility from './js/utilities/utilities';
-import * as drm from './js/drm/drm';
+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 { printVersion } from './js/utilities/printversion';
-import { UIManager } from 'bitmovin-player-ui';
+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 { customSpecificErrorMessageOverlayConfig } from './js/playeractions/handlers/customerrors';
-import { createUIContainer, removeUIContainer } from './js/ui/uicontainer';
-import { addAccessibilityAttributes } from './js/ui/handlers/accessibilityhandler';
+import { createUIContainer } from './ui/uicontainer';
 import { LogEmitter } from './types/classes';
 import { handlePreRolls } from './js/ads/ster';
 import pkg from '../package.json';
-import { NpoPlayerUIVariants } from './types/interfaces';
-import { nativeMobileUiFactory } from './js/ui/nativemobileuifactory';
+import { NpoPlayerUIVariants, LocalStorageValues } from './types/interfaces';
+import { nativeMobileUiFactory } from './ui/nativemobileuifactory';
 import { setupMediaSessionActionHandlers } from './js/playeractions/handlers/mediasessionactions';
-import { processStream } from './js/ui/handlers/streamhandler';
+import { processStream } from './ui/handlers/streamhandler';
 import { removeReplayClass } from './js/playeractions/handlers/removereplayclass';
-import { showNicamAfterUiDelay } from './js/ui/handlers/nicamhandler';
+import { showNicamAfterUiDelay } from './ui/handlers/nicamhandler';
 import { updateLiveMarkers } from './js/markers/updateLiveMarkers';
-export { NpoPlayerUIVariants, };
+import { NpoPlayerAPI } from './services/npoPlayerAPI/npoPlayerAPI';
+export { NpoPlayerUIVariants };
 export default class NpoPlayer {
     constructor(_container, _playerConfig, _npotag, _npotaginstance, _variant) {
         this.sourceConfig = {};
@@ -31,12 +34,11 @@ export default class NpoPlayer {
             assets: { scrubbingThumbnail: '', subtitles: [] },
             user: { type: 'anonymous' }
         };
-        this.player = null;
-        this.uiManager = null;
-        this.streamTracker = null;
+        this.player = undefined;
+        this.uiManager = undefined;
+        this.streamTracker = undefined;
         this.logEmitter = new LogEmitter();
         this.uiComponents = {};
-        this.fragment = null;
         this.streamOptions = {};
         this.jwt = '';
         this.apiPayload = { baseURL: '', jwt: '', data: {} };
@@ -45,6 +47,10 @@ export default class NpoPlayer {
         this.drmProfile = { profileName: '', drm: '' };
         this.isShowingPlayNextScreen = false;
         this.canceledPlayNextScreen = false;
+        this.playerContext = undefined;
+        this.npoplayerServices = new NpoPlayerServices();
+        this.eventListeners = undefined;
+        this.userPreferences = {};
         this.playerConfig = _playerConfig;
         this.container = _container;
         this.variant = _variant || NpoPlayerUIVariants.DEFAULT;
@@ -53,23 +59,32 @@ export default class NpoPlayer {
     }
     initPlayer(_container, playerConfig, variant) {
         const processedPlayerConfig = playerAction.processPlayerConfig(this, playerConfig);
-        Player.addModule(utility.getModuleExport(AdsModuleBM));
+        Player.addModule(getModuleExport(AdsModuleBM));
+        this.userPreferences = this.npoplayerServices.getStoredUserPrefs();
         this.player = new Player(_container, processedPlayerConfig);
-        this.createUIManager(this.player, variant);
-        this.container.addEventListener('keydown', e => {
-            this.keyPress(e);
+        const npoPlayerAPI = new NpoPlayerAPI(this.player);
+        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.playerContext = { player: npoPlayerAPI, npoplayer: this };
+        this.createUIManager(this.player, this.playerContext, variant);
+        this.npoplayerServices.handleUserPrefs(this.playerContext);
+        this.npoplayerServices.setAccessibilityAttributes(this.playerContext);
+        this.container.addEventListener('keydown', (e) => {
+            if (!this.playerContext)
+                return;
+            this.npoplayerServices.keyboardHandler(this.playerContext, e);
         }, true);
-        const playbackToggleElement = this.container.querySelector('.bmpui-ui-playbacktoggle-overlay');
-        if (playbackToggleElement) {
-            playbackToggleElement.addEventListener('touchend', (event) => {
-                event.preventDefault();
-                this.player?.play();
-            });
-        }
     }
     async loadStream(source, options = {}) {
+        if (!this.playerContext)
+            return;
         this.streamOptions = options;
-        if (this.player == null) {
+        if (this.player == undefined) {
             console.error('Er is nog geen player geladen.');
             return;
         }
@@ -78,33 +93,33 @@ export default class NpoPlayer {
             return;
         }
         let _streamObject;
-        const isUrl = utility.isUrl(source);
-        const isMedia = await utility.isMediaUrl(source);
-        const isJWTToken = utility.isJWTToken(source);
+        const sourceIsUrl = isUrl(source);
+        const sourceIsMedia = await isMediaUrl(source);
+        const sourceIsJWTToken = isJWTToken(source);
         const getDurationAndStartPlayerTracker = function () {
             if (this.player === null)
                 return;
-            let prid = (utility.isJWTToken(source) ? this.streamObject?.metadata.prid : source) || 'unknown';
-            let duration = this.player ? this.player.getDuration() : undefined;
-            startPlayerTracker(this, utility.validateStreamLength(duration, true), this.version, prid);
+            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 (isUrl && isMedia) {
+        if (sourceIsUrl && sourceIsMedia) {
             this.sourceConfig = {
-                ...options.sourceConfig ?? {},
-                'progressive': source,
+                ...options.sourceConfig,
+                progressive: source,
                 analytics: {
                     customData2: 'other',
                     customData3: 'unknown',
                     customData4: this.npoTag?.npoTagInstance?.getParty(),
                     customData5: this.version
-                },
+                }
             };
-            this.player?.load(this.sourceConfig);
+            await this.playerContext.player?.load(this.sourceConfig);
             getDurationAndStartPlayerTracker();
         }
-        else if (isJWTToken) {
+        else if (sourceIsJWTToken) {
             this.jwt = source;
-            const profile = await drm.decideProfile(this.player, 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 = {
@@ -125,59 +140,51 @@ export default class NpoPlayer {
                 _streamObject = await getStreamObject(this, payload);
                 this.streamObject = _streamObject;
                 if (_streamObject) {
-                    this.createUIManager(this.player, this.variant);
+                    await this.createUIManager(this.player, this.playerContext, this.variant);
                 }
             }
-            catch (err) {
-                this.doError('Het is niet gelukt de stream op te halen. \n' + err);
+            catch (error) {
+                this.doError('Het is niet gelukt de stream op te halen. \n' + error);
                 this.player.pause();
                 return;
             }
             if (this.streamObject?.stream == undefined)
                 return;
-            const drmType = this.streamObject.stream.drmType ?? null;
-            this.sourceConfig = await playerAction.processSourceConfig(options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : null, this.streamOptions, this.version, this.npoTag?.npoTagInstance?.getParty());
-            await drm.verifyDRM(this, this.player, payload);
+            const drmType = this.streamObject.stream.drmType ?? undefined;
+            this.sourceConfig = await playerAction.processSourceConfig(this.npoplayerServices, options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : undefined, this.streamOptions, this.version, this.npoTag?.npoTagInstance?.getParty(), this.npoplayerServices);
+            await this.npoplayerServices.verifyDRM(this.playerContext, payload);
             setupMediaSessionActionHandlers(this.player, this.sourceConfig, _streamObject);
             logEvent(this, 'load');
             let streamDuration = _streamObject.metadata.duration;
-            let streamPrid = this.streamObject.metadata.prid || _streamObject.metadata.prid;
+            const streamPrid = this.streamObject.metadata.prid || _streamObject.metadata.prid;
             if (this.isShowingPlayNextScreen) {
                 this.hidePlayNextScreen();
             }
             const initAndStartTracker = () => {
                 if (this.player === null)
                     return;
-                this.player.off(PlayerEvent.SourceLoaded, initAndStartTracker);
-                this.player.off(PlayerEvent.AdBreakFinished, initAndStartTracker);
-                this.player.off(PlayerEvent.AdError, initAndStartTracker);
-                streamDuration = streamDuration == null
-                    ? getDurationAndStartPlayerTracker()
-                    : startPlayerTracker(this, utility.validateStreamLength(streamDuration, false), this.version, streamPrid);
+                this.player?.off(PlayerEvent.SourceLoaded, initAndStartTracker);
+                this.player?.off(PlayerEvent.AdBreakFinished, initAndStartTracker);
+                this.player?.off(PlayerEvent.AdError, initAndStartTracker);
+                streamDuration =
+                    streamDuration == undefined
+                        ? this.player?.on(PlayerEvent.Ready, getDurationAndStartPlayerTracker)
+                        : startPlayerTracker(this, getStreamDurationInSeconds({ duration: streamDuration, durationIsInMs: true }), this.version, streamPrid);
             };
-            if (this.variant !== NpoPlayerUIVariants.AUDIO && this.streamObject.metadata.hasPreroll === 'true' && this.streamObject.assets.preroll) {
+            if (this.variant !== NpoPlayerUIVariants.AUDIO &&
+                this.streamObject.metadata.hasPreroll === 'true' &&
+                this.streamObject.assets.preroll) {
                 this.player.on(PlayerEvent.AdBreakFinished, initAndStartTracker);
                 this.player.on(PlayerEvent.AdError, initAndStartTracker);
                 await handlePreRolls(this.player, this.streamObject, this);
             }
             else {
-                this.player.on(PlayerEvent.SourceLoaded, initAndStartTracker);
+                this.player.on(PlayerEvent.Ready, initAndStartTracker);
             }
         }
         else {
             this.doError(`Het is niet gelukt de stream op te halen: \n Input is geen valide token of media object.`, 500);
         }
-        const triggerAddAccessibilityAttributes = () => {
-            this.player?.off(PlayerEvent.SourceLoaded, triggerAddAccessibilityAttributes);
-            this.player?.off(PlayerEvent.AdBreakFinished, triggerAddAccessibilityAttributes);
-            this.player?.off(PlayerEvent.AdError, triggerAddAccessibilityAttributes);
-            if (this.streamOptions.enableSubtitles === true)
-                this.player?.subtitles.enable('sub0');
-            void addAccessibilityAttributes(this.container, this.streamObject.metadata);
-        };
-        this.player.on(PlayerEvent.SourceLoaded, triggerAddAccessibilityAttributes);
-        this.player.on(PlayerEvent.AdBreakFinished, triggerAddAccessibilityAttributes);
-        this.player.on(PlayerEvent.AdError, triggerAddAccessibilityAttributes);
         if (this.sourceConfig?.metadata) {
             this.sourceConfig.metadata.jwt = source;
             this.sourceConfig.metadata.streamLinkAsJsonString = JSON.stringify(this.streamObject);
@@ -194,73 +201,62 @@ export default class NpoPlayer {
                 this.hidePlayNextScreen();
             });
         }
-        this.player.on(PlayerEvent.Play, () => { showNicamAfterUiDelay(this.player, this.uiManager); });
-        if (options?.startOffset != null)
-            playerAction.handleStartOffset(this.player, options.startOffset);
+        this.player.on(PlayerEvent.Play, () => {
+            showNicamAfterUiDelay(this.player, this.uiManager);
+        });
         const setLiveOffsetListener = function () {
             if (this.player === null)
                 return;
-            this.player.off(PlayerEvent.SourceLoaded, setLiveOffsetListener);
+            this.player?.off(PlayerEvent.SourceLoaded, setLiveOffsetListener);
             playerAction.handleLiveOffsetLogic(this, this.player, options);
         }.bind(this);
         this.player.on(PlayerEvent.Ready, setLiveOffsetListener);
     }
-    async createUIManager(player, variant) {
-        if (this.uiManager === null || variant !== this.variant) {
+    async createUIManager(player, playerContext, variant) {
+        if (this.uiManager === undefined || variant !== this.variant) {
             const uiConfig = {
                 errorMessages: customSpecificErrorMessageOverlayConfig,
                 disableAutoHideWhenHovered: true,
-                seekbarSnappingEnabled: false,
+                seekbarSnappingEnabled: false
             };
             this.uiManager = new UIManager(player, createUIContainer(this, player, variant, this.container), uiConfig);
             this.variant = variant;
         }
         else {
-            processStream(this.streamObject, this.container, this.streamOptions, player, this.uiManager, this.sourceConfig);
+            processStream(this.streamObject, this.container, this.streamOptions, player, this.uiManager, this.sourceConfig, playerContext);
         }
     }
     doError(input, status) {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         if (status) {
             this.logEmitter.emit('logError', status);
         }
         playerAction.handlePlayerError(this.player, this.uiComponents, input);
     }
-    keyPress(e) {
-        if (['Space', 'ArrowUp', 'ArrowDown'].includes(e.code))
-            e.preventDefault();
-        if (!this.player)
-            return;
-        playerAction.resolveKeyPress(this.player, this, e);
-    }
-    play() {
-        if (this.player == null)
-            return;
-        this.player.play();
+    async play() {
+        await this.playerContext?.player.play();
     }
     pause() {
-        if (this.player == null)
-            return;
-        this.player.pause();
+        this.playerContext?.player.pause();
     }
     setVolume(volume) {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         this.player.setVolume(volume);
     }
     increaseVolume() {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         this.setVolume(this.player.getVolume() + 10);
     }
     decreaseVolume() {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         this.setVolume(this.player.getVolume() - 10);
     }
     goForward(seconds) {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         if (this.player.isLive() ?? false) {
             this.player.timeShift(Math.min(0, this.player.getTimeShift() + seconds));
@@ -270,7 +266,7 @@ export default class NpoPlayer {
         }
     }
     goBackwards(seconds) {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         if (this.player.isLive() ?? false) {
             this.player.timeShift(this.player.getTimeShift() - seconds);
@@ -280,12 +276,12 @@ export default class NpoPlayer {
         }
     }
     watchFromStart() {
-        if (this.player == null)
+        if (this.player == undefined)
             return;
         playerAction.shiftToProgramStart(this.player, this.streamOptions.liveProgramTime);
     }
     showPlayNextScreen() {
-        if (this.player == null || !this.streamOptions.playNext?.showPlayNext || this.adBreakActive)
+        if (this.player == undefined || !this.streamOptions.playNext?.showPlayNext || this.adBreakActive)
             return;
         this.player.off(PlayerEvent.TimeChanged, () => {
             this.showPlayNextScreen();
@@ -294,7 +290,9 @@ export default class NpoPlayer {
         const overlayDuration = this.streamOptions.playNext?.duration || 10;
         const offset = this.streamOptions.playNext?.offset || overlayDuration;
         const showPlayNextAt = videoDuration - offset;
-        if (!this.isShowingPlayNextScreen && this.player.getCurrentTime() > showPlayNextAt && !this.canceledPlayNextScreen) {
+        if (!this.isShowingPlayNextScreen &&
+            this.player.getCurrentTime() > showPlayNextAt &&
+            !this.canceledPlayNextScreen) {
             this.isShowingPlayNextScreen = true;
             showPlayNextScreenIfNeeded(overlayDuration, this.container, this.streamOptions.playNext?.proceedCallback);
         }
@@ -308,11 +306,10 @@ export default class NpoPlayer {
             return;
         updateLiveMarkers(timeLineMarkers, this.player, this.uiManager, this.streamOptions.autoFillTimeLineMarkerDuration ?? true);
     }
-    ;
     cancelPlayNextScreen() {
         this.canceledPlayNextScreen = true;
         this.hidePlayNextScreen();
-        void this.streamOptions.playNext?.cancelCallback?.();
+        this.streamOptions.playNext?.cancelCallback?.();
     }
     hidePlayNextScreen() {
         this.player?.off(PlayerEvent.Paused, () => {
@@ -323,50 +320,43 @@ export default class NpoPlayer {
     }
     doPlayNext() {
         this.hidePlayNextScreen();
-        void this.streamOptions.playNext?.proceedCallback?.();
+        this.streamOptions.playNext?.proceedCallback?.();
     }
     destroy(asyncMode = false) {
         const destroyLogic = async () => {
             try {
-                if (this.npoTag != null) {
+                if (this.npoTag != undefined) {
                     clearInterval(this.npoTag.heartbeatInterval);
                 }
                 logEvent(this, 'stop');
-                const playerContainer = this.player?.getContainer();
-                if (playerContainer)
-                    removeUIContainer(playerContainer);
                 this.uiManager?.release();
-                this.uiManager = null;
+                this.uiManager = undefined;
                 await this.player?.destroy();
                 return true;
             }
-            catch (e) {
-                console.error('Error destroying player:', e);
+            catch (error) {
+                console.error('Error destroying player:', error);
                 return false;
             }
         };
-        if (asyncMode) {
-            return destroyLogic().then(() => true).catch(() => false);
-        }
-        else {
-            return destroyLogic();
-        }
+        return asyncMode
+            ? destroyLogic()
+                .then(() => true)
+                .catch(() => false)
+            : destroyLogic();
     }
     unload(asyncMode = false) {
         const unloadLogic = async () => {
             try {
-                if (this.npoTag != null) {
+                if (this.npoTag != undefined) {
                     clearInterval(this.npoTag.heartbeatInterval);
                 }
-                const playerContainer = this.player?.getContainer();
-                if (playerContainer)
-                    removeUIContainer(playerContainer);
                 this.hidePlayNextScreen();
                 await this.player?.unload();
                 return true;
             }
-            catch (e) {
-                console.error('Error unloading player:', e);
+            catch (error) {
+                console.error('Error unloading player:', error);
                 return false;
             }
         };
@@ -377,16 +367,18 @@ export default class NpoPlayer {
             try {
                 return unloadLogic();
             }
-            catch (error) {
+            catch {
                 return false;
             }
         }
     }
     printVersion() {
-        printVersion(this.version);
+        logVersion(this.version);
     }
 }
-window.bitmovin.playerui = function () { };
+;
+window.bitmovin.playerui = function () {
+};
 window.bitmovin.playerui.UIFactory = {
     buildDefaultSmallScreenUI: function (player, config = {}) {
         return nativeMobileUiFactory(player, config);

package/lib/npoplayer.test.js

@@ -1,10 +1,10 @@
 import NpoPlayer from './npoplayer';
 const div = document.createElement('div');
 const testPlayerConfig = {
-    key: 'dummy-key',
+    key: 'dummy-key'
 };
-jest.mock('./js/ui/handlers/streamhandler', () => ({
-    processStream: jest.fn(),
+jest.mock('./ui/handlers/streamhandler', () => ({
+    processStream: jest.fn()
 }));
 let player;
 test('player init', async () => {

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -16,9 +16,9 @@
   "types": "./lib/npoplayer.d.ts",
   "scripts": {
     "build": "webpack --hot",
-    "build:scss": "npm run build:web-styles && npm run build:mobile-styles && mkdir -p dist && cp src/scss/*.css dist && cp src/scss/*.css.map dist",
-    "build:web-styles": "sass src/scss/npoplayer.scss:src/scss/npoplayer.css --style=compressed && postcss src/scss/npoplayer.css --use autoprefixer postcss-import -o src/scss/npoplayer.css",
-    "build:mobile-styles": "sass src/scss/npoplayer-mobile.scss:src/scss/npoplayer-mobile.css --style=compressed && postcss src/scss/npoplayer-mobile.css --use autoprefixer postcss-import -o src/scss/npoplayer-mobile.css",
+    "build:scss": "npm run build:web-styles && npm run build:mobile-styles && mkdir -p dist && cp src/style/*.css dist && mkdir src/scss && cp src/style/*.css.map dist && cp src/style/*.css src/scss && cp src/style/*.css.map src/scss",
+    "build:web-styles": "sass src/style/npoplayer.scss:src/style/npoplayer.css --style=compressed && postcss src/style/npoplayer.css --use autoprefixer postcss-import -o src/style/npoplayer.css",
+    "build:mobile-styles": "sass src/style/npoplayer-mobile.scss:src/style/npoplayer-mobile.css --style=compressed && postcss src/style/npoplayer-mobile.css --use autoprefixer postcss-import -o src/style/npoplayer-mobile.css",
     "build:cdn": "npm run build && bash build-cdn.sh",
     "lint": "eslint src --fix",
     "bundle": "npm run lint && bash build-lib.sh && npm run build:scss && npm run build:cdn",
@@ -33,16 +33,17 @@
     "README.md",
     "CHANGELOG.md",
     "lib",
-    "src/scss/components",
-    "src/scss/variants",
-    "src/scss/vars",
-    "src/scss/npoplayer.scss",
-    "src/scss/npoplayer.css"
+    "src/style/components",
+    "src/style/variants",
+    "src/style/vars",
+    "src/style/npoplayer.scss",
+    "src/style/npoplayer.css"
   ],
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
+    "@testing-library/jest-dom": "^6.4.5",
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.4.0",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -52,11 +53,16 @@
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.38.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^34.0.1",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-unicorn": "^52.0.0",
     "fs-extra": "^11.1.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.4.1",
@@ -70,6 +76,7 @@
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
     "postcss-scss": "^4.0.7",
+    "prettier": "^3.2.5",
     "sass": "^1.58.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
@@ -82,9 +89,9 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "^3.0.1",
-    "bitmovin-player": "8.151.0",
-    "bitmovin-player-ui": "3.60.0"
+    "@npotag/tag": "3.1.2",
+    "bitmovin-player": "8.166.0",
+    "bitmovin-player-ui": "3.64.0"
   },
   "browserslist": [
     "defaults",

package/lib/services/a11y/setup.d.ts

@@ -0,0 +1,2 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function setupAccessibilityAttributes(playerContext: PlayerContext): void;

package/lib/services/a11y/setup.js

@@ -0,0 +1,18 @@
+import { PlayerEvent } from 'bitmovin-player';
+import { addAccessibilityAttributes } from '../../ui/handlers/accessibilityhandler';
+export function setupAccessibilityAttributes(playerContext) {
+    const { player, npoplayer } = playerContext;
+    const events = [PlayerEvent.SourceLoaded, PlayerEvent.AdBreakFinished, PlayerEvent.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);
+    };
+    for (const event of events) {
+        player?.on(event, triggerAddAccessibilityAttributes);
+    }
+}