Merge branch 'feature/modern-ui-base' into feature/new-advertising-ui

bitmovin · Dec 20, 2024 · c2373a8 · c2373a8
2 parents b7a0f42 + cbd3f61
commit c2373a8
Show file tree

Hide file tree

Showing 34 changed files with 717 additions and 634 deletions.
diff --git a/spec/components/listselector.spec.ts b/spec/components/listselector.spec.ts
@@ -165,7 +165,7 @@ describe('ListSelector', () => {
 
     it('returns false if selected item does not exist', () => {
       const result = listSelector.selectItem('notExistingKey');
-      expect(listSelector.getSelectedItem()).toBeUndefined();
+      expect(listSelector.getSelectedItem()).toBeNull();
       expect(result).toBeFalsy();
     });
 

diff --git a/spec/components/settingspanel.spec.ts b/spec/components/settingspanel.spec.ts
@@ -224,8 +224,8 @@ describe('SettingsPanel', () => {
         const selectBox = new SelectBox();
         const closeDropdownSpy = jest.spyOn(selectBox, 'closeDropdown');
 
-        settingsPanel.getActivePage().addComponent(new SettingsPanelItem(new Label(), selectBox));
-        settingsPanel.getActivePage().addComponent(new SettingsPanelItem(new Label(), new VolumeSlider()));
+        settingsPanel.getActivePage().addComponent(new SettingsPanelItem({ label: new Label(), settingComponent: selectBox }));
+        settingsPanel.getActivePage().addComponent(new SettingsPanelItem({ label: new Label(), settingComponent: new VolumeSlider() }));
 
         settingsPanel['hideHoveredSelectBoxes']();
 

diff --git a/src/scss/skin-modern/_skin.scss b/src/scss/skin-modern/_skin.scss
@@ -51,7 +51,7 @@
   @import 'skin-smallscreen';
   @import 'skin-tv';
 
-  .#{$prefix}-ui-uicontainer {
+  &.#{$prefix}-ui-uicontainer {
     color: $color-primary;
     font-family: $font-family;
     font-size: $font-size;

diff --git a/src/scss/skin-modern/components/_settingspanelpage.scss b/src/scss/skin-modern/components/_settingspanelpage.scss
@@ -16,6 +16,15 @@
       width: 45%;
     }
 
+    &.#{$prefix}-ui-subtitle-settings-label {
+      display: inline-block;
+      width: 45%;
+
+      .#{$prefix}-ui-label {
+        margin-right: 10px;
+      }
+    }
+
     // Controls (e.g. selectbox)
     &.#{$prefix}-ui-selectbox {
       margin-left: 10%;

diff --git a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss
@@ -63,36 +63,12 @@
 
   // Adjustments for screen width x <= 400
   &.#{$prefix}-layout-max-width-400 {
-    .#{$prefix}-ui-settings-panel,
-    .#{$prefix}-ui-hugeplaybacktogglebutton,
-    .#{$prefix}-ui-smallcenteredplaybacktogglebutton,
-    .#{$prefix}-ui-hugereplaybutton,
-    .#{$prefix}-ui-errormessage-overlay,
-    .#{$prefix}-ui-buffering-overlay,
-    .#{$prefix}-ui-subtitle-overlay,
-    .#{$prefix}-ui-cast-status-overlay {
-      font-size: .6em;
+    .#{$prefix}-ui-settings-panel {
+      left: 1em;
+      right: 1em;
+      margin-top: 3.5em;
+      max-height: calc(100% - 3.5em - 3.5em);
+      width: unset;
     }
   }
-
-  // Adjustments for screen width 400 < x <= 600
-  &.#{$prefix}-layout-max-width-600 {
-    .#{$prefix}-ui-settings-panel,
-    .#{$prefix}-ui-hugeplaybacktogglebutton,
-    .#{$prefix}-ui-smallcenteredplaybacktogglebutton,
-    .#{$prefix}-ui-hugereplaybutton,
-    .#{$prefix}-ui-errormessage-overlay,
-    .#{$prefix}-ui-buffering-overlay,
-    .#{$prefix}-ui-subtitle-overlay,
-    .#{$prefix}-ui-cast-status-overlay {
-      font-size: .8em;
-    }
-  }
-
-  // Adjustments for screen width x <= 600
-  // sass-lint:disable no-empty-rulesets
-  &.#{$prefix}-layout-max-width-400,
-  &.#{$prefix}-layout-max-width-600 {
-    // none yet
-  }
 }
diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss
@@ -20,6 +20,7 @@
   @import 'components/label';
   @import 'components/settingspanel';
   @import 'components/settingspanelpage';
+  @import 'components/settingspanelitem';
   @import 'components/settingspanelpageopenbutton';
   @import 'components/settingspanelpagebackbutton';
   @import 'components/settingstogglebutton';
@@ -55,7 +56,7 @@
   @import 'skin-tv';
 
   // sass-lint:disable nesting-depth
-  .#{$prefix}-ui-uicontainer {
+  &.#{$prefix}-ui-uicontainer {
     color: $color-primary;
     font-family: $font-family;
     font-size: $font-size;

diff --git a/src/scss/skin-super-modern/components/_button.scss b/src/scss/skin-super-modern/components/_button.scss
@@ -16,6 +16,7 @@
   min-width: 1.5em;
   padding: .25em;
   transition: transform .15s ease;
+  -webkit-tap-highlight-color: transparent;
 
   .#{$prefix}-label {
     color: $color-primary;

diff --git a/src/scss/skin-super-modern/components/_label.scss b/src/scss/skin-super-modern/components/_label.scss
@@ -7,6 +7,7 @@
 
   cursor: default;
   white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .#{$prefix}-ui-label {

diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss
@@ -13,9 +13,11 @@
 
   $background-color: transparentize($color-background-menu, .15);
 
+  backdrop-filter: blur(10px);
   background-color: $background-color;
   border-radius: 4px;
   bottom: 3.5em;
+  box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75);
   height: fit-content;
   max-height: 60%;
   min-width: fit-content;

diff --git a/src/scss/skin-super-modern/components/_settingspanelitem.scss b/src/scss/skin-super-modern/components/_settingspanelitem.scss
@@ -0,0 +1,82 @@
+@import '../variables';
+
+%ui-settings-panel-item {
+  line-height: 1.5em;
+  padding: .5em .7em;
+  white-space: nowrap;
+
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: transparentize($color-item-hover, .15);
+  }
+
+  &.#{$prefix}-hidden {
+    display: none;
+  }
+
+  .#{$prefix}-container-wrapper {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  > .#{$prefix}-container-wrapper {
+    column-gap: 10px;
+  }
+
+  .#{$prefix}-ui-label {
+    display: inline-block;
+    font-size: .8em;
+    font-weight: 500;
+    margin: 0;
+    text-align: justify;
+  }
+
+  .#{$prefix}-ui-label-setting-selected-option {
+    align-self: center;
+    font-weight: normal;
+    margin-left: auto;
+    width: fit-content;
+
+    &::after {
+      background-image: url('../../assets/skin-super-modern/images/angle-right.svg');
+      background-repeat: no-repeat;
+      background-size: 1.5em auto;
+      content: ' ';
+      display: inline-block;
+      height: 1.5em;
+      vertical-align: -.4em;
+      width: 1.5em;
+    }
+  }
+
+  &.#{$prefix}-ui-settings-panel-item-select-option {
+    &.#{$prefix}-selected {
+      .#{$prefix}-ui-label {
+        &::before {
+          background-image: url('../../assets/skin-super-modern/images/check.svg');
+          background-repeat: no-repeat;
+          background-size: 1.5em auto;
+          content: ' ';
+          display: inline-block;
+          height: 1.5em;
+          vertical-align: -.4em;
+          width: 1.5em;
+        }
+      }
+    }
+  }
+
+  &.#{$prefix}-title-item {
+    border-bottom: 1px solid transparentize($color-item-hover, .15);
+  }
+}
+
+.#{$prefix}-ui-settings-panel-item {
+  @extend %ui-settings-panel-item;
+}
diff --git a/src/scss/skin-super-modern/components/_settingspanelpage.scss b/src/scss/skin-super-modern/components/_settingspanelpage.scss
@@ -6,92 +6,6 @@
   &.#{$prefix}-active {
     display: block;
   }
-
-  // A "line" in the panel: a container holding a label + control
-  .#{$prefix}-container-wrapper > * {
-    &.#{$prefix}-ui-label {
-      display: inline-block;
-      font-size: .8em;
-      font-weight: 500;
-      margin: 0;
-      text-align: justify;
-      width: 45%;
-    }
-
-    &.#{$prefix}-ui-label-setting-selected-option {
-      align-self: center;
-      font-weight: normal;
-      margin-left: auto;
-      width: fit-content;
-
-      &::after {
-        background-image: url('../../assets/skin-super-modern/images/angle-right.svg');
-        background-repeat: no-repeat;
-        background-size: 1.5em auto;
-        content: ' ';
-        display: inline-block;
-        height: 1.5em;
-        vertical-align: -.4em;
-        width: 1.5em;
-      }
-    }
-
-    &.#{$prefix}-option {
-      font-weight: normal;
-    }
-
-    &.#{$prefix}-heading {
-      &::before {
-        background-image: url('../../assets/skin-super-modern/images/angle-left.svg');
-        background-repeat: no-repeat;
-        background-size: 1.5em auto;
-        content: ' ';
-        display: inline-block;
-        height: 1.5em;
-        vertical-align: -.4em;
-        width: 1.5em;
-      }
-    }
-
-    &.#{$prefix}-selected {
-      &::before {
-        background-image: url('../../assets/skin-super-modern/images/check.svg');
-        background-repeat: no-repeat;
-        background-size: 1.5em auto;
-        content: ' ';
-        display: inline-block;
-        height: 1.5em;
-        vertical-align: -.4em;
-        width: 1.5em;
-      }
-    }
-
-    // Controls (e.g. selectbox)
-    &.#{$prefix}-ui-selectbox {
-      margin-left: 10%;
-      width: 45%;
-    }
-  }
-
-  .#{$prefix}-ui-settings-panel-item {
-    padding: .5em .7em;
-    white-space: nowrap;
-
-    &:hover {
-      background-color: transparentize($color-item-hover, .15);
-    }
-
-    &.#{$prefix}-hidden {
-      display: none;
-    }
-
-    .#{$prefix}-container-wrapper {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      width: 100%;
-    }
-  }
 }
 
 .#{$prefix}-ui-settings-panel-page {

diff --git a/src/scss/skin-super-modern/components/_settingspanelpagebackbutton.scss b/src/scss/skin-super-modern/components/_settingspanelpagebackbutton.scss
@@ -3,23 +3,31 @@
 %ui-settingspanelpagebackbutton {
   @extend %ui-button;
 
-  font-size: .8em;
-  position: relative;
-  width: 8em;
+  border-collapse: collapse;
+  padding: unset;
+  flex: 1;
+  text-align: left;
+
+  &:active {
+    transform: unset;
+  }
 
   .#{$prefix}-label {
     display: inline-block;
+    font-size: .8em;
+    font-weight: 500;
+    margin: 0;
+    text-align: justify;
 
     &::before {
-      border-bottom: .2em solid $color-primary;
-      border-left: .2em solid $color-primary;
-      content: '';
-      height: .6em;
-      margin-left: -.8em;
-      position: absolute;
-      top: .6em;
-      transform: rotate(45deg);
-      width: .6em;
+      background-image: url('../../assets/skin-super-modern/images/angle-left.svg');
+      background-repeat: no-repeat;
+      background-size: 1.5em auto;
+      content: ' ';
+      display: inline-block;
+      height: 1.5em;
+      vertical-align: -.4em;
+      width: 1.5em;
     }
   }
 }

diff --git a/src/scss/skin-super-modern/components/_settingspanelpageopenbutton.scss b/src/scss/skin-super-modern/components/_settingspanelpageopenbutton.scss
@@ -6,15 +6,13 @@
 
   background-image: url('../../assets/skin-super-modern/images/setting.svg');
   max-height: .8em;
-  padding: .5em 0;
-  vertical-align: bottom;
 
   &:hover {
     @include svg-icon-shadow;
   }
 
   &.#{$prefix}-on {
-    background-image: url('../../assets/skin-super-modern/images/setting.svg');
+    transform: rotate(30deg);
   }
 }
 

diff --git a/src/scss/skin-super-modern/components/_settingstogglebutton.scss b/src/scss/skin-super-modern/components/_settingstogglebutton.scss
@@ -15,6 +15,6 @@
   background-image: url('../../assets/skin-super-modern/images/setting.svg');
 
   &.#{$prefix}-on {
-    background-image: url('../../assets/skin-super-modern/images/setting.svg');
+    transform: rotate(30deg);
   }
 }
diff --git a/src/scss/skin-super-modern/components/subtitlesettings/_subtitlesettingsresetbutton.scss b/src/scss/skin-super-modern/components/subtitlesettings/_subtitlesettingsresetbutton.scss
@@ -4,7 +4,7 @@
   @extend %ui-button;
 
   font-size: .8em;
-  width: 12em;
+  font-weight: 500;
 
   .#{$prefix}-label {
     display: inline-block;

diff --git a/src/ts/components/button.ts b/src/ts/components/button.ts
@@ -71,7 +71,8 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     }).html(i18n.performLocalization(this.config.text)));
 
     // Listen for the click event on the button element and trigger the corresponding event on the button component
-    buttonElement.on('click', () => {
+    buttonElement.on('click', (e) => {
+      e.stopPropagation();
       this.onClickEvent();
     });