@npo/player 1.24.7 → 1.26.0

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

@@ -1,42 +1,35 @@
 import { type PlayerAPI } from 'bitmovin-player';
-import { Button, ControlBar } from 'bitmovin-player-ui';
+import { Button, ControlBar, CastToggleButton } from 'bitmovin-player-ui';
 import type NpoPlayer from '../../npoplayer';
-export declare function createMiddleButtons(player: PlayerAPI): ControlBar;
-export declare function createRewindButton(player: PlayerAPI | undefined): Button<{
+import { PlayerContext } from '../../types/interfaces';
+import { NpoPlayerAPI } from '../../services/npoPlayerAPI/npoPlayerAPI';
+export declare function createMiddleButtons(playerContext: PlayerContext): ControlBar;
+export declare function createRewindButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createForwardButton(player: PlayerAPI | undefined): Button<{
+export declare function createForwardButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+export declare function createPlayNextButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: false;
 }>;
-export declare function createCancelPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+export declare function createCancelPlayNextButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: false;
 }>;
 export declare function createskipIntroButton(player: PlayerAPI): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: true;
 }>;
 export declare function createGoBackLiveButton(player: PlayerAPI): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: true;
 }>;
-export declare function createWatchFromStartButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+export declare function createWatchFromStartButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: true;
 }>;
+export declare function createChromecastButton(player: NpoPlayerAPI, npoPlayer: NpoPlayer): CastToggleButton;

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

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

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

@@ -4,7 +4,7 @@ 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<{
+export declare function createCTABar(player: PlayerAPI, npoPlayer: NpoPlayer, variant: NpoPlayerUIVariants): Container<{
     components: (Button<ButtonConfig> | Label<LabelConfig>)[];
     cssClasses: string[];
 }>;

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

@@ -1,5 +1,13 @@
 import { AirPlayToggleButton, Button, CastToggleButton, ControlBar, FullscreenToggleButton, PictureInPictureToggleButton, PlaybackToggleButton, SettingsPanel, SettingsToggleButton, VolumeToggleButton } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
+export declare function createForwardButton(player: PlayerAPI | undefined): Button<{
+    cssClass: string;
+    ariaLabel: string;
+}>;
+export declare function createRewindButton(player: PlayerAPI | undefined): Button<{
+    cssClass: string;
+    ariaLabel: string;
+}>;
 export declare function createMiddleButtons(player: PlayerAPI): ControlBar;
 export declare function createWatchFromStartButton(): Button<{
     cssClass: string;

package/lib/src/ui/components/playnext.d.ts

@@ -1,12 +1,10 @@
 import { Container } from 'bitmovin-player-ui';
 import { type PlayerAPI } from 'bitmovin-player';
 import type NpoPlayer from '../../npoplayer';
-export declare function createPlayNextScreen(player: PlayerAPI, npoplayer: NpoPlayer): Container<{
+export declare function createPlayNextScreen(player: PlayerAPI, npoPlayer: NpoPlayer): Container<{
     components: import("bitmovin-player-ui").Button<{
         cssClass: string;
-        text: string;
         ariaLabel: string;
-        hidden: false;
     }>[];
     cssClasses: string[];
 }>;

package/lib/src/ui/components/seekbar.d.ts

@@ -1,6 +1,6 @@
 import { Container, PlaybackTimeLabel, SeekBar } from 'bitmovin-player-ui';
 import type NpoPlayer from '../../npoplayer';
-export declare function createSeekBar(npoplayer: NpoPlayer): Container<{
+export declare function createSeekBar(npoPlayer: NpoPlayer): Container<{
     components: (SeekBar | PlaybackTimeLabel)[];
     cssClasses: string[];
 }>;

package/lib/src/ui/components/titlebar.d.ts

@@ -1,3 +1,3 @@
 import { TitleBar } from 'bitmovin-player-ui';
 import type NpoPlayer from '../../npoplayer';
-export declare function createTitleBar(npoplayer: NpoPlayer): TitleBar;
+export declare function createTitleBar(npoPlayer: NpoPlayer): TitleBar;

package/lib/src/ui/components/topbar.d.ts

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

package/lib/src/ui/components/verticalvideo/controlbar.d.ts

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

package/lib/src/ui/handlers/playnextscreen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/ui/handlers/timecontrolhandlers.d.ts

@@ -1,3 +1,3 @@
-import { type PlayerAPI } from 'bitmovin-player';
-export declare function rewind(player: PlayerAPI): void;
-export declare function forward(player: PlayerAPI): void;
+import { NpoPlayerAPI } from '../../services/npoPlayerAPI/npoPlayerAPI';
+export declare function rewind(player: NpoPlayerAPI): void;
+export declare function forward(player: NpoPlayerAPI): void;

package/lib/src/ui/uicontainer.d.ts

@@ -1,5 +1,4 @@
-import NpoPlayer from '../npoplayer';
 import { UIContainer } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
-import { NpoPlayerUIVariants } from '../types/interfaces';
-export declare function createUIContainer(npoPlayer: NpoPlayer, player: PlayerAPI, variant: NpoPlayerUIVariants, container: HTMLElement): UIContainer;
+import { NpoPlayerUIVariants, PlayerContext } from '../types/interfaces';
+export declare function createUIContainer(playerContext: PlayerContext, player: PlayerAPI, variant: NpoPlayerUIVariants): UIContainer;

package/lib/src/ui/uicontainer.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,2 @@
+import { LogEmitter } from '../../src/types/classes';
+export declare const createLogEmitterMock: () => jest.Mocked<LogEmitter>;

package/lib/tests/mocks/mockLogEmitter.js

@@ -0,0 +1,20 @@
+export const createLogEmitterMock = () => {
+    const logEmitterMock = {
+        emit: jest.fn(),
+        on: jest.fn(),
+        once: jest.fn(),
+        off: jest.fn(),
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        removeAllListeners: jest.fn(),
+        listeners: jest.fn(),
+        listenerCount: jest.fn(),
+        rawListeners: jest.fn(),
+        eventNames: jest.fn(),
+        setMaxListeners: jest.fn(),
+        getMaxListeners: jest.fn(),
+        prependListener: jest.fn(),
+        prependOnceListener: jest.fn()
+    };
+    return logEmitterMock;
+};

package/lib/tests/mocks/mockNpoplayer.js

@@ -30,6 +30,9 @@ export const mockNpoPlayer = {
     uiManager: undefined,
     canceledPlayNextScreen: false,
     npoTag: undefined,
+    npoTagInitialisation: undefined,
+    npoTagInstance: undefined,
+    npoTagPageTracker: undefined,
     logEmitter: {},
     uiComponents: {
         settingsPanels: [settingsPanelMock, settingsPanelMock]
@@ -65,7 +68,6 @@ export const mockNpoPlayer = {
     variant: '',
     playerContext: {},
     isShowingPlayNextScreen: false,
-    userPreferences: {},
     eventListeners: undefined,
     setVolume: function (volume) {
         jest.fn();
@@ -115,6 +117,6 @@ export const mockNpoPlayer = {
     updateMarkers: function () {
         jest.fn();
     },
-    npoplayerServices: new NpoPlayerServices(),
+    npoPlayerServices: new NpoPlayerServices(),
     mockNpoPlayer: undefined
 };

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

@@ -15,7 +15,9 @@ export declare const createMockNpoPlayer: (overrides?: {}) => {
     };
     uiComponents: {};
     container: HTMLDivElement;
-    streamOptions: {};
+    streamOptions: {
+        enableSubtitles: boolean;
+    };
     jwt: string;
     apiPayload: {
         baseURL: string;
@@ -32,8 +34,9 @@ export declare const createMockNpoPlayer: (overrides?: {}) => {
     isShowingPlayNextScreen: boolean;
     canceledPlayNextScreen: boolean;
     playerContext: undefined;
-    npoplayerServices: {
+    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>;
@@ -42,7 +45,6 @@ export declare const createMockNpoPlayer: (overrides?: {}) => {
     };
     eventListeners: undefined;
     mockNpoPlayer: undefined;
-    userPreferences: {};
     initPlayer: jest.Mock<any, any, any>;
     loadStream: jest.Mock<any, any, any>;
     doError: jest.Mock<any, any, any>;

package/lib/tests/mocks/playerContextMock.js

@@ -24,6 +24,7 @@ export const createMockNpoPlayerAPI = (overrides = {}) => ({
     setViewMode: jest.fn(),
     getViewMode: jest.fn(),
     areSubtitlesEnabled: jest.fn().mockReturnValue(false),
+    getCurrentSubtitle: jest.fn().mockReturnValue('nl'),
     enableSubtitles: jest.fn(),
     isPaused: jest.fn().mockReturnValue(false),
     isMuted: jest.fn().mockReturnValue(false),
@@ -32,6 +33,7 @@ export const createMockNpoPlayerAPI = (overrides = {}) => ({
     getSupportedTech: jest.fn().mockReturnValue([]),
     off: jest.fn(),
     on: jest.fn(),
+    isCastAvailable: jest.fn(),
     seek: jest.fn(),
     timeShift: jest.fn(),
     getContainer: jest.fn(),
@@ -44,7 +46,6 @@ export const createMockNpoPlayerAPI = (overrides = {}) => ({
     getTimeShift: jest.fn().mockReturnValue(0),
     scheduleAds: jest.fn().mockResolvedValue([]),
     getActiveAdBreak: jest.fn().mockReturnValue(undefined),
-    discardAdBreak: jest.fn(),
     getConfig: jest.fn().mockReturnValue({}),
     createUIManager: jest.fn(),
     ...overrides
@@ -68,7 +69,9 @@ export const createMockNpoPlayer = (overrides = {}) => ({
     logEmitter: { emit: jest.fn() },
     uiComponents: {},
     container: document.createElement('div'),
-    streamOptions: {},
+    streamOptions: {
+        enableSubtitles: false
+    },
     jwt: '',
     apiPayload: { baseURL: '', jwt: '', data: {} },
     adBreakActive: false,
@@ -78,8 +81,9 @@ export const createMockNpoPlayer = (overrides = {}) => ({
     isShowingPlayNextScreen: false,
     canceledPlayNextScreen: false,
     playerContext: undefined,
-    npoplayerServices: {
+    npoPlayerServices: {
         getStoredUserPrefs: jest.fn(),
+        setStoredUserPrefs: jest.fn(),
         handleUserPrefs: jest.fn(),
         setAccessibilityAttributes: jest.fn(),
         keyboardHandler: jest.fn(),
@@ -88,7 +92,6 @@ export const createMockNpoPlayer = (overrides = {}) => ({
     },
     eventListeners: undefined,
     mockNpoPlayer: undefined,
-    userPreferences: {},
     initPlayer: jest.fn(),
     loadStream: jest.fn(),
     doError: jest.fn(),
@@ -112,7 +115,7 @@ export const createMockNpoPlayer = (overrides = {}) => ({
 });
 export const createPlayerContextMock = (overrides = {}) => ({
     player: createMockNpoPlayerAPI(),
-    npoplayer: createMockNpoPlayer(),
+    npoPlayer: createMockNpoPlayer(),
     ...overrides
 });
 export default createPlayerContextMock;

package/lib/types/classes.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
+type AllowedEvents = 'logControlsVisibilityChange' | 'logError' | 'logEvent';
 export declare class LogEmitter extends EventEmitter {
+    emit(event: AllowedEvents, ...args: any[]): boolean;
+    on(event: AllowedEvents, listener: (...args: any[]) => void): this;
+    once(event: AllowedEvents, listener: (...args: any[]) => void): this;
+    off(event: AllowedEvents, listener: (...args: any[]) => void): this;
 }
+export {};

package/lib/types/classes.js

@@ -1,3 +1,15 @@
 import { EventEmitter } from 'events';
 export class LogEmitter extends EventEmitter {
+    emit(event, ...args) {
+        return super.emit(event, ...args);
+    }
+    on(event, listener) {
+        return super.on(event, listener);
+    }
+    once(event, listener) {
+        return super.once(event, listener);
+    }
+    off(event, listener) {
+        return super.off(event, listener);
+    }
 }

package/lib/types/interfaces.d.ts

@@ -4,7 +4,7 @@ import { ButtonConfig } from 'bitmovin-player-ui/dist/js/framework/components/bu
 import NpoPlayer from '../npoplayer';
 import { NpoPlayerAPI } from '../services/npoPlayerAPI/npoPlayerAPI';
 import { NpoPlayerEventCallback } from './events';
-import { SourceConfig } from 'bitmovin-player';
+import { AnalyticsConfig, DRMConfig, GoogleCastRemoteControlConfig, ProgressiveSourceConfig, SourceConfigOptions, SourceLabelingStreamTypeConfig, SubtitleTrack, ThumbnailTrack, VRConfig } from 'bitmovin-player';
 export { Technology } from 'bitmovin-player';
 export interface Profile {
     profileName: string;
@@ -31,7 +31,7 @@ export interface StreamObject {
 }
 export interface PlayerContext {
     player: NpoPlayerAPI;
-    npoplayer: NpoPlayer;
+    npoPlayer: NpoPlayer;
 }
 export interface ApiPayload {
     baseURL: string;
@@ -95,6 +95,26 @@ interface FragmentSection {
 export interface Fragment {
     sections: FragmentSection[];
 }
+export interface SourceConfig {
+    dash?: string;
+    hls?: string;
+    progressive?: string | ProgressiveSourceConfig[];
+    smooth?: string;
+    whep?: string;
+    poster?: string;
+    drm?: DRMConfig;
+    options?: SourceConfigOptions;
+    subtitleTracks?: SubtitleTrack[];
+    thumbnailTrack?: ThumbnailTrack;
+    vr?: VRConfig;
+    title?: string;
+    description?: string;
+    labeling?: SourceLabelingStreamTypeConfig;
+    analytics?: AnalyticsConfig;
+    metadata?: {
+        [key: string]: string;
+    };
+}
 export interface StreamOptions {
     sourceConfig?: SourceConfig;
     fragments?: Fragment;
@@ -197,6 +217,8 @@ export type TimeLineMarker = {
 export declare enum LocalStorageValues {
     IS_MUTED = "ismuted",
     VOLUME = "volume",
-    SUBTITLES_ENABLED = "subtitles_enabled"
+    SUBTITLES_ENABLED = "subtitles_enabled",
+    SUBTITLES_LANGUAGE = "subtitles_language"
 }
 export type LocalStorageData = Partial<Record<LocalStorageValues, string | number>>;
+export type NPOGoogleCastRemoteControlConfig = GoogleCastRemoteControlConfig;

package/lib/types/interfaces.js

@@ -43,4 +43,5 @@ export var LocalStorageValues;
     LocalStorageValues["IS_MUTED"] = "ismuted";
     LocalStorageValues["VOLUME"] = "volume";
     LocalStorageValues["SUBTITLES_ENABLED"] = "subtitles_enabled";
+    LocalStorageValues["SUBTITLES_LANGUAGE"] = "subtitles_language";
 })(LocalStorageValues || (LocalStorageValues = {}));

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

@@ -1,6 +1,6 @@
 import { Button } from 'bitmovin-player-ui';
 import type NpoPlayer from '../../npoplayer';
-export declare function createAdButton(npoplayer: NpoPlayer): Button<{
+export declare function createAdButton(npoPlayer: NpoPlayer): Button<{
     cssClass: string;
     text: string;
     hidden: true;

package/lib/ui/components/adbutton.js

@@ -1,11 +1,11 @@
 import { Button } from 'bitmovin-player-ui';
-export function createAdButton(npoplayer) {
-    npoplayer.uiComponents.adbutton = undefined;
+export function createAdButton(npoPlayer) {
+    npoPlayer.uiComponents.adbutton = undefined;
     const adButton = new Button({
         cssClass: 'ui-textbutton ui-sterbutton bmpui-ui-button',
         text: 'Ga naar website van adverteerder',
         hidden: true
     });
-    npoplayer.uiComponents.adbutton = adButton;
+    npoPlayer.uiComponents.adbutton = adButton;
     return adButton;
 }

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

@@ -1,6 +1,6 @@
 import { Label } from 'bitmovin-player-ui';
 import type NpoPlayer from '../../npoplayer';
-export declare function createAdLabel(npoplayer: NpoPlayer): Label<{
+export declare function createAdLabel(npoPlayer: NpoPlayer): Label<{
     text: string;
     cssClass: string;
     hidden: true;

package/lib/ui/components/adlabel.js

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

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

@@ -1,42 +1,35 @@
 import { type PlayerAPI } from 'bitmovin-player';
-import { Button, ControlBar } from 'bitmovin-player-ui';
+import { Button, ControlBar, CastToggleButton } from 'bitmovin-player-ui';
 import type NpoPlayer from '../../npoplayer';
-export declare function createMiddleButtons(player: PlayerAPI): ControlBar;
-export declare function createRewindButton(player: PlayerAPI | undefined): Button<{
+import { PlayerContext } from '../../types/interfaces';
+import { NpoPlayerAPI } from '../../services/npoPlayerAPI/npoPlayerAPI';
+export declare function createMiddleButtons(playerContext: PlayerContext): ControlBar;
+export declare function createRewindButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createForwardButton(player: PlayerAPI | undefined): Button<{
+export declare function createForwardButton(playerContext: PlayerContext): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+export declare function createPlayNextButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: false;
 }>;
-export declare function createCancelPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+export declare function createCancelPlayNextButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: false;
 }>;
 export declare function createskipIntroButton(player: PlayerAPI): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: true;
 }>;
 export declare function createGoBackLiveButton(player: PlayerAPI): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: true;
 }>;
-export declare function createWatchFromStartButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+export declare function createWatchFromStartButton(player: PlayerAPI, npoPlayer: NpoPlayer): Button<{
     cssClass: string;
-    text: string;
     ariaLabel: string;
-    hidden: true;
 }>;
+export declare function createChromecastButton(player: NpoPlayerAPI, npoPlayer: NpoPlayer): CastToggleButton;

package/lib/ui/components/buttons.js

@@ -1,64 +1,65 @@
-import { Button, PlaybackToggleButton, ControlBar } from 'bitmovin-player-ui';
+import { Button, PlaybackToggleButton, ControlBar, CastToggleButton } from 'bitmovin-player-ui';
 import { rewind, forward } from '../handlers/timecontrolhandlers';
-export function createMiddleButtons(player) {
+import { NpoPlayerEvent } from '../../types/events';
+export function createMiddleButtons(playerContext) {
     const bigPlayToggleButton = new PlaybackToggleButton({
         cssClass: 'ui-playbacktogglebutton'
     });
-    const bigRewindButton = createRewindButton(player);
-    const bigForwardButton = createForwardButton(player);
+    const bigRewindButton = createRewindButton(playerContext);
+    const bigForwardButton = createForwardButton(playerContext);
     return new ControlBar({
         components: [bigRewindButton, bigPlayToggleButton, bigForwardButton],
         cssClasses: ['controlbar-middle']
     });
 }
-export function createRewindButton(player) {
+export function createRewindButton(playerContext) {
+    const { player } = playerContext;
     const rewindButton = new Button({
         cssClass: 'ui-rewindbutton bmpui-ui-button',
         ariaLabel: 'Spoel 10 seconden terug'
     });
-    if (player) {
-        rewindButton.onClick.subscribe(() => {
-            rewind(player);
-        });
-    }
+    rewindButton.onClick.subscribe(() => {
+        rewind(player);
+    });
     return rewindButton;
 }
-export function createForwardButton(player) {
+export function createForwardButton(playerContext) {
+    const { player } = playerContext;
     const forwardButton = new Button({
         cssClass: 'ui-forwardbutton bmpui-ui-button',
         ariaLabel: 'Spoel 10 seconden vooruit'
     });
-    if (player) {
-        forwardButton.onClick.subscribe(() => {
-            forward(player);
-        });
-    }
+    forwardButton.onClick.subscribe(() => {
+        forward(player);
+    });
     return forwardButton;
 }
-export function createPlayNextButton(player, npoplayer) {
+export function createPlayNextButton(player, npoPlayer) {
     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',
         ariaLabel: 'Volgende aflevering',
-        hidden: false
+        hidden: false,
+        acceptsTouchWithUiHidden: true
     });
     playNextButton.onClick.subscribe(() => {
         if (player != undefined) {
-            npoplayer.doPlayNext();
+            npoPlayer.doPlayNext();
         }
     });
     return playNextButton;
 }
-export function createCancelPlayNextButton(player, npoplayer) {
+export function createCancelPlayNextButton(player, npoPlayer) {
     const cancelPlayNextButton = new Button({
         cssClass: 'ui-textbutton ui-cancelPlayNextButton bmpui-ui-button',
         text: 'Annuleer',
         ariaLabel: 'Annuleer',
-        hidden: false
+        hidden: false,
+        acceptsTouchWithUiHidden: true
     });
     cancelPlayNextButton.onClick.subscribe(() => {
         if (player != undefined) {
-            npoplayer.cancelPlayNextScreen();
+            npoPlayer.cancelPlayNextScreen();
         }
     });
     return cancelPlayNextButton;
@@ -91,7 +92,7 @@ export function createGoBackLiveButton(player) {
     });
     return goBackLiveButton;
 }
-export function createWatchFromStartButton(player, npoplayer) {
+export function createWatchFromStartButton(player, npoPlayer) {
     const watchFromStartButton = new Button({
         cssClass: 'ui-textbutton ui-watchfromstartbutton bmpui-ui-button',
         text: 'Kijk vanaf het begin',
@@ -100,10 +101,26 @@ export function createWatchFromStartButton(player, npoplayer) {
     });
     watchFromStartButton.onClick.subscribe(() => {
         if (player.isLive() ?? false)
-            npoplayer.watchFromStart();
-        if (npoplayer.uiComponents.watchFromStartButton)
-            npoplayer.uiComponents.watchFromStartButton.hide();
+            npoPlayer.watchFromStart();
+        if (npoPlayer.uiComponents.watchFromStartButton)
+            npoPlayer.uiComponents.watchFromStartButton.hide();
     });
-    npoplayer.uiComponents.watchFromStartButton = watchFromStartButton;
+    npoPlayer.uiComponents.watchFromStartButton = watchFromStartButton;
     return watchFromStartButton;
 }
+export function createChromecastButton(player, npoPlayer) {
+    const chromeCastButton = new CastToggleButton({
+        disabled: true
+    });
+    const handleCastAvailable = () => {
+        const remoteControlConfig = npoPlayer.playerConfig?.remotecontrol;
+        if (player?.isCastAvailable() && remoteControlConfig.customReceiverConfig?.enable !== 'false') {
+            chromeCastButton.enable();
+        }
+        else {
+            chromeCastButton.disable();
+        }
+    };
+    player?.on(NpoPlayerEvent.CastAvailable, handleCastAvailable);
+    return chromeCastButton;
+}

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

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