@npo/player 1.9.0

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

@@ -0,0 +1,47 @@
+import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel, PlaybackToggleButton, VolumeToggleButton, VolumeSlider, Spacer, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, SettingsToggleButton, FullscreenToggleButton } from 'bitmovin-player-ui';
+import { airPlaySupported } from '../../../js/utilities/utilities';
+export function createControlBar(npoplayer, settingsPanel, forwardButton, rewindButton) {
+    const seekBar = new SeekBar({ label: new SeekBarLabel() });
+    npoplayer.uiComponents.seekBar = seekBar;
+    var isPictureInPictureAvailable = function () {
+        return npoplayer.player?.isViewModeAvailable(npoplayer.player?.exports.ViewMode.PictureInPicture);
+    };
+    const controlbar = new ControlBar({
+        components: [
+            settingsPanel,
+            new Container({
+                components: [
+                    new PlaybackTimeLabel({
+                        timeLabelMode: PlaybackTimeLabelMode.CurrentTime,
+                        hideInLivePlayback: true
+                    }),
+                    seekBar,
+                    new PlaybackTimeLabel({
+                        timeLabelMode: PlaybackTimeLabelMode.TotalTime,
+                        cssClasses: ['text-right']
+                    })
+                ],
+                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()] : []),
+                    new CastToggleButton(),
+                    new SettingsToggleButton({ settingsPanel }),
+                    new FullscreenToggleButton()
+                ],
+                cssClasses: ['controlbar-bottom']
+            })
+        ]
+    });
+    npoplayer.uiComponents.controlbar = controlbar;
+    return controlbar;
+}
+//# sourceMappingURL=controlbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controlbar.js","sourceRoot":"","sources":["../../../../../src/js/ui/components/controlbar.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,4BAA4B,EAC5B,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EAEzB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAGlE,MAAM,UAAU,gBAAgB,CAC5B,SAAoB,EACpB,aAA4B,EAC5B,aAAkB,EAClB,YAAiB;IAEjB,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,YAAY,EAAE,EAAE,CAAC,CAAA;IAC1D,SAAS,CAAC,YAAY,CAAC,OAAO,GAAG,OAAO,CAAA;IAExC,IAAI,2BAA2B,GAAG;QAC9B,OAAO,SAAS,CAAC,MAAM,EAAE,mBAAmB,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IACtG,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC;QAC9B,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;qBAC3B,CAAC;oBACF,OAAO;oBACP,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,IAAI,gBAAgB,EAAE;oBACtB,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;IAGF,SAAS,CAAC,YAAY,CAAC,UAAU,GAAG,UAAU,CAAA;IAE9C,OAAO,UAAU,CAAA;AACrB,CAAC"}

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

@@ -0,0 +1,9 @@
+import { Button, Container, Label } from 'bitmovin-player-ui';
+import type NpoPlayer from '../../../npoplayer';
+import { type PlayerAPI } from 'bitmovin-player';
+import { ButtonConfig } from 'bitmovin-player-ui/dist/js/framework/components/button';
+import { LabelConfig } from 'bitmovin-player-ui/dist/js/framework/components/label';
+export declare function createCTABar(player: PlayerAPI | null, npoplayer: NpoPlayer, variant: string): Container<{
+    components: (Button<ButtonConfig> | Label<LabelConfig>)[];
+    cssClasses: string[];
+}>;

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

@@ -0,0 +1,41 @@
+/*
+* ctabar.ts
+* This file contains the code for the ctabar component used to display situational "call to action" buttons in the player.
+* These buttons include:
+* - Watch from start button (only used in live streams)
+* - Go back live button (not used in the current implementation)
+* - Ad button
+* - Accomodating Ad label
+*/
+import { Container } from 'bitmovin-player-ui';
+import { createGoBackLiveButton, createWatchFromStartButton } from './buttons';
+import { createAdButton } from './adbutton';
+import { createAdLabel } from './adlabel';
+/*
+* @function createCTABar
+* @description This function creates the ctabar component and assembles the buttons in the correct order.
+* @param {PlayerAPI} player - The player instance
+* @param {NpoPlayer} npoplayer - The player instance
+* @param {string} variant - The variant of the player
+* @returns {Container} - The ctabar component
+*/
+export function createCTABar(player, npoplayer, variant) {
+    const goBackLiveButton = createGoBackLiveButton(player);
+    const watchFromStartButton = createWatchFromStartButton(player, npoplayer);
+    let barComponents = [
+        watchFromStartButton,
+        goBackLiveButton
+    ];
+    if (variant === 'ad') {
+        const adLabel = createAdLabel(npoplayer);
+        const adButton = createAdButton(npoplayer);
+        barComponents.push(adLabel);
+        barComponents.push(adButton);
+        adLabel.hide();
+    }
+    return new Container({
+        components: barComponents,
+        cssClasses: ['controlbar-textbuttons']
+    });
+}
+//# sourceMappingURL=ctabar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ctabar.js","sourceRoot":"","sources":["../../../../../src/js/ui/components/ctabar.ts"],"names":[],"mappings":"AAAA;;;;;;;;EAQE;AAEF,OAAO,EAAU,SAAS,EAAS,MAAM,oBAAoB,CAAA;AAC7D,OAAO,EACH,sBAAsB,EACtB,0BAA0B,EAC7B,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAMzC;;;;;;;EAOE;AACF,MAAM,UAAU,YAAY,CAAE,MAAwB,EAAE,SAAoB,EAAE,OAAe;IACzF,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAA;IACvD,MAAM,oBAAoB,GAAG,0BAA0B,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IAE1E,IAAI,aAAa,GAAkD;QAC/D,oBAAoB;QACpB,gBAAgB;KACnB,CAAA;IACD,IAAG,OAAO,KAAK,IAAI,EAAE;QACjB,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QACxC,MAAM,QAAQ,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;QAC1C,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC3B,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC5B,OAAO,CAAC,IAAI,EAAE,CAAA;KACjB;IAED,OAAO,IAAI,SAAS,CAAC;QACjB,UAAU,EAAE,aAAa;QACzB,UAAU,EAAE,CAAC,wBAAwB,CAAC;KACzC,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,13 @@
+import { type PlayerAPI } from 'bitmovin-player';
+import { Button, SettingsPanel, SettingsToggleButton } from 'bitmovin-player-ui';
+export declare function createPlayNextButton(player: PlayerAPI | null): Button<{
+    cssClass: string;
+    text: string;
+    hidden: false;
+}>;
+export declare function createWatchFromStartButton(): Button<{
+    cssClass: string;
+    text: string;
+    hidden: true;
+}>;
+export declare function createSettingsButton(player: PlayerAPI | null, settingsPanel: SettingsPanel): SettingsToggleButton;

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

@@ -0,0 +1,43 @@
+import { Button, SettingsToggleButton } from 'bitmovin-player-ui';
+import { sendCustomMessage } from '../../nativemobileui';
+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,sBAAsB,CAAC;AACzD,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.d.ts

@@ -0,0 +1,2 @@
+import { ControlBar, type SettingsPanel } from 'bitmovin-player-ui';
+export declare function createControlBar(settingsPanel: SettingsPanel): ControlBar;

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

@@ -0,0 +1,23 @@
+import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel } from 'bitmovin-player-ui';
+export function createControlBar(settingsPanel) {
+    return new ControlBar({
+        components: [
+            settingsPanel,
+            new Container({
+                components: [
+                    new PlaybackTimeLabel({
+                        timeLabelMode: PlaybackTimeLabelMode.CurrentTime,
+                        hideInLivePlayback: true
+                    }),
+                    new SeekBar({ label: new SeekBarLabel() }),
+                    new PlaybackTimeLabel({
+                        timeLabelMode: PlaybackTimeLabelMode.TotalTime,
+                        cssClasses: ['text-right']
+                    })
+                ],
+                cssClasses: ['controlbar-top']
+            }),
+        ]
+    });
+}
+//# 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":"AACA,OAAO,EACH,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,YAAY,EAEf,MAAM,oBAAoB,CAAA;AAE3B,MAAM,UAAU,gBAAgB,CAC5B,aAA4B;IAE5B,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;qBAC3B,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;SACL;KACJ,CAAC,CAAA;AACN,CAAC"}

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

@@ -0,0 +1,10 @@
+import { Container } from 'bitmovin-player-ui';
+import { type PlayerAPI } from 'bitmovin-player';
+export declare function createCTABar(player: PlayerAPI | null): Container<{
+    components: import("bitmovin-player-ui").Button<{
+        cssClass: string;
+        text: string;
+        hidden: true;
+    }>[];
+    cssClasses: string[];
+}>;

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.d.ts

@@ -0,0 +1,10 @@
+import { Container } from 'bitmovin-player-ui';
+import { type PlayerAPI } from 'bitmovin-player';
+export declare function createPlayNextScreen(player: PlayerAPI | null): Container<{
+    components: import("bitmovin-player-ui").Button<{
+        cssClass: string;
+        text: string;
+        hidden: false;
+    }>[];
+    cssClasses: string[];
+}>;

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/topbar.d.ts

@@ -0,0 +1,3 @@
+import { type SettingsPanel, TitleBar } from 'bitmovin-player-ui';
+import { type PlayerAPI } from 'bitmovin-player';
+export declare function createTopBar(player: PlayerAPI | null, settingsPanel: SettingsPanel): TitleBar;

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.d.ts

@@ -0,0 +1,11 @@
+import { Container } from 'bitmovin-player-ui';
+import { type PlayerAPI } from 'bitmovin-player';
+import type NpoPlayer from '../../../npoplayer';
+export declare function createPlayNextScreen(player: PlayerAPI | null, npoplayer: NpoPlayer): Container<{
+    components: import("bitmovin-player-ui").Button<{
+        cssClass: string;
+        text: string;
+        hidden: false;
+    }>[];
+    cssClasses: string[];
+}>;

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

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+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":"AAAA,qEAAqE;AACrE,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.d.ts

@@ -0,0 +1,4 @@
+import { SettingsPanel } from 'bitmovin-player-ui';
+import type NpoPlayer from '../../../npoplayer';
+import { PlayerAPI } from 'bitmovin-player';
+export declare function createSettingsPanel(npoplayer: NpoPlayer | PlayerAPI): SettingsPanel;

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

@@ -0,0 +1,130 @@
+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');
+    //define class strings to avoid duplication
+    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.d.ts

@@ -0,0 +1,2 @@
+export declare function showPlayNextScreen(playNextFunction: () => void): void;
+export declare function hidePlayNextScreen(): void;

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

@@ -0,0 +1,18 @@
+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(() => {
+        // check classlist to see if the overlay is not already cleared
+        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;QACnB,+DAA+D;QAC/D,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.d.ts

@@ -0,0 +1,3 @@
+import { TitleBar } from 'bitmovin-player-ui';
+import type NpoPlayer from '../../../npoplayer';
+export declare function createTitleBar(npoplayer: NpoPlayer): TitleBar;

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.d.ts

@@ -0,0 +1,2 @@
+import { type SettingsPanel, TitleBar } from 'bitmovin-player-ui';
+export declare function createTopBar(settingsPanel: SettingsPanel): TitleBar;

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

@@ -0,0 +1,19 @@
+import { Container, TitleBar, PictureInPictureToggleButton, AirPlayToggleButton, CastToggleButton, SettingsToggleButton, FullscreenToggleButton } 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()
+                ],
+                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,EACzB,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;iBAC/B;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.d.ts

@@ -0,0 +1,5 @@
+import { type PlayerAPI } from 'bitmovin-player';
+import { type SettingsPanel, type SettingsPanelPage, type SettingsPanelPageOpenButton } from 'bitmovin-player-ui';
+export declare function handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (e: any) => void;
+export declare function handleSpeedListBoxItemSelected(player: PlayerAPI | null, speedSettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (source: any, args: any) => void;
+export declare function handleQualityListBoxItemSelected(player: PlayerAPI | null, qualitySettingsOpenButton: SettingsPanelPageOpenButton, settingsPanel: SettingsPanel, mainSettingsPage: SettingsPanelPage): (source: any, args: any) => void;

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

@@ -0,0 +1,41 @@
+export function handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton, settingsPanel, mainSettingsPage) {
+    return (e) => {
+        e.getItems().forEach((item) => {
+            if (item.key === e.getSelectedItem()) {
+                subtitleSettingsOpenButton.setText(item.label);
+            }
+        });
+        setTimeout(() => {
+            settingsPanel.setActivePage(mainSettingsPage);
+        }, 100);
+    };
+}
+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);
+            }
+        });
+        setTimeout(() => {
+            settingsPanel.setActivePage(mainSettingsPage);
+        }, 100);
+    };
+}
+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);
+            }
+        });
+        setTimeout(() => {
+            settingsPanel.setActivePage(mainSettingsPage);
+        }, 100);
+    };
+}
+//# 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,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,UAAU,CAAC,GAAG,EAAE;YACZ,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACjD,CAAC,EAAE,GAAG,CAAC,CAAA;IACX,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,UAAU,CAAC,GAAG,EAAE;YACZ,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACjD,CAAC,EAAE,GAAG,CAAC,CAAA;IACX,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,UAAU,CAAC,GAAG,EAAE;YACZ,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACjD,CAAC,EAAE,GAAG,CAAC,CAAA;IACX,CAAC,CAAA;AACL,CAAC"}

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

@@ -0,0 +1,2 @@
+import { StreamObject } from "types/interfaces";
+export declare function processNicam(streamObject: StreamObject, containerId: string): void;