@npo/player 1.29.1 → 2.0.0-beta.1

package/src/style/components/_icons.scss

@@ -1,177 +0,0 @@
-.bmpui-ui-rewindbutton,
-.bmpui-ui-forwardbutton,
-.bmpui-ui-settingstogglebutton,
-.bmpui-ui-fullscreentogglebutton,
-.bmpui-ui-playbacktogglebutton,
-.bmpui-ui-volumetogglebutton,
-.bmpui-ui-casttogglebutton,
-.bmpui-ui-airplaytogglebutton,
-.bmpui-ui-piptogglebutton,
-.bmpui-info-panel-toggle-button {
-    background-image: none !important;
-    width: 21px;
-    height: 40px;
-    padding: 0;
-    margin: 0;
-
-    &[disabled] {
-        opacity: .5;
-        pointer-events: none;
-        cursor: default;
-    }
-
-    &:focus-visible {
-        @include focusStyle(2px);
-        border-radius: 2px;
-    }
-
-    .bmpui-label {
-        width: 21px;
-        height: 40px;
-        padding: 0;
-        margin: 0 auto;
-        background-size: contain;
-        background-color: var(--npo-player-iconcolor);
-        background-image: none !important;
-        mask-size: contain;
-        mask-position: 50% 50%;
-        mask-repeat: no-repeat;
-        display: block;
-        color: transparent;
-        max-width: 21px;
-        overflow: hidden;
-    }
-}
-
-.bmpui-ui-settingstogglebutton,
-.bmpui-ui-casttogglebutton,
-.bmpui-ui-airplaytogglebutton,
-.bmpui-ui-piptogglebutton,
-.bmpui-info-panel-toggle-button {
-    &.bmpui-on .bmpui-label {
-        background-color: var(--npo-player-iconcolor-active);
-    }
-}
-
-.bmpui-controlbar-bottom {
-    .bmpui-container-wrapper {
-        gap: 10px;
-    }
-}
-
-/* Icon rewind 10 sec */
-.bmpui-ui-rewindbutton .bmpui-label {
-    mask-image: var(--npo-player-icon-backward);
-}
-
-/* Icon forward 10 sec */
-.bmpui-ui-forwardbutton .bmpui-label {
-    mask-image: var(--npo-player-icon-forward);
-}
-
-/* Icon Small Play/Pause Toggle */
-.bmpui-ui-playbacktogglebutton {
-    &.bmpui-off .bmpui-label {
-        mask-image: var(--npo-player-icon-play);
-    }
-
-    &.bmpui-on .bmpui-label {
-        mask-image: var(--npo-player-icon-pause);
-    }
-}
-
-/* Icon Full Screen */
-.bmpui-ui-fullscreentogglebutton {
-    &.bmpui-off .bmpui-label {
-        mask-image: var(--npo-player-icon-fullscreen);
-    }
-    
-    &.bmpui-on .bmpui-label {
-        mask-image: var(--npo-player-icon-fullscreen-active);
-    }
-}
-
-/* Icon Settings */
-.bmpui-ui-settingstogglebutton {
-    &.bmpui-off .bmpui-label {
-        mask-image: var(--npo-player-icon-settings);
-    }
-
-    &.bmpui-on .bmpui-label {
-        mask-image: var(--npo-player-icon-settings-active);
-    }
-}
-
-/* Icon Cast */
-.bmpui-ui-casttogglebutton {
-    &.bmpui-off .bmpui-label {
-        mask-image: var(--npo-player-icon-cast);
-    }
-
-    &.bmpui-on .bmpui-label {
-        mask-image: var(--npo-player-icon-cast-active);
-    }
-
-    &.bmpui-disabled,
-    &.bmpui-hidden {
-        display: none;
-    }
-}
-
-/* Icon Airplay */
-.bmpui-ui-airplaytogglebutton {
-    &.bmpui-off .bmpui-label {
-        mask-image: var(--npo-player-icon-airplay);
-    }
-
-    &.bmpui-on .bmpui-label {
-        mask-image: var(--npo-player-icon-airplay-active);
-    }
-}
-
-/* Icon PIP */
-.bmpui-ui-piptogglebutton {
-    &.bmpui-off .bmpui-label {
-        mask-image: var(--npo-player-icon-pip);
-    }
-
-    &.bmpui-on .bmpui-label {
-        mask-image: var(--npo-player-icon-pip-active);
-    }
-}
-
-/* Icon Volume */
-.bmpui-ui-volumetogglebutton.bmpui-muted .bmpui-label {
-    mask-image: var(--npo-player-icon-volume-muted);
-}
-
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='1'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='2'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='3'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='4'] .bmpui-label {
-    mask-image: var(--npo-player-icon-volume-1);
-}
-
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='5'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='6'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='7'] .bmpui-label {
-    mask-image: var(--npo-player-icon-volume-2);
-}
-
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='8'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='9'] .bmpui-label,
-.bmpui-ui-volumetogglebutton.bmpui-unmuted[data-bmpui-volume-level-tens='10'] .bmpui-label {
-    mask-image: var(--npo-player-icon-volume-3);
-}
-
-.bmpui-info-panel-toggle-button {
-    cursor: pointer;
-
-    &.bmpui-hidden {
-        display: none;
-    }
-
-    .bmpui-label {
-        mask-image: var(--npo-player-icon-info);
-    }
-}

package/src/style/components/_infopanel.scss

@@ -1,105 +0,0 @@
-.bmpui-info-panel {
-  background-color: var(--npo-player-secondarycolor);
-  position: absolute;
-  z-index: z-index(settings-panel);
-  color: var(--npo-player-textcolor);
-  display: block;
-  white-space: normal;
-  padding: 12px 24px;
-  user-select: auto;
-  cursor: default;
-  right: 65px;
-  bottom: 75px;
-  top: auto;
-  left: auto;
-  width: fit-content;
-  max-width: calc(100% - 65px - 65px);
-  border-radius: 12px;
-  filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.35));
-  overflow: visible;
-
-  .bmpui-info-panel-content {
-    overflow: auto;
-    position: relative;
-    z-index: 1;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    background: var(--npo-player-secondarycolor);
-    border-radius: 6px;
-    width: 32px;
-    height: 32px;
-    bottom: -10px;
-    transform: rotate(-45deg);
-    right: 16px;
-  }
-
-  &.bmpui-hidden {
-    display: none;
-  }
-
-  &-close-button {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    cursor: pointer;
-    z-index: 2;
-
-    span {
-      display: none;
-    }
-
-    &::before,
-    &::after {
-      content: '';
-      top: 4px;
-      left: 12px;
-      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-layout-max-width-400,
-&.bmpui-layout-max-width-600 {
-  .bmpui-info-panel {
-    left: 0;
-    max-width: 100%;
-    width: 100%;
-
-    &::after {
-      display: none;
-    }
-
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    max-height: 100%;
-    border-radius: 12px 12px 0 0;
-    overflow: auto;
-  }
-}
-
-&.bmpui-layout-max-width-400 {
-  .bmpui-info-panel {
-    border-radius: 0;
-    inset: 0;
-  }
-}

package/src/style/components/_metadata.scss

@@ -1,52 +0,0 @@
-.bmpui-metadata {
-  padding: 0;
-  color: var(--npo-player-textcolor);
-  height: 100%;
-  background: none;
-
-  .bmpui-container-wrapper {
-    position: relative;
-    display: grid;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    grid-template-columns: min-content auto min-content;
-    grid-template-rows: min-content min-content auto;
-    column-gap: 8px;
-    padding: 24px 18px;
-    grid-template-areas:
-      'back title nicam'
-      'back description nicam'
-      '.    .           nicam';
-  }
-
-  .bmpui-label-metadata-title {
-    font-family: var(--fontBold);
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19.2px;
-    gap: 0;
-    grid-area: title;
-  }
-
-  .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;
-    grid-area: description;
-    @include max-lines(4);
-  }
-
-  .bmpui-nicam {
-    grid-area: nicam;
-    height: 10%;
-  }
-
-  .bmpui-back-button {
-    grid-area: back;
-  }
-}

package/src/style/components/_nicam.scss

@@ -1,117 +0,0 @@
-.bmpui-nicam {
-    display: none;
-    width: 100%;
-    justify-content: flex-end;
-
-    .nicam-icon {
-        display: block;
-        height: 100%;
-        width: auto;
-        min-height: 25px;
-        aspect-ratio: 1 / 1;
-        margin-left: -1px; //according to the design spec icons must overlap by 1px
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-
-        &.nicam-icon-angst {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM40.7,75.5c0-1.6-.1-5.4.4-7,.6-1.8,5.3-7.3,6.2-6.8.4.2-.5,5.4,1,5.4,1.3,0,.9-5.5,2.3-5.5s1,5.5,2.3,5.5c1.6,0,.6-5.2,1-5.4.9-.5,5.6,5,6.2,6.8.5,1.6.4,5.4.4,7,0,1-4.7,10.4-3.4,11.1,3.5,1.8,8.8-8.3,8.8-10.4.1-2-1-8.3-2.6-10.3-2-2.4-9.4-6.4-9.2-7.3.1-.6,9.5,2.5,10.8,3.2,1.3.6,6.6,4.3,7,5.2.8,1.5,1.4,12.3,3.4,12.2,4.6-.1,3-11.6,1.1-14.4-1.5-2.1-7.4-5.3-9.3-6s-12.3-2-12.3-3c0-.9,12-.4,14.7-.9,2.1-.4,10.8-4.1,12.5-5.9,2.6-2.7,5-14.4.2-19.4C81,28.3,79,43.7,77.9,45.2c-1.2,1.5-7.7,6.1-9.5,6.4-1.2.2-13.9,2.1-14.2,1.1-.3-.9,11.3-3.7,14-5.2,3.6-2,5.3-13.7,4.7-16.9-.6-4.2-8.7-17.7-14.5-15.6-1.6.5,8.5,14.5,8.9,17,.3,1.4-.1,11.4-1.6,12.4-.6.4-12.4,6.3-12.8,5.7-.5-.9,7.7-6.7,7.7-10,0-6.7-7.1-16.3-10-16.3-2.8,0-10,9.6-10,16.3,0,3.3,8.2,9.1,7.7,10-.4.6-12.2-5.3-12.7-5.7-1.6-1-2-11-1.7-12.4.4-2.5,10.5-16.5,9-17-5.9-2.1-14,11.4-14.6,15.6-.6,3.2,1.1,14.9,4.7,16.9,2.7,1.5,14.2,4.3,14,5.2-.3,1-13-.9-14.1-1.1-1.9-.3-8.4-4.9-9.5-6.4-1.2-1.5-3.1-16.9-4.3-15.6-4.7,5.1-2.5,16.7.1,19.4,1.7,1.8,10.4,5.5,12.5,5.9,2.8.5,14.6,0,14.6.9.1,1-10.2,2.3-12.2,3-1.9.7-7.8,3.9-9.3,6-1.9,2.8-3.5,14.3,1.1,14.4,2.1.1,2.6-10.7,3.4-12.2.4-.9,5.7-4.6,7-5.2,1.3-.7,10.7-3.8,10.8-3.2.1.9-7.2,4.9-9.2,7.3-1.6,2-2.6,8.3-2.6,10.3.1,2.1,5.3,12.2,8.8,10.4C45.5,85.9,40.6,76.5,40.7,75.5Z'/></svg>");
-        }
-
-        &.nicam-icon-discriminatie {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM48.3,65.6c-3.6-6.7,1.5-8.3,1.2-10.4-.1-.9-4.9-1.1-8.3-3.1-3.5-2-3.6-8.8.7-11.4,5.8-3.5,8.9,6.1,10.4,11.3.6,2.3,3.2-2,7.3,1,7.5,5.3,5.7,24.1,2.8,31.5,11.8-3.2,21.9-15.6,22.5-24.7.8-9.3-5.6-6.8-5.2-10.1s10.2-17.9-.5-17.6c-10.2.2-3.9,12.3-3.8,16.5,0,2-2.9,2.2-4.9,2.8a18.669,18.669,0,0,0-.3-7.3c-1-3.6-7.1-2.5-6.7-6.9.4-4.2,10-17.1-1.2-18.2-12.7-1.3-2.6,14-3.5,18.5-.3,1.6-2.4,1.4-4.5,2.6-2.2-7.4-9.3-3.7-9.5-7.7-.2-4.1,6.6-17.1-4.2-16.6-11.7.6-1.2,14.3-.7,17.4s-5.8,1.4-7.3,8.4a45.09,45.09,0,0,0,.2,6.2c-1.7.4-4.9,3.3-5.3,1.5-1-4.4,5-19.4-5.7-17.4C11,34,22.8,45.8,23.4,50.5c.5,3.5-7.2.4-5.3,12.8,1.7,10.8,16.1,21.6,29.1,22.5C48.6,81.8,53,74.2,48.3,65.6Zm10,19.8c.3-3.7.5-10.1-1-9.9-1.3.1-4,6.8-6,10.3A53.742,53.742,0,0,0,58.3,85.4Z'/></g></svg>");
-        }
-
-        &.nicam-icon-geweld {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM51,78.4c-2.4.2-6.1-2.5-6.1-5.9a11.179,11.179,0,0,1,1.3-4.8,8.02,8.02,0,0,1-9.1-2.8,8.677,8.677,0,0,1-1.4-5,17.414,17.414,0,0,1-8.8-5.5c-2.7-3.1,1-6.1,1.8-4.9,3.9,5.7,14,9.5,17.9,8.4A3.641,3.641,0,0,0,49,55.8c.9-3-2.6-7.1-10.9-12.7a14.971,14.971,0,0,0-8.6-2.8c-7.9,0-13.2,6.9-13.2,15,0,10.8,10,14.3,15.3,12.5-2.1,3.4-.5,9.7,3.3,12.4C38.4,82.7,47.2,83.8,51,78.4Zm21.7,2.7s-1-8.9-1.4-11.6c6.4-3.4,12.1-6.7,12.1-6.7a3.191,3.191,0,0,0-.3-5.5s-6.5-3.4-13.5-6.8A170.571,170.571,0,0,0,80.7,36.1c1.9-2.6.9-7.1-4.1-6.4L59.8,32.2c-.1-5.8-.7-15-.7-15-.1-1.6-2.4-2.2-3.6-1-2,1.7-7.2,6.4-11.5,10.6-2.4-2.2-9.9-8.9-9.9-8.9a1.893,1.893,0,0,0-2.9,1.7l.1,13.7c0,1.8,2.3,1.2,2.5,0L35,24l7.1,5.8c1.4.8,2.4.7,3.9-.3l8.3-5.9L56,34.4a2.038,2.038,0,0,0,1.9,1.9l15.7-.1L65,49.8a1.829,1.829,0,0,0,.1,2.4l11.7,8.7-7.9,5.5a3.318,3.318,0,0,0-1.6,3l1.6,9.3-8.5-1a.741.741,0,0,0-1,.6c-.2.6,0,1.2.4,1.3l11,3.9C71.7,83.7,73,83,72.7,81.1ZM47.2,36.5c-3.7-4.3-9.2-1.2-13,1.7a27.2,27.2,0,0,1,7,3.1,40.207,40.207,0,0,1,5,4.2C48.8,43,50,39.8,47.2,36.5Zm6.7,23.6c3.9-2.9,8.8-7.7,5.3-12.6-2.7-3.8-6.9-3.8-11-.6,3,3,5,6.7,3.9,9.9A6.22,6.22,0,0,1,48,60.6a16.181,16.181,0,0,1-8.7-.2,4.448,4.448,0,0,0,.9,2C42.3,65.1,46.1,66.1,53.9,60.1Zm6.2,12.2c3-2.3,6.5-5.7,3.8-9.5s-6.4-1.5-9.4.8c-5.5,4.1-6.2,7.5-4.6,9.7C51.1,74.8,55.2,76.3,60.1,72.3Z'/></g></svg>");
-        }
-
-        &.nicam-icon-drugs_en_alcohol {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51Zm28,21.3a4.516,4.516,0,0,0,5.8-.5c1.3-1.3,3.5,2,7.5-1.3C53,66.8,63.5,52.6,66.4,50.4c3-2.4,11.1,5.8,13.1,3C82,50,67.8,39.2,67.8,37.1c0-1.8,2-3.8,3.1-3.8,2,.1,9.3,4.3,11.2,2.1,3-3.4-16.4-19.1-19.6-16.3-2.3,1.9,3.6,9.4,3.1,10.8a3.92,3.92,0,0,1-3.5,2.7c-1.9,0-15.1-8.8-17.3-7.2-2.4,1.7,5,9.7,4.1,12.1-1,2.6-14.7,16.1-16.4,19.4-2,3.8.2,5.2-1,7.1a5.128,5.128,0,0,0,.3,6.2c-4.1,4.9-6.4,9.7-5.8,10.3C26.4,81,30.8,77.9,35.4,72.3ZM37,58.2c-2-.6-.6-2.1,1.7-2.2,2.9-.2,6.7,1.6,7.6,4.1.7,1.6.1,3.8-1.5,2.5A19.477,19.477,0,0,0,37,58.2Zm7.4-7.5c-4.3-1.2-3.4-3,.8-2.9,7.1.4,10.2,5.2,8.7,7.4C52.5,57.3,49,52.1,44.4,50.7Zm7-7.8c-3.5-1.4-2.4-2.7,1.1-2.4,6.4.5,8,4.2,6.8,6C58.2,48.2,54.6,44.4,51.4,42.9Z'/></g></svg>");
-        }
-
-        &.nicam-icon-grof_taalgebruik {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51Zm23.1-.3c1.3-.2,9.1,7.4,11.6,6.3,2.6-1.3,3-12.7,4-13.8.6-.8,7.8-2.9,10.5-4.2,1-.6.8-1.8-.4-1.8-3,.4-11,2.1-12.2,3-1.5,1.1-2.4,9.8-3.7,10.7-1.1.6-10.1-8.8-12.8-7.5-3.4,1.6-3.3,15.1-6.8,16.2-6.8,2-3.5,12.1,3.3,8.2C28.7,65.2,28.9,51.1,30.5,50.7ZM46.7,30.1c.9-.1,4.3,1.8,5.7,2.7.7.5,1.5-.2.8-1.1-1.2-1.7-4.6-5-6.2-5-1.7,0-4.6,3.5-6,3.2-1-.2-2.5-6.7-4.3-7.5-2.6-1.1-12.4.4-10.8,6s6.1-1.8,8.9-1.3c1.6.3,2.8,7.4,4.8,8C41.7,35.6,45.6,30.2,46.7,30.1ZM59.3,72.9c2.7-.3,6.1,12.3,8.7,11.5,2-.7-1-9-.8-13.8.3-5.7,2.7-6.8,3.2-10.6.5-4.6-4-3.3-3.1-6.8.5-1.8,3.7-1.7,8.4-7.9,4-5.4,7-16.1,1.5-20.4-5.2-4-12.5-2.7-14.8,3.4,12.7,1.8,11.8,13.6,8.1,17.8-2.9,3.4-7.4,2.2-11.5-3.9-2.4,7.4,4.3,7,2.4,10.1-1.4,2.2-4-.1-7.2,3.2-6.1,6.5-2.3,31.4,2.3,32.6C59.1,88.7,56.5,73.3,59.3,72.9Z'/></g></svg>");
-        }
-
-        &.nicam-icon-seks {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51a43.6,43.6,0,0,1,87.2,0C94.4,75.1,74.8,94.6,51,94.6A43.832,43.832,0,0,1,7.4,51Zm8.7-2.6a1.223,1.223,0,0,0,1.8.3c.4-.2.6-1.2.3-2,.4.4,1.3.8,1.8.3.7-.5.8-3.2.2-4.8-1-2.1-3.5-1.3-3.3,1.3-1.2-.9-3,1.2-2,3.1-1.2-.9-2.7,1.5-1.2,3.4.9,1.1,2.1,1,2.5.5A2,2,0,0,0,16.1,48.4ZM34.7,75c-2.6-4-6,.6-10.5-6.4C20,62.4,28.8,56.4,28,51.9c-.5-3.9-3.9-4.2-7-3-2.8,1.2-5.3,4.2-5.1,7.5.3,3.6,1.3,7.1,6.3,14.8,5.1,8.1,8.4,10.4,10.7,9.8C35.6,80.4,36,76.9,34.7,75ZM26.9,38.4a2.68,2.68,0,0,0-5.2.7c-.3,2.4,1,7.1,2.3,7.3C25.6,46.6,28,41.2,26.9,38.4ZM39.1,59.9c-.7-.4-1.6.2-2,1a2.84,2.84,0,0,0-.6-2.6,1.515,1.515,0,0,0-2,.7,2.552,2.552,0,0,0-.3-2.6c-.5-.3-1.9-.2-2.7,1.4-1.4,2.7.4,5.4,1.9,4.1-.8,2.4,1.5,4.7,2.7,3.3.1,3.2,3,3.7,3.8.8C40.4,63.9,40.1,60.4,39.1,59.9Zm8.3-7.8c-.4-5.1-9-8.2-7-16.4,2.8-10.7,6.8-6.4,8.4-11.6.8-2.5-.1-5.9-3.7-6.4-2.6-.4-5.8,5.1-8.8,15.5-3,10.1-3.5,13.9-2.7,17.7.7,3.6,5.1,6.8,8.3,7.1C45.3,58.3,47.9,56.5,47.4,52.1Zm-3.7,8.1c-1.4.2-2.5,6.3-2.1,9,.6,3.4,4.7,4.1,5.9.9C48.7,66.7,45.5,60,43.7,60.2Zm24.8-9.3c.8-3.8.2-7.6-2.7-17.7-3-10.4-6.2-15.9-8.8-15.5-3.7.5-4.4,3.9-3.7,6.4,1.6,5.2,5.5.9,8.3,11.6,2.1,8.2-6.5,11.3-7,16.4-.4,4.4,2.2,6.2,5.6,5.9C63.4,57.7,67.8,54.5,68.5,50.9ZM60.4,69.2c.5-2.7-.6-8.8-2.1-9-1.8-.2-4.9,6.5-3.7,9.9C55.8,73.3,59.8,72.6,60.4,69.2Zm5.5-4c1.2,1.4,3.6-.9,2.7-3.3,1.5,1.3,3.3-1.4,1.9-4.1-.8-1.6-2.2-1.7-2.6-1.4a2.8,2.8,0,0,0-.4,2.6,1.469,1.469,0,0,0-2-.7,3.155,3.155,0,0,0-.6,2.6c-.4-.8-1.3-1.4-1.9-1-1,.5-1.4,4-.9,6.1C62.9,68.9,65.9,68.4,65.9,65.2Zm14,6c4.9-7.7,6-11.2,6.3-14.8.2-3.3-2.4-6.3-5.2-7.5-3.1-1.2-6.3-.9-6.9,3-.8,4.5,7.9,10.5,3.8,16.7-4.6,7-8,2.4-10.6,6.4-1.3,1.9-.8,5.4,1.8,6C71.4,81.6,74.7,79.3,79.9,71.2Zm.4-32.1a2.622,2.622,0,0,0-5.1-.7c-1.2,2.8,1.2,8.2,2.9,8C79.3,46.2,80.6,41.5,80.3,39.1Zm8,10.9c1.5-1.9.1-4.3-1.2-3.4,1.1-1.9-.8-4-2-3.1.3-2.6-2.3-3.4-3.2-1.3-.7,1.6-.6,4.3.2,4.8.5.5,1.3.1,1.7-.3a2.367,2.367,0,0,0,.3,2,1.223,1.223,0,0,0,1.8-.3,1.775,1.775,0,0,0,0,2.1A1.586,1.586,0,0,0,88.3,50Z'/></g></svg>");
-        }
-
-        &.nicam-icon-6 {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM43.3,78H58.7a2.568,2.568,0,0,0,2-.8l4-4a2.568,2.568,0,0,0,.8-2V52.4a2.438,2.438,0,0,0-.8-2l-4.1-3.9a2.732,2.732,0,0,0-1.9-.8H51.5a2.364,2.364,0,0,0-1.9.8l-2.5,2.2V33.2h7.8v6.9H65.5V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H43.2a2.438,2.438,0,0,0-2,.8l-3.9,4.1a2.732,2.732,0,0,0-.8,1.9V71.1a2.973,2.973,0,0,0,.8,2l4,4.1A2.438,2.438,0,0,0,43.3,78Zm3.8-23.3H55V68.9H47.1Z'/></svg>");
-        }
-
-        &.nicam-icon-9 {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.638,43.638,0,0,1,7.4,51ZM43.3,78H58.8a2.438,2.438,0,0,0,2-.8l3.9-4.1a2.732,2.732,0,0,0,.8-1.9V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H43.3a2.568,2.568,0,0,0-2,.8l-4,4a2.568,2.568,0,0,0-.8,2V49.6a2.438,2.438,0,0,0,.8,2l4.1,3.9a2.732,2.732,0,0,0,1.9.8h7.2a2.364,2.364,0,0,0,1.9-.8l2.5-2.2V68.8H47.1V61.9H36.5v9.2a2.973,2.973,0,0,0,.8,2l4,4.1A2.438,2.438,0,0,0,43.3,78ZM47,33.1h7.9V47.3H47Z'/></g></svg>");
-        }
-
-        &.nicam-icon-12 {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.447,43.447,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm37.1,0V68.5H58.5v-5L76.1,49.3a2.358,2.358,0,0,0,.9-2V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H54.6a2.438,2.438,0,0,0-2,.8l-4,4.1a2.973,2.973,0,0,0-.8,2v9.5H58.6V33.3h7.8V43.7L48.7,57.8a2.358,2.358,0,0,0-.9,2V78Z'/></svg>");
-        }
-
-        &.nicam-icon-14 {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm34.7,0V66.7h3.3V57.8H74.5V24H60.7a1.8,1.8,0,0,0-1.8,1.3L46.3,57a4.333,4.333,0,0,0-.4,1.9v7.8H64V78ZM64,35V57.7H54.8Z'/></svg>");
-        }
-
-        &.nicam-icon-16 {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm14.6,0H69.8a2.568,2.568,0,0,0,2-.8l4-4a2.568,2.568,0,0,0,.8-2V52.4a2.438,2.438,0,0,0-.8-2l-4-3.9a2.973,2.973,0,0,0-2-.8H62.6a2.732,2.732,0,0,0-1.9.8l-2.5,2.3V33.2H66v6.9H76.6V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H54.3a2.438,2.438,0,0,0-2,.8L48.4,29a2.732,2.732,0,0,0-.8,1.9V71.1a2.973,2.973,0,0,0,.8,2l4,4.1A2.438,2.438,0,0,0,54.4,78Zm3.8-23.3h7.9V68.9H58.2Z'/></g></svg>");
-        }
-
-        &.nicam-icon-18 {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm14.6,0H69.8a2.568,2.568,0,0,0,2-.8l4-4a2.568,2.568,0,0,0,.8-2V55.8a2.438,2.438,0,0,0-.8-2L72,50.1l3.8-3.7a2.438,2.438,0,0,0,.8-2V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H54.3a2.438,2.438,0,0,0-2,.8L48.4,29a2.732,2.732,0,0,0-.8,1.9V44.5a2.438,2.438,0,0,0,.8,2l3.8,3.7-3.8,3.7a2.438,2.438,0,0,0-.8,2V71.3a2.438,2.438,0,0,0,.8,2l4,3.9A2.973,2.973,0,0,0,54.4,78Zm3.8-44.8H66V45.7H58.2Zm0,21.5h7.9V68.9H58.2Z'/></svg>");
-        }
-
-        &.nicam-icon-all {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM35.5,78V63.5h6.8V78H52.4V30.8a2.731,2.731,0,0,0-.8-1.9l-4-4.2a2.439,2.439,0,0,0-2-.8H32.3a2.438,2.438,0,0,0-2,.8l-4,4.1a2.973,2.973,0,0,0-.8,2V78Zm0-45h6.8V54.4H35.5ZM77.9,78V69.5h-9V23.9H58.8V78Z'/></g></svg>");
-        }
-
-        &.nicam-icon-all_tous {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'>%<g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM30,78V59.4h3.2V55.1H22.3v4.3h3.4V78Zm1.8-29.1V43.6H43.4v5.3h7.9V28.3a2.035,2.035,0,0,0-.6-1.5l-3.2-3.4a1.717,1.717,0,0,0-1.5-.6H29.1a2.035,2.035,0,0,0-1.5.6l-3.1,3.3a2.2,2.2,0,0,0-.6,1.5V48.9Zm0-18.9H43.4v6.5H31.8Zm6.9,48h4.7a2.035,2.035,0,0,0,1.5-.6l1.8-1.6a2.035,2.035,0,0,0,.6-1.5V58.8a1.826,1.826,0,0,0-.6-1.5l-1.8-1.6a2.035,2.035,0,0,0-1.5-.6H38.7a2.035,2.035,0,0,0-1.5.6l-1.6,1.6a2.035,2.035,0,0,0-.6,1.5V74.3a2.035,2.035,0,0,0,.6,1.5l1.6,1.6A1.826,1.826,0,0,0,38.7,78Zm.6-18.6H43V73.7H39.3ZM54.2,78H59a1.826,1.826,0,0,0,1.5-.6l1.6-1.6a2.035,2.035,0,0,0,.6-1.5V55.1H58.5V73.7H54.9V55.1H50.5V74.3a2.035,2.035,0,0,0,.6,1.5l1.6,1.6A1.826,1.826,0,0,0,54.2,78ZM78,48.9V42.3H65.8V22.8H57.9V48.9ZM69.4,78h4.8a1.826,1.826,0,0,0,1.5-.6l1.7-1.6a1.826,1.826,0,0,0,.6-1.5V68.2a1.826,1.826,0,0,0-.6-1.5L75.6,65a1.826,1.826,0,0,0-1.5-.6h-4v-5h3.6v2.1H78V58.8a1.826,1.826,0,0,0-.6-1.5l-1.7-1.6a1.826,1.826,0,0,0-1.5-.6H69.4a2.035,2.035,0,0,0-1.5.6l-1.6,1.6a2.035,2.035,0,0,0-.6,1.5v6a2.035,2.035,0,0,0,.6,1.5L67.9,68a2.035,2.035,0,0,0,1.5.6h4.3v5.1H70.1V71.4H65.7v2.9a2.035,2.035,0,0,0,.6,1.5l1.6,1.6A1.826,1.826,0,0,0,69.4,78Z'/></g></svg>");
-        }
-
-        &.nicam-icon-tous {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.489,43.489,0,0,1,7.4,51ZM26.1,67.8V39.3h4V33.9H16.5v5.4h4.1V67.8Zm10.7,0h6.3a2.035,2.035,0,0,0,1.5-.6l2.5-2.5a2.035,2.035,0,0,0,.6-1.5V38.4a1.826,1.826,0,0,0-.6-1.5l-2.5-2.4a1.826,1.826,0,0,0-1.5-.6H36.8a2.035,2.035,0,0,0-1.5.6l-2.4,2.4a2.035,2.035,0,0,0-.6,1.5V63.2a2.035,2.035,0,0,0,.6,1.5l2.4,2.5A2.035,2.035,0,0,0,36.8,67.8Zm.9-28.5h4.5v23H37.7ZM56.2,67.8h6.4a2.035,2.035,0,0,0,1.5-.6l2.4-2.5a2.035,2.035,0,0,0,.6-1.5V33.9H61.7V62.3H57.1V33.9H51.7V63.2a2.035,2.035,0,0,0,.6,1.5l2.4,2.5A2.035,2.035,0,0,0,56.2,67.8Zm19.1,0h6.3a2.035,2.035,0,0,0,1.5-.6l2.5-2.5a2.035,2.035,0,0,0,.6-1.5V52.6a1.826,1.826,0,0,0-.6-1.5L83,48.7a2.035,2.035,0,0,0-1.5-.6H76.2V39.3h4.4v4.3h5.6V38.4a1.826,1.826,0,0,0-.6-1.5l-2.5-2.4a1.826,1.826,0,0,0-1.5-.6H75.3a2.035,2.035,0,0,0-1.5.6l-2.4,2.4a2.035,2.035,0,0,0-.6,1.5V49.8l3.6,3.7h6.2v8.8H76.1V57.9H70.8v5.3a2.035,2.035,0,0,0,.6,1.5l2.4,2.5A2.035,2.035,0,0,0,75.3,67.8Z'/></g></svg>");
-        }
-
-        &.nicam-icon-not_yet_rated {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'><g><path d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/><path d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM82.2,66.9,35.1,19.7A35.793,35.793,0,0,0,19.7,35.1L66.8,82.2A35.552,35.552,0,0,0,82.2,66.9Z'/></g></svg>");
-        }
-    }
-}
-
-// show nicam on initial state and after UI hide
-&.bmpui-player-state-prepared,
-&.bmpui-player-state-prepared.bmpui-layout-max-width-400,
-&.bmpui-player-state-prepared.bmpui-layout-max-width-600,
-&.bmpui-player-state-prepared.bmpui-layout-max-width-800,
-&.bmpui-player-state-prepared.bmpui-layout-max-width-1200,
-&.bmpui-show-nicam:not(.audio-only) {
-  .bmpui-metadata,
-  .bmpui-metadata.bmpui-title-bar {
-    display: block !important;
-    opacity: 1;
-    visibility: visible;
-    background: none;
-
-    &::before {
-        display: none;
-    }
-
-    .bmpui-label-metadata-title,
-    .bmpui-label-metadata-description {
-      opacity: 0;
-    }
-
-    .bmpui-nicam {
-      display: flex;
-    }
-  }
-
-  &.bmpui-panel-shown.bmpui-layout-max-width-400,
-  &.bmpui-panel-shown.bmpui-layout-max-width-600 {
-    .bmpui-metadata {
-        padding-top: 40px;
-    }
-  }
-}

package/src/style/components/_playnext.scss

@@ -1,72 +0,0 @@
-.bmpui-overlay-playnext {
-    display: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.07);
-    z-index: z-index(playnext-overlay);
-    pointer-events: none;
-
-    &.show { 
-        display: block;
-    }
-
-    .bmpui-container-wrapper {
-        position: relative;
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-        padding: 16px;
-        pointer-events: none;
-
-        .bmpui-ui-textbutton {
-            margin-left: 8px;
-            pointer-events: all;
-        }
-
-        .ui-playNextButton {
-            background-color: var(--npo-player-graycolor-light);
-            white-space: nowrap;
-            overflow: hidden;
-            position: relative;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 0;
-                height: 100%;
-                width: 0;
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
-                background: var(--npo-player-textcolor);
-                animation-name: widthAnimation;
-                animation-timing-function: linear;
-                animation-duration: var(--animation-duration);
-                animation-fill-mode: forwards;
-                animation-delay: 0s;
-
-                @keyframes widthAnimation {
-                    from {
-                        width: 0;
-                    }
-                    to {
-                        width: 100%;
-                    }
-                }
-            }
-
-            .bmpui-label {
-                color: var(--npo-player-graycolor-dark);
-            }
-
-            &:focus-visible {
-                @include focusStyle();
-                outline-color: var(--npo-player-primarycolor);
-            }
-        }
-    }
-}

package/src/style/components/_poster.scss

@@ -1,3 +0,0 @@
-.bitmovinplayer-poster.audio-only {
-  display: block !important;
-}

package/src/style/components/_replay.scss

@@ -1,25 +0,0 @@
-&.bmpui-player-state-finished,
-&.bmpui-player-state-replay {
-  .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 {
-        mask-image: var(--npo-player-icon-replay);
-      }
-    }
-  }
-
-  .bmpui-ui-playbacktogglebutton.bmpui-off .bmpui-label {
-    mask-image: var(--npo-player-icon-replay);
-  }
-}

package/src/style/components/_seekbar.scss

@@ -1,114 +0,0 @@
-$seekbar-height: 4px;
-$seekbar-border-radius: 2px;
-
-.bmpui-ui-seekbar {
-    position: relative;
-    cursor: default;
-
-    &:focus-visible {
-        @include focusStyle(2px);
-        border-radius: 2px;
-    }
-
-    .bmpui-seekbar {
-        cursor: pointer;
-        height: $seekbar-height;
-        overflow: hidden;
-        border-radius: $seekbar-border-radius;
-        margin-top: 5px;
-
-        &::after {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 20px;
-            top: -4px;
-        }
-
-        .bmpui-seekbar-marker {
-            background-color: var(--npo-player-seekbar-marker);
-        }
-
-        .bmpui-seekbar-backdrop {
-            background-color: var(--npo-player-seekbar-background);
-            opacity: 0.75;
-        }
-        
-
-        .bmpui-npo-livestream-marker{
-            background-color: var(--npo-player-seekbar-playbackposition-background);
-            border-right: var(--npo-player-secondarycolor) 3px solid;
-            pointer-events: none;
-        }
-
-
-        .bmpui-seekbar-playbackposition {
-            background: var(--npo-player-seekbar-playbackposition-background);
-        }
-
-        .bmpui-seekbar-seekposition {
-            display: none;
-        }
-
-        .bmpui-seekbar-playbackposition,
-        .bmpui-seekbar-label,
-        .bmpui-seekbar-backdrop,
-        .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-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-bufferlevel {
-            background-color: var(--npo-player-seekbar-bufferlevel-background);
-          }
-
-        .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 {
-            background-color: var(--npo-player-seekbar-marker);
-            border-color: currentColor;
-            width: 16px;
-            height: 16px;
-
-            &:after {
-                content: '';
-                position: absolute;
-                border-radius: 50%;
-                width: 38px;
-                height: 38px;
-                left: -14px;
-                top: -14px;
-                opacity: 0.3;
-                background-color: var(--npo-player-white);
-                transform: scale(0);
-                transition: transform linear 0.1s;
-            }
-
-            &:hover:after {
-                transform: scale(1);
-            }
-        }
-    }
-}