Fixed: Unclear UI on quality definitions (#483)

frontend/src/Settings/Quality/Definition/QualityDefinitions.js

@@ -12,6 +12,7 @@ class QualityDefinitions extends Component {
 
   render() {
     const {
+      advancedSettings,
       items,
       ...otherProps
     } = this.props;
@@ -26,7 +27,9 @@ class QualityDefinitions extends Component {
             <div className={styles.quality}>Quality</div>
             <div className={styles.title}>Title</div>
             <div className={styles.sizeLimit}>Size Limit</div>
+            {advancedSettings &&
               <div className={styles.kilobitsPerSecond}>Kilobits Per Second</div>
+            }
           </div>
 
           <div className={styles.definitions}>
@@ -54,6 +57,7 @@ class QualityDefinitions extends Component {
 }
 
 QualityDefinitions.propTypes = {
+  advancedSettings: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   defaultProfile: PropTypes.object,

frontend/src/Settings/Quality/Definition/QualityDefinitionsConnector.js

@@ -9,7 +9,8 @@ import QualityDefinitions from './QualityDefinitions';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.qualityDefinitions,
-    (qualityDefinitions) => {
+    (state) => state.settings.advancedSettings,
+    (qualityDefinitions, advancedSettings) => {
       const items = qualityDefinitions.items.map((item) => {
         const pendingChanges = qualityDefinitions.pendingChanges[item.id] || {};
 
@@ -17,6 +18,7 @@ function createMapStateToProps() {
       });
 
       return {
+        advancedSettings,
         ...qualityDefinitions,
         items,
         hasPendingChanges: !_.isEmpty(qualityDefinitions.pendingChanges)