@npo/player 1.24.7 → 1.26.0

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.24.7",
+  "version": "1.26.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -89,8 +89,8 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "3.2.1",
-    "bitmovin-player": "8.173.0",
+    "@npotag/tag": "3.2.4",
+    "bitmovin-player": "^8.166.0",
     "bitmovin-player-ui": "3.67.0"
   },
   "browserslist": [

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/_icons.scss

@@ -109,6 +109,11 @@
     &.bmpui-on .bmpui-label {
         mask-image: var(--npo-player-icon-cast-active);
     }
+
+    &.bmpui-disabled,
+    &.bmpui-hidden {
+        display: none;
+    }
 }
 
 /* Icon Airplay */

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;
     }
   }
 

package/src/style/components/_settingspanel.scss

@@ -3,18 +3,39 @@ $settings-panel-line-height: 19px;
 
 .bmpui-ui-settings-panel {
     display: block;
-    padding: 40px 24px 24px;
+    padding: 0;
     height: auto;
-    min-width: 290px; //Hotfix for select capping of text with only 'Snelheid'
+    min-width: 270px;
     z-index: 100;
     filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.35));
     border-radius: 12px;
     background-color: var(--npo-player-secondarycolor);
     color: var(--npo-player-textcolor);
     font-family: var(--fontRegular);
+    overflow: visible;
+    bottom: 75px;
 
-    > .bmpui-container-wrapper {
-        margin: 0;
+    &::after {
+        content: '';
+        position: absolute;
+        background: var(--npo-player-secondarycolor);
+        border-radius: 6px;
+        width: 32px;
+        height: 32px;
+        bottom: -10px;
+        transform: rotate(-45deg);
+        right: 36px;
+    }
+
+    .bmpui-container-wrapper {
+        position: relative;
+        z-index: 1;
+    }
+
+    label {
+        font-size: $settings-panel-font-size;
+        line-height: $settings-panel-line-height;
+        opacity: .75;
     }
 
     .bmpui-setting-header {
@@ -32,7 +53,7 @@ $settings-panel-line-height: 19px;
     .bmpui-ui-settingspanelpageopenbutton:focus-visible {
         box-shadow: none;
 
-        .bmpui-label {
+        .bmpui-ui-label {
             @include focusStyle(-2px);
         }
     }
@@ -43,8 +64,19 @@ $settings-panel-line-height: 19px;
         > .bmpui-container-wrapper {
             display: flex;
             flex-direction: column;
-            padding: 0px;
-            gap: 16px;
+            padding: 52px 24px 16px;
+            gap: 10px;
+
+            &::before {
+                content: '';
+                opacity: 0.1;
+                height: 1px;
+                left: 0;
+                width: 100%;
+                position: absolute;
+                background-color: currentColor;
+                top: 36px;
+            }
 
             label {
                 font-size: $settings-panel-font-size;
@@ -83,7 +115,7 @@ $settings-panel-line-height: 19px;
                     border: solid 0.17em var(--npo-player-textcolor);
                     border-width: 0 0.17em 0.17em 0;
                     display: inline-block;
-                    padding: 0px;
+                    padding: 0;
                     margin-left: 8px;
                     transform: rotate(-45deg);
                 }
@@ -98,7 +130,7 @@ $settings-panel-line-height: 19px;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding: 0px;
+                padding: 0;
                 gap: 8px;
                 justify-content: space-between;
             }
@@ -111,8 +143,7 @@ $settings-panel-line-height: 19px;
         > .bmpui-container-wrapper {
             display: flex;
             flex-direction: column;
-            padding: 0px;
-            gap: 16px;
+            padding: 24px 24px 16px;
 
             .bmpui-ui-settingspanelpagebackbutton {
                 width: auto;
@@ -217,10 +248,10 @@ $settings-panel-line-height: 19px;
 
     .bmpui-ui-settingstogglebutton {
         position: absolute;
-        top: 12px;
-        right: 20px;
-        width: 32px;
-        height: 32px;
+        top: 8px;
+        right: 8px;
+        width: 24px;
+        height: 24px;
         padding: 0;
 
         span {
@@ -230,8 +261,8 @@ $settings-panel-line-height: 19px;
         &::before,
         &::after {
             content: '';
-            top: 8px;
-            left: 16px;
+            top: 4px;
+            left: 12px;
             width: 2px;
             height: 15px;
             position: absolute;

package/src/style/components/vertical-video/_settingspanel.scss

@@ -1,5 +1,5 @@
 .bmpui-ui-settings-panel {
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;