@npo/player 1.17.2 → 1.18.1

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

@@ -1,40 +1,35 @@
 import { processNicam } from './nicamhandler';
-describe("NICAM Processing", () => {
+describe('NICAM Processing', () => {
     let mockElement;
     let mockStreamObject;
     let mockStreamOptions;
-    let containerId = 'testId';
     beforeEach(() => {
         mockElement = { innerHTML: '', appendChild: jest.fn() };
         document.querySelector = jest.fn().mockReturnValue(mockElement);
         mockStreamObject = {
             metadata: {
                 ageRating: '12',
-                nicam: ["GEWELD", "ANGST", "GROF_TAALGEBRUIK"]
+                nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK']
             }
         };
         mockStreamOptions = {
             ageRating: '12',
-            nicam: ["DRUGS_EN_ALCOHOL"]
+            nicam: ['DRUGS_EN_ALCOHOL']
         };
     });
-    it("processes NICAM and age rating with streamOptions taking priority", () => {
-        processNicam(mockStreamObject, containerId, mockStreamOptions);
-        expect(document.querySelector).toHaveBeenCalledWith(`#${containerId} .bmpui-nicam`);
-        expect(mockElement.innerHTML).toBe("");
+    it('processes NICAM and age rating with streamOptions taking priority', () => {
+        processNicam(mockStreamObject, mockElement, mockStreamOptions);
+        expect(mockElement.innerHTML).toBe('');
         expect(mockElement.appendChild).toHaveBeenCalledTimes(2);
     });
-    it("does nothing if no NICAM element found", () => {
+    it('does nothing if no NICAM element found', () => {
         document.querySelector = jest.fn().mockReturnValue(null);
-        processNicam(mockStreamObject, containerId, mockStreamOptions);
-        expect(document.querySelector).toHaveBeenCalledWith(`#${containerId} .bmpui-nicam`);
+        processNicam(mockStreamObject, mockElement, mockStreamOptions);
     });
-    it("does nothing if no metadata and no streamOptions", () => {
+    it('does nothing if no metadata and no streamOptions', () => {
         mockStreamObject.metadata = {};
         mockStreamOptions = {};
-        processNicam(mockStreamObject, containerId, mockStreamOptions);
-        expect(document.querySelector).toHaveBeenCalledWith(`#${containerId} .bmpui-nicam`);
+        processNicam(mockStreamObject, mockElement, mockStreamOptions);
         expect(mockElement.appendChild).not.toHaveBeenCalled();
     });
 });
-//# sourceMappingURL=nicamhandler.test.js.map

package/lib/js/ui/handlers/playnexthandlers.js

@@ -1,2 +1 @@
 "use strict";
-//# sourceMappingURL=playnexthandlers.js.map

package/lib/js/ui/handlers/streamhandler.d.ts

@@ -1,4 +1,4 @@
-import { type StreamObject, type StreamOptions } from "../../../types/interfaces";
-import { PlayerAPI, SourceConfig } from "bitmovin-player";
-import { UIManager } from "bitmovin-player-ui";
+import { type StreamObject, type StreamOptions } from '../../../types/interfaces';
+import { PlayerAPI, SourceConfig } from 'bitmovin-player';
+import { UIManager } from 'bitmovin-player-ui';
 export declare function processStream(streamObject: StreamObject | undefined, container: HTMLElement, streamOptions: StreamOptions | null, player: PlayerAPI, uiManager: UIManager, sourceConfig: SourceConfig): void;

package/lib/js/ui/handlers/streamhandler.js

@@ -1,7 +1,7 @@
-import { processNicam } from "./nicamhandler";
+import { processNicam } from './nicamhandler';
 import * as playerAction from '../../playeractions/playeractions';
-import { PlayerEvent } from "bitmovin-player";
-import { setFragments } from "../../fragments/setfragments";
+import { PlayerEvent } from 'bitmovin-player';
+import { setFragments } from '../../fragments/setfragments';
 export function processStream(streamObject, container, streamOptions, player, uiManager, sourceConfig) {
     if (!streamObject)
         return;
@@ -21,7 +21,7 @@ export function processStream(streamObject, container, streamOptions, player, ui
             element.textContent = sourceConfig.title || '';
         }
     }
-    processNicam(streamObject, container.id, streamOptions);
+    processNicam(streamObject, container.querySelector('.bmpui-nicam'), streamOptions);
     if (streamOptions?.startOffset != null)
         playerAction.handleStartOffset(player, streamOptions.startOffset);
     const isLiveStream = streamObject.stream.isLiveStream && streamObject.stream.hasDvrWindow;
@@ -38,4 +38,3 @@ export function processStream(streamObject, container, streamOptions, player, ui
         });
     }
 }
-//# sourceMappingURL=streamhandler.js.map

package/lib/js/ui/handlers/timecontrolhandlers.js

@@ -15,4 +15,3 @@ export function forward(player) {
         player.seek(Math.min(player.getDuration(), player.getCurrentTime() + interval));
     }
 }
-//# sourceMappingURL=timecontrolhandlers.js.map

package/lib/js/ui/nativemobileuicontainer.js

@@ -48,4 +48,3 @@ export function nativeMobileUIContainer(player) {
         cssClasses: ['npo-player', 'native-mobile'],
     });
 }
-//# sourceMappingURL=nativemobileuicontainer.js.map

package/lib/js/ui/nativemobileuifactory.js

@@ -36,7 +36,7 @@ export function nativeMobileUiFactory(player, config = {}) {
     };
     const updateUI = () => {
         if (_streamObject.metadata?.ageRating) {
-            processNicam(_streamObject, 'ui-container', null);
+            processNicam(_streamObject, document.querySelector('#ui-container .bmpui-nicam'), null);
         }
         const isLiveStream = _streamObject.stream?.isLiveStream && _streamObject.stream?.hasDvrWindow;
         if (isLiveStream) {
@@ -93,4 +93,3 @@ export function nativeMobileUiFactory(player, config = {}) {
     });
     return mobileUIManager;
 }
-//# sourceMappingURL=nativemobileuifactory.js.map

package/lib/js/ui/uicontainer.js

@@ -77,4 +77,3 @@ export function createUIContainer(npoplayer, player, variant, container) {
         hideDelay: uiDelay
     });
 }
-//# sourceMappingURL=uicontainer.js.map

package/lib/js/utilities/localizationconfig.js

@@ -5,4 +5,3 @@ export const localizationConfig = {
         nl: nlJson.default
     }
 };
-//# sourceMappingURL=localizationconfig.js.map

package/lib/js/utilities/printversion.js

@@ -24,4 +24,3 @@ export function printVersion(version) {
     const versionStyle = 'font-size: 24px; font-weight: bold; padding: 2px 4px;';
     console.log(`%c${asciiArt}%c${title} %c${versionString}`, `color: ${colorCode}; background-color: rgb(11, 28, 54);`, titleStyle, versionStyle);
 }
-//# sourceMappingURL=printversion.js.map

package/lib/js/utilities/utilities.js

@@ -68,4 +68,3 @@ export async function isMediaUrl(url) {
 export function replaceSpecialChars(text) {
     return text.replace(/['()*]/g, (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`);
 }
-//# sourceMappingURL=utilities.js.map

package/lib/js/utilities/utilities.test.js

@@ -48,4 +48,3 @@ describe('isUrl', () => {
         expect(isUrl(invalidUrl)).toBe(false);
     });
 });
-//# sourceMappingURL=utilities.test.js.map

package/lib/npoplayer.d.ts

@@ -24,6 +24,8 @@ export default class NpoPlayer {
     version: string;
     drmProfile: DRMProfile;
     variant: NpoPlayerUIVariants;
+    isShowingPlayNextScreen: boolean;
+    canceledPlayNextScreen: boolean;
     constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | null, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig, variant: NpoPlayerUIVariants): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
@@ -37,6 +39,7 @@ export default class NpoPlayer {
     goBackwards(seconds: number): void;
     watchFromStart(): void;
     showPlayNextScreen(): void;
+    cancelPlayNextScreen(): void;
     hidePlayNextScreen(): void;
     doPlayNext(): void;
     destroy(): boolean;

package/lib/npoplayer.js

@@ -43,6 +43,8 @@ export default class NpoPlayer {
         initPlayerTracker(this, _npotag, _npotaginstance);
         this.logEmitter = new LogEmitter();
         this.uiComponents = {};
+        this.isShowingPlayNextScreen = false;
+        this.canceledPlayNextScreen = false;
         this.initPlayer(this.container, _playerConfig, this.variant);
     }
     initPlayer(_container, playerConfig, variant) {
@@ -55,6 +57,7 @@ export default class NpoPlayer {
         }, true);
     }
     async loadStream(source, options = {}) {
+        this.streamOptions = options;
         if (this.player == null) {
             console.error('Er is nog geen player geladen.');
             return;
@@ -110,7 +113,7 @@ export default class NpoPlayer {
             startPlayerTracker(this, utility.validateStreamLength(_streamObject.metadata.duration, false), this.version, _streamObject.metadata.prid);
         }
         else {
-            this.doError(`Het is niet gelukt de stream op te halen: \n Input is valide token of media object.`, 500);
+            this.doError(`Het is niet gelukt de stream op te halen: \n Input is geen valide token of media object.`, 500);
         }
         this.player.off(PlayerEvent.SourceLoaded, () => { void addAccessibilityAttributes(this.container, this.streamObject.metadata); });
         this.player.on(PlayerEvent.SourceLoaded, () => { void addAccessibilityAttributes(this.container, this.streamObject.metadata); });
@@ -118,16 +121,16 @@ export default class NpoPlayer {
         this.player.on(PlayerEvent.AdBreakFinished, () => { void addAccessibilityAttributes(this.container, this.streamObject.metadata); });
         if (this.sourceConfig?.metadata) {
             this.sourceConfig.metadata.jwt = source;
-            this.sourceConfig.metadata.av_type = this.streamObject.stream.avType;
+            this.sourceConfig.metadata.streamLinkAsJsonString = JSON.stringify(this.streamObject);
             this.sourceConfig.metadata.npoTagSession = String(this.npoTag?.npoTagInstance?.getSerializedSessionInfo());
         }
-        this.player.off(PlayerEvent.PlaybackFinished, () => {
-            this.showPlayNextScreen();
-        });
-        if (options?.prid != null) {
-            this.player.on(PlayerEvent.PlaybackFinished, () => {
+        if (options?.playNext?.showPlayNext === true) {
+            this.player.on(PlayerEvent.TimeChanged, () => {
                 this.showPlayNextScreen();
             });
+            this.player.on(PlayerEvent.Paused, () => {
+                this.hidePlayNextScreen();
+            });
         }
         if (options?.startOffset != null)
             playerAction.handleStartOffset(this.player, options.startOffset);
@@ -208,21 +211,48 @@ export default class NpoPlayer {
         playerAction.shiftToProgramStart(this.player, this.streamOptions.liveProgramTime);
     }
     showPlayNextScreen() {
-        showPlayNextScreen(this.doPlayNext.bind(this));
+        if (this.player == null || !this.streamOptions.playNext?.showPlayNext)
+            return;
+        this.player.off(PlayerEvent.TimeChanged, () => {
+            this.showPlayNextScreen();
+        });
+        const videoDuration = this.player.getDuration();
+        const overlayDuration = this.streamOptions.playNext?.duration || 10;
+        const offset = this.streamOptions.playNext?.offset || overlayDuration;
+        const showPlayNextAt = videoDuration - offset;
+        if (!this.isShowingPlayNextScreen && this.player.getCurrentTime() > showPlayNextAt && !this.canceledPlayNextScreen) {
+            this.isShowingPlayNextScreen = true;
+            showPlayNextScreen(overlayDuration, this.container, this.streamOptions.playNext?.proceedCallback);
+        }
+        else if (this.isShowingPlayNextScreen && this.player.getCurrentTime() < showPlayNextAt) {
+            this.isShowingPlayNextScreen = false;
+            hidePlayNextScreen(this.container);
+        }
+    }
+    cancelPlayNextScreen() {
+        this.canceledPlayNextScreen = true;
+        this.hidePlayNextScreen();
+        void this.streamOptions.playNext?.cancelCallback?.();
     }
     hidePlayNextScreen() {
-        hidePlayNextScreen();
+        this.player?.off(PlayerEvent.Paused, () => {
+            this.hidePlayNextScreen();
+        });
+        this.isShowingPlayNextScreen = false;
+        hidePlayNextScreen(this.container);
     }
     doPlayNext() {
         this.hidePlayNextScreen();
-        void this.loadStream(this.jwt, this.streamOptions);
+        void this.streamOptions.playNext?.proceedCallback?.();
     }
     destroy() {
         try {
             if (this.npoTag != null) {
                 clearInterval(this.npoTag.heartbeatInterval);
             }
+            logEvent(this, 'stop');
             this.uiManager?.release();
+            this.uiManager = null;
             void this.player?.destroy();
             return true;
         }
@@ -254,4 +284,3 @@ window.bitmovin.playerui.UIFactory = {
         return nativeMobileUiFactory(player, config);
     }
 };
-//# sourceMappingURL=npoplayer.js.map

package/lib/npoplayer.test.js

@@ -12,4 +12,3 @@ test("player init", async () => {
     expect(player).toBeInstanceOf(NpoPlayer);
     expect(player.playerConfig.key).toBe(testPlayerConfig.key);
 });
-//# sourceMappingURL=npoplayer.test.js.map

package/lib/package.json

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

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

@@ -16,6 +16,12 @@ export declare function createPlayNextButton(player: PlayerAPI, npoplayer: NpoPl
     ariaLabel: string;
     hidden: false;
 }>;
+export declare function createCancelPlayNextButton(player: PlayerAPI, npoplayer: NpoPlayer): Button<{
+    cssClass: string;
+    text: string;
+    ariaLabel: string;
+    hidden: false;
+}>;
 export declare function createskipIntroButton(player: PlayerAPI): Button<{
     cssClass: string;
     text: string;

package/lib/src/js/ui/components/shared/playnextscreen.d.ts

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

package/lib/src/js/ui/handlers/nicamhandler.d.ts

@@ -1,3 +1,3 @@
 import { StreamObject, StreamOptions } from 'types/interfaces';
-export declare function processNicam(streamObject: StreamObject, containerId: string, streamOptions: StreamOptions | null): void;
+export declare function processNicam(streamObject: StreamObject, nicamElement: HTMLElement | null, streamOptions: StreamOptions | null): void;
 export declare function addNicamIcon(character: string, nicamElement: Element): void;

package/lib/src/js/ui/handlers/streamhandler.d.ts

@@ -1,4 +1,4 @@
-import { type StreamObject, type StreamOptions } from "../../../types/interfaces";
-import { PlayerAPI, SourceConfig } from "bitmovin-player";
-import { UIManager } from "bitmovin-player-ui";
+import { type StreamObject, type StreamOptions } from '../../../types/interfaces';
+import { PlayerAPI, SourceConfig } from 'bitmovin-player';
+import { UIManager } from 'bitmovin-player-ui';
 export declare function processStream(streamObject: StreamObject | undefined, container: HTMLElement, streamOptions: StreamOptions | null, player: PlayerAPI, uiManager: UIManager, sourceConfig: SourceConfig): void;

package/lib/src/npoplayer.d.ts

@@ -24,6 +24,8 @@ export default class NpoPlayer {
     version: string;
     drmProfile: DRMProfile;
     variant: NpoPlayerUIVariants;
+    isShowingPlayNextScreen: boolean;
+    canceledPlayNextScreen: boolean;
     constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | null, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
     initPlayer(_container: HTMLElement, playerConfig: PlayerConfig, variant: NpoPlayerUIVariants): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
@@ -37,6 +39,7 @@ export default class NpoPlayer {
     goBackwards(seconds: number): void;
     watchFromStart(): void;
     showPlayNextScreen(): void;
+    cancelPlayNextScreen(): void;
     hidePlayNextScreen(): void;
     doPlayNext(): void;
     destroy(): boolean;

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

@@ -83,9 +83,9 @@ export interface StreamOptions {
     liveProgramTime?: number;
     endpoint?: string;
     preferredDRM?: string;
-    prid?: string;
     ageRating?: string;
     nicam?: string[] | null;
+    playNext?: PlayNext;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -131,4 +131,11 @@ export declare enum NpoPlayerUIVariants {
     AUDIO = "audio",
     AD = "ad"
 }
+export interface PlayNext {
+    showPlayNext?: boolean;
+    duration?: number;
+    offset?: number;
+    proceedCallback?: () => void;
+    cancelCallback?: () => void;
+}
 export {};

package/lib/types/classes.js

@@ -1,4 +1,3 @@
 import { EventEmitter } from 'events';
 export class LogEmitter extends EventEmitter {
 }
-//# sourceMappingURL=classes.js.map

package/lib/types/interfaces.d.ts

@@ -83,9 +83,9 @@ export interface StreamOptions {
     liveProgramTime?: number;
     endpoint?: string;
     preferredDRM?: string;
-    prid?: string;
     ageRating?: string;
     nicam?: string[] | null;
+    playNext?: PlayNext;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -131,4 +131,11 @@ export declare enum NpoPlayerUIVariants {
     AUDIO = "audio",
     AD = "ad"
 }
+export interface PlayNext {
+    showPlayNext?: boolean;
+    duration?: number;
+    offset?: number;
+    proceedCallback?: () => void;
+    cancelCallback?: () => void;
+}
 export {};

package/lib/types/interfaces.js

@@ -21,4 +21,3 @@ export var NpoPlayerUIVariants;
     NpoPlayerUIVariants["AUDIO"] = "audio";
     NpoPlayerUIVariants["AD"] = "ad";
 })(NpoPlayerUIVariants || (NpoPlayerUIVariants = {}));
-//# sourceMappingURL=interfaces.js.map

package/package.json

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

package/src/scss/components/_playnext.scss

@@ -6,47 +6,35 @@
     left: 0;
     right: 0;
     background-color: rgba(0, 0, 0, 0.07);
-    svg {
-        .ui-circle {
-            animation: progress 15s ease-out forwards;
-        }
-    }
-    &.show {
+    z-index: 10;
+    pointer-events: none;
+
+    &.show { 
         display: block;
     }
+
     .bmpui-container-wrapper {
         position: relative;
         height: 100%;
         display: flex;
-        justify-content: center;
-        align-items: center;
-        .bmpui-ui-hugeplaynextbacktogglebutton {
-            position: relative;
-            height: 7.3em;
-            width: 7.3em;
-            cursor: pointer;
-            transition: background-size linear 0.2s !important;
-            background-image: var(--npo-player-icon-play) !important;
-            background-size: 60%;
-            &:hover {
-                background-size: 70%;
-            }
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding: 16px;
+        pointer-events: none;
+
+        .bmpui-ui-textbutton {
+            margin-left: 8px;
+            pointer-events: all;
+        }
+
+        .ui-playNextButton {
+            background-color: var(--npo-player-textcolor);
+            width: 200px;
+            white-space: nowrap;
+
             .bmpui-label {
-                display: none;
-                position: absolute;
-                bottom: -2em;
-                width: 100em;
-                text-align: center;
-                font-weight: 700;
-                left: calc(-50em + 3.5em);
-                font-size: 22px;
+                color: var(--npo-player-graycolor-dark);
             }
         }
     }
 }
-
-@keyframes progress {
-    0% {
-        stroke-dasharray: 0 100;
-    }
-}

package/src/scss/components/_seekbarthumbnail.scss

@@ -17,6 +17,7 @@
               box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);
               margin-bottom: 4px;
               display: none;
+              background-repeat: unset;
 
               &[style=background] {
                   display: block;

package/src/scss/components/_subtitles.scss

@@ -47,4 +47,20 @@
             }
         }
     }
+
+    .green {
+        color: green;
+    }
+
+    .cyan {
+        color: cyan;
+    }
+
+    .white {
+        color: white;
+    }
+
+    .yellow {
+        color: yellow;
+    }
 }

package/src/scss/components/_textbuttons.scss

@@ -18,25 +18,25 @@
     @-moz-document url-prefix() {
         backdrop-filter: brightness(1);
     }
+}
 
-    .bmpui-ui-textbutton {
-        padding: 12px 20px;
-        background: rgba(3, 14, 30, 0.6);
-        border: 1px solid #ffffff;
-        backdrop-filter: blur(10px);
-        border-radius: 10px;
-        height: 48px;
-        box-sizing: border-box;
-        font-weight: 700;
+.bmpui-ui-textbutton {
+    padding: 6px 14px;
+    background: rgba(3, 14, 30, 0.6);
+    border: 1px solid #ffffff;
+    backdrop-filter: blur(10px);
+    border-radius: 8px;
+    height: 36px;
+    box-sizing: border-box;
+    font-weight: 700;
 
-        .bmpui-label {
-            display: block;
-            font-family: var(--fontBold) !important;
-            font-size: 16px;
-            line-height: 19px;
-            align-items: center;
-            text-align: center;
-            color: #ffffff;
-        }
+    .bmpui-label {
+        display: block;
+        font-family: var(--fontBold) !important;
+        font-size: 14px;
+        line-height: 16.8px;
+        align-items: center;
+        text-align: center;
+        color: #ffffff;
     }
 }