From 457955c306efeda2694eb16bea83ccc5a9d8c361 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sun, 20 May 2018 01:18:24 -0400
Subject: [PATCH] New: Simplify naming separator in UI

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 .../MediaManagement/Naming/NamingModal.css    |   1 +
 .../MediaManagement/Naming/NamingModal.js     | 105 ++++++++++--------
 .../MediaManagement/Naming/NamingOption.js    |  14 ++-
 3 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
index 708a763eb..de6a54e7f 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
@@ -13,5 +13,6 @@
 .namingSelect {
   composes: select from 'Components/Form/SelectInput.css';
 
+  margin-left: 10px;
   width: 200px;
 }
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingModal.js b/frontend/src/Settings/MediaManagement/Naming/NamingModal.js
index 6b13bbad7..79a5b0a1e 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.js
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.js
@@ -25,6 +25,7 @@ class NamingModal extends Component {
     this._selectionEnd = null;
 
     this.state = {
+      separator: ' ',
       case: 'title'
     };
   }
@@ -32,7 +33,11 @@ class NamingModal extends Component {
   //
   // Listeners
 
-  onNamingCaseChange = (event) => {
+  onTokenSeparatorChange = (event) => {
+    this.setState({ separator: event.value });
+  }
+
+  onTokenCaseChange = (event) => {
     this.setState({ case: event.value });
   }
 
@@ -85,7 +90,19 @@ class NamingModal extends Component {
       onModalClose
     } = this.props;
 
-    const namingOptions = [
+    const {
+      separator: tokenSeparator,
+      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' }
@@ -104,26 +121,18 @@ class NamingModal extends Component {
 
     const artistTokens = [
       { token: '{Artist Name}', example: 'Artist Name' },
-      { token: '{Artist.Name}', example: 'Artist.Name' },
-      { token: '{Artist_Name}', example: 'Artist_Name' },
 
       { token: '{Artist NameThe}', example: 'Artist Name, The' },
 
-      { token: '{Artist CleanName}', example: 'Artist Name' },
-      { token: '{Artist.CleanName}', example: 'Artist.Name' },
-      { token: '{Artist_CleanName}', example: 'Artist_Name' }
+      { token: '{Artist CleanName}', example: 'Artist Name' }
     ];
 
     const albumTokens = [
       { token: '{Album Title}', example: 'Album Title' },
-      { token: '{Album.Title}', example: 'Album.Title' },
-      { token: '{Album_Name}', example: 'Album_Name' },
 
       { token: '{Album TitleThe}', example: 'Album Title, The' },
 
       { token: '{Album CleanTitle}', example: 'Album Title' },
-      { token: '{Album.CleanTitle}', example: 'Album.Title' },
-      { token: '{Album_CleanTitle}', example: 'Album_Title' },
 
       { token: '{Album Type}', example: 'Album Type' }
     ];
@@ -148,40 +157,24 @@ class NamingModal extends Component {
 
     const trackTitleTokens = [
       { token: '{Track Title}', example: 'Track Title' },
-      { token: '{Track.Title}', example: 'Track.Title' },
-      { token: '{Track_Title}', example: 'Track_Title' },
-      { token: '{Track CleanTitle}', example: 'Track Title' },
-      { token: '{Track.CleanTitle}', example: 'Track.Title' },
-      { token: '{Track_CleanTitle}', example: 'Track_Title' }
+      { token: '{Track CleanTitle}', example: 'Track Title' }
     ];
 
     const qualityTokens = [
       { token: '{Quality Full}', example: 'HDTV 720p Proper' },
-      { token: '{Quality-Full}', example: 'HDTV-720p-Proper' },
-      { token: '{Quality.Full}', example: 'HDTV.720p.Proper' },
-      { token: '{Quality_Full}', example: 'HDTV_720p_Proper' },
-      { token: '{Quality Title}', example: 'HDTV 720p' },
-      { token: '{Quality-Title}', example: 'HDTV-720p' },
-      { token: '{Quality.Title}', example: 'HDTV.720p' },
-      { token: '{Quality_Title}', example: 'HDTV_720p' }
+      { token: '{Quality Title}', example: 'HDTV 720p' }
     ];
 
     const mediaInfoTokens = [
       { token: '{MediaInfo Simple}', example: 'x264 DTS' },
-      { token: '{MediaInfo.Simple}', example: 'x264.DTS' },
-      { token: '{MediaInfo_Simple}', example: 'x264_DTS' },
       { token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]' },
-      { token: '{MediaInfo.Full}', example: 'x264.DTS.[EN+DE]' },
-      { token: '{MediaInfo_Full}', example: 'x264_DTS_[EN+DE]' },
       { token: '{MediaInfo VideoCodec}', example: 'x264' },
       { token: '{MediaInfo AudioFormat}', example: 'DTS' },
       { token: '{MediaInfo AudioChannels}', example: '5.1' }
     ];
 
     const releaseGroupTokens = [
-      { token: '{Release Group}', example: 'Rls Grp' },
-      { token: '{Release.Group}', example: 'Rls.Grp' },
-      { token: '{Release_Group}', example: 'Rls_Grp' }
+      { token: '{Release Group}', example: 'Rls Grp' }
     ];
 
     const originalTokens = [
@@ -203,10 +196,18 @@ class NamingModal extends Component {
             <div className={styles.namingSelectContainer}>
               <SelectInput
                 className={styles.namingSelect}
-                name="namingSelect"
-                value={this.state.case}
-                values={namingOptions}
-                onChange={this.onNamingCaseChange}
+                name="separator"
+                value={tokenSeparator}
+                values={separatorOptions}
+                onChange={this.onTokenSeparatorChange}
+              />
+
+              <SelectInput
+                className={styles.namingSelect}
+                name="case"
+                value={tokenCase}
+                values={caseOptions}
+                onChange={this.onTokenCaseChange}
               />
             </div>
 
@@ -224,7 +225,8 @@ class NamingModal extends Component {
                             token={token}
                             example={example}
                             isFullFilename={true}
-                            tokenCase={this.state.case}
+                            tokenSeparator={tokenSeparator}
+                            tokenCase={tokenCase}
                             size={sizes.LARGE}
                             onPress={this.onOptionPress}
                           />
@@ -247,7 +249,8 @@ class NamingModal extends Component {
                         value={value}
                         token={token}
                         example={example}
-                        tokenCase={this.state.case}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
                         onPress={this.onOptionPress}
                       />
                     );
@@ -271,7 +274,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -292,7 +296,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -318,7 +323,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -339,7 +345,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -360,7 +367,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -387,7 +395,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -408,7 +417,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -429,7 +439,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -450,7 +461,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               onPress={this.onOptionPress}
                             />
                           );
@@ -471,7 +483,8 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
-                              tokenCase={this.state.case}
+                              tokenSeparator={tokenSeparator}
+                              tokenCase={tokenCase}
                               size={sizes.LARGE}
                               onPress={this.onOptionPress}
                             />
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingOption.js b/frontend/src/Settings/MediaManagement/Naming/NamingOption.js
index a452e7dc0..269266a5f 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingOption.js
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.js
@@ -13,6 +13,7 @@ class NamingOption extends Component {
   onPress = () => {
     const {
       token,
+      tokenSeparator,
       tokenCase,
       isFullFilename,
       onPress
@@ -20,6 +21,8 @@ class NamingOption extends Component {
 
     let tokenValue = token;
 
+    tokenValue = tokenValue.replace(/ /g, tokenSeparator);
+
     if (tokenCase === 'lower') {
       tokenValue = token.toLowerCase();
     } else if (tokenCase === 'upper') {
@@ -34,6 +37,7 @@ class NamingOption extends Component {
   render() {
     const {
       token,
+      tokenSeparator,
       example,
       tokenCase,
       isFullFilename,
@@ -50,8 +54,13 @@ class NamingOption extends Component {
         )}
         onPress={this.onPress}
       >
-        <div className={styles.token}>{token}</div>
-        <div className={styles.example}>{example}</div>
+        <div className={styles.token}>
+          {token.replace(/ /g, tokenSeparator)}
+        </div>
+
+        <div className={styles.example}>
+          {example.replace(/ /g, tokenSeparator)}
+        </div>
       </Link>
     );
   }
@@ -60,6 +69,7 @@ class NamingOption extends Component {
 NamingOption.propTypes = {
   token: PropTypes.string.isRequired,
   example: PropTypes.string.isRequired,
+  tokenSeparator: PropTypes.string.isRequired,
   tokenCase: PropTypes.string.isRequired,
   isFullFilename: PropTypes.bool.isRequired,
   size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),