@npo/player 1.10.1 → 1.10.2

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

@@ -0,0 +1,43 @@
+import { Button, SettingsToggleButton } from 'bitmovin-player-ui';
+import { sendCustomMessage } from '../../nativemobileuicontainer';
+import { CustomMessages } from '../../../../types/interfaces';
+export function createPlayNextButton(player) {
+    const playNextButton = new Button({
+        cssClass: 'ui-hugeplaynextbacktogglebutton ui-playNextButton bmpui-ui-button',
+        text: 'De volgende aflevering wordt zo afgespeeld...',
+        hidden: false
+    });
+    if (player != null) {
+        playNextButton.onClick.subscribe(() => {
+            const result = sendCustomMessage(CustomMessages.DO_PLAY_NEXT);
+            if (result.defaultActionRequired === true) {
+                console.log('do something');
+            }
+            else {
+                console.log('do something else');
+            }
+        });
+    }
+    return playNextButton;
+}
+export function createWatchFromStartButton() {
+    return new Button({
+        cssClass: 'ui-textbutton ui-watchfromstartbutton bmpui-ui-button',
+        text: 'Kijk vanaf het begin',
+        hidden: true
+    });
+}
+export function createSettingsButton(player, settingsPanel) {
+    const customSettingsToggleButton = new SettingsToggleButton({ settingsPanel });
+    if (player != null) {
+        customSettingsToggleButton.onToggleOn.subscribe(() => {
+            const result = sendCustomMessage(CustomMessages.TOGGLE_SETTINGS_PANEL);
+            if (result.defaultActionRequired === false) {
+                settingsPanel.hide();
+                customSettingsToggleButton.off();
+            }
+        });
+    }
+    return customSettingsToggleButton;
+}
+//# sourceMappingURL=buttons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/nativemobile/buttons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAiB,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAA8B,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE1F,MAAM,UAAU,oBAAoB,CAChC,MAAwB;IAExB,MAAM,cAAc,GAAG,IAAI,MAAM,CAAC;QAC9B,QAAQ,EACJ,mEAAmE;QACvE,IAAI,EAAE,+CAA+C;QACrD,MAAM,EAAE,KAAK;KAChB,CAAC,CAAA;IAEF,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;YAClC,MAAM,MAAM,GAA+B,iBAAiB,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;YACzF,IAAI,MAAM,CAAC,qBAAqB,KAAK,IAAI,EAAE;gBACvC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;aAC9B;iBAAM;gBACH,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAA;aACnC;QACL,CAAC,CAAC,CAAA;KACL;IAED,OAAO,cAAc,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,0BAA0B;IACtC,OAAO,IAAI,MAAM,CAAC;QACd,QAAQ,EAAE,uDAAuD;QACjE,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,IAAI;KACf,CAAC,CAAA;AACN,CAAC;AAED,MAAM,UAAU,oBAAoB,CAChC,MAAwB,EACxB,aAA4B;IAE5B,MAAM,0BAA0B,GAAG,IAAI,oBAAoB,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAE9E,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,0BAA0B,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YACjD,MAAM,MAAM,GAA+B,iBAAiB,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAA;YAClG,IAAI,MAAM,CAAC,qBAAqB,KAAK,KAAK,EAAE;gBACxC,aAAa,CAAC,IAAI,EAAE,CAAA;gBACpB,0BAA0B,CAAC,GAAG,EAAE,CAAA;aACnC;QACL,CAAC,CAAC,CAAA;KACL;IAED,OAAO,0BAA0B,CAAC;AACtC,CAAC"}

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

@@ -0,0 +1,52 @@
+import { PlayerEvent } from 'bitmovin-player';
+import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, SettingsToggleButton, FullscreenToggleButton, CastToggleButton } from 'bitmovin-player-ui';
+import { createForwardButton, createRewindButton } from '../buttons';
+import { airPlaySupported } from '../../../utilities/utilities';
+export function createControlBar(player, settingsPanel) {
+    const rewindButton = createRewindButton(player);
+    const forwardButton = createForwardButton(player);
+    const chromeCastButton = new CastToggleButton({
+        hidden: true
+    });
+    player?.on(PlayerEvent.CastAvailable, () => {
+        if (player?.isCastAvailable())
+            chromeCastButton.show();
+    });
+    return new ControlBar({
+        components: [
+            settingsPanel,
+            new Container({
+                components: [
+                    new PlaybackTimeLabel({
+                        timeLabelMode: PlaybackTimeLabelMode.CurrentTime,
+                        hideInLivePlayback: true,
+                        cssClasses: ['current-time']
+                    }),
+                    new SeekBar({ label: new SeekBarLabel() }),
+                    new PlaybackTimeLabel({
+                        timeLabelMode: PlaybackTimeLabelMode.TotalTime,
+                        cssClasses: ['total-time']
+                    })
+                ],
+                cssClasses: ['controlbar-top']
+            }),
+            new Container({
+                components: [
+                    new PlaybackToggleButton(),
+                    new VolumeToggleButton(),
+                    new VolumeSlider(),
+                    rewindButton,
+                    forwardButton,
+                    new Spacer(),
+                    ...(document.pictureInPictureEnabled && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) ? [new PictureInPictureToggleButton()] : []),
+                    ...(airPlaySupported() ? [new AirPlayToggleButton()] : []),
+                    chromeCastButton,
+                    new SettingsToggleButton({ settingsPanel }),
+                    new FullscreenToggleButton()
+                ],
+                cssClasses: ['controlbar-bottom']
+            })
+        ]
+    });
+}
+//# sourceMappingURL=controlbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controlbar.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/nativemobile/controlbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EACH,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,YAAY,EAEZ,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,4BAA4B,EAC5B,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EACnB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAE/D,MAAM,UAAU,gBAAgB,CAC5B,MAAiB,EACjB,aAA4B;IAE5B,MAAM,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAC/C,MAAM,aAAa,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAA;IAEjD,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;QAC1C,MAAM,EAAE,IAAI;KACf,CAAC,CAAA;IAEF,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE,GAAG,EAAE;QACvC,IAAG,MAAM,EAAE,eAAe,EAAE;YAAE,gBAAgB,CAAC,IAAI,EAAE,CAAA;IACzD,CAAC,CAAC,CAAA;IAEF,OAAO,IAAI,UAAU,CAAC;QAClB,UAAU,EAAE;YACR,aAAa;YACb,IAAI,SAAS,CAAC;gBACV,UAAU,EAAE;oBACR,IAAI,iBAAiB,CAAC;wBAClB,aAAa,EAAE,qBAAqB,CAAC,WAAW;wBAChD,kBAAkB,EAAE,IAAI;wBACxB,UAAU,EAAE,CAAC,cAAc,CAAC;qBAC/B,CAAC;oBACF,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,YAAY,EAAE,EAAE,CAAC;oBAC1C,IAAI,iBAAiB,CAAC;wBAClB,aAAa,EAAE,qBAAqB,CAAC,SAAS;wBAC9C,UAAU,EAAE,CAAC,YAAY,CAAC;qBAC7B,CAAC;iBACL;gBACD,UAAU,EAAE,CAAC,gBAAgB,CAAC;aACjC,CAAC;YACF,IAAI,SAAS,CAAC;gBACV,UAAU,EAAE;oBACR,IAAI,oBAAoB,EAAE;oBAC1B,IAAI,kBAAkB,EAAE;oBACxB,IAAI,YAAY,EAAE;oBAClB,YAAY;oBACZ,aAAa;oBACb,IAAI,MAAM,EAAE;oBACZ,GAAG,CAAC,QAAQ,CAAC,uBAAuB,IAAI,gCAAgC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,4BAA4B,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC/I,GAAG,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC1D,gBAAgB;oBAChB,IAAI,oBAAoB,CAAC,EAAE,aAAa,EAAE,CAAC;oBAC3C,IAAI,sBAAsB,EAAE;iBAC/B;gBACD,UAAU,EAAE,CAAC,mBAAmB,CAAC;aACpC,CAAC;SACL;KACJ,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,12 @@
+import { Container } from 'bitmovin-player-ui';
+import { createWatchFromStartButton } from '../nativemobile/buttons';
+import { createGoBackLiveButton } from '../buttons';
+export function createCTABar(player) {
+    const goBackLiveButton = createGoBackLiveButton(player);
+    const watchFromStartButton = createWatchFromStartButton();
+    return new Container({
+        components: [watchFromStartButton, goBackLiveButton],
+        cssClasses: ['controlbar-textbuttons']
+    });
+}
+//# sourceMappingURL=ctabar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ctabar.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/nativemobile/ctabar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAGnD,MAAM,UAAU,YAAY,CAAE,MAAwB;IAClD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAA;IACvD,MAAM,oBAAoB,GAAG,0BAA0B,EAAE,CAAA;IAEzD,OAAO,IAAI,SAAS,CAAC;QACjB,UAAU,EAAE,CAAC,oBAAoB,EAAE,gBAAgB,CAAC;QACpD,UAAU,EAAE,CAAC,wBAAwB,CAAC;KACzC,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,16 @@
+import { Container } from 'bitmovin-player-ui';
+import { createPlayNextButton } from './buttons';
+import { showPlayNextScreen } from '../shared/playnextscreen';
+export function createPlayNextScreen(player) {
+    const playNextButton = createPlayNextButton(player);
+    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/playnext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playnext.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/nativemobile/playnext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAK7D,MAAM,UAAU,oBAAoB,CAChC,MAAwB;IACxB,MAAM,cAAc,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;IAEnD,IAAI,MAAM,CAAC,QAAQ,CAAC,oBAAoB,EAAE;QACtC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;YAC/D,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAA;KACL;IAED,OAAO,IAAI,SAAS,CAAC;QACjB,UAAU,EAAE,CAAC,cAAc,CAAC;QAC5B,UAAU,EAAE,CAAC,kBAAkB,CAAC;KACnC,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,8 @@
+import { Label, TitleBar } from 'bitmovin-player-ui';
+export function createTitleBar() {
+    const nicam = new Label({ text: '', cssClass: 'nicam' });
+    const titleBar = new TitleBar({ cssClasses: ['metadata'] });
+    titleBar.addComponent(nicam);
+    return titleBar;
+}
+//# sourceMappingURL=titlebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"titlebar.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/nativemobile/titlebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,UAAU,cAAc;IAC1B,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAA;IACxD,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;IAC3D,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAE5B,OAAO,QAAQ,CAAA;AACnB,CAAC"}

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

@@ -0,0 +1,21 @@
+import { Container, TitleBar, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, FullscreenToggleButton, VolumeToggleButton } from 'bitmovin-player-ui';
+import { createSettingsButton } from './buttons';
+export function createTopBar(player, settingsPanel) {
+    return new TitleBar({
+        components: [
+            new Container({
+                components: [
+                    new CastToggleButton(),
+                    new AirPlayToggleButton(),
+                    createSettingsButton(player, settingsPanel),
+                    new PictureInPictureToggleButton(),
+                    new FullscreenToggleButton(),
+                    new VolumeToggleButton()
+                ],
+                cssClasses: ['controlbar-top', 'controlbar-small']
+            })
+        ],
+        cssClasses: ['titlebar-small']
+    });
+}
+//# sourceMappingURL=topbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/nativemobile/topbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,SAAS,EACT,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGhD,MAAM,UAAU,YAAY,CAAE,MAAwB,EAAE,aAA4B;IAChF,OAAO,IAAI,QAAQ,CAAC;QAChB,UAAU,EAAE;YACR,IAAI,SAAS,CAAC;gBACV,UAAU,EAAE;oBACR,IAAI,gBAAgB,EAAE;oBACtB,IAAI,mBAAmB,EAAE;oBACzB,oBAAoB,CAAC,MAAM,EAAE,aAAa,CAAC;oBAC3C,IAAI,4BAA4B,EAAE;oBAClC,IAAI,sBAAsB,EAAE;oBAC5B,IAAI,kBAAkB,EAAE;iBAC3B;gBACD,UAAU,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,CAAC;aACrD,CAAC;SACL;QACD,UAAU,EAAE,CAAC,gBAAgB,CAAC;KACjC,CAAC,CAAA;AACN,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"playnext.js","sourceRoot":"","sources":["../../../../../src/js/ui/components/playnext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAI5D,MAAM,UAAU,oBAAoB,CAChC,MAAwB,EACxB,SAAoB;IAEpB,MAAM,cAAc,GAAG,oBAAoB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IAE9D,OAAO,IAAI,SAAS,CAAC;QACjB,UAAU,EAAE,CAAC,cAAc,CAAC;QAC5B,UAAU,EAAE,CAAC,kBAAkB,CAAC;KACnC,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,129 @@
+import { SubtitleListBox, ListBox, SettingsPanel, SettingsPanelPage, SettingsPanelPageOpenButton, SettingsPanelPageBackButton, Button, Label, SettingsPanelItem, AudioQualitySelectBox, AudioTrackSelectBox } from 'bitmovin-player-ui';
+import { localize } from '../../utilities/utilities';
+import { handleSubtitleListBoxItemSelected, handleSpeedListBoxItemSelected, handleQualityListBoxItemSelected } from '../handlers/listboxhandlers';
+export function createSettingsPanel(npoplayer) {
+    const player = ('player' in npoplayer) ? npoplayer.player : npoplayer;
+    const subtitleListBox = new SubtitleListBox();
+    const speedListBox = new ListBox({
+        items: [
+            { key: '0.25', label: '0.25x' },
+            { key: '0.5', label: '0.5x' },
+            { key: '1', label: '1x' },
+            { key: '1.5', label: '1.5x' },
+            { key: '2', label: '2x' }
+        ]
+    });
+    const qualityListBox = new ListBox();
+    const settingsLabel = localize('settings');
+    const videoqualityLabel = localize('settings.video.quality');
+    const speedLabel = localize('speed');
+    const subtitlesLabel = localize('settings.subtitles');
+    const audioqualityLabel = localize('settings.audio.quality');
+    const audiotrackLabel = localize('settings.audio.track');
+    const autoLabel = localize('auto');
+    const settingTriggerClass = 'settings-trigger';
+    const settingsBackButtonClass = 'settings-back-button';
+    const listboxPanelClass = 'listbox-panel';
+    const listboxPagerButtonClass = 'listbox-pager-button';
+    const subtitlePanelPage = new SettingsPanelPage({
+        components: [
+            new Button({ cssClass: settingTriggerClass }),
+            new SettingsPanelItem('', subtitleListBox)
+        ],
+        cssClasses: [listboxPanelClass]
+    });
+    const speedPanelPage = new SettingsPanelPage({
+        components: [
+            new Button({ cssClass: settingTriggerClass }),
+            new SettingsPanelItem('', speedListBox)
+        ],
+        cssClasses: [listboxPanelClass]
+    });
+    const qualityPanelPage = new SettingsPanelPage({
+        components: [
+            new Button({ cssClass: settingTriggerClass }),
+            new SettingsPanelItem('', qualityListBox)
+        ],
+        cssClasses: [listboxPanelClass]
+    });
+    const settingsTriggerButton = new Button({ cssClass: settingTriggerClass });
+    const mainSettingsPage = new SettingsPanelPage({
+        components: [
+            settingsTriggerButton,
+            new Label({ text: settingsLabel, cssClass: 'setting-header' }),
+            new SettingsPanelItem(audioqualityLabel, new AudioQualitySelectBox()),
+            new SettingsPanelItem(audiotrackLabel, new AudioTrackSelectBox())
+        ],
+        cssClasses: ['main-panel']
+    });
+    mainSettingsPage.onActive.subscribeOnce(() => {
+        qualityListBox.addItem('auto', autoLabel);
+        player?.getAvailableVideoQualities().forEach(quality => {
+            qualityListBox.addItem(quality.id, quality.label ?? 'test');
+        });
+        qualityListBox.selectItem('auto');
+    });
+    const settingsPanel = new SettingsPanel({
+        components: [
+            mainSettingsPage,
+            subtitlePanelPage,
+            speedPanelPage,
+            qualityPanelPage
+        ],
+        hidden: true,
+        pageTransitionAnimation: false
+    });
+    const subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({
+        targetPage: subtitlePanelPage,
+        container: settingsPanel,
+        text: 'Nederlands',
+        cssClasses: [listboxPagerButtonClass]
+    });
+    const speedSettingsOpenButton = new SettingsPanelPageOpenButton({
+        targetPage: speedPanelPage,
+        container: settingsPanel,
+        text: '1x',
+        cssClasses: [listboxPagerButtonClass]
+    });
+    const qualitySettingsOpenButton = new SettingsPanelPageOpenButton({
+        targetPage: qualityPanelPage,
+        container: settingsPanel,
+        text: 'automatisch',
+        cssClasses: [listboxPagerButtonClass]
+    });
+    const subtitlesPanelItem = new SettingsPanelItem(subtitlesLabel, subtitleSettingsOpenButton, { hidden: false });
+    const speedPanelItem = new SettingsPanelItem(speedLabel, speedSettingsOpenButton);
+    const qualityPanelItem = new SettingsPanelItem(videoqualityLabel, qualitySettingsOpenButton, { hidden: false });
+    mainSettingsPage.addComponent(subtitlesPanelItem);
+    mainSettingsPage.addComponent(speedPanelItem);
+    mainSettingsPage.addComponent(qualityPanelItem);
+    subtitlePanelPage.addComponent(new SettingsPanelPageBackButton({
+        targetPage: mainSettingsPage,
+        container: settingsPanel,
+        text: 'Ondertiteling',
+        cssClasses: [settingsBackButtonClass]
+    }));
+    speedPanelPage.addComponent(new SettingsPanelPageBackButton({
+        targetPage: mainSettingsPage,
+        container: settingsPanel,
+        text: 'Snelheid',
+        cssClasses: [settingsBackButtonClass]
+    }));
+    qualityPanelPage.addComponent(new SettingsPanelPageBackButton({
+        targetPage: mainSettingsPage,
+        container: settingsPanel,
+        text: 'Kwaliteit',
+        cssClasses: [settingsBackButtonClass]
+    }));
+    if (('uiComponents' in npoplayer)) {
+        npoplayer.uiComponents.subtitlesButton = subtitlesPanelItem;
+        npoplayer.uiComponents.qualityButton = qualityPanelItem;
+    }
+    subtitleListBox.onItemSelected.subscribe(handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton, settingsPanel, mainSettingsPage));
+    speedListBox.selectItem('1');
+    speedListBox.onItemSelected.subscribe(handleSpeedListBoxItemSelected(player, speedSettingsOpenButton, settingsPanel, mainSettingsPage));
+    qualityListBox.selectItem('auto');
+    qualityListBox.onItemSelected.subscribe(handleQualityListBoxItemSelected(player, qualitySettingsOpenButton, settingsPanel, mainSettingsPage));
+    return settingsPanel;
+}
+//# sourceMappingURL=settingspanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settingspanel.js","sourceRoot":"","sources":["../../../../../src/js/ui/components/settingspanel.ts"],"names":[],"mappings":"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"}

package/lib/js/ui/components/shared/playnextscreen.js

@@ -0,0 +1,17 @@
+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> ');
+    playnextOverlay?.classList.add('show');
+    window.setTimeout(() => {
+        if (playnextOverlay?.classList.contains('show') ?? false) {
+            playNextFunction();
+        }
+    }, 15000);
+}
+export function hidePlayNextScreen() {
+    document.querySelector('.playnextcountdown')?.remove();
+    document.querySelector('.bmpui-overlay-playnext')?.classList.remove('show');
+}
+//# sourceMappingURL=playnextscreen.js.map

package/lib/js/ui/components/shared/playnextscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playnextscreen.js","sourceRoot":"","sources":["../../../../../../src/js/ui/components/shared/playnextscreen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAAE,gBAA4B;IAC5D,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAC1C,yBAAyB,CAC5B,CAAA;IACD,QAAQ;SACH,aAAa,CACV,yFAAyF,CAC5F;QACD,EAAE,kBAAkB,CAChB,WAAW,EACX,giBAAgiB,CACniB,CAAA;IACL,eAAe,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACtC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;QAEnB,IAAI,eAAe,EAAE,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE;YACtD,gBAAgB,EAAE,CAAC;SACtB;IACL,CAAC,EAAE,KAAK,CAAC,CAAA;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB;IAC9B,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAA;IACtD,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;AAC/E,CAAC"}

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

@@ -0,0 +1,9 @@
+import { Label, TitleBar } from 'bitmovin-player-ui';
+export function createTitleBar(npoplayer) {
+    const nicam = new Label({ text: '', cssClass: 'nicam' });
+    const titleBar = new TitleBar({ cssClasses: ['metadata'] });
+    titleBar.addComponent(nicam);
+    npoplayer.uiComponents.nicam = nicam;
+    return titleBar;
+}
+//# sourceMappingURL=titlebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"titlebar.js","sourceRoot":"","sources":["../../../../../src/js/ui/components/titlebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAGpD,MAAM,UAAU,cAAc,CAAE,SAAoB;IAChD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAA;IACxD,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;IAC3D,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC5B,SAAS,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK,CAAA;IAEpC,OAAO,QAAQ,CAAA;AACnB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { Container, TitleBar, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeControlButton } from 'bitmovin-player-ui';
+export function createTopBar(settingsPanel) {
+    return new TitleBar({
+        components: [
+            new Container({
+                components: [
+                    new PictureInPictureToggleButton(),
+                    new AirPlayToggleButton(),
+                    new CastToggleButton(),
+                    new SettingsToggleButton({ settingsPanel }),
+                    new FullscreenToggleButton(),
+                    new VolumeControlButton({
+                        vertical: true,
+                    }),
+                ],
+                cssClasses: ['controlbar-top', 'controlbar-small']
+            })
+        ],
+        cssClasses: ['titlebar-small']
+    });
+}
+//# sourceMappingURL=topbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.js","sourceRoot":"","sources":["../../../../../src/js/ui/components/topbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,SAAS,EACT,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACtB,MAAM,oBAAoB,CAAA;AAE3B,MAAM,UAAU,YAAY,CAAE,aAA4B;IACtD,OAAO,IAAI,QAAQ,CAAC;QAChB,UAAU,EAAE;YACR,IAAI,SAAS,CAAC;gBACV,UAAU,EAAE;oBACR,IAAI,4BAA4B,EAAE;oBAClC,IAAI,mBAAmB,EAAE;oBACzB,IAAI,gBAAgB,EAAE;oBACtB,IAAI,oBAAoB,CAAC,EAAE,aAAa,EAAE,CAAC;oBAC3C,IAAI,sBAAsB,EAAE;oBAC5B,IAAI,mBAAmB,CAAC;wBACpB,QAAQ,EAAE,IAAI;qBACjB,CAAC;iBACL;gBACD,UAAU,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,CAAC;aACrD,CAAC;SACL;QACD,UAAU,EAAE,CAAC,gBAAgB,CAAC;KACjC,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,41 @@
+function closeSettingsPanel(settingsPanel, mainSettingsPage) {
+    setTimeout(() => {
+        if (settingsPanel.getActivePage() !== mainSettingsPage)
+            settingsPanel.setActivePage(mainSettingsPage);
+    }, 100);
+}
+export function handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton, settingsPanel, mainSettingsPage) {
+    return (e) => {
+        e.getItems().forEach((item) => {
+            if (item.key === e.getSelectedItem()) {
+                subtitleSettingsOpenButton.setText(item.label);
+            }
+        });
+        closeSettingsPanel(settingsPanel, mainSettingsPage);
+    };
+}
+export function handleSpeedListBoxItemSelected(player, speedSettingsOpenButton, settingsPanel, mainSettingsPage) {
+    return (source, args) => {
+        source.getItems().forEach((item) => {
+            if (item.key === args) {
+                player?.setPlaybackSpeed(parseFloat(item.key));
+                speedSettingsOpenButton.setText(item.label);
+                source.selectItem(item.key);
+            }
+        });
+        closeSettingsPanel(settingsPanel, mainSettingsPage);
+    };
+}
+export function handleQualityListBoxItemSelected(player, qualitySettingsOpenButton, settingsPanel, mainSettingsPage) {
+    return (source, args) => {
+        source.getItems().forEach((item) => {
+            if (item.key === args) {
+                player?.setVideoQuality(item.key);
+                qualitySettingsOpenButton.setText(item.label);
+                source.selectItem(item.key);
+            }
+        });
+        closeSettingsPanel(settingsPanel, mainSettingsPage);
+    };
+}
+//# sourceMappingURL=listboxhandlers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listboxhandlers.js","sourceRoot":"","sources":["../../../../../src/js/ui/handlers/listboxhandlers.ts"],"names":[],"mappings":"AAQA,SAAS,kBAAkB,CAAC,aAA4B,EAAE,gBAAmC;IACzF,UAAU,CAAC,GAAG,EAAE;QACZ,IAAG,aAAa,CAAC,aAAa,EAAE,KAAK,gBAAgB;YAAE,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;IACxG,CAAC,EAAE,GAAG,CAAC,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,iCAAiC,CAC7C,0BAAuD,EACvD,aAA4B,EAC5B,gBAAmC;IAEnC,OAAO,CAAC,CAAM,EAAE,EAAE;QACd,CAAC,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;YAC/B,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,eAAe,EAAE,EAAE;gBAClC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;aACjD;QACL,CAAC,CAAC,CAAA;QACF,kBAAkB,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;IACxD,CAAC,CAAA;AACL,CAAC;AAED,MAAM,UAAU,8BAA8B,CAC1C,MAAwB,EACxB,uBAAoD,EACpD,aAA4B,EAC5B,gBAAmC;IAEnC,OAAO,CAAC,MAAW,EAAE,IAAS,EAAE,EAAE;QAC9B,MAAM,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,EAAE;gBACnB,MAAM,EAAE,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;gBAC9C,uBAAuB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC3C,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;aAC9B;QACL,CAAC,CAAC,CAAA;QACF,kBAAkB,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;IACxD,CAAC,CAAA;AACL,CAAC;AAED,MAAM,UAAU,gCAAgC,CAC5C,MAAwB,EACxB,yBAAsD,EACtD,aAA4B,EAC5B,gBAAmC;IAEnC,OAAO,CAAC,MAAW,EAAE,IAAS,EAAE,EAAE;QAC9B,MAAM,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,EAAE;gBACnB,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;gBACjC,yBAAyB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC7C,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;aAC9B;QACL,CAAC,CAAC,CAAA;QACF,kBAAkB,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;IACxD,CAAC,CAAA;AACL,CAAC"}

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

@@ -0,0 +1,15 @@
+export function processNicam(streamObject, containerId) {
+    const nicamElement = document.querySelector(`#${containerId} .bmpui-nicam`);
+    if (nicamElement) {
+        nicamElement.innerHTML = '';
+        streamObject.metadata.ageRating && addNicamIcon(streamObject.metadata.ageRating, nicamElement);
+        streamObject.metadata.nicam?.forEach((character) => addNicamIcon(character, nicamElement));
+    }
+}
+function addNicamIcon(character, nicamElement) {
+    const iconClass = `nicam-icon-${character.toLowerCase()}`;
+    const span = document.createElement('span');
+    span.classList.add('nicam-icon', iconClass);
+    nicamElement.appendChild(span);
+}
+//# sourceMappingURL=nicamhandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nicamhandler.js","sourceRoot":"","sources":["../../../../../src/js/ui/handlers/nicamhandler.ts"],"names":[],"mappings":"AAaA,MAAM,UAAU,YAAY,CAAC,YAA0B,EAAE,WAAmB;IACxE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,eAAe,CAAC,CAAA;IAC3E,IAAI,YAAY,EAAE;QACd,YAAY,CAAC,SAAS,GAAG,EAAE,CAAA;QAC3B,YAAY,CAAC,QAAQ,CAAC,SAAS,IAAI,YAAY,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC,CAAA;QAC9F,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,SAAiB,EAAE,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;KACrG;AACL,CAAC;AASD,SAAS,YAAY,CAAC,SAAiB,EAAE,YAAqB;IAC1D,MAAM,SAAS,GAAG,cAAc,SAAS,CAAC,WAAW,EAAE,EAAE,CAAA;IACzD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAC3C,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;IAC3C,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;AAClC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nicamhandler.test.js","sourceRoot":"","sources":["../../../../../src/js/ui/handlers/nicamhandler.test.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAO9C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC9B,IAAI,WAAgB,CAAC;IACrB,IAAI,gBAAkC,CAAC;IACvC,IAAI,WAAW,GAAG,QAAQ,CAAC;IAE3B,UAAU,CAAC,GAAG,EAAE;QACZ,WAAW,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC;QACxD,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QAChE,gBAAgB,GAAG;YACf,QAAQ,EAAE;gBACN,SAAS,EAAE,IAAI;gBACf,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,kBAAkB,CAAC;aACjD;SACJ,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACtC,YAAY,CAAC,gBAAuB,EAAE,WAAW,CAAC,CAAC;QACnD,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,oBAAoB,CAAC,IAAI,WAAW,eAAe,CAAC,CAAC;QACpF,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAC9C,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QACzD,YAAY,CAAC,gBAAuB,EAAE,WAAW,CAAC,CAAC;QACnD,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,oBAAoB,CAAC,IAAI,WAAW,eAAe,CAAC,CAAC;IACxF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACnC,gBAAgB,CAAC,QAAQ,GAAG,EAAE,CAAC;QAC/B,YAAY,CAAC,gBAAuB,EAAE,WAAW,CAAC,CAAC;QACnD,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,oBAAoB,CAAC,IAAI,WAAW,eAAe,CAAC,CAAC;QACpF,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"playnexthandlers.js","sourceRoot":"","sources":["../../../../../src/js/ui/handlers/playnexthandlers.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,22 @@
+const interval = 10;
+export function rewind(player) {
+    if (player != null) {
+        if (player.isLive()) {
+            player.timeShift(player.getTimeShift() - interval);
+        }
+        else {
+            player.seek(Math.max(0, player.getCurrentTime() - interval));
+        }
+    }
+}
+export function forward(player) {
+    if (player != null) {
+        if (player.isLive()) {
+            player.timeShift(Math.min(0, player.getTimeShift() + interval));
+        }
+        else {
+            player.seek(Math.min(player.getDuration(), player.getCurrentTime() + interval));
+        }
+    }
+}
+//# sourceMappingURL=timecontrolhandlers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timecontrolhandlers.js","sourceRoot":"","sources":["../../../../../src/js/ui/handlers/timecontrolhandlers.ts"],"names":[],"mappings":"AAIA,MAAM,QAAQ,GAAG,EAAE,CAAA;AAEnB,MAAM,UAAU,MAAM,CAAE,MAAwB;IAC5C,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,IAAI,MAAM,CAAC,MAAM,EAAE,EAAE;YACjB,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAA;SACrD;aAAM;YACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,cAAc,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAA;SAC/D;KACJ;AACL,CAAC;AAED,MAAM,UAAU,OAAO,CAAE,MAAwB;IAC7C,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,IAAI,MAAM,CAAC,MAAM,EAAE,EAAE;YACjB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAA;SAClE;aAAM;YACH,MAAM,CAAC,IAAI,CACP,IAAI,CAAC,GAAG,CACJ,MAAM,CAAC,WAAW,EAAE,EACpB,MAAM,CAAC,cAAc,EAAE,GAAG,QAAQ,CACrC,CACJ,CAAA;SACJ;KACJ;AACL,CAAC"}

package/lib/js/ui/nativemobileuicontainer.js

@@ -0,0 +1,48 @@
+import { BufferingOverlay, CastStatusOverlay, ErrorMessageOverlay, PlaybackToggleOverlay, SubtitleOverlay, UIContainer, } from 'bitmovin-player-ui';
+import { createPlayNextScreen } from './components/nativemobile/playnext';
+import { createCTABar } from './components/nativemobile/ctabar';
+import { createControlBar } from './components/nativemobile/controlbar';
+import { createTopBar } from './components/nativemobile/topbar';
+import { createSettingsPanel } from './components/settingspanel';
+import { createMiddleButtons } from './components/buttons';
+import { createTitleBar } from './components/nativemobile/titlebar';
+export function sendCustomMessage(message) {
+    if (window.bitmovin.customMessageHandler) {
+        return JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message)) || {};
+    }
+    return {};
+}
+export function getCustomMessage(message) {
+    if (window.bitmovin.customMessageHandler) {
+        window.bitmovin.customMessageHandler.on(message, (data) => {
+            return JSON.parse(data || '{}');
+        });
+    }
+    return {};
+}
+export function nativeMobileUIContainer(player) {
+    const middleButtons = createMiddleButtons(player);
+    const playNextScreen = createPlayNextScreen(player);
+    const settingsPanel = createSettingsPanel(player);
+    const ctaBar = createCTABar(player);
+    const topBar = createTopBar(player, settingsPanel);
+    const controlBar = createControlBar(player, settingsPanel);
+    const errorMessageOverlay = new ErrorMessageOverlay();
+    return new UIContainer({
+        components: [
+            new SubtitleOverlay(),
+            new BufferingOverlay(),
+            new PlaybackToggleOverlay(),
+            new CastStatusOverlay(),
+            playNextScreen,
+            middleButtons,
+            controlBar,
+            ctaBar,
+            topBar,
+            createTitleBar(),
+            errorMessageOverlay
+        ],
+        cssClasses: ['npo-player', 'native-mobile'],
+    });
+}
+//# sourceMappingURL=nativemobileuicontainer.js.map

package/lib/js/ui/nativemobileuicontainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativemobileuicontainer.js","sourceRoot":"","sources":["../../../../src/js/ui/nativemobileuicontainer.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,EACrB,eAAe,EACf,WAAW,GACd,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAKpE,MAAM,UAAU,iBAAiB,CAAC,OAAuB;IACrD,IAAI,MAAM,CAAC,QAAQ,CAAC,oBAAoB,EAAE;QACtC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAA;KACzF;IACD,OAAO,EAAE,CAAA;AACb,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAAuB;IACpD,IAAI,MAAM,CAAC,QAAQ,CAAC,oBAAoB,EAAE;QACtC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,IAAa,EAAE,EAAE;YAC/D,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC,CAAA;KACL;IAED,OAAO,EAAE,CAAA;AACb,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAE,MAAiB;IACtD,MAAM,aAAa,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAA;IACjD,MAAM,cAAc,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAA;IACjD,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;IACnC,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAClD,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAC1D,MAAM,mBAAmB,GAAG,IAAI,mBAAmB,EAAE,CAAA;IAErD,OAAO,IAAI,WAAW,CAAC;QACnB,UAAU,EAAE;YACR,IAAI,eAAe,EAAE;YACrB,IAAI,gBAAgB,EAAE;YACtB,IAAI,qBAAqB,EAAE;YAC3B,IAAI,iBAAiB,EAAE;YACvB,cAAc;YACd,aAAa;YACb,UAAU;YACV,MAAM;YACN,MAAM;YACN,cAAc,EAAE;YAChB,mBAAmB;SACtB;QACD,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC;KAC9C,CAAC,CAAC;AACP,CAAC"}