@npo/player 1.24.6 → 1.25.0

package/lib/services/streamoptionsHandlers/streamOptionsHandler.test.js

@@ -0,0 +1,187 @@
+import { handleStreamOptions, initializeFragment, handleStartOffset, updateStreamClasses, setupAutoplay } from './steamOptionsHandler';
+import '@testing-library/jest-dom';
+import { createMockNpoPlayer, createPlayerContextMock, createMockNpoPlayerAPI } from '../../../tests/mocks/playerContextMock';
+import * as playerAction from '../../js/playeractions/playeractions';
+import { updateClassFromElementByQuery } from '../../js/utilities/utilities.element';
+import { handleLiveStreamControls } from '../liveStreamHandlers/handleLiveStreamControls';
+import { initSegment } from '../segmentHandlers/initSegment';
+import { NpoPlayerEvent } from '../../types/events';
+import { removeEventListeners } from '../eventListenerHandlers/removeEventListeners';
+jest.mock('../segmentHandlers/initSegment');
+jest.mock('../eventListenerHandlers/removeEventListeners');
+jest.mock('../../js/playeractions/playeractions');
+jest.mock('../liveStreamHandlers/handleLiveStreamControls');
+jest.mock('../../js/utilities/utilities.element', () => ({
+    updateClassFromElementByQuery: jest.fn()
+}));
+describe('handleStreamOptions', () => {
+    let mockElement;
+    beforeEach(() => {
+        mockElement = { innerHTML: '', appendChild: jest.fn() };
+        document.querySelector = jest.fn().mockReturnValue(mockElement);
+    });
+    it('correctly calls all of the functions when the conditions are met', () => {
+        const mockNpoPlayerAPI = createMockNpoPlayerAPI({
+            on: jest.fn(),
+            off: jest.fn()
+        });
+        const npoplayerMock = createMockNpoPlayer({
+            playerconfig: {
+                playback: {
+                    muted: false,
+                    autoplay: true
+                }
+            },
+            streamObject: {
+                stream: {
+                    isLiveStream: true
+                }
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            player: mockNpoPlayerAPI,
+            npoplayer: npoplayerMock
+        });
+        handleStreamOptions(playerContextMock);
+        expect(initializeFragment(playerContextMock)).toHaveBeenCalled;
+        expect(handleStartOffset(playerContextMock)).toHaveBeenCalled;
+        expect(updateStreamClasses(playerContextMock)).toHaveBeenCalled;
+        expect(setupAutoplay(playerContextMock)).toHaveBeenCalled;
+    });
+    it('should return early if uiManager is missing', () => {
+        const npoplayerMock = createMockNpoPlayer({
+            UIManager: null
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        handleStreamOptions(playerContextMock);
+        expect(removeEventListeners).not.toHaveBeenCalled();
+    });
+    it('should return early if streamObject is missing', () => {
+        const npoplayerMock = createMockNpoPlayer({
+            streamObject: null
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        handleStreamOptions(playerContextMock);
+        expect(removeEventListeners).not.toHaveBeenCalled();
+    });
+    it('should return early if autoplay is false', () => {
+        const npoplayerMock = createMockNpoPlayer({
+            playerconfig: {
+                playback: {
+                    muted: false,
+                    autoplay: true
+                }
+            },
+            streamOptions: {
+                autoplay: false
+            }
+        });
+        const playerContextMock = createPlayerContextMock({
+            npoplayer: npoplayerMock
+        });
+        const setupAutoplayMock = jest.fn();
+        handleStreamOptions(playerContextMock);
+        expect(setupAutoplayMock).not.toHaveBeenCalled();
+    });
+    describe('updateStreamClasses', () => {
+        it('should add "livestream-no-dvr" class when isLiveStream is true and hasDvrWindow is false', () => {
+            const npoplayerMock = createMockNpoPlayer({
+                streamObject: {
+                    stream: {
+                        isLiveStream: true,
+                        hasDvrWindow: false
+                    }
+                }
+            });
+            const playerContextMock = createPlayerContextMock({
+                npoplayer: npoplayerMock
+            });
+            updateStreamClasses(playerContextMock);
+            expect(updateClassFromElementByQuery).toHaveBeenCalledWith(expect.objectContaining({
+                className: 'livestream-no-dvr',
+                condition: true
+            }));
+        });
+        it('should add "audio-only" class when avType is "aod" or "audio"', () => {
+            const npoplayerMock = createMockNpoPlayer({
+                streamObject: {
+                    stream: {
+                        avType: 'aod'
+                    }
+                }
+            });
+            const playerContextMock = createPlayerContextMock({
+                npoplayer: npoplayerMock
+            });
+            updateStreamClasses(playerContextMock);
+            expect(updateClassFromElementByQuery).toHaveBeenCalledWith(expect.objectContaining({
+                className: 'audio-only',
+                condition: true
+            }));
+        });
+        it('should call handleLiveStreamControls when isLiveStream is true and hasDvrWindow is true', () => {
+            const npoplayerMock = createMockNpoPlayer({
+                streamObject: {
+                    stream: {
+                        isLiveStream: true,
+                        hasDvrWindow: true
+                    }
+                }
+            });
+            const playerContextMock = createPlayerContextMock({
+                npoplayer: npoplayerMock
+            });
+            updateStreamClasses(playerContextMock);
+            expect(handleLiveStreamControls).toHaveBeenCalledWith(playerContextMock);
+        });
+    });
+    describe('initializeFragment', () => {
+        it('should call initSegment with correct parameters', () => {
+            const npoplayerMock = createMockNpoPlayer({
+                streamObject: { segment: 'segment' },
+                streamOptions: { fragments: { sections: [{ duration: 10, time: 0 }] } }
+            });
+            const playerContextMock = createPlayerContextMock({
+                npoplayer: npoplayerMock
+            });
+            initializeFragment(playerContextMock);
+            expect(initSegment).toHaveBeenCalledWith(playerContextMock, {
+                segment: 'segment',
+                fragment: { sections: [{ duration: 10, time: 0 }] }
+            });
+        });
+    });
+    describe('handleStartOffset', () => {
+        it('should call handleStartOffset with correct parameters', () => {
+            const npoplayerMock = createMockNpoPlayer({
+                streamOptions: { startOffset: 10 }
+            });
+            const playerContextMock = createPlayerContextMock({
+                npoplayer: npoplayerMock
+            });
+            handleStartOffset(playerContextMock);
+            expect(playerAction.handleStartOffset).toHaveBeenCalledWith(playerContextMock, 10);
+        });
+    });
+    describe('setupAutoplay', () => {
+        it('should setup autoplay correctly', async () => {
+            const mockNpoPlayerAPI = createMockNpoPlayerAPI({
+                on: jest.fn(),
+                off: jest.fn(),
+                play: jest.fn().mockResolvedValue(undefined)
+            });
+            const playerContextMock = createPlayerContextMock({
+                player: mockNpoPlayerAPI
+            });
+            setupAutoplay(playerContextMock);
+            expect(playerContextMock.player.on).toHaveBeenCalledWith(NpoPlayerEvent.SourceLoaded, expect.any(Function));
+            const handleAutoPlay = playerContextMock.player.on.mock.calls[0][1];
+            await handleAutoPlay();
+            expect(playerContextMock.player.play).toHaveBeenCalled();
+        });
+    });
+});

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

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

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

@@ -1,4 +1,5 @@
 import { StreamObject, StreamOptions } from 'types/interfaces';
 import { SourceConfig } from 'bitmovin-player';
 import { NpoPlayerServices } from '../../../services/services';
-export declare function processSourceConfig(NpoPlayerServices: NpoPlayerServices, _sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | undefined, streamOptions: StreamOptions, version: string, npoTagPartyId: string | undefined, npoPlayerServices: NpoPlayerServices): Promise<SourceConfig>;
+import { NPOTag } from '@npotag/tag';
+export declare function processSourceConfig(npoPlayerServices: NpoPlayerServices, source: string, _sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | undefined, streamOptions: StreamOptions, version: string, npoTagInstance: NPOTag | undefined): Promise<SourceConfig>;

package/lib/src/js/settings/localization.d.ts

@@ -1,6 +1,81 @@
 export declare const localizationConfig: {
     language: string;
     vocabularies: {
-        nl: Record<string, string>;
+        nl: {
+            "settings.video.quality": string;
+            "settings.audio.quality": string;
+            "settings.audio.track": string;
+            "settings.audio.mute": string;
+            "settings.audio.unmute": string;
+            "settings.audio.volume": string;
+            "settings.subtitles.window.color": string;
+            "settings.subtitles.window.opacity": string;
+            "settings.subtitles": string;
+            "settings.subtitles.font.color": string;
+            "settings.subtitles.font.opacity": string;
+            "settings.subtitles.background.color": string;
+            "settings.subtitles.background.opacity": string;
+            "colors.white": string;
+            "colors.black": string;
+            "colors.red": string;
+            "colors.green": string;
+            "colors.blue": string;
+            "colors.cyan": string;
+            "colors.yellow": string;
+            "colors.magenta": string;
+            percent: string;
+            "settings.subtitles.font.size": string;
+            "settings.subtitles.characterEdge": string;
+            "settings.subtitles.characterEdge.raised": string;
+            "settings.subtitles.characterEdge.depressed": string;
+            "settings.subtitles.characterEdge.uniform": string;
+            "settings.subtitles.characterEdge.dropshadowed": string;
+            "settings.subtitles.font.family": string;
+            "settings.subtitles.font.family.monospacedserif": string;
+            "settings.subtitles.font.family.proportionalserif": string;
+            "settings.subtitles.font.family.monospacedsansserif": string;
+            "settings.subtitles.font.family.proportionalsansserif": string;
+            "settings.subtitles.font.family.casual": string;
+            "settings.subtitles.font.family.cursive": string;
+            "settings.subtitles.font.family.smallcapital": string;
+            "settings.time.hours": string;
+            "settings.time.minutes": string;
+            "settings.time.seconds": string;
+            "ads.remainingTime": string;
+            settings: string;
+            fullscreen: string;
+            speed: string;
+            playPause: string;
+            play: string;
+            pause: string;
+            open: string;
+            close: string;
+            pictureInPicture: string;
+            appleAirplay: string;
+            googleCast: string;
+            vr: string;
+            off: string;
+            auto: string;
+            back: string;
+            reset: string;
+            replay: string;
+            normal: string;
+            default: string;
+            live: string;
+            "subtitle.example": string;
+            "subtitle.select": string;
+            playingOn: string;
+            connectingTo: string;
+            watermarkLink: string;
+            controlBar: string;
+            player: string;
+            videoPlayer: string;
+            audioPlayer: string;
+            seekBar: string;
+            "seekBar.value": string;
+            "seekBar.timeshift": string;
+            "seekBar.durationText": string;
+            "segment.unplayableTitle": string;
+        };
     };
 };

package/lib/src/js/tracking/handlers/playertrackerinit.d.ts

@@ -1,4 +1,4 @@
-import { type NPOTag } from '@npotag/tag';
+import { type NPOTag, type PageTracker } from '@npotag/tag';
 import { type InitialisationProps } from '@npotag/tag/dist/types/src/npoTag';
 import type NpoPlayer from '../../../npoplayer';
-export declare function initPlayerTracker(npoplayer: NpoPlayer, _npotag?: InitialisationProps | undefined, _npotaginstance?: NPOTag): void;
+export declare function initPlayerTracker(npoPlayer: NpoPlayer, _npoTag?: InitialisationProps, _npoTagInstance?: NPOTag, _npoTagPageTracker?: PageTracker): void;

package/lib/src/js/tracking/handlers/playertrackerinit.test.d.ts

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

package/lib/src/js/utilities/utilities.element.d.ts

@@ -4,7 +4,13 @@ interface ElementByQuery {
 }
 interface RemoveClassFromElementByQuery extends ElementByQuery {
     className: string;
+    condition: boolean;
+}
+export interface UpdateClassFromElementByQuery extends ElementByQuery {
+    className: string;
+    condition: boolean;
 }
 export declare function getElementByQuery({ container, query }: ElementByQuery): Element | null;
 export declare function removeClassFromElementByQuery(params: RemoveClassFromElementByQuery): void;
+export declare function updateClassFromElementByQuery(params: UpdateClassFromElementByQuery): void;
 export {};

package/lib/src/npoplayer.d.ts

@@ -1,5 +1,5 @@
 import { NpoPlayerServices } from './services/services';
-import { type StreamTracker, type NPOTag } from '@npotag/tag';
+import { type StreamTracker, type NPOTag, type PageTracker } from '@npotag/tag';
 import { type InitialisationProps } from '@npotag/tag/dist/types/src/npoTag';
 import { type PlayerAPI, type PlayerConfig, type SourceConfig } from 'bitmovin-player';
 import { UIManager } from 'bitmovin-player-ui';
@@ -7,12 +7,15 @@ import { LogEmitter } from './types/classes';
 import { type DRMProfile, type ApiPayload, type NPOTagObject, type StreamObject, type StreamOptions, type UIComponents, type TimeLineMarker, type LocalStorageData, type PlayerContext, type EventListeners, NpoPlayerUIVariants } from './types/interfaces';
 export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants };
 export default class NpoPlayer {
-    playerConfig: PlayerConfig;
+    playerConfig: PlayerConfig | undefined;
     sourceConfig: SourceConfig;
     streamObject: StreamObject;
     player: PlayerAPI | undefined;
     uiManager: UIManager | undefined;
     npoTag: NPOTagObject | undefined;
+    npoTagInitialisation: InitialisationProps | undefined;
+    npoTagInstance: NPOTag | undefined;
+    npoTagPageTracker: PageTracker | undefined;
     streamTracker: StreamTracker | undefined;
     logEmitter: LogEmitter;
     uiComponents: UIComponents;
@@ -31,7 +34,14 @@ export default class NpoPlayer {
     eventListeners: EventListeners | undefined;
     mockNpoPlayer: any;
     userPreferences: LocalStorageData;
-    constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | undefined, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
+    constructor(container: HTMLElement | {
+        container: HTMLElement;
+        playerConfig: PlayerConfig;
+        npoTag?: InitialisationProps | undefined;
+        npoTagInstance?: NPOTag | undefined;
+        variant?: NpoPlayerUIVariants;
+        npoTagPageTracker?: PageTracker | undefined;
+    }, playerConfig?: PlayerConfig | undefined, npoTag?: InitialisationProps | undefined, npoTagInstance?: NPOTag | undefined, variant?: NpoPlayerUIVariants, npoTagPageTracker?: PageTracker | undefined);
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
     doError(input: any, status?: number): void;

package/lib/src/services/nicamHandlers/nicamhandler.d.ts

@@ -0,0 +1,6 @@
+import { UIManager } from 'bitmovin-player-ui';
+import { PlayerContext } from '../../types/interfaces';
+export declare function processNicam(playerContext: PlayerContext, nicamElement: HTMLElement | undefined): void;
+export declare function addNicamIcon(character: string, nicamElement: Element): void;
+export declare function showNicamAfterUiDelay(playerContext: PlayerContext, uiManager: UIManager | undefined): void;
+export declare function setupNicamKijkwijzerIcons(playerContext: PlayerContext): void;

package/lib/src/services/nicamHandlers/nicamhandler.test.d.ts

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

package/lib/src/services/npoPlayerAPI/npoPlayerAPI.d.ts

@@ -25,6 +25,7 @@ export declare class NpoPlayerAPI {
     getSupportedTech(): Technology[];
     off(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     on(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
+    isCastAvailable(): boolean;
     seek(time: number): void;
     timeShift(time: number): void;
     getContainer(): HTMLElement;

package/lib/src/services/services.d.ts

@@ -1,5 +1,6 @@
 import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, NpoPlayerUIVariants } from '../types/interfaces';
 import { AVType } from '@npotag/tag/dist/types/src/streamTracker';
+import { UIManager } from 'bitmovin-player-ui';
 export declare class NpoPlayerServices {
     getAVType(avType: string): AVType;
     keyboardHandler(playerContext: PlayerContext, e: KeyboardEvent): void;
@@ -13,4 +14,6 @@ export declare class NpoPlayerServices {
     setAccessibilityAttributes(playerContext: PlayerContext): void;
     schedulePreRolls(playerContext: PlayerContext): Promise<void>;
     handleVerticalVideoControls(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void;
+    showNicamAfterUiDelay(playerContext: PlayerContext | undefined, uiManager: UIManager | undefined): void;
+    setupNicamKijkwijzerIcons(playerContext: PlayerContext): void;
 }

package/lib/src/services/streamoptionsHandlers/steamOptionsHandler.d.ts

@@ -0,0 +1,6 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function handleStreamOptions(playerContext: PlayerContext): void;
+export declare function initializeFragment(playerContext: PlayerContext): void;
+export declare function handleStartOffset(playerContext: PlayerContext): void;
+export declare function updateStreamClasses(playerContext: PlayerContext): void;
+export declare function setupAutoplay(playerContext: PlayerContext): void;

package/lib/src/services/streamoptionsHandlers/streamOptionsHandler.test.d.ts

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

package/lib/src/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 { GoogleCastRemoteControlConfig, SourceConfig } from 'bitmovin-player';
 export { Technology } from 'bitmovin-player';
 export interface Profile {
     profileName: string;
@@ -200,3 +200,4 @@ export declare enum LocalStorageValues {
     SUBTITLES_ENABLED = "subtitles_enabled"
 }
 export type LocalStorageData = Partial<Record<LocalStorageValues, string | number>>;
+export type NPOGoogleCastRemoteControlConfig = GoogleCastRemoteControlConfig;

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

@@ -1,12 +1,13 @@
 import { type PlayerAPI } from 'bitmovin-player';
 import { Button, ControlBar } 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';
+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;
 }>;
@@ -15,12 +16,14 @@ export declare function createPlayNextButton(player: PlayerAPI, npoplayer: NpoPl
     text: string;
     ariaLabel: string;
     hidden: false;
+    acceptsTouchWithUiHidden: true;
 }>;
 export declare function createCancelPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
     cssClass: string;
     text: string;
     ariaLabel: string;
     hidden: false;
+    acceptsTouchWithUiHidden: true;
 }>;
 export declare function createskipIntroButton(player: PlayerAPI): Button<{
     cssClass: string;

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 { PlayerContext } from '../../types/interfaces';
+export declare function createControlBar(playerContext: PlayerContext): ControlBar;

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

@@ -7,6 +7,7 @@ export declare function createPlayNextScreen(player: PlayerAPI, npoplayer: NpoPl
         text: string;
         ariaLabel: string;
         hidden: false;
+        acceptsTouchWithUiHidden: true;
     }>[];
     cssClasses: string[];
 }>;

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/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/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]

package/lib/tests/mocks/playerContextMock.js

@@ -32,6 +32,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(),

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 { GoogleCastRemoteControlConfig, SourceConfig } from 'bitmovin-player';
 export { Technology } from 'bitmovin-player';
 export interface Profile {
     profileName: string;
@@ -200,3 +200,4 @@ export declare enum LocalStorageValues {
     SUBTITLES_ENABLED = "subtitles_enabled"
 }
 export type LocalStorageData = Partial<Record<LocalStorageValues, string | number>>;
+export type NPOGoogleCastRemoteControlConfig = GoogleCastRemoteControlConfig;

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

@@ -1,12 +1,13 @@
 import { type PlayerAPI } from 'bitmovin-player';
 import { Button, ControlBar } 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';
+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;
 }>;
@@ -15,12 +16,14 @@ export declare function createPlayNextButton(player: PlayerAPI, npoplayer: NpoPl
     text: string;
     ariaLabel: string;
     hidden: false;
+    acceptsTouchWithUiHidden: true;
 }>;
 export declare function createCancelPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
     cssClass: string;
     text: string;
     ariaLabel: string;
     hidden: false;
+    acceptsTouchWithUiHidden: true;
 }>;
 export declare function createskipIntroButton(player: PlayerAPI): Button<{
     cssClass: string;

package/lib/ui/components/buttons.js

@@ -1,38 +1,36 @@
 import { Button, PlaybackToggleButton, ControlBar } from 'bitmovin-player-ui';
 import { rewind, forward } from '../handlers/timecontrolhandlers';
-export function createMiddleButtons(player) {
+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) {
@@ -40,7 +38,8 @@ export function createPlayNextButton(player, npoplayer) {
         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) {
@@ -54,7 +53,8 @@ export function createCancelPlayNextButton(player, npoplayer) {
         cssClass: 'ui-textbutton ui-cancelPlayNextButton bmpui-ui-button',
         text: 'Annuleer',
         ariaLabel: 'Annuleer',
-        hidden: false
+        hidden: false,
+        acceptsTouchWithUiHidden: true
     });
     cancelPlayNextButton.onClick.subscribe(() => {
         if (player != undefined) {