@npo/player 1.9.4 → 1.10.0

package/src/scss/components/_controlbars.scss

@@ -10,21 +10,17 @@
 .bmpui-controlbar-middle {
     height: 100%;
     display: flex;
+    left: 0;
+    top: 0;
+    width: 100%;
 
     .bmpui-container-wrapper {
         display: flex;
         flex-direction: row;
-        justify-content: space-evenly; //instead of space-between
+        justify-content: space-evenly;
         align-items: center;
         padding: 0px;
-        // gap: 67px;
-        width: 100%; //Fix for gap pushing buttons out of screen
+        width: 100%;
         margin: 0 auto;
     }
-
-    button {
-        // height: 44px;
-        // width: 44px;
-        font-size: 2em;
-    }
 }

package/src/scss/components/_error.scss

@@ -1,9 +1,10 @@
 .bmpui-ui-errormessage-overlay {
-    .bmpui-ui-tvnoisecanvas{
+    .bmpui-ui-tvnoisecanvas {
         display: none;
     }
-    &::before{
-        content: "";
+
+    &::before {
+        content: '';
         background-color: var(--npo-player-secondarycolor);
         opacity: 0.7;
         width: 100%;
@@ -15,8 +16,9 @@
         position: absolute;
     }
 }
+
 .bmpui-ui-errormessage-label {
-    font-family: 'NPOSansBold';
+    font-family: var(--font-bold);
     font-weight: 700;
     font-size: 22px;
     line-height: 130%;

package/src/scss/components/_hugeplaybacktogglebutton.scss

@@ -0,0 +1,71 @@
+&.bmpui-player-state-paused,
+&.bmpui-player-state-prepared,
+&.bmpui-player-state-finished {
+    .bmpui-ui-hugeplaybacktogglebutton {
+        .bmpui-image {
+            animation: none;
+        }
+    }
+}
+
+
+/* Icon Play */
+.bmpui-ui-hugeplaybacktogglebutton {
+    .bmpui-image {
+        cursor: pointer;
+        position: relative;
+        // animation: none;
+        background: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:after,
+        &:before {
+            content: '';
+            position: absolute;
+            height: 88px;
+            width: 88px;
+        }
+
+        &:after {
+            mask-image: var(--npo-player-icon-play);
+            mask-repeat: no-repeat;
+            mask-position: center;
+            transition: mask-size linear 0.3s;
+            mask-size: 40%;
+            background-color: var(--npo-player-iconcolor);
+        }
+
+        &:before {
+            border-radius: 500px;
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        &:hover {
+            &:after {
+                mask-size: 55%;
+            }
+
+            &:before {
+                background: linear-gradient(90deg, var(--npo-player-primarycolor), var(--npo-player-primarycolor-light));
+                background-size: 200% 200%;
+                animation: gradientAnimation 2s linear infinite;
+            }
+        }
+    }
+}
+
+@keyframes gradientAnimation {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}

package/src/scss/components/_icons.scss

@@ -1,241 +1,140 @@
 .bmpui-ui-rewindbutton,
 .bmpui-ui-forwardbutton,
-.bmpui-ui-subtitlesettingstogglebutton,
 .bmpui-ui-settingstogglebutton,
 .bmpui-ui-fullscreentogglebutton,
 .bmpui-ui-playbacktogglebutton,
 .bmpui-ui-volumetogglebutton,
 .bmpui-ui-casttogglebutton,
 .bmpui-ui-airplaytogglebutton,
-.bmpui-ui-piptogglebutton,
-.bmpui-ui-audiotracksettingstogglebutton {
-    padding: 8px;
+.bmpui-ui-piptogglebutton {
+    width: 40px;
+    height: 40px;
+    padding: 0;
     margin: 0;
+    background-size: contain;
+    background-color: var(--npo-player-iconcolor);
+    background-image: none;
+    mask-size: contain;
+    mask-position: 50% 50%;
+    mask-repeat: no-repeat;
+}
+
+.bmpui-ui-settingstogglebutton,
+.bmpui-ui-casttogglebutton,
+.bmpui-ui-airplaytogglebutton,
+.bmpui-ui-piptogglebutton {
+    &.bmpui-on {
+        background-color: var(--npo-player-iconcolor-active);
+    }
 }
 
 .bmpui-controlbar-bottom {
     .bmpui-container-wrapper {
-        gap: 8px;
+        gap: 20px;
     }
 }
 
-/*Forward / backward */
+/* Icon rewind 10 sec */
 .bmpui-ui-rewindbutton {
-    background-image: url($icon_backwards);
-    background-size: contain;
+    mask-image: var(--npo-player-icon-backward);
 }
 
+/* Icon forward 10 sec */
 .bmpui-ui-forwardbutton {
-    background-image: url($icon_forward);
-    background-size: contain;
+    mask-image: var(--npo-player-icon-forward);
 }
 
 .bmpui-ui-rewindbutton:hover,
 .bmpui-ui-forwardbutton:hover {
-    -webkit-filter: drop-shadow(0 0 1px #fff);
-    filter: drop-shadow(0 0 1px #fff);
+    filter: drop-shadow(0 0 1px var(--npo-player-iconcolor));
 }
 
-/* Icon Play */
-&.bmpui-player-state-paused, &.bmpui-player-state-prepared, &.bmpui-player-state-finished {
-    .bmpui-ui-hugeplaybacktogglebutton {
-        .bmpui-image {
-            cursor: pointer;
-            animation: none !important;
-            position: relative;
-            background: none;
-            background-image: none !important;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            &:after, &:before{
-                content: "";
-                position: absolute;
-                height: 76px;
-                width: 76px;
-            }
-            &:hover{
-                &:after{
-                    background-size: 55% !important;
-                }
-            }
-            &:after{
-                background-image: url($icon_bigplay) !important;
-                background-repeat: no-repeat;
-                background-position: center;
-                transition: background-size linear 0.3s !important;
-                background-size: 40%;
-            }
-            &:before{
-                border-radius: 500px;
-                background: rgba(0, 0, 0, 0.5);
-            }
-        }
-        &:hover{
-            .bmpui-image{
-                &:before{
-                    background: linear-gradient(90deg, var(--npo-player-primarycolor) 0%, var(--npo-player-primarycolor-light) 100%);
-                    animation: gradientAnimation 2s linear infinite;
-                }
-            }
-        }
-    }
-
-    @container (min-width: 600px){
-        .bmpui-ui-hugeplaybacktogglebutton .bmpui-image {
-            &:after, &:before{
-                height: 88px;
-                width: 88px;
-            }
-        }
-    }
-
-    @container (min-width: 1200px){
-        .bmpui-ui-hugeplaybacktogglebutton .bmpui-image {
-            &:after, &:before{
-                height: 100px;
-                width: 100px;
-            }
-        }
-    }
-}
-
-@keyframes gradientAnimation {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-// Loading icon, does not currently work
-&.bmpui-ui-uicontainer .bmpui-ui-hugeplaybacktogglebutton.bmpui-on .bmpui-image{
-    background: none !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-    background-size: 15% !important;
-    background-image:  url($icon_bigplay) !important;
-}
-&.bmpui-ui-uicontainer:not(.bmpui-player-state-prepared):not(.bmpui-player-state-playing):not(.bmpui-player-state-paused):not(.bmpui-player-state-finished) .bmpui-image {
-    background-image: none !important;
-    &:after{
-        animation: rotation 1s infinite linear;
-        background-image: url($icon_loading) !important;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 4em;
-    }
-}
-
-/* Icon Audio Quality */
-.bmpui-ui-subtitlesettingstogglebutton {
-    &.bmpui-off {
-        background-image: url($icon_subtitles);
-    }
-    &.bmpui-on {
-        background-image: url($icon_subtitles_active);
-    }
-}
-
-/* Icon Subtitles */
-.bmpui-ui-subtitlesettingstogglebutton {
-    &.bmpui-off {
-        background-image: url($icon_subtitles);
-    }
-    &.bmpui-on {
-        background-image: url($icon_subtitles_active);
-    }
-}
-
-/* Icon Small Play + Pause */
+/* Icon Small Play/Pause Toggle */
 .bmpui-ui-playbacktogglebutton {
     &.bmpui-off {
-        background-image: url($icon_playbackplay);
+        mask-image: var(--npo-player-icon-play);
     }
-    &.bmpui-on {
-        background-image: url($icon_playbackpause);
-    }
-}
 
-@keyframes rotation {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(359deg);
+    &.bmpui-on {
+        mask-image: var(--npo-player-icon-pause);
     }
 }
 
+/* Icon Full Screen */
 .bmpui-ui-fullscreentogglebutton {
     &.bmpui-off {
-        background-image: url($icon_fullscreen);
+        mask-image: var(--npo-player-icon-fullscreen);
     }
+    
     &.bmpui-on {
-        background-image: url($icon_fullscreen_active);
+        mask-image: var(--npo-player-icon-fullscreen-active);
     }
 }
 
 /* Icon Settings */
 .bmpui-ui-settingstogglebutton {
     &.bmpui-off {
-        background-image: url($icon_settings);
+        mask-image: var(--npo-player-icon-settings);
     }
+
     &.bmpui-on {
-        background-image: url($icon_settings_active);
+        mask-image: var(--npo-player-icon-settings-active);
     }
 }
 
 /* Icon Cast */
 .bmpui-ui-casttogglebutton {
     &.bmpui-off {
-        background-image: url($icon_cast);
+        mask-image: var(--npo-player-icon-cast);
     }
+
     &.bmpui-on {
-        background-image: url($icon_cast_active);
+        mask-image: var(--npo-player-icon-cast-active);
     }
 }
 
 /* Icon Airplay */
 .bmpui-ui-airplaytogglebutton {
     &.bmpui-off {
-        background-image: url($icon_airplay);
+        mask-image: var(--npo-player-icon-airplay);
     }
+
     &.bmpui-on {
-        background-image: url($icon_airplay_active);
+        mask-image: var(--npo-player-icon-airplay-active);
     }
 }
 
 /* Icon PIP */
 .bmpui-ui-piptogglebutton {
     &.bmpui-off {
-        background-image: url($icon_pip);
+        mask-image: var(--npo-player-icon-pip);
     }
+
     &.bmpui-on {
-        background-image: url($icon_pip_active);
+        mask-image: var(--npo-player-icon-pip-active);
     }
 }
 
 /* Icon Volume */
 .bmpui-ui-volumetogglebutton.bmpui-muted {
-    background-image: url($icon_volume_muted);
+    mask-image: var(--npo-player-icon-volume-muted);
 }
+
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='1'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='2'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='3'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='4'] {
-    background-image: url($icon_volume_1);
+    mask-image: var(--npo-player-icon-volume-1);
 }
+
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='5'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='6'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='7'] {
-    background-image: url($icon_volume_2);
+    mask-image: var(--npo-player-icon-volume-2);
 }
+
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='8'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='9'],
 .bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='10'] {
-    background-image: url($icon_volume_3);
-}
+    mask-image: var(--npo-player-icon-volume-3);
+}

package/src/scss/components/_metadata.scss

@@ -0,0 +1,22 @@
+.bmpui-metadata {
+  padding: 24px 18px;
+  color: var(--npo-player-textcolor);
+
+  .bmpui-label-metadata-title {
+    font-family: var(--fontBold);
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19.2px;
+  }
+
+  .bmpui-label-metadata-description {
+    font-family: var(--fontRegular);
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    margin: 4px 0;
+    opacity: 0.65;
+  }
+}

package/src/scss/components/_nicam.scss

@@ -2,7 +2,8 @@
     display: flex;
     width: 100%;
     padding-left: 1px; // offset the negative padding on the nicam icon
-    .nicam-icon{
+
+    .nicam-icon {
         display: block;
         height: 25px;
         width: 25px;

package/src/scss/components/_playnext.scss

@@ -26,7 +26,7 @@
             width: 7.3em;
             cursor: pointer;
             transition: background-size linear 0.2s !important;
-            background-image: url($icon_bigplay) !important;
+            background-image: var(--npo-player-icon-play) !important;
             background-size: 60%;
             &:hover {
                 background-size: 70%;

package/src/scss/components/_replay.scss

@@ -0,0 +1,35 @@
+&.bmpui-player-state-finished {
+  .bmpui-ui-playbacktoggle-overlay {
+    display: block !important;
+
+    .bmpui-ui-hugeplaybacktogglebutton {
+      background: rgba(3, 14, 30, 0.4);
+    }
+
+    .bmpui-image,
+    .bmpui-image:hover {
+      &::before {
+        display: none;
+      }
+
+      &::after {
+        animation: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+        background-color: var(--npo-player-iconcolor);
+        mask-size: 48px;
+        mask-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.2721 14.1005C10.4911 13.3195 10.4911 12.0531 11.2721 11.2721C18.3015 4.24264 29.6985 4.24264 36.728 11.2721C43.7574 18.3015 43.7574 29.6985 36.728 36.7279C29.6985 43.7574 18.3015 43.7574 11.2721 36.7279C10.4911 35.9469 10.4911 34.6805 11.2721 33.8995C12.0532 33.1184 13.3195 33.1184 14.1005 33.8995C19.5679 39.3668 28.4322 39.3668 33.8995 33.8995C39.3669 28.4322 39.3669 19.5678 33.8995 14.1005C28.4322 8.63316 19.5679 8.63316 14.1005 14.1005C13.3195 14.8816 12.0532 14.8816 11.2721 14.1005Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.199 4.00983C12.2981 4.11974 13.1 5.09983 12.9901 6.19891L12.2333 13.7666L19.801 13.0098C20.9001 12.8999 21.8802 13.7018 21.9901 14.8009C22.1 15.9 21.2981 16.8801 20.199 16.99L10.199 17.99C9.60213 18.0497 9.00997 17.8383 8.5858 17.4141C8.16163 16.99 7.95025 16.3978 8.00994 15.8009L9.00994 5.8009C9.11985 4.70181 10.0999 3.89992 11.199 4.00983Z" fill="white"/></svg>') !important;
+        transition: transform .25s ease-in;
+      }
+    }
+
+    .bmpui-image:hover:after {
+      transform: rotate(-135deg);
+    }
+  }
+
+  .bmpui-ui-playbacktogglebutton.bmpui-off {
+    mask-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.2721 14.1005C10.4911 13.3195 10.4911 12.0531 11.2721 11.2721C18.3015 4.24264 29.6985 4.24264 36.728 11.2721C43.7574 18.3015 43.7574 29.6985 36.728 36.7279C29.6985 43.7574 18.3015 43.7574 11.2721 36.7279C10.4911 35.9469 10.4911 34.6805 11.2721 33.8995C12.0532 33.1184 13.3195 33.1184 14.1005 33.8995C19.5679 39.3668 28.4322 39.3668 33.8995 33.8995C39.3669 28.4322 39.3669 19.5678 33.8995 14.1005C28.4322 8.63316 19.5679 8.63316 14.1005 14.1005C13.3195 14.8816 12.0532 14.8816 11.2721 14.1005Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.199 4.00983C12.2981 4.11974 13.1 5.09983 12.9901 6.19891L12.2333 13.7666L19.801 13.0098C20.9001 12.8999 21.8802 13.7018 21.9901 14.8009C22.1 15.9 21.2981 16.8801 20.199 16.99L10.199 17.99C9.60213 18.0497 9.00997 17.8383 8.5858 17.4141C8.16163 16.99 7.95025 16.3978 8.00994 15.8009L9.00994 5.8009C9.11985 4.70181 10.0999 3.89992 11.199 4.00983Z" fill="white"/></svg>');
+  }
+}

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);
             }
         }
     }