@npo/player 1.21.0 → 1.22.0

package/lib/js/ui/nativemobileuifactory.js

@@ -7,9 +7,9 @@ import { addFragments } from '../ui/components/nativemobile/addFragments';
 import { CustomMessages } from '../../types/interfaces';
 import { processNicam } from './handlers/nicamhandler';
 import { removeFragments } from '../fragments/removefragments';
-import { showPlayNextScreenIfNeeded } from './components/shared/playnextscreen';
 import { getPlayerElement, removePlayerElementClass } from '../utilities/utilities';
 import { handleLiveStreamNoDvr } from './handlers/domhandlers';
+import { removeReplayClass } from '../playeractions/handlers/removereplayclass';
 export function nativeMobileUiFactory(player, config = {}) {
     UIManager.setLocalizationConfig(localizationConfig);
     const containerElement = getPlayerElement(player, '.bmpui-npo-player');
@@ -24,8 +24,8 @@ export function nativeMobileUiFactory(player, config = {}) {
     const mobileUIManager = new UIManager(player, nativeMobileUIContainer(player), uiConfig);
     let _webData = {};
     const removeFinishedClass = () => {
-        player.off(PlayerEvent.Seeked, removeFinishedClass);
-        removePlayerElementClass(player, '.bmpui-npo-player.bmpui-player-state-finished', 'bmpui-player-state-finished');
+        player.off(PlayerEvent.Seek, removeFinishedClass);
+        removeReplayClass(player);
     };
     const clearUI = () => {
         adBreakActive = false;
@@ -34,7 +34,6 @@ export function nativeMobileUiFactory(player, config = {}) {
         if (seekbarTitleElement)
             seekbarTitleElement.textContent = '';
         removePlayerElementClass(player, '.bmpui-npo-player', 'livestream-no-dvr');
-        player.off(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
         removeFragments(mobileUIManager);
     };
     const updateUI = () => {
@@ -47,9 +46,6 @@ export function nativeMobileUiFactory(player, config = {}) {
         if (seekbarTitleElement)
             seekbarTitleElement.textContent = _webData.title || '';
         handleLiveStreamNoDvr(player, _webData, containerElement);
-        if (_webData.playNext?.showPlayNext) {
-            player.on(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
-        }
         const section = _webData.segment ? {
             start: _webData.segment.inpoint,
             end: _webData.segment.outpoint,
@@ -61,15 +57,6 @@ export function nativeMobileUiFactory(player, config = {}) {
         adBreakActive = false;
         player.off(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
     };
-    const handleShowPlayNextScreen = () => {
-        let contentDuration = player.getDuration();
-        let playnextOffset = _webData.playNext.offset;
-        const container = player.getContainer();
-        if (player.getCurrentTime() >= contentDuration - playnextOffset && !adBreakActive) {
-            showPlayNextScreenIfNeeded(_webData.playNext.duration, container, undefined, true);
-            player.off(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
-        }
-    };
     if (window.bitmovin?.customMessageHandler) {
         const handleData = (data) => {
             clearUI();
@@ -80,9 +67,6 @@ export function nativeMobileUiFactory(player, config = {}) {
         };
         window.bitmovin.customMessageHandler.on(CustomMessages.SET_STREAM_LINK, handleData);
         window.bitmovin.customMessageHandler.on(CustomMessages.SET_WEB_DATA, handleData);
-        if (_webData.playNext?.showPlayNext === true) {
-            player.on(PlayerEvent.TimeChanged, handleShowPlayNextScreen);
-        }
         window.bitmovin.customMessageHandler.on(CustomMessages.DO_ERROR, (data) => {
             if (!data)
                 return;
@@ -118,7 +102,7 @@ export function nativeMobileUiFactory(player, config = {}) {
         });
         sendCustomMessage(CustomMessages.ERROR_TRIGGERED, { error: event });
     };
-    player.on(PlayerEvent.Seeked, removeFinishedClass);
+    player.on(PlayerEvent.Seek, removeFinishedClass);
     player.on(PlayerEvent.Ready, addEventListeners);
     player.on(PlayerEvent.Error, (event) => {
         onPlayerError(event);

package/lib/npoplayer.js

@@ -1,7 +1,7 @@
 import { Player, PlayerEvent, } from 'bitmovin-player';
 import AdsModuleBM from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
 import { logEvent, initPlayerTracker, startPlayerTracker } from './js/tracking/playertracker';
-import { hidePlayNextScreen, showPlayNextScreenIfNeeded } from './js/ui/components/shared/playnextscreen';
+import { hidePlayNextScreen, showPlayNextScreenIfNeeded } from './js/ui/handlers/playnextscreen';
 import * as utility from './js/utilities/utilities';
 import * as drm from './js/drm/drm';
 import * as playerAction from './js/playeractions/playeractions';
@@ -24,30 +24,31 @@ import { updateLiveMarkers } from './js/markers/updateLiveMarkers';
 export { NpoPlayerUIVariants, };
 export default class NpoPlayer {
     constructor(_container, _playerConfig, _npotag, _npotaginstance, _variant) {
-        this.playerConfig = _playerConfig;
         this.sourceConfig = {};
         this.streamObject = {
             stream: { drmType: '', streamProfile: '', streamURL: '', avType: '', sourceProfile: '' },
             metadata: { title: '', description: '' },
-            assets: { scrubbingThumbnail: '', subtitles: [] }
+            assets: { scrubbingThumbnail: '', subtitles: [] },
+            user: { type: 'anonymous' }
         };
-        this.container = _container;
         this.player = null;
         this.uiManager = null;
-        this.fragment = null;
         this.streamTracker = null;
+        this.logEmitter = new LogEmitter();
+        this.uiComponents = {};
+        this.fragment = null;
         this.streamOptions = {};
         this.jwt = '';
         this.apiPayload = { baseURL: '', jwt: '', data: {} };
         this.adBreakActive = false;
         this.version = pkg.version;
         this.drmProfile = { profileName: '', drm: '' };
-        this.variant = _variant || NpoPlayerUIVariants.DEFAULT;
-        initPlayerTracker(this, _npotag, _npotaginstance);
-        this.logEmitter = new LogEmitter();
-        this.uiComponents = {};
         this.isShowingPlayNextScreen = false;
         this.canceledPlayNextScreen = false;
+        this.playerConfig = _playerConfig;
+        this.container = _container;
+        this.variant = _variant || NpoPlayerUIVariants.DEFAULT;
+        initPlayerTracker(this, _npotag, _npotaginstance);
         this.initPlayer(this.container, _playerConfig, this.variant);
     }
     initPlayer(_container, playerConfig, variant) {
@@ -90,8 +91,14 @@ export default class NpoPlayer {
         }.bind(this);
         if (isUrl && isMedia) {
             this.sourceConfig = {
-                ...options.sourceConfig,
-                'progressive': source
+                ...options.sourceConfig ?? {},
+                'progressive': source,
+                analytics: {
+                    customData2: 'other',
+                    customData3: 'unknown',
+                    customData4: this.npoTag?.npoTagInstance?.getParty(),
+                    customData5: this.version
+                },
             };
             this.player?.load(this.sourceConfig);
             getDurationAndStartPlayerTracker();
@@ -130,21 +137,27 @@ export default class NpoPlayer {
             if (this.streamObject?.stream == undefined)
                 return;
             const drmType = this.streamObject.stream.drmType ?? null;
-            this.sourceConfig = await playerAction.processSourceConfig(options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : null, this.streamOptions.useWidevineServerCertificate ?? true);
+            this.sourceConfig = await playerAction.processSourceConfig(options.sourceConfig ?? {}, this.streamObject, drmType && drmType.length > 0 ? profile.drm : null, this.streamOptions, this.version, this.npoTag?.npoTagInstance?.getParty());
             await drm.verifyDRM(this, this.player, payload);
             setupMediaSessionActionHandlers(this.player, this.sourceConfig, _streamObject);
             logEvent(this, 'load');
             let streamDuration = _streamObject.metadata.duration;
             let streamPrid = this.streamObject.metadata.prid || _streamObject.metadata.prid;
-            streamDuration = streamDuration == null
-                ? this.player.on(PlayerEvent.SourceLoaded, getDurationAndStartPlayerTracker)
-                : startPlayerTracker(this, utility.validateStreamLength(streamDuration, false), this.version, streamPrid);
             if (this.isShowingPlayNextScreen) {
                 this.hidePlayNextScreen();
             }
+            function initAndStartTracker() {
+                if (this.player === null)
+                    return;
+                streamDuration = streamDuration == null
+                    ? this.player.on(PlayerEvent.SourceLoaded, getDurationAndStartPlayerTracker)
+                    : startPlayerTracker(this, utility.validateStreamLength(streamDuration, false), this.version, streamPrid);
+            }
+            let prerollPromise = Promise.resolve();
             if (this.variant !== NpoPlayerUIVariants.AUDIO) {
-                await handlePreRolls(this.player, _streamObject, this);
+                prerollPromise = handlePreRolls(this.player, _streamObject, this);
             }
+            prerollPromise.then(() => initAndStartTracker.bind(this)());
         }
         else {
             this.doError(`Het is niet gelukt de stream op te halen: \n Input is geen valide token of media object.`, 500);
@@ -191,7 +204,8 @@ export default class NpoPlayer {
         if (this.uiManager === null || variant !== this.variant) {
             const uiConfig = {
                 errorMessages: customSpecificErrorMessageOverlayConfig,
-                disableAutoHideWhenHovered: true
+                disableAutoHideWhenHovered: true,
+                seekbarSnappingEnabled: false,
             };
             this.uiManager = new UIManager(player, createUIContainer(this, player, variant, this.container), uiConfig);
             this.variant = variant;
@@ -287,7 +301,7 @@ export default class NpoPlayer {
     updateMarkers(timeLineMarkers) {
         if (!(this.player && this.uiManager && this.streamObject.stream.isLiveStream))
             return;
-        updateLiveMarkers(timeLineMarkers, this.player, this.uiManager);
+        updateLiveMarkers(timeLineMarkers, this.player, this.uiManager, this.streamOptions.autoFillTimeLineMarkerDuration ?? true);
     }
     ;
     cancelPlayNextScreen() {

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -84,7 +84,7 @@
   "dependencies": {
     "@npotag/tag": "^3.0.1",
     "bitmovin-player": "8.151.0",
-    "bitmovin-player-ui": "3.54.0"
+    "bitmovin-player-ui": "3.60.0"
   },
   "browserslist": [
     "defaults",

package/lib/src/js/markers/updateLiveMarkers.d.ts

@@ -1,4 +1,4 @@
 import { PlayerAPI } from "bitmovin-player";
 import { UIManager } from "bitmovin-player-ui";
 import { TimeLineMarker } from "types/interfaces";
-export declare function updateLiveMarkers(timeLineMarkers: TimeLineMarker[], player: PlayerAPI, uiManager: UIManager): void;
+export declare function updateLiveMarkers(timeLineMarkers: TimeLineMarker[], player: PlayerAPI, uiManager: UIManager, autoFillTimeLineMarkerDuration: boolean): void;

package/lib/src/js/playeractions/handlers/processsourceconfig.d.ts

@@ -1,3 +1,3 @@
-import { StreamObject } from 'types/interfaces';
+import { StreamObject, StreamOptions } from 'types/interfaces';
 import { SourceConfig } from 'bitmovin-player';
-export declare function processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | null | undefined, useWidevineServerCertificate: boolean): Promise<SourceConfig>;
+export declare function processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm: string | null | undefined, streamOptions: StreamOptions, version: string, npoTagPartyId: string | undefined): Promise<SourceConfig>;

package/lib/src/js/tracking/handlers/eventlogging.d.ts

@@ -1,2 +1,2 @@
-import NpoPlayer from "../../../npoplayer";
+import NpoPlayer from '../../../npoplayer';
 export declare function logEvent(npoplayer: NpoPlayer, event: string, data?: any): void;

package/lib/src/js/ui/components/nativemobile/buttons.d.ts

@@ -1,18 +1,6 @@
 import { AirPlayToggleButton, Button, CastToggleButton, ControlBar, FullscreenToggleButton, PictureInPictureToggleButton, PlaybackToggleButton, SettingsPanel, SettingsToggleButton, VolumeToggleButton } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
 export declare function createMiddleButtons(player: PlayerAPI): ControlBar;
-export declare function createPlayNextButton(player: PlayerAPI): Button<{
-    cssClass: string;
-    text: string;
-    ariaLabel: string;
-    hidden: false;
-}>;
-export declare function createCancelPlayNextButton(player: PlayerAPI): Button<{
-    cssClass: string;
-    text: string;
-    ariaLabel: string;
-    hidden: false;
-}>;
 export declare function createWatchFromStartButton(): Button<{
     cssClass: string;
     text: string;

package/lib/{js/ui/components/shared → src/js/ui/handlers}/playnextscreen.d.ts

@@ -1,2 +1,2 @@
-export declare function showPlayNextScreenIfNeeded(overlayDuration: number, containerEl: HTMLElement, proceedCallBack?: () => void, nativeUI?: boolean): void;
-export declare function hidePlayNextScreen(containerEl: HTMLElement, nativeUI?: boolean): void;
+export declare function showPlayNextScreenIfNeeded(overlayDuration: number, containerEl: HTMLElement, proceedCallBack?: () => void): void;
+export declare function hidePlayNextScreen(containerEl: HTMLElement): void;

package/lib/src/types/interfaces.d.ts

@@ -10,6 +10,9 @@ export interface StreamObject {
     stream: StreamObject_Stream;
     metadata: StreamObject_Metadata;
     assets: StreamObject_Assets;
+    user: {
+        type: 'plus' | 'anonymous';
+    };
 }
 export interface ApiPayload {
     baseURL: string;
@@ -65,6 +68,7 @@ export interface StreamObject_Metadata {
     language?: string[];
     nicam?: string[] | null;
     poster?: string;
+    posterIsDefault?: boolean;
     prid?: string;
     sourceIP?: string;
     ageRating?: string;
@@ -97,6 +101,8 @@ export interface StreamOptions {
     ster?: SterData;
     enableSubtitles?: boolean;
     useWidevineServerCertificate?: boolean;
+    customFallbackPoster?: string;
+    autoFillTimeLineMarkerDuration?: boolean;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -170,5 +176,7 @@ export interface PlayNext {
 export type TimeLineMarker = {
     time: number;
     title: string;
+    duration?: number;
+    cssClasses?: string[];
 };
 export {};

package/lib/types/interfaces.d.ts

@@ -10,6 +10,9 @@ export interface StreamObject {
     stream: StreamObject_Stream;
     metadata: StreamObject_Metadata;
     assets: StreamObject_Assets;
+    user: {
+        type: 'plus' | 'anonymous';
+    };
 }
 export interface ApiPayload {
     baseURL: string;
@@ -65,6 +68,7 @@ export interface StreamObject_Metadata {
     language?: string[];
     nicam?: string[] | null;
     poster?: string;
+    posterIsDefault?: boolean;
     prid?: string;
     sourceIP?: string;
     ageRating?: string;
@@ -97,6 +101,8 @@ export interface StreamOptions {
     ster?: SterData;
     enableSubtitles?: boolean;
     useWidevineServerCertificate?: boolean;
+    customFallbackPoster?: string;
+    autoFillTimeLineMarkerDuration?: boolean;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -170,5 +176,7 @@ export interface PlayNext {
 export type TimeLineMarker = {
     time: number;
     title: string;
+    duration?: number;
+    cssClasses?: string[];
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -84,7 +84,7 @@
   "dependencies": {
     "@npotag/tag": "^3.0.1",
     "bitmovin-player": "8.151.0",
-    "bitmovin-player-ui": "3.54.0"
+    "bitmovin-player-ui": "3.60.0"
   },
   "browserslist": [
     "defaults",

package/src/scss/components/_icons.scss

@@ -7,7 +7,7 @@
 .bmpui-ui-casttogglebutton,
 .bmpui-ui-airplaytogglebutton,
 .bmpui-ui-piptogglebutton {
-    background-image: none;
+    background-image: none !important;
     width: 21px;
     height: 40px;
     padding: 0 5px;

package/src/scss/components/_playnext.scss

@@ -28,8 +28,36 @@
         }
 
         .ui-playNextButton {
-            background-color: var(--npo-player-textcolor);
+            background-color: var(--npo-player-graycolor-light);
             white-space: nowrap;
+            overflow: hidden;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 0;
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+                background: var(--npo-player-textcolor);
+                animation-name: widthAnimation;
+                animation-timing-function: linear;
+                animation-duration: var(--animation-duration);
+                animation-fill-mode: forwards;
+                animation-delay: 0s;
+
+                @keyframes widthAnimation {
+                    from {
+                        width: 0;
+                    }
+                    to {
+                        width: 100%;
+                    }
+                }
+            }
 
             .bmpui-label {
                 color: var(--npo-player-graycolor-dark);

package/src/scss/components/_textbuttons.scss

@@ -11,13 +11,6 @@
     right: 0px;
     bottom: 0px;
     pointer-events: none;
-
-    // strange fix for firefox bug caused by the absence of
-    // an element containing the backdrop-filter property when
-    // set to display: none after initially being shown on first pageload
-    @-moz-document url-prefix() {
-        backdrop-filter: brightness(1);
-    }
 }
 
 .bmpui-ui-textbutton {
@@ -30,6 +23,7 @@
     filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.45));
 
     .bmpui-label {
+        position: relative;
         display: block;
         font-family: var(--fontBold);
         font-weight: 700;
@@ -37,6 +31,22 @@
         color: #ffffff;
     }
 
+    &-icon {
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: currentColor;
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        vertical-align: text-bottom;
+        margin-right: 5px;
+
+
+        &-play {
+            mask-image: var(--npo-player-icon-play);
+        }
+    }
+
     &:focus-visible {
         @include focusStyle();
     }