@npo/player 1.19.0 → 1.20.0

package/README.md

@@ -11,7 +11,7 @@ Extensive and up-to-date documentation is available at https://docs.npoplayer.nl
 Code quality is analysed by SonarCloud. The project can be found at https://sonarcloud.io/project/overview?id=NPOstart_npo-player
 
 # Changelog
-Current version: v1.19.0
+Current version: v1.20.0
 
 The changelog is available at https://docs.npoplayer.nl/implementation/web/changelog/
 

package/lib/js/drm/handlers/decideprofile.js

@@ -12,39 +12,39 @@ export async function decideProfile(player, preferredDRM = '') {
         supportedTech = player.getSupportedTech();
         supportedDRM = await player.getSupportedDRM();
     }
-    supportedTech.forEach(function (tech) {
+    for (const tech of supportedTech) {
         if (bestWithoutDRM === '')
             bestWithoutDRM = tech.streaming;
         if (bestWithDRM !== '')
-            return;
-        if (tech.streaming === 'dash') {
-            supportedDRM.forEach(function (drm) {
+            continue;
+        if (tech.streaming === 'dash' && preferredDRM !== 'fairplay') {
+            for (const drm of supportedDRM) {
                 if (bestDRM !== '' && (preferredDRM === '' || preferredDRM.length > 0)) {
-                    return;
+                    continue;
                 }
-                if (['com.widevine.alpha'].includes(drm)) {
+                if (['com.widevine.alpha', 'com.microsoft.playready'].includes(drm) && preferredDRM === '') {
                     bestDRM = 'widevine';
                 }
-                if (['com.microsoft.playready', 'com.microsoft.playready.recommendation'].includes(drm)) {
-                    bestDRM = 'playready';
+                if (['com.apple.fps.1_0', 'com.apple.fps.2_0'].includes(drm) && preferredDRM === 'fairplay') {
+                    bestDRM = 'fairplay';
                 }
-            });
+            }
             if (bestDRM !== '')
                 bestWithDRM = 'dash';
         }
-        if (tech.streaming === 'hls') {
-            if (bestDRM !== '' && (preferredDRM === '' || bestDRM === preferredDRM)) {
-                return;
-            }
-            supportedDRM.forEach(function (drm) {
-                if (['com.apple.fps.1_0', 'com.apple.fps.2_0'].includes(drm)) {
+        if (tech.streaming === 'hls' || preferredDRM === 'fairplay') {
+            for (const drm of supportedDRM) {
+                if (bestDRM !== '' && (preferredDRM === '' || bestDRM === preferredDRM)) {
+                    continue;
+                }
+                if (['com.apple.fps.1_0', 'com.apple.fps.2_0'].includes(drm) && preferredDRM === 'fairplay') {
                     bestDRM = 'fairplay';
                 }
-            });
+            }
             if (bestDRM !== '')
                 bestWithDRM = 'hls';
         }
-    });
+    }
     if (bestWithDRM !== '')
         return { profileName: bestWithDRM, drm: bestDRM };
     return { profileName: bestWithoutDRM, drm: bestDRM };

package/lib/js/drm/handlers/decideprofile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/js/drm/handlers/decideprofile.test.js

@@ -0,0 +1,33 @@
+import { decideProfile } from './decideprofile';
+jest.mock("bitmovin-player");
+describe("decideProfile", () => {
+    let mockPlayerAPI;
+    beforeEach(() => {
+        mockPlayerAPI = {
+            getSupportedTech: jest.fn().mockReturnValue([
+                { streaming: 'dash' },
+                { streaming: 'hls' },
+            ]),
+            getSupportedDRM: jest.fn().mockResolvedValue([
+                'com.widevine.alpha',
+                'com.microsoft.playready',
+                'com.apple.fps.1_0',
+            ]),
+        };
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it("should return empty profile when player is null", async () => {
+        const result = await decideProfile(null);
+        expect(result).toEqual({ profileName: '', drm: '' });
+    });
+    it("should return profile with dash streaming and widevine DRM", async () => {
+        const result = await decideProfile(mockPlayerAPI);
+        expect(result).toEqual({ profileName: 'dash', drm: 'widevine' });
+    });
+    it("should return profile with hls streaming and fairplay DRM", async () => {
+        const result = await decideProfile(mockPlayerAPI, 'fairplay');
+        expect(result).toEqual({ profileName: 'hls', drm: 'fairplay' });
+    });
+});

package/lib/js/fragments/removefragments.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/js/fragments/removefragments.test.js

@@ -0,0 +1,26 @@
+import { removeFragments } from './removefragments';
+describe("removeFragments", () => {
+    it("should remove all timeline markers", () => {
+        const mockUIManager = {
+            getTimelineMarkers: jest.fn().mockReturnValue([
+                { id: 1, time: 10 },
+                { id: 2, time: 20 },
+                { id: 3, time: 30 },
+            ]),
+            removeTimelineMarker: jest.fn(),
+        };
+        removeFragments(mockUIManager);
+        expect(mockUIManager.removeTimelineMarker).toHaveBeenCalledTimes(3);
+        expect(mockUIManager.removeTimelineMarker).toHaveBeenCalledWith({ id: 1, time: 10 });
+        expect(mockUIManager.removeTimelineMarker).toHaveBeenCalledWith({ id: 2, time: 20 });
+        expect(mockUIManager.removeTimelineMarker).toHaveBeenCalledWith({ id: 3, time: 30 });
+    });
+    it("should not remove any timeline markers if there are none", () => {
+        const mockUIManager = {
+            getTimelineMarkers: jest.fn().mockReturnValue([]),
+            removeTimelineMarker: jest.fn(),
+        };
+        removeFragments(mockUIManager);
+        expect(mockUIManager.removeTimelineMarker).not.toHaveBeenCalled();
+    });
+});

package/lib/js/fragments/setfragments.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/js/fragments/setfragments.test.js

@@ -0,0 +1,72 @@
+import { setFragments } from './setfragments';
+import { PlayerEvent } from 'bitmovin-player';
+const SEEKBAR_MARKER_UNPLAYABLE = 'seekbar-marker-unplayable';
+describe("setFragments", () => {
+    let mockPlayer;
+    let mockUIManager;
+    let fragments;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockPlayer = {
+            seek: jest.fn(),
+            isPaused: jest.fn().mockReturnValue(true),
+            play: jest.fn(),
+            pause: jest.fn(),
+            off: jest.fn(),
+            on: jest.fn().mockImplementation((event, handler) => {
+                if (event === PlayerEvent.Ready) {
+                    handler();
+                }
+            }),
+            getContainer: jest.fn().mockReturnValue({
+                querySelector: jest.fn().mockReturnValue({
+                    textContent: '',
+                    classList: {
+                        add: jest.fn()
+                    }
+                })
+            }),
+            getConfig: jest.fn().mockReturnValue({
+                playback: {
+                    autoplay: true
+                }
+            })
+        };
+        mockUIManager = {
+            addTimelineMarker: jest.fn(),
+            getTimelineMarkers: jest.fn().mockReturnValue([]),
+            removeTimelineMarker: jest.fn()
+        };
+        fragments = {
+            sections: [
+                {
+                    start: 10,
+                    end: 20,
+                    title: 'Test Fragment',
+                    cssClasses: [SEEKBAR_MARKER_UNPLAYABLE]
+                }
+            ]
+        };
+    });
+    it("should set fragments correctly and handle autoplay", async () => {
+        setFragments(mockPlayer, mockUIManager, fragments);
+        expect(mockPlayer.seek).toHaveBeenCalledWith(fragments.sections[0].start);
+        expect(mockPlayer.play).toHaveBeenCalled();
+        expect(mockUIManager.addTimelineMarker).toHaveBeenCalledTimes(2);
+    });
+    it("should correctly set the title of the fragment", async () => {
+        setFragments(mockPlayer, mockUIManager, fragments);
+        expect(mockUIManager.addTimelineMarker).toHaveBeenCalledWith({
+            time: 0,
+            title: "Niet beschikbaar",
+            cssClasses: [SEEKBAR_MARKER_UNPLAYABLE],
+            duration: 10
+        });
+        expect(mockUIManager.addTimelineMarker).toHaveBeenCalledWith({
+            time: 20,
+            duration: 10000000,
+            title: "Niet beschikbaar",
+            cssClasses: [SEEKBAR_MARKER_UNPLAYABLE],
+        });
+    });
+});

package/lib/js/playeractions/handlers/processsourceconfig.js

@@ -36,13 +36,19 @@ function setDrm(sourceConfig, drm, _streamObject) {
             };
             break;
         case 'widevine':
-            sourceConfig.drm = {
-                widevine: {
-                    LA_URL: npoDrmGateway + _streamObject.stream.drmToken,
-                    audioRobustness: 'SW_SECURE_CRYPTO',
-                    videoRobustness: 'SW_SECURE_CRYPTO'
-                }
-            };
+            fetch('https://npo-drm-gateway.samgcloud.nepworldwide.nl/widevine_player_cert.bin')
+                .then(response => response.arrayBuffer())
+                .then(certificate => {
+                sourceConfig.drm = {
+                    widevine: {
+                        serverCertificate: certificate,
+                        LA_URL: npoDrmGateway + _streamObject.stream.drmToken,
+                        audioRobustness: 'SW_SECURE_CRYPTO',
+                        videoRobustness: 'SW_SECURE_CRYPTO'
+                    }
+                };
+            })
+                .catch(error => console.error('Error:', error));
             break;
         case 'playready':
             sourceConfig.drm = {

package/lib/js/playeractions/handlers/removereplayclass.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/js/playeractions/handlers/removereplayclass.test.js

@@ -0,0 +1,28 @@
+import { removeReplayClass } from './removereplayclass';
+import { PlayerEvent } from 'bitmovin-player';
+describe('removeReplayClass', () => {
+    let mockPlayer;
+    let mockPlayerContainer;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockPlayerContainer = document.createElement('div');
+        mockPlayerContainer.classList.add('bmpui-player-state-finished', 'bmpui-player-state-replay');
+        mockPlayer = {
+            off: jest.fn(),
+            getContainer: jest.fn().mockReturnValue(mockPlayerContainer),
+        };
+    });
+    it('should remove "bmpui-player-state-finished" and "bmpui-player-state-replay" classes from the player container', () => {
+        removeReplayClass(mockPlayer);
+        expect(mockPlayerContainer.classList.contains('bmpui-player-state-finished')).toBe(false);
+        expect(mockPlayerContainer.classList.contains('bmpui-player-state-replay')).toBe(false);
+    });
+    it('should unregister the Seek event listener', () => {
+        removeReplayClass(mockPlayer);
+        expect(mockPlayer.off).toHaveBeenCalledWith(PlayerEvent.Seek, expect.any(Function));
+    });
+    it('should not unregister the Seek event listener if the player is null', () => {
+        removeReplayClass(null);
+        expect(mockPlayer.off).not.toHaveBeenCalled();
+    });
+});

package/lib/js/playeractions/handlers/resolvekeypress.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/js/playeractions/handlers/resolvekeypress.test.js

@@ -0,0 +1,80 @@
+import { resolveKeyPress } from './resolvekeypress';
+import { ViewMode } from 'bitmovin-player';
+import { mockNpoPlayer } from '../../../../tests/mocks/mockNpoplayer';
+describe('resolveKeyPress', () => {
+    let mockPlayer;
+    let mockNpoplayer = mockNpoPlayer;
+    let e;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockPlayer = {
+            seek: jest.fn(),
+            isPaused: jest.fn().mockReturnValue(true),
+            play: jest.fn(),
+            pause: jest.fn(),
+            isMuted: jest.fn(),
+            unmute: jest.fn(),
+            getViewMode: jest.fn(),
+            setViewMode: jest.fn(),
+            getContainer: jest.fn().mockReturnValue({
+                querySelector: jest.fn().mockReturnValue({
+                    textContent: '',
+                    classList: {
+                        add: jest.fn()
+                    }
+                })
+            }),
+            getConfig: jest.fn().mockReturnValue({
+                playback: {
+                    autoplay: true
+                }
+            })
+        };
+        e = new KeyboardEvent('keydown');
+    });
+    it('should mute/unmute the player when "KeyM" is pressed', () => {
+        mockPlayer.isMuted.mockReturnValue(true);
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'KeyM' });
+        expect(mockPlayer.unmute).toHaveBeenCalled();
+    });
+    it('should enter/exit fullscreen mode when "KeyF" is pressed', () => {
+        mockPlayer.getViewMode.mockReturnValue(ViewMode.Inline);
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'KeyF' });
+        expect(mockPlayer.setViewMode).toHaveBeenCalledWith(ViewMode.Fullscreen);
+    });
+    it('should play/pause the player when "Space" is pressed', () => {
+        mockPlayer.isPaused.mockReturnValue(true);
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'Space' });
+        expect(mockPlayer.play).toHaveBeenCalled();
+    });
+    it('should increase the volume when "ArrowUp" is pressed', () => {
+        mockPlayer.isMuted.mockReturnValue(true);
+        mockNpoplayer.increaseVolume = jest.fn();
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'ArrowUp' });
+        expect(mockPlayer.unmute).toHaveBeenCalled();
+        expect(mockNpoplayer.increaseVolume).toHaveBeenCalled();
+    });
+    it('should decrease the volume when "ArrowDown" is pressed', () => {
+        mockPlayer.isMuted.mockReturnValue(true);
+        mockNpoplayer.decreaseVolume = jest.fn();
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'ArrowDown' });
+        expect(mockPlayer.unmute).toHaveBeenCalled();
+        expect(mockNpoplayer.decreaseVolume).toHaveBeenCalled();
+    });
+    it('should go backwards when "ArrowLeft" is pressed', () => {
+        mockNpoplayer.goBackwards = jest.fn();
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'ArrowLeft' });
+        expect(mockNpoplayer.goBackwards).toHaveBeenCalledWith(10);
+    });
+    it('should go forward when "ArrowRight" is pressed', () => {
+        mockNpoplayer.goForward = jest.fn();
+        resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'ArrowRight' });
+        expect(mockNpoplayer.goForward).toHaveBeenCalledWith(10);
+    });
+    it('should hide the settings panel when "Escape" is pressed', () => {
+        if (mockNpoplayer.uiComponents.settingsPanel) {
+            resolveKeyPress(mockPlayer, mockNpoplayer, { ...e, code: 'Escape' });
+            expect(mockNpoplayer.uiComponents.settingsPanel.hide).toHaveBeenCalled();
+        }
+    });
+});

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

@@ -0,0 +1 @@
+export {};

package/lib/js/tracking/handlers/eventlogging.test.js

@@ -0,0 +1,46 @@
+import { logEvent } from './eventlogging';
+import { mockNpoPlayer } from '../../../../tests/mocks/mockNpoplayer';
+describe('logEvent', () => {
+    let npoplayer;
+    beforeEach(() => {
+        npoplayer = mockNpoPlayer;
+    });
+    it('should not log event if player is not available', () => {
+        npoplayer.player = null;
+        if (npoplayer.streamTracker && npoplayer.player) {
+            logEvent(npoplayer, 'start');
+            expect(npoplayer.streamTracker.start).not.toHaveBeenCalled();
+            expect(npoplayer.logEmitter.emit).not.toHaveBeenCalled();
+        }
+    });
+    it('should not log event if streamTracker is not available', () => {
+        npoplayer.streamTracker = null;
+        if (npoplayer.streamTracker) {
+            logEvent(npoplayer, 'start');
+            expect(npoplayer.logEmitter.emit).not.toHaveBeenCalled();
+        }
+    });
+    it('should not log event if adBreakActive is true', () => {
+        npoplayer.adBreakActive = true;
+        if (npoplayer.streamTracker) {
+            logEvent(npoplayer, 'start');
+            expect(npoplayer.streamTracker.start).not.toHaveBeenCalled();
+            expect(npoplayer.logEmitter.emit).not.toHaveBeenCalled();
+        }
+    });
+    it('should log event and call the corresponding streamTracker handler', () => {
+        if (npoplayer.streamTracker) {
+            logEvent(npoplayer, 'start');
+            expect(npoplayer.streamTracker.start).toHaveBeenCalledWith({ stream_position: 10 });
+            expect(npoplayer.logEmitter.emit).toHaveBeenCalledWith('logEvent', 'start');
+        }
+    });
+    it('should log event and call the seek streamTracker handler with data', () => {
+        const data = { position: 20 };
+        if (npoplayer.streamTracker) {
+            logEvent(npoplayer, 'seek', data);
+            expect(npoplayer.streamTracker.seek).toHaveBeenCalledWith(data);
+            expect(npoplayer.logEmitter.emit).toHaveBeenCalledWith('logEvent', 'seek');
+        }
+    });
+});

package/lib/js/ui/handlers/listboxhandlers.js

@@ -5,7 +5,6 @@ function closeSettingsPanel(settingsPanel, mainSettingsPage) {
     }, 100);
 }
 export function handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton, settingsPanel, mainSettingsPage) {
-    console.log('handleSubtitleListBoxItemSelected');
     return (e) => {
         e.getItems().forEach((item) => {
             if (item.key === e.getSelectedItem()) {

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

@@ -1,3 +1,6 @@
+import { PlayerAPI } from 'bitmovin-player';
+import { UIManager } from 'bitmovin-player-ui';
 import { StreamObject, StreamOptions } from 'types/interfaces';
 export declare function processNicam(streamObject: StreamObject, nicamElement: HTMLElement | null, streamOptions: StreamOptions | null): void;
 export declare function addNicamIcon(character: string, nicamElement: Element): void;
+export declare function showNicamAfterUiDelay(player: PlayerAPI, uiManager: UIManager | null): void;

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

@@ -1,3 +1,4 @@
+import { PlayerEvent } from 'bitmovin-player';
 export function processNicam(streamObject, nicamElement, streamOptions) {
     const effectiveMetadata = streamOptions ? { ...streamObject.metadata, ...streamOptions } : streamObject.metadata;
     if (nicamElement) {
@@ -24,3 +25,18 @@ export function addNicamIcon(character, nicamElement) {
     span.classList.add('nicam-icon', iconClass);
     nicamElement.appendChild(span);
 }
+export function showNicamAfterUiDelay(player, uiManager) {
+    player.off(PlayerEvent.Play, () => { showNicamAfterUiDelay(player, uiManager); });
+    if (uiManager === null)
+        return;
+    const playerContainer = player.getContainer().querySelector('.bmpui-npo-player.bmpui-layout-max-width-400') || player.getContainer().querySelector('.bmpui-npo-player.bmpui-layout-max-width-600');
+    if (!playerContainer)
+        return;
+    uiManager.activeUi.onControlsHide.subscribeOnce(() => {
+        const className = 'show-nicam';
+        playerContainer.classList.add(className);
+        setTimeout(() => {
+            playerContainer.classList.remove(className);
+        }, 3000);
+    });
+}

package/lib/js/ui/nativemobileuicontainer.js

@@ -10,6 +10,7 @@ const defaultData = {
     defaultActionRequired: true,
 };
 export function sendCustomMessage(message, data) {
+    console.log('sendCustomMessage', message, data);
     try {
         if (data !== undefined) {
             return JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message, JSON.stringify(data)));
@@ -18,8 +19,7 @@ export function sendCustomMessage(message, data) {
             return JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message));
         }
     }
-    catch (e) {
-        console.warn(`Custom message ${message} may not be send, as it returned no valid data (JSON as a string)`, e);
+    catch {
         return defaultData;
     }
 }

package/lib/js/ui/nativemobileuifactory.js

@@ -18,18 +18,18 @@ export function nativeMobileUiFactory(player, config = {}) {
     let _streamObject = {};
     const removeFinishedClass = () => {
         player.off(PlayerEvent.Seeked, removeFinishedClass);
-        const playerFinishedElement = document.querySelector('.bmpui-npo-player.bmpui-player-state-finished');
+        const playerFinishedElement = player.getContainer().querySelector('.bmpui-npo-player.bmpui-player-state-finished');
         if (playerFinishedElement) {
             playerFinishedElement.classList.remove('bmpui-player-state-finished');
         }
     };
     const clearUI = () => {
-        const nicamElement = document.querySelector('#ui-container .bmpui-nicam');
+        const nicamElement = player.getContainer().querySelector('.bmpui-nicam');
         if (nicamElement) {
             nicamElement.innerHTML = '';
         }
-        document.querySelector('.bmpui-npo-player')?.classList.remove('livestream-dvr');
-        const element = document.querySelector('.bmpui-npo-player .bmpui-seekbar-label-title');
+        player.getContainer().querySelector('.bmpui-npo-player')?.classList.remove('livestream-dvr');
+        const element = player.getContainer().querySelector('.bmpui-seekbar-label-title');
         if (element) {
             element.textContent = '';
         }
@@ -37,11 +37,11 @@ export function nativeMobileUiFactory(player, config = {}) {
     };
     const updateUI = () => {
         if (_streamObject.metadata?.ageRating) {
-            processNicam(_streamObject, document.querySelector('#ui-container .bmpui-nicam'), null);
+            processNicam(_streamObject, player.getContainer().querySelector('.bmpui-nicam'), null);
         }
         const isLiveStream = _streamObject.stream?.isLiveStream && _streamObject.stream?.hasDvrWindow;
         if (isLiveStream) {
-            document.querySelector('.bmpui-npo-player')?.classList.add('livestream-dvr');
+            player.getContainer().querySelector('.bmpui-npo-player')?.classList.add('livestream-dvr');
         }
         if (_streamObject.segment) {
             const seg = _streamObject.segment;
@@ -55,7 +55,7 @@ export function nativeMobileUiFactory(player, config = {}) {
         else {
             addFragments(player, mobileUIManager, null);
         }
-        const element = document.querySelector('.bmpui-npo-player .bmpui-seekbar-label-title');
+        const element = player.getContainer().querySelector('.bmpui-seekbar-label-title');
         if (element) {
             element.textContent = _streamObject.title || '';
         }
@@ -72,12 +72,12 @@ export function nativeMobileUiFactory(player, config = {}) {
     const addEventListeners = () => {
         player.off(PlayerEvent.Ready, addEventListeners);
         sendCustomMessage(CustomMessages.JAVASCRIPT_READY);
-        const playbackToggleElement = document.getElementById('native-mobile-playbacktoggleoverlay');
+        const playbackToggleElement = player.getContainer().querySelector('#native-mobile-playbacktoggleoverlay');
         if (playbackToggleElement) {
-            const playbackToggleButton = playbackToggleElement.querySelector('button');
-            playbackToggleElement.addEventListener('click', () => {
-                const isPlaying = playbackToggleButton?.getAttribute('aria-pressed') === 'true';
-                sendCustomMessage(CustomMessages.TOGGLE_PLAY_PAUSE, { isChecked: !isPlaying });
+            playbackToggleElement.addEventListener('touchend', (event) => {
+                event.preventDefault();
+                player?.play();
+                sendCustomMessage(CustomMessages.TOGGLE_PLAY_PAUSE, { isChecked: true });
             });
         }
     };

package/lib/npoplayer.d.ts

@@ -32,6 +32,8 @@ export default class NpoPlayer {
     createUIManager(player: PlayerAPI, variant: NpoPlayerUIVariants): Promise<void>;
     doError(input: any, status?: number): void;
     keyPress(e: KeyboardEvent): void;
+    play(): void;
+    pause(): void;
     setVolume(volume: number): void;
     increaseVolume(): void;
     decreaseVolume(): void;
@@ -42,7 +44,7 @@ export default class NpoPlayer {
     cancelPlayNextScreen(): void;
     hidePlayNextScreen(): void;
     doPlayNext(): void;
-    destroy(asyncMode?: boolean): Promise<boolean>;
-    unload(asyncMode?: boolean): Promise<boolean>;
+    destroy(asyncMode?: boolean): Promise<boolean> | boolean;
+    unload(asyncMode?: boolean): Promise<boolean> | boolean;
     printVersion(): void;
 }

package/lib/npoplayer.js

@@ -19,6 +19,7 @@ import { nativeMobileUiFactory } from './js/ui/nativemobileuifactory';
 import { setupMediaSessionActionHandlers } from './js/playeractions/handlers/mediasessionactions';
 import { processStream } from './js/ui/handlers/streamhandler';
 import { removeReplayClass } from './js/playeractions/handlers/removereplayclass';
+import { showNicamAfterUiDelay } from './js/ui/handlers/nicamhandler';
 export { NpoPlayerUIVariants, };
 export default class NpoPlayer {
     constructor(_container, _playerConfig, _npotag, _npotaginstance, _variant) {
@@ -56,6 +57,13 @@ export default class NpoPlayer {
         this.container.addEventListener('keydown', e => {
             this.keyPress(e);
         }, true);
+        const playbackToggleElement = this.container.querySelector('.bmpui-ui-playbacktoggle-overlay');
+        if (playbackToggleElement) {
+            playbackToggleElement.addEventListener('touchend', (event) => {
+                event.preventDefault();
+                this.player?.play();
+            });
+        }
     }
     async loadStream(source, options = {}) {
         this.streamOptions = options;
@@ -95,7 +103,17 @@ export default class NpoPlayer {
             const payload = {
                 baseURL: endpoint,
                 jwt: source,
-                data: { profileName: profile.profileName, drmType: profile.drm, referrerUrl: window.location.href }
+                data: {
+                    profileName: profile.profileName,
+                    drmType: profile.drm,
+                    referrerUrl: window.location.href,
+                    ster: {
+                        identifier: options?.ster?.identifier ?? 'npo-app-desktop',
+                        deviceType: options?.ster?.deviceType ?? 4,
+                        site: options?.ster?.site ?? 'npo',
+                        player: 'web'
+                    }
+                }
             };
             try {
                 _streamObject = await getStreamObject(this, payload);
@@ -156,6 +174,7 @@ export default class NpoPlayer {
                 this.hidePlayNextScreen();
             });
         }
+        this.player.on(PlayerEvent.Play, () => { showNicamAfterUiDelay(this.player, this.uiManager); });
         if (options?.startOffset != null)
             playerAction.handleStartOffset(this.player, options.startOffset);
         const setLiveOffsetListener = function () {
@@ -194,6 +213,16 @@ export default class NpoPlayer {
             return;
         playerAction.resolveKeyPress(this.player, this, e);
     }
+    play() {
+        if (this.player == null)
+            return;
+        this.player.play();
+    }
+    pause() {
+        if (this.player == null)
+            return;
+        this.player.pause();
+    }
     setVolume(volume) {
         if (this.player == null)
             return;
@@ -290,13 +319,7 @@ export default class NpoPlayer {
             }
         };
         if (asyncMode) {
-            try {
-                destroyLogic();
-                return Promise.resolve(true);
-            }
-            catch (error) {
-                return Promise.resolve(false);
-            }
+            return destroyLogic().then(() => true).catch(() => false);
         }
         else {
             return destroyLogic();
@@ -324,9 +347,12 @@ export default class NpoPlayer {
             return unloadLogic();
         }
         else {
-            return new Promise((resolve, reject) => {
-                unloadLogic().then(resolve).catch(reject);
-            });
+            try {
+                return unloadLogic();
+            }
+            catch (error) {
+                return false;
+            }
         }
     }
     printVersion() {