@npo/player 1.27.7 → 1.28.0

package/lib/tests/mocks/playerContextMock.d.ts

@@ -1,70 +1,7 @@
-/// <reference types="jest" />
 import { NpoPlayerAPI } from '../../src/services/npoPlayerAPI/npoPlayerAPI';
-import { PlayerContext, StreamObject } from '../../src/types/interfaces';
+import { PlayerContext } from '../../src/types/interfaces';
+import NpoPlayer from 'npoplayer';
 export declare const createMockNpoPlayerAPI: (overrides?: {}) => jest.Mocked<NpoPlayerAPI>;
-export declare const createMockNpoPlayer: (overrides?: {}) => {
-    playerConfig: {};
-    sourceConfig: {};
-    streamObject: StreamObject;
-    player: jest.Mocked<NpoPlayerAPI>;
-    uiManager: undefined;
-    npoTag: undefined;
-    streamTracker: undefined;
-    logEmitter: {
-        emit: jest.Mock<any, any, any>;
-    };
-    uiComponents: {};
-    container: HTMLDivElement;
-    streamOptions: {
-        enableSubtitles: boolean;
-    };
-    jwt: string;
-    apiPayload: {
-        baseURL: string;
-        jwt: string;
-        data: {};
-    };
-    adBreakActive: boolean;
-    version: string;
-    drmProfile: {
-        profileName: string;
-        drm: string;
-    };
-    variant: string;
-    isShowingPlayNextScreen: boolean;
-    canceledPlayNextScreen: boolean;
-    playerContext: undefined;
-    npoPlayerServices: {
-        getStoredUserPrefs: jest.Mock<any, any, any>;
-        setStoredUserPrefs: jest.Mock<any, any, any>;
-        handleUserPrefs: jest.Mock<any, any, any>;
-        setAccessibilityAttributes: jest.Mock<any, any, any>;
-        keyboardHandler: jest.Mock<any, any, any>;
-        decideProfile: jest.Mock<any, any, any>;
-        verifyDRM: jest.Mock<any, any, any>;
-        handleError: jest.Mock<any, any, any>;
-    };
-    eventListeners: undefined;
-    mockNpoPlayer: undefined;
-    initPlayer: jest.Mock<any, any, any>;
-    loadStream: jest.Mock<any, any, any>;
-    doError: jest.Mock<any, any, any>;
-    play: jest.Mock<any, any, any>;
-    pause: jest.Mock<any, any, any>;
-    setVolume: jest.Mock<any, any, any>;
-    increaseVolume: jest.Mock<any, any, any>;
-    decreaseVolume: jest.Mock<any, any, any>;
-    goForward: jest.Mock<any, any, any>;
-    goBackwards: jest.Mock<any, any, any>;
-    watchFromStart: jest.Mock<any, any, any>;
-    showPlayNextScreen: jest.Mock<any, any, any>;
-    updateMarkers: jest.Mock<any, any, any>;
-    cancelPlayNextScreen: jest.Mock<any, any, any>;
-    hidePlayNextScreen: jest.Mock<any, any, any>;
-    doPlayNext: jest.Mock<any, any, any>;
-    destroy: jest.Mock<any, any, any>;
-    unload: jest.Mock<any, any, any>;
-    printVersion: jest.Mock<any, any, any>;
-};
+export declare const createMockNpoPlayer: (overrides?: {}) => jest.Mocked<Partial<NpoPlayer>>;
 export declare const createPlayerContextMock: (overrides?: {}) => PlayerContext;
 export default createPlayerContextMock;

package/lib/tests/mocks/playerContextMock.js

@@ -1,5 +1,7 @@
 import { VOLUME_MAX, VOLUME_MIN, VOLUME_STEP } from '../../src/services/npoPlayerAPI/contants';
 import { mockPlayerAPI } from './mockPlayerAPI';
+import { NpoPlayerUIVariants } from '../../src/types/interfaces';
+import { createLogEmitterMock } from './mockLogEmitter';
 let volume = 50;
 const setVolume = jest.fn((level) => {
     volume = Math.max(VOLUME_MIN, Math.min(VOLUME_MAX, level));
@@ -51,10 +53,16 @@ export const createMockNpoPlayerAPI = (overrides = {}) => ({
     getConfig: jest.fn().mockReturnValue({}),
     createUIManager: jest.fn(),
     handleErrorRetry: jest.fn(),
+    getAvailableVideoQualities: jest.fn(),
+    listSubtitles: jest.fn(),
+    setPlaybackSpeed: jest.fn(),
+    setVideoQuality: jest.fn(),
     ...overrides
 });
 export const createMockNpoPlayer = (overrides = {}) => ({
-    playerConfig: {},
+    playerConfig: {
+        key: 'dummy-key'
+    },
     sourceConfig: {},
     streamObject: {
         stream: { drmToken: undefined },
@@ -65,11 +73,11 @@ export const createMockNpoPlayer = (overrides = {}) => ({
         assets: {},
         user: 'dummy'
     },
-    player: createMockNpoPlayerAPI(),
+    player: mockPlayerAPI,
     uiManager: undefined,
     npoTag: undefined,
     streamTracker: undefined,
-    logEmitter: { emit: jest.fn() },
+    logEmitter: createLogEmitterMock(),
     uiComponents: {},
     container: document.createElement('div'),
     streamOptions: {
@@ -80,7 +88,7 @@ export const createMockNpoPlayer = (overrides = {}) => ({
     adBreakActive: false,
     version: '1.0.0',
     drmProfile: { profileName: '', drm: '' },
-    variant: 'DEFAULT',
+    variant: NpoPlayerUIVariants.DEFAULT,
     isShowingPlayNextScreen: false,
     canceledPlayNextScreen: false,
     playerContext: undefined,
@@ -92,13 +100,32 @@ export const createMockNpoPlayer = (overrides = {}) => ({
         keyboardHandler: jest.fn(),
         decideProfile: jest.fn(),
         verifyDRM: jest.fn(),
-        handleError: jest.fn()
+        handleError: jest.fn(),
+        getAVType: jest.fn(),
+        convertFragmentToSegment: jest.fn(),
+        segmentMarkersHandler: jest.fn(),
+        schedulePreRolls: jest.fn(),
+        discardAdBreak: jest.fn(),
+        handleVerticalVideoControls: jest.fn(),
+        handleVerticalVideoSettings: jest.fn(),
+        showNicamAfterUiDelay: jest.fn(),
+        setupNicamKijkwijzerIcons: jest.fn(),
+        handlePreferences: jest.fn(),
+        addUivisiblityHandlers: jest.fn(),
+        removeEventListeners: jest.fn(),
+        removeUivisiblityHandlers: jest.fn(),
+        handleStreamOptions: jest.fn(),
+        fetchStream: jest.fn(),
+        startPlayerTracker: jest.fn(),
+        initPlayerTracker: jest.fn(),
+        logEvent: jest.fn(),
+        isSegmentInBounds: jest.fn(),
+        addDataInInfoPanel: jest.fn(),
+        clearInfoPanel: jest.fn()
     },
     eventListeners: undefined,
-    mockNpoPlayer: undefined,
     initPlayer: jest.fn(),
     loadStream: jest.fn(),
-    doError: jest.fn(),
     play: jest.fn(),
     pause: jest.fn(),
     setVolume: jest.fn(),

package/lib/types/events.d.ts

@@ -1,4 +1,4 @@
-import { PlayerEvent } from 'bitmovin-player';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 type PlayerEventMap = {
     [key in NpoPlayerEvent]: PlayerEvent;
 };

package/lib/types/events.js

@@ -1,4 +1,4 @@
-import { PlayerEvent } from 'bitmovin-player';
+import { PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
 export var NpoPlayerEvent;
 (function (NpoPlayerEvent) {
     NpoPlayerEvent["Ready"] = "ready";

package/lib/types/interfaces.d.ts

@@ -1,11 +1,15 @@
-import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel, SettingsToggleButton } from 'bitmovin-player-ui';
+import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel, SettingsToggleButton, Container, ContainerConfig, ToggleButton, ToggleButtonConfig } from 'bitmovin-player-ui';
 import { type NPOTag, type PageTracker } from '@npotag/tag';
 import { ButtonConfig } from 'bitmovin-player-ui/dist/js/framework/components/button';
 import NpoPlayer from '../npoplayer';
 import { NpoPlayerAPI } from '../services/npoPlayerAPI/npoPlayerAPI';
 import { NpoPlayerEventCallback } from './events';
-import { AnalyticsConfig, DRMConfig, GoogleCastRemoteControlConfig, ProgressiveSourceConfig, SourceConfigOptions, SourceLabelingStreamTypeConfig, SubtitleTrack, ThumbnailTrack, VRConfig } from 'bitmovin-player';
-export { Technology } from 'bitmovin-player';
+import { ProgressiveSourceConfig, SourceConfigOptions, SourceLabelingStreamTypeConfig, ThumbnailTrack } from 'bitmovin-player/modules/bitmovinplayer-core';
+import type { AnalyticsConfig } from 'bitmovin-player/types/analytics/ConfigAPI';
+import type { GoogleCastRemoteControlConfig } from 'bitmovin-player/types/remotecontrol/ConfigAPI';
+import DRMConfig from 'bitmovin-player/modules/bitmovinplayer-drm';
+import { SubtitleTrack } from 'bitmovin-player/modules/bitmovinplayer-subtitles';
+export { Technology } from 'bitmovin-player/modules/bitmovinplayer-core';
 export interface Profile {
     profileName: string;
     drm: string | undefined;
@@ -82,6 +86,7 @@ interface StreamObject_Assets {
     preroll?: string;
 }
 export interface StreamObject_Metadata {
+    chapters?: Chapter[];
     broadcaster?: string;
     description: string;
     duration?: string;
@@ -108,11 +113,10 @@ export interface SourceConfig {
     smooth?: string;
     whep?: string;
     poster?: string;
-    drm?: DRMConfig;
+    drm?: typeof DRMConfig;
     options?: SourceConfigOptions;
     subtitleTracks?: SubtitleTrack[];
     thumbnailTrack?: ThumbnailTrack;
-    vr?: VRConfig;
     title?: string;
     description?: string;
     labeling?: SourceLabelingStreamTypeConfig;
@@ -138,8 +142,10 @@ export interface StreamOptions {
     customFallbackPoster?: string;
     autoFillTimeLineMarkerDuration?: boolean;
     autoplay?: boolean;
+    skippableChapters?: string[];
     npoTagPageTracker?: PageTracker;
     retryCallback?: () => void;
+    infoPanelHTML?: string;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -150,6 +156,7 @@ export interface UIComponents {
     subtitlesButton?: SettingsPanelItem | undefined;
     qualityButton?: SettingsPanelItem | undefined;
     watchFromStartButton?: Button<ButtonConfig> | undefined;
+    skipChapterButton?: Button<ButtonConfig> | undefined;
     controlBar?: ControlBar | undefined;
     adbutton?: Button<ButtonConfig> | undefined;
     adlabel?: Label<{
@@ -161,44 +168,8 @@ export interface UIComponents {
     settingsPanels?: SettingsPanel[] | undefined;
     settingsPanel?: SettingsPanel | undefined;
     settingsToggleButton?: SettingsToggleButton | undefined;
-}
-export interface CustomMessageHandlerInterface {
-    defaultActionRequired?: boolean;
-    isChecked?: boolean;
-    playNext?: {
-        remainingCountDownDuration: number;
-    };
-    error?: ErrorEvent;
-    errorMessage?: {
-        input: string;
-        status: number;
-    };
-}
-export declare enum CustomMessages {
-    CLICK_CAST = "castButtonClick",
-    CLICK_GO_BACK_TO_LIVE = "clickGoBackToLive",
-    CLICK_WATCH_FROM_START = "clickWatchFromStart",
-    DO_ERROR = "doError",
-    ERROR_TRIGGERED = "errorTriggerd",
-    JAVASCRIPT_READY = "javascriptReady",
-    PLAY_NEXT_CANCEL_CLICK = "playNextCancelClick",
-    PLAY_NEXT_COUNTDOWN_CANCELED = "playNextCountdownCanceled",
-    PLAY_NEXT_COUNTDOWN_FINISHED = "playNextCountdownFinished",
-    PLAY_NEXT_COUNTDOWN_PROGRESS = "playNextCountdownProgress",
-    PLAY_NEXT_OVERLAY_HIDDEN = "playNextOverlayHidden",
-    PLAY_NEXT_OVERLAY_HIDE = "playNextOverlayHide",
-    PLAY_NEXT_OVERLAY_SHOW = "playNextOverlayShow",
-    PLAY_NEXT_OVERLAY_SHOWN = "playNextOverlayShown",
-    PLAY_NEXT_PROCEED_CLICK = "playNextProceedClick",
-    SET_STREAM_LINK = "setStreamLink",
-    SET_WEB_DATA = "setWebData",
-    TOGGLE_AIRPLAY = "toggleAirplay",
-    TOGGLE_FULLSCREEN = "toggleFullScreen",
-    TOGGLE_FULLSCREEN_UI = "toggleFullscreenUI",
-    TOGGLE_MUTE = "toggleMute",
-    TOGGLE_PIP = "togglePiP",
-    TOGGLE_PLAY_PAUSE = "togglePlayPause",
-    TOGGLE_SETTINGS_PANEL = "toggleSettingsPanel"
+    infoPanel?: Container<ContainerConfig>;
+    infoPanelToggleButtons?: ToggleButton<ToggleButtonConfig>[];
 }
 export declare enum NpoPlayerUIVariants {
     DEFAULT = "default",
@@ -242,3 +213,28 @@ export interface LogEventParams {
     event: string;
     data?: any;
 }
+export interface LogErrorContext {
+    programAvailableFrom?: string;
+    programAvailableUntil?: string;
+}
+export interface LogErrorParams {
+    playerContext: PlayerContext;
+    status: number;
+    body?: string;
+    context?: LogErrorContext;
+}
+export interface CreateButtonConfig {
+    text: string;
+    onClick: () => void;
+    ariaLabel?: string;
+    cssClass?: string;
+    hidden?: boolean;
+    acceptsTouchWithUiHidden?: boolean;
+}
+export interface Chapter {
+    description: string;
+    from: number;
+    until: number;
+    title: string;
+    type: string;
+}

package/lib/types/interfaces.js

@@ -1,30 +1,3 @@
-export var CustomMessages;
-(function (CustomMessages) {
-    CustomMessages["CLICK_CAST"] = "castButtonClick";
-    CustomMessages["CLICK_GO_BACK_TO_LIVE"] = "clickGoBackToLive";
-    CustomMessages["CLICK_WATCH_FROM_START"] = "clickWatchFromStart";
-    CustomMessages["DO_ERROR"] = "doError";
-    CustomMessages["ERROR_TRIGGERED"] = "errorTriggerd";
-    CustomMessages["JAVASCRIPT_READY"] = "javascriptReady";
-    CustomMessages["PLAY_NEXT_CANCEL_CLICK"] = "playNextCancelClick";
-    CustomMessages["PLAY_NEXT_COUNTDOWN_CANCELED"] = "playNextCountdownCanceled";
-    CustomMessages["PLAY_NEXT_COUNTDOWN_FINISHED"] = "playNextCountdownFinished";
-    CustomMessages["PLAY_NEXT_COUNTDOWN_PROGRESS"] = "playNextCountdownProgress";
-    CustomMessages["PLAY_NEXT_OVERLAY_HIDDEN"] = "playNextOverlayHidden";
-    CustomMessages["PLAY_NEXT_OVERLAY_HIDE"] = "playNextOverlayHide";
-    CustomMessages["PLAY_NEXT_OVERLAY_SHOW"] = "playNextOverlayShow";
-    CustomMessages["PLAY_NEXT_OVERLAY_SHOWN"] = "playNextOverlayShown";
-    CustomMessages["PLAY_NEXT_PROCEED_CLICK"] = "playNextProceedClick";
-    CustomMessages["SET_STREAM_LINK"] = "setStreamLink";
-    CustomMessages["SET_WEB_DATA"] = "setWebData";
-    CustomMessages["TOGGLE_AIRPLAY"] = "toggleAirplay";
-    CustomMessages["TOGGLE_FULLSCREEN"] = "toggleFullScreen";
-    CustomMessages["TOGGLE_FULLSCREEN_UI"] = "toggleFullscreenUI";
-    CustomMessages["TOGGLE_MUTE"] = "toggleMute";
-    CustomMessages["TOGGLE_PIP"] = "togglePiP";
-    CustomMessages["TOGGLE_PLAY_PAUSE"] = "togglePlayPause";
-    CustomMessages["TOGGLE_SETTINGS_PANEL"] = "toggleSettingsPanel";
-})(CustomMessages || (CustomMessages = {}));
 export var NpoPlayerUIVariants;
 (function (NpoPlayerUIVariants) {
     NpoPlayerUIVariants["DEFAULT"] = "default";

package/lib/ui/components/adbutton.d.ts

@@ -1,7 +1,4 @@
 import { Button } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-export declare function createAdButton(npoPlayer: NpoPlayer): Button<{
-    cssClass: string;
-    text: string;
-    hidden: true;
-}>;
+import { ButtonConfig } from 'bitmovin-player-ui/dist/js/framework/components/button';
+import { PlayerContext } from '../../types/interfaces';
+export declare function createAdButton(playerContext: PlayerContext): Button<ButtonConfig>;

package/lib/ui/components/adbutton.js

@@ -1,5 +1,6 @@
 import { Button } from 'bitmovin-player-ui';
-export function createAdButton(npoPlayer) {
+export function createAdButton(playerContext) {
+    const { npoPlayer } = playerContext;
     npoPlayer.uiComponents.adbutton = undefined;
     const adButton = new Button({
         cssClass: 'ui-textbutton ui-sterbutton bmpui-ui-button',

package/lib/ui/components/adlabel.d.ts

@@ -1,7 +1,4 @@
 import { Label } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-export declare function createAdLabel(npoPlayer: NpoPlayer): Label<{
-    text: string;
-    cssClass: string;
-    hidden: true;
-}>;
+import { LabelConfig } from 'bitmovin-player-ui/dist/js/framework/components/label';
+import { PlayerContext } from '../../types/interfaces';
+export declare function createAdLabel(playerContext: PlayerContext): Label<LabelConfig>;

package/lib/ui/components/adlabel.js

@@ -1,5 +1,6 @@
 import { Label } from 'bitmovin-player-ui';
-export function createAdLabel(npoPlayer) {
+export function createAdLabel(playerContext) {
+    const { npoPlayer } = playerContext;
     npoPlayer.uiComponents.adlabel = undefined;
     const adLabel = new Label({ text: '', cssClass: 'adLabel', hidden: true });
     npoPlayer.uiComponents.adlabel = adLabel;

package/lib/ui/components/audio/controlbar.d.ts

@@ -1,3 +1,3 @@
 import { ControlBar } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../../npoplayer';
-export declare function createAudioControlBar(npoPlayer: NpoPlayer): ControlBar;
+import { PlayerContext } from '../../../types/interfaces';
+export declare function createAudioControlBar(playerContext: PlayerContext): ControlBar;

package/lib/ui/components/audio/controlbar.js

@@ -1,12 +1,12 @@
-import { ControlBar, Container, SeekBar, SeekBarLabel, VolumeControlButton } from 'bitmovin-player-ui';
+import { ControlBar, Container, VolumeControlButton } from 'bitmovin-player-ui';
 import { createSeekBar } from '../seekbar';
-import { NpoPlayerUIVariants } from '../../../npoplayer';
-export function createAudioControlBar(npoPlayer) {
-    const seekBar = new SeekBar({ label: new SeekBarLabel() });
-    npoPlayer.uiComponents.seekBar = seekBar;
+import { NpoPlayerUIVariants } from '../../../types/interfaces';
+export function createAudioControlBar(playerContext) {
+    const { npoPlayer } = playerContext;
+    const seekBar = createSeekBar(playerContext, NpoPlayerUIVariants.AUDIO);
     const controlBar = new ControlBar({
         components: [
-            createSeekBar(npoPlayer, NpoPlayerUIVariants.AUDIO),
+            seekBar,
             new Container({
                 components: [
                     new VolumeControlButton({

package/lib/ui/components/buttons.d.ts

@@ -1,8 +1,10 @@
-import { type PlayerAPI } from 'bitmovin-player';
-import { Button, ControlBar, CastToggleButton } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-import { PlayerContext } from '../../types/interfaces';
-import { NpoPlayerAPI } from '../../services/npoPlayerAPI/npoPlayerAPI';
+import { Button, ControlBar, CastToggleButton, Container } from 'bitmovin-player-ui';
+import { ContainerConfig } from 'bitmovin-player-ui/dist/js/framework/components/container';
+import { PlayerContext, CreateButtonConfig } from '../../types/interfaces';
+export declare function createButton(playerContext: PlayerContext, config: CreateButtonConfig): Button<{
+    cssClass: string;
+    ariaLabel: string;
+}>;
 export declare function createMiddleButtons(playerContext: PlayerContext): ControlBar;
 export declare function createRewindButton(playerContext: PlayerContext): Button<{
     cssClass: string;
@@ -12,24 +14,29 @@ export declare function createForwardButton(playerContext: PlayerContext): Butto
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createPlayNextButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
+export declare function createPlayNextButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createCancelPlayNextButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
+export declare function createCancelPlayNextButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createskipIntroButton(player: PlayerAPI): Button<{
+export declare function createGoBackLiveButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createGoBackLiveButton(player: PlayerAPI): Button<{
+export declare function createWatchFromStartButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createWatchFromStartButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
+export declare function createSkipChapterButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createChromecastButton(player: NpoPlayerAPI, npoPlayer: NpoPlayer): CastToggleButton;
+export declare function createChromecastButton(playerContext: PlayerContext): CastToggleButton;
+export interface ButtonOverlayConfig {
+    buttons: CreateButtonConfig[];
+    cssClasses?: string[];
+}
+export declare function createButtonOverlay(playerContext: PlayerContext, config: ButtonOverlayConfig): Container<ContainerConfig>;

package/lib/ui/components/buttons.js

@@ -1,6 +1,19 @@
-import { Button, PlaybackToggleButton, ControlBar, CastToggleButton } from 'bitmovin-player-ui';
+import { Button, PlaybackToggleButton, ControlBar, CastToggleButton, Container } from 'bitmovin-player-ui';
 import { rewind, forward } from '../handlers/timecontrolhandlers';
 import { NpoPlayerEvent } from '../../types/events';
+export function createButton(playerContext, config) {
+    const button = new Button({
+        cssClass: config.cssClass || 'ui-textbutton bmpui-ui-button',
+        text: config.text,
+        ariaLabel: config.ariaLabel || config.text,
+        hidden: config.hidden ?? false,
+        acceptsTouchWithUiHidden: config.acceptsTouchWithUiHidden ?? true
+    });
+    button.onClick.subscribe(() => {
+        config.onClick();
+    });
+    return button;
+}
 export function createMiddleButtons(playerContext) {
     const bigPlayToggleButton = new PlaybackToggleButton({
         cssClass: 'ui-playbacktogglebutton'
@@ -34,7 +47,8 @@ export function createForwardButton(playerContext) {
     });
     return forwardButton;
 }
-export function createPlayNextButton(player, npoPlayer) {
+export function createPlayNextButton(playerContext) {
+    const { npoPlayer } = playerContext;
     const playNextButton = new Button({
         cssClass: 'ui-textbutton ui-playNextButton bmpui-ui-button',
         text: '<span class="bmpui-ui-textbutton-icon bmpui-ui-textbutton-icon-play"></span> Volgende aflevering',
@@ -43,13 +57,12 @@ export function createPlayNextButton(player, npoPlayer) {
         acceptsTouchWithUiHidden: true
     });
     playNextButton.onClick.subscribe(() => {
-        if (player != undefined) {
-            npoPlayer.doPlayNext();
-        }
+        npoPlayer.doPlayNext();
     });
     return playNextButton;
 }
-export function createCancelPlayNextButton(player, npoPlayer) {
+export function createCancelPlayNextButton(playerContext) {
+    const { npoPlayer } = playerContext;
     const cancelPlayNextButton = new Button({
         cssClass: 'ui-textbutton ui-cancelPlayNextButton bmpui-ui-button',
         text: 'Annuleer',
@@ -58,27 +71,12 @@ export function createCancelPlayNextButton(player, npoPlayer) {
         acceptsTouchWithUiHidden: true
     });
     cancelPlayNextButton.onClick.subscribe(() => {
-        if (player != undefined) {
-            npoPlayer.cancelPlayNextScreen();
-        }
+        npoPlayer.cancelPlayNextScreen();
     });
     return cancelPlayNextButton;
 }
-export function createskipIntroButton(player) {
-    const skipIntroButton = new Button({
-        cssClass: 'ui-textbutton ui-skipintrobutton bmpui-ui-button bmpui-hidden',
-        text: 'Intro overslaan',
-        ariaLabel: 'Intro overslaan',
-        hidden: true
-    });
-    skipIntroButton.onClick.subscribe(() => {
-        if (player != undefined) {
-            player.seek(96);
-        }
-    });
-    return skipIntroButton;
-}
-export function createGoBackLiveButton(player) {
+export function createGoBackLiveButton(playerContext) {
+    const { player } = playerContext;
     const goBackLiveButton = new Button({
         cssClass: 'ui-textbutton ui-backtolivebutton bmpui-ui-button',
         text: 'Terug naar live',
@@ -92,13 +90,14 @@ export function createGoBackLiveButton(player) {
     });
     return goBackLiveButton;
 }
-export function createWatchFromStartButton(player, npoPlayer) {
+export function createWatchFromStartButton(playerContext) {
     const watchFromStartButton = new Button({
         cssClass: 'ui-textbutton ui-watchfromstartbutton bmpui-ui-button',
         text: 'Kijk vanaf het begin',
         ariaLabel: 'Kijk vanaf het begin',
         hidden: true
     });
+    const { player, npoPlayer } = playerContext;
     watchFromStartButton.onClick.subscribe(() => {
         if (player.isLive() ?? false)
             npoPlayer.watchFromStart();
@@ -108,7 +107,19 @@ export function createWatchFromStartButton(player, npoPlayer) {
     npoPlayer.uiComponents.watchFromStartButton = watchFromStartButton;
     return watchFromStartButton;
 }
-export function createChromecastButton(player, npoPlayer) {
+export function createSkipChapterButton(playerContext) {
+    const skipChapterButton = new Button({
+        cssClass: 'ui-textbutton ui-skipchapterbutton bmpui-ui-button',
+        text: '',
+        ariaLabel: 'Overslaan',
+        hidden: true
+    });
+    const { npoPlayer } = playerContext;
+    npoPlayer.uiComponents.skipChapterButton = skipChapterButton;
+    return skipChapterButton;
+}
+export function createChromecastButton(playerContext) {
+    const { player, npoPlayer } = playerContext;
     const chromeCastButton = new CastToggleButton({
         disabled: true
     });
@@ -124,3 +135,10 @@ export function createChromecastButton(player, npoPlayer) {
     player?.on(NpoPlayerEvent.CastAvailable, handleCastAvailable);
     return chromeCastButton;
 }
+export function createButtonOverlay(playerContext, config) {
+    const buttons = config.buttons.map((buttonConfig) => createButton(playerContext, buttonConfig));
+    return new Container({
+        components: buttons,
+        cssClasses: config.cssClasses || ['overlay-generic']
+    });
+}

package/lib/ui/components/controlbar.js

@@ -1,12 +1,12 @@
-import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, SettingsToggleButton, FullscreenToggleButton } from 'bitmovin-player-ui';
+import { ControlBar, Container, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, SettingsToggleButton, FullscreenToggleButton } from 'bitmovin-player-ui';
 import { createChromecastButton, createForwardButton, createRewindButton } from './buttons';
 import { createSeekBar } from './seekbar';
 import { createSettingsPanel } from './settingspanel';
 import { NpoPlayerUIVariants } from '../../types/interfaces';
+import { localizeKey } from '../../js/utilities/utilities.locale';
+import { createInfoPanelToggleButton } from './infopanel/togglebutton';
 export function createControlBar(playerContext, variant) {
-    const { npoPlayer, player } = playerContext;
-    const seekBar = new SeekBar({ label: new SeekBarLabel() });
-    npoPlayer.uiComponents.seekBar = seekBar;
+    const { npoPlayer } = playerContext;
     const controlComponents = [];
     controlComponents.push(new PlaybackToggleButton(), new VolumeToggleButton(), new VolumeSlider());
     if (variant === NpoPlayerUIVariants.DEFAULT) {
@@ -14,22 +14,26 @@ export function createControlBar(playerContext, variant) {
         const forwardButton = createForwardButton(playerContext);
         controlComponents.push(rewindButton, forwardButton);
     }
-    const chromeCastButton = createChromecastButton(player, npoPlayer);
+    const chromeCastButton = createChromecastButton(playerContext);
     controlComponents.push(new Spacer(), new PictureInPictureToggleButton(), new AirPlayToggleButton(), chromeCastButton);
     if (variant === NpoPlayerUIVariants.DEFAULT) {
-        const settingsPanel = createSettingsPanel(npoPlayer);
-        controlComponents.push(new SettingsToggleButton({ settingsPanel }), settingsPanel);
+        const infoPanelToggleButton = createInfoPanelToggleButton(playerContext);
+        const settingsPanel = createSettingsPanel(playerContext);
+        const settingsToggleButton = new SettingsToggleButton({ settingsPanel, role: 'button' });
+        settingsToggleButton.getDomElement().attr('aria-haspopup', 'true');
+        controlComponents.push(infoPanelToggleButton, settingsToggleButton, settingsPanel);
     }
     controlComponents.push(new FullscreenToggleButton());
     const controlBar = new ControlBar({
         components: [
-            createSeekBar(npoPlayer, variant),
+            createSeekBar(playerContext, variant),
             new Container({
                 components: [...controlComponents],
                 cssClasses: ['controlbar-bottom']
             })
         ],
-        cssClasses: ['ui-controlbar-bottom']
+        cssClasses: ['ui-controlbar-bottom'],
+        ariaLabel: localizeKey('controlBar.bottom')
     });
     npoPlayer.uiComponents.controlBar = controlBar;
     return controlBar;

package/lib/ui/components/ctabar.d.ts

@@ -1,10 +1,4 @@
-import { Button, Container, Label } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../npoplayer';
-import { type PlayerAPI } from 'bitmovin-player';
-import { ButtonConfig } from 'bitmovin-player-ui/dist/js/framework/components/button';
-import { LabelConfig } from 'bitmovin-player-ui/dist/js/framework/components/label';
-import { NpoPlayerUIVariants } from '../../types/interfaces';
-export declare function createCTABar(player: PlayerAPI, npoPlayer: NpoPlayer, variant: NpoPlayerUIVariants): Container<{
-    components: (Button<ButtonConfig> | Label<LabelConfig>)[];
-    cssClasses: string[];
-}>;
+import { Container } from 'bitmovin-player-ui';
+import { ContainerConfig } from 'bitmovin-player-ui/dist/js/framework/components/container';
+import { NpoPlayerUIVariants, PlayerContext } from '../../types/interfaces';
+export declare function createCTABar(playerContext: PlayerContext, variant: NpoPlayerUIVariants): Container<ContainerConfig>;