Merge pull request #655 from bitmovin/feature/super-modern-subtitle-s…

…ettings-panel Enable the subtitle settings panel for the new layout
bitmovin · Dec 20, 2024 · 77d2044 · 77d2044
2 parents fbfcee9 + 901be17
commit 77d2044
Show file tree

Hide file tree

Showing 29 changed files with 705 additions and 602 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/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.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';

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

diff --git a/src/ts/components/component.ts b/src/ts/components/component.ts
@@ -339,7 +339,7 @@ export class Component<Config extends ComponentConfig> {
    * @param base configuration inherited from a superclass
    * @returns {Config}
    */
-  protected mergeConfig<Config>(config: Config, defaults: Config, base: Config): Config {
+  protected mergeConfig<Config>(config: Config, defaults: Partial<Config>, base: Config): Config {
     // Extend default config with supplied config
     let merged = Object.assign({}, base, defaults, config);