New: Release Profiles, Frontend updates (#580)

* New: Release Profiles - UI Updates

* New: Release Profiles - API Changes

* New: Release Profiles - Test Updates

* New: Release Profiles - Backend Updates

* New: Interactive Artist Search

* New: Change Montiored on Album Details Page

* New: Show Duration on Album Details Page

* Fixed: Manual Import not working if no albums are Missing

* Fixed: Sort search input by sortTitle

* Fixed: Queue columnLabel throwing JS error

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

@@ -2,28 +2,38 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactSlider from 'react-slider';
 import formatBytes from 'Utilities/Number/formatBytes';
+import roundNumber from 'Utilities/Number/roundNumber';
 import { kinds } from 'Helpers/Props';
 import Label from 'Components/Label';
 import NumberInput from 'Components/Form/NumberInput';
 import TextInput from 'Components/Form/TextInput';
 import styles from './QualityDefinition.css';
 
+const MIN = 0;
+const MAX = 1500;
+
 const slider = {
-  min: 0,
-  max: 1500,
-  step: 1
+  min: MIN,
+  max: roundNumber(Math.pow(MAX, 1 / 1.1)),
+  step: 0.1
 };
 
-function getValue(value) {
-  if (value < slider.min) {
-    return slider.min;
+function getValue(inputValue) {
+  if (inputValue < MIN) {
+    return MIN;
   }
 
-  if (value > slider.max) {
-    return slider.max;
+  if (inputValue > MAX) {
+    return MAX;
   }
 
-  return value;
+  return roundNumber(inputValue);
+}
+
+function getSliderValue(value, defaultValue) {
+  const sliderValue = value ? Math.pow(value, 1 / 1.1) : defaultValue;
+
+  return roundNumber(sliderValue);
 }
 
 class QualityDefinition extends Component {
@@ -35,6 +45,11 @@ class QualityDefinition extends Component {
     super(props, context);
 
     this._forceUpdateTimeout = null;
+
+    this.state = {
+      sliderMinSize: getSliderValue(props.minSize, slider.min),
+      sliderMaxSize: getSliderValue(props.maxSize, slider.max)
+    };
   }
 
   componentDidMount() {
@@ -54,15 +69,37 @@ class QualityDefinition extends Component {
   //
   // Listeners
 
-  onSizeChange = ([minSize, maxSize]) => {
-    maxSize = maxSize === slider.max ? null : maxSize;
+  onSliderChange = ([sliderMinSize, sliderMaxSize]) => {
+    this.setState({
+      sliderMinSize,
+      sliderMaxSize
+    });
 
-    this.props.onSizeChange({ minSize, maxSize });
+    this.props.onSizeChange({
+      minSize: roundNumber(Math.pow(sliderMinSize, 1.1)),
+      maxSize: sliderMaxSize === slider.max ? null : roundNumber(Math.pow(sliderMaxSize, 1.1))
+    });
+  }
+
+  onAfterSliderChange = () => {
+    const {
+      minSize,
+      maxSize
+    } = this.props;
+
+    this.setState({
+      sliderMiSize: getSliderValue(minSize, slider.min),
+      sliderMaxSize: getSliderValue(maxSize, slider.max)
+    });
   }
 
   onMinSizeChange = ({ value }) => {
     const minSize = getValue(value);
 
+    this.setState({
+      sliderMinSize: getSliderValue(minSize, slider.min)
+    });
+
     this.props.onSizeChange({
       minSize,
       maxSize: this.props.maxSize
@@ -70,7 +107,11 @@ class QualityDefinition extends Component {
   }
 
   onMaxSizeChange = ({ value }) => {
-    const maxSize = value === slider.max ? null : getValue(value);
+    const maxSize = value === MAX ? null : getValue(value);
+
+    this.setState({
+      sliderMaxSize: getSliderValue(maxSize, slider.max)
+    });
 
     this.props.onSizeChange({
       minSize: this.props.minSize,
@@ -92,6 +133,11 @@ class QualityDefinition extends Component {
       onTitleChange
     } = this.props;
 
+    const {
+      sliderMinSize,
+      sliderMaxSize
+    } = this.state;
+
     const minBytes = minSize * 128;
     const maxBytes = maxSize && maxSize * 128;
 
@@ -123,13 +169,14 @@ class QualityDefinition extends Component {
             max={slider.max}
             step={slider.step}
             minDistance={10}
-            value={[minSize || slider.min, maxSize || slider.max]}
+            value={[sliderMinSize, sliderMaxSize]}
             withBars={true}
             snapDragDisabled={true}
             className={styles.slider}
             barClassName={styles.bar}
             handleClassName={styles.handle}
-            onChange={this.onSizeChange}
+            onChange={this.onSliderChange}
+            onAfterChange={this.onAfterSliderChange}
           />
 
           <div className={styles.sizes}>
@@ -154,9 +201,10 @@ class QualityDefinition extends Component {
                 <NumberInput
                   className={styles.sizeInput}
                   name={`${id}.min`}
-                  min={slider.min}
-                  max={maxSize ? maxSize - 10 : slider.max - 10}
-                  value={minSize || slider.min}
+                  value={minSize || MIN}
+                  min={MIN}
+                  max={maxSize ? maxSize - 10 : MAX - 10}
+                  step={0.1}
                   isFloat={true}
                   onChange={this.onMinSizeChange}
                 />
@@ -169,7 +217,9 @@ class QualityDefinition extends Component {
                   className={styles.sizeInput}
                   name={`${id}.max`}
                   min={minSize + 10}
-                  value={maxSize || slider.max}
+                  value={maxSize || MAX}
+                  max={MAX}
+                  step={0.1}
                   isFloat={true}
                   onChange={this.onMaxSizeChange}
                 />

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

@@ -5,12 +5,6 @@ import { setQualityDefinitionValue } from 'Store/Actions/settingsActions';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import QualityDefinition from './QualityDefinition';
 
-function mapStateToProps(state) {
-  return {
-    advancedSettings: state.settings.advancedSettings
-  };
-}
-
 const mapDispatchToProps = {
   setQualityDefinitionValue,
   clearPendingChanges
@@ -67,4 +61,4 @@ QualityDefinitionConnector.propTypes = {
   clearPendingChanges: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(QualityDefinitionConnector);
+export default connect(null, mapDispatchToProps)(QualityDefinitionConnector);

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

@@ -12,8 +12,8 @@ class QualityDefinitions extends Component {
 
   render() {
     const {
-      advancedSettings,
       items,
+      advancedSettings,
       ...otherProps
     } = this.props;
 
@@ -27,8 +27,12 @@ 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>
+            {
+              advancedSettings ?
+                <div className={styles.kilobitsPerSecond}>
+                  Kilobits Per Second
+                </div> :
+                null
             }
           </div>
 
@@ -39,6 +43,7 @@ class QualityDefinitions extends Component {
                   <QualityDefinitionConnector
                     key={item.id}
                     {...item}
+                    advancedSettings={advancedSettings}
                   />
                 );
               })
@@ -57,11 +62,11 @@ class QualityDefinitions extends Component {
 }
 
 QualityDefinitions.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   defaultProfile: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  advancedSettings: PropTypes.bool.isRequired
 };
 
 export default QualityDefinitions;

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

@@ -18,10 +18,10 @@ function createMapStateToProps() {
       });
 
       return {
-        advancedSettings,
         ...qualityDefinitions,
         items,
-        hasPendingChanges: !_.isEmpty(qualityDefinitions.pendingChanges)
+        hasPendingChanges: !_.isEmpty(qualityDefinitions.pendingChanges),
+        advancedSettings
       };
     }
   );