New: Release Profiles, Frontend updates (#580)

* New: Release Profiles - UI Updates

* New: Release Profiles - API Changes

* New: Release Profiles - Test Updates

* New: Release Profiles - Backend Updates

* New: Interactive Artist Search

* New: Change Montiored on Album Details Page

* New: Show Duration on Album Details Page

* Fixed: Manual Import not working if no albums are Missing

* Fixed: Sort search input by sortTitle

* Fixed: Queue columnLabel throwing JS error

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -10,6 +10,7 @@ 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 RootFoldersConnector from 'RootFolder/RootFoldersConnector';
 import NamingConnector from './Naming/NamingConnector';
 
 const rescanAfterRefreshOptions = [
@@ -56,14 +57,20 @@ class MediaManagement extends Component {
         />
 
         <PageContentBodyConnector>
+          <NamingConnector />
+
           {
             isFetching &&
-              <LoadingIndicator />
+              <FieldSet legend="Naming Settings">
+                <LoadingIndicator />
+              </FieldSet>
           }
 
           {
             !isFetching && error &&
-              <div>Unable to load Media Management settings</div>
+              <FieldSet legend="Naming Settings">
+                <div>Unable to load Media Management settings</div>
+              </FieldSet>
           }
 
           {
@@ -72,8 +79,6 @@ class MediaManagement extends Component {
                 id="mediaManagementSettings"
                 {...otherProps}
               >
-                <NamingConnector />
-
                 {
                   advancedSettings &&
                     <FieldSet legend="Folders">
@@ -369,6 +374,10 @@ class MediaManagement extends Component {
                 }
               </Form>
           }
+
+          <FieldSet legend="Root Folders">
+            <RootFoldersConnector />
+          </FieldSet>
         </PageContentBodyConnector>
       </PageContent>
     );

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

@@ -13,6 +13,95 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import NamingOption from './NamingOption';
 import styles from './NamingModal.css';
 
+const separatorOptions = [
+  { key: ' ', value: 'Space ( )' },
+  { key: '.', value: 'Period (.)' },
+  { key: '_', value: 'Underscore (_)' },
+  { key: '-', value: 'Dash (-)' }
+];
+
+const caseOptions = [
+  { key: 'title', value: 'Default Case' },
+  { key: 'lower', value: 'Lower Case' },
+  { key: 'upper', value: 'Upper Case' }
+];
+
+const fileNameTokens = [
+  {
+    token: '{Artist Name} - {Album Title} - {track:00} - {Track Title} {Quality Full}',
+    example: 'Artist Name - Album Title - 01 - Track Title MP3-320 Proper'
+  },
+  {
+    token: '{Artist.Name}.{Album.Title}.{track:00}.{TrackClean.Title}.{Quality.Full}',
+    example: 'Artist.Name.Album.Title.01.Track.Title.MP3-320'
+  }
+];
+
+const artistTokens = [
+  { token: '{Artist Name}', example: 'Artist Name' },
+
+  { token: '{Artist NameThe}', example: 'Artist Name, The' },
+
+  { token: '{Artist CleanName}', example: 'Artist Name' }
+];
+
+const albumTokens = [
+  { token: '{Album Title}', example: 'Album Title' },
+
+  { token: '{Album TitleThe}', example: 'Album Title, The' },
+
+  { token: '{Album CleanTitle}', example: 'Album Title' },
+
+  { token: '{Album Type}', example: 'Album Type' },
+
+  { token: '{Album Disambiguation}', example: 'Disambiguation' }
+];
+
+const mediumTokens = [
+  { token: '{medium:0}', example: '1' },
+  { token: '{medium:00}', example: '01' }
+];
+
+const mediumFormatTokens = [
+  { token: '{Medium Format}', example: 'CD' }
+];
+
+const trackTokens = [
+  { token: '{track:0}', example: '1' },
+  { token: '{track:00}', example: '01' }
+];
+
+const releaseDateTokens = [
+  { token: '{Release Year}', example: '2016' }
+];
+
+const trackTitleTokens = [
+  { token: '{Track Title}', example: 'Track Title' },
+  { token: '{Track CleanTitle}', example: 'Track Title' }
+];
+
+const qualityTokens = [
+  { token: '{Quality Full}', example: 'FLAC Proper' },
+  { token: '{Quality Title}', example: 'FLAC' }
+];
+
+const mediaInfoTokens = [
+  { token: '{MediaInfo AudioCodec}', example: 'FLAC' },
+  { token: '{MediaInfo AudioChannels}', example: '2.0' },
+  { token: '{MediaInfo AudioBitsPerSample}', example: '24bit' },
+  { token: '{MediaInfo AudioSampleRate}', example: '44.1kHz' }
+];
+
+const otherTokens = [
+  { token: '{Release Group}', example: 'Rls Grp' },
+  { token: '{Preferred Words}', example: 'iNTERNAL' }
+];
+
+const originalTokens = [
+  { token: '{Original Title}', example: 'Artist.Name.S01E01.HDTV.x264-EVOLVE' },
+  { token: '{Original Filename}', example: 'artist.name.s01e01.hdtv.x264-EVOLVE' }
+];
+
 class NamingModal extends Component {
 
   //
@@ -95,94 +184,6 @@ class NamingModal extends Component {
       case: tokenCase
     } = this.state;
 
-    const separatorOptions = [
-      { key: ' ', value: 'Space ( )' },
-      { key: '.', value: 'Period (.)' },
-      { key: '_', value: 'Underscore (_)' },
-      { key: '-', value: 'Dash (-)' }
-    ];
-
-    const caseOptions = [
-      { key: 'title', value: 'Default Case' },
-      { key: 'lower', value: 'Lower Case' },
-      { key: 'upper', value: 'Upper Case' }
-    ];
-
-    const fileNameTokens = [
-      {
-        token: '{Artist Name} - {Album Title} - {track:00} - {Track Title} {Quality Full}',
-        example: 'Artist Name - Album Title - 01 - Track Title MP3-320 Proper'
-      },
-      {
-        token: '{Artist.Name}.{Album.Title}.{track:00}.{TrackClean.Title}.{Quality.Full}',
-        example: 'Artist.Name.Album.Title.01.Track.Title.MP3-320'
-      }
-    ];
-
-    const artistTokens = [
-      { token: '{Artist Name}', example: 'Artist Name' },
-
-      { token: '{Artist NameThe}', example: 'Artist Name, The' },
-
-      { token: '{Artist CleanName}', example: 'Artist Name' }
-    ];
-
-    const albumTokens = [
-      { token: '{Album Title}', example: 'Album Title' },
-
-      { token: '{Album TitleThe}', example: 'Album Title, The' },
-
-      { token: '{Album CleanTitle}', example: 'Album Title' },
-
-      { token: '{Album Type}', example: 'Album Type' },
-
-      { token: '{Album Disambiguation}', example: 'Disambiguation' }
-    ];
-
-    const mediumTokens = [
-      { token: '{medium:0}', example: '1' },
-      { token: '{medium:00}', example: '01' }
-    ];
-
-    const mediumFormatTokens = [
-      { token: '{Medium Format}', example: 'CD' }
-    ];
-
-    const trackTokens = [
-      { token: '{track:0}', example: '1' },
-      { token: '{track:00}', example: '01' }
-    ];
-
-    const releaseDateTokens = [
-      { token: '{Release Year}', example: '2016' }
-    ];
-
-    const trackTitleTokens = [
-      { token: '{Track Title}', example: 'Track Title' },
-      { token: '{Track CleanTitle}', example: 'Track Title' }
-    ];
-
-    const qualityTokens = [
-      { token: '{Quality Full}', example: 'FLAC Proper' },
-      { token: '{Quality Title}', example: 'FLAC' }
-    ];
-
-    const mediaInfoTokens = [
-      { token: '{MediaInfo AudioCodec}', example: 'FLAC' },
-      { token: '{MediaInfo AudioChannels}', example: '2.0' },
-      { token: '{MediaInfo AudioBitsPerSample}', example: '24bit' },
-      { token: '{MediaInfo AudioSampleRate}', example: '44.1kHz' }
-    ];
-
-    const releaseGroupTokens = [
-      { token: '{Release Group}', example: 'Rls Grp' }
-    ];
-
-    const originalTokens = [
-      { token: '{Original Title}', example: 'Artist.Name.S01E01.HDTV.x264-EVOLVE' },
-      { token: '{Original Filename}', example: 'artist.name.s01e01.hdtv.x264-EVOLVE' }
-    ];
-
     return (
       <Modal
         isOpen={isOpen}
@@ -451,10 +452,10 @@ class NamingModal extends Component {
                     </div>
                   </FieldSet>
 
-                  <FieldSet legend="Release Group">
+                  <FieldSet legend="Other">
                     <div className={styles.groups}>
                       {
-                        releaseGroupTokens.map(({ token, example }) => {
+                        otherTokens.map(({ token, example }) => {
                           return (
                             <NamingOption
                               key={token}

frontend/src/Settings/MediaManagement/Naming/NamingOption.css

@@ -17,7 +17,7 @@
 }
 
 .small {
-  width: 420px;
+  width: 460px;
 }
 
 .large {
@@ -32,6 +32,9 @@
 }
 
 .example {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
   flex: 0 0 50%;
   padding: 6px 16px;
   background-color: #ddd;