@npo/player 1.26.0 → 1.27.0

package/lib/services/trackingHandlers/streamTrackerInit.test.js

@@ -0,0 +1,84 @@
+import { initStreamTracker } from './streamTrackerInit';
+import { newStreamTracker } from '@npotag/tag';
+jest.mock('@npotag/tag', () => ({
+    newATInternetPlugin: jest.fn(),
+    newStreamTracker: jest.fn().mockImplementation(() => {
+        return {};
+    }),
+    newGovoltePlugin: jest.fn(),
+    newPageTracker: jest.fn(),
+    newTag: jest.fn()
+}));
+jest.mock('../../js/utilities/utilities.stream', () => ({
+    validatePrid: jest.fn().mockReturnValue('valid-prid')
+}));
+describe('initStreamTracker', () => {
+    let playerContextMock;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        playerContextMock = {
+            npoPlayer: {
+                streamTracker: undefined,
+                npoTag: {
+                    npoTagInstance: { foo: 'bar' },
+                    pageTracker: { foo: 'bar' }
+                },
+                npoPlayerServices: { getAVType: jest.fn().mockReturnValue('video') },
+                version: '1.0.0',
+                streamObject: { stream: { isLiveStream: true, avType: 'video' } }
+            }
+        };
+    });
+    it('should create a new StreamTracker with correct configuration', () => {
+        const streamTracker = initStreamTracker({
+            playerContext: playerContextMock,
+            duration: 100,
+            source: 'source'
+        });
+        expect(streamTracker).toBeDefined();
+        expect(newStreamTracker).toHaveBeenCalledWith(playerContextMock.npoPlayer.npoTag.pageTracker, expect.objectContaining({
+            stream_length: 100,
+            stream_id: 'valid-prid',
+            player_id: 'npoplayer-web',
+            av_type: 'video',
+            player_version: '1.0.0',
+            sko_player_version: '1.0.0'
+        }), { isLive: true });
+    });
+    it('should throw an error if npoTagInstance is not available', () => {
+        console.error = jest.fn();
+        const playerContextWithoutTagInstance = {
+            ...playerContextMock,
+            npoPlayer: {
+                ...playerContextMock.npoPlayer,
+                npoTag: { npoTagInstance: undefined, pageTracker: { foo: 'bar' } }
+            }
+        };
+        expect(() => {
+            initStreamTracker({
+                playerContext: playerContextWithoutTagInstance,
+                duration: 100,
+                source: 'source'
+            });
+        }).toThrowError('No npoTagInstance available. Could not create streamtracker.');
+        expect(newStreamTracker).not.toHaveBeenCalled();
+    });
+    it('should throw an error if pageTracker is not available', () => {
+        console.error = jest.fn();
+        const playerContextWithoutTracker = {
+            ...playerContextMock,
+            npoPlayer: {
+                ...playerContextMock.npoPlayer,
+                npoTag: { npoTagInstance: { foo: 'bar' }, pageTracker: undefined }
+            }
+        };
+        expect(() => {
+            initStreamTracker({
+                playerContext: playerContextWithoutTracker,
+                duration: 100,
+                source: 'source'
+            });
+        }).toThrowError('No pageTracker available. Could not create streamtracker.');
+        expect(newStreamTracker).not.toHaveBeenCalled();
+    });
+});

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.d.ts

@@ -1,2 +1,2 @@
-import { PlayerContext, NpoPlayerUIVariants } from '../../types/interfaces';
-export declare const handleVerticalVideoControls: (playerContext: PlayerContext, variant: NpoPlayerUIVariants) => void;
+import { PlayerContext } from '../../types/interfaces';
+export declare const handleVerticalVideoControls: (playerContext: PlayerContext) => void;

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.js

@@ -1,8 +1,6 @@
-import { NpoPlayerUIVariants } from '../../types/interfaces';
-export const handleVerticalVideoControls = (playerContext, variant) => {
+export const handleVerticalVideoControls = (playerContext) => {
+    const { player } = playerContext;
     const MAX_DURATION_IN_SECONDS = 30;
-    const isShortVideo = playerContext.player.getDuration() <= MAX_DURATION_IN_SECONDS;
-    const hasVerticalUI = variant === NpoPlayerUIVariants.VERTICAL;
-    const isVerticalShortVideo = hasVerticalUI && isShortVideo;
-    playerContext.player.toggleClassOnNpoPlayerElement('vertical-short-video', isVerticalShortVideo);
+    const isShortVideo = player.getDuration() <= MAX_DURATION_IN_SECONDS;
+    player.toggleClassOnNpoPlayerElement('vertical-short-video', isShortVideo);
 };

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.test.js

@@ -1,4 +1,3 @@
-import { NpoPlayerUIVariants } from '../../types/interfaces';
 import { handleVerticalVideoControls } from './handleVerticalVideoControls';
 import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
 describe('handleVerticalVideoControls', () => {
@@ -9,28 +8,16 @@ describe('handleVerticalVideoControls', () => {
     beforeEach(() => {
         jest.clearAllMocks();
     });
-    test('should add vertical-short-video class for vertical UI and short video', () => {
+    test('should add vertical-short-video class for short video', () => {
         ;
         playerContextMock.player.getDuration.mockReturnValue(shortVideoDuration);
-        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.VERTICAL);
+        handleVerticalVideoControls(playerContextMock);
         expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, true);
     });
-    test('should not add vertical-short-video class for vertical UI and long video', () => {
+    test('should not add vertical-short-video class for long video', () => {
         ;
         playerContextMock.player.getDuration.mockReturnValue(longVideoDuration);
-        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.VERTICAL);
-        expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, false);
-    });
-    test('should not add vertical-short-video class for non-vertical UI and short video', () => {
-        ;
-        playerContextMock.player.getDuration.mockReturnValue(shortVideoDuration);
-        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.DEFAULT);
-        expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, false);
-    });
-    test('should not add vertical-short-video class for non-vertical UI and long video', () => {
-        ;
-        playerContextMock.player.getDuration.mockReturnValue(longVideoDuration);
-        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.DEFAULT);
+        handleVerticalVideoControls(playerContextMock);
         expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, false);
     });
 });

package/lib/services/verticalVideoHandlers/handleVerticalVideoSettings.d.ts

@@ -0,0 +1,2 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function handleVerticalVideoSettings(playerContext: PlayerContext): void;

package/lib/services/verticalVideoHandlers/handleVerticalVideoSettings.js

@@ -0,0 +1,26 @@
+import { NpoPlayerEvent } from '../../types/events';
+export function handleVerticalVideoSettings(playerContext) {
+    const { npoPlayer, player } = playerContext;
+    const { settingsPanel, settingsToggleButton } = npoPlayer.uiComponents;
+    if (!player || !settingsPanel || !settingsToggleButton)
+        return;
+    const hideSettingsElements = () => {
+        hideSettingsPanel();
+        settingsToggleButton.hide();
+    };
+    const checkSubtitles = () => {
+        const subtitles = npoPlayer.player?.subtitles?.list() || [];
+        subtitles.length > 0 ? settingsToggleButton.show() : hideSettingsElements();
+    };
+    const hideSettingsPanel = () => settingsPanel.hide();
+    player.off(NpoPlayerEvent.Ready, checkSubtitles);
+    player.off(NpoPlayerEvent.SourceLoaded, checkSubtitles);
+    player.off(NpoPlayerEvent.SourceUnloaded, hideSettingsElements);
+    player.off(NpoPlayerEvent.SubtitleDisable, hideSettingsPanel);
+    player.off(NpoPlayerEvent.SubtitleEnable, hideSettingsPanel);
+    player.on(NpoPlayerEvent.Ready, checkSubtitles);
+    player.on(NpoPlayerEvent.SourceLoaded, checkSubtitles);
+    player.on(NpoPlayerEvent.SourceUnloaded, hideSettingsElements);
+    player.on(NpoPlayerEvent.SubtitleDisable, hideSettingsPanel);
+    player.on(NpoPlayerEvent.SubtitleEnable, hideSettingsPanel);
+}

package/lib/services/verticalVideoHandlers/handleVerticalVideoSettings.test.js

@@ -0,0 +1,82 @@
+import { handleVerticalVideoSettings } from './handleVerticalVideoSettings';
+import { NpoPlayerEvent } from '../../types/events';
+import { createMockNpoPlayer, createPlayerContextMock } from '../../../tests/mocks/playerContextMock';
+jest.mock('bitmovin-player', () => ({
+    PlayerEvent: {
+        Ready: 'ready',
+        SourceLoaded: 'sourceLoaded',
+        SourceUnloaded: 'sourceUnloaded',
+        SubtitleDisable: 'subtitleDisable',
+        SubtitleEnable: 'subtitleEnable'
+    }
+}));
+describe('handleVerticalVideoSettings', () => {
+    let playerContextMock;
+    let mockAddEventListener;
+    let mockRemoveEventListener;
+    beforeEach(() => {
+        mockAddEventListener = jest.fn();
+        mockRemoveEventListener = jest.fn();
+        playerContextMock = createPlayerContextMock({
+            npoPlayer: createMockNpoPlayer({
+                uiComponents: {
+                    settingsPanel: {
+                        hide: jest.fn()
+                    },
+                    settingsToggleButton: {
+                        show: jest.fn(),
+                        hide: jest.fn()
+                    }
+                },
+                player: {
+                    subtitles: {
+                        list: jest.fn().mockReturnValue([{ id: 'en', language: 'English', enabled: false }])
+                    }
+                }
+            }),
+            player: {
+                on: mockAddEventListener,
+                off: mockRemoveEventListener
+            }
+        });
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should register event listeners on the player', () => {
+        handleVerticalVideoSettings(playerContextMock);
+        expect(mockAddEventListener).toHaveBeenCalledTimes(5);
+        expect(mockAddEventListener).toHaveBeenCalledWith(NpoPlayerEvent.Ready, expect.any(Function));
+        expect(mockAddEventListener).toHaveBeenCalledWith(NpoPlayerEvent.SourceLoaded, expect.any(Function));
+        expect(mockAddEventListener).toHaveBeenCalledWith(NpoPlayerEvent.SourceUnloaded, expect.any(Function));
+        expect(mockAddEventListener).toHaveBeenCalledWith(NpoPlayerEvent.SubtitleDisable, expect.any(Function));
+        expect(mockAddEventListener).toHaveBeenCalledWith(NpoPlayerEvent.SubtitleEnable, expect.any(Function));
+    });
+    it('should show the settingsToggleButton if subtitles are available', () => {
+        handleVerticalVideoSettings(playerContextMock);
+        const checkSubtitles = mockAddEventListener.mock.calls.find(([event]) => event === NpoPlayerEvent.Ready)[1];
+        checkSubtitles();
+        expect(playerContextMock.npoPlayer.uiComponents.settingsToggleButton?.show).toHaveBeenCalled();
+        expect(playerContextMock.npoPlayer.uiComponents.settingsToggleButton?.hide).not.toHaveBeenCalled();
+    });
+    it('should hide settings elements if no subtitles are available', () => {
+        expect(playerContextMock.npoPlayer.player).toBeDefined();
+        if (!playerContextMock.npoPlayer.player)
+            return;
+        playerContextMock.npoPlayer.player.subtitles.list = jest.fn().mockReturnValue([]);
+        handleVerticalVideoSettings(playerContextMock);
+        const checkSubtitles = mockAddEventListener.mock.calls.find(([event]) => event === NpoPlayerEvent.Ready)[1];
+        checkSubtitles();
+        expect(playerContextMock.npoPlayer.uiComponents.settingsToggleButton?.hide).toHaveBeenCalled();
+        expect(playerContextMock.npoPlayer.uiComponents.settingsPanel?.hide).toHaveBeenCalled();
+    });
+    it('should hide settingsPanel on SubtitleDisable or SubtitleEnable', () => {
+        handleVerticalVideoSettings(playerContextMock);
+        const handleSubtitleDisable = mockAddEventListener.mock.calls.find(([event]) => event === NpoPlayerEvent.SubtitleDisable)[1];
+        handleSubtitleDisable();
+        expect(playerContextMock.npoPlayer.uiComponents.settingsPanel?.hide).toHaveBeenCalled();
+        const handleSubtitleEnable = mockAddEventListener.mock.calls.find(([event]) => event === NpoPlayerEvent.SubtitleEnable)[1];
+        handleSubtitleEnable();
+        expect(playerContextMock.npoPlayer.uiComponents.settingsPanel?.hide).toHaveBeenCalledTimes(2);
+    });
+});

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

@@ -1,4 +1,3 @@
 export { handleStartOffset, handleLiveOffsetLogic, shiftToProgramStart } from './handlers/handleoffsets';
-export { handlePlayerError } from './handlers/error';
 export { processPlayerConfig } from './handlers/processplayerconfig';
 export { processSourceConfig } from './handlers/processsourceconfig';

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

@@ -0,0 +1,6 @@
+import { SourceConfig, StreamObject } from 'types/interfaces';
+export declare function getAnalyticsPrid(params: {
+    source: string;
+    sourceConfig?: SourceConfig;
+    streamObject?: StreamObject;
+}): string;

package/lib/src/js/utilities/utilities.prid.test.d.ts

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

package/lib/src/npoplayer.d.ts

@@ -41,9 +41,9 @@ export default class NpoPlayer {
         variant?: NpoPlayerUIVariants;
         npoTagPageTracker?: PageTracker | undefined;
     }, playerConfig?: PlayerConfig | undefined, npoTag?: InitialisationProps | undefined, npoTagInstance?: NPOTag | undefined, variant?: NpoPlayerUIVariants, npoTagPageTracker?: PageTracker | undefined);
+    keydownHandler: (e: KeyboardEvent) => void;
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
-    doError(input: any, status?: number): void;
     play(): Promise<void>;
     pause(): void;
     setVolume(volume: number): void;

package/lib/src/services/errors/errorBackground.test.d.ts

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

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

@@ -0,0 +1,3 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function handlePlayerError(playerContext: PlayerContext, status: number): Promise<void>;
+export declare function setErrorBackground(playerContext: PlayerContext): void;

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

@@ -0,0 +1,2 @@
+export declare const customSpecificErrorMessageOverlayConfig: Record<number, string>;
+export declare const npoBusinessErrors: Record<number, string>;

package/lib/src/services/errors/errorText.test.d.ts

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

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

@@ -3,3 +3,23 @@ export declare const PREVENT_UI_DELAY = -1;
 export declare const VOLUME_STEP = 10;
 export declare const VOLUME_MIN = 0;
 export declare const VOLUME_MAX = 100;
+export declare const emptyStreamObject: {
+    stream: {
+        drmType: string;
+        streamProfile: string;
+        streamURL: string;
+        avType: string;
+        sourceProfile: string;
+    };
+    metadata: {
+        title: string;
+        description: string;
+    };
+    assets: {
+        scrubbingThumbnail: string;
+        subtitles: never[];
+    };
+    user: {
+        type: "anonymous" | "plus";
+    };
+};

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

@@ -6,6 +6,7 @@ export declare class NpoPlayerAPI {
     playerAPI: PlayerAPI;
     constructor(playerAPI: PlayerAPI);
     load(sourceConfig: SourceConfig): Promise<void>;
+    unload(): Promise<void>;
     play(): Promise<void>;
     pause(): void;
     mute(): void;
@@ -27,6 +28,7 @@ export declare class NpoPlayerAPI {
     off(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     on(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     isCastAvailable(): boolean;
+    isCasting(): boolean;
     seek(time: number): void;
     timeShift(time: number): void;
     getContainer(): HTMLElement;
@@ -38,7 +40,8 @@ export declare class NpoPlayerAPI {
     getDuration(): number;
     getTimeShift(): number;
     scheduleAds(adConfig: AdConfig): Promise<AdBreak[]>;
+    handleErrorRetry(playerContext: PlayerContext): void;
     getActiveAdBreak(): AdBreak | null;
     getConfig(mergedConfig?: boolean): PlayerConfig;
-    createUIManager(playerContext: PlayerContext, variant: NpoPlayerUIVariants): Promise<void | UIManager>;
+    createUIManager(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void | UIManager;
 }

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

@@ -1,4 +1,4 @@
-import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, NpoPlayerUIVariants } from '../types/interfaces';
+import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, StreamObject, PlayerTrackerParams, LogEventParams } from '../types/interfaces';
 import { AVType } from '@npotag/tag/dist/types/src/streamTracker';
 export declare class NpoPlayerServices {
     getAVType(avType: string): AVType;
@@ -13,11 +13,17 @@ export declare class NpoPlayerServices {
     setAccessibilityAttributes(playerContext: PlayerContext): void;
     schedulePreRolls(playerContext: PlayerContext): Promise<void>;
     discardAdBreak(playerContext: PlayerContext): void;
-    handleVerticalVideoControls(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void;
+    handleVerticalVideoControls(playerContext: PlayerContext): void;
+    handleVerticalVideoSettings(playerContext: PlayerContext): void;
     showNicamAfterUiDelay(playerContext: PlayerContext | undefined): void;
     setupNicamKijkwijzerIcons(playerContext: PlayerContext): void;
     handlePreferences(playerContext: PlayerContext): void;
     addUivisiblityHandlers(playerContext: PlayerContext): void;
     removeUivisiblityHandlers(playerContext: PlayerContext): void;
     handleStreamOptions(playerContext: PlayerContext): void;
+    handleError(playerContext: PlayerContext, input: number): Promise<void>;
+    fetchStream(playerContext: PlayerContext, payload: ApiPayload): Promise<StreamObject>;
+    startPlayerTracker({ playerContext, source, duration }: PlayerTrackerParams): void;
+    initPlayerTracker(playerContext: PlayerContext): void;
+    logEvent({ playerContext, event, data }: LogEventParams): void;
 }

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

@@ -0,0 +1,2 @@
+import { type ApiPayload, PlayerContext, StreamObject } from '../../types/interfaces';
+export declare function fetchStream(playerContext: PlayerContext, payload: ApiPayload): Promise<StreamObject>;

package/lib/src/services/streamFetchHandler/fetchstream.test.d.ts

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

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

@@ -0,0 +1,2 @@
+import { PlayerContext } from 'types/interfaces';
+export declare function bindPlayerEvents(playerContext: PlayerContext): void;

package/lib/src/services/trackingHandlers/eventBinding.test.d.ts

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

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

@@ -0,0 +1,2 @@
+import { LogEventParams } from 'types/interfaces';
+export declare function logEvent({ playerContext, event, data }: LogEventParams): void;

package/lib/src/services/trackingHandlers/eventLogging.test.d.ts

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

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

@@ -0,0 +1,3 @@
+export { startPlayerTracker } from './playerTrackerStart';
+export { initPlayerTracker } from './playerTrackerInit';
+export { logEvent } from './eventLogging';

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

@@ -0,0 +1,2 @@
+import { PlayerContext } from 'types/interfaces';
+export declare function initPlayerTracker(playerContext: PlayerContext): void;

package/lib/src/services/trackingHandlers/playerTrackerInit.test.d.ts

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

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

@@ -0,0 +1,2 @@
+import { PlayerTrackerParams } from 'types/interfaces';
+export declare const startPlayerTracker: ({ playerContext, source, duration }: PlayerTrackerParams) => void;

package/lib/src/services/trackingHandlers/playerTrackerStart.test.d.ts

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

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

@@ -0,0 +1,3 @@
+import { StreamTracker } from '@npotag/tag';
+import { PlayerTrackerParams } from 'types/interfaces';
+export declare function initStreamTracker({ playerContext, duration, source }: PlayerTrackerParams): StreamTracker;

package/lib/src/services/trackingHandlers/streamTrackerInit.test.d.ts

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

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

@@ -1,2 +1,2 @@
-import { PlayerContext, NpoPlayerUIVariants } from '../../types/interfaces';
-export declare const handleVerticalVideoControls: (playerContext: PlayerContext, variant: NpoPlayerUIVariants) => void;
+import { PlayerContext } from '../../types/interfaces';
+export declare const handleVerticalVideoControls: (playerContext: PlayerContext) => void;

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

@@ -0,0 +1,2 @@
+import { PlayerContext } from '../../types/interfaces';
+export declare function handleVerticalVideoSettings(playerContext: PlayerContext): void;

package/lib/src/services/verticalVideoHandlers/handleVerticalVideoSettings.test.d.ts

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

package/lib/src/types/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel } from 'bitmovin-player-ui';
+import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel, SettingsToggleButton } 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';
@@ -132,6 +132,8 @@ export interface StreamOptions {
     customFallbackPoster?: string;
     autoFillTimeLineMarkerDuration?: boolean;
     autoplay?: boolean;
+    npoTagPageTracker?: PageTracker;
+    retryCallback?: () => void;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -151,6 +153,8 @@ export interface UIComponents {
     seekBar?: SeekBar | undefined;
     chromeCastButton?: CastToggleButton | undefined;
     settingsPanels?: SettingsPanel[] | undefined;
+    settingsPanel?: SettingsPanel | undefined;
+    settingsToggleButton?: SettingsToggleButton | undefined;
 }
 export interface CustomMessageHandlerInterface {
     defaultActionRequired?: boolean;
@@ -222,3 +226,13 @@ export declare enum LocalStorageValues {
 }
 export type LocalStorageData = Partial<Record<LocalStorageValues, string | number>>;
 export type NPOGoogleCastRemoteControlConfig = GoogleCastRemoteControlConfig;
+export interface PlayerTrackerParams {
+    playerContext: PlayerContext;
+    duration: number | undefined;
+    source: string | undefined;
+}
+export interface LogEventParams {
+    playerContext: PlayerContext;
+    event: string;
+    data?: any;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { SettingsPanel } from 'bitmovin-player-ui';
+export declare function createVerticalVideoSettingsPanel(): SettingsPanel;

package/lib/tests/mocks/mockNpoplayer.js

@@ -40,7 +40,7 @@ export const mockNpoPlayer = {
     container: document.createElement('div'),
     initPlayer: jest.fn(),
     loadStream: jest.fn(),
-    doError: jest.fn(),
+    keydownHandler: jest.fn(),
     player: {
         getCurrentTime: jest.fn().mockReturnValue(10)
     },

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

@@ -0,0 +1,2 @@
+import { StreamObject } from '../../src/types/interfaces';
+export declare const mockStreamObject: StreamObject;

package/lib/tests/mocks/mockStreamObject.js

@@ -0,0 +1,21 @@
+export const mockStreamObject = {
+    stream: {
+        isLiveStream: false,
+        hasDvrWindow: true,
+        avType: '',
+        drmType: '',
+        streamProfile: '',
+        sourceProfile: '',
+        streamURL: ''
+    },
+    metadata: {
+        description: '',
+        title: ''
+    },
+    assets: {
+        scrubbingThumbnail: '',
+        subtitles: undefined,
+        preroll: ''
+    },
+    user: { type: 'anonymous' }
+};

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

@@ -42,6 +42,7 @@ export declare const createMockNpoPlayer: (overrides?: {}) => {
         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;

package/lib/tests/mocks/playerContextMock.js

@@ -7,6 +7,7 @@ const setVolume = jest.fn((level) => {
 export const createMockNpoPlayerAPI = (overrides = {}) => ({
     playerAPI: mockPlayerAPI,
     load: jest.fn(),
+    unload: jest.fn(),
     play: jest.fn(),
     pause: jest.fn(),
     mute: jest.fn(),
@@ -34,6 +35,7 @@ export const createMockNpoPlayerAPI = (overrides = {}) => ({
     off: jest.fn(),
     on: jest.fn(),
     isCastAvailable: jest.fn(),
+    isCasting: jest.fn().mockReturnValue(false),
     seek: jest.fn(),
     timeShift: jest.fn(),
     getContainer: jest.fn(),
@@ -48,6 +50,7 @@ export const createMockNpoPlayerAPI = (overrides = {}) => ({
     getActiveAdBreak: jest.fn().mockReturnValue(undefined),
     getConfig: jest.fn().mockReturnValue({}),
     createUIManager: jest.fn(),
+    handleErrorRetry: jest.fn(),
     ...overrides
 });
 export const createMockNpoPlayer = (overrides = {}) => ({
@@ -88,7 +91,8 @@ export const createMockNpoPlayer = (overrides = {}) => ({
         setAccessibilityAttributes: jest.fn(),
         keyboardHandler: jest.fn(),
         decideProfile: jest.fn(),
-        verifyDRM: jest.fn()
+        verifyDRM: jest.fn(),
+        handleError: jest.fn()
     },
     eventListeners: undefined,
     mockNpoPlayer: undefined,

package/lib/types/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel } from 'bitmovin-player-ui';
+import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel, SettingsToggleButton } 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';
@@ -132,6 +132,8 @@ export interface StreamOptions {
     customFallbackPoster?: string;
     autoFillTimeLineMarkerDuration?: boolean;
     autoplay?: boolean;
+    npoTagPageTracker?: PageTracker;
+    retryCallback?: () => void;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -151,6 +153,8 @@ export interface UIComponents {
     seekBar?: SeekBar | undefined;
     chromeCastButton?: CastToggleButton | undefined;
     settingsPanels?: SettingsPanel[] | undefined;
+    settingsPanel?: SettingsPanel | undefined;
+    settingsToggleButton?: SettingsToggleButton | undefined;
 }
 export interface CustomMessageHandlerInterface {
     defaultActionRequired?: boolean;
@@ -222,3 +226,13 @@ export declare enum LocalStorageValues {
 }
 export type LocalStorageData = Partial<Record<LocalStorageValues, string | number>>;
 export type NPOGoogleCastRemoteControlConfig = GoogleCastRemoteControlConfig;
+export interface PlayerTrackerParams {
+    playerContext: PlayerContext;
+    duration: number | undefined;
+    source: string | undefined;
+}
+export interface LogEventParams {
+    playerContext: PlayerContext;
+    event: string;
+    data?: any;
+}

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

@@ -1,11 +1,12 @@
 import { ControlBar, Container, SeekBar, SeekBarLabel, 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;
     const controlBar = new ControlBar({
         components: [
-            createSeekBar(npoPlayer),
+            createSeekBar(npoPlayer, NpoPlayerUIVariants.AUDIO),
             new Container({
                 components: [
                     new VolumeControlButton({