New: Quality Preferred Size Setting

Co-authored-by: Qstick <qstick@gmail.com>

(cherry picked from commit d08f33ae213bb5a94b6b6aa8f6f1e780a7a9835f)

Fixed: Include preferred size in quality definition reset

(cherry picked from commit 8e925ac76d2f46cf5fef1ea62a20ae5e85d3000e)

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

@@ -31,7 +31,7 @@
   background-color: var(--sliderAccentColor);
   box-shadow: 0 0 0 #000;
 
-  &:nth-child(odd) {
+  &:nth-child(3n+1) {
     background-color: #ddd;
   }
 }
@@ -56,7 +56,7 @@
 .kilobitsPerSecond {
   display: flex;
   justify-content: space-between;
-  flex: 0 0 250px;
+  flex: 0 0 400px;
 }
 
 .sizeInput {

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

@@ -50,21 +50,24 @@ class QualityDefinition extends Component {
 
     this.state = {
       sliderMinSize: getSliderValue(props.minSize, slider.min),
-      sliderMaxSize: getSliderValue(props.maxSize, slider.max)
+      sliderMaxSize: getSliderValue(props.maxSize, slider.max),
+      sliderPreferredSize: getSliderValue(props.preferredSize, (slider.max - 3))
     };
   }
 
   //
   // Listeners
 
-  onSliderChange = ([sliderMinSize, sliderMaxSize]) => {
+  onSliderChange = ([sliderMinSize, sliderPreferredSize, sliderMaxSize]) => {
     this.setState({
       sliderMinSize,
-      sliderMaxSize
+      sliderMaxSize,
+      sliderPreferredSize
     });
 
     this.props.onSizeChange({
       minSize: roundNumber(Math.pow(sliderMinSize, 1.1)),
+      preferredSize: sliderPreferredSize === (slider.max - 3) ? null : roundNumber(Math.pow(sliderPreferredSize, 1.1)),
       maxSize: sliderMaxSize === slider.max ? null : roundNumber(Math.pow(sliderMaxSize, 1.1))
     });
   };
@@ -72,12 +75,14 @@ class QualityDefinition extends Component {
   onAfterSliderChange = () => {
     const {
       minSize,
-      maxSize
+      maxSize,
+      preferredSize
     } = this.props;
 
     this.setState({
       sliderMiSize: getSliderValue(minSize, slider.min),
-      sliderMaxSize: getSliderValue(maxSize, slider.max)
+      sliderMaxSize: getSliderValue(maxSize, slider.max),
+      sliderPreferredSize: getSliderValue(preferredSize, (slider.max - 3)) // fix
     });
   };
 
@@ -90,7 +95,22 @@ class QualityDefinition extends Component {
 
     this.props.onSizeChange({
       minSize,
-      maxSize: this.props.maxSize
+      maxSize: this.props.maxSize,
+      preferredSize: this.props.preferredSize
+    });
+  };
+
+  onPreferredSizeChange = ({ value }) => {
+    const preferredSize = value === (MAX - 3) ? null : getValue(value);
+
+    this.setState({
+      sliderPreferredSize: getSliderValue(preferredSize, slider.preferred)
+    });
+
+    this.props.onSizeChange({
+      minSize: this.props.minSize,
+      maxSize: this.props.maxSize,
+      preferredSize
     });
   };
 
@@ -103,7 +123,8 @@ class QualityDefinition extends Component {
 
     this.props.onSizeChange({
       minSize: this.props.minSize,
-      maxSize
+      maxSize,
+      preferredSize: this.props.preferredSize
     });
   };
 
@@ -117,20 +138,25 @@ class QualityDefinition extends Component {
       title,
       minSize,
       maxSize,
+      preferredSize,
       advancedSettings,
       onTitleChange
     } = this.props;
 
     const {
       sliderMinSize,
-      sliderMaxSize
+      sliderMaxSize,
+      sliderPreferredSize
     } = this.state;
 
     const minBytes = minSize * 128;
-    const maxBytes = maxSize && maxSize * 128;
-
     const minRate = `${formatBytes(minBytes, true)}/s`;
-    const maxRate = maxBytes ? `${formatBytes(maxBytes, true)}/s` : 'Unlimited';
+
+    const preferredBytes = preferredSize * 128;
+    const preferredRate = preferredBytes ? `${formatBytes(preferredBytes, true)}/s` : translate('Unlimited');
+
+    const maxBytes = maxSize && maxSize * 128;
+    const maxRate = maxBytes ? `${formatBytes(maxBytes, true)}/s` : translate('Unlimited');
 
     return (
       <div className={styles.qualityDefinition}>
@@ -151,9 +177,10 @@ class QualityDefinition extends Component {
             min={slider.min}
             max={slider.max}
             step={slider.step}
-            minDistance={MIN_DISTANCE * 5}
-            value={[sliderMinSize, sliderMaxSize]}
+            minDistance={3}
+            value={[sliderMinSize, sliderPreferredSize, sliderMaxSize]}
             withTracks={true}
+            allowCross={false}
             snapDragDisabled={true}
             className={styles.slider}
             trackClassName={styles.bar}
@@ -172,7 +199,23 @@ class QualityDefinition extends Component {
                 body={
                   <QualityDefinitionLimits
                     bytes={minBytes}
-                    message={translate('NoMinimumForAnyRuntime')}
+                    message={translate('NoMinimumForAnyDuration')}
+                  />
+                }
+                position={tooltipPositions.BOTTOM}
+              />
+            </div>
+
+            <div>
+              <Popover
+                anchor={
+                  <Label kind={kinds.SUCCESS}>{preferredRate}</Label>
+                }
+                title={translate('PreferredSize')}
+                body={
+                  <QualityDefinitionLimits
+                    bytes={preferredBytes}
+                    message={translate('NoLimitForAnyDuration')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -188,7 +231,7 @@ class QualityDefinition extends Component {
                 body={
                   <QualityDefinitionLimits
                     bytes={maxBytes}
-                    message={translate('NoLimitForAnyRuntime')}
+                    message={translate('NoLimitForAnyDuration')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -201,14 +244,14 @@ class QualityDefinition extends Component {
           advancedSettings &&
             <div className={styles.kilobitsPerSecond}>
               <div>
-                Min
+                {translate('Min')}
 
                 <NumberInput
                   className={styles.sizeInput}
                   name={`${id}.min`}
                   value={minSize || MIN}
                   min={MIN}
-                  max={maxSize ? maxSize - MIN_DISTANCE : MAX - MIN_DISTANCE}
+                  max={preferredSize ? preferredSize - 5 : MAX - 5}
                   step={0.1}
                   isFloat={true}
                   onChange={this.onMinSizeChange}
@@ -216,7 +259,22 @@ class QualityDefinition extends Component {
               </div>
 
               <div>
-                Max
+                {translate('Preferred')}
+
+                <NumberInput
+                  className={styles.sizeInput}
+                  name={`${id}.min`}
+                  value={preferredSize || MAX - 5}
+                  min={MIN}
+                  max={maxSize ? maxSize - 5 : MAX - 5}
+                  step={0.1}
+                  isFloat={true}
+                  onChange={this.onPreferredSizeChange}
+                />
+              </div>
+
+              <div>
+                {translate('Max')}
 
                 <NumberInput
                   className={styles.sizeInput}
@@ -242,6 +300,7 @@ QualityDefinition.propTypes = {
   title: PropTypes.string.isRequired,
   minSize: PropTypes.number,
   maxSize: PropTypes.number,
+  preferredSize: PropTypes.number,
   advancedSettings: PropTypes.bool.isRequired,
   onTitleChange: PropTypes.func.isRequired,
   onSizeChange: PropTypes.func.isRequired

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

@@ -23,11 +23,12 @@ class QualityDefinitionConnector extends Component {
     this.props.setQualityDefinitionValue({ id: this.props.id, name: 'title', value });
   };
 
-  onSizeChange = ({ minSize, maxSize }) => {
+  onSizeChange = ({ minSize, maxSize, preferredSize }) => {
     const {
       id,
       minSize: currentMinSize,
-      maxSize: currentMaxSize
+      maxSize: currentMaxSize,
+      preferredSize: currentPreferredSize
     } = this.props;
 
     if (minSize !== currentMinSize) {
@@ -37,6 +38,10 @@ class QualityDefinitionConnector extends Component {
     if (maxSize !== currentMaxSize) {
       this.props.setQualityDefinitionValue({ id, name: 'maxSize', value: maxSize });
     }
+
+    if (preferredSize !== currentPreferredSize) {
+      this.props.setQualityDefinitionValue({ id, name: 'preferredSize', value: preferredSize });
+    }
   };
 
   //
@@ -57,6 +62,7 @@ QualityDefinitionConnector.propTypes = {
   id: PropTypes.number.isRequired,
   minSize: PropTypes.number,
   maxSize: PropTypes.number,
+  preferredSize: PropTypes.number,
   setQualityDefinitionValue: PropTypes.func.isRequired,
   clearPendingChanges: PropTypes.func.isRequired
 };