New: Get Custom Formats Working in Aphrodite

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}
       />
     );