@npo/player 1.18.4 → 1.20.0

package/lib/tests/mocks/mockNpoplayer.js

@@ -0,0 +1,115 @@
+export const mockNpoPlayer = {
+    playerConfig: {
+        key: jest.fn().mockReturnValue('mock-key'),
+        source: {
+            dash: jest.fn().mockReturnValue('mock-dash'),
+            hls: jest.fn().mockReturnValue('mock-hls'),
+            progressive: jest.fn().mockReturnValue('mock-progressive'),
+            poster: jest.fn().mockReturnValue('mock-poster')
+        },
+        playback: {
+            autoplay: jest.fn().mockReturnValue(true),
+            muted: jest.fn().mockReturnValue(false)
+        },
+        style: {
+            width: jest.fn().mockReturnValue('100%'),
+            aspectratio: jest.fn().mockReturnValue('16:9')
+        }
+    },
+    sourceConfig: {},
+    streamObject: {},
+    uiManager: null,
+    canceledPlayNextScreen: false,
+    npoTag: undefined,
+    fragment: null,
+    logEmitter: {},
+    uiComponents: {
+        settingsPanel: {
+            isShown: jest.fn().mockReturnValue(true),
+            hide: jest.fn(),
+            activePage: jest.fn(),
+            navigationStack: jest.fn(),
+            settingsPanelEvents: jest.fn(),
+            hideTimeout: jest.fn(),
+        },
+    },
+    container: document.createElement('div'),
+    initPlayer: jest.fn(),
+    loadStream: jest.fn(),
+    createUIManager: jest.fn(),
+    doError: jest.fn(),
+    player: {
+        getCurrentTime: jest.fn().mockReturnValue(10),
+    },
+    streamTracker: {
+        start: jest.fn(),
+        buffering: jest.fn(),
+        buffering_complete: jest.fn(),
+        complete: jest.fn(),
+        fullscreen: jest.fn(),
+        load: jest.fn(),
+        load_complete: jest.fn(),
+        pause: jest.fn(),
+        resume: jest.fn(),
+        stop: jest.fn(),
+        windowed: jest.fn(),
+        time: jest.fn(),
+        seek: jest.fn(),
+    },
+    adBreakActive: false,
+    streamOptions: {},
+    jwt: '',
+    apiPayload: {},
+    version: '',
+    drmProfile: {},
+    variant: '',
+    isShowingPlayNextScreen: false,
+    keyPress: function (e) {
+        jest.fn();
+    },
+    setVolume: function (volume) {
+        jest.fn();
+    },
+    increaseVolume: function () {
+        jest.fn();
+    },
+    decreaseVolume: function () {
+        jest.fn();
+    },
+    goForward: function (seconds) {
+        jest.fn();
+    },
+    goBackwards: function (seconds) {
+        jest.fn();
+    },
+    watchFromStart: function () {
+        jest.fn();
+    },
+    showPlayNextScreen: function () {
+        jest.fn();
+    },
+    cancelPlayNextScreen: function () {
+        jest.fn();
+    },
+    hidePlayNextScreen: function () {
+        jest.fn();
+    },
+    doPlayNext: function () {
+        jest.fn();
+    },
+    destroy: function (asyncMode) {
+        throw new Error('Function not implemented.');
+    },
+    unload: function (asyncMode) {
+        throw new Error('Function not implemented.');
+    },
+    printVersion: function () {
+        jest.fn();
+    },
+    play: function () {
+        throw new Error('Function not implemented.');
+    },
+    pause: function () {
+        throw new Error('Function not implemented.');
+    }
+};

package/lib/types/interfaces.d.ts

@@ -15,6 +15,15 @@ export interface ApiPayload {
     baseURL: string;
     jwt: string;
     data: Record<string, unknown>;
+    ster?: SterData;
+}
+interface SterData {
+    identifier: string;
+    site?: string;
+    deviceType?: number;
+    os?: string;
+    osVersion?: string;
+    player?: string;
 }
 export interface DRMProfile {
     profileName: string;
@@ -86,6 +95,7 @@ export interface StreamOptions {
     ageRating?: string;
     nicam?: string[] | null;
     playNext?: PlayNext;
+    ster?: SterData;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.18.4",
+  "version": "1.20.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -9,7 +9,7 @@
     "Arjan Kruithof"
   ],
   "engines": {
-    "node": "^18.16.0"
+    "node": "^18 || ^20"
   },
   "license": "ISC",
   "main": "./lib/npoplayer",
@@ -24,7 +24,7 @@
     "bundle": "npm run lint && bash build-lib.sh && npm run build:scss && npm run build:cdn",
     "build:ts": "bash build-lib.sh",
     "test": "jest",
-    "test:ci": "node_modules/.bin/jest",
+    "test:ci": "jest --collectCoverage --testResultsProcessor=jest-sonar-reporter",
     "version:dev": "npm version prerelease --preid=dev --no-git-tag-version"
   },
   "files": [
@@ -55,7 +55,7 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-sonarjs": "^0.19.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
     "fs-extra": "^11.1.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.4.1",
@@ -81,9 +81,9 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "^3.0.0",
-    "bitmovin-player": "8.125.0",
-    "bitmovin-player-ui": "^3.48.0"
+    "@npotag/tag": "^3.0.1",
+    "bitmovin-player": "8.151.0",
+    "bitmovin-player-ui": "3.54.0"
   },
   "browserslist": [
     "defaults",

package/src/scss/components/_advert.scss

@@ -18,19 +18,19 @@
             .bmpui-seekbar-bufferlevel {
                 position: relative;
                 z-index: 2;
-                background-color: var(--npo-player-white);
+                background-color: #fff;
                 opacity: 0.6;
             }
 
             .bmpui-seekbar-backdrop {
-                background-color: var(--npo-player-white);
+                background-color: #fff;
                 opacity: 0.3;
             }
 
             .bmpui-seekbar-playbackposition {
                 position: relative;
                 z-index: 3;
-                background: var(--npo-player-white);
+                background: #fff;
                 backdrop-filter: blur(50px);
             }
         }
@@ -42,7 +42,7 @@
         align-items: center;
         top: 24px;
         left: 24px;
-        font-family: var(--fontBold);
+        font-family: 'NPOSansBold', sans-serif;
         font-weight: 700;
 
         &::before {
@@ -80,7 +80,7 @@
             width: fit-content;
 
             .bmpui-label {
-                font-family: var(--fontNormal);
+                font-family: 'NPOSansRegular', sans-serif;
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 0;

package/src/scss/components/_hugeplaybacktogglebutton.scss

@@ -3,6 +3,7 @@
 &.bmpui-player-state-finished {
     .bmpui-ui-playbacktoggle-overlay {
         display: unset;
+
         .bmpui-ui-hugeplaybacktogglebutton {
             .bmpui-image {
                 animation: none;

package/src/scss/components/_metadata.scss

@@ -2,12 +2,21 @@
   padding: 24px 18px;
   color: var(--npo-player-textcolor);
 
+  .bmpui-container-wrapper {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+  }
+
   .bmpui-label-metadata-title {
     font-family: var(--fontBold);
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
     line-height: 19.2px;
+    grid-column: 1;
+    grid-row: 1;
+    gap: 0;
   }
 
   .bmpui-label-metadata-description {
@@ -18,6 +27,8 @@
     line-height: 20px;
     margin: 4px 0;
     opacity: 0.65;
+    grid-column: 1;
+    grid-row: 2;
 
     // Max 4 lines
     display: -webkit-box;
@@ -26,4 +37,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .bmpui-nicam {
+    grid-column: 2;
+    grid-row: 1;
+    justify-content: end;
+  }
 }

package/src/scss/components/_nicam.scss

@@ -77,4 +77,24 @@
             background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM82.2,66.9,35.1,19.7A35.793,35.793,0,0,0,19.7,35.1L66.8,82.2A35.552,35.552,0,0,0,82.2,66.9Z'/></g></svg>");
         }
     }
+}
+
+// show nicam on default state
+&.bmpui-player-state-prepared,
+&.bmpui-player-state-prepared.bmpui-layout-max-width-400,
+&.bmpui-player-state-prepared.bmpui-layout-max-width-600,
+&.show-nicam:not(.bmpui-player-state-paused).bmpui-layout-max-width-400,
+&.show-nicam:not(.bmpui-player-state-paused).bmpui-layout-max-width-600 {
+  .bmpui-metadata,
+  .bmpui-metadata.bmpui-title-bar {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    background: none;
+
+    .bmpui-label-metadata-title,
+    .bmpui-label-metadata-description {
+      display: none;
+    }
+  }
 }

package/src/scss/components/_replay.scss

@@ -1,4 +1,5 @@
-&.bmpui-player-state-finished {
+&.bmpui-player-state-finished,
+&.bmpui-player-state-replay {
   .bmpui-ui-playbacktoggle-overlay {
     display: block !important;
 
@@ -14,7 +15,6 @@
 
       &::after {
         animation: none;
-        background-color: transparent;
         background-repeat: no-repeat;
         background-position: 50% 50%;
         background-color: var(--npo-player-iconcolor);

package/src/scss/components/_seekbarthumbnail.scss

@@ -13,7 +13,6 @@
               width: 148px;
               border-radius: 12px;
               border: 2px solid var(--npo-player-white);
-              border-radius: 12px;
               box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);
               margin-bottom: 4px;
               display: none;

package/src/scss/components/_subtitles.scss

@@ -20,6 +20,7 @@
             overflow: hidden;
             writing-mode: horizontal-tb;
             width: 100% !important;
+            inset: none !important;
             display: block !important;
             bottom: 18px !important;
             left: 0 !important;
@@ -27,7 +28,6 @@
             top: auto !important;
             font-size: 1em !important;
             font-weight: 400 !important;
-            inset: none !important;
             padding: 0 18px;
 
             @container (min-width: 600px) {