open-source-mirrors
/
Lidarr
mirror of https://github.com/Lidarr/Lidarr
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/362/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 { .namingSelect {
composes: select from 'Components/Form/SelectInput.css'; composes: select from 'Components/Form/SelectInput.css';
margin-left: 10px;
width: 200px; 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._selectionEnd = null;
this.state = { this.state = {
separator: ' ',
case: 'title' case: 'title'
}; };
} }
@ -32,7 +33,11 @@ class NamingModal extends Component {
// //
// Listeners // Listeners
onNamingCaseChange = (event) => { onTokenSeparatorChange = (event) => {
this.setState({ separator: event.value });
}
onTokenCaseChange = (event) => {
this.setState({ case: event.value }); this.setState({ case: event.value });
} }
@ -85,7 +90,19 @@ class NamingModal extends Component {
onModalClose onModalClose
} = this.props; } = 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: 'title', value: 'Default Case' },
{ key: 'lower', value: 'Lower Case' }, { key: 'lower', value: 'Lower Case' },
{ key: 'upper', value: 'Upper Case' } { key: 'upper', value: 'Upper Case' }
@ -104,26 +121,18 @@ class NamingModal extends Component {
const artistTokens = [ const artistTokens = [
{ token: '{Artist Name}', example: 'Artist Name' }, { 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 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 = [ const albumTokens = [
{ token: '{Album Title}', example: 'Album Title' }, { 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 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_CleanTitle}', example: 'Album_Title' },
{ token: '{Album Type}', example: 'Album Type' } { token: '{Album Type}', example: 'Album Type' }
]; ];
@ -148,40 +157,24 @@ class NamingModal extends Component {
const trackTitleTokens = [ 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_Title}', example: 'Track_Title' },
{ token: '{Track CleanTitle}', example: 'Track Title' },
{ token: '{Track.CleanTitle}', example: 'Track.Title' },
{ token: '{Track_CleanTitle}', example: 'Track_Title' }
]; ];
const qualityTokens = [ 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 Title}', example: 'HDTV 720p' }
{ 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' }
]; ];
const mediaInfoTokens = [ const mediaInfoTokens = [
{ token: '{MediaInfo Simple}', example: 'x264 DTS' }, { 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_Full}', example: 'x264_DTS_[EN+DE]' },
{ token: '{MediaInfo VideoCodec}', example: 'x264' }, { token: '{MediaInfo VideoCodec}', example: 'x264' },
{ token: '{MediaInfo AudioFormat}', example: 'DTS' }, { token: '{MediaInfo AudioFormat}', example: 'DTS' },
{ token: '{MediaInfo AudioChannels}', example: '5.1' } { token: '{MediaInfo AudioChannels}', example: '5.1' }
]; ];
const releaseGroupTokens = [ 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 = [ const originalTokens = [
@ -203,10 +196,18 @@ class NamingModal extends Component {
<div className={styles.namingSelectContainer}> <div className={styles.namingSelectContainer}>
<SelectInput <SelectInput
className={styles.namingSelect} className={styles.namingSelect}
name="namingSelect" name="separator"
value={this.state.case} value={tokenSeparator}
values={namingOptions} values={separatorOptions}
onChange={this.onNamingCaseChange} onChange={this.onTokenSeparatorChange}
/>
<SelectInput
className={styles.namingSelect}
name="case"
value={tokenCase}
values={caseOptions}
onChange={this.onTokenCaseChange}
/> />
</div> </div>
@ -224,7 +225,8 @@ class NamingModal extends Component {
token={token} token={token}
example={example} example={example}
isFullFilename={true} isFullFilename={true}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
size={sizes.LARGE} size={sizes.LARGE}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
@ -247,7 +249,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -271,7 +274,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -292,7 +296,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -318,7 +323,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -339,7 +345,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -360,7 +367,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -387,7 +395,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -408,7 +417,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -429,7 +439,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -450,7 +461,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />
); );
@ -471,7 +483,8 @@ class NamingModal extends Component {
value={value} value={value}
token={token} token={token}
example={example} example={example}
tokenCase={this.state.case} tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
size={sizes.LARGE} size={sizes.LARGE}
onPress={this.onOptionPress} onPress={this.onOptionPress}
/> />

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

@ -13,6 +13,7 @@ class NamingOption extends Component {
onPress = () => { onPress = () => {
const { const {
token, token,
tokenSeparator,
tokenCase, tokenCase,
isFullFilename, isFullFilename,
onPress onPress
@ -20,6 +21,8 @@ class NamingOption extends Component {
let tokenValue = token; let tokenValue = token;
tokenValue = tokenValue.replace(/ /g, tokenSeparator);
if (tokenCase === 'lower') { if (tokenCase === 'lower') {
tokenValue = token.toLowerCase(); tokenValue = token.toLowerCase();
} else if (tokenCase === 'upper') { } else if (tokenCase === 'upper') {
@ -34,6 +37,7 @@ class NamingOption extends Component {
render() { render() {
const { const {
token, token,
tokenSeparator,
example, example,
tokenCase, tokenCase,
isFullFilename, isFullFilename,
@ -50,8 +54,13 @@ class NamingOption extends Component {
)} )}
onPress={this.onPress} onPress={this.onPress}
> >
<div className={styles.token}>{token}</div> <div className={styles.token}>
<div className={styles.example}>{example}</div> {token.replace(/ /g, tokenSeparator)}
</div>
<div className={styles.example}>
{example.replace(/ /g, tokenSeparator)}
</div>
</Link> </Link>
); );
} }
@ -60,6 +69,7 @@ class NamingOption extends Component {
NamingOption.propTypes = { NamingOption.propTypes = {
token: PropTypes.string.isRequired, token: PropTypes.string.isRequired,
example: PropTypes.string.isRequired, example: PropTypes.string.isRequired,
tokenSeparator: PropTypes.string.isRequired,
tokenCase: PropTypes.string.isRequired, tokenCase: PropTypes.string.isRequired,
isFullFilename: PropTypes.bool.isRequired, isFullFilename: PropTypes.bool.isRequired,
size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]), size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),

Write Preview
Loading…
Cancel
Save