@npo/player 1.29.0 → 2.0.0-beta.0

package/src/style/components/_seekbarthumbnail.scss

@@ -1,61 +0,0 @@
-.bmpui-ui-seekbar-label {
-  margin-bottom: 15px;
-  bottom: 0;
-
-  .bmpui-seekbar-label-caret {
-    display: none;
-  }
-
-  .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);
-              box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);
-              margin-bottom: 4px;
-              display: none;
-              background-repeat: unset;
-
-              &[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/style/components/_settingspanel.scss

@@ -1,290 +0,0 @@
-$settings-panel-font-size: 16px;
-$settings-panel-line-height: 19px;
-
-.bmpui-ui-settings-panel {
-    display: block;
-    padding: 0;
-    height: auto;
-    min-width: 270px;
-    z-index: z-index(settings-panel);
-    filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.35));
-    border-radius: 12px;
-    background-color: var(--npo-player-secondarycolor);
-    color: var(--npo-player-textcolor);
-    font-family: var(--fontRegular);
-    overflow: visible;
-    bottom: 75px;
-
-    &::after {
-        content: '';
-        position: absolute;
-        background: var(--npo-player-secondarycolor);
-        border-radius: 6px;
-        width: 32px;
-        height: 32px;
-        bottom: -10px;
-        transform: rotate(-45deg);
-        right: 16px;
-    }
-
-    .bmpui-container-wrapper {
-        position: relative;
-        z-index: 1;
-    }
-
-    label {
-        font-size: $settings-panel-font-size;
-        line-height: $settings-panel-line-height;
-        opacity: 0.75;
-    }
-
-    .bmpui-setting-header {
-        font-weight: 700;
-        font-size: $settings-panel-font-size;
-        line-height: $settings-panel-line-height;
-        font-family: var(--fontBold);
-    }
-
-    .bmpui-listbox-pager-button {
-        max-width: 100%;
-        overflow: hidden;
-    }
-
-    .bmpui-ui-settingspanelpageopenbutton:focus-visible {
-        box-shadow: none;
-
-        .bmpui-ui-label {
-            @include focusStyle(-2px);
-        }
-    }
-
-    .bmpui-ui-settings-panel-page.bmpui-main-panel {
-        margin: 0;
-
-        > .bmpui-container-wrapper {
-            display: flex;
-            flex-direction: column;
-            padding: 52px 24px 16px;
-            gap: 10px;
-
-            &::before {
-                content: '';
-                opacity: 0.1;
-                height: 1px;
-                left: 0;
-                width: 100%;
-                position: absolute;
-                background-color: currentColor;
-                top: 36px;
-            }
-
-            label {
-                font-size: $settings-panel-font-size;
-                line-height: $settings-panel-line-height;
-            }
-
-            .bmpui-ui-selectbox {
-                margin-left: 0;
-                font-family: var(--fontRegular);
-                font-style: normal;
-                font-size: $settings-panel-font-size;
-                line-height: $settings-panel-line-height;
-                text-align: right;
-            }
-
-            .bmpui-listbox-pager-button {
-                background: none;
-                max-height: unset;
-                padding: unset;
-                vertical-align: unset;
-                margin-left: 0;
-                font-family: var(--fontRegular);
-                font-size: $settings-panel-font-size;
-                line-height: $settings-panel-line-height;
-                text-align: right;
-
-                span {
-                    display: inline-block;
-                    padding: 0 8px;
-                }
-
-                ::after {
-                    content: '';
-                    width: 8px;
-                    height: 8px;
-                    border: solid 0.17em var(--npo-player-textcolor);
-                    border-width: 0 0.17em 0.17em 0;
-                    display: inline-block;
-                    padding: 0;
-                    margin-left: 8px;
-                    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: 0;
-                gap: 8px;
-                justify-content: space-between;
-            }
-        }
-    }
-
-    .bmpui-ui-settings-panel-page.bmpui-listbox-panel {
-        margin: 0;
-
-        > .bmpui-container-wrapper {
-            display: flex;
-            flex-direction: column;
-            padding: 24px 24px 16px;
-        }
-    }
-
-    .bmpui-ui-settingspanelpagebackbutton {
-        width: auto;
-        padding: 0;
-        text-align: left;
-
-        &:focus-visible {
-            @include focusStyle(-2px);
-            border-radius: 2px;
-        }
-    }
-
-    label {
-        font-size: $settings-panel-font-size;
-        line-height: $settings-panel-line-height;
-    }
-
-    .bmpui-ui-listbox-button {
-        span {
-            text-align: left;
-            font-size: $settings-panel-font-size;
-            line-height: $settings-panel-line-height;
-        }
-
-        &.bmpui-selected {
-            background: unset;
-
-            span {
-                color: var(--npo-player-primarycolor);
-                font-weight: 700;
-                width: 100%;
-
-                &::after {
-                    position: relative;
-                    float: right;
-                    width: 24px;
-                    content: '✔';
-                }
-            }
-        }
-
-        &:hover {
-            background-color: transparent;
-        }
-
-        &:focus-visible {
-            box-shadow: none;
-
-            .bmpui-label {
-                @include focusStyle(2px);
-                border-radius: 2px;
-            }
-        }
-    }
-
-    .bmpui-ui-settings-panel-item {
-        order: 2;
-        padding: 0;
-
-        > .bmpui-container-wrapper > .bmpui-ui-listbox {
-            display: flex;
-            flex-direction: column;
-            padding: 0px;
-            gap: 8px;
-        }
-    }
-
-    .bmpui-settings-back-button {
-        display: table-header-group;
-        font-family: var(--fontBold);
-        order: 1;
-        font-style: normal;
-        font-weight: 700;
-        font-size: $settings-panel-font-size;
-        line-height: $settings-panel-line-height;
-        color: var(--npo-player-textcolor);
-
-        .bmpui-label {
-            display: flex;
-            align-items: center;
-            width: 100%;
-
-            &::before {
-                display: block;
-                position: relative;
-                top: auto;
-                margin: 0 8px;
-                border-bottom: 0.17em solid var(--npo-player-textcolor);
-                border-left: 0.17em solid var(--npo-player-textcolor);
-                width: 0.5em;
-                height: 0.5em;
-            }
-        }
-    }
-
-    .bmpui-ui-settingstogglebutton {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        width: 24px;
-        height: 24px;
-        padding: 0;
-
-        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-panel-shown {
-    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom.bmpui-hidden,
-    .bmpui-ui-titlebar.bmpui-metadata.bmpui-hidden {
-        opacity: 1;
-    }
-
-    &.bmpui-layout-max-width-400,
-    &.bmpui-layout-max-width-600 {
-        .bmpui-ui-titlebar.bmpui-titlebar-small.bmpui-hidden {
-            opacity: 1;
-        }
-    }
-}

package/src/style/components/_subtitles.scss

@@ -1,78 +0,0 @@
-.bmpui-ui-subtitle-overlay {
-    p {
-        display: inline-block;
-    }
-
-    .bmpui-container-wrapper {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-
-    .bmpui-subtitle-region-container {
-        position: static !important;
-        display: block;
-        width: 100%;
-        height: 100%;
-
-        .bmpui-ui-subtitle-label {
-            position: absolute;
-            overflow-wrap: break-word;
-            overflow: hidden;
-            writing-mode: horizontal-tb;
-            text-align: center !important;
-            width: 100% !important;
-            inset: none !important;
-            display: block !important;
-            bottom: 16px !important;
-            left: 0 !important;
-            right: 0!important;
-            top: auto !important;
-            font-weight: 400;
-            padding: 0 16px;
-            line-height: 1.2;
-            font-size: 12px;
-
-            @container (min-width: 400px) {
-                font-size: 16px;
-            }
-
-            @container (min-width: 600px) {
-                font-size: 20px;
-            }
-
-            @container (min-width: 800px) {
-                font-size: 26px;
-            }
-
-            @container (min-width: 1200px) {
-                font-size: 32px;
-                bottom: 32px !important;
-            }
-
-            span {
-                background-color: rgba(0, 0, 0, 0.6);
-            }
-        }
-    }
-
-    [style="color: green"] {
-        color: lime !important;
-    }
-
-    .green {
-        color: lime;
-    }
-
-    .cyan {
-        color: cyan;
-    }
-
-    .white {
-        color: white;
-    }
-
-    .yellow {
-        color: yellow;
-    }
-}

package/src/style/components/_textbuttons.scss

@@ -1,82 +0,0 @@
-.bmpui-controlbar-textbuttons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0px 16px 109px 0px;
-    gap: 24px;
-
-    position: absolute;
-    width: auto;
-    height: auto;
-    right: 0px;
-    bottom: 0px;
-    pointer-events: none;
-    z-index: 3;
-}
-
-.bmpui-ui-textbutton {
-    padding: 8px 12px;
-    background: rgba(3, 14, 30, 0.6);
-    border-radius: 6px;
-    height: 32px;
-    font-weight: 400;
-    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.45));
-
-    .bmpui-label {
-        position: relative;
-        display: block;
-        font-family: var(--fontBold);
-        font-weight: 400;
-        font-size: 12px;
-        color: #ffffff;
-    }
-
-    &-icon {
-        mask-repeat: no-repeat;
-        mask-position: center;
-        background-color: currentColor;
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        vertical-align: text-bottom;
-        margin-right: 5px;
-
-
-        &-play {
-            mask-image: var(--npo-player-icon-play);
-        }
-    }
-
-    &:focus-visible {
-        @include focusStyle();
-    }
-}
-
-.ui-skipchapterbutton.force-visible-skip-button {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: all;
-    transition: opacity 0.4s ease-out;
-}
-
-.ui-skipchapterbutton.force-visible-skip-button.fading-in {
-    opacity: 0;
-}
-
-.ui-skipchapterbutton.force-visible-skip-button.fading-out {
-    opacity: 0;
-}
-
-.bmpui-controlbar-textbuttons.force-visible-container {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.4s ease-out;
-}
-
-.bmpui-controlbar-textbuttons.force-visible-container.fading-in {
-    opacity: 0;
-}
-
-.bmpui-controlbar-textbuttons.force-visible-container.fading-out {
-    opacity: 0;
-}

package/src/style/components/_volumeslider.scss

@@ -1,94 +0,0 @@
-.bmpui-ui-controlbar .bmpui-controlbar-bottom > .bmpui-container-wrapper .bmpui-ui-volumeslider {
-    width: 160px;
-    margin: 11px 2px 0 0;
-
-    &:focus-visible {
-        @include focusStyle(2px);
-        border-radius: 2px;
-    }
-
-    .bmpui-seekbar-backdrop,
-    .bmpui-seekbar-seekposition,
-    .bmpui-seekbar-playbackposition{
-        border-radius: 5px;
-    }
-
-    .bmpui-seekbar-playbackposition {
-        background-color: var(--npo-player-textcolor);
-    }
-
-    .bmpui-seekbar-playbackposition-marker {
-        display: none;
-        background-color: var(--npo-player-textcolor);
-        border-color: var(--npo-player-textcolor);
-        width: 16px;
-        height: 16px;
-    }
-
-    &:hover {
-        .bmpui-seekbar-playbackposition-marker {
-            display: block;
-        }
-    }
-}
-
-// vertical slider in topbar
-&.bmpui-audio,
-&.bmpui-vertical-video,
-.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);
-        }
-    }
-}

package/src/style/components/audio/_bottombar.scss

@@ -1,54 +0,0 @@
-.bmpui-ui-controlbar {
-  background: none;
-
-  &.bmpui-ui-controlbar-bottom {
-    height: auto;
-    padding: 0 $player-spacing  $player-spacing $player-spacing-left !important;
-
-    >.bmpui-container-wrapper {
-      display: flex;
-      width: 100%;
-    }
-
-    .bmpui-ui-container.bmpui-controlbar-top {
-      width: 100%;
-    }
-
-    .bmpui-ui-controlbar {
-      background: none;
-      padding: 0;
-      position: relative;
-    }
-
-    .bmpui-controlbar-bottom {
-      padding: 0 !important;
-
-      .bmpui-container-wrapper {
-        margin: 0 !important;
-      }
-    }
-
-    &.bmpui-hidden {
-      button {
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-&.bmpui-layout-max-width-400 {
-  .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
-    padding: 0 20px 10px !important;
-  }
-}
-
-&.bmpui-layout-max-width-400,
-&.bmpui-layout-max-width-600 {
-  .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom,
-  .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom .bmpui-ui-container.bmpui-controlbar-bottom,
-  .bmpui-ui-container.bmpui-controlbar-bottom {
-    display: block;
-    opacity: 1;
-    visibility: visible;
-  }
-}

package/src/style/components/audio/_buffering.scss

@@ -1,8 +0,0 @@
-// not used right now
-.bmpui-ui-buffering-overlay {
-  width: 64px;
-  height: 64px;
-  top: $player-spacing;
-  margin-top: $player-spacing-inner;
-  left: $player-spacing-left;
-}

package/src/style/components/audio/_errors.scss

@@ -1,13 +0,0 @@
-.bmpui-ui-errormessage-overlay {
-  background-color: var(--npo-audio-player-background-color);
-  z-index: z-index(error-message-overlay);
-
-  &::before {
-    display: none;
-  }
-
-  .bmpui-ui-errormessage-label {
-    text-shadow: none;
-    color: var(--npo-audio-player-text-color);
-  }
-}