open-source-mirrors
/
Readarr
mirror of https://github.com/Readarr/Readarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New: Simplify naming separator in UI

Browse Source 
Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
pull/6/head
Qstick 7 years ago
parent 74c2da5088
commit 457955c306
3 changed files with 72 additions and 48 deletions
Show Stats Download Patch File Download Diff File

1
frontend/src/Settings/MediaManagement/Naming/NamingModal.css
Unescape View File

@ -13,5 +13,6 @@
.namingSelect {
composes: select from 'Components/Form/SelectInput.css';
margin-left: 10px;
width: 200px;
}

105
frontend/src/Settings/MediaManagement/Naming/NamingModal.js
Unescape View File

@ -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}
/>

14
frontend/src/Settings/MediaManagement/Naming/NamingOption.js
Unescape View File

@ -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]),

Write Preview
Loading…
Cancel
Save