New: Get Custom Formats Working in Aphrodite

frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js

@@ -15,6 +15,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import QualityProfileItems from './QualityProfileItems';
+import QualityProfileFormatItems from './QualityProfileFormatItems';
 import styles from './EditQualityProfileModalContent.css';
 
 const MODAL_BODY_PADDING = parseInt(dimensions.modalBodyPadding);
@@ -92,6 +93,7 @@ class EditQualityProfileModalContent extends Component {
       isSaving,
       saveError,
       qualities,
+      customFormats,
       languages,
       item,
       isInUse,
@@ -109,11 +111,13 @@ class EditQualityProfileModalContent extends Component {
       name,
       upgradeAllowed,
       cutoff,
+      formatCutoff,
       language,
-      items
+      items,
+      formatItems
     } = item;
 
-    const languageId = language.value.id;
+    const languageId = language ? language.value.id : 0;
 
     return (
       <ModalContent onModalClose={onModalClose}>
@@ -181,7 +185,7 @@ class EditQualityProfileModalContent extends Component {
                           upgradeAllowed.value &&
                             <FormGroup size={sizes.EXTRA_SMALL}>
                               <FormLabel size={sizes.SMALL}>
-                              Upgrade Until
+                              Upgrade Until Quality
                               </FormLabel>
 
                               <FormInputGroup
@@ -195,6 +199,24 @@ class EditQualityProfileModalContent extends Component {
                             </FormGroup>
                         }
 
+                        {
+                          upgradeAllowed.value &&
+                            <FormGroup size={sizes.EXTRA_SMALL}>
+                              <FormLabel size={sizes.SMALL}>
+                              Upgrade Until Format
+                              </FormLabel>
+
+                              <FormInputGroup
+                                type={inputTypes.SELECT}
+                                name="formatCutoff"
+                                {...formatCutoff}
+                                values={customFormats}
+                                helpText="Once this custom format is reached Radarr will no longer download movies"
+                                onChange={onCutoffChange}
+                              />
+                            </FormGroup>
+                        }
+
                         <FormGroup size={sizes.EXTRA_SMALL}>
                           <FormLabel size={sizes.SMALL}>
                           Language
@@ -220,6 +242,15 @@ class EditQualityProfileModalContent extends Component {
                           {...otherProps}
                         />
                       </div>
+
+                      <div className={styles.formGroupWrapper}>
+                        <QualityProfileFormatItems
+                          profileFormatItems={formatItems.value}
+                          errors={formatItems.errors}
+                          warnings={formatItems.warnings}
+                          {...otherProps}
+                        />
+                      </div>
                     </div>
                   </Form>
 
@@ -282,6 +313,7 @@ EditQualityProfileModalContent.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
   qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   item: PropTypes.object.isRequired,
   isInUse: PropTypes.bool.isRequired,

frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContentConnector.js

@@ -61,6 +61,36 @@ function createQualitiesSelector() {
   );
 }
 
+function createFormatsSelector() {
+  return createSelector(
+    createProviderSettingsSelector('qualityProfiles'),
+    (customFormat) => {
+      const items = customFormat.item.formatItems;
+      if (!items || !items.value) {
+        return [];
+      }
+
+      return _.reduceRight(items.value, (result, { allowed, id, name, format }) => {
+        if (allowed) {
+          if (id) {
+            result.push({
+              key: id,
+              value: name
+            });
+          } else {
+            result.push({
+              key: format.id,
+              value: format.name
+            });
+          }
+        }
+
+        return result;
+      }, []);
+    }
+  );
+}
+
 function createLanguagesSelector() {
   return createSelector(
     (state) => state.settings.languages,
@@ -87,11 +117,13 @@ function createMapStateToProps() {
   return createSelector(
     createProviderSettingsSelector('qualityProfiles'),
     createQualitiesSelector(),
+    createFormatsSelector(),
     createLanguagesSelector(),
     createProfileInUseSelector('qualityProfileId'),
-    (qualityProfile, qualities, languages, isInUse) => {
+    (qualityProfile, qualities, customFormats, languages, isInUse) => {
       return {
         qualities,
+        customFormats,
         languages,
         ...qualityProfile,
         isInUse
@@ -161,6 +193,30 @@ class EditQualityProfileModalContentConnector extends Component {
     }
   }
 
+  ensureFormatCutoff = (qualityProfile) => {
+    const cutoff = qualityProfile.formatCutoff.value;
+
+    const cutoffItem = _.find(qualityProfile.formatItems.value, (i) => {
+      if (!cutoff) {
+        return false;
+      }
+
+      return i.id === cutoff || (i.format && i.format.id === cutoff);
+    });
+
+    // If the cutoff isn't allowed anymore or there isn't a cutoff set one
+    if (!cutoff || !cutoffItem || !cutoffItem.allowed) {
+      const firstAllowed = _.find(qualityProfile.formatItems.value, { allowed: true });
+      let cutoffId = null;
+
+      if (firstAllowed) {
+        cutoffId = firstAllowed.format ? firstAllowed.format.id : firstAllowed.id;
+      }
+
+      this.props.setQualityProfileValue({ name: 'formatCutoff', value: cutoffId });
+    }
+  }
+
   //
   // Listeners
 
@@ -211,6 +267,21 @@ class EditQualityProfileModalContentConnector extends Component {
     this.ensureCutoff(qualityProfile);
   }
 
+  onQualityProfileFormatItemAllowedChange = (id, allowed) => {
+    const qualityProfile = _.cloneDeep(this.props.item);
+    const formatItems = qualityProfile.formatItems.value;
+    const item = _.find(qualityProfile.formatItems.value, (i) => i.format && i.format.id === id);
+
+    item.allowed = allowed;
+
+    this.props.setQualityProfileValue({
+      name: 'formatItems',
+      value: formatItems
+    });
+
+    this.ensureFormatCutoff(qualityProfile);
+  }
+
   onItemGroupAllowedChange = (id, allowed) => {
     const qualityProfile = _.cloneDeep(this.props.item);
     const items = qualityProfile.items.value;
@@ -427,6 +498,39 @@ class EditQualityProfileModalContentConnector extends Component {
     });
   }
 
+  onQualityProfileFormatItemDragMove = (dragIndex, dropIndex) => {
+    if (this.state.dragIndex !== dragIndex || this.state.dropIndex !== dropIndex) {
+      this.setState({
+        dragIndex,
+        dropIndex
+      });
+    }
+  }
+
+  onQualityProfileFormatItemDragEnd = ({ id }, didDrop) => {
+    const {
+      dragIndex,
+      dropIndex
+    } = this.state;
+
+    if (didDrop && dropIndex !== null) {
+      const qualityProfile = _.cloneDeep(this.props.item);
+
+      const formats = qualityProfile.formatItems.value.splice(dragIndex, 1);
+      qualityProfile.formatItems.value.splice(dropIndex, 0, formats[0]);
+
+      this.props.setQualityProfileValue({
+        name: 'formatItems',
+        value: qualityProfile.formatItems.value
+      });
+    }
+
+    this.setState({
+      dragIndex: null,
+      dropIndex: null
+    });
+  }
+
   onToggleEditGroupsMode = () => {
     this.setState({ editGroups: !this.state.editGroups });
   }
@@ -450,10 +554,13 @@ class EditQualityProfileModalContentConnector extends Component {
         onCreateGroupPress={this.onCreateGroupPress}
         onDeleteGroupPress={this.onDeleteGroupPress}
         onQualityProfileItemAllowedChange={this.onQualityProfileItemAllowedChange}
+        onQualityProfileFormatItemAllowedChange={this.onQualityProfileFormatItemAllowedChange}
         onItemGroupAllowedChange={this.onItemGroupAllowedChange}
         onItemGroupNameChange={this.onItemGroupNameChange}
         onQualityProfileItemDragMove={this.onQualityProfileItemDragMove}
         onQualityProfileItemDragEnd={this.onQualityProfileItemDragEnd}
+        onQualityProfileFormatItemDragMove={this.onQualityProfileFormatItemDragMove}
+        onQualityProfileFormatItemDragEnd={this.onQualityProfileFormatItemDragEnd}
         onToggleEditGroupsMode={this.onToggleEditGroupsMode}
       />
     );

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css

@@ -0,0 +1,44 @@
+.qualityProfileFormatItem {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  background: #fafafa;
+}
+
+.checkContainer {
+  position: relative;
+  margin-right: 4px;
+  margin-bottom: 7px;
+  margin-left: 8px;
+}
+
+.formatName {
+  display: flex;
+  flex-grow: 1;
+  margin-bottom: 0;
+  margin-left: 2px;
+  font-weight: normal;
+  line-height: 36px;
+  cursor: pointer;
+}
+
+.dragHandle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  width: $dragHandleWidth;
+  text-align: center;
+  cursor: grab;
+}
+
+.dragIcon {
+  top: 0;
+}
+
+.isDragging {
+  opacity: 0.25;
+}

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.js

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { icons } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import CheckInput from 'Components/Form/CheckInput';
+import styles from './QualityProfileFormatItem.css';
+
+class QualityProfileFormatItem extends Component {
+
+  //
+  // Listeners
+
+  onAllowedChange = ({ value }) => {
+    const {
+      formatId,
+      onQualityProfileFormatItemAllowedChange
+    } = this.props;
+
+    onQualityProfileFormatItemAllowedChange(formatId, value);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      name,
+      allowed,
+      isDragging,
+      connectDragSource
+    } = this.props;
+
+    return (
+      <div
+        className={classNames(
+          styles.qualityProfileFormatItem,
+          isDragging && styles.isDragging
+        )}
+      >
+        <label
+          className={styles.formatName}
+        >
+          <CheckInput
+            containerClassName={styles.checkContainer}
+            name={name}
+            value={allowed}
+            onChange={this.onAllowedChange}
+          />
+          {name}
+        </label>
+
+        {
+          connectDragSource(
+            <div className={styles.dragHandle}>
+              <Icon
+                className={styles.dragIcon}
+                name={icons.REORDER}
+              />
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+QualityProfileFormatItem.propTypes = {
+  formatId: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  allowed: PropTypes.bool.isRequired,
+  sortIndex: PropTypes.number.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  connectDragSource: PropTypes.func,
+  onQualityProfileFormatItemAllowedChange: PropTypes.func
+};
+
+QualityProfileFormatItem.defaultProps = {
+  // The drag preview will not connect the drag handle.
+  connectDragSource: (node) => node
+};
+
+export default QualityProfileFormatItem;

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragPreview.css

@@ -0,0 +1,4 @@
+.dragPreview {
+  width: 380px;
+  opacity: 0.75;
+}

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragPreview.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { DragLayer } from 'react-dnd';
+import dimensions from 'Styles/Variables/dimensions.js';
+import { QUALITY_PROFILE_FORMAT_ITEM } from 'Helpers/dragTypes';
+import DragPreviewLayer from 'Components/DragPreviewLayer';
+import QualityProfileFormatItem from './QualityProfileFormatItem';
+import styles from './QualityProfileFormatItemDragPreview.css';
+
+const formGroupSmallWidth = parseInt(dimensions.formGroupSmallWidth);
+const formLabelLargeWidth = parseInt(dimensions.formLabelLargeWidth);
+const formLabelRightMarginWidth = parseInt(dimensions.formLabelRightMarginWidth);
+const dragHandleWidth = parseInt(dimensions.dragHandleWidth);
+
+function collectDragLayer(monitor) {
+  return {
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    currentOffset: monitor.getSourceClientOffset()
+  };
+}
+
+class QualityProfileFormatItemDragPreview extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      item,
+      itemType,
+      currentOffset
+    } = this.props;
+
+    if (!currentOffset || itemType !== QUALITY_PROFILE_FORMAT_ITEM) {
+      return null;
+    }
+
+    // The offset is shifted because the drag handle is on the right edge of the
+    // list item and the preview is wider than the drag handle.
+
+    const { x, y } = currentOffset;
+    const handleOffset = formGroupSmallWidth - formLabelLargeWidth - formLabelRightMarginWidth - dragHandleWidth;
+    const transform = `translate3d(${x - handleOffset}px, ${y}px, 0)`;
+
+    const style = {
+      position: 'absolute',
+      WebkitTransform: transform,
+      msTransform: transform,
+      transform
+    };
+
+    const {
+      formatId,
+      name,
+      allowed,
+      sortIndex
+    } = item;
+
+    return (
+      <DragPreviewLayer>
+        <div
+          className={styles.dragPreview}
+          style={style}
+        >
+          <QualityProfileFormatItem
+            formatId={formatId}
+            name={name}
+            allowed={allowed}
+            sortIndex={sortIndex}
+            isDragging={false}
+          />
+        </div>
+      </DragPreviewLayer>
+    );
+  }
+}
+
+QualityProfileFormatItemDragPreview.propTypes = {
+  item: PropTypes.object,
+  itemType: PropTypes.string,
+  currentOffset: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired
+  })
+};
+
+export default DragLayer(collectDragLayer)(QualityProfileFormatItemDragPreview);

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragSource.css

@@ -0,0 +1,18 @@
+.qualityProfileFormatItemDragSource {
+  padding: 4px 0;
+}
+
+.qualityProfileFormatItemPlaceholder {
+  width: 100%;
+  height: 36px;
+  border: 1px dotted #aaa;
+  border-radius: 4px;
+}
+
+.qualityProfileFormatItemPlaceholderBefore {
+  margin-bottom: 8px;
+}
+
+.qualityProfileFormatItemPlaceholderAfter {
+  margin-top: 8px;
+}

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragSource.js

@@ -0,0 +1,157 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import { DragSource, DropTarget } from 'react-dnd';
+import classNames from 'classnames';
+import { QUALITY_PROFILE_FORMAT_ITEM } from 'Helpers/dragTypes';
+import QualityProfileFormatItem from './QualityProfileFormatItem';
+import styles from './QualityProfileFormatItemDragSource.css';
+
+const qualityProfileFormatItemDragSource = {
+  beginDrag({ formatId, name, allowed, sortIndex }) {
+    return {
+      formatId,
+      name,
+      allowed,
+      sortIndex
+    };
+  },
+
+  endDrag(props, monitor, component) {
+    props.onQualityProfileFormatItemDragEnd(monitor.getItem(), monitor.didDrop());
+  }
+};
+
+const qualityProfileFormatItemDropTarget = {
+  hover(props, monitor, component) {
+    const dragIndex = monitor.getItem().sortIndex;
+    const hoverIndex = props.sortIndex;
+
+    const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
+    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+    const clientOffset = monitor.getClientOffset();
+    const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+    // Moving up, only trigger if drag position is above 50%
+    if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
+      return;
+    }
+
+    // Moving down, only trigger if drag position is below 50%
+    if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
+      return;
+    }
+
+    props.onQualityProfileFormatItemDragMove(dragIndex, hoverIndex);
+  }
+};
+
+function collectDragSource(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  };
+}
+
+function collectDropTarget(connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+}
+
+class QualityProfileFormatItemDragSource extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      formatId,
+      name,
+      allowed,
+      sortIndex,
+      isDragging,
+      isDraggingUp,
+      isDraggingDown,
+      isOver,
+      connectDragSource,
+      connectDropTarget,
+      onQualityProfileFormatItemAllowedChange
+    } = this.props;
+
+    const isBefore = !isDragging && isDraggingUp && isOver;
+    const isAfter = !isDragging && isDraggingDown && isOver;
+
+    // if (isDragging && !isOver) {
+    //   return null;
+    // }
+
+    return connectDropTarget(
+      <div
+        className={classNames(
+          styles.qualityProfileFormatItemDragSource,
+          isBefore && styles.isDraggingUp,
+          isAfter && styles.isDraggingDown
+        )}
+      >
+        {
+          isBefore &&
+            <div
+              className={classNames(
+                styles.qualityProfileFormatItemPlaceholder,
+                styles.qualityProfileFormatItemPlaceholderBefore
+              )}
+            />
+        }
+
+        <QualityProfileFormatItem
+          formatId={formatId}
+          name={name}
+          allowed={allowed}
+          sortIndex={sortIndex}
+          isDragging={isDragging}
+          isOver={isOver}
+          connectDragSource={connectDragSource}
+          onQualityProfileFormatItemAllowedChange={onQualityProfileFormatItemAllowedChange}
+        />
+
+        {
+          isAfter &&
+            <div
+              className={classNames(
+                styles.qualityProfileFormatItemPlaceholder,
+                styles.qualityProfileFormatItemPlaceholderAfter
+              )}
+            />
+        }
+      </div>
+    );
+  }
+}
+
+QualityProfileFormatItemDragSource.propTypes = {
+  formatId: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  allowed: PropTypes.bool.isRequired,
+  sortIndex: PropTypes.number.isRequired,
+  isDragging: PropTypes.bool,
+  isDraggingUp: PropTypes.bool,
+  isDraggingDown: PropTypes.bool,
+  isOver: PropTypes.bool,
+  connectDragSource: PropTypes.func,
+  connectDropTarget: PropTypes.func,
+  onQualityProfileFormatItemAllowedChange: PropTypes.func.isRequired,
+  onQualityProfileFormatItemDragMove: PropTypes.func.isRequired,
+  onQualityProfileFormatItemDragEnd: PropTypes.func.isRequired
+};
+
+export default DropTarget(
+  QUALITY_PROFILE_FORMAT_ITEM,
+  qualityProfileFormatItemDropTarget,
+  collectDropTarget
+)(DragSource(
+  QUALITY_PROFILE_FORMAT_ITEM,
+  qualityProfileFormatItemDragSource,
+  collectDragSource
+)(QualityProfileFormatItemDragSource));

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css

@@ -0,0 +1,6 @@
+.formats {
+  margin-top: 10px;
+  /* TODO: This should consider the number of languages in the list */
+  min-height: 550px;
+  user-select: none;
+}

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import QualityProfileFormatItemDragSource from './QualityProfileFormatItemDragSource';
+import QualityProfileFormatItemDragPreview from './QualityProfileFormatItemDragPreview';
+import styles from './QualityProfileFormatItems.css';
+
+class QualityProfileFormatItems extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      dragIndex,
+      dropIndex,
+      profileFormatItems,
+      errors,
+      warnings,
+      ...otherProps
+    } = this.props;
+
+    const isDragging = dropIndex !== null;
+    const isDraggingUp = isDragging && dropIndex > dragIndex;
+    const isDraggingDown = isDragging && dropIndex < dragIndex;
+
+    return (
+      <FormGroup>
+        <FormLabel>Custom Formats</FormLabel>
+        <div>
+          <FormInputHelpText
+            text="Custom Formats higher in the list are more preferred. Only checked custom formats are wanted"
+          />
+
+          {
+            errors.map((error, index) => {
+              return (
+                <FormInputHelpText
+                  key={index}
+                  text={error.message}
+                  isError={true}
+                  isCheckInput={false}
+                />
+              );
+            })
+          }
+
+          {
+            warnings.map((warning, index) => {
+              return (
+                <FormInputHelpText
+                  key={index}
+                  text={warning.message}
+                  isWarning={true}
+                  isCheckInput={false}
+                />
+              );
+            })
+          }
+
+          <div className={styles.formats}>
+            {
+              profileFormatItems.map(({ allowed, format }, index) => {
+                return (
+                  <QualityProfileFormatItemDragSource
+                    key={format.id}
+                    formatId={format.id}
+                    name={format.name}
+                    allowed={allowed}
+                    sortIndex={index}
+                    isDragging={isDragging}
+                    isDraggingUp={isDraggingUp}
+                    isDraggingDown={isDraggingDown}
+                    {...otherProps}
+                  />
+                );
+              }).reverse()
+            }
+
+            <QualityProfileFormatItemDragPreview />
+          </div>
+        </div>
+      </FormGroup>
+    );
+  }
+}
+
+QualityProfileFormatItems.propTypes = {
+  dragIndex: PropTypes.number,
+  dropIndex: PropTypes.number,
+  profileFormatItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+  errors: PropTypes.arrayOf(PropTypes.object),
+  warnings: PropTypes.arrayOf(PropTypes.object)
+};
+
+QualityProfileFormatItems.defaultProps = {
+  errors: [],
+  warnings: []
+};
+
+export default QualityProfileFormatItems;