@npo/player 1.22.4 → 1.23.0

package/lib/tests/mocks/mockPlayerAPI.js

@@ -0,0 +1,181 @@
+import { AdQuartile, PlayerError, ModuleName, ErrorCode, BufferType, HttpRequestMethod, HttpRequestType, HttpResponseType, LogLevel, MediaType, PlayerAPINotAvailableError, PlayerEvent, PlayerModuleMissingError, PlayerType, SupportedTechnologyMode, ViewMode, WarningCode } from 'bitmovin-player';
+export const mockPlayerAPI = {
+    version: '1.0',
+    buffer: {
+        setTargetLevel: jest.fn(),
+        getLevel: jest.fn()
+    },
+    manifest: {
+        dash: {
+            getPeriod: jest.fn(),
+            listPeriods: jest.fn()
+        },
+        hls: {
+            getVideoTracks: jest.fn(),
+            getAudioTracks: jest.fn(),
+            getTextTracks: jest.fn(),
+            properties: []
+        }
+    },
+    lowlatency: {
+        getLatency: jest.fn(),
+        setTargetLatency: jest.fn(),
+        getTargetLatency: jest.fn(),
+        setCatchupConfig: jest.fn(),
+        getCatchupConfig: jest.fn(),
+        setFallbackConfig: jest.fn(),
+        getFallbackConfig: jest.fn()
+    },
+    adaptation: {
+        setConfig: jest.fn(),
+        getConfig: jest.fn()
+    },
+    ads: {
+        schedule: jest.fn(),
+        skip: jest.fn(),
+        list: jest.fn(),
+        getActiveAdBreak: jest.fn(),
+        getActiveAd: jest.fn(),
+        discardAdBreak: jest.fn(),
+        isLinearAdActive: jest.fn(),
+        getModuleInfo: jest.fn()
+    },
+    vr: {
+        setStereo: jest.fn(),
+        enableGyroscope: jest.fn(),
+        disableGyroscope: jest.fn(),
+        isGyroscopeEnabled: jest.fn(),
+        enableMouseControl: jest.fn(),
+        disableMouseControl: jest.fn(),
+        isMouseControlEnabled: jest.fn(),
+        enableKeyboardControl: jest.fn(),
+        disableKeyboardControl: jest.fn(),
+        isKeyboardControlEnabled: jest.fn(),
+        getStereo: jest.fn(),
+        getState: jest.fn(),
+        getLastError: jest.fn(),
+        getViewingDirection: jest.fn(),
+        setViewingDirection: jest.fn(),
+        moveViewingDirection: jest.fn(),
+        setViewingDirectionChangeEventInterval: jest.fn(),
+        getViewingDirectionChangeEventInterval: jest.fn(),
+        setViewingDirectionChangeThreshold: jest.fn(),
+        getViewingDirectionChangeThreshold: jest.fn(),
+        setVerticalFieldOfView: jest.fn(),
+        getVerticalFieldOfView: jest.fn(),
+        setHorizontalFieldOfView: jest.fn(),
+        getHorizontalFieldOfView: jest.fn(),
+        zoom: jest.fn(),
+        getZoom: jest.fn(),
+        deviceOrientationPermissionRequired: jest.fn(),
+        requestDeviceOrientationPermission: jest.fn()
+    },
+    subtitles: {
+        add: jest.fn(),
+        remove: jest.fn(),
+        list: jest.fn(),
+        enable: jest.fn(),
+        disable: jest.fn(),
+        cueEnter: jest.fn(),
+        cueExit: jest.fn()
+    },
+    drm: {
+        renewLicense: jest.fn()
+    },
+    exports: {
+        PlayerEvent: PlayerEvent,
+        LogLevel: LogLevel,
+        HttpRequestType: HttpRequestType,
+        HttpResponseType: HttpResponseType,
+        HttpRequestMethod: HttpRequestMethod,
+        MediaType: MediaType,
+        BufferType: BufferType,
+        AdQuartile: AdQuartile,
+        ViewMode: ViewMode,
+        WarningCode: WarningCode,
+        ErrorCode: ErrorCode,
+        PlayerError: PlayerError,
+        PlayerModuleMissingError: PlayerModuleMissingError,
+        PlayerAPINotAvailableError: PlayerAPINotAvailableError,
+        ModuleName: ModuleName,
+        SupportedTechnologyMode: SupportedTechnologyMode,
+        PlayerType: PlayerType
+    },
+    on: jest.fn(),
+    addMetadata: jest.fn(),
+    castStop: jest.fn(),
+    castVideo: jest.fn(),
+    clearQueryParameters: jest.fn(),
+    destroy: jest.fn(),
+    getAspectRatio: jest.fn(),
+    getAudio: jest.fn(),
+    getAudioBufferLength: jest.fn(),
+    getAudioQuality: jest.fn(),
+    getAvailableAudio: jest.fn(),
+    getAvailableAudioQualities: jest.fn(),
+    getAvailableVideoQualities: jest.fn(),
+    getConfig: jest.fn(),
+    getContainer: jest.fn(),
+    getCurrentTime: jest.fn(),
+    getDownloadedAudioData: jest.fn(),
+    getDownloadedVideoData: jest.fn(),
+    getDroppedVideoFrames: jest.fn(),
+    getDuration: jest.fn(),
+    getManifest: jest.fn(),
+    getMaxTimeShift: jest.fn(),
+    getPlaybackAudioData: jest.fn(),
+    getPlaybackSpeed: jest.fn(),
+    getPlaybackVideoData: jest.fn(),
+    getPlayerType: jest.fn(),
+    getSnapshot: jest.fn(),
+    getStreamType: jest.fn(),
+    getSupportedDRM: jest.fn(),
+    getSupportedTech: jest.fn(),
+    getThumbnail: jest.fn(),
+    getTimeShift: jest.fn(),
+    getTotalStalledTime: jest.fn(),
+    getVideoBufferLength: jest.fn(),
+    getVideoQuality: jest.fn(),
+    getVolume: jest.fn(),
+    hasEnded: jest.fn(),
+    isCastAvailable: jest.fn(),
+    isCasting: jest.fn(),
+    isDRMSupported: jest.fn(),
+    isLive: jest.fn(),
+    isMuted: jest.fn(),
+    isPaused: jest.fn(),
+    isPlaying: jest.fn(),
+    isStalled: jest.fn(),
+    load: jest.fn(),
+    mute: jest.fn(),
+    pause: jest.fn(),
+    play: jest.fn(),
+    off: jest.fn(),
+    getSeekableRange: jest.fn(),
+    seek: jest.fn(),
+    setAspectRatio: jest.fn(),
+    setAudio: jest.fn(),
+    setAudioQuality: jest.fn(),
+    setAuthentication: jest.fn(),
+    setPlaybackSpeed: jest.fn(),
+    setPosterImage: jest.fn(),
+    setQueryParameters: jest.fn(),
+    setVideoElement: jest.fn(),
+    setVideoQuality: jest.fn(),
+    setVolume: jest.fn(),
+    timeShift: jest.fn(),
+    unload: jest.fn(),
+    unmute: jest.fn(),
+    isAirplayAvailable: jest.fn(),
+    isAirplayActive: jest.fn(),
+    showAirplayTargetPicker: jest.fn(),
+    getBufferedRanges: jest.fn(),
+    getAvailableSegments: jest.fn(),
+    preload: jest.fn(),
+    setLogLevel: jest.fn(),
+    getVideoElement: jest.fn(),
+    isViewModeAvailable: jest.fn(),
+    setViewMode: jest.fn(),
+    getViewMode: jest.fn(),
+    getSource: jest.fn()
+};

package/lib/tests/mocks/mockPlayerContext.d.ts

@@ -0,0 +1,2 @@
+import { PlayerContext } from '../../src/types/interfaces';
+export declare const mockPlayerContext: PlayerContext;

package/lib/tests/mocks/mockPlayerContext.js

@@ -0,0 +1,40 @@
+import { mockNpoPlayer } from './mockNpoplayer';
+import { mockPlayerAPI } from './mockPlayerAPI';
+export const mockPlayerContext = {
+    player: {
+        load: jest.fn(),
+        seek: jest.fn(),
+        getCurrentTime: mockNpoPlayer.player?.getCurrentTime || (() => 0),
+        play: jest.fn(),
+        pause: jest.fn(),
+        mute: jest.fn(),
+        unmute: jest.fn(),
+        isMuted: jest.fn().mockReturnValue(false),
+        isPaused: jest.fn().mockReturnValue(true),
+        on: jest.fn(),
+        off: jest.fn(),
+        setViewMode: jest.fn(),
+        getViewMode: jest.fn(),
+        getSupportedDRM: jest.fn(),
+        getSupportedTech: jest.fn(),
+        getTimeShift: jest.fn(),
+        getContainer: jest.fn(),
+        getNpoPlayerElement: jest.fn(),
+        addClassToNpoPlayerElement: jest.fn(),
+        removeClassFromNpoPlayerElement: jest.fn(),
+        playerAPI: mockPlayerAPI,
+        getVolume: function () {
+            throw new Error('Function not implemented.');
+        },
+        setVolume: function (level) {
+            throw new Error('Function not implemented.');
+        },
+        areSubtitlesEnabled: function () {
+            throw new Error('Function not implemented.');
+        },
+        enableSubtitles: function () {
+            throw new Error('Function not implemented.');
+        }
+    },
+    npoplayer: mockNpoPlayer
+};

package/lib/types/events.d.ts

@@ -0,0 +1,91 @@
+export declare enum PlayerEvent {
+    Ready = "ready",
+    Play = "play",
+    Playing = "playing",
+    Paused = "paused",
+    Seek = "seek",
+    Seeked = "seeked",
+    TimeShift = "timeshift",
+    TimeShifted = "timeshifted",
+    VolumeChanged = "volumechanged",
+    Muted = "muted",
+    Unmuted = "unmuted",
+    PlayerResized = "playerresized",
+    PlaybackFinished = "playbackfinished",
+    Error = "error",
+    Warning = "warning",
+    StallStarted = "stallstarted",
+    StallEnded = "stallended",
+    AudioChanged = "audiochanged",
+    AudioAdded = "audioadded",
+    AudioRemoved = "audioremoved",
+    VideoQualityChanged = "videoqualitychanged",
+    AudioQualityChanged = "audioqualitychanged",
+    VideoDownloadQualityChange = "videodownloadqualitychange",
+    AudioDownloadQualityChange = "audiodownloadqualitychange",
+    VideoDownloadQualityChanged = "videodownloadqualitychanged",
+    AudioDownloadQualityChanged = "audiodownloadqualitychanged",
+    VideoPlaybackQualityChanged = "videoplaybackqualitychanged",
+    AudioPlaybackQualityChanged = "audioplaybackqualitychanged",
+    TimeChanged = "timechanged",
+    CueParsed = "cueparsed",
+    CueEnter = "cueenter",
+    CueUpdate = "cueupdate",
+    CueExit = "cueexit",
+    SegmentPlayback = "segmentplayback",
+    Metadata = "metadata",
+    MetadataParsed = "metadataparsed",
+    MetadataChanged = "metadatachanged",
+    VideoAdaptation = "videoadaptation",
+    AudioAdaptation = "audioadaptation",
+    DownloadFinished = "downloadfinished",
+    SegmentRequestFinished = "segmentrequestfinished",
+    AdManifestLoaded = "admanifestloaded",
+    AdStarted = "adstarted",
+    OverlayAdStarted = "overlayadstarted",
+    AdQuartile = "adquartile",
+    AdSkipped = "adskipped",
+    AdClicked = "adclicked",
+    AdInteraction = "adinteraction",
+    AdLinearityChanged = "adlinearitychanged",
+    AdBreakStarted = "adbreakstarted",
+    AdBreakFinished = "adbreakfinished",
+    AdFinished = "adfinished",
+    AdError = "aderror",
+    VRViewingDirectionChange = "vrviewingdirectionchange",
+    VRViewingDirectionChanged = "vrviewingdirectionchanged",
+    VRStereoChanged = "vrstereochanged",
+    CastAvailable = "castavailable",
+    CastStopped = "caststopped",
+    CastStart = "caststart",
+    CastStarted = "caststarted",
+    CastWaitingForDevice = "castwaitingfordevice",
+    SourceLoaded = "sourceloaded",
+    SourceUnloaded = "sourceunloaded",
+    PeriodSwitch = "periodswitch",
+    PeriodSwitched = "periodswitched",
+    DVRWindowExceeded = "dvrwindowexceeded",
+    SubtitleAdded = "subtitleadded",
+    SubtitleRemoved = "subtitleremoved",
+    ShowAirplayTargetPicker = "showairplaytargetpicker",
+    AirplayAvailable = "airplayavailable",
+    AirplayChanged = "airplaychanged",
+    Destroy = "destroy",
+    PlaybackSpeedChanged = "playbackspeedchanged",
+    DurationChanged = "durationchanged",
+    ViewModeChanged = "viewmodechanged",
+    ModuleReady = "moduleready",
+    SubtitleEnable = "subtitleenable",
+    SubtitleEnabled = "subtitleenabled",
+    SubtitleDisable = "subtitledisable",
+    SubtitleDisabled = "subtitledisabled",
+    VideoQualityAdded = "videoqualityadded",
+    VideoQualityRemoved = "videoqualityremoved",
+    AudioQualityAdded = "audioqualityadded",
+    AudioQualityRemoved = "audioqualityremoved",
+    TargetLatencyChanged = "targetlatencychanged",
+    LatencyModeChanged = "latencymodechanged",
+    LicenseValidated = "licensevalidated",
+    DrmLicenseAdded = "drmlicenseadded",
+    AspectRatioChanged = "aspectratiochanged"
+}

package/lib/types/events.js

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

package/lib/types/interfaces.d.ts

@@ -1,11 +1,24 @@
-import { type SourceConfig } from 'bitmovin-player';
+import { PlayerEventCallback, type SourceConfig } from 'bitmovin-player';
 import { type ErrorMessageOverlay, type Label, ControlBar, SettingsPanelItem, Button, SeekBar, CastToggleButton, SettingsPanel } from 'bitmovin-player-ui';
 import { type NPOTag, type PageTracker } from '@npotag/tag';
 import { ButtonConfig } from 'bitmovin-player-ui/dist/js/framework/components/button';
+import NpoPlayer from '../npoplayer';
+import { NpoPlayerAPI } from '../services/npoPlayerAPI/npoPlayerAPI';
+export { Technology } from 'bitmovin-player';
 export interface Profile {
     profileName: string;
     drm: string;
 }
+export interface Segment {
+    inpoint: number;
+    outpoint: number;
+    duration: number;
+}
+export interface EventListeners {
+    liveStreamHandleTimeChangedCallback?: PlayerEventCallback;
+    segmentHandleTimeChangedCallback?: PlayerEventCallback;
+    segmentSeekFunctionCallback?: PlayerEventCallback;
+}
 export interface StreamObject {
     stream: StreamObject_Stream;
     metadata: StreamObject_Metadata;
@@ -13,6 +26,11 @@ export interface StreamObject {
     user: {
         type: 'plus' | 'anonymous';
     };
+    segment?: Segment;
+}
+export interface PlayerContext {
+    player: NpoPlayerAPI;
+    npoplayer: NpoPlayer;
 }
 export interface ApiPayload {
     baseURL: string;
@@ -34,7 +52,7 @@ export interface DRMProfile {
 export interface NPOTagObject {
     npoTagInstance: NPOTag | undefined;
     heartbeatInterval: number | undefined;
-    pageTracker: PageTracker | null;
+    pageTracker: PageTracker | undefined;
 }
 interface StreamObject_Stream {
     avType: string;
@@ -53,7 +71,7 @@ interface Subtitle {
 }
 interface StreamObject_Assets {
     scrubbingThumbnail: string;
-    subtitles: Subtitle[] | null;
+    subtitles: Subtitle[] | undefined;
     preroll?: string;
 }
 export interface StreamObject_Metadata {
@@ -75,21 +93,17 @@ export interface StreamObject_Metadata {
     title: string;
     hasPreroll?: string;
 }
-export interface Section {
-    cssClasses?: string[];
-    start: number;
-    end: number;
+interface FragmentSection {
+    time: number;
+    duration: number;
     title: string;
 }
-export interface Fragments {
-    sections: Section[];
-    startAtBeginOfFragment?: boolean;
-    startAtFragment?: number;
-    stopAtEndOfFragment?: boolean;
+export interface Fragment {
+    sections: FragmentSection[];
 }
 export interface StreamOptions {
     sourceConfig?: SourceConfig;
-    fragments?: Fragments;
+    fragments?: Fragment;
     startOffset?: number;
     liveOffset?: boolean;
     liveProgramTime?: number;
@@ -121,7 +135,7 @@ export interface UIComponents {
     }> | undefined;
     seekBar?: SeekBar | undefined;
     chromeCastButton?: CastToggleButton | undefined;
-    settingsPanel?: SettingsPanel | undefined;
+    settingsPanels?: SettingsPanel[] | undefined;
 }
 export interface CustomMessageHandlerInterface {
     defaultActionRequired?: boolean;
@@ -166,6 +180,11 @@ export declare enum NpoPlayerUIVariants {
     AUDIO = "audio",
     AD = "ad"
 }
+export declare enum ViewMode {
+    Inline = "inline",
+    Fullscreen = "fullscreen",
+    PictureInPicture = "pictureinpicture"
+}
 export interface PlayNext {
     showPlayNext?: boolean;
     duration?: number;
@@ -179,4 +198,9 @@ export type TimeLineMarker = {
     duration?: number;
     cssClasses?: string[];
 };
-export {};
+export declare enum LocalStorageValues {
+    IS_MUTED = "ismuted",
+    VOLUME = "volume",
+    SUBTITLES_ENABLED = "subtitles_enabled"
+}
+export type LocalStorageData = Partial<Record<LocalStorageValues, string | number>>;

package/lib/types/interfaces.js

@@ -31,3 +31,15 @@ export var NpoPlayerUIVariants;
     NpoPlayerUIVariants["AUDIO"] = "audio";
     NpoPlayerUIVariants["AD"] = "ad";
 })(NpoPlayerUIVariants || (NpoPlayerUIVariants = {}));
+export var ViewMode;
+(function (ViewMode) {
+    ViewMode["Inline"] = "inline";
+    ViewMode["Fullscreen"] = "fullscreen";
+    ViewMode["PictureInPicture"] = "pictureinpicture";
+})(ViewMode || (ViewMode = {}));
+export var LocalStorageValues;
+(function (LocalStorageValues) {
+    LocalStorageValues["IS_MUTED"] = "ismuted";
+    LocalStorageValues["VOLUME"] = "volume";
+    LocalStorageValues["SUBTITLES_ENABLED"] = "subtitles_enabled";
+})(LocalStorageValues || (LocalStorageValues = {}));

package/lib/{src/js/ui → ui}/components/adbutton.d.ts

@@ -1,5 +1,5 @@
 import { Button } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../../npoplayer';
+import type NpoPlayer from '../../npoplayer';
 export declare function createAdButton(npoplayer: NpoPlayer): Button<{
     cssClass: string;
     text: string;

package/lib/{src/js/ui → ui}/components/adlabel.d.ts

@@ -1,5 +1,5 @@
 import { Label } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../../npoplayer';
+import type NpoPlayer from '../../npoplayer';
 export declare function createAdLabel(npoplayer: NpoPlayer): Label<{
     text: string;
     cssClass: string;

package/lib/{src/js/ui → ui}/components/audio/controlbar.d.ts

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

package/lib/{js/ui → ui}/components/audio/controlbar.js

@@ -9,8 +9,8 @@ export function createAudioControlBar(npoplayer) {
             new Container({
                 components: [
                     new VolumeControlButton({
-                        vertical: true,
-                    }),
+                        vertical: true
+                    })
                 ],
                 cssClasses: ['controlbar-bottom']
             })

package/lib/{src/js/ui → ui}/components/buttons.d.ts

@@ -1,12 +1,12 @@
 import { type PlayerAPI } from 'bitmovin-player';
 import { Button, ControlBar } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../../npoplayer';
+import type NpoPlayer from '../../npoplayer';
 export declare function createMiddleButtons(player: PlayerAPI): ControlBar;
-export declare function createRewindButton(player: PlayerAPI | null): Button<{
+export declare function createRewindButton(player: PlayerAPI | undefined): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;
-export declare function createForwardButton(player: PlayerAPI | null): Button<{
+export declare function createForwardButton(player: PlayerAPI | undefined): Button<{
     cssClass: string;
     ariaLabel: string;
 }>;

package/lib/{js/ui → ui}/components/buttons.js

@@ -14,7 +14,7 @@ export function createMiddleButtons(player) {
 export function createRewindButton(player) {
     const rewindButton = new Button({
         cssClass: 'ui-rewindbutton bmpui-ui-button',
-        ariaLabel: 'Spoel 10 seconden terug',
+        ariaLabel: 'Spoel 10 seconden terug'
     });
     if (player) {
         rewindButton.onClick.subscribe(() => {
@@ -26,7 +26,7 @@ export function createRewindButton(player) {
 export function createForwardButton(player) {
     const forwardButton = new Button({
         cssClass: 'ui-forwardbutton bmpui-ui-button',
-        ariaLabel: 'Spoel 10 seconden vooruit',
+        ariaLabel: 'Spoel 10 seconden vooruit'
     });
     if (player) {
         forwardButton.onClick.subscribe(() => {
@@ -43,7 +43,7 @@ export function createPlayNextButton(player, npoplayer) {
         hidden: false
     });
     playNextButton.onClick.subscribe(() => {
-        if (player != null) {
+        if (player != undefined) {
             npoplayer.doPlayNext();
         }
     });
@@ -57,7 +57,7 @@ export function createCancelPlayNextButton(player, npoplayer) {
         hidden: false
     });
     cancelPlayNextButton.onClick.subscribe(() => {
-        if (player != null) {
+        if (player != undefined) {
             npoplayer.cancelPlayNextScreen();
         }
     });
@@ -71,7 +71,7 @@ export function createskipIntroButton(player) {
         hidden: true
     });
     skipIntroButton.onClick.subscribe(() => {
-        if (player != null) {
+        if (player != undefined) {
             player.seek(96);
         }
     });
@@ -85,7 +85,7 @@ export function createGoBackLiveButton(player) {
         hidden: true
     });
     goBackLiveButton.onClick.subscribe(() => {
-        if (player != null && player.isLive()) {
+        if (player != undefined && player.isLive()) {
             player.timeShift(0);
         }
     });
@@ -99,7 +99,7 @@ export function createWatchFromStartButton(player, npoplayer) {
         hidden: true
     });
     watchFromStartButton.onClick.subscribe(() => {
-        if ((player.isLive()) ?? false)
+        if (player.isLive() ?? false)
             npoplayer.watchFromStart();
         if (npoplayer.uiComponents.watchFromStartButton)
             npoplayer.uiComponents.watchFromStartButton.hide();

package/lib/ui/components/controlbar.d.ts

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

package/lib/{js/ui → ui}/components/controlbar.js

@@ -2,7 +2,8 @@ import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, Vol
 import { PlayerEvent } from 'bitmovin-player';
 import { createForwardButton, createRewindButton } from './buttons';
 import { createSeekBar } from './seekbar';
-export function createControlBar(npoplayer, settingsPanel) {
+import { createSettingsPanel } from './settingspanel';
+export function createControlBar(npoplayer) {
     const player = npoplayer.player;
     const rewindButton = createRewindButton(player);
     const forwardButton = createForwardButton(player);
@@ -16,6 +17,7 @@ export function createControlBar(npoplayer, settingsPanel) {
             chromeCastButton.show();
         }
     });
+    const settingsPanel = createSettingsPanel(npoplayer);
     const controlbar = new ControlBar({
         components: [
             createSeekBar(npoplayer),
@@ -27,10 +29,11 @@ export function createControlBar(npoplayer, settingsPanel) {
                     rewindButton,
                     forwardButton,
                     new Spacer(),
-                    ...(document.pictureInPictureEnabled && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) ? [new PictureInPictureToggleButton()] : []),
+                    new PictureInPictureToggleButton(),
                     new AirPlayToggleButton(),
                     chromeCastButton,
                     new SettingsToggleButton({ settingsPanel }),
+                    settingsPanel,
                     new FullscreenToggleButton()
                 ],
                 cssClasses: ['controlbar-bottom']

package/lib/{src/js/ui → ui}/components/ctabar.d.ts

@@ -1,10 +1,10 @@
 import { Button, Container, Label } from 'bitmovin-player-ui';
-import type NpoPlayer from '../../../npoplayer';
+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';
-import { NpoPlayerUIVariants } from '../../../types/interfaces';
+import { NpoPlayerUIVariants } from '../../types/interfaces';
 export declare function createCTABar(player: PlayerAPI, npoplayer: NpoPlayer, variant: NpoPlayerUIVariants): Container<{
-    components: (Label<LabelConfig> | Button<ButtonConfig>)[];
+    components: (Button<ButtonConfig> | Label<LabelConfig>)[];
     cssClasses: string[];
 }>;

package/lib/{js/ui → ui}/components/ctabar.js

@@ -2,20 +2,18 @@ import { Container } from 'bitmovin-player-ui';
 import { createGoBackLiveButton, createWatchFromStartButton } from './buttons';
 import { createAdButton } from './adbutton';
 import { createAdLabel } from './adlabel';
-import { NpoPlayerUIVariants } from '../../../types/interfaces';
+import { NpoPlayerUIVariants } from '../../types/interfaces';
 export function createCTABar(player, npoplayer, variant) {
-    let barComponents = [];
+    const barComponents = [];
     if (variant === NpoPlayerUIVariants.DEFAULT) {
         const goBackLiveButton = createGoBackLiveButton(player);
         const watchFromStartButton = createWatchFromStartButton(player, npoplayer);
-        barComponents.push(watchFromStartButton);
-        barComponents.push(goBackLiveButton);
+        barComponents.push(watchFromStartButton, goBackLiveButton);
     }
     if (variant === NpoPlayerUIVariants.AD) {
         const adLabel = createAdLabel(npoplayer);
         const adButton = createAdButton(npoplayer);
-        barComponents.push(adLabel);
-        barComponents.push(adButton);
+        barComponents.push(adLabel, adButton);
         adLabel.hide();
     }
     return new Container({

package/lib/{js/ui → ui}/components/nativemobile/buttons.js

@@ -1,8 +1,11 @@
 import { AirPlayToggleButton, Button, CastToggleButton, ControlBar, FullscreenToggleButton, PictureInPictureToggleButton, PlaybackToggleButton, SettingsToggleButton, VolumeToggleButton } from 'bitmovin-player-ui';
 import { sendCustomMessage } from '../../nativemobileuicontainer';
-import { CustomMessages } from '../../../../types/interfaces';
+import { CustomMessages } from '../../../types/interfaces';
 import { ViewMode } from 'bitmovin-player';
-import { createForwardButton, createRewindButton } from '../../components/buttons';
+import { createForwardButton, createRewindButton } from '../buttons';
+const watchFromStartButtonClickHandler = () => {
+    sendCustomMessage(CustomMessages.CLICK_WATCH_FROM_START);
+};
 function createBigPlayToggleButton() {
     const bigPlayToggleButton = new PlaybackToggleButton({
         cssClass: 'ui-playbacktogglebutton'
@@ -36,9 +39,6 @@ export function createWatchFromStartButton() {
         ariaLabel: 'Kijk vanaf het begin',
         hidden: true
     });
-    const watchFromStartButtonClickHandler = () => {
-        sendCustomMessage(CustomMessages.CLICK_WATCH_FROM_START);
-    };
     watchFromStartButton.onClick.subscribe(() => {
         watchFromStartButtonClickHandler();
     });
@@ -74,7 +74,9 @@ export function createSettingsButton(settingsPanel) {
         if (!customSettingsToggleButton || !settingsPanel)
             return;
         const clickPromise = new Promise((resolve, reject) => {
-            const result = sendCustomMessage(CustomMessages.TOGGLE_SETTINGS_PANEL, { isChecked: !settingsPanel.isShown() });
+            const result = sendCustomMessage(CustomMessages.TOGGLE_SETTINGS_PANEL, {
+                isChecked: !settingsPanel.isShown()
+            });
             if (result.defaultActionRequired === true) {
                 reject(result);
             }