@npo/player 1.29.1 → 2.0.0-beta.0

package/src/style/npoplayer.scss

@@ -1,58 +0,0 @@
-@import 'bitmovin-player-ui/dist/css/bitmovinplayer-ui.min.css';
-
-$cdn: 'https://cdn.npoplayer.nl/assets/';
-
-// mixins
-@import './mixins/z-index';
-@import './mixins/max-lines';
-@import './mixins/focus';
-
-// vars
-@import './vars/colors';
-@import './vars/fonts';
-@import './vars/icons';
-@import './vars/z-index';
-@import './vars/audio';
-
-// show poster on audio only
-@import './components/poster';
-
-// Components
-.bmpui-npo-player {
-    container-type: inline-size;
-
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    @import './components/icons';
-    @import './components/hugeplaybacktogglebutton';
-    @import './components/nicam';
-    @import './components/playnext';
-    @import './components/seekbar';
-    @import './components/seekbarthumbnail';
-    @import './components/metadata';
-    @import './components/volumeslider';
-    @import './components/controlbars';
-    @import './components/settingspanel';
-    @import './components/infopanel';
-    @import './components/subtitles';
-    @import './components/textbuttons';
-    @import './components/buffering';
-    @import './components/advert';
-    @import './components/replay';
-    @import './components/error';
-    @import './components/back-button';
-}
-
-// Player size variants
-// @import './variants/player-debug';
-@import './variants/player-base';
-@import './variants/player-large';
-@import './variants/player-medium';
-@import './variants/player-small';
-@import './variants/player-audio';
-@import './variants/player-vertical';
-@import './variants/player-audio-only';

package/src/style/variants/_player-audio-only.scss

@@ -1,32 +0,0 @@
-// video player with no video, just audio
-
-.bmpui-npo-player.audio-only {
-  .bmpui-ui-controlbar .bmpui-ui-piptogglebutton {
-    display: none;
-  }
-
-  &.bmpui-layout-max-width-800,
-  &.bmpui-layout-max-width-1200 {
-    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom.bmpui-hidden,
-    .bmpui-ui-titlebar.bmpui-metadata.bmpui-hidden {
-      display: block;
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  &:not(.bmpui-layout-max-width-800):not(.bmpui-layout-max-width-1200) {
-    .bmpui-ui-controlbar.bmpui-controlbar-middle.bmpui-hidden,
-    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom.bmpui-hidden {
-      display: flex;
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .bmpui-ui-titlebar.bmpui-titlebar-small.bmpui-hidden {
-      opacity: 1;
-      display: block;
-      visibility: visible;
-    }
-  }
-}

package/src/style/variants/_player-audio.scss

@@ -1,55 +0,0 @@
-.bitmovinplayer-container.bitmovinplayer-audio-container {
-  container-type: inline-size;
-  @import '../components/audio/vars';
-  --npo-audio-player-poster-border-radius: 8px;
-  --npo-audio-player-poster-background: #ececec;
-
-  height: auto;
-  min-height: unset;
-  background-color: transparent;
-  overflow: visible;
-
-  &::before {
-    display: none;
-  }
-
-  video,
-  #bitmovinplayer-video-my-player {
-    width: 0px;
-    height: 0px;
-  }
-
-  // poster and errors are outsite the npo-player
-  @import '../components/audio/poster';
-  @import '../components/audio/errors';
-
-  .bmpui-npo-player {
-    // reset soms vars for default audio player colors
-    --npo-player-iconcolor: var(--npo-player-primarycolor);
-    --npo-player-unavailable: #cecece;
-    --npo-player-seekbar-marker: var(--npo-player-primarycolor);
-    --npo-player-seekbar-background: #ececec;
-    --npo-player-seekbar-bufferlevel-background: #c9c9c9;
-    --npo-audio-player-border-radius: 20px;
-    --npo-audio-player-box-shadow: 0px 2px 20px 0px #0000001A;
-
-    background-color: var(--npo-audio-player-background-color);
-    height: $player-height;
-    position: relative;
-    box-shadow: var(--npo-audio-player-box-shadow);
-    border-radius: var(--npo-audio-player-border-radius);
-
-    &.bmpui-layout-max-width-400 {
-      height: $player-height-small;
-    }
-
-    @import '../components/audio/topbar';
-    @import '../components/audio/metadata';
-    @import '../components/audio/seekbar';
-    @import '../components/audio/playbutton';
-    @import '../components/audio/bottombar';
-    @import '../components/audio/volumeslider';
-    @import '../components/audio/replay';
-    // @import '../components/audio/buffering';
-  }
-}

package/src/style/variants/_player-base.scss

@@ -1,101 +0,0 @@
-.bmpui-npo-player {
-    .bmpui-container-wrapper {
-        color: var(--npo-player-textcolor);
-    }
-
-    .bmpui-ui-selectbox {
-        color: var(--npo-player-textcolor);
-    }
-
-    .bmpui-ui-titlebar {
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 161px;
-            background: var(--npo-player-topcolor);
-        }
-    }
-
-    .bmpui-ui-controlbar.bmpui-hidden,
-    .bmpui-ui-titlebar.bmpui-hidden {
-        transition: none;
-    }
-
-    .bmpui-ui-playbacktoggle-overlay {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-
-    .bmpui-ui-controlbar-bottom {
-        background: var(--npo-player-bottomcolor);
-        z-index: z-index(bottom-bar);
-    }
-
-    /* Time labels */
-    .bmpui-ui-playbacktimelabel {
-        font-family: var(--fontBold);
-        font-style: normal;
-        font-weight: 700;
-
-        &.bmpui-total-time {
-            opacity: 0.6;
-        }
-    }
-
-    &.bmpui-player-state-finished {
-        .bmpui-ui-controlbar:not(.bmpui-controlbar-middle), 
-        .bmpui-ui-hugeplaybacktogglebutton {
-            display: unset;
-        }
-    }
-
-    &.bmpui-player-state-prepared {
-        &.bmpui-controls-shown {
-            .bmpui-controlbar-top.bmpui-controlbar-small,
-            .bmpui-ui-controlbar {
-                display: none;
-            }
-        }
-    }
-
-    &.bmpui-controls-hidden .bmpui-controlbar-textbuttons {
-        padding-bottom: 20px;
-    }
-
-    &.livestream-no-dvr {
-        .bmpui-ui-rewindbutton,
-        .bmpui-ui-forwardbutton {
-            display: none;
-        }
-
-        .bmpui-ui-playbacktogglebutton.bmpui-on .bmpui-label {
-            mask-image: var(--npo-player-icon-stop);
-        }
-
-        .bmpui-controlbar-top.bmpui-controlbar-seekbar .bmpui-ui-seekbar {
-            display: none;
-        }
-    }
-
-    .bmpui-ui-subtitle-overlay.bmpui-controlbar-visible {
-        bottom: 5.6em;
-    }
-}
-
-.bitmovinplayer-container,
-.bitmovinplayer-ad-container {
-    height: auto;
-}
-
-.bitmovinplayer-container .bitmovinplayer-poster {
-    background-size: cover;
-}
-
-.bmpui-ui-uicontainer.bmpui-hidden *,
-.bmpui-hidden {
-    pointer-events: none;
-}

package/src/style/variants/_player-debug.scss

@@ -1,14 +0,0 @@
-// TEMP - use for debugging styling, makes all the controls vibisible!
-.bmpui-controls-hidden {
-  all: unset !important;
-}
-  
-.bmpui-ui-controlbar.bmpui-hidden {
-  visibility: unset !important;
-  opacity: unset !important;
-}
-  
-.bmpui-ui-titlebar.bmpui-hidden {
-  visibility: unset !important;
-  opacity: unset !important;
-}

package/src/style/variants/_player-large.scss

@@ -1,99 +0,0 @@
-.bmpui-npo-player:not(.bmpui-layout-max-width-400):not(.bmpui-layout-max-width-600):not(.bmpui-layout-max-width-800):not(.bmpui-layout-max-width-1200) {
-    .bmpui-titlebar-small,
-    .bmpui-controlbar-middle,
-    .bmpui-controlbar-small,
-    .bmpui-settings-trigger {
-        display: none;
-    }
-
-    // Controlbar bottom
-    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
-        padding: 0 56px 48px;
-
-        .bmpui-controlbar-bottom > .bmpui-container-wrapper {
-            margin: 14px 8px 0;
-        }
-    }
-
-    .bmpui-metadata {
-        padding: 40px 48px;
-    }
-
-    .bmpui-overlay-playnext
-    .bmpui-container-wrapper
-    .bmpui-ui-hugeplaynextbacktogglebutton
-    .bmpui-label {
-        display: inline-block;
-    }
-
-    .bmpui-controlbar-textbuttons {
-        padding-right: 56px;
-        padding-bottom: 140px;
-    }
-
-    .bmpui-ui-textbutton {
-        height: 48px;
-        padding: 14px 20px;
-        border-radius: 10px;
-
-        .bmpui-label {
-            font-size: 16px;
-        }
-    }
-
-    &.bmpui-ster-ad {
-        .bmpui-ui-controlbar .bmpui-controlbar-bottom {
-            display: block !important;
-        }
-
-        .bmpui-adLabel {
-            left: 56px;
-            top: 32px;
-        }
-    }
-
-    .bmpui-overlay-chapter-skip .bmpui-container-wrapper, .bmpui-overlay-playnext .bmpui-container-wrapper {
-        padding-right: 56px;
-    }
-
-    &.bmpui-controls-shown {
-        .bmpui-overlay-chapter-skip .bmpui-container-wrapper, .bmpui-overlay-playnext .bmpui-container-wrapper {
-            padding-bottom: 130px;
-        }
-    }
-
-    .bmpui-ui-settings-panel {
-        bottom: 100px;
-
-        &::after {
-            right: 58px;
-        }
-    }
-
-    .bmpui-controlbar-textbuttons {
-        &::before {
-            height: 144px;
-        }
-    }
-
-    .bmpui-ui-settings-panel .bmpui-ui-settings-panel-item > .bmpui-container-wrapper > .bmpui-ui-listbox {
-        max-height: 150px;
-    }
-
-    .bmpui-info-panel {
-        bottom: 100px;
-
-        &::after {
-            right: 56px;
-        }
-    }
-
-    &.bmpui-ster-ad .bmpui-controlbar-textbuttons {
-        padding: 32px 56px;
-
-        .ui-sterbutton {
-            bottom: 140px;
-            right: 56px;
-        }
-    }
-}

package/src/style/variants/_player-medium.scss

@@ -1,68 +0,0 @@
-.bmpui-npo-player.bmpui-layout-max-width-800,
-.bmpui-npo-player.bmpui-layout-max-width-1200 {
-    .bmpui-titlebar-small,
-    .bmpui-controlbar-middle,
-    .bmpui-controlbar-small,
-    .bmpui-settings-trigger {
-        display: none;
-    }
-
-    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
-        padding: 0 16px 24px;
-
-        .bmpui-controlbar-bottom>.bmpui-container-wrapper {
-            margin: 14px 8px 0;
-        }
-    }
-
-
-    &.bmpui-ster-ad {
-        .bmpui-ui-controlbar .bmpui-controlbar-bottom {
-            display: block !important;
-        }
-    }
-
-    &.bmpui-controls-shown {
-        .bmpui-overlay-chapter-skip .bmpui-container-wrapper, .bmpui-overlay-playnext .bmpui-container-wrapper {
-            padding-bottom: 106px;
-        }
-    }
-
-    &.bmpui-controls-hidden .bmpui-controlbar-textbuttons {
-        padding-bottom: 20px;
-    }
-
-    .bmpui-ui-textbutton {
-        height: 40px;
-        padding: 11px 16px;
-        border-radius: 10px;
-
-        .bmpui-label {
-            font-size: 14px;
-        }
-    }
-
-    .bmpui-controlbar-textbuttons {
-        &::before {
-            height: 112px;
-        }
-    }
-
-    .bmpui-ui-settings-panel .bmpui-ui-settings-panel-item > .bmpui-container-wrapper > .bmpui-ui-listbox {
-        max-height: 150px;
-    }
-}
-
-.bmpui-npo-player.bmpui-layout-max-width-1200 {
-    .bmpui-adLabel {
-        top: 26px;
-        left: 24px;
-    }
-
-    .bmpui-controlbar-textbuttons {
-        &::before {
-            height: 144px;
-        }
-    }
-}
-

package/src/style/variants/_player-small.scss

@@ -1,203 +0,0 @@
-.bmpui-npo-player.bmpui-layout-max-width-400,
-.bmpui-npo-player.bmpui-layout-max-width-600 {
-    .bmpui-controlbar-bottom,
-    .bmpui-metadata,
-    .bmpui-ui-playbacktoggle-overlay,
-    .bmpui-controlbar-bottom,
-    .bmpui-settings-trigger,
-    .bmpui-metadata {
-        display: none;
-    }
-
-    .bmpui-back-button {
-      width: 32px;
-      height: 32px;
-
-        .bmpui-label {
-            width: 20px;
-            height: 20px;
-        }
-    }
-
-    &.bmpui-ster-ad .bmpui-controlbar-textbuttons .ui-sterbutton {
-        bottom: 40px;
-    }
-
-    .bmpui-controlbar-top.bmpui-controlbar-small {
-        .bmpui-ui-volumecontrolbutton .bmpui-container-wrapper,
-        > .bmpui-container-wrapper {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            align-items: center;
-            width: 100%;
-
-            > button:not(.bmpui-back-button) {
-                padding: 0;
-
-                .bmpui-label {
-                    width: 24px;
-                    height: 24px;
-                    max-width: 24px;
-                }
-            }
-        }
-    }
-
-    .bmpui-setting-header {
-        margin-top: 20px;
-    }
-
-    .bmpui-ui-titlebar {
-        height: 100%;
-        background: none;
-        padding: 0;
-
-        &::before {
-            display: none;
-        }
-    }
-
-    .bmpui-metadata .bmpui-container-wrapper {
-        padding: 12px;
-    }
-
-    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
-        background: none;
-        padding: 0 10px 10px;
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-        pointer-events: none;
-        
-        > .bmpui-container-wrapper {
-            width: 100%;
-            pointer-events: initial;
-        }
-    }
-
-    // icons in topbar
-    .bmpui-ui-titlebar {
-        .bmpui-ui-settingstogglebutton,
-        .bmpui-ui-fullscreentogglebutton,
-        .bmpui-ui-volumetogglebutton,
-        .bmpui-ui-casttogglebutton,
-        .bmpui-ui-airplaytogglebutton,
-        .bmpui-ui-piptogglebutton,
-        .bmpui-info-panel-toggle-button {
-            width: 24px;
-            height: 24px;
-            margin: 8px;
-        }
-    }
-
-    // Settings panel at bottom
-    .bmpui-ui-settings-panel {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        max-height: calc(100% - 40px);
-        border-radius: 24px 24px 0px 0px;
-        padding: 0;
-        overflow: auto;
-
-        &::after {
-            display: none;
-        }
-
-        .bmpui-ui-settings-panel-page.bmpui-main-panel > .bmpui-container-wrapper {
-            padding-top: 28px;
-            gap: 8px;
-        }
-
-        .bmpui-ui-settingstogglebutton {
-            margin: 0;
-        }
-    }
-
-    .bmpui-controlbar-textbuttons {
-        padding-bottom: 40px;
-    }
-
-    &.bmpui-controls-hidden .bmpui-controlbar-textbuttons {
-        padding-bottom: 16px;
-    }
-
-    &.bmpui-player-state-prepared {
-        .bmpui-ui-playbacktoggle-overlay {
-            display: unset;
-        }
-
-        &.bmpui-controls-shown {
-            .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
-                display: none;
-            }
-        }
-    }
-
-    .bmpui-ui-subtitle-overlay.bmpui-controlbar-visible {
-        bottom: 1.5em;
-    }
-
-    &.bmpui-controls-shown {
-        .bmpui-overlay-playnext .bmpui-container-wrapper {
-            padding-bottom: 40px;
-        }
-    }
-
-    .bmpui-controlbar-middle {
-        .bmpui-ui-rewindbutton,
-        .bmpui-ui-forwardbutton,
-        .bmpui-ui-playbacktogglebutton {
-            width: 40px;
-            height: 40px;
-            padding: 0;
-
-            &:focus-visible {
-                @include focusStyle(2px);
-                border-radius: 2px;
-            }
-
-            .bmpui-label {
-                display: block;
-                width: 40px;
-                height: 40px;
-                max-width: 40px;
-                overflow: hidden;
-            }
-        }
-    }
-}
-
-.bmpui-npo-player.bmpui-layout-max-width-600 {
-    .bmpui-ui-titlebar .bmpui-back-button {
-        position: absolute;
-        left: 18px;
-        top: 32px;
-    }
-}
-
-.bmpui-npo-player.bmpui-layout-max-width-400 {
-    .bmpui-ui-titlebar .bmpui-back-button {
-        position: absolute;
-        left: 18px;
-        top: 23px;
-    }
-
-    .bmpui-adLabel {
-        font-size: 13px;
-
-        &::before {
-            height: 38px;
-            width: 32px;
-        }
-    }
-
-    .bmpui-ui-errormessage-label {
-        font-size: 12px;
-        .error-code{
-            font-size: 12px;
-        }
-    }
-}

package/src/style/variants/_player-vertical.scss

@@ -1,23 +0,0 @@
-.bitmovinplayer-container {
-  &.aspect-9x16 {
-    &::before {
-      padding-bottom: 177.78%;
-    }
-  }
-
-  .bmpui-npo-player.bmpui-vertical-video {
-    --npo-player-vertical-video-overlay-color: rgba(3, 14, 30, 0.4);
-    --npo-player-seekbar-background: rgba(255, 255, 254, 0.3);
-
-    @import '../components/vertical-video/bottombar';
-    @import '../components/vertical-video/buttons';
-    @import '../components/vertical-video/hugeplaybacktogglebutton';
-    @import '../components/vertical-video/seekbar';
-    @import '../components/vertical-video/settingsbutton';
-    @import '../components/vertical-video/settingspanel';
-    @import '../components/vertical-video/subtitles';
-    @import '../components/vertical-video/topbar';
-    @import '../components/vertical-video/volumeslider';
-    @import '../components/vertical-video/shortvideo';
-  }
-}

package/src/style/vars/_audio.scss

@@ -1,5 +0,0 @@
-.bmpui-npo-player {
-  --npo-audio-player-border-radius: 20px;
-  --npo-audio-player-background-color: #fff;
-  --npo-audio-player-text-color: #000;
-}

package/src/style/vars/_colors.scss

@@ -1,25 +0,0 @@
-/*
-// These are the variables you can change to customize the player
-// The variables will be used in the rest of the stylesheet
-*/
-
-.bmpui-npo-player {
-    --npo-player-white: #fff;
-    --npo-player-primarycolor: #f56A00;
-    --npo-player-primarycolor-light: #ff9e40;
-    --npo-player-secondarycolor: #1f3353;
-    --npo-player-textcolor: #fff;
-    --npo-player-bottomcolor: linear-gradient(180deg, transparent, rgba(3, 14, 30, 1)); // The gradient color "glow" at the bottom of the player
-    --npo-player-topcolor: linear-gradient(0deg, transparent,rgba(3, 14, 30, 1)); // The gradient color "glow" at the top of the player
-    --npo-player-bufferingcolor: rgba(255, 109, 0, 0);
-    --npo-player-unavailable: #858585;
-    --npo-player-graycolor-dark: #030e1e;
-    --npo-player-graycolor-light: #999;
-    --npo-player-iconcolor: #fff;
-    --npo-player-iconcolor-active: var(--npo-player-primarycolor);
-    --npo-player-focuscolor: #fff;
-    --npo-player-seekbar-marker: #fff;
-    --npo-player-seekbar-background: #fff;
-    --npo-player-seekbar-playbackposition-background: linear-gradient(90deg, var(--npo-player-primarycolor) 0%, var(--npo-player-primarycolor-light) 100%);
-    --npo-player-seekbar-bufferlevel-background: #fff;
-}