Number input and max release size limit increased

Fixed: Number input changing value while typing
New: Maximum size limit has been doubled

Closes #2921

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 = 400;
+
 const slider = {
-  min: 0,
-  max: 200,
+  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 * 1024 * 1024;
     const minThirty = formatBytes(minBytes * 30, 2);
     const minSixty = formatBytes(minBytes * 60, 2);
@@ -120,13 +166,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}>
@@ -151,9 +198,10 @@ class QualityDefinition extends Component {
                 <NumberInput
                   className={styles.sizeInput}
                   name={`${id}.min`}
-                  value={minSize || slider.min}
-                  min={slider.min}
-                  max={maxSize ? maxSize - 10 : slider.max - 10}
+                  value={minSize || MIN}
+                  min={MIN}
+                  max={maxSize ? maxSize - 10 : MAX - 10}
+                  step={0.1}
                   isFloat={true}
                   onChange={this.onMinSizeChange}
                 />
@@ -165,9 +213,10 @@ class QualityDefinition extends Component {
                 <NumberInput
                   className={styles.sizeInput}
                   name={`${id}.min`}
-                  value={maxSize || slider.max}
+                  value={maxSize || MAX}
                   min={minSize + 10}
-                  max={slider.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
@@ -40,7 +34,7 @@ class QualityDefinitionConnector extends Component {
       this.props.setQualityDefinitionValue({ id, name: 'minSize', value: minSize });
     }
 
-    if (minSize !== currentMaxSize) {
+    if (maxSize !== currentMaxSize) {
       this.props.setQualityDefinitionValue({ id, name: 'maxSize', value: maxSize });
     }
   }
@@ -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

@@ -13,6 +13,7 @@ class QualityDefinitions extends Component {
   render() {
     const {
       items,
+      advancedSettings,
       ...otherProps
     } = this.props;
 
@@ -26,7 +27,14 @@ class QualityDefinitions extends Component {
             <div className={styles.quality}>Quality</div>
             <div className={styles.title}>Title</div>
             <div className={styles.sizeLimit}>Size Limit</div>
-            <div className={styles.megabytesPerMinute}>Megabytes Per Minute</div>
+
+            {
+              advancedSettings ?
+                <div className={styles.megabytesPerMinute}>
+                  Megabytes Per Minute
+                </div> :
+                null
+            }
           </div>
 
           <div className={styles.definitions}>
@@ -36,6 +44,7 @@ class QualityDefinitions extends Component {
                   <QualityDefinitionConnector
                     key={item.id}
                     {...item}
+                    advancedSettings={advancedSettings }
                   />
                 );
               })
@@ -57,7 +66,8 @@ QualityDefinitions.propTypes = {
   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

@@ -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] || {};
 
@@ -19,7 +20,8 @@ function createMapStateToProps() {
       return {
         ...qualityDefinitions,
         items,
-        hasPendingChanges: !_.isEmpty(qualityDefinitions.pendingChanges)
+        hasPendingChanges: !_.isEmpty(qualityDefinitions.pendingChanges),
+        advancedSettings
       };
     }
   );