@npo/player 1.23.2 → 1.24.0

package/lib/types/events.js

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

package/lib/types/interfaces.d.ts

@@ -1,9 +1,10 @@
-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';
+import { NpoPlayerEventCallback } from './events';
+import { SourceConfig } from 'bitmovin-player';
 export { Technology } from 'bitmovin-player';
 export interface Profile {
     profileName: string;
@@ -15,9 +16,9 @@ export interface Segment {
     duration: number;
 }
 export interface EventListeners {
-    liveStreamHandleTimeChangedCallback?: PlayerEventCallback;
-    segmentHandleTimeChangedCallback?: PlayerEventCallback;
-    segmentSeekFunctionCallback?: PlayerEventCallback;
+    liveStreamHandleTimeChangedCallback?: NpoPlayerEventCallback;
+    segmentHandleTimeChangedCallback?: NpoPlayerEventCallback;
+    segmentSeekFunctionCallback?: NpoPlayerEventCallback;
 }
 export interface StreamObject {
     stream: StreamObject_Stream;
@@ -76,19 +77,12 @@ interface StreamObject_Assets {
 }
 export interface StreamObject_Metadata {
     broadcaster?: string;
-    broadcasters?: string[];
-    country?: string[];
-    credits?: string[];
     description: string;
     duration?: string;
-    genre?: string[];
-    isDubbed?: boolean;
-    language?: string[];
     nicam?: string[] | null;
     poster?: string;
     posterIsDefault?: boolean;
     prid?: string;
-    sourceIP?: string;
     ageRating?: string;
     title: string;
     hasPreroll?: string;
@@ -117,6 +111,7 @@ export interface StreamOptions {
     useWidevineServerCertificate?: boolean;
     customFallbackPoster?: string;
     autoFillTimeLineMarkerDuration?: boolean;
+    autoplay?: boolean;
 }
 export interface UIComponents {
     errorMessageOverlay?: ErrorMessageOverlay;
@@ -127,7 +122,7 @@ export interface UIComponents {
     subtitlesButton?: SettingsPanelItem | undefined;
     qualityButton?: SettingsPanelItem | undefined;
     watchFromStartButton?: Button<ButtonConfig> | undefined;
-    controlbar?: ControlBar | undefined;
+    controlBar?: ControlBar | undefined;
     adbutton?: Button<ButtonConfig> | undefined;
     adlabel?: Label<{
         text: string;
@@ -178,6 +173,7 @@ export declare enum CustomMessages {
 export declare enum NpoPlayerUIVariants {
     DEFAULT = "default",
     AUDIO = "audio",
+    VERTICAL = "vertical",
     AD = "ad"
 }
 export declare enum ViewMode {

package/lib/types/interfaces.js

@@ -29,6 +29,7 @@ export var NpoPlayerUIVariants;
 (function (NpoPlayerUIVariants) {
     NpoPlayerUIVariants["DEFAULT"] = "default";
     NpoPlayerUIVariants["AUDIO"] = "audio";
+    NpoPlayerUIVariants["VERTICAL"] = "vertical";
     NpoPlayerUIVariants["AD"] = "ad";
 })(NpoPlayerUIVariants || (NpoPlayerUIVariants = {}));
 export var ViewMode;

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

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

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

@@ -1,11 +1,11 @@
 import { ControlBar, Container, SeekBar, SeekBarLabel, VolumeControlButton } from 'bitmovin-player-ui';
 import { createSeekBar } from '../seekbar';
-export function createAudioControlBar(npoplayer) {
+export function createAudioControlBar(npoPlayer) {
     const seekBar = new SeekBar({ label: new SeekBarLabel() });
-    npoplayer.uiComponents.seekBar = seekBar;
-    const controlbar = new ControlBar({
+    npoPlayer.uiComponents.seekBar = seekBar;
+    const controlBar = new ControlBar({
         components: [
-            createSeekBar(npoplayer),
+            createSeekBar(npoPlayer),
             new Container({
                 components: [
                     new VolumeControlButton({
@@ -17,6 +17,6 @@ export function createAudioControlBar(npoplayer) {
         ],
         cssClasses: ['ui-controlbar-bottom']
     });
-    npoplayer.uiComponents.controlbar = controlbar;
-    return controlbar;
+    npoPlayer.uiComponents.controlBar = controlBar;
+    return controlBar;
 }

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

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

package/lib/ui/components/controlbar.js

@@ -3,24 +3,26 @@ import { PlayerEvent } from 'bitmovin-player';
 import { createForwardButton, createRewindButton } from './buttons';
 import { createSeekBar } from './seekbar';
 import { createSettingsPanel } from './settingspanel';
-export function createControlBar(npoplayer) {
-    const player = npoplayer.player;
+export function createControlBar(npoPlayer) {
+    const player = npoPlayer.player;
     const rewindButton = createRewindButton(player);
     const forwardButton = createForwardButton(player);
     const seekBar = new SeekBar({ label: new SeekBarLabel() });
-    npoplayer.uiComponents.seekBar = seekBar;
+    npoPlayer.uiComponents.seekBar = seekBar;
     const chromeCastButton = new CastToggleButton({
         hidden: true
     });
-    player?.on(PlayerEvent.CastAvailable, () => {
-        if (player.isCastAvailable()) {
+    const handleCastAvailable = () => {
+        player?.off(PlayerEvent.CastAvailable, handleCastAvailable);
+        if (player?.isCastAvailable()) {
             chromeCastButton.show();
         }
-    });
-    const settingsPanel = createSettingsPanel(npoplayer);
-    const controlbar = new ControlBar({
+    };
+    player?.on(PlayerEvent.CastAvailable, handleCastAvailable);
+    const settingsPanel = createSettingsPanel(npoPlayer);
+    const controlBar = new ControlBar({
         components: [
-            createSeekBar(npoplayer),
+            createSeekBar(npoPlayer),
             new Container({
                 components: [
                     new PlaybackToggleButton(),
@@ -41,6 +43,6 @@ export function createControlBar(npoplayer) {
         ],
         cssClasses: ['ui-controlbar-bottom']
     });
-    npoplayer.uiComponents.controlbar = controlbar;
-    return controlbar;
+    npoPlayer.uiComponents.controlBar = controlBar;
+    return controlBar;
 }

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

@@ -8,7 +8,6 @@ export function createControlBar(player) {
     const settingsPanel = createSettingsPanel(player);
     return new ControlBar({
         components: [
-            settingsPanel,
             new Container({
                 components: [
                     new PlaybackTimeLabel({

package/lib/ui/components/seekbar.js

@@ -15,6 +15,6 @@ export function createSeekBar(npoplayer) {
                 cssClasses: ['total-time']
             })
         ],
-        cssClasses: ['controlbar-top']
+        cssClasses: ['controlbar-top', 'controlbar-seekbar']
     });
 }

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

@@ -1,4 +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;
+export declare function createSettingsPanel(npoPlayer: NpoPlayer | PlayerAPI): SettingsPanel;

package/lib/ui/components/settingspanel.js

@@ -1,53 +1,54 @@
-import { SubtitleListBox, ListBox, SettingsPanel, SettingsPanelPage, SettingsPanelPageOpenButton, SettingsPanelPageBackButton, Button, Label, SettingsPanelItem, AudioQualitySelectBox, AudioTrackSelectBox } from 'bitmovin-player-ui';
+import { SubtitleListBox, ListBox, SettingsPanel, SettingsPanelPage, SettingsPanelPageOpenButton, SettingsPanelPageBackButton, SettingsToggleButton, Button, Label, SettingsPanelItem, AudioQualitySelectBox, AudioTrackSelectBox } from 'bitmovin-player-ui';
 import { localizeKey } from '../../js/utilities/utilities.locale';
 import { handleSubtitleListBoxItemSelected, handleSpeedListBoxItemSelected, handleQualityListBoxItemSelected } from '../handlers/listboxhandlers';
 import { PlayerEvent } from 'bitmovin-player';
-export function createSettingsPanel(npoplayer) {
-    const player = 'player' in npoplayer ? npoplayer.player : npoplayer;
+const createListBox = (items) => new ListBox({ items });
+const createPanelPage = (components, cssClasses) => new SettingsPanelPage({ components, cssClasses });
+const createSettingsPanelPageBackButton = (targetPage, container, text, cssClasses) => new SettingsPanelPageBackButton({
+    targetPage,
+    container,
+    text,
+    cssClasses
+});
+const createSettingsOpenButton = (targetPage, container, text, cssClasses) => new SettingsPanelPageOpenButton({
+    targetPage,
+    container,
+    text,
+    cssClasses
+});
+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 speedListBox = createListBox([
+        { 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 = localizeKey('settings');
-    const videoqualityLabel = localizeKey('settings.video.quality');
-    const speedLabel = localizeKey('speed');
-    const subtitlesLabel = localizeKey('settings.subtitles');
     const audioqualityLabel = localizeKey('settings.audio.quality');
     const audiotrackLabel = localizeKey('settings.audio.track');
     const autoLabel = localizeKey('auto');
+    const offLabel = localizeKey('off');
+    const settingsLabel = localizeKey('settings');
+    const speedLabel = localizeKey('speed');
+    const subtitlesLabel = localizeKey('settings.subtitles');
+    const videoqualityLabel = localizeKey('settings.video.quality');
     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 subtitlePanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', subtitleListBox)], [listboxPanelClass]);
+    const speedPanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', speedListBox)], [listboxPanelClass]);
+    const qualityPanelPage = createPanelPage([new Button({ cssClass: settingTriggerClass }), new SettingsPanelItem('', qualityListBox)], [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']
-    });
+    const mainSettingsPage = createPanelPage([
+        settingsTriggerButton,
+        new Label({ text: settingsLabel, cssClass: 'setting-header' }),
+        new SettingsPanelItem(audioqualityLabel, new AudioQualitySelectBox()),
+        new SettingsPanelItem(audiotrackLabel, new AudioTrackSelectBox())
+    ], ['main-panel']);
     const onSourceLoaded = () => {
         player?.off(PlayerEvent.SourceLoaded, onSourceLoaded);
         checkQualities();
@@ -59,51 +60,35 @@ export function createSettingsPanel(npoplayer) {
         pageTransitionAnimation: false,
         hideDelay: -1
     });
-    const subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({
-        targetPage: subtitlePanelPage,
-        container: settingsPanel,
-        text: 'Geen',
-        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 subtitleSettingsOpenButton = createSettingsOpenButton(subtitlePanelPage, settingsPanel, offLabel, [
+        listboxPagerButtonClass
+    ]);
+    const speedSettingsOpenButton = createSettingsOpenButton(speedPanelPage, settingsPanel, '1x', [
+        listboxPagerButtonClass
+    ]);
+    const qualitySettingsOpenButton = createSettingsOpenButton(qualityPanelPage, settingsPanel, autoLabel, [
+        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;
+    for (const item of [
+        subtitlesPanelItem,
+        speedPanelItem,
+        qualityPanelItem,
+        new SettingsToggleButton({ settingsPanel })
+    ])
+        mainSettingsPage.addComponent(item);
+    for (const [index, panelPage] of [subtitlePanelPage, speedPanelPage, qualityPanelPage].entries()) {
+        const labels = [subtitlesLabel, speedLabel, videoqualityLabel];
+        panelPage.addComponent(createSettingsPanelPageBackButton(mainSettingsPage, settingsPanel, labels[index], [
+            settingsBackButtonClass
+        ]));
+        panelPage.addComponent(new SettingsToggleButton({ settingsPanel }));
+    }
+    if ('uiComponents' in npoPlayer) {
+        npoPlayer.uiComponents.subtitlesButton = subtitlesPanelItem;
+        npoPlayer.uiComponents.qualityButton = qualityPanelItem;
     }
     subtitleListBox.onItemSelected.subscribe(handleSubtitleListBoxItemSelected(subtitleSettingsOpenButton, settingsPanel, mainSettingsPage));
     if (player) {
@@ -112,15 +97,15 @@ export function createSettingsPanel(npoplayer) {
         qualityListBox.selectItem('auto');
         qualityListBox.onItemSelected.subscribe(handleQualityListBoxItemSelected(player, qualitySettingsOpenButton, settingsPanel, mainSettingsPage));
     }
-    if (npoplayer.uiComponents) {
-        const uiComponents = npoplayer.uiComponents;
+    if (npoPlayer.uiComponents) {
+        const uiComponents = npoPlayer.uiComponents;
         uiComponents.settingsPanels = uiComponents.settingsPanels
             ? [...uiComponents.settingsPanels, settingsPanel]
             : [settingsPanel];
     }
     const checkSubtitles = () => {
         const subtitles = player?.subtitles?.list();
-        if (subtitles != undefined && subtitles.length > 0) {
+        if (subtitles && subtitles.length > 0) {
             subtitlesPanelItem.show();
         }
         else {
@@ -131,9 +116,8 @@ export function createSettingsPanel(npoplayer) {
         const availableVideoQualities = player?.getAvailableVideoQualities();
         qualityListBox.clearItems();
         if (availableVideoQualities?.length) {
-            for (const quality of availableVideoQualities) {
+            for (const quality of availableVideoQualities)
                 qualityListBox.addItem(quality.id, quality.label ?? 'test');
-            }
             qualityListBox.addItem('auto', autoLabel);
             qualityListBox.selectItem('auto');
             qualityPanelItem.show();

package/lib/ui/components/topbar.js

@@ -6,10 +6,13 @@ export function createTopBar(npoplayer) {
     const chromeCastButton = new CastToggleButton({
         hidden: true
     });
-    player?.on(PlayerEvent.CastAvailable, () => {
-        if (player.isCastAvailable())
+    const handleCastAvailable = () => {
+        player?.off(PlayerEvent.CastAvailable, handleCastAvailable);
+        if (player?.isCastAvailable()) {
             chromeCastButton.show();
-    });
+        }
+    };
+    player?.on(PlayerEvent.CastAvailable, handleCastAvailable);
     const settingsPanel = createSettingsPanel(npoplayer);
     return new TitleBar({
         components: [

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

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

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

@@ -0,0 +1,34 @@
+import { ControlBar, Container, SeekBar, SeekBarLabel, PlaybackToggleButton, SettingsToggleButton, FullscreenToggleButton, VolumeControlButton } from 'bitmovin-player-ui';
+import { createForwardButton, createRewindButton } from '../buttons';
+import { createSeekBar } from '../seekbar';
+import { createSettingsPanel } from '../settingspanel';
+export function createVerticalVideoControlBar(npoPlayer) {
+    const player = npoPlayer.player;
+    const rewindButton = createRewindButton(player);
+    const forwardButton = createForwardButton(player);
+    const seekBar = new SeekBar({ label: new SeekBarLabel() });
+    npoPlayer.uiComponents.seekBar = seekBar;
+    const settingsPanel = createSettingsPanel(npoPlayer);
+    const settingsContainer = new Container({
+        components: [new SettingsToggleButton({ settingsPanel }), settingsPanel],
+        cssClasses: ['vertical-video-controlbar-settings']
+    });
+    const controlBarButtonsContainer = new Container({
+        components: [
+            new VolumeControlButton({
+                vertical: true
+            }),
+            rewindButton,
+            new PlaybackToggleButton(),
+            forwardButton,
+            new FullscreenToggleButton()
+        ],
+        cssClasses: ['vertical-video-controlbar-buttons']
+    });
+    const controlBar = new ControlBar({
+        components: [settingsContainer, createSeekBar(npoPlayer), controlBarButtonsContainer],
+        cssClasses: ['ui-controlbar-bottom']
+    });
+    npoPlayer.uiComponents.controlBar = controlBar;
+    return controlBar;
+}

package/lib/ui/handlers/streamhandler.d.ts

@@ -1,4 +1,2 @@
-import { PlayerContext, type StreamObject, type StreamOptions } from '../../types/interfaces';
-import { PlayerAPI, SourceConfig } from 'bitmovin-player';
-import { UIManager } from 'bitmovin-player-ui';
-export declare function processStream(streamObject: StreamObject | undefined, container: HTMLElement, streamOptions: StreamOptions | undefined, player: PlayerAPI, uiManager: UIManager | undefined, sourceConfig: SourceConfig, playerContext: PlayerContext): void;
+import { PlayerContext } from '../../types/interfaces';
+export declare function processStream(playerContext: PlayerContext): void;