@npo/player 1.27.7 → 1.28.0

package/lib/src/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/src/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/src/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>;

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

@@ -0,0 +1,3 @@
+import { Container, ContainerConfig } from 'bitmovin-player-ui';
+import { PlayerContext } from '../../../types/interfaces';
+export declare function createInfoPanel(playerContext: PlayerContext): Container<ContainerConfig>;

package/lib/src/ui/components/infopanel/togglebutton.d.ts

@@ -0,0 +1,3 @@
+import { ToggleButton, ToggleButtonConfig } from 'bitmovin-player-ui';
+import { PlayerContext } from 'types/interfaces';
+export declare function createInfoPanelToggleButton(playerContext: PlayerContext): ToggleButton<ToggleButtonConfig>;

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

@@ -1,10 +1,4 @@
 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<{
-    components: import("bitmovin-player-ui").Button<{
-        cssClass: string;
-        ariaLabel: string;
-    }>[];
-    cssClasses: string[];
-}>;
+import { ContainerConfig } from 'bitmovin-player-ui/dist/js/framework/components/container';
+import { PlayerContext } from '../../types/interfaces';
+export declare function createPlayNextScreen(playerContext: PlayerContext): Container<ContainerConfig>;

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

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

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

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

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

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

@@ -1,3 +1,3 @@
-import { StreamObject } from 'types/interfaces';
-import { PlayerAPI } from 'bitmovin-player';
+import { StreamObject } from '../../types/interfaces';
+import { PlayerAPI } from 'bitmovin-player/modules/bitmovinplayer-core';
 export declare function handleLiveStreamNoDvr(player: PlayerAPI, streamObject: StreamObject): void;

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

@@ -1,5 +1,19 @@
-import { type PlayerAPI } from 'bitmovin-player';
 import { type SettingsPanel, type SettingsPanelPage, type SettingsPanelPageOpenButton } from 'bitmovin-player-ui';
-export declare function handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (e: any) => void;
-export declare function handleSpeedListBoxItemSelected(player: PlayerAPI, speedSettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (source: any, args: any) => void;
-export declare function handleQualityListBoxItemSelected(player: PlayerAPI, qualitySettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (source: any, args: any) => void;
+import { PlayerContext } from 'types/interfaces';
+export declare function handleSubtitleListBoxItemSelected({ subtitleSettingsOpenButton, settingsPanel, mainSettingsPage }: {
+    subtitleSettingsOpenButton: SettingsPanelPageOpenButton;
+    settingsPanel: SettingsPanel;
+    mainSettingsPage: SettingsPanelPage;
+}): (e: any) => void;
+export declare function handleSpeedListBoxItemSelected({ playerContext, speedSettingsOpenButton, settingsPanel, mainSettingsPage }: {
+    playerContext: PlayerContext;
+    speedSettingsOpenButton: SettingsPanelPageOpenButton;
+    settingsPanel: SettingsPanel;
+    mainSettingsPage: SettingsPanelPage;
+}): (source: any, args: any) => void;
+export declare function handleQualityListBoxItemSelected({ playerContext, qualitySettingsOpenButton, settingsPanel, mainSettingsPage }: {
+    playerContext: PlayerContext;
+    qualitySettingsOpenButton: SettingsPanelPageOpenButton;
+    settingsPanel: SettingsPanel;
+    mainSettingsPage: SettingsPanelPage;
+}): (source: any, args: any) => void;

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

@@ -1,2 +1,6 @@
-export declare function showPlayNextScreenIfNeeded(overlayDuration: number, containerEl: HTMLElement, proceedCallBack?: () => void): void;
-export declare function hidePlayNextScreen(containerEl: HTMLElement): void;
+export declare function showPlayNextScreenIfNeeded({ overlayDuration, container, proceedCallBack }: {
+    overlayDuration: number;
+    container: HTMLElement;
+    proceedCallBack?: () => void;
+}): void;
+export declare function hidePlayNextScreen(container: HTMLElement): void;

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

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

package/lib/tests/jest.setup-files-after-env.js

@@ -0,0 +1,6 @@
+"use strict";
+global.console = {
+    ...console,
+    error: jest.fn(),
+    warn: jest.fn()
+};

package/lib/tests/jest.setup-tests.d.ts

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

package/lib/tests/jest.setup-tests.js

@@ -0,0 +1,2 @@
+import { TextEncoder, TextDecoder } from 'util';
+Object.assign(global, { TextDecoder, TextEncoder });

package/lib/tests/mocks/mockNpoplayer.js

@@ -7,6 +7,14 @@ const settingsPanelMock = {
     settingsPanelEvents: jest.fn(),
     hideTimeout: jest.fn()
 };
+const infoPanelMock = {
+    hide: jest.fn(),
+    isShown: jest.fn().mockReturnValue(true)
+};
+const infoPanelToggleButtonMock = {
+    off: jest.fn(),
+    isOn: jest.fn().mockReturnValue(true)
+};
 export const mockNpoPlayer = {
     playerConfig: {
         key: jest.fn().mockReturnValue('mock-key'),
@@ -35,7 +43,10 @@ export const mockNpoPlayer = {
     npoTagPageTracker: undefined,
     logEmitter: {},
     uiComponents: {
-        settingsPanels: [settingsPanelMock, settingsPanelMock]
+        settingsPanels: [settingsPanelMock, settingsPanelMock],
+        infoPanel: infoPanelMock,
+        infoPanelToggleButtons: [infoPanelToggleButtonMock, infoPanelToggleButtonMock],
+        skipChapterButton: undefined
     },
     container: document.createElement('div'),
     initPlayer: jest.fn(),
@@ -69,54 +80,26 @@ export const mockNpoPlayer = {
     playerContext: {},
     isShowingPlayNextScreen: false,
     eventListeners: undefined,
-    setVolume: function (volume) {
-        jest.fn();
-    },
-    increaseVolume: function () {
-        jest.fn();
-    },
-    decreaseVolume: function () {
-        jest.fn();
-    },
-    goForward: function (seconds) {
-        jest.fn();
-    },
-    goBackwards: function (seconds) {
-        jest.fn();
-    },
-    watchFromStart: function () {
-        jest.fn();
-    },
-    showPlayNextScreen: function () {
-        jest.fn();
-    },
-    cancelPlayNextScreen: function () {
-        jest.fn();
-    },
-    hidePlayNextScreen: function () {
-        jest.fn();
-    },
-    doPlayNext: function () {
-        jest.fn();
-    },
-    destroy: function (asyncMode) {
-        throw new Error('Function not implemented.');
-    },
-    unload: function (asyncMode) {
-        throw new Error('Function not implemented.');
-    },
-    printVersion: function () {
-        jest.fn();
-    },
+    setVolume: jest.fn(),
+    increaseVolume: jest.fn(),
+    decreaseVolume: jest.fn(),
+    goForward: jest.fn(),
+    goBackwards: jest.fn(),
+    watchFromStart: jest.fn(),
+    showPlayNextScreen: jest.fn(),
+    cancelPlayNextScreen: jest.fn(),
+    hidePlayNextScreen: jest.fn(),
+    doPlayNext: jest.fn(),
+    destroy: jest.fn().mockResolvedValue(true),
+    unload: jest.fn().mockResolvedValue(true),
+    printVersion: jest.fn(),
     play: function () {
         throw new Error('Function not implemented.');
     },
     pause: function () {
         throw new Error('Function not implemented.');
     },
-    updateMarkers: function () {
-        jest.fn();
-    },
+    updateMarkers: jest.fn(),
     npoPlayerServices: new NpoPlayerServices(),
-    mockNpoPlayer: undefined
+    chapterHandler: undefined
 };

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

@@ -1,3 +1,3 @@
 /// <reference types="jest" />
-import { PlayerAPI } from 'bitmovin-player';
+import { PlayerAPI } from 'bitmovin-player/modules/bitmovinplayer-core';
 export declare const mockPlayerAPI: jest.Mocked<PlayerAPI>;

package/lib/tests/mocks/mockPlayerAPI.js

@@ -1,5 +1,19 @@
-import { AdQuartile, PlayerError, ModuleName, ErrorCode, BufferType, HttpRequestMethod, HttpRequestType, HttpResponseType, LogLevel, MediaType, PlayerAPINotAvailableError, PlayerEvent, PlayerModuleMissingError, PlayerType, SupportedTechnologyMode, ViewMode, WarningCode } from 'bitmovin-player';
+import { AdQuartile, PlayerError, ModuleName, ErrorCode, BufferType, HttpRequestMethod, HttpRequestType, HttpResponseType, LogLevel, MediaType, PlayerAPINotAvailableError, PlayerEvent, PlayerModuleMissingError, PlayerType, SupportedTechnologyMode, ViewMode, WarningCode } from 'bitmovin-player/modules/bitmovinplayer-core';
 export const mockPlayerAPI = {
+    analytics: {
+        version: '1.0',
+        getCurrentImpressionId: jest.fn(() => 'test-impression-id'),
+        getUserId: jest.fn(() => 'test-user-id'),
+        setCustomData: jest.fn(),
+        setCustomDataOnce: jest.fn(),
+        sourceChange: jest.fn(),
+        ssai: {
+            adBreakStart: jest.fn(),
+            adStart: jest.fn(),
+            adQuartileFinished: jest.fn(),
+            adBreakEnd: jest.fn()
+        }
+    },
     version: '1.0',
     buffer: {
         setTargetLevel: jest.fn(),

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

@@ -0,0 +1,64 @@
+/// <reference types="jest" />
+export declare const mockPlayerUtils: {
+    PlayerState: {
+        Idle: string;
+        Playing: string;
+        Paused: string;
+        Buffering: string;
+        Finished: string;
+        Error: string;
+    };
+};
+export declare const mockPlayerUi: {
+    UIManager: {
+        new (): {
+            getTimelineMarkers: jest.Mock<any, any, any>;
+            removeTimelineMarker: jest.Mock<any, any, any>;
+        };
+        setLocalizationConfig: jest.Mock<any, any, any>;
+    };
+    PlaybackToggleButton: jest.Mock<any, any, any>;
+    VolumeToggleButton: jest.Mock<any, any, any>;
+    AirPlayToggleButton: jest.Mock<any, any, any>;
+    PictureInPictureToggleButton: jest.Mock<any, any, any>;
+    FullscreenToggleButton: jest.Mock<any, any, any>;
+    SettingsToggleButton: jest.Mock<any, any, any>;
+    ControlBar: jest.Mock<any, any, any>;
+    Container: jest.Mock<any, any, any>;
+    Label: jest.Mock<any, any, any>;
+    SettingsPanel: jest.Mock<any, any, any>;
+    SubtitleListBox: jest.Mock<any, any, any>;
+    ListBox: jest.Mock<any, any, any>;
+    SettingsPanelItem: jest.Mock<any, any, any>;
+    AudioQualitySelectBox: jest.Mock<any, any, any>;
+    AudioTrackSelectBox: jest.Mock<any, any, any>;
+    SettingsPanelPage: jest.Mock<any, any, any>;
+    SettingsPanelPageOpenButton: jest.Mock<any, any, any>;
+    SettingsPanelPageBackButton: jest.Mock<any, any, any>;
+    TitleBar: jest.Mock<any, any, any>;
+    SeekBar: jest.Mock<any, any, any>;
+    SeekBarLabel: jest.Mock<any, any, any>;
+    PlaybackTimeLabel: jest.Mock<any, any, any>;
+    PlaybackTimeLabelMode: {
+        CurrentTime: number;
+        TotalTime: number;
+    };
+    VolumeSlider: jest.Mock<any, any, any>;
+    Spacer: jest.Mock<any, any, any>;
+    ErrorMessageOverlay: jest.Mock<any, any, any>;
+    SubtitleOverlay: jest.Mock<any, any, any>;
+    BufferingOverlay: jest.Mock<any, any, any>;
+    CastStatusOverlay: jest.Mock<any, any, any>;
+    PlaybackToggleOverlay: jest.Mock<any, any, any>;
+    UIContainer: jest.Mock<any, any, any>;
+    PlayerUtils: {
+        PlayerState: {
+            Idle: string;
+            Playing: string;
+            Paused: string;
+            Buffering: string;
+            Finished: string;
+            Error: string;
+        };
+    };
+};

package/lib/tests/mocks/mockPlayerUi.js

@@ -0,0 +1,251 @@
+var _a;
+export const mockPlayerUtils = {
+    PlayerState: {
+        Idle: 'idle',
+        Playing: 'playing',
+        Paused: 'paused',
+        Buffering: 'buffering',
+        Finished: 'finished',
+        Error: 'error'
+    }
+};
+export const mockPlayerUi = {
+    UIManager: (_a = class {
+            constructor() {
+                this.getTimelineMarkers = jest.fn().mockReturnValue([]);
+                this.removeTimelineMarker = jest.fn();
+            }
+        },
+        _a.setLocalizationConfig = jest.fn(),
+        _a),
+    PlaybackToggleButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        },
+        PlaybackToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+            isOn: jest.fn(),
+        })),
+        Button: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+        })),
+        CastToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+            isOn: jest.fn(),
+        })),
+        VolumeToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+        })),
+        AirPlayToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+            isOn: jest.fn(),
+        })),
+        PictureInPictureToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+        })),
+        FullscreenToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+        })),
+        SettingsToggleButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+            off: jest.fn(),
+        })),
+        ControlBar: jest.fn().mockImplementation(() => ({})),
+        Container: jest.fn().mockImplementation(() => ({
+            addComponent: jest.fn(),
+        })),
+        Label: jest.fn().mockImplementation(() => ({})),
+        SettingsPanel: jest.fn().mockImplementation(() => ({
+            hide: jest.fn(),
+            onHide: {
+                subscribe: jest.fn(),
+            },
+            onShow: {
+                subscribe: jest.fn(),
+            },
+            isShown: jest.fn(),
+            addComponent: jest.fn(),
+        })),
+        SubtitleListBox: jest.fn().mockImplementation(() => ({
+            onItemSelected: {
+                subscribe: jest.fn(),
+            },
+        })),
+        ListBox: jest.fn().mockImplementation(() => ({
+            onItemSelected: {
+                subscribe: jest.fn(),
+            },
+            selectItem: jest.fn(),
+            addItem: jest.fn(),
+            clearItems: jest.fn(),
+        })),
+        SettingsPanelItem: jest.fn().mockImplementation(() => ({
+            show: jest.fn(),
+            hide: jest.fn(),
+        })),
+        AudioQualitySelectBox: jest.fn().mockImplementation(() => ({})),
+        AudioTrackSelectBox: jest.fn().mockImplementation(() => ({})),
+        SettingsPanelPage: jest.fn().mockImplementation(() => ({
+            onActive: {
+                subscribeOnce: jest.fn(),
+            },
+            addComponent: jest.fn(),
+        })),
+        SettingsPanelPageOpenButton: jest.fn().mockImplementation(() => ({})),
+        SettingsPanelPageBackButton: jest.fn().mockImplementation(() => ({
+            onClick: {
+                unsubscribe: jest.fn(),
+                subscribe: jest.fn(),
+            },
+            off: jest.fn(),
+        })),
+        TitleBar: jest.fn().mockImplementation(() => ({
+            addComponent: jest.fn(),
+        })),
+        SeekBar: jest.fn().mockImplementation(() => ({})),
+        SeekBarLabel: jest.fn().mockImplementation(() => ({})),
+        PlaybackTimeLabel: jest.fn().mockImplementation(({ timeLabelMode }) => ({
+            timeLabelMode,
+            hideInLivePlayback: jest.fn(),
+        })),
+        PlaybackTimeLabelMode: {
+            CurrentTime: 0,
+            TotalTime: 100,
+        },
+        isOn: jest.fn()
+    })),
+    VolumeToggleButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        }
+    })),
+    AirPlayToggleButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        },
+        isOn: jest.fn()
+    })),
+    PictureInPictureToggleButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        }
+    })),
+    FullscreenToggleButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        }
+    })),
+    SettingsToggleButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        },
+        off: jest.fn()
+    })),
+    ControlBar: jest.fn().mockImplementation(() => ({})),
+    Container: jest.fn().mockImplementation(() => ({
+        addComponent: jest.fn()
+    })),
+    Label: jest.fn().mockImplementation(() => ({})),
+    SettingsPanel: jest.fn().mockImplementation(() => ({
+        hide: jest.fn(),
+        onHide: {
+            subscribe: jest.fn()
+        },
+        onShow: {
+            subscribe: jest.fn()
+        },
+        isShown: jest.fn(),
+        addComponent: jest.fn()
+    })),
+    SubtitleListBox: jest.fn().mockImplementation(() => ({
+        onItemSelected: {
+            subscribe: jest.fn()
+        }
+    })),
+    ListBox: jest.fn().mockImplementation(() => ({
+        onItemSelected: {
+            subscribe: jest.fn()
+        },
+        selectItem: jest.fn(),
+        addItem: jest.fn()
+    })),
+    SettingsPanelItem: jest.fn().mockImplementation(() => ({
+        show: jest.fn(),
+        hide: jest.fn()
+    })),
+    AudioQualitySelectBox: jest.fn().mockImplementation(() => ({})),
+    AudioTrackSelectBox: jest.fn().mockImplementation(() => ({})),
+    SettingsPanelPage: jest.fn().mockImplementation(() => ({
+        onActive: {
+            subscribeOnce: jest.fn()
+        },
+        addComponent: jest.fn()
+    })),
+    SettingsPanelPageOpenButton: jest.fn().mockImplementation(() => ({})),
+    SettingsPanelPageBackButton: jest.fn().mockImplementation(() => ({
+        onClick: {
+            unsubscribe: jest.fn(),
+            subscribe: jest.fn()
+        },
+        off: jest.fn()
+    })),
+    TitleBar: jest.fn().mockImplementation(() => ({
+        addComponent: jest.fn()
+    })),
+    SeekBar: jest.fn().mockImplementation(() => ({})),
+    SeekBarLabel: jest.fn().mockImplementation(() => ({})),
+    PlaybackTimeLabel: jest.fn().mockImplementation(({ timeLabelMode }) => ({
+        timeLabelMode,
+        hideInLivePlayback: jest.fn()
+    })),
+    PlaybackTimeLabelMode: {
+        CurrentTime: 0,
+        TotalTime: 100
+    },
+    VolumeSlider: jest.fn().mockImplementation(() => ({})),
+    Spacer: jest.fn().mockImplementation(() => ({})),
+    ErrorMessageOverlay: jest.fn().mockImplementation(() => ({})),
+    SubtitleOverlay: jest.fn().mockImplementation(() => ({})),
+    BufferingOverlay: jest.fn().mockImplementation(() => ({})),
+    CastStatusOverlay: jest.fn().mockImplementation(() => ({})),
+    PlaybackToggleOverlay: jest.fn().mockImplementation(() => ({})),
+    UIContainer: jest.fn().mockImplementation(() => ({
+        components: [],
+        addComponent: jest.fn(),
+        cssClasses: [],
+        hidePlayerStateExceptions: jest.fn()
+    })),
+    PlayerUtils: {
+        PlayerState: mockPlayerUtils.PlayerState
+    }
+};