New: Colon replacement naming option

(cherry picked from commit b3260ba8661f3b2c6996eee7e04974e8f41365d5)

frontend/src/Settings/MediaManagement/Naming/Naming.js

@@ -74,6 +74,15 @@ class Naming extends Component {
     } = this.state;
 
     const renameBooks = hasSettings && settings.renameBooks.value;
+    const replaceIllegalCharacters = hasSettings && settings.replaceIllegalCharacters.value;
+
+    const colonReplacementOptions = [
+      { key: 0, value: translate('Delete') },
+      { key: 1, value: translate('ReplaceWithDash') },
+      { key: 2, value: translate('ReplaceWithSpaceDash') },
+      { key: 3, value: translate('ReplaceWithSpaceDashSpace') },
+      { key: 4, value: translate('SmartReplace'), hint: translate('DashOrSpaceDashDependingOnName') }
+    ];
 
     const standardBookFormatHelpTexts = [];
     const standardBookFormatErrors = [];
@@ -145,6 +154,24 @@ class Naming extends Component {
                 />
               </FormGroup>
 
+              {
+                replaceIllegalCharacters ?
+                  <FormGroup>
+                    <FormLabel>
+                      {translate('ColonReplacement')}
+                    </FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="colonReplacementFormat"
+                      values={colonReplacementOptions}
+                      onChange={onInputChange}
+                      {...settings.colonReplacementFormat}
+                    />
+                  </FormGroup> :
+                  null
+              }
+
               {
                 renameBooks &&
                   <div>