@npo/player 1.23.2 → 1.24.0

package/lib/ui/handlers/streamhandler.js

@@ -1,10 +1,12 @@
 import { processNicam } from './nicamhandler';
 import * as playerAction from '../../js/playeractions/playeractions';
-import { PlayerEvent } from 'bitmovin-player';
 import { initSegment } from '../../services/segmentHandlers/initSegment';
 import { handleLiveStreamControls } from '../../services/liveStreamHandlers/handleLiveStreamControls';
 import { removeEventListeners } from '../../services/eventListenerHandlers/removeEventListeners';
-export function processStream(streamObject, container, streamOptions, player, uiManager, sourceConfig, playerContext) {
+import { NpoPlayerEvent } from '../../types/events';
+export function processStream(playerContext) {
+    const { streamObject, container, streamOptions, uiManager } = playerContext.npoplayer;
+    const player = playerContext.player;
     if (!streamObject)
         return;
     if (uiManager == undefined)
@@ -16,7 +18,7 @@ export function processStream(streamObject, container, streamOptions, player, ui
         fragment: streamOptions?.fragments
     });
     if (streamOptions?.startOffset) {
-        playerAction.handleStartOffset(player, streamOptions.startOffset);
+        playerAction.handleStartOffset(playerContext, streamOptions.startOffset);
     }
     const isLiveStream = streamObject.stream.isLiveStream;
     const isLiveStreamNoDvr = isLiveStream && streamObject.stream.hasDvrWindow === false;
@@ -42,10 +44,17 @@ export function processStream(streamObject, container, streamOptions, player, ui
         playerContainer?.classList.remove(audioOnlyClass);
         poster?.classList.remove(audioOnlyClass);
     }
-    const isAutoplayEnabled = player.getConfig()?.playback?.autoplay ?? false;
-    if (isAutoplayEnabled && (sourceConfig?.progressive || streamObject?.stream?.streamProfile === 'progressive')) {
-        player.on(PlayerEvent.SourceLoaded, () => {
-            player?.play();
+    const isAutoplayEnabled = streamOptions?.autoplay ?? player.getConfig()?.playback?.autoplay ?? false;
+    const doAutoPlay = async () => {
+        player.off(NpoPlayerEvent.SourceLoaded, handleAutoPlay);
+        await player.play();
+    };
+    const handleAutoPlay = () => {
+        doAutoPlay().catch((error) => {
+            console.error('Error attempting to autoplay:', error);
         });
+    };
+    if (isAutoplayEnabled) {
+        player.on(NpoPlayerEvent.SourceLoaded, handleAutoPlay);
     }
 }

package/lib/ui/nativemobileuifactory.js

@@ -43,6 +43,7 @@ export function nativeMobileUiFactory(player, config = {}) {
         if (_webData.assets.preroll) {
             adBreakActive = true;
             player.on(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
+            player.on(PlayerEvent.AdError, setAdBreakActiveToFalse);
         }
         if (_webData.metadata?.ageRating)
             processNicam(_webData, nicamElement, undefined);
@@ -53,6 +54,7 @@ export function nativeMobileUiFactory(player, config = {}) {
     const setAdBreakActiveToFalse = () => {
         adBreakActive = false;
         player.off(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
+        player.off(PlayerEvent.AdError, setAdBreakActiveToFalse);
     };
     if (window.bitmovin?.customMessageHandler) {
         const handleData = (data) => {

package/lib/ui/uicontainer.d.ts

@@ -1,5 +1,5 @@
-import type NpoPlayer from '../npoplayer';
+import NpoPlayer from '../npoplayer';
 import { UIContainer } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
 import { NpoPlayerUIVariants } from '../types/interfaces';
-export declare function createUIContainer(npoplayer: NpoPlayer, player: PlayerAPI, variant: NpoPlayerUIVariants, container: HTMLElement): UIContainer;
+export declare function createUIContainer(npoPlayer: NpoPlayer, player: PlayerAPI, variant: NpoPlayerUIVariants, container: HTMLElement): UIContainer;

package/lib/ui/uicontainer.js

@@ -10,64 +10,70 @@ import { createTitleBar } from './components/titlebar';
 import { localizeKey } from '../js/utilities/utilities.locale';
 import { localizationConfig } from '../js/settings/localization';
 import { NpoPlayerUIVariants } from '../types/interfaces';
-export function createUIContainer(npoplayer, player, variant, container) {
+import { createVerticalVideoControlBar } from './components/verticalvideo/controlbar';
+import { DEFAULT_UI_DELAY, PREVENT_UI_DELAY } from '../services/npoPlayerAPI/contants';
+export function createUIContainer(npoPlayer, player, variant, container) {
     const cssClassArray = ['npo-player'];
-    let uiDelay = 3000;
-    container.dataset.npoPlayerVersion = npoplayer.version;
+    let uiDelay = DEFAULT_UI_DELAY;
+    container.dataset.npoPlayerVersion = npoPlayer.version;
     container.classList.remove('bitmovinplayer-audio-container');
     switch (variant) {
         case NpoPlayerUIVariants.DEFAULT: {
-            uiDelay = 3000;
+            uiDelay = DEFAULT_UI_DELAY;
             break;
         }
         case NpoPlayerUIVariants.AD: {
-            uiDelay = -1;
+            uiDelay = PREVENT_UI_DELAY;
             cssClassArray.push('ster-ad');
             break;
         }
         case NpoPlayerUIVariants.AUDIO: {
-            uiDelay = -1;
+            uiDelay = PREVENT_UI_DELAY;
             container.classList.add('bitmovinplayer-audio-container');
             cssClassArray.push('audio');
             break;
         }
+        case NpoPlayerUIVariants.VERTICAL: {
+            uiDelay = DEFAULT_UI_DELAY;
+            cssClassArray.push('vertical-video');
+            npoPlayer.player?.setAspectRatio('9:16');
+            break;
+        }
     }
     const middleButtons = createMiddleButtons(player);
-    const playNextScreen = createPlayNextScreen(player, npoplayer);
-    const settingsPanel = createSettingsPanel(npoplayer);
-    const ctaBar = createCTABar(player, npoplayer, variant);
-    const topBar = createTopBar(npoplayer);
-    const controlBar = createControlBar(npoplayer);
-    const titleBar = createTitleBar(npoplayer);
+    const playNextScreen = createPlayNextScreen(player, npoPlayer);
+    const settingsPanel = createSettingsPanel(npoPlayer);
+    const ctaBar = createCTABar(player, npoPlayer, variant);
+    const topBar = createTopBar(npoPlayer);
+    const controlBar = createControlBar(npoPlayer);
+    const titleBar = createTitleBar(npoPlayer);
     const playbackToggleOverlay = new PlaybackToggleOverlay();
-    const audioControlbar = createAudioControlBar(npoplayer);
+    const audioControlbar = createAudioControlBar(npoPlayer);
     const bufferingOverlay = new BufferingOverlay();
+    const verticalVideoControlBar = createVerticalVideoControlBar(npoPlayer);
     const errorMessageOverlay = new ErrorMessageOverlay();
-    npoplayer.uiComponents.errorMessageOverlay = errorMessageOverlay;
-    const baseComponentsBefore = [
-        settingsPanel,
-        new SubtitleOverlay(),
-        bufferingOverlay,
-        playbackToggleOverlay,
-        new CastStatusOverlay(),
-        middleButtons
-    ];
-    const baseComponentsAfter = [errorMessageOverlay];
-    const conditionalComponents = [];
+    const castStatusOverlay = new CastStatusOverlay();
+    npoPlayer.uiComponents.errorMessageOverlay = errorMessageOverlay;
+    const defaultVideoComponents = [settingsPanel, new SubtitleOverlay(), bufferingOverlay, playbackToggleOverlay];
+    const components = [];
     if (variant === NpoPlayerUIVariants.DEFAULT) {
-        conditionalComponents.push(...baseComponentsBefore, playNextScreen, controlBar, ctaBar, titleBar, topBar);
+        components.push(...defaultVideoComponents, castStatusOverlay, middleButtons, playNextScreen, controlBar, ctaBar, titleBar, topBar);
+    }
+    if (variant === NpoPlayerUIVariants.VERTICAL) {
+        components.push(...defaultVideoComponents, verticalVideoControlBar, titleBar);
     }
     if (variant === NpoPlayerUIVariants.AUDIO) {
-        conditionalComponents.push(new PlaybackToggleButton(), audioControlbar, titleBar);
+        components.push(new PlaybackToggleButton(), audioControlbar, titleBar);
     }
     if (variant === NpoPlayerUIVariants.AD) {
-        conditionalComponents.push(...baseComponentsBefore, controlBar, ctaBar);
+        components.push(...defaultVideoComponents, castStatusOverlay, middleButtons, controlBar, ctaBar);
     }
     UIManager.setLocalizationConfig(localizationConfig);
+    const ariaLabelKey = variant === NpoPlayerUIVariants.AUDIO ? 'audioPlayer' : 'videoPlayer';
     return new UIContainer({
-        components: [...conditionalComponents, ...baseComponentsAfter],
+        components: [...components, errorMessageOverlay],
         cssClasses: cssClassArray,
-        ariaLabel: localizeKey('player'),
+        ariaLabel: localizeKey(ariaLabelKey),
         hideDelay: uiDelay,
         hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.23.2",
+  "version": "1.24.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -16,7 +16,7 @@
   "types": "./lib/npoplayer.d.ts",
   "scripts": {
     "build": "webpack --hot",
-    "build:scss": "npm run build:web-styles && npm run build:mobile-styles && mkdir -p dist && cp src/style/*.css dist && mkdir src/scss && cp src/style/*.css.map dist && cp src/style/*.css src/scss && cp src/style/*.css.map src/scss",
+    "build:scss": "npm run build:web-styles && npm run build:mobile-styles && mkdir -p dist && cp src/style/*.css dist && cp src/style/*.css.map dist && mkdir -p src/scss && cp src/style/*.css src/scss && cp src/style/*.css.map src/scss",
     "build:web-styles": "sass src/style/npoplayer.scss:src/style/npoplayer.css --style=compressed && postcss src/style/npoplayer.css --use autoprefixer postcss-import -o src/style/npoplayer.css",
     "build:mobile-styles": "sass src/style/npoplayer-mobile.scss:src/style/npoplayer-mobile.css --style=compressed && postcss src/style/npoplayer-mobile.css --use autoprefixer postcss-import -o src/style/npoplayer-mobile.css",
     "build:cdn": "npm run build && bash build-cdn.sh",
@@ -89,9 +89,9 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "3.1.2",
-    "bitmovin-player": "8.166.0",
-    "bitmovin-player-ui": "3.64.0"
+    "@npotag/tag": "3.2.1",
+    "bitmovin-player": "8.173.0",
+    "bitmovin-player-ui": "3.67.0"
   },
   "browserslist": [
     "defaults",

package/src/style/components/_settingspanel.scss

@@ -3,7 +3,7 @@ $settings-panel-line-height: 19px;
 
 .bmpui-ui-settings-panel {
     display: block;
-    padding: 24px;
+    padding: 40px 24px 24px;
     height: auto;
     min-width: 290px; //Hotfix for select capping of text with only 'Snelheid'
     z-index: 100;
@@ -65,13 +65,11 @@ $settings-panel-line-height: 19px;
                 max-height: unset;
                 padding: unset;
                 vertical-align: unset;
-                width: 45%;
                 margin-left: 0;
                 font-family: var(--fontRegular);
                 font-size: $settings-panel-font-size;
                 line-height: $settings-panel-line-height;
                 text-align: right;
-                padding-right: 15px;
 
                 span {
                     display: inline-block;
@@ -102,6 +100,7 @@ $settings-panel-line-height: 19px;
                 align-items: center;
                 padding: 0px;
                 gap: 8px;
+                justify-content: space-between;
             }
         }
     }
@@ -215,6 +214,39 @@ $settings-panel-line-height: 19px;
             }
         }
     }
+
+    .bmpui-ui-settingstogglebutton {
+        position: absolute;
+        top: 12px;
+        right: 20px;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+
+        span {
+            display: none;
+        }
+
+        &::before,
+        &::after {
+            content: '';
+            top: 8px;
+            left: 16px;
+            width: 2px;
+            height: 15px;
+            position: absolute;
+            background-color: var(--npo-player-iconcolor);
+            transform-origin: 50% 50%;
+        }
+
+        &::before {
+            transform: rotate(-45deg);
+        }
+
+        &::after {
+            transform: rotate(45deg);
+        }
+    }
 }
 
 &.bmpui-settings-panel-shown {

package/src/style/components/_subtitles.scss

@@ -1,18 +1,3 @@
-$breakpoints: (
-  600px: 1.593em,
-  700px: 1.867em,
-  1200px: 3.2em,
-  1440px: 3.84em
-);
-
-@mixin responsive-font($size, $span-size) {
-  font-size: $size !important;
-
-  span {
-    font-size: $span-size !important;
-  }
-}
-
 .bmpui-ui-subtitle-overlay {
     p {
         display: inline-block;
@@ -25,7 +10,6 @@ $breakpoints: (
     }
 
     .bmpui-subtitle-region-container {
-        font-size: 15.22px !important;
         position: static !important;
         display: block;
         width: 100%;
@@ -37,28 +21,48 @@ $breakpoints: (
             overflow-wrap: break-word;
             overflow: hidden;
             writing-mode: horizontal-tb;
+            text-align: center !important;
             width: 100% !important;
             inset: none !important;
             display: block !important;
-            bottom: 18px !important;
+            bottom: 16px !important;
             left: 0 !important;
             right: 0!important;
             top: auto !important;
-            font-weight: 400 !important;
-            padding: 0 18px;
+            font-weight: 400;
+            padding: 0 16px;
             line-height: 1.2;
-            @include responsive-font(1em, 1em);
+            font-size: 12px;
+
+            @container (min-width: 400px) {
+                font-size: 16px;
+            }
+
+            @container (min-width: 600px) {
+                font-size: 20px;
+            }
 
-            @each $bp, $size in $breakpoints {
-                @container (min-width: $bp) {
-                    @include responsive-font($size, $size);
-                }
+            @container (min-width: 800px) {
+                font-size: 26px;
+            }
+
+            @container (min-width: 1200px) {
+                font-size: 32px;
+                bottom: 32px !important;
+            }
+
+            span {
+                background-color: rgba(0, 0, 0, 0.6);
             }
         }
     }
 
+    [style="color: green"] {
+        color: lime !important;
+    }
+
     .green {
-        color: green;
+        color: lime;
     }
 
     .cyan {

package/src/style/components/_textbuttons.scss

@@ -19,14 +19,14 @@
     border-radius: 6px;
     height: 32px;
     box-sizing: border-box;
-    font-weight: 700;
+    font-weight: 400;
     filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.45));
 
     .bmpui-label {
         position: relative;
         display: block;
         font-family: var(--fontBold);
-        font-weight: 700;
+        font-weight: 400;
         font-size: 12px;
         color: #ffffff;
     }

package/src/style/components/_volumeslider.scss

@@ -35,6 +35,7 @@
 
 // vertical slider in topbar
 &.bmpui-audio,
+&.bmpui-vertical-video,
 .bmpui-controlbar-small {
     .bmpui-ui-volumeslider.bmpui-vertical {
         position: absolute;

package/src/style/components/vertical-video/_bottombar.scss

@@ -0,0 +1,19 @@
+.bmpui-ui-controlbar-bottom {
+  padding: 16px 8px !important;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: flex-end;
+  pointer-events: none;
+
+  .bmpui-container-wrapper {
+    width: 100%;
+    pointer-events: all;
+  }
+}
+
+&.bmpui-controls-shown {
+  .bmpui-ui-controlbar-bottom {
+    background: var(--npo-player-vertical-video-overlay-color);
+  }
+}

package/src/style/components/vertical-video/_buttons.scss

@@ -0,0 +1,23 @@
+.bmpui-vertical-video-controlbar-buttons .bmpui-container-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bmpui-ui-settingstogglebutton,
+.bmpui-ui-volumetogglebutton,
+.bmpui-ui-rewindbutton,
+.bmpui-ui-playbacktogglebutton,
+.bmpui-ui-forwardbutton,
+.bmpui-ui-fullscreentogglebutton {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  margin: 0 8px;
+
+  .bmpui-label {
+    width: 32px;
+    height: 32px;
+    margin: 8px;
+  }
+}

package/src/style/components/vertical-video/_hugeplaybacktogglebutton.scss

@@ -0,0 +1,14 @@
+&,
+&.bmpui-layout-max-width-400,
+&.bmpui-layout-max-width-600 {
+  .bmpui-ui-playbacktoggle-overlay {
+    display: block;
+  }
+}
+
+.bmpui-ui-hugeplaybacktogglebutton .bmpui-image {
+  &::after,
+  &:before {
+    z-index: 10;
+  }
+}

package/src/style/components/vertical-video/_seekbar.scss

@@ -0,0 +1,19 @@
+.bmpui-controlbar-seekbar {
+  .bmpui-container-wrapper {
+    margin: 8px 0;
+
+    .bmpui-ui-playbacktimelabel {
+      font-family: var(--fontRegular);
+
+      &.bmpui-total-time {
+        opacity: 0.65;
+        font-weight: 400;
+      }
+    }
+  }
+
+  // hide scrubbing thumbnail
+  .bmpui-ui-seekbar-label {
+    display: none;
+  }
+}

package/src/style/components/vertical-video/_settingsbutton.scss

@@ -0,0 +1,7 @@
+.bmpui-vertical-video-controlbar-settings {
+  > .bmpui-container-wrapper {
+    margin: 8px 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/src/style/components/vertical-video/_settingspanel.scss

@@ -0,0 +1,14 @@
+.bmpui-ui-settings-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  .bmpui-ui-settingstogglebutton {
+    width: 32px;
+    height: 32px;
+    margin: 0;
+  }
+}

package/src/style/components/vertical-video/_shortvideo.scss

@@ -0,0 +1,14 @@
+&.vertical-short-video {
+  .bmpui-ui-rewindbutton,
+  .bmpui-ui-forwardbutton {
+    display: none;
+  }
+
+  .bmpui-ui-playbacktimelabel {
+    display: none;
+  }
+
+  .bmpui-seekbar-playbackposition-marker {
+    display: none;
+  }
+}

package/src/style/components/vertical-video/_subtitles.scss

@@ -0,0 +1,3 @@
+&.bmpui-controls-shown .bmpui-ui-subtitle-overlay .bmpui-subtitle-region-container .bmpui-ui-subtitle-label {
+  bottom: 76px !important;
+}

package/src/style/components/vertical-video/_topbar.scss

@@ -0,0 +1,17 @@
+.bmpui-ui-titlebar {
+  background: none;
+
+  .bmpui-container-wrapper {
+    padding: 16px;
+
+    .bmpui-ui-label {
+      display: none;
+    }
+  }
+
+  .bmpui-nicam .nicam-icon {
+    width: 32px;
+    height: 32px;
+    margin-top: 0;
+  }
+}

package/src/style/components/vertical-video/_volumeslider.scss

@@ -0,0 +1,9 @@
+.bmpui-ui-volumeslider.bmpui-vertical {
+  bottom: 48px;
+  top: auto;
+  right: auto;
+
+  &::before {
+    opacity: 1;
+  }
+}