@npo/player 1.25.0 → 1.26.0

package/lib/ui/components/buttons.js

@@ -1,5 +1,6 @@
-import { Button, PlaybackToggleButton, ControlBar } from 'bitmovin-player-ui';
+import { Button, PlaybackToggleButton, ControlBar, CastToggleButton } from 'bitmovin-player-ui';
 import { rewind, forward } from '../handlers/timecontrolhandlers';
+import { NpoPlayerEvent } from '../../types/events';
 export function createMiddleButtons(playerContext) {
     const bigPlayToggleButton = new PlaybackToggleButton({
         cssClass: 'ui-playbacktogglebutton'
@@ -33,7 +34,7 @@ export function createForwardButton(playerContext) {
     });
     return forwardButton;
 }
-export function createPlayNextButton(player, npoplayer) {
+export function createPlayNextButton(player, npoPlayer) {
     const playNextButton = new Button({
         cssClass: 'ui-textbutton ui-playNextButton bmpui-ui-button',
         text: '<span class="bmpui-ui-textbutton-icon bmpui-ui-textbutton-icon-play"></span> Volgende aflevering',
@@ -43,12 +44,12 @@ export function createPlayNextButton(player, npoplayer) {
     });
     playNextButton.onClick.subscribe(() => {
         if (player != undefined) {
-            npoplayer.doPlayNext();
+            npoPlayer.doPlayNext();
         }
     });
     return playNextButton;
 }
-export function createCancelPlayNextButton(player, npoplayer) {
+export function createCancelPlayNextButton(player, npoPlayer) {
     const cancelPlayNextButton = new Button({
         cssClass: 'ui-textbutton ui-cancelPlayNextButton bmpui-ui-button',
         text: 'Annuleer',
@@ -58,7 +59,7 @@ export function createCancelPlayNextButton(player, npoplayer) {
     });
     cancelPlayNextButton.onClick.subscribe(() => {
         if (player != undefined) {
-            npoplayer.cancelPlayNextScreen();
+            npoPlayer.cancelPlayNextScreen();
         }
     });
     return cancelPlayNextButton;
@@ -91,7 +92,7 @@ export function createGoBackLiveButton(player) {
     });
     return goBackLiveButton;
 }
-export function createWatchFromStartButton(player, npoplayer) {
+export function createWatchFromStartButton(player, npoPlayer) {
     const watchFromStartButton = new Button({
         cssClass: 'ui-textbutton ui-watchfromstartbutton bmpui-ui-button',
         text: 'Kijk vanaf het begin',
@@ -100,10 +101,26 @@ export function createWatchFromStartButton(player, npoplayer) {
     });
     watchFromStartButton.onClick.subscribe(() => {
         if (player.isLive() ?? false)
-            npoplayer.watchFromStart();
-        if (npoplayer.uiComponents.watchFromStartButton)
-            npoplayer.uiComponents.watchFromStartButton.hide();
+            npoPlayer.watchFromStart();
+        if (npoPlayer.uiComponents.watchFromStartButton)
+            npoPlayer.uiComponents.watchFromStartButton.hide();
     });
-    npoplayer.uiComponents.watchFromStartButton = watchFromStartButton;
+    npoPlayer.uiComponents.watchFromStartButton = watchFromStartButton;
     return watchFromStartButton;
 }
+export function createChromecastButton(player, npoPlayer) {
+    const chromeCastButton = new CastToggleButton({
+        disabled: true
+    });
+    const handleCastAvailable = () => {
+        const remoteControlConfig = npoPlayer.playerConfig?.remotecontrol;
+        if (player?.isCastAvailable() && remoteControlConfig.customReceiverConfig?.enable !== 'false') {
+            chromeCastButton.enable();
+        }
+        else {
+            chromeCastButton.disable();
+        }
+    };
+    player?.on(NpoPlayerEvent.CastAvailable, handleCastAvailable);
+    return chromeCastButton;
+}

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

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

package/lib/ui/components/controlbar.js

@@ -1,48 +1,31 @@
-import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, SettingsToggleButton, FullscreenToggleButton } from 'bitmovin-player-ui';
-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';
-import { NpoPlayerEvent } from '../../types/events';
-export function createControlBar(playerContext) {
-    const npoPlayer = playerContext.npoplayer;
-    const player = playerContext.player;
-    const rewindButton = createRewindButton(playerContext);
-    const forwardButton = createForwardButton(playerContext);
+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({
-        disabled: true
-    });
-    const handleCastAvailable = () => {
-        player?.off(NpoPlayerEvent.CastAvailable, handleCastAvailable);
-        const remoteControlConfig = npoPlayer.playerConfig?.remotecontrol;
-        if (player?.isCastAvailable() && remoteControlConfig.customReceiverConfig?.enable !== 'false') {
-            chromeCastButton.enable();
-        }
-        else {
-            chromeCastButton.disable();
-        }
-    };
-    player?.on(NpoPlayerEvent.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/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,13 +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;
-        acceptsTouchWithUiHidden: true;
     }>[];
     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.js

@@ -1,24 +1,10 @@
-import { NpoPlayerEvent } from '../../types/events';
-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';
+import { createChromecastButton } from './buttons';
 export function createTopBar(playerContext) {
-    const npoPlayer = playerContext.npoplayer;
-    const player = playerContext.player;
-    const chromeCastButton = new CastToggleButton({
-        disabled: true
-    });
-    const handleCastAvailable = () => {
-        player?.off(NpoPlayerEvent.CastAvailable, handleCastAvailable);
-        const remoteControlConfig = npoPlayer.playerConfig?.remotecontrol;
-        if (player?.isCastAvailable() && remoteControlConfig.customReceiverConfig?.enable !== 'false') {
-            chromeCastButton.enable();
-        }
-        else {
-            chromeCastButton.disable();
-        }
-    };
-    player?.on(NpoPlayerEvent.CastAvailable, handleCastAvailable);
+    const { npoPlayer, player } = playerContext;
     const settingsPanel = createSettingsPanel(npoPlayer);
+    const chromeCastButton = createChromecastButton(player, npoPlayer);
     return new TitleBar({
         components: [
             new Container({
@@ -28,10 +14,10 @@ export function createTopBar(playerContext) {
                     chromeCastButton,
                     new SettingsToggleButton({ settingsPanel }),
                     settingsPanel,
-                    new FullscreenToggleButton(),
                     new VolumeControlButton({
                         vertical: true
-                    })
+                    }),
+                    new FullscreenToggleButton()
                 ],
                 cssClasses: ['controlbar-top', 'controlbar-small']
             })

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

@@ -3,7 +3,7 @@ import { createForwardButton, createRewindButton } from '../buttons';
 import { createSeekBar } from '../seekbar';
 import { createSettingsPanel } from '../settingspanel';
 export function createVerticalVideoControlBar(playerContext) {
-    const npoPlayer = playerContext.npoplayer;
+    const { npoPlayer } = playerContext;
     const rewindButton = createRewindButton(playerContext);
     const forwardButton = createForwardButton(playerContext);
     const seekBar = new SeekBar({ label: new SeekBarLabel() });

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

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

package/lib/ui/nativemobileuifactory.js

@@ -35,7 +35,7 @@ export function nativeMobileUiFactory(player, config = {}) {
         }
         if (_webData.metadata?.ageRating || _webData.metadata?.nicam) {
             const webDataPlayerContext = {
-                npoplayer: {
+                npoPlayer: {
                     streamObject: {
                         metadata: {
                             ageRating: _webData.metadata.ageRating,

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) {

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';
@@ -14,69 +13,51 @@ import { createVerticalVideoControlBar } from './components/verticalvideo/contro
 import { DEFAULT_UI_DELAY, PREVENT_UI_DELAY } from '../services/npoPlayerAPI/contants';
 export function createUIContainer(playerContext, player, variant) {
     const cssClassArray = ['npo-player'];
-    const npoPlayer = playerContext.npoplayer;
+    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(playerContext);
-    const playNextScreen = createPlayNextScreen(player, npoPlayer);
-    const settingsPanel = createSettingsPanel(npoPlayer);
-    const ctaBar = createCTABar(player, npoPlayer, variant);
-    const topBar = createTopBar(playerContext);
-    const controlBar = createControlBar(playerContext);
-    const titleBar = createTitleBar(npoPlayer);
-    const playbackToggleOverlay = new PlaybackToggleOverlay();
-    const audioControlbar = createAudioControlBar(npoPlayer);
-    const bufferingOverlay = new BufferingOverlay();
-    const verticalVideoControlBar = createVerticalVideoControlBar(playerContext);
     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';

package/lib/ui/uicontainer.test.js

@@ -0,0 +1,80 @@
+import '@testing-library/jest-dom';
+import { createPlayerContextMock } from '../../tests/mocks/playerContextMock';
+import { NpoPlayerUIVariants } from '../types/interfaces';
+import { DEFAULT_UI_DELAY, PREVENT_UI_DELAY } from '../services/npoPlayerAPI/contants';
+import { createUIContainer } from './uicontainer';
+import { mockPlayerAPI } from '../../tests/mocks/mockPlayerAPI';
+import { BufferingOverlay, CastStatusOverlay, Container, ControlBar, ErrorMessageOverlay, PlaybackToggleButton, PlaybackToggleOverlay, SubtitleOverlay, TitleBar } from 'bitmovin-player-ui';
+describe('createUIContainer', () => {
+    let playerContextMock;
+    let playerMock;
+    beforeEach(() => {
+        playerMock = mockPlayerAPI;
+        playerContextMock = createPlayerContextMock({
+            npoPlayer: {
+                container: document.createElement('div'),
+                version: '1.0.0',
+                player: playerMock,
+                uiComponents: []
+            }
+        });
+    });
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+    it('should create the default UI container with the correct components', () => {
+        const uiContainer = createUIContainer(playerContextMock, playerMock, NpoPlayerUIVariants.DEFAULT);
+        expect(uiContainer.getComponents()).toEqual([
+            expect.any(SubtitleOverlay),
+            expect.any(BufferingOverlay),
+            expect.any(PlaybackToggleOverlay),
+            expect.any(CastStatusOverlay),
+            expect.any(ControlBar),
+            expect.any(Container),
+            expect.any(ControlBar),
+            expect.any(Container),
+            expect.any(TitleBar),
+            expect.any(TitleBar),
+            expect.any(ErrorMessageOverlay)
+        ]);
+        expect(uiContainer.getConfig().hideDelay).toBe(DEFAULT_UI_DELAY);
+        expect(uiContainer.getDomElement().hasClass('bmpui-npo-player')).toBe(true);
+    });
+    it('should create the AD variant with the correct components and prevent UI delay', () => {
+        const uiContainer = createUIContainer(playerContextMock, playerMock, NpoPlayerUIVariants.AD);
+        expect(uiContainer.getComponents()).toEqual([
+            expect.any(PlaybackToggleOverlay),
+            expect.any(CastStatusOverlay),
+            expect.any(ControlBar),
+            expect.any(Container),
+            expect.any(ErrorMessageOverlay)
+        ]);
+        expect(uiContainer.getConfig().hideDelay).toBe(PREVENT_UI_DELAY);
+        expect(uiContainer.getDomElement().hasClass('bmpui-ster-ad')).toBe(true);
+    });
+    it('should create the AUDIO variant with the correct components and no video-specific classes', () => {
+        const uiContainer = createUIContainer(playerContextMock, playerMock, NpoPlayerUIVariants.AUDIO);
+        expect(uiContainer.getComponents()).toEqual([
+            expect.any(PlaybackToggleButton),
+            expect.any(ControlBar),
+            expect.any(TitleBar),
+            expect.any(ErrorMessageOverlay)
+        ]);
+        expect(uiContainer.getConfig().hideDelay).toBe(PREVENT_UI_DELAY);
+        expect(uiContainer.getDomElement().hasClass('bmpui-audio')).toBe(true);
+    });
+    it('should create the VERTICAL variant with the correct aspect ratio and components', () => {
+        playerMock.setAspectRatio = jest.fn();
+        const uiContainer = createUIContainer(playerContextMock, playerMock, NpoPlayerUIVariants.VERTICAL);
+        expect(playerMock.setAspectRatio).toHaveBeenCalledWith('9:16');
+        expect(uiContainer.getComponents()).toEqual([
+            expect.any(SubtitleOverlay),
+            expect.any(BufferingOverlay),
+            expect.any(ControlBar),
+            expect.any(TitleBar),
+            expect.any(ErrorMessageOverlay)
+        ]);
+        expect(uiContainer.getConfig().hideDelay).toBe(DEFAULT_UI_DELAY);
+        expect(uiContainer.getDomElement().hasClass('bmpui-vertical-video')).toBe(true);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -89,7 +89,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "3.2.1",
+    "@npotag/tag": "3.2.4",
     "bitmovin-player": "^8.166.0",
     "bitmovin-player-ui": "3.67.0"
   },

package/src/style/components/_advert.scss

@@ -4,15 +4,6 @@
         display: none;
     }
 
-    .bmpui-ui-controlbar {
-        &.bmpui-controlbar-middle,
-        .bmpui-ui-rewindbutton, 
-        .bmpui-ui-forwardbutton,
-        .bmpui-ui-settingstogglebutton {
-            display: none;
-        }   
-    }
-
     .bmpui-ui-seekbar {
         .bmpui-seekbar {
             .bmpui-seekbar-bufferlevel {

package/src/style/components/_nicam.scss

@@ -79,12 +79,13 @@
     }
 }
 
-// show nicam on default state
+// show nicam on initial state and after UI hide
 &.bmpui-player-state-prepared,
 &.bmpui-player-state-prepared.bmpui-layout-max-width-400,
 &.bmpui-player-state-prepared.bmpui-layout-max-width-600,
-&.bmpui-show-nicam:not(.bmpui-player-state-paused).bmpui-layout-max-width-400,
-&.bmpui-show-nicam:not(.bmpui-player-state-paused).bmpui-layout-max-width-600 {
+&.bmpui-player-state-prepared.bmpui-layout-max-width-800,
+&.bmpui-player-state-prepared.bmpui-layout-max-width-1200,
+&.bmpui-show-nicam {
   .bmpui-metadata,
   .bmpui-metadata.bmpui-title-bar {
     display: block;
@@ -94,7 +95,7 @@
 
     .bmpui-label-metadata-title,
     .bmpui-label-metadata-description {
-      display: none;
+      opacity: 0;
     }
   }