@npo/player 1.9.3 → 1.10.0

package/src/scss/components/_seekbar.scss

@@ -1,5 +1,15 @@
+$seekbar-height: 4px;
+$seekbar-border-radius: 2px;
+
 .bmpui-ui-seekbar {
+    position: relative;
+
     .bmpui-seekbar {
+        height: $seekbar-height;
+        overflow: hidden;
+        border-radius: $seekbar-border-radius;
+        margin-top: 5px;
+
         .bmpui-seekbar-marker {
             background-color: var(--npo-player-primarycolor);
         }
@@ -11,21 +21,46 @@
 
         .bmpui-seekbar-playbackposition {
             background: linear-gradient(90deg, var(--npo-player-primarycolor) 0%, var(--npo-player-primarycolor-light) 100%);
-            backdrop-filter: blur(50px);
-            border-radius: 5px;
         }
 
-        .bmpui-seekbar-bufferlevel,
-        .bmpui-seekbar-playbackposition {
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
+        .bmpui-seekbar-seekposition {
+            display: none;
         }
 
+        .bmpui-seekbar-playbackposition,
         .bmpui-seekbar-label,
         .bmpui-seekbar-backdrop,
-        .bmpui-seekbar-markers,
-        .bmpui-ui-seekbar {
-            border-radius: 5px;
+        .bmpui-seekbar-bufferlevel,
+        .bmpui-seekbar-markers {
+            // to accept the overflow hidden for rounded borders, because elements are scaled, border radius wont look pretty
+            position: initial;
+            height: $seekbar-height;
+            margin: 0;
+        }
+
+        .bmpui-seekbar-marker-interval {
+            height: $seekbar-height;
+        }
+
+        .bmpui-seekbar-bufferlevel,
+        .bmpui-seekbar-playbackposition,
+        .bmpui-seekbar-markers {
+            // move up MINUS seekbar-height to make elements visible, because position changed to initial
+            margin-top: -$seekbar-height;
+        }
+
+        .bmpui-seekbar-markers {
+            position: relative;
+            overflow: hidden;
+            border-radius: $seekbar-border-radius;
+
+            .bmpui-seekbar-marker {
+                transition: none;
+            }
+
+            > .bmpui-seekbar-marker-unplayable {
+                background: var(--npo-player-unavailable);
+            }
         }
 
         .bmpui-seekbar-playbackposition-marker {
@@ -35,81 +70,21 @@
             height: 16px;
 
             &:after {
-                border-radius: 50%;
-                width: 0;
-                height: 0;
+                content: '';
                 position: absolute;
+                border-radius: 50%;
+                width: 38px;
+                height: 38px;
                 left: -14px;
                 top: -14px;
-                content: '';
                 opacity: 0.3;
                 background-color: var(--npo-player-white);
+                transform: scale(0);
+                transition: transform linear 0.1s;
             }
 
             &:hover:after {
-                width: 38px;
-                height: 38px;
-            }
-        }
-
-        .bmpui-seekbar-markers>.bmpui-seekbar-marker-unplayable {
-            background: var(--npo-player-unavailable);
-            backdrop-filter: blur(25px);
-            height: 0.3125em;
-        }
-    }
-}
-
-//Thumbnail
-.bmpui-ui-seekbar-label {
-    .bmpui-seekbar-label-inner {
-        border-bottom: 0px none;
-
-        &::after {
-            display: none;
-        }
-
-        >.bmpui-container-wrapper {
-            .bmpui-seekbar-thumbnail {
-                width: 148px;
-                border-radius: 12px;
-                border: 2px solid var(--npo-player-white);
-                border-radius: 12px;
-                box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);
-                margin-bottom: 4px;
-
-                &[style*=background] {
-                    display: none;
-                }
-            }
-
-            .bmpui-seekbar-label-metadata {
-                background: none;
-                padding: 0;
-                position: relative;
-
-                .bmpui-seekbar-label-title,
-                .bmpui-seekbar-label-time {
-                    font-size: 13px;
-                    line-height: 1;
-                    font-weight: 700;
-                    margin: 4px auto;
-                }
-
-                .bmpui-seekbar-label-title {
-                    opacity: 0.8;
-                    width: 120px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    display: block;
-                    font-family: var(--fontRegular);
-                }
-
-                .bmpui-seekbar-label-time {
-                    font-family: var(--fontBold);
-                    font-weight: 700;
-                }
+                transform: scale(1);
             }
         }
     }

package/src/scss/components/_seekbarthumbnail.scss

@@ -0,0 +1,56 @@
+.bmpui-ui-seekbar-label {
+  margin-bottom: 15px;
+
+  .bmpui-seekbar-label-inner {
+      border-bottom: 0px none;
+
+      &::after {
+          display: none;
+      }
+
+      >.bmpui-container-wrapper {
+          .bmpui-seekbar-thumbnail {
+              width: 148px;
+              border-radius: 12px;
+              border: 2px solid var(--npo-player-white);
+              border-radius: 12px;
+              box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);
+              margin-bottom: 4px;
+              display: none;
+
+              &[style=background] {
+                  display: block;
+              }
+          }
+
+          .bmpui-seekbar-label-metadata {
+              background: none;
+              padding: 0;
+              position: relative;
+
+              .bmpui-seekbar-label-title,
+              .bmpui-seekbar-label-time {
+                  font-size: 13px;
+                  line-height: 1;
+                  font-weight: 700;
+                  margin: 4px auto;
+              }
+
+              .bmpui-seekbar-label-title {
+                  opacity: 0.8;
+                  width: 120px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  display: block;
+                  font-family: var(--fontRegular);
+              }
+
+              .bmpui-seekbar-label-time {
+                  font-family: var(--fontBold);
+                  font-weight: 700;
+              }
+          }
+      }
+  }
+}

package/src/scss/components/_settingspanel.scss

@@ -1,21 +1,17 @@
+$settings-panel-font-size: 16px;
+$settings-panel-line-height: 19px;
+
 .bmpui-ui-settings-panel {
     display: block;
-    flex-direction: row;
-    align-items: flex-start;
     padding: 24px;
-    gap: 18px;
-    height: auto !important;
+    height: auto;
     min-width: 230px; //Hotfix for select capping of text with only 'Snelheid'
     z-index: 100;
     filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.35));
     border-radius: 12px;
     background-color: var(--npo-player-secondarycolor);
-
-    //&.bmpui-hidden{
-    //     display:block;
-    //     opacity:1;
-    //     visibility:visible;
-    // }
+    color: var(--npo-player-textcolor);
+    font-family: var(--fontRegular);
 
     > .bmpui-container-wrapper {
         margin: 0;
@@ -23,8 +19,9 @@
 
     .bmpui-setting-header {
         font-weight: 700;
-        font-size: 16px;
-        line-height: 19px;
+        font-size: $settings-panel-font-size;
+        line-height: $settings-panel-line-height;
+        font-family: var(--fontBold);
     }
 
     .bmpui-listbox-pager-button {
@@ -34,28 +31,25 @@
 
     .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;
+                font-size: $settings-panel-font-size;
+                line-height: $settings-panel-line-height;
                 opacity: 0.75;
             }
-            *.bmpui-ui-selectbox {
+
+            .bmpui-ui-selectbox {
                 margin-left: 0;
-                font-family: var(--fontRegular) !important;
+                font-family: var(--fontRegular);
                 font-style: normal;
-                font-weight: 700;
-                font-size: 16px;
-                line-height: 19px;
+                font-size: $settings-panel-font-size;
+                line-height: $settings-panel-line-height;
                 text-align: right;
             }
 
@@ -66,33 +60,34 @@
                 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;
+                font-family: var(--fontRegular);
+                font-size: $settings-panel-font-size;
+                line-height: $settings-panel-line-height;
                 text-align: right;
                 padding-right: 15px;
+
                 span {
-                    display: block !important;
+                    display: block;
                 }
+
                 ::after {
                     content: '';
                     width: 8px;
                     height: 8px;
-                    border: solid 0.17em white;
+                    border: solid 0.17em var(--npo-player-textcolor);
                     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;
@@ -105,36 +100,29 @@
 
     .bmpui-ui-settings-panel-page.bmpui-listbox-panel {
         margin: 0;
+
         > .bmpui-container-wrapper {
             display: flex;
             flex-direction: column;
-
             padding: 0px;
             gap: 16px;
 
             .bmpui-ui-settingspanelpagebackbutton {
-                width: 9em;
-                float: left;
+                width: auto;
+                padding: 0;
+                text-align: left;
             }
 
             label {
-                font-family: var(--fontRegular) !important;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 19px;
-                color: #ffffff;
+                font-size: $settings-panel-font-size;
+                line-height: $settings-panel-line-height;
                 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;
+                font-size: $settings-panel-font-size;
+                line-height: $settings-panel-line-height;
                 opacity: 0.75;
             }
 
@@ -143,9 +131,10 @@
 
                 span {
                     color: var(--npo-player-primarycolor);
-                    font-weight: 700 !important;
+                    font-weight: 700;
                     opacity: 1;
                     width: 100%;
+
                     &::after {
                         position: relative;
                         float: right;
@@ -157,10 +146,12 @@
             .bmpui-ui-settings-panel-item {
                 order: 2;
                 padding: 0;
+
                 > .bmpui-container-wrapper {
                     > label {
                         display: none;
                     }
+
                     > .bmpui-ui-listbox {
                         display: flex;
                         flex-direction: column;
@@ -172,19 +163,21 @@
 
             .bmpui-settings-back-button {
                 display: table-header-group;
-                font-family: var(--fontBold) !important;
+                font-family: var(--fontBold);
                 order: 1;
                 font-style: normal;
                 font-weight: 700;
-                font-size: 16px;
-                line-height: 19px;
-                color: #ffffff;
+                font-size: $settings-panel-font-size;
+                line-height: $settings-panel-line-height;
+                color: var(--npo-player-textcolor);
                 opacity: 1;
+
                 span {
                     padding-left: 35px;
+
                     &::before {
-                        border-bottom: 0.17em solid #fff;
-                        border-left: 0.17em solid #fff;
+                        border-bottom: 0.17em solid var(--npo-player-textcolor);
+                        border-left: 0.17em solid var(--npo-player-textcolor);
                         width: 0.5em;
                         height: 0.5em;
                         margin-left: -25px;

package/src/scss/components/_textbuttons.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0px 40px 13% 0px;
+    padding: 0px 22px 104px 0px;
     gap: 24px;
 
     position: absolute;

package/src/scss/components/_volumeslider.scss

@@ -1,23 +1,88 @@
-.bmpui-ui-volumeslider {
+.bmpui-ui-controlbar .bmpui-controlbar-bottom > .bmpui-container-wrapper .bmpui-ui-volumeslider {
+    width: 160px;
+    margin: 11px 2px 0 0;
     box-sizing: border-box;
-    width: 100px !important;
-    .bmpui-seekbar-backdrop, .bmpui-seekbar-seekposition, .bmpui-seekbar-playbackposition{
+
+    .bmpui-seekbar-backdrop,
+    .bmpui-seekbar-seekposition,
+    .bmpui-seekbar-playbackposition{
         border-radius: 5px;
     }
+
     .bmpui-seekbar-playbackposition {
-        background-color: var(--npo-player-white) !important ;
-        backdrop-filter: blur(50px);
+        background-color: var(--npo-player-textcolor);
     }
-    .bmpui-seekbar-playbackposition-marker{
-        display: none !important;
+
+    .bmpui-seekbar-playbackposition-marker {
+        display: none;
+        background-color: var(--npo-player-textcolor);
+        border-color: var(--npo-player-textcolor);
+        width: 16px;
+        height: 16px;
     }
-    &:hover{
+
+    &:hover {
         .bmpui-seekbar-playbackposition-marker {
-            display: block !important;
-            background-color: var(--npo-player-textcolor) !important;
-            border-color: var(--npo-player-textcolor) !important;
-            width: 16px !important;
-            height: 16px !important;
+            display: block;
+        }
+    }
+}
+
+// vertical slider in topbar
+.bmpui-controlbar-small {
+    .bmpui-ui-volumeslider.bmpui-vertical {
+        position: absolute;
+        top: 38px;
+        right: 10px;
+        height: 116px;
+        border-radius: 8px;
+        background-color: transparent;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--npo-player-graycolor-dark);
+            opacity: 0.6;
+        }
+
+        .bmpui-seekbar {
+            width: 20px;
+            left: 0;
+            right: 0;
+            top: 8px;
+            bottom: 8px;
+        }
+
+        .bmpui-seekbar-backdrop {
+            background-color: var(--npo-player-textcolor);
+            opacity: 0.3;
+            border-radius: 5px;
+            width: 4px;
+        }
+
+        .bmpui-seekbar-playbackposition-marker {
+            position: absolute;
+            background-color: var(--npo-player-textcolor);
+            width: 16px;
+            height: 16px;
+            padding: 0;
+            left: 2px;
+            bottom: auto;
+        }
+
+        .bmpui-seekbar-seekposition {
+            display: none;
+        }
+
+        .bmpui-seekbar-playbackposition {
+            height: 100%;
+            width: 4px;
+            margin: 0 auto;
+            transform-origin: bottom;
+            background-color: var(--npo-player-textcolor);
         }
     }
 }