@npo/player 1.9.3 → 1.10.0

package/src/scss/npoplayer.scss

@@ -14,12 +14,13 @@ $cdn: 'https://cdn.npoplayer.nl/assets/';
 /*Components*/
 .bmpui-npo-player {
     container-type: inline-size;
-    @import './components/fonts';
     @import './components/icons';
+    @import './components/hugeplaybacktogglebutton';
     @import './components/nicam';
     @import './components/playnext';
-    @import './components/container';
     @import './components/seekbar';
+    @import './components/seekbarthumbnail';
+    @import './components/metadata';
     @import './components/volumeslider';
     @import './components/controlbars';
     @import './components/settingspanel';
@@ -27,11 +28,14 @@ $cdn: 'https://cdn.npoplayer.nl/assets/';
     @import './components/textbuttons';
     @import './components/buffering';
     @import './components/advert';
+    @import './components/replay';
     @import './components/error';
 }
 
 /*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-small';
+@import './variants/player-native-mobile';

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

@@ -1,11 +1,4 @@
 .bmpui-npo-player {
-    .bmpui-ui-watermark {
-        // Replace background image in case we ever need a watermark
-        // background-image: url($watermark_url);
-        // background-size: contain;
-        display: none;
-    }
-
     .bmpui-container-wrapper {
         color: var(--npo-player-textcolor);
     }
@@ -16,42 +9,23 @@
 
     .bmpui-ui-titlebar {
         background: var(--npo-player-topcolor);
+        height: 161px;
     }
 
-    /* Time labels */
-    .bmpui-text-right {
-        opacity: 0.6;
-    }
-
-    .bmpui-label-metadata-description {
-        float: left;
+    .bmpui-ui-controlbar-bottom {
+        background: var(--npo-player-bottomcolor);
     }
 
-    //BVN Overwrite fix
-    .bmpui-ui-uicontainer {
-        font-size: 16px;
-
-        input[type='text'],
-        select,
-        textarea {
-            padding: 0.3em;
-            height: auto;
+    /* Time labels */
+    .bmpui-ui-playbacktimelabel {
+        &.bmpui-current-time {
+            font-family: var(--fontBold);
             font-style: normal;
-            color: white;
-            display: inline-block !important;
-        }
-
-        button:hover,
-        input[type='submit']:hover {
-            background-color: rgba(0, 0, 0, 0) !important;
-        }
-
-        label {
-            margin: 0 !important;
+            font-weight: 700;
         }
 
-        .bmpui-ui-playbacktogglebutton {
-            transition: unset !important;
+        &.bmpui-total-time {
+            opacity: 0.6;
         }
     }
 

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

@@ -0,0 +1,14 @@
+// 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/scss/variants/_player-large.scss

@@ -1,56 +1,34 @@
 .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 {
-        display: none;
-    }
-
+    .bmpui-controlbar-middle,
     .bmpui-controlbar-small,
     .bmpui-settings-trigger {
         display: none;
     }
 
-    //Controlbar bottom
-    .bmpui-ui-controlbar {
+    // Controlbar bottom
+    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
         padding: 136px 56px 48px;
-    }
 
-    //Titlebar
-    .bmpui-metadata {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 48px 56px;
-        gap: 56px;
-
-        height: 139px; //@Jelle: moet dit auto of vaste height?
-
-        .bmpui-label-metadata-title {
-            font-family: var(--fontBold);
-            font-style: normal;
-            font-weight: 700;
-            font-size: 16px;
-            line-height: 19px;
-
-            color: #ffffff;
+        .bmpui-controlbar-bottom > .bmpui-container-wrapper {
+            margin: 14px 8px 0;
         }
+    }
 
-        .bmpui-label-metadata-description {
-            font-family: var(--fontRegular);
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px; //140%
-            /* identical to box height, or 20px */
-
-            color: #ffffff;
-
-            opacity: 0.65;
-        }
+    .bmpui-metadata {
+        padding: 40px 48px;
     }
+
     .bmpui-overlay-playnext
-        .bmpui-container-wrapper
-        .bmpui-ui-hugeplaynextbacktogglebutton
-        .bmpui-label {
+    .bmpui-container-wrapper
+    .bmpui-ui-hugeplaynextbacktogglebutton
+    .bmpui-label {
         display: inline-block;
     }
+
+    &.bmpui-ster-ad {
+        .bmpui-ui-controlbar .bmpui-controlbar-bottom {
+            display: block !important;
+        }
+    }
 }

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

@@ -1,57 +1,25 @@
 .bmpui-npo-player.bmpui-layout-max-width-800,
 .bmpui-npo-player.bmpui-layout-max-width-1200 {
-    .bmpui-titlebar-small,
-    .bmpui-controlbar-middle {
-        display: none;
-    }
 
+    .bmpui-titlebar-small,
+    .bmpui-controlbar-middle,
     .bmpui-controlbar-small,
     .bmpui-settings-trigger {
         display: none;
     }
 
-    //Controlbar bottom
-    .bmpui-ui-controlbar {
-        padding: 80px 16px 24px 16px;
-        pointer-events: none; //Fix for not being able to click the play button
-    }
-
-    .bmpui-ui-controlbar .bmpui-controlbar-top > .bmpui-container-wrapper,
-    .bmpui-ui-controlbar .bmpui-controlbar-bottom > .bmpui-container-wrapper {
-        margin: 8px 0;
-    }
-
-    //Titlebar
-    .bmpui-metadata {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 32px 24px;
-        gap: 24px;
-
-        height: 107px; //@Jelle: moet dit auto of vaste height?
+    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
+        padding: 102px 16px 24px;
 
-        .bmpui-label-metadata-title {
-            font-family: var(--fontBold);
-            font-style: normal;
-            font-weight: 700;
-            font-size: 16px;
-            line-height: 19px;
-
-            color: #ffffff;
+        .bmpui-controlbar-bottom>.bmpui-container-wrapper {
+            margin: 14px 8px 0;
         }
+    }
 
-        .bmpui-label-metadata-description {
-            font-family: var(--fontRegular);
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px; //140%
-            /* identical to box height, or 20px */
-
-            color: #ffffff;
 
-            opacity: 0.65;
+    &.bmpui-ster-ad {
+        .bmpui-ui-controlbar .bmpui-controlbar-bottom {
+            display: block !important;
         }
     }
-}
+}

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

@@ -0,0 +1,5 @@
+.bmpui-npo-player.bmpui-native-mobile {
+  .bmpui-seekbar-playbackposition-marker {
+    margin-top: -1px;
+  }
+}

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

@@ -2,10 +2,7 @@
 .bmpui-npo-player.bmpui-layout-max-width-600 {
     .bmpui-controlbar-bottom,
     .bmpui-metadata,
-    .bmpui-ui-playbacktoggle-overlay {
-        display: none;
-    }
-
+    .bmpui-ui-playbacktoggle-overlay,
     .bmpui-controlbar-bottom,
     .bmpui-metadata {
         display: none;
@@ -21,214 +18,56 @@
         }
     }
 
-    .bmpui-titlebar-small {
+    .bmpui-ui-titlebar {
+        height: auto;
         background: none;
+        padding: 0;
+    }
 
-        .bmpui-ui-settings-panel {
-            top: 4em;
+    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
+        background: none;
+        padding: 0 10px 10px;
+        height: 100%;
+        outline: 1px solid green;
+        display: flex;
+        align-items: flex-end;
+        pointer-events: none;
+        
+        > .bmpui-container-wrapper {
+            width: 100%;
+            pointer-events: initial;
         }
     }
 
-    .bmpui-ui-textbutton {
-        padding: 8px 16px;
-        .bmpui-label {
-            font-size: 14px;
-        }
+    // icons in topbar
+    .bmpui-ui-settingstogglebutton,
+    .bmpui-ui-fullscreentogglebutton,
+    .bmpui-ui-volumetogglebutton,
+    .bmpui-ui-casttogglebutton,
+    .bmpui-ui-airplaytogglebutton,
+    .bmpui-ui-piptogglebutton {
+        width: 24px;
+        height: 24px;
+        margin: 8px;
     }
 
-    //Settings panel at bottom
+    // Settings panel at bottom
     .bmpui-ui-settings-panel {
-        position: fixed;
+        position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
-        width: auto !important;
-        height: auto !important;
-        top: auto !important;
+        max-height: calc(100% - 46px);
         border-radius: 24px 24px 0px 0px;
-        padding: 8px 24px 48px;
-        height: auto;
-
-        display: block;
-        flex-direction: row;
-        align-items: flex-start;
-        gap: 18px;
+        padding: 0 24px 16px;
+        overflow: auto;
 
         > .bmpui-container-wrapper {
-            margin: 0;
-        }
-
-        .bmpui-ui-settings-panel-page.bmpui-main-panel {
-            margin: 0;
-            > .bmpui-container-wrapper {
-                display: flex;
-                flex-direction: column;
-
-                padding: 0px;
-                gap: 16px;
-                label {
-                    font-family: var(--fontRegular) !important;
-                    font-style: normal;
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 19px;
-                    color: #ffffff;
-                    opacity: 0.75;
-                }
-                *.bmpui-ui-selectbox {
-                    margin-left: 0;
-                    font-family: var(--fontRegular) !important;
-                    font-style: normal;
-                    font-weight: 700;
-                    font-size: 16px;
-                    line-height: 19px;
-                    text-align: right;
-                }
-
-                .bmpui-listbox-pager-button {
-                    background: none;
-                    max-height: unset;
-                    padding: unset;
-                    vertical-align: unset;
-                    width: 45%;
-                    margin-left: 0;
-                    font-family: var(--fontRegular) !important;
-                    font-style: normal;
-                    font-weight: 700;
-                    font-size: 16px;
-                    line-height: 19px;
-                    text-align: right;
-                    padding-right: 15px;
-                    span {
-                        display: block !important;
-                    }
-                    ::after {
-                        content: '';
-                        width: 8px;
-                        height: 8px;
-                        border: solid 0.17em white;
-                        border-width: 0 0.17em 0.17em 0;
-                        display: inline-block;
-                        padding: 0px;
-                        margin-left: 8px;
-                        transform: rotate(-45deg);
-                        -webkit-transform: rotate(-45deg);
-                    }
-                }
-            }
-            .bmpui-ui-settings-panel-item {
-                border-bottom: 0;
-                padding: 0;
-                > .bmpui-container-wrapper {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    padding: 0px;
-                    gap: 8px;
-                }
-            }
+            gap: 10px;
         }
+    }
 
-        .bmpui-ui-settings-panel-page.bmpui-listbox-panel {
-            margin: 0;
-            > .bmpui-container-wrapper {
-                display: flex;
-                flex-direction: column;
-
-                padding: 0px;
-                gap: 16px;
-
-                label {
-                    font-family: var(--fontRegular) !important;
-                    font-style: normal;
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 19px;
-                    color: #ffffff;
-                    opacity: 0.75;
-                }
-
-                .bmpui-ui-listbox-button span {
-                    font-family: var(--fontRegular) !important;
-                    text-align: left;
-                    font-style: normal;
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 19px;
-                    color: #ffffff;
-                    opacity: 0.75;
-                }
-
-                .bmpui-ui-listbox .bmpui-ui-listbox-button.bmpui-selected {
-                    background: unset;
-
-                    span {
-                        color: var(--npo-player-primarycolor);
-                        font-weight: 700 !important;
-                        opacity: 1;
-                        width: 100%;
-                        &::after {
-                            position: relative;
-                            float: right;
-                            width: 24px;
-                            content: '✔';
-                        }
-                    }
-                }
-                .bmpui-ui-settings-panel-item {
-                    order: 2;
-                    padding: 0;
-                    > .bmpui-container-wrapper {
-                        > label {
-                            display: none;
-                        }
-                        > .bmpui-ui-listbox {
-                            display: flex;
-                            flex-direction: column;
-                            padding: 0px;
-                            gap: 8px;
-                        }
-                    }
-                }
-
-                .bmpui-settings-back-button {
-                    display: table-header-group;
-                    font-family: var(--fontBold) !important;
-                    order: 1;
-                    font-style: normal;
-                    font-weight: 700;
-                    font-size: 16px;
-                    line-height: 19px;
-                    color: #ffffff;
-                    opacity: 1;
-                    span {
-                        padding-left: 40px;
-                        &::before {
-                            border-bottom: 0.17em solid #fff;
-                            border-left: 0.17em solid #fff;
-                            width: 0.5em;
-                            height: 0.5em;
-                            margin-left: -25px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .bmpui-settings-trigger {
-            margin: 0 auto 16px;
-
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: flex-start;
-            padding: 0px 0px 0px;
-
-            width: 48px;
-            height: 4px;
-            border: 0;
-            background: #334767;
-            border-radius: 2px;
-        }
+    .bmpui-controlbar-textbuttons {
+        padding-bottom: 40px;
     }
 }

package/src/scss/vars/_colors.scss

@@ -4,21 +4,16 @@
 */
 
 .bmpui-npo-player {
-    --npo-player-white: #ffffff;
+    --npo-player-white: #fff;
     --npo-player-primarycolor: #ff6d00;
     --npo-player-primarycolor-light: #ff9e40;
     --npo-player-secondarycolor: #1f3353;
-    --npo-player-textcolor: #ffffff;
-    --npo-player-bottomcolor: linear-gradient(
-        180deg,
-        transparent,
-        rgba(30, 30, 30, 0.7)
-    ); //The gradient color "glow" at the bottom of the player
-    --npo-player-topcolor: linear-gradient(
-        0deg,
-        transparent,
-        rgba(0, 0, 0, 0.7)
-    ); //The gradient color "glow" at the top of the player
+    --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-iconcolor: #fff;
+    --npo-player-iconcolor-active: var(--npo-player-primarycolor);
 }

package/src/scss/vars/_fonts.scss

@@ -6,12 +6,12 @@
 .bmpui-npo-player {
     @font-face {
         font-family: 'NPOSansBold';
-        src: url($cdn + 'NPO Sans Bold v1.0.otf') format('truetype');
+        src: url($cdn + 'fonts/NPO-Sans-Bold-v1.0.otf') format('truetype');
     }
 
     @font-face {
         font-family: 'NPOSansRegular';
-        src: url($cdn + 'NPO Sans Regular v1.0.otf') format('truetype');
+        src: url($cdn + 'fonts/NPO-Sans-Regular-v1.0.otf') format('truetype');
     }
 
     --fontRegular: 'NPOSansRegular', sans-serif;