@npo/player 1.26.0 → 1.27.0

package/lib/ui/components/controlbar.js

@@ -23,7 +23,7 @@ export function createControlBar(playerContext, variant) {
     controlComponents.push(new FullscreenToggleButton());
     const controlBar = new ControlBar({
         components: [
-            createSeekBar(npoPlayer),
+            createSeekBar(npoPlayer, variant),
             new Container({
                 components: [...controlComponents],
                 cssClasses: ['controlbar-bottom']

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

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

package/lib/ui/components/settingspanel.js

@@ -126,12 +126,10 @@ export function createSettingsPanel(npoPlayer) {
         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?.off(PlayerEvent.SourceLoaded, onSourceLoaded);
     player?.on(PlayerEvent.SourceLoaded, onSourceLoaded);
-    player?.on(PlayerEvent.Ready, onSourceLoaded);
     return settingsPanel;
 }

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

@@ -1,23 +1,21 @@
-import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeControlButton } from 'bitmovin-player-ui';
+import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeToggleButton } from 'bitmovin-player-ui';
 import { createForwardButton, createRewindButton } from '../buttons';
 import { createSeekBar } from '../seekbar';
-import { createSettingsPanel } from '../settingspanel';
-export function createVerticalVideoControlBar(playerContext) {
+import { NpoPlayerUIVariants } from '../../../types/interfaces';
+export function createVerticalVideoControlBar(playerContext, settingsPanel) {
     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);
-    const settingsContainer = new Container({
-        components: [new SettingsToggleButton({ settingsPanel }), settingsPanel],
-        cssClasses: ['vertical-video-controlbar-settings']
+    const settingsToggleButton = new SettingsToggleButton({
+        settingsPanel: settingsPanel,
+        autoHideWhenNoActiveSettings: false,
+        hidden: true
     });
     const controlBarButtonsContainer = new Container({
         components: [
-            new VolumeControlButton({
-                vertical: true
-            }),
+            new VolumeToggleButton(),
             rewindButton,
             new PlaybackToggleButton(),
             forwardButton,
@@ -26,9 +24,14 @@ export function createVerticalVideoControlBar(playerContext) {
         cssClasses: ['vertical-video-controlbar-buttons']
     });
     const controlBar = new ControlBar({
-        components: [settingsContainer, createSeekBar(npoPlayer), controlBarButtonsContainer],
+        components: [
+            settingsToggleButton,
+            createSeekBar(npoPlayer, NpoPlayerUIVariants.VERTICAL),
+            controlBarButtonsContainer
+        ],
         cssClasses: ['ui-controlbar-bottom']
     });
     npoPlayer.uiComponents.controlBar = controlBar;
+    npoPlayer.uiComponents.settingsToggleButton = settingsToggleButton;
     return controlBar;
 }

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

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

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

@@ -0,0 +1,21 @@
+import { SubtitleListBox, SettingsPanel, SettingsPanelPage, SettingsToggleButton } from 'bitmovin-player-ui';
+export function createVerticalVideoSettingsPanel() {
+    const subtitleListBox = new SubtitleListBox({
+        cssClasses: ['listbox-panel']
+    });
+    const mainSettingsPage = new SettingsPanelPage({
+        components: [subtitleListBox],
+        cssClasses: ['main-panel']
+    });
+    const settingsPanel = new SettingsPanel({
+        components: [mainSettingsPage],
+        hidden: true,
+        pageTransitionAnimation: false,
+        hideDelay: -1
+    });
+    mainSettingsPage.addComponent(new SettingsToggleButton({
+        settingsPanel: settingsPanel,
+        autoHideWhenNoActiveSettings: false
+    }));
+    return settingsPanel;
+}

package/lib/ui/handlers/domhandlers.test.js

@@ -1,50 +1,30 @@
 import { handleLiveStreamNoDvr } from './domhandlers';
 import '@testing-library/jest-dom';
+import { mockStreamObject } from '../../../tests/mocks/mockStreamObject';
 jest.mock('../../js/utilities/utilities.element', () => ({
     getElementByQuery: jest.fn()
 }));
 const { getElementByQuery } = require('../../js/utilities/utilities.element');
 describe('handleLiveStreamNoDvr', () => {
     let mockPlayer;
-    let mockStreamObject;
+    const streamObject = { ...mockStreamObject };
     let mockPlayerElement;
     beforeEach(() => {
         mockPlayer = {
             getContainer: jest.fn()
         };
-        mockStreamObject = {
-            stream: {
-                isLiveStream: false,
-                hasDvrWindow: true,
-                avType: '',
-                drmType: '',
-                streamProfile: '',
-                sourceProfile: '',
-                streamURL: ''
-            },
-            metadata: {
-                description: '',
-                title: ''
-            },
-            assets: {
-                scrubbingThumbnail: '',
-                subtitles: undefined,
-                preroll: ''
-            },
-            user: { type: 'anonymous' }
-        };
         mockPlayerElement = document.createElement('div');
         getElementByQuery.mockReturnValue(mockPlayerElement);
     });
     it('should add "livestream-no-dvr" class when isLiveStream is true and hasDvrWindow is false', () => {
-        mockStreamObject.stream.isLiveStream = true;
-        mockStreamObject.stream.hasDvrWindow = false;
+        streamObject.stream.isLiveStream = true;
+        streamObject.stream.hasDvrWindow = false;
         handleLiveStreamNoDvr(mockPlayer, mockStreamObject);
         expect(mockPlayerElement).toHaveClass('livestream-no-dvr');
     });
     it('should remove "livestream-no-dvr" class when isLiveStream is false or hasDvrWindow is true', () => {
-        mockStreamObject.stream.isLiveStream = false;
-        mockStreamObject.stream.hasDvrWindow = true;
+        streamObject.stream.isLiveStream = false;
+        streamObject.stream.hasDvrWindow = true;
         handleLiveStreamNoDvr(mockPlayer, mockStreamObject);
         expect(mockPlayerElement).not.toHaveClass('livestream-no-dvr');
     });

package/lib/ui/nativemobileuifactory.js

@@ -1,6 +1,6 @@
 import { PlayerEvent } from 'bitmovin-player';
 import { UIManager } from 'bitmovin-player-ui';
-import { customSpecificErrorMessageOverlayConfig } from '../js/playeractions/handlers/customerrors';
+import { customSpecificErrorMessageOverlayConfig } from '../services/errors/errorText';
 import { localizationConfig } from '../js/settings/localization';
 import { nativeMobileUIContainer, sendCustomMessage } from './nativemobileuicontainer';
 import { CustomMessages } from '../types/interfaces';

package/lib/ui/uicontainer.js

@@ -11,6 +11,7 @@ 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';
+import { createVerticalVideoSettingsPanel } from './components/verticalvideo/settingspanel';
 export function createUIContainer(playerContext, player, variant) {
     const cssClassArray = ['npo-player'];
     const hidePlayerStateExceptions = [PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Prepared];
@@ -44,7 +45,9 @@ export function createUIContainer(playerContext, player, variant) {
             uiDelay = DEFAULT_UI_DELAY;
             cssClassArray.push('vertical-video');
             npoPlayer.player?.setAspectRatio('9:16');
-            components.push(new SubtitleOverlay(), new BufferingOverlay(), createVerticalVideoControlBar(playerContext), createTitleBar(npoPlayer));
+            const settingsPanel = createVerticalVideoSettingsPanel();
+            npoPlayer.uiComponents.settingsPanel = settingsPanel;
+            components.push(new PlaybackToggleOverlay(), new SubtitleOverlay(), new BufferingOverlay(), new PlaybackToggleOverlay(), settingsPanel, createVerticalVideoControlBar(playerContext, settingsPanel), createTitleBar(npoPlayer));
             break;
         }
     }

package/lib/ui/uicontainer.test.js

@@ -4,7 +4,7 @@ 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';
+import { BufferingOverlay, CastStatusOverlay, Container, ControlBar, ErrorMessageOverlay, PlaybackToggleButton, PlaybackToggleOverlay, SettingsPanel, SubtitleOverlay, TitleBar } from 'bitmovin-player-ui';
 describe('createUIContainer', () => {
     let playerContextMock;
     let playerMock;
@@ -68,8 +68,11 @@ describe('createUIContainer', () => {
         const uiContainer = createUIContainer(playerContextMock, playerMock, NpoPlayerUIVariants.VERTICAL);
         expect(playerMock.setAspectRatio).toHaveBeenCalledWith('9:16');
         expect(uiContainer.getComponents()).toEqual([
+            expect.any(PlaybackToggleOverlay),
             expect.any(SubtitleOverlay),
             expect.any(BufferingOverlay),
+            expect.any(PlaybackToggleOverlay),
+            expect.any(SettingsPanel),
             expect.any(ControlBar),
             expect.any(TitleBar),
             expect.any(ErrorMessageOverlay)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [

package/src/style/components/_advert.scss

@@ -97,8 +97,8 @@
             height: 100%;
         }
 
-        .bmpui-ui-hugeplaybacktogglebutton {
-            opacity: 0;
-        }
+        // .bmpui-ui-hugeplaybacktogglebutton {
+        //     opacity: 0;
+        // }
     }
 }

package/src/style/components/_buffering.scss

@@ -1,13 +1,14 @@
 .bmpui-ui-buffering-overlay {
   background-color: var(--npo-player-bufferingcolor);
-  display: none;
   pointer-events: none;
+  z-index: z-index(buffering-overlay);
 
   > * {
     pointer-events: none;
   }
 
   .bmpui-container-wrapper {
+    position: absolute;
     display: flex;
     width: 100%;
     height: 100%;
@@ -29,7 +30,7 @@
     border-radius: 50%;
     background-image: conic-gradient(var(--npo-player-primarycolor), transparent);
     mask: radial-gradient(transparent 20px, var(--npo-player-primarycolor) 20px);
-    animation: none;
+    animation: rotation 2s infinite ease-in;
     pointer-events: none;
   }
 
@@ -43,16 +44,21 @@
 
 /* loading state */
 &:not(.bmpui-player-state-prepared):not(.bmpui-player-state-playing):not(.bmpui-player-state-paused):not(.bmpui-player-state-finished) {
-  .bmpui-ui-buffering-overlay,
-  .bmpui-ui-buffering-overlay.bmpui-hidden {
+  .bmpui-ui-buffering-overlay {
     display: block;
     opacity: 1;
     visibility: visible;
+  }
+}
 
-    .bmpui-ui-buffering-overlay-indicator {
-      display: block;
-      animation: rotation 2s infinite ease-in;
-    }
+&.bmpui-player-state-idle {
+  .bmpui-ui-buffering-overlay,
+  .bmpui-ui-buffering-overlay.bmpui-hidden {
+    display: none;
+  }
+
+  .bmpui-ui-buffering-overlay-indicator {
+    animation: none;
   }
 }
 

package/src/style/components/_error.scss

@@ -1,4 +1,12 @@
+& {
+    --npo-player-errormessage-background-image: none
+}
+
 .bmpui-ui-errormessage-overlay {
+    z-index: z-index(error-message-overlay);
+    background-image: var(--npo-player-errormessage-background-image);
+    background-size: cover;
+
     .bmpui-ui-tvnoisecanvas {
         display: none;
     }
@@ -20,9 +28,44 @@
 .bmpui-ui-errormessage-label {
     font-family: var(--font-bold);
     font-weight: 700;
-    font-size: 22px;
+    font-size: 18px;
     line-height: 130%;
     text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
     padding: 15px 5px;
     user-select: none;
+    .errorcode{
+        font-size: 16px;
+        font-weight: 300;
+        padding-bottom: 12px;
+        display: inline-block;
+    }
+
+    .retry-button {
+        position: relative;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 8px;
+        padding: 12px 16px 12px 40px;
+        cursor: pointer;
+        transition: border-color 0.3s ease-in-out;
+        &:hover {
+            border-color: rgba(255, 255, 255, 1);
+        }
+        &::before {
+            content: '';
+            position: absolute;
+            top: 8px;
+            left: 12px;
+            width: 24px;
+            height: 24px;
+            background-color:  var(--npo-player-textcolor);
+            mask-image: var(--npo-player-icon-replay);
+            mask-size: contain;
+            mask-repeat: no-repeat;
+        }
+    }
+
 }
+
+.npo-player-error{
+    cursor: pointer !important;
+}

package/src/style/components/_hugeplaybacktogglebutton.scss

@@ -36,6 +36,7 @@
 /* Icon Play */
 .bmpui-ui-hugeplaybacktogglebutton {
     padding: 0;
+    z-index: z-index(hugeplayback-toggle-button);
 
     .bmpui-image {
         cursor: pointer;

package/src/style/components/_metadata.scss

@@ -1,11 +1,18 @@
 .bmpui-metadata {
-  padding: 24px 18px;
+  padding: 0;
   color: var(--npo-player-textcolor);
+  height: 100%;
+  background: none;
 
   .bmpui-container-wrapper {
+    position: relative;
     display: grid;
-    grid-template-columns: auto auto;
-    grid-template-rows: auto auto;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    grid-template-columns: auto min-content;
+    grid-template-rows: min-content min-content auto;
+    column-gap: 8px;
+    padding: 24px 18px;
   }
 
   .bmpui-label-metadata-title {
@@ -29,18 +36,12 @@
     opacity: 0.65;
     grid-column: 1;
     grid-row: 2;
-
-    // Max 4 lines
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include max-lines(4)
   }
 
   .bmpui-nicam {
     grid-column: 2;
-    grid-row: 1;
-    justify-content: end;
+    grid-row: 1 / span 3;
+    height: 10%;
   }
 }

package/src/style/components/_nicam.scss

@@ -1,14 +1,15 @@
 .bmpui-nicam {
     display: flex;
     width: 100%;
-    padding-left: 1px; // offset the negative padding on the nicam icon
+    justify-content: flex-end;
 
     .nicam-icon {
         display: block;
-        height: 25px;
-        width: 25px;
+        height: 100%;
+        width: auto;
+        min-height: 25px;
+        aspect-ratio: 1 / 1;
         margin-left: -1px; //according to the design spec icons must overlap by 1px
-        margin-top: 3px;
         background-size: contain;
         background-position: center;
         background-repeat: no-repeat;
@@ -88,11 +89,15 @@
 &.bmpui-show-nicam {
   .bmpui-metadata,
   .bmpui-metadata.bmpui-title-bar {
-    display: block;
+    display: block !important;
     opacity: 1;
     visibility: visible;
     background: none;
 
+    &::before {
+        display: none;
+    }
+
     .bmpui-label-metadata-title,
     .bmpui-label-metadata-description {
       opacity: 0;
@@ -105,4 +110,4 @@
         padding-top: 40px;
     }
   }
-}
+}

package/src/style/components/_playnext.scss

@@ -6,7 +6,7 @@
     left: 0;
     right: 0;
     background-color: rgba(0, 0, 0, 0.07);
-    z-index: 10;
+    z-index: z-index(playnext-overlay);
     pointer-events: none;
 
     &.show { 

package/src/style/components/_replay.scss

@@ -14,12 +14,7 @@
       }
 
       &::after {
-        animation: none;
-        background-repeat: no-repeat;
-        background-position: 50% 50%;
-        background-color: var(--npo-player-iconcolor);
-        mask-size: 48px;
-        mask-image: var(--npo-player-icon-replay) !important;
+        mask-image: var(--npo-player-icon-replay);
       }
     }
   }