@npo/player 1.17.2 → 1.18.1

package/README.md

@@ -8,7 +8,8 @@ The video player library for NPO (Nederlandse Publieke Omroep) and other broadca
 Extensive and up-to-date documentation is available at https://docs.npoplayer.nl
 
 # Changelog
-Current version: v1.17.0
+Current version: v1.18.0
+
 The changelog is available at https://docs.npoplayer.nl/implementation/web/changelog/
 
 ## License

package/lib/js/ads/ster.js

@@ -12,6 +12,7 @@ export async function handlePreRolls(playerapi, streamObject, npoplayer) {
         let currentClickListener = null;
         let adUiSet = false;
         async function handleSourceLoaded() {
+            playerapi.off(PlayerEvent.SourceLoaded, handleSourceLoaded);
             const advertConfig = {
                 tag: {
                     url: String(prerollUrl),
@@ -24,6 +25,7 @@ export async function handlePreRolls(playerapi, streamObject, npoplayer) {
         }
         playerapi.on(PlayerEvent.SourceLoaded, handleSourceLoaded);
         async function handlePlay() {
+            playerapi.off(PlayerEvent.Play, handlePlay);
             attemptSetAdUi();
         }
         playerapi.on(PlayerEvent.Play, handlePlay);
@@ -32,6 +34,7 @@ export async function handlePreRolls(playerapi, streamObject, npoplayer) {
             if (!activeAdBreak || !activeAdBreak.ads)
                 return false;
             npoplayer.uiManager?.release();
+            npoplayer.uiManager = null;
             npoplayer.createUIManager(playerapi, NpoPlayerUIVariants.AD);
             adUiSet = true;
             let adButton = npoplayer.uiComponents.adbutton;
@@ -54,6 +57,7 @@ export async function handlePreRolls(playerapi, streamObject, npoplayer) {
             }
         }
         function handleAdStarted() {
+            playerapi.off(PlayerEvent.AdStarted, handleAdStarted);
             let activeAdBreak = playerapi.ads.getActiveAdBreak();
             if (!activeAdBreak || !activeAdBreak.ads) {
                 console.error('No active ad break data found');
@@ -83,6 +87,7 @@ export async function handlePreRolls(playerapi, streamObject, npoplayer) {
             button.onClick.subscribe(currentClickListener);
         }
         function handleAdFinished() {
+            playerapi.off(PlayerEvent.AdFinished, handleAdFinished);
             let activeAdBreak = playerapi.ads.getActiveAdBreak();
             if (!activeAdBreak || !activeAdBreak.ads) {
                 console.error('No active ad break data found');
@@ -101,23 +106,16 @@ export async function handlePreRolls(playerapi, streamObject, npoplayer) {
         }
         playerapi.on(PlayerEvent.AdFinished, handleAdFinished);
         function handleAdBreakFinished() {
+            playerapi.off(PlayerEvent.AdBreakFinished, handleAdBreakFinished);
             npoplayer.adBreakActive = false;
             npoplayer.uiComponents.adbutton?.hide();
             npoplayer.uiComponents.adlabel?.hide();
             npoplayer.uiManager?.release();
+            npoplayer.uiManager = null;
             npoplayer.createUIManager(playerapi, NpoPlayerUIVariants.DEFAULT);
             adUiSet = false;
-            removeListeners();
         }
         playerapi.on(PlayerEvent.AdBreakFinished, handleAdBreakFinished);
-        function removeListeners() {
-            playerapi.off(PlayerEvent.SourceLoaded, handleSourceLoaded);
-            playerapi.off(PlayerEvent.Play, handlePlay);
-            playerapi.off(PlayerEvent.AdStarted, handleAdStarted);
-            playerapi.off(PlayerEvent.AdFinished, handleAdFinished);
-            playerapi.off(PlayerEvent.AdBreakFinished, handleAdBreakFinished);
-            resolve();
-        }
+        resolve();
     });
 }
-//# sourceMappingURL=ster.js.map

package/lib/js/ads/ster.test.js

@@ -61,4 +61,3 @@ describe("handlePreRolls", () => {
         jest.clearAllMocks();
     });
 });
-//# sourceMappingURL=ster.test.js.map

package/lib/js/api/getstreamobject.js

@@ -36,4 +36,3 @@ export async function getStreamObject(npoplayer, payload) {
         }
     }
 }
-//# sourceMappingURL=getstreamobject.js.map

package/lib/js/api/getstreamobject.test.js

@@ -46,4 +46,3 @@ describe('getStreamObject', () => {
         expect(doErrorSpy).toHaveBeenCalledWith(expect.stringContaining('SomeError'), 500);
     });
 });
-//# sourceMappingURL=getstreamobject.test.js.map

package/lib/js/cdnproviders.js

@@ -1,13 +1,16 @@
 export const npoCdnProviders = new Map();
-npoCdnProviders.set('nep.global.ssl.fastly.net', 'NEP');
+npoCdnProviders.set('nep.global.ssl.fastly.net', 'NEP-FASTLY');
+npoCdnProviders.set('npo-fsly.cdn.streamgate.io', 'NEP-FASTLY');
 npoCdnProviders.set('cdn.streamgate.nl', 'NEP');
-npoCdnProviders.set('npo-fsly.cdn.streamgate.io', 'FASTLY');
+npoCdnProviders.set('pr.lswcdn.net', 'NEP-LSW');
 npoCdnProviders.set('cdn.eurovisioncdn.net', 'EUROVISION');
 npoCdnProviders.set('npo.prd.cdn.bcms.kpn.com', 'KPN');
 npoCdnProviders.set('cdn.bcms.kpn.com', 'KPN');
 npoCdnProviders.set('Akamai', 'AKEMAI');
-npoCdnProviders.set('icecast.omroep.nl', 'NPO');
-npoCdnProviders.set('content.omroep.nl', 'NPO');
-npoCdnProviders.set('podcast.npo.nl', 'NPO');
-npoCdnProviders.set('video.omroep.nl', 'NPO');
-//# sourceMappingURL=cdnproviders.js.map
+npoCdnProviders.set('icecast.omroep.nl', 'OMROEP-ICECAST');
+npoCdnProviders.set('content.omroep.nl', 'OMROEP-CONTENT');
+npoCdnProviders.set('podcast.npo.nl', 'OMROEP-PODCAST');
+npoCdnProviders.set('video.omroep.nl', 'OMROEP-VIDEO');
+npoCdnProviders.set('download.omroep.nl', 'OMROEP-DOWNLOAD');
+npoCdnProviders.set('download.nos.nl', 'NOS');
+npoCdnProviders.set('entry.cdn.npoaudio.nl', 'NPOAUDIO');

package/lib/js/checks/apple.js

@@ -17,4 +17,3 @@ export function isSafari(isFairPlayDrmSupported) {
         !navigator.userAgent.includes('Android');
     return isSafariUserAgent || isFairPlayDrmSupported;
 }
-//# sourceMappingURL=apple.js.map

package/lib/js/checks/apple.test.js

@@ -18,4 +18,3 @@ describe('Test Safari check', () => {
         expect(isSafari(isFairPlayDrmSupported)).toBeFalsy();
     });
 });
-//# sourceMappingURL=apple.test.js.map

package/lib/js/drm/drm.js

@@ -1,3 +1,2 @@
 export { verifyDRM } from './handlers/verifydrm';
 export { decideProfile } from './handlers/decideprofile';
-//# sourceMappingURL=drm.js.map

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

@@ -49,4 +49,3 @@ export async function decideProfile(player, preferredDRM = '') {
         return { profileName: bestWithDRM, drm: bestDRM };
     return { profileName: bestWithoutDRM, drm: bestDRM };
 }
-//# sourceMappingURL=decideprofile.js.map

package/lib/js/drm/handlers/verifydrm.js

@@ -22,4 +22,3 @@ export async function verifyDRM(npoplayer, player, payload) {
         void player.load(npoplayer.sourceConfig);
     }
 }
-//# sourceMappingURL=verifydrm.js.map

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

@@ -15,4 +15,3 @@ describe("Test DRM verification", () => {
         expect(load).toBeCalled();
     });
 });
-//# sourceMappingURL=verifydrm.test.js.map

package/lib/js/fragments/removefragments.js

@@ -7,4 +7,3 @@ export async function removeFragments(player, uiManager) {
     player.off(PlayerEvent.TimeChanged, checkFunction());
     player.off(PlayerEvent.Seek, seekFunction());
 }
-//# sourceMappingURL=removefragments.js.map

package/lib/js/fragments/setfragments.js

@@ -70,4 +70,3 @@ export async function setFragments(player, uiManager, fragments) {
     addMarkers();
     setTitle();
 }
-//# sourceMappingURL=setfragments.js.map

package/lib/js/playeractions/customerrors.test.js

@@ -49,4 +49,3 @@ describe("Test custom error messages", () => {
         expect(customSpecificErrorMessageOverlayConfig[2006]).toBe("Oeps, er is iets mis met de DRM");
     });
 });
-//# sourceMappingURL=customerrors.test.js.map

package/lib/js/playeractions/handlers/customerrors.js

@@ -54,4 +54,3 @@ export const customSpecificErrorMessageOverlayConfig = {
     3004: "",
     4000: "",
 };
-//# sourceMappingURL=customerrors.js.map

package/lib/js/playeractions/handlers/error.js

@@ -12,4 +12,3 @@ export function handlePlayerError(player, uiComponents, input) {
     uiComponents.errorMessageOverlay.show();
     uiComponents.errorMessageOverlay.errorLabel.setText(message ?? 'De video kan niet worden geladen');
 }
-//# sourceMappingURL=error.js.map

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

@@ -42,4 +42,3 @@ describe("Test DRM verification", () => {
         expect(show).not.toBeCalled();
     });
 });
-//# sourceMappingURL=error.test.js.map

package/lib/js/playeractions/handlers/handleoffsets.js

@@ -45,4 +45,3 @@ export function handleLiveOffsetLogic(npoplayer, player, options) {
         shiftToProgramStart(player, options.liveProgramTime);
     }
 }
-//# sourceMappingURL=handleoffsets.js.map

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

@@ -47,4 +47,3 @@ describe("Test programStart shift", () => {
         expect(timeShift).toBeCalled();
     });
 });
-//# sourceMappingURL=handleoffsets.test.js.map

package/lib/js/playeractions/handlers/mediasessionactions.js

@@ -104,4 +104,3 @@ export function setupMediaSessionActionHandlers(player, sourceConfig, _streamObj
         }
     }
 }
-//# sourceMappingURL=mediasessionactions.js.map

package/lib/js/playeractions/handlers/processplayerconfig.js

@@ -40,4 +40,3 @@ export function processPlayerConfig(npoplayer, playerConfig) {
     processedConfig.advertising = {};
     return processedConfig;
 }
-//# sourceMappingURL=processplayerconfig.js.map

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

@@ -120,11 +120,16 @@ export function processSourceConfig(_sourceConfig = {}, _streamObject, drm = nul
     sourceConfig = setDrm(sourceConfig, drm, _streamObject);
     const streamSource = _streamObject.stream.streamURL;
     let cdnString = streamSource;
-    npoCdnProviders.forEach(function (value, key) {
-        if (streamSource.includes(key)) {
-            cdnString = value;
-        }
-    });
+    if (streamSource.startsWith('file:///')) {
+        cdnString = 'OFFLINE';
+    }
+    else {
+        npoCdnProviders.forEach(function (value, key) {
+            if (streamSource.includes(key)) {
+                cdnString = value;
+            }
+        });
+    }
     if (sourceConfig.analytics == null)
         sourceConfig.analytics = {};
     sourceConfig.analytics.cdnProvider = cdnString;
@@ -157,4 +162,3 @@ export function processSourceConfig(_sourceConfig = {}, _streamObject, drm = nul
     }
     return sourceConfig;
 }
-//# sourceMappingURL=processsourceconfig.js.map

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

@@ -50,4 +50,3 @@ export function resolveKeyPress(player, npoplayer, e) {
         }
     }
 }
-//# sourceMappingURL=resolvekeypress.js.map

package/lib/js/playeractions/playeractions.js

@@ -3,4 +3,3 @@ export { handleStartOffset, handleLiveOffsetLogic, shiftToProgramStart } from ".
 export { handlePlayerError } from "./handlers/error";
 export { processPlayerConfig } from "./handlers/processplayerconfig";
 export { processSourceConfig } from "./handlers/processsourceconfig";
-//# sourceMappingURL=playeractions.js.map

package/lib/js/tracking/handlers/eventbinding.js

@@ -63,7 +63,7 @@ export function bindPlayerEvents(npoplayer, player) {
         }
     };
     const stopBeforeUnload = () => {
-        logEvent(npoplayer, 'stop', {});
+        logEvent(npoplayer, 'stop');
     };
     for (const [key, value] of logEventHandlers) {
         player.off(key, value);
@@ -79,7 +79,6 @@ export function bindPlayerEvents(npoplayer, player) {
         { event: PlayerEvent.PlaybackFinished, name: 'complete' },
         { event: PlayerEvent.TimeChanged, name: 'time' },
         { event: PlayerEvent.SourceUnloaded, name: 'stop' },
-        { event: PlayerEvent.Destroy, name: 'stop' },
     ];
     playerEvents.forEach(({ event, name, handler }) => {
         handler = handler || logEventHandler(name);
@@ -99,4 +98,3 @@ export function bindPlayerEvents(npoplayer, player) {
     logEventHandlers.set('beforeunload', stopBeforeUnload);
     window.addEventListener('beforeunload', stopBeforeUnload);
 }
-//# sourceMappingURL=eventbinding.js.map

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

@@ -29,4 +29,3 @@ export function logEvent(npoplayer, event, data) {
     npoplayer.logEmitter.emit('logEvent', event);
     streamTrackerHandler(streamOptions);
 }
-//# sourceMappingURL=eventlogging.js.map

package/lib/js/tracking/handlers/playertrackerinit.js

@@ -19,4 +19,3 @@ export function initPlayerTracker(npoplayer, _npotag, _npotaginstance) {
         npoplayer.npoTag.pageTracker = newPageTracker(npoplayer.npoTag.npoTagInstance);
     }
 }
-//# sourceMappingURL=playertrackerinit.js.map

package/lib/js/tracking/handlers/playertrackerstart.js

@@ -26,4 +26,3 @@ export function startPlayerTracker(playerInstance, duration, version, source) {
         bindPlayerEvents(playerInstance, playerInstance.player);
     }
 }
-//# sourceMappingURL=playertrackerstart.js.map

package/lib/js/tracking/playertracker.js

@@ -2,4 +2,3 @@ export { initPlayerTracker } from './handlers/playertrackerinit';
 export { startPlayerTracker } from './handlers/playertrackerstart';
 export { bindPlayerEvents } from './handlers/eventbinding';
 export { logEvent } from './handlers/eventlogging';
-//# sourceMappingURL=playertracker.js.map

package/lib/js/ui/components/adbutton.js

@@ -9,4 +9,3 @@ export function createAdButton(npoplayer) {
     npoplayer.uiComponents.adbutton = adButton;
     return adButton;
 }
-//# sourceMappingURL=adbutton.js.map

package/lib/js/ui/components/adlabel.js

@@ -5,4 +5,3 @@ export function createAdLabel(npoplayer) {
     npoplayer.uiComponents.adlabel = adLabel;
     return adLabel;
 }
-//# sourceMappingURL=adlabel.js.map

package/lib/js/ui/components/audio/controlbar.js

@@ -20,4 +20,3 @@ export function createAudioControlBar(npoplayer) {
     npoplayer.uiComponents.controlbar = controlbar;
     return controlbar;
 }
-//# sourceMappingURL=controlbar.js.map

package/lib/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/js/ui/components/buttons.js

@@ -37,8 +37,8 @@ export function createForwardButton(player) {
 }
 export function createPlayNextButton(player, npoplayer) {
     const playNextButton = new Button({
-        cssClass: 'ui-hugeplaynextbacktogglebutton ui-playNextButton bmpui-ui-button',
-        text: 'De volgende aflevering wordt zo afgespeeld...',
+        cssClass: 'ui-textbutton ui-playNextButton bmpui-ui-button',
+        text: 'Volgende aflevering over <span class="countdown"></span>…',
         ariaLabel: 'Speel volgende aflevering af',
         hidden: false
     });
@@ -49,6 +49,20 @@ export function createPlayNextButton(player, npoplayer) {
     });
     return playNextButton;
 }
+export function createCancelPlayNextButton(player, npoplayer) {
+    const cancelPlayNextButton = new Button({
+        cssClass: 'ui-textbutton ui-cancelPlayNextButton bmpui-ui-button',
+        text: 'Annuleer',
+        ariaLabel: 'Annuleer',
+        hidden: false
+    });
+    cancelPlayNextButton.onClick.subscribe(() => {
+        if (player != null) {
+            npoplayer.cancelPlayNextScreen();
+        }
+    });
+    return cancelPlayNextButton;
+}
 export function createskipIntroButton(player) {
     const skipIntroButton = new Button({
         cssClass: 'ui-textbutton ui-skipintrobutton bmpui-ui-button bmpui-hidden',
@@ -93,4 +107,3 @@ export function createWatchFromStartButton(player, npoplayer) {
     npoplayer.uiComponents.watchFromStartButton = watchFromStartButton;
     return watchFromStartButton;
 }
-//# sourceMappingURL=buttons.js.map

package/lib/js/ui/components/controlbar.js

@@ -40,4 +40,3 @@ export function createControlBar(npoplayer, settingsPanel) {
     npoplayer.uiComponents.controlbar = controlbar;
     return controlbar;
 }
-//# sourceMappingURL=controlbar.js.map

package/lib/js/ui/components/ctabar.js

@@ -23,4 +23,3 @@ export function createCTABar(player, npoplayer, variant) {
         cssClasses: ['controlbar-textbuttons']
     });
 }
-//# sourceMappingURL=ctabar.js.map

package/lib/js/ui/components/nativemobile/addFragments.js

@@ -5,4 +5,3 @@ export const addFragments = async (player, uiManager, section) => {
     };
     setFragments(player, uiManager, fragments);
 };
-//# sourceMappingURL=addFragments.js.map

package/lib/js/ui/components/nativemobile/buttons.js

@@ -208,4 +208,3 @@ export function createFullscreenToggleButton(player) {
     });
     return customFullscreenToggleButton;
 }
-//# sourceMappingURL=buttons.js.map

package/lib/js/ui/components/nativemobile/controlbar.js

@@ -41,4 +41,3 @@ export function createControlBar(player, settingsPanel) {
         ]
     });
 }
-//# sourceMappingURL=controlbar.js.map

package/lib/js/ui/components/nativemobile/ctabar.js

@@ -8,4 +8,3 @@ export function createCTABar(player) {
         cssClasses: ['controlbar-textbuttons']
     });
 }
-//# sourceMappingURL=ctabar.js.map

package/lib/js/ui/components/nativemobile/playnext.js

@@ -1,16 +1,9 @@
 import { Container } from 'bitmovin-player-ui';
 import { createPlayNextButton } from './buttons';
-import { showPlayNextScreen } from '../shared/playnextscreen';
 export function createPlayNextScreen() {
     const playNextButton = createPlayNextButton();
-    if (window.bitmovin.customMessageHandler) {
-        window.bitmovin.customMessageHandler.on('showPlayNextScreen', () => {
-            showPlayNextScreen(window.bitmovin.customMessageHandler.sendAsynchronous('doPlayNext'));
-        });
-    }
     return new Container({
         components: [playNextButton],
         cssClasses: ['overlay-playnext']
     });
 }
-//# sourceMappingURL=playnext.js.map

package/lib/js/ui/components/nativemobile/titlebar.js

@@ -5,4 +5,3 @@ export function createTitleBar() {
     titleBar.addComponent(nicam);
     return titleBar;
 }
-//# sourceMappingURL=titlebar.js.map

package/lib/js/ui/components/nativemobile/topbar.js

@@ -18,4 +18,3 @@ export function createTopBar(player, settingsPanel) {
         cssClasses: ['titlebar-small']
     });
 }
-//# sourceMappingURL=topbar.js.map

package/lib/js/ui/components/playnext.js

@@ -1,10 +1,10 @@
 import { Container } from 'bitmovin-player-ui';
-import { createPlayNextButton } from '../components/buttons';
+import { createPlayNextButton, createCancelPlayNextButton } from '../components/buttons';
 export function createPlayNextScreen(player, npoplayer) {
     const playNextButton = createPlayNextButton(player, npoplayer);
+    const cancelButton = createCancelPlayNextButton(player, npoplayer);
     return new Container({
-        components: [playNextButton],
+        components: [cancelButton, playNextButton],
         cssClasses: ['overlay-playnext']
     });
 }
-//# sourceMappingURL=playnext.js.map

package/lib/js/ui/components/seekbar.js

@@ -18,4 +18,3 @@ export function createSeekBar(npoplayer) {
         cssClasses: ['controlbar-top']
     });
 }
-//# sourceMappingURL=seekbar.js.map

package/lib/js/ui/components/settingspanel.js

@@ -131,6 +131,8 @@ export function createSettingsPanel(npoplayer) {
         npoplayer.uiComponents.settingsPanel = settingsPanel;
     }
     const checkSubtitles = () => {
+        player?.off(PlayerEvent.SourceLoaded, checkSubtitles);
+        player?.off(PlayerEvent.AdBreakFinished, checkSubtitles);
         const subtitles = player?.subtitles?.list();
         if (subtitles != null && subtitles.length > 0) {
             subtitlesPanelItem.show();
@@ -140,6 +142,8 @@ export function createSettingsPanel(npoplayer) {
         }
     };
     const checkQuality = () => {
+        player?.off(PlayerEvent.SourceLoaded, checkQuality);
+        player?.off(PlayerEvent.AdBreakFinished, checkQuality);
         if (player?.getAvailableVideoQualities() !== undefined && player?.getAvailableVideoQualities().length > 0) {
             qualityPanelItem.show();
         }
@@ -147,14 +151,9 @@ export function createSettingsPanel(npoplayer) {
             qualityPanelItem.hide();
         }
     };
-    player?.off(PlayerEvent.SourceLoaded, checkSubtitles);
     player?.on(PlayerEvent.SourceLoaded, checkSubtitles);
-    player?.off(PlayerEvent.SourceLoaded, checkQuality);
     player?.on(PlayerEvent.SourceLoaded, checkQuality);
-    player?.off(PlayerEvent.AdBreakFinished, checkSubtitles);
     player?.on(PlayerEvent.AdBreakFinished, checkSubtitles);
-    player?.off(PlayerEvent.AdBreakFinished, checkQuality);
     player?.on(PlayerEvent.AdBreakFinished, checkQuality);
     return settingsPanel;
 }
-//# sourceMappingURL=settingspanel.js.map

package/lib/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/js/ui/components/shared/playnextscreen.js

@@ -1,17 +1,34 @@
-export function showPlayNextScreen(playNextFunction) {
-    const playnextOverlay = document.querySelector('.bmpui-overlay-playnext');
-    document
-        .querySelector('.bmpui-overlay-playnext .bmpui-container-wrapper .bmpui-ui-hugeplaynextbacktogglebutton')
-        ?.insertAdjacentHTML('beforeend', '<svg class="playnextcountdown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37" class="ui-circular-chart"><path shape-rendering="geometricPrecision" class="ui-circle-bg" fill="none" stroke="white" stroke-width="2" opacity="50%" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /><path shape-rendering="geometricPrecision" class="ui-circle" fill="none" stroke="white" stroke-width="2" stroke-dasharray="100, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /></svg> ');
+let countdownInterval = null;
+export function showPlayNextScreen(overlayDuration, containerEl, proceedCallBack) {
+    const playnextOverlay = containerEl.querySelector('.bmpui-overlay-playnext');
+    const countdownLabel = playnextOverlay?.querySelector('.countdown');
+    if (countdownLabel) {
+        countdownLabel.innerHTML = overlayDuration.toString();
+    }
     playnextOverlay?.classList.add('show');
-    window.setTimeout(() => {
-        if (playnextOverlay?.classList.contains('show') ?? false) {
-            playNextFunction();
+    const playNextButton = playnextOverlay?.querySelector('.ui-playNextButton');
+    if (playNextButton) {
+        playNextButton.focus();
+    }
+    let countdown = overlayDuration - 1;
+    countdownInterval = window.setInterval(() => {
+        if (playnextOverlay?.classList.contains('show') && countdownLabel) {
+            countdownLabel.innerHTML = countdown.toString();
+            countdown -= 1;
         }
-    }, 15000);
+        if (countdown < 0) {
+            clearInterval(countdownInterval);
+            if (playnextOverlay?.classList.contains('show')) {
+                proceedCallBack?.();
+                playnextOverlay?.classList.remove('show');
+            }
+        }
+    }, 1000);
 }
-export function hidePlayNextScreen() {
-    document.querySelector('.playnextcountdown')?.remove();
-    document.querySelector('.bmpui-overlay-playnext')?.classList.remove('show');
+export function hidePlayNextScreen(containerEl) {
+    containerEl.querySelector('.bmpui-overlay-playnext')?.classList.remove('show');
+    if (countdownInterval !== null) {
+        clearInterval(countdownInterval);
+        countdownInterval = null;
+    }
 }
-//# sourceMappingURL=playnextscreen.js.map

package/lib/js/ui/components/titlebar.js

@@ -6,4 +6,3 @@ export function createTitleBar(npoplayer) {
     npoplayer.uiComponents.nicam = nicam;
     return titleBar;
 }
-//# sourceMappingURL=titlebar.js.map

package/lib/js/ui/components/topbar.js

@@ -27,4 +27,3 @@ export function createTopBar(player, settingsPanel) {
         cssClasses: ['titlebar-small']
     });
 }
-//# sourceMappingURL=topbar.js.map

package/lib/js/ui/handlers/accessibilityhandler.js

@@ -7,4 +7,3 @@ export function addAccessibilityAttributes(container, metadata) {
         menuitem.removeAttribute('aria-pressed');
     });
 }
-//# sourceMappingURL=accessibilityhandler.js.map

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

@@ -38,4 +38,3 @@ export function handleQualityListBoxItemSelected(player, qualitySettingsOpenButt
         closeSettingsPanel(settingsPanel, mainSettingsPage);
     };
 }
-//# sourceMappingURL=listboxhandlers.js.map

package/lib/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/js/ui/handlers/nicamhandler.js

@@ -1,5 +1,4 @@
-export function processNicam(streamObject, containerId, streamOptions) {
-    const nicamElement = document.querySelector(`#${containerId} .bmpui-nicam`);
+export function processNicam(streamObject, nicamElement, streamOptions) {
     const effectiveMetadata = streamOptions ? { ...streamObject.metadata, ...streamOptions } : streamObject.metadata;
     if (nicamElement) {
         nicamElement.innerHTML = '';
@@ -25,4 +24,3 @@ export function addNicamIcon(character, nicamElement) {
     span.classList.add('nicam-icon', iconClass);
     nicamElement.appendChild(span);
 }
-//# sourceMappingURL=nicamhandler.js.map