New: Get Custom Formats Working in Aphrodite

2025-09-17 17:14:18 +02:00 · 2019-08-31 02:45:22 -04:00
parent 86dde88fe6
commit b2268c7452
35 changed files with 1066 additions and 50 deletions
--- a/frontend/src/Helpers/dragTypes.js
+++ b/frontend/src/Helpers/dragTypes.js
@@ -1,3 +1,4 @@
 export const QUALITY_PROFILE_ITEM = 'qualityProfileItem';
+export const QUALITY_PROFILE_FORMAT_ITEM = 'qualityProfileFormatItem';
 export const DELAY_PROFILE = 'delayProfile';
 export const TABLE_COLUMN = 'tableColumn';
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import split from 'Utilities/String/split';
 import { icons, kinds } from 'Helpers/Props';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
-// import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
+import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
 import styles from './CustomFormat.css';

 class CustomFormat extends Component {
@@ -62,15 +63,15 @@ class CustomFormat extends Component {

  render() {
    const {
-      // id,
+      id,
      name,
-      items,
+      formatTags,
      isDeleting
    } = this.props;

    return (
      <Card
-        className={styles.CustomFormat}
+        className={styles.customFormat}
        overlayContent={true}
        onPress={this.onEditCustomFormatPress}
      >
@@ -87,32 +88,31 @@ class CustomFormat extends Component {
          />
        </div>

-        <div className={styles.formats}>
+        <div>
          {
-            items.map((item) => {
-              if (!item.allowed) {
+            split(formatTags).map((item) => {
+              if (!item) {
                return null;
              }

              return (
                <Label
-                  key={item.quality.id}
-                  kind={kinds.default}
-                  title={null}
+                  key={item}
+                  kind={kinds.DEFAULT}
                >
-                  {item.quality.name}
+                  {item}
                </Label>
              );
            })
          }
        </div>

-        {/* <EditCustomFormatModalConnector
+        <EditCustomFormatModalConnector
          id={id}
          isOpen={this.state.isEditCustomFormatModalOpen}
          onModalClose={this.onEditCustomFormatModalClose}
          onDeleteCustomFormatPress={this.onDeleteCustomFormatPress}
-        /> */}
+        />

        <ConfirmModal
          isOpen={this.state.isDeleteCustomFormatModalOpen}
@@ -132,7 +132,7 @@ class CustomFormat extends Component {
 CustomFormat.propTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  formatTags: PropTypes.string.isRequired,
  isDeleting: PropTypes.bool.isRequired,
  onConfirmDeleteCustomFormat: PropTypes.func.isRequired,
  onCloneCustomFormatPress: PropTypes.func.isRequired
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js
@@ -7,7 +7,7 @@ import Card from 'Components/Card';
 import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import CustomFormat from './CustomFormat';
-// import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
+import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
 import styles from './CustomFormats.css';

 class CustomFormats extends Component {
@@ -57,7 +57,7 @@ class CustomFormats extends Component {
          errorMessage="Unable to load Custom Formats"
          {...otherProps}c={true}
        >
-          <div className={styles.CustomFormats}>
+          <div className={styles.customFormats}>
            {
              items.sort(sortByName).map((item) => {
                return (
@@ -85,11 +85,10 @@ class CustomFormats extends Component {
            </Card>
          </div>

-          {/*
          <EditCustomFormatModalConnector
            isOpen={this.state.isCustomFormatModalOpen}
            onModalClose={this.onModalClose}
-          /> */}
+          />

        </PageSectionContent>
      </FieldSet>
--- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModal.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModal.js
@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { sizes } from 'Helpers/Props';
+import Modal from 'Components/Modal/Modal';
+import EditCustomFormatModalContentConnector from './EditCustomFormatModalContentConnector';
+
+class EditCustomFormatModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      height: 'auto'
+    };
+  }
+
+  //
+  // Listeners
+
+  onContentHeightChange = (height) => {
+    if (this.state.height === 'auto' || height > this.state.height) {
+      this.setState({ height });
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        style={{ height: `${this.state.height}px` }}
+        isOpen={isOpen}
+        size={sizes.EXTRA_LARGE}
+        onModalClose={onModalClose}
+      >
+        <EditCustomFormatModalContentConnector
+          {...otherProps}
+          onContentHeightChange={this.onContentHeightChange}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+EditCustomFormatModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditCustomFormatModal;
--- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalConnector.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalConnector.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditCustomFormatModal from './EditCustomFormatModal';
+
+function mapStateToProps() {
+  return {};
+}
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class EditCustomFormatModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'settings.customFormats' });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditCustomFormatModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditCustomFormatModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditCustomFormatModalConnector);
--- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css
@@ -0,0 +1,18 @@
+.formGroupsContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.formGroupWrapper {
+  flex: 0 0 calc($formGroupSmallWidth - 100px);
+}
+
+.deleteButtonContainer {
+  margin-right: auto;
+}
+
+@media only screen and (max-width: $breakpointLarge) {
+  .formGroupsContainer {
+    display: block;
+  }
+}
--- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js
@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import styles from './EditCustomFormatModalContent.css';
+
+class EditCustomFormatModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      error,
+      isSaving,
+      saveError,
+      item,
+      onInputChange,
+      onSavePress,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    const {
+      id,
+      name,
+      formatTags
+    } = item;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+
+        <ModalHeader>
+          {id ? 'Edit Custom Format' : 'Add Custom Format'}
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            {
+              isFetching &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div>Unable to add a new custom format, please try again.</div>
+            }
+
+            {
+              !isFetching && !error &&
+                <Form
+                  {...otherProps}
+                >
+                  <div className={styles.formGroupsContainer}>
+                    <div className={styles.formGroupWrapper}>
+                      <FormGroup size={sizes.EXTRA_SMALL}>
+                        <FormLabel size={sizes.SMALL}>
+                          Name
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT}
+                          name="name"
+                          {...name}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup size={sizes.EXTRA_SMALL}>
+                        <FormLabel size={sizes.SMALL}>
+                          Format Tags
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT_TAG}
+                          name="formatTags"
+                          {...formatTags}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+                    </div>
+                  </div>
+                </Form>
+
+            }
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Cancel
+          </Button>
+
+          <SpinnerErrorButton
+            isSpinning={isSaving}
+            error={saveError}
+            onPress={onSavePress}
+          >
+            Save
+          </SpinnerErrorButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+EditCustomFormatModalContent.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onContentHeightChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditCustomFormatModalContent;
--- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContentConnector.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContentConnector.js
@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import { setCustomFormatValue, saveCustomFormat } from 'Store/Actions/settingsActions';
+import EditCustomFormatModalContent from './EditCustomFormatModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('customFormats'),
+    (advancedSettings, customFormat) => {
+      return {
+        advancedSettings,
+        ...customFormat
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setCustomFormatValue,
+  saveCustomFormat
+};
+
+class EditCustomFormatModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setCustomFormatValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.saveCustomFormat({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditCustomFormatModalContent
+        {...this.props}
+        onSavePress={this.onSavePress}
+        onInputChange={this.onInputChange}
+      />
+    );
+  }
+}
+
+EditCustomFormatModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  setCustomFormatValue: PropTypes.func.isRequired,
+  saveCustomFormat: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditCustomFormatModalContentConnector);
--- a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
+++ b/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,
--- a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContentConnector.js
+++ b/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}
      />
    );
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css
+++ b/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;
+}
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.js
+++ b/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;
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragPreview.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragPreview.css
@@ -0,0 +1,4 @@
+.dragPreview {
+  width: 380px;
+  opacity: 0.75;
+}
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragPreview.js
+++ b/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);
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragSource.css
+++ b/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;
+}
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItemDragSource.js
+++ b/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));
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css
+++ b/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;
+}
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js
+++ b/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;