@npo/player 1.26.0 → 1.27.0

package/src/style/components/_settingspanel.scss

@@ -6,7 +6,7 @@ $settings-panel-line-height: 19px;
     padding: 0;
     height: auto;
     min-width: 270px;
-    z-index: 100;
+    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);
@@ -35,7 +35,7 @@ $settings-panel-line-height: 19px;
     label {
         font-size: $settings-panel-font-size;
         line-height: $settings-panel-line-height;
-        opacity: .75;
+        opacity: 0.75;
     }
 
     .bmpui-setting-header {
@@ -144,94 +144,49 @@ $settings-panel-line-height: 19px;
             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-settingspanelpagebackbutton {
+        width: auto;
+        padding: 0;
+        text-align: left;
 
-            .bmpui-ui-listbox-button span {
-                text-align: left;
-                font-size: $settings-panel-font-size;
-                line-height: $settings-panel-line-height;
-            }
+        &:focus-visible {
+            @include focusStyle(-2px);
+            border-radius: 2px;
+        }
+    }
 
-            .bmpui-ui-listbox .bmpui-ui-listbox-button.bmpui-selected {
-                background: unset;
+    label {
+        font-size: $settings-panel-font-size;
+        line-height: $settings-panel-line-height;
+    }
 
-                span {
-                    color: var(--npo-player-primarycolor);
-                    font-weight: 700;
-                    width: 100%;
-
-                    &::after {
-                        position: relative;
-                        float: right;
-                        width: 24px;
-                        content: '✔';
-                    }
-                }
-            }
-            .bmpui-ui-settings-panel-item {
-                order: 2;
-                padding: 0;
+    .bmpui-ui-listbox-button {
+        span {
+            text-align: left;
+            font-size: $settings-panel-font-size;
+            line-height: $settings-panel-line-height;
+        }
 
-                > .bmpui-container-wrapper {
-                    > label {
-                        display: none;
-                    }
-
-                    > .bmpui-ui-listbox {
-                        display: flex;
-                        flex-direction: column;
-                        padding: 0px;
-                        gap: 8px;
-                    }
-                }
-            }
+        &.bmpui-selected {
+            background: unset;
 
-            .bmpui-settings-back-button {
-                display: table-header-group;
-                font-family: var(--fontBold);
-                order: 1;
-                font-style: normal;
+            span {
+                color: var(--npo-player-primarycolor);
                 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;
-                    }
+                width: 100%;
+
+                &::after {
+                    position: relative;
+                    float: right;
+                    width: 24px;
+                    content: '✔';
                 }
             }
         }
-    }
 
-    .bmpui-ui-listbox .bmpui-ui-listbox-button {
         &:hover {
             background-color: transparent;
         }
@@ -246,6 +201,46 @@ $settings-panel-line-height: 19px;
         }
     }
 
+    .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;

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

@@ -1,6 +1,6 @@
 .bmpui-ui-errormessage-overlay {
   background-color: var(--npo-audio-player-background-color);
-  z-index: 100;
+  z-index: z-index(error-message-overlay);
 
   &::before {
     display: none;

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

@@ -2,23 +2,29 @@
   padding: 0 !important;
   display: block !important;
 
+  .bmpui-container-wrapper {
+    aspect-ratio: unset;
+  }
+
   .bmpui-label-metadata-title {
-    padding: $player-spacing 40px 0 $player-spacing-left;
+    padding: 0 40px 0 $player-spacing-left;
     text-shadow: none;
     font-size: 16px;
     line-height: 20.83px;
     margin-left: 79px;
     margin-top: $player-spacing-inner;
+    @include max-lines(3)
+  }
 
-    // Max 3 lines
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .bmpui-label-metadata-description {
+    opacity: 1;
+    text-shadow: none;
+    color: currentColor;
+    padding-left: 160px;
+    margin-left: 79px;
+    @include max-lines(2)
   }
 
-  .bmpui-label-metadata-description,
   .bmpui-nicam {
     display: none;
   }

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

@@ -9,6 +9,7 @@
   border-radius: 50%;
   padding: 0;
   background: var(--npo-player-iconcolor);
+  z-index: z-index(hugeplayback-toggle-button);
 
   &::before {
     content: '';

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

@@ -3,6 +3,11 @@
   background: none;
   height: auto;
   padding-left: $player-spacing-left;
+  background: none;
+
+  &::before {
+    display: none;
+  }
 }
 
 .bmpui-container-wrapper {
@@ -10,11 +15,14 @@
 }
 
 &.bmpui-player-state-prepared {
-  &.bmpui-controls-shown {
+  .bmpui-metadata .bmpui-label-metadata-title {
+    opacity: 1;
+  }
 
+  &.bmpui-controls-shown {
     .bmpui-ui-titlebar,
     .bmpui-ui-controlbar {
       display: block;
     }
   }
-}
+}

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

@@ -1,9 +1,9 @@
 .bmpui-ui-volumeslider.bmpui-vertical {
   top: auto;
-  right: $player-spacing-inner;
+  right: 4px;
   left: auto;
-  bottom: 50px;
-  position: fixed;
+  bottom: 20px;
+  position: absolute;
   transition: none;
   width: 20px;
 

package/src/style/components/vertical-video/_bottombar.scss

@@ -9,10 +9,51 @@
   .bmpui-container-wrapper {
     width: 100%;
     pointer-events: all;
+    position: relative;
+    z-index: 1;
+  }
+
+  > .bmpui-container-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+&.bmpui-controls-shown,
+&.bmpui-player-state-finished {
+  .bmpui-ui-controlbar-bottom {
+    opacity: 1;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      left: 0;
+      opacity: 0.7;
+    }
+
+    &::before {
+      height: 28%;
+      top: 0;
+      background: var(--npo-player-topcolor);
+    }
+
+    &::after {
+      bottom: 0;
+      height: 28%;
+      background: var(--npo-player-bottomcolor);
+    }
+  }
+}
+
+&:not(.bmpui-player-state-prepared):not(.bmpui-player-state-playing):not(.bmpui-player-state-paused) {
+  .bmpui-ui-controlbar-bottom .bmpui-container-wrapper {
+    display: none;
   }
 }
 
-&.bmpui-controls-shown {
+&.bmpui-player-state-finished {
   .bmpui-ui-controlbar-bottom {
     background: var(--npo-player-vertical-video-overlay-color);
   }

package/src/style/components/vertical-video/_hugeplaybacktogglebutton.scss

@@ -1,14 +1,34 @@
-&,
+&:not(.bmpui-player-state-prepared):not(.bmpui-player-state-playing):not(.bmpui-player-state-paused) {
+  .bmpui-ui-playbacktoggle-overlay {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
 &.bmpui-layout-max-width-400,
 &.bmpui-layout-max-width-600 {
-  .bmpui-ui-playbacktoggle-overlay {
-    display: block;
+  &.bmpui-player-state-playing,
+  &.bmpui-player-state-paused,
+  &.bmpui-player-state-prepared {
+    .bmpui-ui-playbacktoggle-overlay {
+      display: block;
+    }
   }
 }
 
 .bmpui-ui-hugeplaybacktogglebutton .bmpui-image {
   &::after,
   &:before {
-    z-index: 10;
+    z-index: z-index(hugeplayback-toggle-button);
   }
 }
+
+&.bmpui-player-state-finished {
+  .bmpui-ui-playbacktoggle-overlay {
+    display: block !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    z-index: 3;
+  }
+}

package/src/style/components/vertical-video/_settingspanel.scss

@@ -6,9 +6,26 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 
-  .bmpui-ui-settingstogglebutton {
-    width: 32px;
-    height: 32px;
+  > .bmpui-container-wrapper {
     margin: 0;
   }
+
+  .bmpui-ui-settings-panel-page > .bmpui-container-wrapper {
+    padding-top: 48px;
+  }
+}
+
+.bmpui-ui-settingstogglebutton {
+  width: 32px;
+  height: 32px;
+  align-self: flex-end;
+  margin: 0;
+
+  .bmpui-label {
+    margin: 0;
+  }
+}
+
+.bmpui-ui-controlbar .bmpui-ui-settingstogglebutton {
+  margin: 16px 8px;
 }

package/src/style/components/vertical-video/_topbar.scss

@@ -1,17 +1,58 @@
 .bmpui-ui-titlebar {
-  background: none;
+  z-index: z-index(title-bar);
 
   .bmpui-container-wrapper {
     padding: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bmpui-nicam {
+    order: 0;
+    justify-content: flex-end;
+    margin-bottom: 4px;
+    min-height: 32px;
+    height: 10%;
 
-    .bmpui-ui-label {
+    &:empty {
       display: none;
     }
+
+    .nicam-icon {
+      height: 100%;
+      margin-top: 0;
+    }
+  }
+
+  .bmpui-label-metadata-description {
+    @include max-lines(4)
   }
+}
+
+&.bmpui-npo-player.bmpui-controls-shown,
+&.bmpui-npo-player.bmpui-controls-shown.bmpui-layout-max-width-400,
+&.bmpui-npo-player.bmpui-controls-shown.bmpui-layout-max-width-600 {
+  .bmpui-metadata,
+  .bmpui-label-metadata-title,
+  .bmpui-label-metadata-description {
+    display: block;
+    color: #fff;
+    opacity: 1;
+    margin: 4px 0;
+    order: 1;
+  }
+
+  .bmpui-label-metadata-description {
+    display: -webkit-box;
+  }
+}
+
+&.bmpui-show-nicam .bmpui-metadata {
+  display: none;
+}
 
-  .bmpui-nicam .nicam-icon {
-    width: 32px;
-    height: 32px;
-    margin-top: 0;
+&.bmpui-player-state-finished.bmpui-controls-shown {
+  .bmpui-metadata {
+    display: none !important;
   }
 }