@npo/player 1.24.7 → 1.26.0

package/lib/ui/components/controlbar.js

@@ -1,43 +1,31 @@
-import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, SettingsToggleButton, FullscreenToggleButton } from 'bitmovin-player-ui';
-import { PlayerEvent } from 'bitmovin-player';
-import { createForwardButton, createRewindButton } from './buttons';
+import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, SettingsToggleButton, FullscreenToggleButton } from 'bitmovin-player-ui';
+import { createChromecastButton, createForwardButton, createRewindButton } from './buttons';
 import { createSeekBar } from './seekbar';
 import { createSettingsPanel } from './settingspanel';
-export function createControlBar(npoPlayer) {
-    const player = npoPlayer.player;
-    const rewindButton = createRewindButton(player);
-    const forwardButton = createForwardButton(player);
+import { NpoPlayerUIVariants } from '../../types/interfaces';
+export function createControlBar(playerContext, variant) {
+    const { npoPlayer, player } = playerContext;
     const seekBar = new SeekBar({ label: new SeekBarLabel() });
     npoPlayer.uiComponents.seekBar = seekBar;
-    const chromeCastButton = new CastToggleButton({
-        hidden: true
-    });
-    const handleCastAvailable = () => {
-        player?.off(PlayerEvent.CastAvailable, handleCastAvailable);
-        if (player?.isCastAvailable()) {
-            chromeCastButton.show();
-        }
-    };
-    player?.on(PlayerEvent.CastAvailable, handleCastAvailable);
-    const settingsPanel = createSettingsPanel(npoPlayer);
+    const controlComponents = [];
+    controlComponents.push(new PlaybackToggleButton(), new VolumeToggleButton(), new VolumeSlider());
+    if (variant === NpoPlayerUIVariants.DEFAULT) {
+        const rewindButton = createRewindButton(playerContext);
+        const forwardButton = createForwardButton(playerContext);
+        controlComponents.push(rewindButton, forwardButton);
+    }
+    const chromeCastButton = createChromecastButton(player, npoPlayer);
+    controlComponents.push(new Spacer(), new PictureInPictureToggleButton(), new AirPlayToggleButton(), chromeCastButton);
+    if (variant === NpoPlayerUIVariants.DEFAULT) {
+        const settingsPanel = createSettingsPanel(npoPlayer);
+        controlComponents.push(new SettingsToggleButton({ settingsPanel }), settingsPanel);
+    }
+    controlComponents.push(new FullscreenToggleButton());
     const controlBar = new ControlBar({
         components: [
             createSeekBar(npoPlayer),
             new Container({
-                components: [
-                    new PlaybackToggleButton(),
-                    new VolumeToggleButton(),
-                    new VolumeSlider(),
-                    rewindButton,
-                    forwardButton,
-                    new Spacer(),
-                    new PictureInPictureToggleButton(),
-                    new AirPlayToggleButton(),
-                    chromeCastButton,
-                    new SettingsToggleButton({ settingsPanel }),
-                    settingsPanel,
-                    new FullscreenToggleButton()
-                ],
+                components: [...controlComponents],
                 cssClasses: ['controlbar-bottom']
             })
         ],

package/lib/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/ui/components/ctabar.js

@@ -3,16 +3,16 @@ import { createGoBackLiveButton, createWatchFromStartButton } from './buttons';
 import { createAdButton } from './adbutton';
 import { createAdLabel } from './adlabel';
 import { NpoPlayerUIVariants } from '../../types/interfaces';
-export function createCTABar(player, npoplayer, variant) {
+export function createCTABar(player, npoPlayer, variant) {
     const barComponents = [];
     if (variant === NpoPlayerUIVariants.DEFAULT) {
         const goBackLiveButton = createGoBackLiveButton(player);
-        const watchFromStartButton = createWatchFromStartButton(player, npoplayer);
+        const watchFromStartButton = createWatchFromStartButton(player, npoPlayer);
         barComponents.push(watchFromStartButton, goBackLiveButton);
     }
     if (variant === NpoPlayerUIVariants.AD) {
-        const adLabel = createAdLabel(npoplayer);
-        const adButton = createAdButton(npoplayer);
+        const adLabel = createAdLabel(npoPlayer);
+        const adButton = createAdButton(npoPlayer);
         barComponents.push(adLabel, adButton);
         adLabel.hide();
     }

package/lib/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/ui/components/nativemobile/buttons.js

@@ -2,7 +2,23 @@ import { AirPlayToggleButton, Button, CastToggleButton, ControlBar, FullscreenTo
 import { sendCustomMessage } from '../../nativemobileuicontainer';
 import { CustomMessages } from '../../../types/interfaces';
 import { ViewMode } from 'bitmovin-player';
-import { createForwardButton, createRewindButton } from '../buttons';
+const interval = 10;
+function rewind(player) {
+    if (player.isLive()) {
+        player.timeShift(player.getTimeShift() - interval);
+    }
+    else {
+        player.seek(Math.max(0, player.getCurrentTime() - interval));
+    }
+}
+function forward(player) {
+    if (player.isLive()) {
+        player.timeShift(Math.min(0, player.getTimeShift() + interval));
+    }
+    else {
+        player.seek(Math.min(player.getDuration(), player.getCurrentTime() + interval));
+    }
+}
 const watchFromStartButtonClickHandler = () => {
     sendCustomMessage(CustomMessages.CLICK_WATCH_FROM_START);
 };
@@ -23,6 +39,30 @@ function createBigPlayToggleButton() {
     });
     return bigPlayToggleButton;
 }
+export function createForwardButton(player) {
+    const forwardButton = new Button({
+        cssClass: 'ui-forwardbutton bmpui-ui-button',
+        ariaLabel: 'Spoel 10 seconden vooruit'
+    });
+    if (player) {
+        forwardButton.onClick.subscribe(() => {
+            forward(player);
+        });
+    }
+    return forwardButton;
+}
+export function createRewindButton(player) {
+    const rewindButton = new Button({
+        cssClass: 'ui-rewindbutton bmpui-ui-button',
+        ariaLabel: 'Spoel 10 seconden terug'
+    });
+    if (player) {
+        rewindButton.onClick.subscribe(() => {
+            rewind(player);
+        });
+    }
+    return rewindButton;
+}
 export function createMiddleButtons(player) {
     const bigPlayToggleButton = createBigPlayToggleButton();
     const bigRewindButton = createRewindButton(player);

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

@@ -1,6 +1,5 @@
 import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel, Spacer } from 'bitmovin-player-ui';
-import { createForwardButton, createRewindButton } from '../buttons';
-import { createAirPlayToggleButton, createCastToggleButton, createFullscreenToggleButton, createPictureInPictureToggleButton, createPlaybackToggleButton, createSettingsButton, createVolumeToggleButton } from './buttons';
+import { createForwardButton, createRewindButton, createAirPlayToggleButton, createCastToggleButton, createFullscreenToggleButton, createPictureInPictureToggleButton, createPlaybackToggleButton, createSettingsButton, createVolumeToggleButton } from './buttons';
 import { createSettingsPanel } from '../settingspanel';
 export function createControlBar(player) {
     const rewindButton = createRewindButton(player);

package/lib/ui/components/nativemobile/topbar.js

@@ -12,8 +12,8 @@ export function createTopBar(player) {
                     createSettingsButton(settingsPanel),
                     settingsPanel,
                     createPictureInPictureToggleButton(player),
-                    createFullscreenToggleButton(player),
-                    createVolumeToggleButton(player)
+                    createVolumeToggleButton(player),
+                    createFullscreenToggleButton(player)
                 ],
                 cssClasses: ['controlbar-top', 'controlbar-small']
             })

package/lib/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/ui/components/playnext.js

@@ -1,8 +1,8 @@
 import { Container } from 'bitmovin-player-ui';
 import { createPlayNextButton, createCancelPlayNextButton } from './buttons';
-export function createPlayNextScreen(player, npoplayer) {
-    const playNextButton = createPlayNextButton(player, npoplayer);
-    const cancelButton = createCancelPlayNextButton(player, npoplayer);
+export function createPlayNextScreen(player, npoPlayer) {
+    const playNextButton = createPlayNextButton(player, npoPlayer);
+    const cancelButton = createCancelPlayNextButton(player, npoPlayer);
     return new Container({
         components: [cancelButton, playNextButton],
         cssClasses: ['overlay-playnext']

package/lib/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/ui/components/seekbar.js

@@ -1,7 +1,9 @@
 import { Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel } from 'bitmovin-player-ui';
-export function createSeekBar(npoplayer) {
+import { NpoPlayerUIVariants } from '../../npoplayer';
+export function createSeekBar(npoPlayer) {
     const seekBar = new SeekBar({ label: new SeekBarLabel() });
-    npoplayer.uiComponents.seekBar = seekBar;
+    npoPlayer.uiComponents.seekBar = seekBar;
+    const isAdUi = npoPlayer.variant === NpoPlayerUIVariants.AD || false;
     return new Container({
         components: [
             new PlaybackTimeLabel({
@@ -11,7 +13,7 @@ export function createSeekBar(npoplayer) {
             }),
             seekBar,
             new PlaybackTimeLabel({
-                timeLabelMode: PlaybackTimeLabelMode.TotalTime,
+                timeLabelMode: isAdUi ? PlaybackTimeLabelMode.RemainingTime : PlaybackTimeLabelMode.TotalTime,
                 cssClasses: ['total-time']
             })
         ],

package/lib/ui/components/settingspanel.js

@@ -49,11 +49,6 @@ export function createSettingsPanel(npoPlayer) {
         new SettingsPanelItem(audioqualityLabel, new AudioQualitySelectBox()),
         new SettingsPanelItem(audiotrackLabel, new AudioTrackSelectBox())
     ], ['main-panel']);
-    const onSourceLoaded = () => {
-        player?.off(PlayerEvent.SourceLoaded, onSourceLoaded);
-        checkQualities();
-        checkSubtitles();
-    };
     const settingsPanel = new SettingsPanel({
         components: [mainSettingsPage, subtitlePanelPage, speedPanelPage, qualityPanelPage],
         hidden: true,
@@ -84,7 +79,6 @@ export function createSettingsPanel(npoPlayer) {
         panelPage.addComponent(createSettingsPanelPageBackButton(mainSettingsPage, settingsPanel, labels[index], [
             settingsBackButtonClass
         ]));
-        panelPage.addComponent(new SettingsToggleButton({ settingsPanel }));
     }
     if ('uiComponents' in npoPlayer) {
         npoPlayer.uiComponents.subtitlesButton = subtitlesPanelItem;
@@ -113,8 +107,7 @@ export function createSettingsPanel(npoPlayer) {
         }
     };
     const checkQualities = () => {
-        const availableVideoQualities = player?.getAvailableVideoQualities();
-        qualityListBox.clearItems();
+        const availableVideoQualities = player?.getAvailableVideoQualities() || [];
         if (availableVideoQualities?.length) {
             for (const quality of availableVideoQualities)
                 qualityListBox.addItem(quality.id, quality.label ?? 'test');
@@ -126,12 +119,19 @@ export function createSettingsPanel(npoPlayer) {
             qualityPanelItem.hide();
         }
     };
-    player?.on(PlayerEvent.SourceLoaded, onSourceLoaded);
     settingsPanel.onHide.subscribe(() => {
         player?.getContainer().querySelector('.bmpui-npo-player')?.classList.remove('bmpui-settings-panel-shown');
     });
     settingsPanel.onShow.subscribe(() => {
         player?.getContainer().querySelector('.bmpui-npo-player')?.classList.add('bmpui-settings-panel-shown');
     });
+    const onSourceLoaded = () => {
+        player?.off(PlayerEvent.SourceLoaded, onSourceLoaded);
+        player?.off(PlayerEvent.Ready, onSourceLoaded);
+        checkQualities();
+        checkSubtitles();
+    };
+    player?.on(PlayerEvent.SourceLoaded, onSourceLoaded);
+    player?.on(PlayerEvent.Ready, onSourceLoaded);
     return settingsPanel;
 }

package/lib/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/ui/components/titlebar.js

@@ -1,8 +1,8 @@
 import { Label, TitleBar } from 'bitmovin-player-ui';
-export function createTitleBar(npoplayer) {
+export function createTitleBar(npoPlayer) {
     const nicam = new Label({ text: '', cssClass: 'nicam' });
     const titleBar = new TitleBar({ cssClasses: ['metadata'] });
     titleBar.addComponent(nicam);
-    npoplayer.uiComponents.nicam = nicam;
+    npoPlayer.uiComponents.nicam = nicam;
     return titleBar;
 }

package/lib/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/ui/components/topbar.js

@@ -1,19 +1,10 @@
-import { PlayerEvent } from 'bitmovin-player';
-import { Container, TitleBar, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeControlButton } from 'bitmovin-player-ui';
+import { Container, TitleBar, PictureInPictureToggleButton, AirPlayToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeControlButton } from 'bitmovin-player-ui';
 import { createSettingsPanel } from './settingspanel';
-export function createTopBar(npoplayer) {
-    const player = npoplayer.player;
-    const chromeCastButton = new CastToggleButton({
-        hidden: true
-    });
-    const handleCastAvailable = () => {
-        player?.off(PlayerEvent.CastAvailable, handleCastAvailable);
-        if (player?.isCastAvailable()) {
-            chromeCastButton.show();
-        }
-    };
-    player?.on(PlayerEvent.CastAvailable, handleCastAvailable);
-    const settingsPanel = createSettingsPanel(npoplayer);
+import { createChromecastButton } from './buttons';
+export function createTopBar(playerContext) {
+    const { npoPlayer, player } = playerContext;
+    const settingsPanel = createSettingsPanel(npoPlayer);
+    const chromeCastButton = createChromecastButton(player, npoPlayer);
     return new TitleBar({
         components: [
             new Container({
@@ -23,10 +14,10 @@ export function createTopBar(npoplayer) {
                     chromeCastButton,
                     new SettingsToggleButton({ settingsPanel }),
                     settingsPanel,
-                    new FullscreenToggleButton(),
                     new VolumeControlButton({
                         vertical: true
-                    })
+                    }),
+                    new FullscreenToggleButton()
                 ],
                 cssClasses: ['controlbar-top', 'controlbar-small']
             })

package/lib/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/ui/components/verticalvideo/controlbar.js

@@ -2,10 +2,10 @@ import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, Set
 import { createForwardButton, createRewindButton } from '../buttons';
 import { createSeekBar } from '../seekbar';
 import { createSettingsPanel } from '../settingspanel';
-export function createVerticalVideoControlBar(npoPlayer) {
-    const player = npoPlayer.player;
-    const rewindButton = createRewindButton(player);
-    const forwardButton = createForwardButton(player);
+export function createVerticalVideoControlBar(playerContext) {
+    const { npoPlayer } = playerContext;
+    const rewindButton = createRewindButton(playerContext);
+    const forwardButton = createForwardButton(playerContext);
     const seekBar = new SeekBar({ label: new SeekBarLabel() });
     npoPlayer.uiComponents.seekBar = seekBar;
     const settingsPanel = createSettingsPanel(npoPlayer);

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

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

package/lib/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/ui/nativemobileuifactory.js

@@ -4,13 +4,14 @@ import { customSpecificErrorMessageOverlayConfig } from '../js/playeractions/han
 import { localizationConfig } from '../js/settings/localization';
 import { nativeMobileUIContainer, sendCustomMessage } from './nativemobileuicontainer';
 import { CustomMessages } from '../types/interfaces';
-import { processNicam } from './handlers/nicamhandler';
-import { getElementByQuery, removeClassFromElementByQuery } from '../js/utilities/utilities.element';
+import { getElementByQuery } from '../js/utilities/utilities.element';
 import { handleLiveStreamNoDvr } from './handlers/domhandlers';
 import { removeReplayClass } from '../js/playeractions/handlers/removereplayclass';
+import { processNicam } from '../services/nicamHandlers/nicamhandler';
 let adBreakActive = false;
 export function nativeMobileUiFactory(player, config = {}) {
     UIManager.setLocalizationConfig(localizationConfig);
+    const nicamClass = '.bmpui-nicam';
     const uiConfig = {
         ...config,
         errorMessages: customSpecificErrorMessageOverlayConfig,
@@ -22,25 +23,7 @@ export function nativeMobileUiFactory(player, config = {}) {
         player.off(PlayerEvent.Seek, removeFinishedClass);
         removeReplayClass(player);
     };
-    const clearUI = () => {
-        adBreakActive = false;
-        const nicamElement = getElementByQuery({ container: player.getContainer(), query: '.bmpui-nicam' });
-        if (nicamElement)
-            nicamElement.innerHTML = '';
-        const seekbarTitleElement = getElementByQuery({
-            container: player.getContainer(),
-            query: '.bmpui-seekbar-label-title'
-        });
-        if (seekbarTitleElement)
-            seekbarTitleElement.textContent = '';
-        removeClassFromElementByQuery({
-            className: 'livestream-no-dvr',
-            container: player.getContainer(),
-            query: '.bmpui-npo-player'
-        });
-    };
     const updateUI = () => {
-        const nicamElement = getElementByQuery({ container: player.getContainer(), query: '.bmpui-nicam' });
         const seekbarTitleElement = getElementByQuery({
             container: player.getContainer(),
             query: '.bmpui-seekbar-label-title'
@@ -51,7 +34,18 @@ export function nativeMobileUiFactory(player, config = {}) {
             player.on(PlayerEvent.AdError, setAdBreakActiveToFalse);
         }
         if (_webData.metadata?.ageRating || _webData.metadata?.nicam) {
-            processNicam(_webData, nicamElement, undefined);
+            const webDataPlayerContext = {
+                npoPlayer: {
+                    streamObject: {
+                        metadata: {
+                            ageRating: _webData.metadata.ageRating,
+                            nicam: _webData.metadata.nicam
+                        }
+                    }
+                }
+            };
+            const nicamElement = getElementByQuery({ container: player.getContainer(), query: nicamClass });
+            processNicam(webDataPlayerContext, nicamElement);
         }
         if (seekbarTitleElement)
             seekbarTitleElement.textContent = _webData.title || '';
@@ -64,10 +58,12 @@ export function nativeMobileUiFactory(player, config = {}) {
     };
     if (window.bitmovin?.customMessageHandler) {
         const handleData = (data) => {
-            clearUI();
             if (data) {
-                _webData = JSON.parse(data);
-                updateUI();
+                const newData = JSON.parse(data);
+                if (data !== _webData.toString()) {
+                    _webData = newData;
+                    updateUI();
+                }
             }
         };
         window.bitmovin.customMessageHandler.on(CustomMessages.SET_STREAM_LINK, handleData);

package/lib/ui/nativemobileuifactory.test.js

@@ -24,7 +24,8 @@ describe('nativeMobileUiFactory', () => {
             on: jest.fn(),
             off: jest.fn(),
             getContainer: () => containerElement,
-            getVolume: jest.fn().mockReturnValue(50)
+            getVolume: jest.fn().mockReturnValue(50),
+            getAvailableVideoQualities: jest.fn()
         };
         storedCallbacks = {};
         if (storedCallbacks) {
@@ -41,10 +42,6 @@ describe('nativeMobileUiFactory', () => {
     test('should update the DOM correctly when sendSynchronous is called with setstreamlink', () => {
         const mockData = {
             title: title,
-            metadata: {
-                ageRating: '12',
-                nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK']
-            },
             stream: {
                 isLiveStream: true,
                 hasDvrWindow: false
@@ -57,7 +54,6 @@ describe('nativeMobileUiFactory', () => {
             storedCallbacks[CustomMessages.SET_STREAM_LINK](JSON.stringify(mockData));
         }
         const container = mockPlayer.getContainer();
-        expect(container.querySelector('.bmpui-nicam')?.innerHTML).not.toBe('');
         expect(container.querySelector('.bmpui-seekbar-label-title')?.textContent).toBe(title);
         expect(container.querySelector('.bmpui-npo-player')?.classList.contains('livestream-no-dvr')).toBeTruthy();
     });

package/lib/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/ui/uicontainer.js

@@ -1,7 +1,6 @@
 import { UIContainer, PlaybackToggleOverlay, BufferingOverlay, CastStatusOverlay, SubtitleOverlay, ErrorMessageOverlay, UIManager, PlaybackToggleButton, PlayerUtils } from 'bitmovin-player-ui';
 import { createMiddleButtons } from './components/buttons';
 import { createPlayNextScreen } from './components/playnext';
-import { createSettingsPanel } from './components/settingspanel';
 import { createCTABar } from './components/ctabar';
 import { createTopBar } from './components/topbar';
 import { createControlBar } from './components/controlbar';
@@ -12,69 +11,53 @@ import { localizationConfig } from '../js/settings/localization';
 import { NpoPlayerUIVariants } from '../types/interfaces';
 import { createVerticalVideoControlBar } from './components/verticalvideo/controlbar';
 import { DEFAULT_UI_DELAY, PREVENT_UI_DELAY } from '../services/npoPlayerAPI/contants';
-export function createUIContainer(npoPlayer, player, variant, container) {
+export function createUIContainer(playerContext, player, variant) {
     const cssClassArray = ['npo-player'];
+    const hidePlayerStateExceptions = [PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Prepared];
+    const { npoPlayer } = playerContext;
+    const container = npoPlayer.container;
     let uiDelay = DEFAULT_UI_DELAY;
     container.dataset.npoPlayerVersion = npoPlayer.version;
     container.classList.remove('bitmovinplayer-audio-container');
+    const components = [];
     switch (variant) {
         case NpoPlayerUIVariants.DEFAULT: {
             uiDelay = DEFAULT_UI_DELAY;
+            components.push(new SubtitleOverlay(), new BufferingOverlay(), new PlaybackToggleOverlay(), new CastStatusOverlay(), createMiddleButtons(playerContext), createPlayNextScreen(player, npoPlayer), createControlBar(playerContext, variant), createCTABar(player, npoPlayer, variant), createTitleBar(npoPlayer), createTopBar(playerContext));
             break;
         }
         case NpoPlayerUIVariants.AD: {
             uiDelay = PREVENT_UI_DELAY;
             cssClassArray.push('ster-ad');
+            hidePlayerStateExceptions.push(PlayerUtils.PlayerState.Playing);
+            components.push(new PlaybackToggleOverlay(), new CastStatusOverlay(), createControlBar(playerContext, variant), createCTABar(player, npoPlayer, variant));
             break;
         }
         case NpoPlayerUIVariants.AUDIO: {
             uiDelay = PREVENT_UI_DELAY;
             container.classList.add('bitmovinplayer-audio-container');
             cssClassArray.push('audio');
+            components.push(new PlaybackToggleButton(), createAudioControlBar(npoPlayer), createTitleBar(npoPlayer));
             break;
         }
         case NpoPlayerUIVariants.VERTICAL: {
             uiDelay = DEFAULT_UI_DELAY;
             cssClassArray.push('vertical-video');
             npoPlayer.player?.setAspectRatio('9:16');
+            components.push(new SubtitleOverlay(), new BufferingOverlay(), createVerticalVideoControlBar(playerContext), createTitleBar(npoPlayer));
             break;
         }
     }
-    const middleButtons = createMiddleButtons(player);
-    const playNextScreen = createPlayNextScreen(player, npoPlayer);
-    const settingsPanel = createSettingsPanel(npoPlayer);
-    const ctaBar = createCTABar(player, npoPlayer, variant);
-    const topBar = createTopBar(npoPlayer);
-    const controlBar = createControlBar(npoPlayer);
-    const titleBar = createTitleBar(npoPlayer);
-    const playbackToggleOverlay = new PlaybackToggleOverlay();
-    const audioControlbar = createAudioControlBar(npoPlayer);
-    const bufferingOverlay = new BufferingOverlay();
-    const verticalVideoControlBar = createVerticalVideoControlBar(npoPlayer);
     const errorMessageOverlay = new ErrorMessageOverlay();
-    const castStatusOverlay = new CastStatusOverlay();
     npoPlayer.uiComponents.errorMessageOverlay = errorMessageOverlay;
-    const defaultVideoComponents = [settingsPanel, new SubtitleOverlay(), bufferingOverlay, playbackToggleOverlay];
-    const components = [];
-    if (variant === NpoPlayerUIVariants.DEFAULT) {
-        components.push(...defaultVideoComponents, castStatusOverlay, middleButtons, playNextScreen, controlBar, ctaBar, titleBar, topBar);
-    }
-    if (variant === NpoPlayerUIVariants.VERTICAL) {
-        components.push(...defaultVideoComponents, verticalVideoControlBar, titleBar);
-    }
-    if (variant === NpoPlayerUIVariants.AUDIO) {
-        components.push(new PlaybackToggleButton(), audioControlbar, titleBar);
-    }
-    if (variant === NpoPlayerUIVariants.AD) {
-        components.push(...defaultVideoComponents, castStatusOverlay, middleButtons, controlBar, ctaBar);
-    }
+    components.push(errorMessageOverlay);
     UIManager.setLocalizationConfig(localizationConfig);
     const ariaLabelKey = variant === NpoPlayerUIVariants.AUDIO ? 'audioPlayer' : 'videoPlayer';
     return new UIContainer({
-        components: [...components, errorMessageOverlay],
+        components,
         cssClasses: cssClassArray,
         ariaLabel: localizeKey(ariaLabelKey),
         hideDelay: uiDelay,
-        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused]
+        hidePlayerStateExceptions
     });
 }

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

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