@npo/player 1.27.7 → 1.28.0

package/lib/npoplayer.js

@@ -1,21 +1,20 @@
 import { NpoPlayerServices } from './services/services';
-import { Player, PlayerEvent } from 'bitmovin-player';
-import AdsModuleBM from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
+import { Player, PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { hidePlayNextScreen, showPlayNextScreenIfNeeded } from './ui/handlers/playnextscreen';
 import * as playerAction from './js/playeractions/playeractions';
-import { getModuleExport } from './js/utilities/utilities.module';
 import { isJWTToken } from './js/utilities/utilities.jwt';
 import { isMediaUrl, isUrl } from './js/utilities/utilities.url';
 import { logVersion } from './js/utilities/utilities.version';
 import { LogEmitter } from './types/classes';
 import pkg from '../package.json';
 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 { playerModules } from './services/npoPlayerAPI/playerModules';
 import { emptyStreamObject } from './services/npoPlayerAPI/contants';
+import { ChapterHandler, defaultSkippableChapterTypes } from './services/chapterHandlers/chapterHandler';
 export { NpoPlayerUIVariants };
 export default class NpoPlayer {
     constructor(container, playerConfig, npoTag, npoTagInstance, variant, npoTagPageTracker) {
@@ -40,6 +39,7 @@ export default class NpoPlayer {
         this.playerContext = undefined;
         this.npoPlayerServices = new NpoPlayerServices();
         this.eventListeners = undefined;
+        this.chapterHandler = undefined;
         this.keydownHandler = (e) => {
             if (!this.playerContext)
                 return;
@@ -51,7 +51,7 @@ export default class NpoPlayer {
             this.playerConfig = params.playerConfig;
             this.npoTagInitialisation = params.npoTag || undefined;
             this.npoTagInstance = params.npoTagInstance;
-            this.variant = params.variant || NpoPlayerUIVariants.DEFAULT;
+            this.variant = params.variant ?? NpoPlayerUIVariants.DEFAULT;
             this.npoTagPageTracker = params.npoTagPageTracker || undefined;
         }
         else {
@@ -59,7 +59,7 @@ export default class NpoPlayer {
             this.playerConfig = playerConfig || undefined;
             this.npoTagInitialisation = npoTag || undefined;
             this.npoTagInstance = npoTagInstance;
-            this.variant = variant || NpoPlayerUIVariants.DEFAULT;
+            this.variant = variant ?? NpoPlayerUIVariants.DEFAULT;
             this.npoTagPageTracker = npoTagPageTracker || undefined;
             console.warn('As of NPO Player version 1.25, parameter-based initialization has been deprecated in favor of object-based initialization. This feature will be removed in version 2.0. Please update your implementation to ensure compatibility. For more details, refer to the documentation at: https://docs.npoplayer.nl/implementation/web/player.');
         }
@@ -71,8 +71,10 @@ export default class NpoPlayer {
     }
     initPlayer(_container, playerConfig) {
         const processedPlayerConfig = playerAction.processPlayerConfig(this, playerConfig);
+        for (const module of playerModules) {
+            Player.addModule(module);
+        }
         this.player = new Player(_container, processedPlayerConfig);
-        Player.addModule(getModuleExport(AdsModuleBM));
         const npoPlayerAPI = new NpoPlayerAPI(this.player);
         this.playerContext = { player: npoPlayerAPI, npoPlayer: this };
         this.npoPlayerServices.initPlayerTracker(this.playerContext);
@@ -154,34 +156,82 @@ export default class NpoPlayer {
                 return;
             const drmType = this.streamObject.stream.drmType ?? undefined;
             if (drmType !== undefined && drmType !== profile.drm) {
-                await this.npoPlayerServices.handleError(this.playerContext, 2007);
+                await this.npoPlayerServices.handleError({ playerContext: this.playerContext, status: 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);
+            this.sourceConfig = await playerAction.processSourceConfig({
+                npoPlayerServices: this.npoPlayerServices,
+                source,
+                _sourceConfig: options.sourceConfig ?? {},
+                _streamObject: this.streamObject,
+                drm: drmType && drmType.length > 0 ? profile.drm : undefined,
+                streamOptions: this.streamOptions,
+                version: this.version,
+                npoTagInstance: this.npoTag?.npoTagInstance
+            });
             this.npoPlayerServices.handleStreamOptions(this.playerContext);
             await this.npoPlayerServices.verifyDRM(this.playerContext, payload);
-            const streamDuration = _streamObject.metadata.duration;
+        }
+        else {
+            await this.npoPlayerServices.handleError({ playerContext: this.playerContext, status: 500 });
+        }
+        const streamDuration = this.streamObject.metadata.duration;
+        const initAndStartTracker = () => {
+            if (!this.playerContext || !this.player)
+                return;
+            this.player?.off(PlayerEvent.AdBreakFinished, initAndStartTracker);
+            this.player?.off(PlayerEvent.AdError, initAndStartTracker);
             this.npoPlayerServices.startPlayerTracker({
                 playerContext: this.playerContext,
                 source: source,
                 duration: streamDuration ? Number(streamDuration) : undefined
             });
-        }
-        else {
-            await this.npoPlayerServices.handleError(this.playerContext, 500);
-        }
+        };
         this.npoPlayerServices.setupNicamKijkwijzerIcons(this.playerContext);
-        setupMediaSessionActionHandlers(this.player, this.sourceConfig, this.streamObject);
+        setupMediaSessionActionHandlers({
+            player: this.player,
+            sourceConfig: this.sourceConfig,
+            streamObject: this.streamObject
+        });
         this.hidePlayNextScreen();
+        if (!this.npoPlayerServices.isSegmentInBounds(this.playerContext)) {
+            await this.npoPlayerServices.handleError({ playerContext: this.playerContext, status: 422 });
+            await this.player.unload();
+            return;
+        }
         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);
         }
+        else {
+            initAndStartTracker();
+        }
         if (this.variant === NpoPlayerUIVariants.VERTICAL) {
             this.npoPlayerServices.handleVerticalVideoControls(this.playerContext);
             this.npoPlayerServices.handleVerticalVideoSettings(this.playerContext);
         }
+        if (this.streamObject?.metadata?.chapters) {
+            const chapters = this.streamObject.metadata.chapters;
+            if (!chapters || !this.playerContext)
+                return;
+            this.chapterHandler = new ChapterHandler(this.playerContext, {
+                chapters,
+                showSkipButtons: true,
+                skippableTypes: this.streamOptions.skippableChapters ?? defaultSkippableChapterTypes
+            });
+            this.player.on(PlayerEvent.TimeChanged, () => {
+                this.chapterHandler?.handleTimeChange();
+            });
+            this.player.on(PlayerEvent.Paused, () => {
+                this.chapterHandler?.handlePause();
+            });
+            this.player.on(PlayerEvent.Play, () => {
+                this.chapterHandler?.handlePlay();
+            });
+        }
         this.player.on(PlayerEvent.Seek, () => {
             removeReplayClass(this.player);
         });
@@ -254,14 +304,18 @@ export default class NpoPlayer {
             this.showPlayNextScreen();
         });
         const videoDuration = this.player.getDuration();
-        const overlayDuration = this.streamOptions.playNext?.duration || 10;
-        const offset = this.streamOptions.playNext?.offset || overlayDuration;
+        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) {
             this.isShowingPlayNextScreen = true;
-            showPlayNextScreenIfNeeded(overlayDuration, this.container, this.streamOptions.playNext?.proceedCallback);
+            showPlayNextScreenIfNeeded({
+                overlayDuration,
+                container: this.container,
+                proceedCallBack: this.streamOptions.playNext?.proceedCallback
+            });
         }
         else if (this.isShowingPlayNextScreen && this.player.getCurrentTime() < showPlayNextAt) {
             this.isShowingPlayNextScreen = false;
@@ -271,7 +325,12 @@ export default class NpoPlayer {
     updateMarkers(timeLineMarkers) {
         if (!(this.player && this.uiManager && this.streamObject.stream.isLiveStream))
             return;
-        updateLiveMarkers(timeLineMarkers, this.player, this.uiManager, this.streamOptions.autoFillTimeLineMarkerDuration ?? true);
+        updateLiveMarkers({
+            timeLineMarkers,
+            player: this.player,
+            uiManager: this.uiManager,
+            autoFillTimeLineMarkerDuration: this.streamOptions.autoFillTimeLineMarkerDuration ?? true
+        });
     }
     cancelPlayNextScreen() {
         this.canceledPlayNextScreen = true;
@@ -327,12 +386,14 @@ export default class NpoPlayer {
                 if (this.npoTag != undefined) {
                     clearInterval(this.npoTag.heartbeatInterval);
                 }
-                this.pause();
                 if (this.playerContext) {
                     this.npoPlayerServices.removeEventListeners(this.playerContext);
                     this.npoPlayerServices.discardAdBreak(this.playerContext);
+                    this.npoPlayerServices.clearInfoPanel(this.playerContext);
                 }
+                this.chapterHandler?.reset();
                 this.hidePlayNextScreen();
+                this.sourceConfig = {};
                 await this.player?.unload();
                 return true;
             }
@@ -357,11 +418,3 @@ export default class NpoPlayer {
         logVersion(this.version);
     }
 }
-;
-window.bitmovin.playerui = function () {
-};
-window.bitmovin.playerui.UIFactory = {
-    buildDefaultSmallScreenUI: function (player, config = {}) {
-        return nativeMobileUiFactory(player, config);
-    }
-};

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.27.7",
+  "version": "1.28.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -16,17 +16,14 @@
   "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/style/*.css dist && cp src/style/*.css.map dist && mkdir -p src/scss && cp src/style/*.css src/scss && cp src/style/*.css.map src/scss",
+    "build:scss": "npm run build:web-styles && mkdir -p dist && cp src/style/*.css dist && cp src/style/*.css.map dist && mkdir -p src/scss && 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",
     "build:ts": "bash build-lib.sh",
     "test": "jest",
-    "test:ci": "jest --collectCoverage --testResultsProcessor=jest-sonar-reporter",
-    "version:dev": "npm version prerelease --preid=dev --no-git-tag-version",
-    "prepublishOnly": "aws codeartifact login --tool npm --namespace @npo-player --repository npo-player --domain npoplayer $([ -z \"$TF_BUILD\" ] && echo \" --profile codeartifact\")"
+    "version:dev": "npm version prerelease --preid=dev --no-git-tag-version"
   },
   "files": [
     "LICENSE",
@@ -67,7 +64,8 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.4.1",
     "jest-fetch-mock": "^3.0.3",
-    "jest-sonar-reporter": "2.0.0",
+    "jest-junit": "^16.0.0",
+    "jest-sonar-reporter": "^2.0.0",
     "jest-transform-css": "^6.0.1",
     "mini-css-extract-plugin": "^2.7.2",
     "node-fetch": "^3.3.0",
@@ -90,8 +88,8 @@
   },
   "dependencies": {
     "@npotag/tag": "3.2.4",
-    "bitmovin-player": "^8.166.0",
-    "bitmovin-player-ui": "3.67.0"
+    "bitmovin-player": "^8.228.0",
+    "bitmovin-player-ui": "^3.102.0"
   },
   "browserslist": [
     "defaults",

package/lib/services/a11y/setup.test.js

@@ -2,7 +2,7 @@ import { NpoPlayerEvent } from '../../types/events';
 import { addAccessibilityAttributes } from '../../ui/handlers/accessibilityhandler';
 import { setupAccessibilityAttributes } from './setup';
 import { mockNpoPlayer } from '../../../tests/mocks/mockNpoplayer';
-jest.mock('bitmovin-player', () => ({
+jest.mock('bitmovin-player/modules/bitmovinplayer-core', () => ({
     PlayerEvent: {
         SourceLoaded: 'sourceLoaded',
         AdBreakFinished: 'adBreakFinished',
@@ -55,9 +55,7 @@ describe('setupAccessibilityAttributes', () => {
                 hidePlayNextScreen: () => { },
                 doPlayNext: () => { },
                 destroy: () => false,
-                unload: () => {
-                    return true;
-                },
+                unload: () => true,
                 printVersion: () => { }
             }
         };

package/lib/services/advertHandlers/handlePreRolls.js

@@ -1,4 +1,3 @@
-import { AdTagType } from 'bitmovin-player';
 import { NpoPlayerUIVariants } from '../../types/interfaces';
 import { NpoPlayerEvent } from '../../types/events';
 export async function handlePreRolls(playerContext) {
@@ -18,7 +17,7 @@ export async function handlePreRolls(playerContext) {
             const advertConfig = {
                 tag: {
                     url: String(prerollUrl),
-                    type: AdTagType.VAST
+                    type: 'vast'
                 },
                 id: 'Ad',
                 position: 'pre'
@@ -33,7 +32,7 @@ export async function handlePreRolls(playerContext) {
         playerContext.player.on(NpoPlayerEvent.Play, handlePlay);
         function setAdUi() {
             const activeAdBreak = playerContext.player.getActiveAdBreak();
-            if (!activeAdBreak || !activeAdBreak.ads)
+            if (!activeAdBreak?.ads)
                 return false;
             playerContext.npoPlayer.uiManager?.release();
             playerContext.npoPlayer.uiManager = undefined;
@@ -92,7 +91,7 @@ export async function handlePreRolls(playerContext) {
         function handleAdFinished() {
             playerContext.player.off(NpoPlayerEvent.AdFinished, handleAdFinished);
             const activeAdBreak = playerContext.player.getActiveAdBreak();
-            if (!activeAdBreak || !activeAdBreak.ads) {
+            if (!activeAdBreak?.ads) {
                 console.error('No active ad break data found');
                 return;
             }

package/lib/services/advertHandlers/handlePrerolls.test.js

@@ -1,8 +1,7 @@
 import { handlePreRolls } from './handlePreRolls';
 import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
-jest.mock('bitmovin-player');
-jest.mock('../../npoplayer');
+import { AdTagType } from 'bitmovin-player/modules/bitmovinplayer-advertising-core';
 describe('handlePreRolls', () => {
     let mockPlayerAPI;
     beforeEach(() => {
@@ -78,7 +77,7 @@ describe('handlePreRolls', () => {
         expect(playerContextMock.player.scheduleAds).toHaveBeenCalledWith({
             tag: {
                 url: 'sample_url',
-                type: 'vast'
+                type: AdTagType.VAST
             },
             id: 'Ad',
             position: 'pre'

package/lib/services/chapterHandlers/chapterHandler.d.ts

@@ -0,0 +1,35 @@
+import { Chapter, PlayerContext } from '../../types/interfaces';
+export declare const defaultSkippableChapterTypes: string[];
+export interface ChapterHandlerOptions {
+    chapters: Chapter[];
+    showSkipButtons?: boolean;
+    skippableTypes?: string[];
+}
+export declare class ChapterHandler {
+    private readonly playerContext;
+    private readonly defaultSkippableTypes;
+    private readonly options;
+    private lastShownFrom?;
+    private hideTimeout?;
+    private controlsVisible;
+    private currentChapter?;
+    private isForceShowing;
+    private isPaused;
+    private pausedTimeRemaining?;
+    constructor(playerContext: PlayerContext, options: ChapterHandlerOptions);
+    getCurrentChapter(currentTimeMs: number): Chapter | undefined;
+    isChapterSkippable(chapter: Chapter): boolean;
+    handleTimeChange(): void;
+    reset(): void;
+    handlePause(): void;
+    handlePlay(): void;
+    setControlsVisibility(visible: boolean): void;
+    private setupSkipButtonHandler;
+    private skipCurrentChapter;
+    private updateSkipButtonVisibility;
+    private startFadeOut;
+    private forceShowButton;
+    private getCurrentControlsVisibility;
+    private startHideTimeout;
+    private clearHideTimeout;
+}

package/lib/services/chapterHandlers/chapterHandler.js

@@ -0,0 +1,230 @@
+export const defaultSkippableChapterTypes = ['INTRO', 'RECAP'];
+const TEXT_BUTTON_BAR_SELECTOR = '.bmpui-controlbar-textbuttons';
+const FADING_OUT_CLASS = 'fading-out';
+const FADING_IN_CLASS = 'fading-in';
+export class ChapterHandler {
+    constructor(playerContext, options) {
+        this.defaultSkippableTypes = defaultSkippableChapterTypes;
+        this.controlsVisible = undefined;
+        this.isForceShowing = false;
+        this.isPaused = false;
+        this.playerContext = playerContext;
+        this.options = { showSkipButtons: true, skippableTypes: this.defaultSkippableTypes, ...options };
+        this.setupSkipButtonHandler();
+    }
+    getCurrentChapter(currentTimeMs) {
+        return this.options.chapters.find((c) => currentTimeMs >= c.from && currentTimeMs < c.until);
+    }
+    isChapterSkippable(chapter) {
+        if (chapter.type === 'IDENT')
+            return false;
+        return !!this.options.skippableTypes?.includes(chapter.type);
+    }
+    handleTimeChange() {
+        const { player } = this.playerContext;
+        if (!player || this.options.chapters.length === 0 || !this.options.showSkipButtons)
+            return;
+        const tMs = player.getCurrentTime() * 1000;
+        const ch = this.getCurrentChapter(tMs);
+        this.currentChapter = ch;
+        if (ch && this.isChapterSkippable(ch)) {
+            if (this.lastShownFrom === undefined || this.lastShownFrom !== ch.from) {
+                this.lastShownFrom = ch.from;
+                this.clearHideTimeout();
+                this.isForceShowing = true;
+                this.controlsVisible ?? (this.controlsVisible = this.getCurrentControlsVisibility());
+                this.forceShowButton(true);
+                if (!this.isPaused && !this.controlsVisible) {
+                    this.startHideTimeout();
+                }
+            }
+            else if (!this.isForceShowing) {
+                this.updateSkipButtonVisibility();
+            }
+        }
+        else {
+            if (this.lastShownFrom !== undefined) {
+                this.clearHideTimeout();
+                this.lastShownFrom = undefined;
+            }
+            if (this.isForceShowing) {
+                this.isForceShowing = false;
+                this.forceShowButton(false);
+            }
+            this.updateSkipButtonVisibility();
+        }
+    }
+    reset() {
+        this.clearHideTimeout();
+        this.lastShownFrom = undefined;
+        this.currentChapter = undefined;
+        this.isForceShowing = false;
+        this.isPaused = false;
+        this.pausedTimeRemaining = undefined;
+        this.controlsVisible = undefined;
+        this.forceShowButton(false);
+        this.updateSkipButtonVisibility();
+    }
+    handlePause() {
+        if (this.hideTimeout && this.isForceShowing) {
+            this.isPaused = true;
+            this.clearHideTimeout();
+        }
+    }
+    handlePlay() {
+        if (this.isPaused && this.isForceShowing) {
+            this.isPaused = false;
+            if (!this.controlsVisible) {
+                this.startHideTimeout();
+            }
+        }
+    }
+    setControlsVisibility(visible) {
+        const wasVisible = this.controlsVisible;
+        this.controlsVisible = visible;
+        if (visible && !wasVisible && this.isForceShowing) {
+            this.clearHideTimeout();
+        }
+        else if (!visible && wasVisible && this.isForceShowing && !this.isPaused) {
+            this.clearHideTimeout();
+            this.startHideTimeout();
+        }
+        if (!this.isForceShowing) {
+            this.updateSkipButtonVisibility();
+        }
+    }
+    setupSkipButtonHandler() {
+        const { skipChapterButton } = this.playerContext.npoPlayer.uiComponents;
+        if (!skipChapterButton)
+            return;
+        skipChapterButton.onClick.subscribe(() => {
+            this.skipCurrentChapter();
+        });
+    }
+    skipCurrentChapter() {
+        if (!this.currentChapter)
+            return;
+        const { player } = this.playerContext;
+        player.seek(this.currentChapter.until / 1000);
+        this.clearHideTimeout();
+        this.lastShownFrom = undefined;
+        if (this.isForceShowing) {
+            this.isForceShowing = false;
+            this.forceShowButton(false);
+        }
+        this.updateSkipButtonVisibility();
+    }
+    updateSkipButtonVisibility() {
+        const { skipChapterButton } = this.playerContext.npoPlayer.uiComponents;
+        if (!skipChapterButton)
+            return;
+        const shouldShow = this.currentChapter && this.isChapterSkippable(this.currentChapter) && this.controlsVisible;
+        if (shouldShow && this.currentChapter) {
+            skipChapterButton.setText(`${this.currentChapter.title}`);
+            skipChapterButton.show();
+        }
+        else {
+            skipChapterButton.hide();
+        }
+    }
+    startFadeOut() {
+        if (!this.isForceShowing || !this.currentChapter)
+            return;
+        if (this.controlsVisible || this.isPaused)
+            return;
+        const { skipChapterButton } = this.playerContext.npoPlayer.uiComponents;
+        if (!skipChapterButton)
+            return;
+        const buttonElement = skipChapterButton.getDomElement();
+        const playerContainer = this.playerContext.player.getNpoPlayerElement();
+        const ctaBar = playerContainer?.querySelector(TEXT_BUTTON_BAR_SELECTOR);
+        if (buttonElement) {
+            buttonElement.removeClass(FADING_IN_CLASS);
+            buttonElement.addClass(FADING_OUT_CLASS);
+        }
+        if (ctaBar) {
+            ctaBar.classList.remove(FADING_IN_CLASS);
+            ctaBar.classList.add(FADING_OUT_CLASS);
+        }
+        setTimeout(() => {
+            this.isForceShowing = false;
+            this.forceShowButton(false);
+            this.updateSkipButtonVisibility();
+        }, 400);
+    }
+    forceShowButton(forceVisible) {
+        const { skipChapterButton } = this.playerContext.npoPlayer.uiComponents;
+        if (!skipChapterButton || !this.currentChapter)
+            return;
+        if (forceVisible && !this.isChapterSkippable(this.currentChapter)) {
+            return;
+        }
+        const playerContainer = this.playerContext.player.getNpoPlayerElement();
+        if (forceVisible) {
+            skipChapterButton.setText(`${this.currentChapter.title}`);
+            skipChapterButton.show();
+            const buttonElement = skipChapterButton.getDomElement();
+            if (buttonElement) {
+                buttonElement.addClass('force-visible-skip-button');
+                buttonElement.removeClass(FADING_OUT_CLASS);
+                buttonElement.addClass(FADING_IN_CLASS);
+            }
+            const ctaBar = playerContainer?.querySelector(TEXT_BUTTON_BAR_SELECTOR);
+            if (ctaBar) {
+                ctaBar.classList.add('force-visible-container');
+                ctaBar.classList.remove(FADING_OUT_CLASS);
+                ctaBar.classList.add(FADING_IN_CLASS);
+            }
+            setTimeout(() => {
+                if (buttonElement) {
+                    buttonElement.removeClass(FADING_IN_CLASS);
+                }
+                if (ctaBar) {
+                    ctaBar.classList.remove(FADING_IN_CLASS);
+                }
+            }, 50);
+        }
+        else {
+            const buttonElement = skipChapterButton.getDomElement();
+            if (buttonElement) {
+                buttonElement.removeClass('force-visible-skip-button');
+                buttonElement.removeClass(FADING_OUT_CLASS);
+                buttonElement.removeClass(FADING_IN_CLASS);
+            }
+            const ctaBar = playerContainer?.querySelector(TEXT_BUTTON_BAR_SELECTOR);
+            if (ctaBar) {
+                ctaBar.classList.remove('force-visible-container');
+                ctaBar.classList.remove(FADING_OUT_CLASS);
+                ctaBar.classList.remove(FADING_IN_CLASS);
+            }
+        }
+    }
+    getCurrentControlsVisibility() {
+        const { uiManager } = this.playerContext.npoPlayer;
+        if (!uiManager?.activeUi)
+            return true;
+        try {
+            const uiContainer = uiManager.activeUi.getUI();
+            if (!uiContainer)
+                return true;
+            const containerElement = uiContainer.getDomElement();
+            if (!containerElement)
+                return true;
+            return !containerElement.hasClass('bmpui-controls-hidden');
+        }
+        catch {
+            return true;
+        }
+    }
+    startHideTimeout() {
+        this.hideTimeout = window.setTimeout(() => {
+            this.startFadeOut();
+        }, 7400);
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout) {
+            window.clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+}

package/lib/services/errors/errorBackground.test.js

@@ -14,7 +14,7 @@ describe('setErrorBackground', () => {
             }
         };
         setErrorBackground(mockPlayerContext);
-        expect(mockPlayerContainer.style.getPropertyValue('--npo-player-errormessage-background-image')).toBe(posterUrl);
+        expect(mockPlayerContainer.style.getPropertyValue('--npo-player-errormessage-background-image')).toBe(`url(${posterUrl})`);
     });
     it('sets the error background image to "none" if poster is not provided', () => {
         const mockPlayerContainer = document.createElement('div');

package/lib/services/errors/errorHandler.d.ts

@@ -1,3 +1,5 @@
-import { PlayerContext } from '../../types/interfaces';
-export declare function handlePlayerError(playerContext: PlayerContext, status: number): Promise<void>;
+import { LogErrorParams, PlayerContext } from '../../types/interfaces';
+export declare function handlePlayerError({ playerContext, status, context }: LogErrorParams): Promise<void>;
+export declare function generateErrorMessage(status: number, shouldRetry: boolean): string;
+export declare function setupRetryHandler(playerContext: PlayerContext, errorContainerClass: string): void;
 export declare function setErrorBackground(playerContext: PlayerContext): void;