@npo/player 1.27.7 → 1.28.0

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

@@ -1,43 +0,0 @@
-import { ControlBar, Container, PlaybackTimeLabel, PlaybackTimeLabelMode, SeekBar, SeekBarLabel, Spacer } from 'bitmovin-player-ui';
-import { createForwardButton, createRewindButton, createAirPlayToggleButton, createCastToggleButton, createFullscreenToggleButton, createPictureInPictureToggleButton, createPlaybackToggleButton, createSettingsButton, createVolumeToggleButton } from './buttons';
-import { createSettingsPanel } from '../settingspanel';
-export function createControlBar(player) {
-    const rewindButton = createRewindButton(player);
-    const forwardButton = createForwardButton(player);
-    const settingsPanel = createSettingsPanel(player);
-    return new ControlBar({
-        components: [
-            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: [
-                    createPlaybackToggleButton(),
-                    createVolumeToggleButton(player),
-                    rewindButton,
-                    forwardButton,
-                    new Spacer(),
-                    createPictureInPictureToggleButton(player),
-                    createAirPlayToggleButton(),
-                    createCastToggleButton(),
-                    createSettingsButton(settingsPanel),
-                    settingsPanel,
-                    createFullscreenToggleButton(player)
-                ],
-                cssClasses: ['controlbar-bottom']
-            })
-        ]
-    });
-}

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

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

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

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

package/lib/ui/components/nativemobile/titlebar.d.ts

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

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

@@ -1,7 +0,0 @@
-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;
-}

package/lib/ui/components/nativemobile/topbar.d.ts

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

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

@@ -1,23 +0,0 @@
-import { Container, TitleBar } from 'bitmovin-player-ui';
-import { createAirPlayToggleButton, createCastToggleButton, createFullscreenToggleButton, createPictureInPictureToggleButton, createSettingsButton, createVolumeToggleButton } from './buttons';
-import { createSettingsPanel } from '../settingspanel';
-export function createTopBar(player) {
-    const settingsPanel = createSettingsPanel(player);
-    return new TitleBar({
-        components: [
-            new Container({
-                components: [
-                    createAirPlayToggleButton(),
-                    createCastToggleButton(),
-                    createSettingsButton(settingsPanel),
-                    settingsPanel,
-                    createPictureInPictureToggleButton(player),
-                    createVolumeToggleButton(player),
-                    createFullscreenToggleButton(player)
-                ],
-                cssClasses: ['controlbar-top', 'controlbar-small']
-            })
-        ],
-        cssClasses: ['titlebar-small']
-    });
-}

package/lib/ui/nativemobileuicontainer.d.ts

@@ -1,5 +0,0 @@
-import { UIContainer } from 'bitmovin-player-ui';
-import { PlayerAPI } from 'bitmovin-player';
-import { CustomMessageHandlerInterface, CustomMessages } from '../types/interfaces';
-export declare function sendCustomMessage(message: CustomMessages, data?: CustomMessageHandlerInterface): CustomMessageHandlerInterface;
-export declare function nativeMobileUIContainer(player: PlayerAPI): UIContainer;

package/lib/ui/nativemobileuicontainer.js

@@ -1,42 +0,0 @@
-import { BufferingOverlay, CastStatusOverlay, ErrorMessageOverlay, PlaybackToggleOverlay, PlayerUtils, SubtitleOverlay, UIContainer } from 'bitmovin-player-ui';
-import { createCTABar } from './components/nativemobile/ctabar';
-import { createControlBar } from './components/nativemobile/controlbar';
-import { createTopBar } from './components/nativemobile/topbar';
-import { createMiddleButtons } from './components/nativemobile/buttons';
-import { createTitleBar } from './components/nativemobile/titlebar';
-const defaultData = {
-    defaultActionRequired: true
-};
-export function sendCustomMessage(message, data) {
-    try {
-        return data === undefined
-            ? JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message))
-            : JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message, JSON.stringify(data)));
-    }
-    catch {
-        return defaultData;
-    }
-}
-export function nativeMobileUIContainer(player) {
-    const middleButtons = createMiddleButtons(player);
-    const ctaBar = createCTABar(player);
-    const topBar = createTopBar(player);
-    const controlBar = createControlBar(player);
-    const errorMessageOverlay = new ErrorMessageOverlay();
-    return new UIContainer({
-        components: [
-            new SubtitleOverlay(),
-            new BufferingOverlay(),
-            new PlaybackToggleOverlay(),
-            new CastStatusOverlay(),
-            middleButtons,
-            controlBar,
-            ctaBar,
-            topBar,
-            createTitleBar(),
-            errorMessageOverlay
-        ],
-        cssClasses: ['npo-player', 'native-mobile'],
-        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Finished]
-    });
-}

package/lib/ui/nativemobileuifactory.d.ts

@@ -1,3 +0,0 @@
-import { PlayerAPI, UIConfig } from 'bitmovin-player';
-import { UIManager } from 'bitmovin-player-ui';
-export declare function nativeMobileUiFactory(player: PlayerAPI, config?: UIConfig): UIManager;

package/lib/ui/nativemobileuifactory.js

@@ -1,112 +0,0 @@
-import { PlayerEvent } from 'bitmovin-player';
-import { UIManager } from 'bitmovin-player-ui';
-import { customSpecificErrorMessageOverlayConfig } from '../services/errors/errorText';
-import { localizationConfig } from '../js/settings/localization';
-import { nativeMobileUIContainer, sendCustomMessage } from './nativemobileuicontainer';
-import { CustomMessages } from '../types/interfaces';
-import { getElementByQuery } from '../js/utilities/utilities.element';
-import { handleLiveStreamNoDvr } from './handlers/domhandlers';
-import { removeReplayClass } from '../js/playeractions/handlers/removereplayclass';
-import { processNicam } from '../services/nicamHandlers/nicamhandler';
-let adBreakActive = false;
-export function nativeMobileUiFactory(player, config = {}) {
-    UIManager.setLocalizationConfig(localizationConfig);
-    const nicamClass = '.bmpui-nicam';
-    const uiConfig = {
-        ...config,
-        errorMessages: customSpecificErrorMessageOverlayConfig,
-        disableAutoHideWhenHovered: true
-    };
-    const mobileUIManager = new UIManager(player, nativeMobileUIContainer(player), uiConfig);
-    let _webData = {};
-    const removeFinishedClass = () => {
-        player.off(PlayerEvent.Seek, removeFinishedClass);
-        removeReplayClass(player);
-    };
-    const updateUI = () => {
-        const seekbarTitleElement = getElementByQuery({
-            container: player.getContainer(),
-            query: '.bmpui-seekbar-label-title'
-        });
-        if (_webData.assets.preroll) {
-            adBreakActive = true;
-            player.on(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
-            player.on(PlayerEvent.AdError, setAdBreakActiveToFalse);
-        }
-        if (_webData.metadata?.ageRating || _webData.metadata?.nicam) {
-            const webDataPlayerContext = {
-                npoPlayer: {
-                    streamObject: {
-                        metadata: {
-                            ageRating: _webData.metadata.ageRating,
-                            nicam: _webData.metadata.nicam
-                        }
-                    }
-                }
-            };
-            const nicamElement = getElementByQuery({ container: player.getContainer(), query: nicamClass });
-            processNicam(webDataPlayerContext, nicamElement);
-        }
-        if (seekbarTitleElement)
-            seekbarTitleElement.textContent = _webData.title || '';
-        handleLiveStreamNoDvr(player, _webData);
-    };
-    const setAdBreakActiveToFalse = () => {
-        adBreakActive = false;
-        player.off(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
-        player.off(PlayerEvent.AdError, setAdBreakActiveToFalse);
-    };
-    if (window.bitmovin?.customMessageHandler) {
-        const handleData = (data) => {
-            if (data) {
-                const newData = JSON.parse(data);
-                if (data !== _webData.toString()) {
-                    _webData = newData;
-                    updateUI();
-                }
-            }
-        };
-        window.bitmovin.customMessageHandler.on(CustomMessages.SET_STREAM_LINK, handleData);
-        window.bitmovin.customMessageHandler.on(CustomMessages.SET_WEB_DATA, handleData);
-        window.bitmovin.customMessageHandler.on(CustomMessages.DO_ERROR, (data) => {
-            if (!data)
-                return;
-            const messageData = JSON.parse(data);
-            if (messageData.errorMessage) {
-                doError(messageData.errorMessage);
-            }
-        });
-    }
-    const addEventListeners = () => {
-        player.off(PlayerEvent.Ready, addEventListeners);
-        sendCustomMessage(CustomMessages.JAVASCRIPT_READY);
-    };
-    const doError = (data) => {
-        window.bitmovin.customMessageHandler.off(CustomMessages.DO_ERROR, data.toString());
-        const input = data.input;
-        if (input) {
-            const uiComponents = mobileUIManager.activeUi.getUI().getComponents();
-            const errorMessageOverlay = uiComponents.find((component) => component.getConfig().cssClass === 'ui-errormessage-overlay');
-            if (!errorMessageOverlay)
-                return;
-            try {
-                errorMessageOverlay.display(input);
-            }
-            catch {
-                return;
-            }
-        }
-    };
-    const onPlayerError = (event) => {
-        player.off(PlayerEvent.Error, (event) => {
-            onPlayerError(event);
-        });
-        sendCustomMessage(CustomMessages.ERROR_TRIGGERED, { error: event });
-    };
-    player.on(PlayerEvent.Seek, removeFinishedClass);
-    player.on(PlayerEvent.Ready, addEventListeners);
-    player.on(PlayerEvent.Error, (event) => {
-        onPlayerError(event);
-    });
-    return mobileUIManager;
-}

package/lib/ui/nativemobileuifactory.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/ui/nativemobileuifactory.test.js

@@ -1,64 +0,0 @@
-import { nativeMobileUiFactory } from './nativemobileuifactory';
-import { CustomMessages } from '../types/interfaces';
-import '@testing-library/jest-dom';
-const title = 'Test Stream';
-let storedCallbacks = {};
-jest.mock('bitmovin-player-ui', () => {
-    return jest.requireActual('../../tests/mocks/mockPlayerUi').mockPlayerUi;
-});
-describe('nativeMobileUiFactory', () => {
-    let mockPlayer;
-    let containerElement;
-    beforeEach(() => {
-        containerElement = document.createElement('div');
-        const wrapperElement = document.createElement('div');
-        wrapperElement.className = 'bmpui-npo-player';
-        containerElement.appendChild(wrapperElement);
-        const seekbarTitleElement = document.createElement('div');
-        seekbarTitleElement.className = 'bmpui-seekbar-label-title';
-        wrapperElement.appendChild(seekbarTitleElement);
-        const nicamElement = document.createElement('div');
-        nicamElement.className = 'bmpui-nicam';
-        wrapperElement.appendChild(nicamElement);
-        mockPlayer = {
-            on: jest.fn(),
-            off: jest.fn(),
-            getContainer: () => containerElement,
-            getVolume: jest.fn().mockReturnValue(50),
-            getAvailableVideoQualities: jest.fn()
-        };
-        storedCallbacks = {};
-        if (storedCallbacks) {
-            ;
-            window.bitmovin = window.bitmovin || {};
-            window.bitmovin.customMessageHandler = {
-                on: jest.fn((messageType, callbackFn) => {
-                    storedCallbacks[messageType] = callbackFn;
-                })
-            };
-        }
-        nativeMobileUiFactory(mockPlayer);
-    });
-    test('should update the DOM correctly when sendSynchronous is called with setstreamlink', () => {
-        const mockData = {
-            title: title,
-            stream: {
-                isLiveStream: true,
-                hasDvrWindow: false
-            },
-            assets: {
-                preroll: undefined
-            }
-        };
-        if (storedCallbacks[CustomMessages.SET_STREAM_LINK]) {
-            storedCallbacks[CustomMessages.SET_STREAM_LINK](JSON.stringify(mockData));
-        }
-        const container = mockPlayer.getContainer();
-        expect(container.querySelector('.bmpui-seekbar-label-title')?.textContent).toBe(title);
-        expect(container.querySelector('.bmpui-npo-player')?.classList.contains('livestream-no-dvr')).toBeTruthy();
-    });
-    afterEach(() => {
-        jest.clearAllMocks();
-        document.body.innerHTML = '';
-    });
-});

package/src/style/variants/_player-native-mobile.scss

@@ -1,13 +0,0 @@
-.bmpui-npo-player.bmpui-native-mobile {
-  .bmpui-seekbar-playbackposition-marker {
-    margin-top: -1px;
-  }
-  .bmpui-overlay-playnext {
-    background-color: none;
-    bottom: 25%;
-  }
-
-  .bmpui-ui-subtitle-label span {
-    font-size: 1em !important;
-  }
-}