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

Convert Naming options to TypeScript

Browse Source
pull/7285/head
Bogdan 5 months ago committed by Mark McDowall
parent 32fa63d24d
commit a641f2897a
16 changed files with 1241 additions and 1262 deletions
Show Stats Download Patch File Download Diff File

11
frontend/src/App/State/SettingsAppState.ts
Unescape View File

@ -16,6 +16,8 @@ import IndexerFlag from 'typings/IndexerFlag';
import Notification from 'typings/Notification'; import Notification from 'typings/Notification';
import QualityProfile from 'typings/QualityProfile'; import QualityProfile from 'typings/QualityProfile';
import General from 'typings/Settings/General'; import General from 'typings/Settings/General';
import NamingConfig from 'typings/Settings/NamingConfig';
import NamingExample from 'typings/Settings/NamingExample';
import ReleaseProfile from 'typings/Settings/ReleaseProfile'; import ReleaseProfile from 'typings/Settings/ReleaseProfile';
import UiSettings from 'typings/Settings/UiSettings'; import UiSettings from 'typings/Settings/UiSettings';
@ -30,6 +32,13 @@ export interface GeneralAppState
extends AppSectionItemState<General>, extends AppSectionItemState<General>,
AppSectionSaveState {} AppSectionSaveState {}
export interface NamingAppState
extends AppSectionItemState<NamingConfig>,
AppSectionSaveState {}
export interface NamingExamplesAppState
extends AppSectionItemState<NamingExample> {}
export interface ImportListAppState export interface ImportListAppState
extends AppSectionState<ImportList>, extends AppSectionState<ImportList>,
AppSectionDeleteState, AppSectionDeleteState,
@ -88,6 +97,8 @@ interface SettingsAppState {
indexerFlags: IndexerFlagSettingsAppState; indexerFlags: IndexerFlagSettingsAppState;
indexers: IndexerAppState; indexers: IndexerAppState;
languages: LanguageSettingsAppState; languages: LanguageSettingsAppState;
naming: NamingAppState;
namingExamples: NamingExamplesAppState;
notifications: NotificationAppState; notifications: NotificationAppState;
qualityProfiles: QualityProfilesAppState; qualityProfiles: QualityProfilesAppState;
releaseProfiles: ReleaseProfilesAppState; releaseProfiles: ReleaseProfilesAppState;

4
frontend/src/Settings/MediaManagement/MediaManagement.js
Unescape View File

@ -13,7 +13,7 @@ import { inputTypes, kinds, sizes } from 'Helpers/Props';
import RootFolders from 'RootFolder/RootFolders'; import RootFolders from 'RootFolder/RootFolders';
import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector'; import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
import translate from 'Utilities/String/translate'; import translate from 'Utilities/String/translate';
import NamingConnector from './Naming/NamingConnector'; import Naming from './Naming/Naming';
import AddRootFolder from './RootFolder/AddRootFolder'; import AddRootFolder from './RootFolder/AddRootFolder';
const episodeTitleRequiredOptions = [ const episodeTitleRequiredOptions = [
@ -127,7 +127,7 @@ class MediaManagement extends Component {
/> />
<PageContentBody> <PageContentBody>
<NamingConnector /> <Naming />
{ {
isFetching ? isFetching ?

425
frontend/src/Settings/MediaManagement/Naming/Naming.js
Unescape View File

@ -1,425 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Alert from 'Components/Alert';
import FieldSet from 'Components/FieldSet';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputButton from 'Components/Form/FormInputButton';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import { inputTypes, kinds, sizes } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import NamingModal from './NamingModal';
import styles from './Naming.css';
class Naming extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isNamingModalOpen: false,
namingModalOptions: null
};
}
//
// Listeners
onStandardNamingModalOpenClick = () => {
this.setState({
isNamingModalOpen: true,
namingModalOptions: {
name: 'standardEpisodeFormat',
season: true,
episode: true,
additional: true
}
});
};
onDailyNamingModalOpenClick = () => {
this.setState({
isNamingModalOpen: true,
namingModalOptions: {
name: 'dailyEpisodeFormat',
season: true,
episode: true,
daily: true,
additional: true
}
});
};
onAnimeNamingModalOpenClick = () => {
this.setState({
isNamingModalOpen: true,
namingModalOptions: {
name: 'animeEpisodeFormat',
season: true,
episode: true,
anime: true,
additional: true
}
});
};
onSeriesFolderNamingModalOpenClick = () => {
this.setState({
isNamingModalOpen: true,
namingModalOptions: {
name: 'seriesFolderFormat'
}
});
};
onSeasonFolderNamingModalOpenClick = () => {
this.setState({
isNamingModalOpen: true,
namingModalOptions: {
name: 'seasonFolderFormat',
season: true
}
});
};
onSpecialsFolderNamingModalOpenClick = () => {
this.setState({
isNamingModalOpen: true,
namingModalOptions: {
name: 'specialsFolderFormat',
season: true
}
});
};
onNamingModalClose = () => {
this.setState({ isNamingModalOpen: false });
};
//
// Render
render() {
const {
advancedSettings,
isFetching,
error,
settings,
hasSettings,
examples,
examplesPopulated,
onInputChange
} = this.props;
const {
isNamingModalOpen,
namingModalOptions
} = this.state;
const renameEpisodes = hasSettings && settings.renameEpisodes.value;
const replaceIllegalCharacters = hasSettings && settings.replaceIllegalCharacters.value;
const multiEpisodeStyleOptions = [
{ key: 0, value: translate('Extend'), hint: 'S01E01-02-03' },
{ key: 1, value: translate('Duplicate'), hint: 'S01E01.S01E02' },
{ key: 2, value: translate('Repeat'), hint: 'S01E01E02E03' },
{ key: 3, value: translate('Scene'), hint: 'S01E01-E02-E03' },
{ key: 4, value: translate('Range'), hint: 'S01E01-03' },
{ key: 5, value: translate('PrefixedRange'), hint: 'S01E01-E03' }
];
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('SmartReplaceHint') },
{ key: 5, value: translate('Custom'), hint: translate('CustomColonReplacementFormatHint') }
];
const standardEpisodeFormatHelpTexts = [];
const standardEpisodeFormatErrors = [];
const dailyEpisodeFormatHelpTexts = [];
const dailyEpisodeFormatErrors = [];
const animeEpisodeFormatHelpTexts = [];
const animeEpisodeFormatErrors = [];
const seriesFolderFormatHelpTexts = [];
const seriesFolderFormatErrors = [];
const seasonFolderFormatHelpTexts = [];
const seasonFolderFormatErrors = [];
const specialsFolderFormatHelpTexts = [];
const specialsFolderFormatErrors = [];
if (examplesPopulated) {
if (examples.singleEpisodeExample) {
standardEpisodeFormatHelpTexts.push(`${translate('SingleEpisode')}: ${examples.singleEpisodeExample}`);
} else {
standardEpisodeFormatErrors.push({ message: translate('SingleEpisodeInvalidFormat') });
}
if (examples.multiEpisodeExample) {
standardEpisodeFormatHelpTexts.push(`${translate('MultiEpisode')}: ${examples.multiEpisodeExample}`);
} else {
standardEpisodeFormatErrors.push({ message: translate('MultiEpisodeInvalidFormat') });
}
if (examples.dailyEpisodeExample) {
dailyEpisodeFormatHelpTexts.push(`${translate('Example')}: ${examples.dailyEpisodeExample}`);
} else {
dailyEpisodeFormatErrors.push({ message: translate('InvalidFormat') });
}
if (examples.animeEpisodeExample) {
animeEpisodeFormatHelpTexts.push(`${translate('SingleEpisode')}: ${examples.animeEpisodeExample}`);
} else {
animeEpisodeFormatErrors.push({ message: translate('SingleEpisodeInvalidFormat') });
}
if (examples.animeMultiEpisodeExample) {
animeEpisodeFormatHelpTexts.push(`${translate('MultiEpisode')}: ${examples.animeMultiEpisodeExample}`);
} else {
animeEpisodeFormatErrors.push({ message: translate('MultiEpisodeInvalidFormat') });
}
if (examples.seriesFolderExample) {
seriesFolderFormatHelpTexts.push(`${translate('Example')}: ${examples.seriesFolderExample}`);
} else {
seriesFolderFormatErrors.push({ message: translate('InvalidFormat') });
}
if (examples.seasonFolderExample) {
seasonFolderFormatHelpTexts.push(`${translate('Example')}: ${examples.seasonFolderExample}`);
} else {
seasonFolderFormatErrors.push({ message: translate('InvalidFormat') });
}
if (examples.specialsFolderExample) {
specialsFolderFormatHelpTexts.push(`${translate('Example')}: ${examples.specialsFolderExample}`);
} else {
specialsFolderFormatErrors.push({ message: translate('InvalidFormat') });
}
}
return (
<FieldSet legend={translate('EpisodeNaming')}>
{
isFetching &&
<LoadingIndicator />
}
{
!isFetching && error &&
<Alert kind={kinds.DANGER}>
{translate('NamingSettingsLoadError')}
</Alert>
}
{
hasSettings && !isFetching && !error &&
<Form>
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('RenameEpisodes')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="renameEpisodes"
helpText={translate('RenameEpisodesHelpText')}
onChange={onInputChange}
{...settings.renameEpisodes}
/>
</FormGroup>
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('ReplaceIllegalCharacters')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="replaceIllegalCharacters"
helpText={translate('ReplaceIllegalCharactersHelpText')}
onChange={onInputChange}
{...settings.replaceIllegalCharacters}
/>
</FormGroup>
{
replaceIllegalCharacters ?
<FormGroup>
<FormLabel>{translate('ColonReplacement')}</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="colonReplacementFormat"
values={colonReplacementOptions}
helpText={translate('ColonReplacementFormatHelpText')}
onChange={onInputChange}
{...settings.colonReplacementFormat}
/>
</FormGroup> :
null
}
{
replaceIllegalCharacters && settings.colonReplacementFormat.value === 5 ?
<FormGroup>
<FormLabel>{translate('CustomColonReplacement')}</FormLabel>
<FormInputGroup
type={inputTypes.TEXT}
name="customColonReplacementFormat"
helpText={translate('CustomColonReplacementFormatHelpText')}
onChange={onInputChange}
{...settings.customColonReplacementFormat}
/>
</FormGroup> :
null
}
{
renameEpisodes &&
<div>
<FormGroup size={sizes.LARGE}>
<FormLabel>{translate('StandardEpisodeFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="standardEpisodeFormat"
buttons={<FormInputButton onPress={this.onStandardNamingModalOpenClick}>?</FormInputButton>}
onChange={onInputChange}
{...settings.standardEpisodeFormat}
helpTexts={standardEpisodeFormatHelpTexts}
errors={[...standardEpisodeFormatErrors, ...settings.standardEpisodeFormat.errors]}
/>
</FormGroup>
<FormGroup size={sizes.LARGE}>
<FormLabel>{translate('DailyEpisodeFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="dailyEpisodeFormat"
buttons={<FormInputButton onPress={this.onDailyNamingModalOpenClick}>?</FormInputButton>}
onChange={onInputChange}
{...settings.dailyEpisodeFormat}
helpTexts={dailyEpisodeFormatHelpTexts}
errors={[...dailyEpisodeFormatErrors, ...settings.dailyEpisodeFormat.errors]}
/>
</FormGroup>
<FormGroup size={sizes.LARGE}>
<FormLabel>{translate('AnimeEpisodeFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="animeEpisodeFormat"
buttons={<FormInputButton onPress={this.onAnimeNamingModalOpenClick}>?</FormInputButton>}
onChange={onInputChange}
{...settings.animeEpisodeFormat}
helpTexts={animeEpisodeFormatHelpTexts}
errors={[...animeEpisodeFormatErrors, ...settings.animeEpisodeFormat.errors]}
/>
</FormGroup>
</div>
}
<FormGroup
advancedSettings={advancedSettings}
isAdvanced={true}
>
<FormLabel>{translate('SeriesFolderFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="seriesFolderFormat"
buttons={<FormInputButton onPress={this.onSeriesFolderNamingModalOpenClick}>?</FormInputButton>}
onChange={onInputChange}
{...settings.seriesFolderFormat}
helpTexts={[translate('SeriesFolderFormatHelpText'), ...seriesFolderFormatHelpTexts]}
errors={[...seriesFolderFormatErrors, ...settings.seriesFolderFormat.errors]}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('SeasonFolderFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="seasonFolderFormat"
buttons={<FormInputButton onPress={this.onSeasonFolderNamingModalOpenClick}>?</FormInputButton>}
onChange={onInputChange}
{...settings.seasonFolderFormat}
helpTexts={seasonFolderFormatHelpTexts}
errors={[...seasonFolderFormatErrors, ...settings.seasonFolderFormat.errors]}
/>
</FormGroup>
<FormGroup
advancedSettings={advancedSettings}
isAdvanced={true}
>
<FormLabel>{translate('SpecialsFolderFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="specialsFolderFormat"
buttons={<FormInputButton onPress={this.onSpecialsFolderNamingModalOpenClick}>?</FormInputButton>}
onChange={onInputChange}
{...settings.specialsFolderFormat}
helpTexts={specialsFolderFormatHelpTexts}
errors={[...specialsFolderFormatErrors, ...settings.specialsFolderFormat.errors]}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('MultiEpisodeStyle')}</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="multiEpisodeStyle"
values={multiEpisodeStyleOptions}
onChange={onInputChange}
{...settings.multiEpisodeStyle}
/>
</FormGroup>
{
namingModalOptions &&
<NamingModal
isOpen={isNamingModalOpen}
advancedSettings={advancedSettings}
{...namingModalOptions}
value={settings[namingModalOptions.name].value}
onInputChange={onInputChange}
onModalClose={this.onNamingModalClose}
/>
}
</Form>
}
</FieldSet>
);
}
}
Naming.propTypes = {
advancedSettings: PropTypes.bool.isRequired,
isFetching: PropTypes.bool.isRequired,
error: PropTypes.object,
settings: PropTypes.object.isRequired,
hasSettings: PropTypes.bool.isRequired,
examples: PropTypes.object.isRequired,
examplesPopulated: PropTypes.bool.isRequired,
onInputChange: PropTypes.func.isRequired
};
export default Naming;

525
frontend/src/Settings/MediaManagement/Naming/Naming.tsx
Unescape View File

@ -0,0 +1,525 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { createSelector } from 'reselect';
import AppState from 'App/State/AppState';
import Alert from 'Components/Alert';
import FieldSet from 'Components/FieldSet';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputButton from 'Components/Form/FormInputButton';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
import { inputTypes, kinds, sizes } from 'Helpers/Props';
import { clearPendingChanges } from 'Store/Actions/baseActions';
import {
fetchNamingExamples,
fetchNamingSettings,
setNamingSettingsValue,
} from 'Store/Actions/settingsActions';
import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
import NamingConfig from 'typings/Settings/NamingConfig';
import translate from 'Utilities/String/translate';
import NamingModal from './NamingModal';
import styles from './Naming.css';
const SECTION = 'naming';
function createNamingSelector() {
return createSelector(
(state: AppState) => state.settings.advancedSettings,
(state: AppState) => state.settings.namingExamples,
createSettingsSectionSelector(SECTION),
(advancedSettings, namingExamples, sectionSettings) => {
return {
advancedSettings,
examples: namingExamples.item,
examplesPopulated: namingExamples.isPopulated,
...sectionSettings,
};
}
);
}
interface NamingModalOptions {
name: keyof Pick<
NamingConfig,
| 'standardEpisodeFormat'
| 'dailyEpisodeFormat'
| 'animeEpisodeFormat'
| 'seriesFolderFormat'
| 'seasonFolderFormat'
| 'specialsFolderFormat'
>;
season?: boolean;
episode?: boolean;
daily?: boolean;
anime?: boolean;
additional?: boolean;
}
function Naming() {
const {
advancedSettings,
isFetching,
error,
settings,
hasSettings,
examples,
examplesPopulated,
} = useSelector(createNamingSelector());
const dispatch = useDispatch();
const [isNamingModalOpen, setNamingModalOpen, setNamingModalClosed] =
useModalOpenState(false);
const [namingModalOptions, setNamingModalOptions] =
useState<NamingModalOptions | null>(null);
const namingExampleTimeout = useRef<ReturnType<typeof setTimeout>>();
useEffect(() => {
dispatch(fetchNamingSettings());
dispatch(fetchNamingExamples());
return () => {
dispatch(clearPendingChanges({ section: SECTION }));
};
}, [dispatch]);
const handleInputChange = useCallback(
({ name, value }: { name: string; value: string }) => {
// @ts-expect-error 'setNamingSettingsValue' isn't typed yet
dispatch(setNamingSettingsValue({ name, value }));
if (namingExampleTimeout.current) {
clearTimeout(namingExampleTimeout.current);
}
namingExampleTimeout.current = setTimeout(() => {
dispatch(fetchNamingExamples());
}, 1000);
},
[dispatch]
);
const onStandardNamingModalOpenClick = useCallback(() => {
setNamingModalOpen();
setNamingModalOptions({
name: 'standardEpisodeFormat',
season: true,
episode: true,
additional: true,
});
}, [setNamingModalOpen, setNamingModalOptions]);
const onDailyNamingModalOpenClick = useCallback(() => {
setNamingModalOpen();
setNamingModalOptions({
name: 'dailyEpisodeFormat',
season: true,
episode: true,
daily: true,
additional: true,
});
}, [setNamingModalOpen, setNamingModalOptions]);
const onAnimeNamingModalOpenClick = useCallback(() => {
setNamingModalOpen();
setNamingModalOptions({
name: 'animeEpisodeFormat',
season: true,
episode: true,
anime: true,
additional: true,
});
}, [setNamingModalOpen, setNamingModalOptions]);
const onSeriesFolderNamingModalOpenClick = useCallback(() => {
setNamingModalOpen();
setNamingModalOptions({
name: 'seriesFolderFormat',
});
}, [setNamingModalOpen, setNamingModalOptions]);
const onSeasonFolderNamingModalOpenClick = useCallback(() => {
setNamingModalOpen();
setNamingModalOptions({
name: 'seasonFolderFormat',
season: true,
});
}, [setNamingModalOpen, setNamingModalOptions]);
const onSpecialsFolderNamingModalOpenClick = useCallback(() => {
setNamingModalOpen();
setNamingModalOptions({
name: 'specialsFolderFormat',
season: true,
});
}, [setNamingModalOpen, setNamingModalOptions]);
const renameEpisodes = hasSettings && settings.renameEpisodes.value;
const replaceIllegalCharacters =
hasSettings && settings.replaceIllegalCharacters.value;
const multiEpisodeStyleOptions = [
{ key: 0, value: translate('Extend'), hint: 'S01E01-02-03' },
{ key: 1, value: translate('Duplicate'), hint: 'S01E01.S01E02' },
{ key: 2, value: translate('Repeat'), hint: 'S01E01E02E03' },
{ key: 3, value: translate('Scene'), hint: 'S01E01-E02-E03' },
{ key: 4, value: translate('Range'), hint: 'S01E01-03' },
{ key: 5, value: translate('PrefixedRange'), hint: 'S01E01-E03' },
];
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('SmartReplaceHint'),
},
{
key: 5,
value: translate('Custom'),
hint: translate('CustomColonReplacementFormatHint'),
},
];
const standardEpisodeFormatHelpTexts = [];
const standardEpisodeFormatErrors = [];
const dailyEpisodeFormatHelpTexts = [];
const dailyEpisodeFormatErrors = [];
const animeEpisodeFormatHelpTexts = [];
const animeEpisodeFormatErrors = [];
const seriesFolderFormatHelpTexts = [];
const seriesFolderFormatErrors = [];
const seasonFolderFormatHelpTexts = [];
const seasonFolderFormatErrors = [];
const specialsFolderFormatHelpTexts = [];
const specialsFolderFormatErrors = [];
if (examplesPopulated) {
if (examples.singleEpisodeExample) {
standardEpisodeFormatHelpTexts.push(
`${translate('SingleEpisode')}: ${examples.singleEpisodeExample}`
);
} else {
standardEpisodeFormatErrors.push({
message: translate('SingleEpisodeInvalidFormat'),
});
}
if (examples.multiEpisodeExample) {
standardEpisodeFormatHelpTexts.push(
`${translate('MultiEpisode')}: ${examples.multiEpisodeExample}`
);
} else {
standardEpisodeFormatErrors.push({
message: translate('MultiEpisodeInvalidFormat'),
});
}
if (examples.dailyEpisodeExample) {
dailyEpisodeFormatHelpTexts.push(
`${translate('Example')}: ${examples.dailyEpisodeExample}`
);
} else {
dailyEpisodeFormatErrors.push({ message: translate('InvalidFormat') });
}
if (examples.animeEpisodeExample) {
animeEpisodeFormatHelpTexts.push(
`${translate('SingleEpisode')}: ${examples.animeEpisodeExample}`
);
} else {
animeEpisodeFormatErrors.push({
message: translate('SingleEpisodeInvalidFormat'),
});
}
if (examples.animeMultiEpisodeExample) {
animeEpisodeFormatHelpTexts.push(
`${translate('MultiEpisode')}: ${examples.animeMultiEpisodeExample}`
);
} else {
animeEpisodeFormatErrors.push({
message: translate('MultiEpisodeInvalidFormat'),
});
}
if (examples.seriesFolderExample) {
seriesFolderFormatHelpTexts.push(
`${translate('Example')}: ${examples.seriesFolderExample}`
);
} else {
seriesFolderFormatErrors.push({ message: translate('InvalidFormat') });
}
if (examples.seasonFolderExample) {
seasonFolderFormatHelpTexts.push(
`${translate('Example')}: ${examples.seasonFolderExample}`
);
} else {
seasonFolderFormatErrors.push({ message: translate('InvalidFormat') });
}
if (examples.specialsFolderExample) {
specialsFolderFormatHelpTexts.push(
`${translate('Example')}: ${examples.specialsFolderExample}`
);
} else {
specialsFolderFormatErrors.push({ message: translate('InvalidFormat') });
}
}
return (
<FieldSet legend={translate('EpisodeNaming')}>
{isFetching ? <LoadingIndicator /> : null}
{!isFetching && error ? (
<Alert kind={kinds.DANGER}>
{translate('NamingSettingsLoadError')}
</Alert>
) : null}
{hasSettings && !isFetching && !error ? (
<Form>
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('RenameEpisodes')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="renameEpisodes"
helpText={translate('RenameEpisodesHelpText')}
onChange={handleInputChange}
{...settings.renameEpisodes}
/>
</FormGroup>
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('ReplaceIllegalCharacters')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="replaceIllegalCharacters"
helpText={translate('ReplaceIllegalCharactersHelpText')}
onChange={handleInputChange}
{...settings.replaceIllegalCharacters}
/>
</FormGroup>
{replaceIllegalCharacters ? (
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('ColonReplacement')}</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="colonReplacementFormat"
values={colonReplacementOptions}
helpText={translate('ColonReplacementFormatHelpText')}
onChange={handleInputChange}
{...settings.colonReplacementFormat}
/>
</FormGroup>
) : null}
{replaceIllegalCharacters &&
settings.colonReplacementFormat.value === 5 ? (
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('CustomColonReplacement')}</FormLabel>
<FormInputGroup
type={inputTypes.TEXT}
name="customColonReplacementFormat"
helpText={translate('CustomColonReplacementFormatHelpText')}
onChange={handleInputChange}
{...settings.customColonReplacementFormat}
/>
</FormGroup>
) : null}
{renameEpisodes ? (
<>
<FormGroup size={sizes.LARGE}>
<FormLabel>{translate('StandardEpisodeFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="standardEpisodeFormat"
buttons={
<FormInputButton onPress={onStandardNamingModalOpenClick}>
?
</FormInputButton>
}
onChange={handleInputChange}
{...settings.standardEpisodeFormat}
helpTexts={standardEpisodeFormatHelpTexts}
errors={[
...standardEpisodeFormatErrors,
...settings.standardEpisodeFormat.errors,
]}
/>
</FormGroup>
<FormGroup size={sizes.LARGE}>
<FormLabel>{translate('DailyEpisodeFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="dailyEpisodeFormat"
buttons={
<FormInputButton onPress={onDailyNamingModalOpenClick}>
?
</FormInputButton>
}
onChange={handleInputChange}
{...settings.dailyEpisodeFormat}
helpTexts={dailyEpisodeFormatHelpTexts}
errors={[
...dailyEpisodeFormatErrors,
...settings.dailyEpisodeFormat.errors,
]}
/>
</FormGroup>
<FormGroup size={sizes.LARGE}>
<FormLabel>{translate('AnimeEpisodeFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="animeEpisodeFormat"
buttons={
<FormInputButton onPress={onAnimeNamingModalOpenClick}>
?
</FormInputButton>
}
onChange={handleInputChange}
{...settings.animeEpisodeFormat}
helpTexts={animeEpisodeFormatHelpTexts}
errors={[
...animeEpisodeFormatErrors,
...settings.animeEpisodeFormat.errors,
]}
/>
</FormGroup>
</>
) : null}
<FormGroup
advancedSettings={advancedSettings}
isAdvanced={true}
size={sizes.MEDIUM}
>
<FormLabel>{translate('SeriesFolderFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="seriesFolderFormat"
buttons={
<FormInputButton onPress={onSeriesFolderNamingModalOpenClick}>
?
</FormInputButton>
}
onChange={handleInputChange}
{...settings.seriesFolderFormat}
helpTexts={[
translate('SeriesFolderFormatHelpText'),
...seriesFolderFormatHelpTexts,
]}
errors={[
...seriesFolderFormatErrors,
...settings.seriesFolderFormat.errors,
]}
/>
</FormGroup>
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('SeasonFolderFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="seasonFolderFormat"
buttons={
<FormInputButton onPress={onSeasonFolderNamingModalOpenClick}>
?
</FormInputButton>
}
onChange={handleInputChange}
{...settings.seasonFolderFormat}
helpTexts={seasonFolderFormatHelpTexts}
errors={[
...seasonFolderFormatErrors,
...settings.seasonFolderFormat.errors,
]}
/>
</FormGroup>
<FormGroup
advancedSettings={advancedSettings}
isAdvanced={true}
size={sizes.MEDIUM}
>
<FormLabel>{translate('SpecialsFolderFormat')}</FormLabel>
<FormInputGroup
inputClassName={styles.namingInput}
type={inputTypes.TEXT}
name="specialsFolderFormat"
buttons={
<FormInputButton onPress={onSpecialsFolderNamingModalOpenClick}>
?
</FormInputButton>
}
onChange={handleInputChange}
{...settings.specialsFolderFormat}
helpTexts={specialsFolderFormatHelpTexts}
errors={[
...specialsFolderFormatErrors,
...settings.specialsFolderFormat.errors,
]}
/>
</FormGroup>
<FormGroup size={sizes.MEDIUM}>
<FormLabel>{translate('MultiEpisodeStyle')}</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="multiEpisodeStyle"
values={multiEpisodeStyleOptions}
onChange={handleInputChange}
{...settings.multiEpisodeStyle}
/>
</FormGroup>
{namingModalOptions ? (
<NamingModal
isOpen={isNamingModalOpen}
advancedSettings={advancedSettings}
{...namingModalOptions}
value={settings[namingModalOptions.name].value}
onInputChange={handleInputChange}
onModalClose={setNamingModalClosed}
/>
) : null}
</Form>
) : null}
</FieldSet>
);
}
export default Naming;

96
frontend/src/Settings/MediaManagement/Naming/NamingConnector.js
Unescape View File

@ -1,96 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { clearPendingChanges } from 'Store/Actions/baseActions';
import { fetchNamingExamples, fetchNamingSettings, setNamingSettingsValue } from 'Store/Actions/settingsActions';
import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
import Naming from './Naming';
const SECTION = 'naming';
function createMapStateToProps() {
return createSelector(
(state) => state.settings.advancedSettings,
(state) => state.settings.namingExamples,
createSettingsSectionSelector(SECTION),
(advancedSettings, namingExamples, sectionSettings) => {
return {
advancedSettings,
examples: namingExamples.item,
examplesPopulated: namingExamples.isPopulated,
...sectionSettings
};
}
);
}
const mapDispatchToProps = {
fetchNamingSettings,
setNamingSettingsValue,
fetchNamingExamples,
clearPendingChanges
};
class NamingConnector extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this._namingExampleTimeout = null;
}
componentDidMount() {
this.props.fetchNamingSettings();
this.props.fetchNamingExamples();
}
componentWillUnmount() {
this.props.clearPendingChanges({ section: `settings.${SECTION}` });
}
//
// Control
_fetchNamingExamples = () => {
this.props.fetchNamingExamples();
};
//
// Listeners
onInputChange = ({ name, value }) => {
this.props.setNamingSettingsValue({ name, value });
if (this._namingExampleTimeout) {
clearTimeout(this._namingExampleTimeout);
}
this._namingExampleTimeout = setTimeout(this._fetchNamingExamples, 1000);
};
//
// Render
render() {
return (
<Naming
onInputChange={this.onInputChange}
onSavePress={this.onSavePress}
{...this.props}
/>
);
}
}
NamingConnector.propTypes = {
fetchNamingSettings: PropTypes.func.isRequired,
setNamingSettingsValue: PropTypes.func.isRequired,
fetchNamingExamples: PropTypes.func.isRequired,
clearPendingChanges: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(NamingConnector);

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

@ -1,646 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import FieldSet from 'Components/FieldSet';
import SelectInput from 'Components/Form/SelectInput';
import TextInput from 'Components/Form/TextInput';
import Icon from 'Components/Icon';
import Button from 'Components/Link/Button';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import Modal from 'Components/Modal/Modal';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { icons, sizes } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import NamingOption from './NamingOption';
import styles from './NamingModal.css';
const separatorOptions = [
{
key: ' ',
get value() {
return `${translate('Space')} ( )`;
}
},
{
key: '.',
get value() {
return `${translate('Period')} (.)`;
}
},
{
key: '_',
get value() {
return `${translate('Underscore')} (_)`;
}
},
{
key: '-',
get value() {
return `${translate('Dash')} (-)`;
}
}
];
const caseOptions = [
{
key: 'title',
get value() {
return translate('DefaultCase');
}
},
{
key: 'lower',
get value() {
return translate('Lowercase');
}
},
{
key: 'upper',
get value() {
return translate('Uppercase');
}
}
];
const fileNameTokens = [
{
token: '{Series Title} - S{season:00}E{episode:00} - {Episode Title} {Quality Full}',
example: 'The Series Title\'s! (2010) - S01E01 - Episode Title HDTV-720p Proper'
},
{
token: '{Series Title} - {season:0}x{episode:00} - {Episode Title} {Quality Full}',
example: 'The Series Title\'s! (2010) - 1x01 - Episode Title HDTV-720p Proper'
},
{
token: '{Series.Title}.S{season:00}E{episode:00}.{EpisodeClean.Title}.{Quality.Full}',
example: 'The.Series.Title\'s!.(2010).S01E01.Episode.Title.HDTV-720p'
}
];
const seriesTokens = [
{ token: '{Series Title}', example: 'The Series Title\'s!', footNote: 1 },
{ token: '{Series CleanTitle}', example: 'The Series Title\'s!', footNote: 1 },
{ token: '{Series TitleYear}', example: 'The Series Title\'s! (2010)', footNote: 1 },
{ token: '{Series CleanTitleYear}', example: 'The Series Title\'s! 2010', footNote: 1 },
{ token: '{Series TitleWithoutYear}', example: 'The Series Title\'s!', footNote: 1 },
{ token: '{Series CleanTitleWithoutYear}', example: 'The Series Title\'s!', footNote: 1 },
{ token: '{Series TitleThe}', example: 'Series Title\'s!, The', footNote: 1 },
{ token: '{Series CleanTitleThe}', example: 'Series Title\'s!, The', footNote: 1 },
{ token: '{Series TitleTheYear}', example: 'Series Title\'s!, The (2010)', footNote: 1 },
{ token: '{Series CleanTitleTheYear}', example: 'Series Title\'s!, The 2010', footNote: 1 },
{ token: '{Series TitleTheWithoutYear}', example: 'Series Title\'s!, The', footNote: 1 },
{ token: '{Series CleanTitleTheWithoutYear}', example: 'Series Title\'s!, The', footNote: 1 },
{ token: '{Series TitleFirstCharacter}', example: 'S', footNote: 1 },
{ token: '{Series Year}', example: '2010' }
];
const seriesIdTokens = [
{ token: '{ImdbId}', example: 'tt12345' },
{ token: '{TvdbId}', example: '12345' },
{ token: '{TmdbId}', example: '11223' },
{ token: '{TvMazeId}', example: '54321' }
];
const seasonTokens = [
{ token: '{season:0}', example: '1' },
{ token: '{season:00}', example: '01' }
];
const episodeTokens = [
{ token: '{episode:0}', example: '1' },
{ token: '{episode:00}', example: '01' }
];
const airDateTokens = [
{ token: '{Air-Date}', example: '2016-03-20' },
{ token: '{Air Date}', example: '2016 03 20' }
];
const absoluteTokens = [
{ token: '{absolute:0}', example: '1' },
{ token: '{absolute:00}', example: '01' },
{ token: '{absolute:000}', example: '001' }
];
const episodeTitleTokens = [
{ token: '{Episode Title}', example: 'Episode\'s Title', footNote: 1 },
{ token: '{Episode CleanTitle}', example: 'Episodes Title', footNote: 1 }
];
const qualityTokens = [
{ token: '{Quality Full}', example: 'WEBDL-1080p Proper' },
{ token: '{Quality Title}', example: 'WEBDL-1080p' }
];
const mediaInfoTokens = [
{ token: '{MediaInfo Simple}', example: 'x264 DTS' },
{ token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]', footNote: 1 },
{ token: '{MediaInfo AudioCodec}', example: 'DTS' },
{ token: '{MediaInfo AudioChannels}', example: '5.1' },
{ token: '{MediaInfo AudioLanguages}', example: '[EN+DE]', footNote: 1 },
{ token: '{MediaInfo SubtitleLanguages}', example: '[DE]', footNote: 1 },
{ token: '{MediaInfo VideoCodec}', example: 'x264' },
{ token: '{MediaInfo VideoBitDepth}', example: '10' },
{ token: '{MediaInfo VideoDynamicRange}', example: 'HDR' },
{ token: '{MediaInfo VideoDynamicRangeType}', example: 'DV HDR10' }
];
const otherTokens = [
{ token: '{Release Group}', example: 'Rls Grp', footNote: 1 },
{ token: '{Custom Formats}', example: 'iNTERNAL' },
{ token: '{Custom Format:FormatName}', example: 'AMZN' }
];
const otherAnimeTokens = [
{ token: '{Release Hash}', example: 'ABCDEFGH' }
];
const originalTokens = [
{ token: '{Original Title}', example: 'The.Series.Title\'s!.S01E01.WEBDL.1080p.x264-EVOLVE' },
{ token: '{Original Filename}', example: 'the.series.title\'s!.s01e01.webdl.1080p.x264-EVOLVE' }
];
class NamingModal extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this._selectionStart = null;
this._selectionEnd = null;
this.state = {
separator: ' ',
case: 'title'
};
}
//
// Listeners
onTokenSeparatorChange = (event) => {
this.setState({ separator: event.value });
};
onTokenCaseChange = (event) => {
this.setState({ case: event.value });
};
onInputSelectionChange = (selectionStart, selectionEnd) => {
this._selectionStart = selectionStart;
this._selectionEnd = selectionEnd;
};
onOptionPress = ({ isFullFilename, tokenValue }) => {
const {
name,
value,
onInputChange
} = this.props;
const selectionStart = this._selectionStart;
const selectionEnd = this._selectionEnd;
if (isFullFilename) {
onInputChange({ name, value: tokenValue });
} else if (selectionStart == null) {
onInputChange({
name,
value: `${value}${tokenValue}`
});
} else {
const start = value.substring(0, selectionStart);
const end = value.substring(selectionEnd);
const newValue = `${start}${tokenValue}${end}`;
onInputChange({ name, value: newValue });
this._selectionStart = newValue.length - 1;
this._selectionEnd = newValue.length - 1;
}
};
//
// Render
render() {
const {
name,
value,
isOpen,
advancedSettings,
season,
episode,
anime,
additional,
onInputChange,
onModalClose
} = this.props;
const {
separator: tokenSeparator,
case: tokenCase
} = this.state;
return (
<Modal
isOpen={isOpen}
onModalClose={onModalClose}
>
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{translate('FileNameTokens')}
</ModalHeader>
<ModalBody>
<div className={styles.namingSelectContainer}>
<SelectInput
className={styles.namingSelect}
name="separator"
value={tokenSeparator}
values={separatorOptions}
onChange={this.onTokenSeparatorChange}
/>
<SelectInput
className={styles.namingSelect}
name="case"
value={tokenCase}
values={caseOptions}
onChange={this.onTokenCaseChange}
/>
</div>
{
!advancedSettings &&
<FieldSet legend={translate('FileNames')}>
<div className={styles.groups}>
{
fileNameTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
isFullFilename={true}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
size={sizes.LARGE}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
}
<FieldSet legend={translate('Series')}>
<div className={styles.groups}>
{
seriesTokens.map(({ token, example, footNote }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('SeriesFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('SeriesID')}>
<div className={styles.groups}>
{
seriesIdTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
{
season &&
<FieldSet legend={translate('Season')}>
<div className={styles.groups}>
{
seasonTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
}
{
episode &&
<div>
<FieldSet legend={translate('Episode')}>
<div className={styles.groups}>
{
episodeTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
<FieldSet legend={translate('AirDate')}>
<div className={styles.groups}>
{
airDateTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
{
anime &&
<FieldSet legend={translate('AbsoluteEpisodeNumber')}>
<div className={styles.groups}>
{
absoluteTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
}
</div>
}
{
additional &&
<div>
<FieldSet legend={translate('EpisodeTitle')}>
<div className={styles.groups}>
{
episodeTitleTokens.map(({ token, example, footNote }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('EpisodeTitleFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('Quality')}>
<div className={styles.groups}>
{
qualityTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
<FieldSet legend={translate('MediaInfo')}>
<div className={styles.groups}>
{
mediaInfoTokens.map(({ token, example, footNote }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('MediaInfoFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('Other')}>
<div className={styles.groups}>
{
otherTokens.map(({ token, example, footNote }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
{
anime && otherAnimeTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('ReleaseGroupFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('Original')}>
<div className={styles.groups}>
{
originalTokens.map(({ token, example }) => {
return (
<NamingOption
key={token}
name={name}
value={value}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
size={sizes.LARGE}
onPress={this.onOptionPress}
/>
);
}
)
}
</div>
</FieldSet>
</div>
}
</ModalBody>
<ModalFooter>
<TextInput
name={name}
value={value}
onChange={onInputChange}
onSelectionChange={this.onInputSelectionChange}
/>
<Button onPress={onModalClose}>
{translate('Close')}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}
}
NamingModal.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
isOpen: PropTypes.bool.isRequired,
advancedSettings: PropTypes.bool.isRequired,
season: PropTypes.bool.isRequired,
episode: PropTypes.bool.isRequired,
daily: PropTypes.bool.isRequired,
anime: PropTypes.bool.isRequired,
additional: PropTypes.bool.isRequired,
onInputChange: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
NamingModal.defaultProps = {
season: false,
episode: false,
daily: false,
anime: false,
additional: false
};
export default NamingModal;

591
frontend/src/Settings/MediaManagement/Naming/NamingModal.tsx
Unescape View File

@ -0,0 +1,591 @@
import React, { useCallback, useState } from 'react';
import FieldSet from 'Components/FieldSet';
import SelectInput from 'Components/Form/SelectInput';
import TextInput from 'Components/Form/TextInput';
import Icon from 'Components/Icon';
import Button from 'Components/Link/Button';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import Modal from 'Components/Modal/Modal';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { icons, sizes } from 'Helpers/Props';
import NamingConfig from 'typings/Settings/NamingConfig';
import translate from 'Utilities/String/translate';
import NamingOption from './NamingOption';
import TokenCase from './TokenCase';
import TokenSeparator from './TokenSeparator';
import styles from './NamingModal.css';
const separatorOptions: { key: TokenSeparator; value: string }[] = [
{
key: ' ',
get value() {
return `${translate('Space')} ( )`;
},
},
{
key: '.',
get value() {
return `${translate('Period')} (.)`;
},
},
{
key: '_',
get value() {
return `${translate('Underscore')} (_)`;
},
},
{
key: '-',
get value() {
return `${translate('Dash')} (-)`;
},
},
];
const caseOptions: { key: TokenCase; value: string }[] = [
{
key: 'title',
get value() {
return translate('DefaultCase');
},
},
{
key: 'lower',
get value() {
return translate('Lowercase');
},
},
{
key: 'upper',
get value() {
return translate('Uppercase');
},
},
];
const fileNameTokens = [
{
token:
'{Series Title} - S{season:00}E{episode:00} - {Episode Title} {Quality Full}',
example:
"The Series Title's! (2010) - S01E01 - Episode Title HDTV-720p Proper",
},
{
token:
'{Series Title} - {season:0}x{episode:00} - {Episode Title} {Quality Full}',
example:
"The Series Title's! (2010) - 1x01 - Episode Title HDTV-720p Proper",
},
{
token:
'{Series.Title}.S{season:00}E{episode:00}.{EpisodeClean.Title}.{Quality.Full}',
example: "The.Series.Title's!.(2010).S01E01.Episode.Title.HDTV-720p",
},
];
const seriesTokens = [
{ token: '{Series Title}', example: "The Series Title's!", footNote: true },
{
token: '{Series CleanTitle}',
example: "The Series Title's!",
footNote: true,
},
{
token: '{Series TitleYear}',
example: "The Series Title's! (2010)",
footNote: true,
},
{
token: '{Series CleanTitleYear}',
example: "The Series Title's! 2010",
footNote: true,
},
{
token: '{Series TitleWithoutYear}',
example: "The Series Title's!",
footNote: true,
},
{
token: '{Series CleanTitleWithoutYear}',
example: "The Series Title's!",
footNote: true,
},
{
token: '{Series TitleThe}',
example: "Series Title's!, The",
footNote: true,
},
{
token: '{Series CleanTitleThe}',
example: "Series Title's!, The",
footNote: true,
},
{
token: '{Series TitleTheYear}',
example: "Series Title's!, The (2010)",
footNote: true,
},
{
token: '{Series CleanTitleTheYear}',
example: "Series Title's!, The 2010",
footNote: true,
},
{
token: '{Series TitleTheWithoutYear}',
example: "Series Title's!, The",
footNote: true,
},
{
token: '{Series CleanTitleTheWithoutYear}',
example: "Series Title's!, The",
footNote: true,
},
{ token: '{Series TitleFirstCharacter}', example: 'S', footNote: true },
{ token: '{Series Year}', example: '2010' },
];
const seriesIdTokens = [
{ token: '{ImdbId}', example: 'tt12345' },
{ token: '{TvdbId}', example: '12345' },
{ token: '{TmdbId}', example: '11223' },
{ token: '{TvMazeId}', example: '54321' },
];
const seasonTokens = [
{ token: '{season:0}', example: '1' },
{ token: '{season:00}', example: '01' },
];
const episodeTokens = [
{ token: '{episode:0}', example: '1' },
{ token: '{episode:00}', example: '01' },
];
const airDateTokens = [
{ token: '{Air-Date}', example: '2016-03-20' },
{ token: '{Air Date}', example: '2016 03 20' },
];
const absoluteTokens = [
{ token: '{absolute:0}', example: '1' },
{ token: '{absolute:00}', example: '01' },
{ token: '{absolute:000}', example: '001' },
];
const episodeTitleTokens = [
{ token: '{Episode Title}', example: "Episode's Title", footNote: true },
{ token: '{Episode CleanTitle}', example: 'Episodes Title', footNote: true },
];
const qualityTokens = [
{ token: '{Quality Full}', example: 'WEBDL-1080p Proper' },
{ token: '{Quality Title}', example: 'WEBDL-1080p' },
];
const mediaInfoTokens = [
{ token: '{MediaInfo Simple}', example: 'x264 DTS' },
{ token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]', footNote: true },
{ token: '{MediaInfo AudioCodec}', example: 'DTS' },
{ token: '{MediaInfo AudioChannels}', example: '5.1' },
{ token: '{MediaInfo AudioLanguages}', example: '[EN+DE]', footNote: true },
{ token: '{MediaInfo SubtitleLanguages}', example: '[DE]', footNote: true },
{ token: '{MediaInfo VideoCodec}', example: 'x264' },
{ token: '{MediaInfo VideoBitDepth}', example: '10' },
{ token: '{MediaInfo VideoDynamicRange}', example: 'HDR' },
{ token: '{MediaInfo VideoDynamicRangeType}', example: 'DV HDR10' },
];
const otherTokens = [
{ token: '{Release Group}', example: 'Rls Grp', footNote: true },
{ token: '{Custom Formats}', example: 'iNTERNAL' },
{ token: '{Custom Format:FormatName}', example: 'AMZN' },
];
const otherAnimeTokens = [{ token: '{Release Hash}', example: 'ABCDEFGH' }];
const originalTokens = [
{
token: '{Original Title}',
example: "The.Series.Title's!.S01E01.WEBDL.1080p.x264-EVOLVE",
},
{
token: '{Original Filename}',
example: "the.series.title's!.s01e01.webdl.1080p.x264-EVOLVE",
},
];
interface NamingModalProps {
isOpen: boolean;
name: keyof Pick<
NamingConfig,
| 'standardEpisodeFormat'
| 'dailyEpisodeFormat'
| 'animeEpisodeFormat'
| 'seriesFolderFormat'
| 'seasonFolderFormat'
| 'specialsFolderFormat'
>;
value: string;
advancedSettings: boolean;
season?: boolean;
episode?: boolean;
daily?: boolean;
anime?: boolean;
additional?: boolean;
onInputChange: ({ name, value }: { name: string; value: string }) => void;
onModalClose: () => void;
}
function NamingModal(props: NamingModalProps) {
const {
isOpen,
name,
value,
advancedSettings,
season = false,
episode = false,
anime = false,
additional = false,
onInputChange,
onModalClose,
} = props;
const [tokenSeparator, setTokenSeparator] = useState<TokenSeparator>(' ');
const [tokenCase, setTokenCase] = useState<TokenCase>('title');
const [selectionStart, setSelectionStart] = useState<number | null>(null);
const [selectionEnd, setSelectionEnd] = useState<number | null>(null);
const handleTokenSeparatorChange = useCallback(
({ value }: { value: TokenSeparator }) => {
setTokenSeparator(value);
},
[setTokenSeparator]
);
const handleTokenCaseChange = useCallback(
({ value }: { value: TokenCase }) => {
setTokenCase(value);
},
[setTokenCase]
);
const handleInputSelectionChange = useCallback(
(selectionStart: number, selectionEnd: number) => {
setSelectionStart(selectionStart);
setSelectionEnd(selectionEnd);
},
[setSelectionStart, setSelectionEnd]
);
const handleOptionPress = useCallback(
({
isFullFilename,
tokenValue,
}: {
isFullFilename: boolean;
tokenValue: string;
}) => {
if (isFullFilename) {
onInputChange({ name, value: tokenValue });
} else if (selectionStart == null || selectionEnd == null) {
onInputChange({
name,
value: `${value}${tokenValue}`,
});
} else {
const start = value.substring(0, selectionStart);
const end = value.substring(selectionEnd);
const newValue = `${start}${tokenValue}${end}`;
onInputChange({ name, value: newValue });
setSelectionStart(newValue.length - 1);
setSelectionEnd(newValue.length - 1);
}
},
[name, value, selectionEnd, selectionStart, onInputChange]
);
return (
<Modal isOpen={isOpen} onModalClose={onModalClose}>
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{episode
? translate('FileNameTokens')
: translate('FolderNameTokens')}
</ModalHeader>
<ModalBody>
<div className={styles.namingSelectContainer}>
<SelectInput
className={styles.namingSelect}
name="separator"
value={tokenSeparator}
values={separatorOptions}
onChange={handleTokenSeparatorChange}
/>
<SelectInput
className={styles.namingSelect}
name="case"
value={tokenCase}
values={caseOptions}
onChange={handleTokenCaseChange}
/>
</div>
{advancedSettings ? null : (
<FieldSet legend={translate('FileNames')}>
<div className={styles.groups}>
{fileNameTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
isFullFilename={true}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
size={sizes.LARGE}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
)}
<FieldSet legend={translate('Series')}>
<div className={styles.groups}>
{seriesTokens.map(({ token, example, footNote }) => (
<NamingOption
key={token}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('SeriesFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('SeriesID')}>
<div className={styles.groups}>
{seriesIdTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
{season ? (
<FieldSet legend={translate('Season')}>
<div className={styles.groups}>
{seasonTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
) : null}
{episode ? (
<div>
<FieldSet legend={translate('Episode')}>
<div className={styles.groups}>
{episodeTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
<FieldSet legend={translate('AirDate')}>
<div className={styles.groups}>
{airDateTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
{anime ? (
<FieldSet legend={translate('AbsoluteEpisodeNumber')}>
<div className={styles.groups}>
{absoluteTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
) : null}
</div>
) : null}
{additional ? (
<div>
<FieldSet legend={translate('EpisodeTitle')}>
<div className={styles.groups}>
{episodeTitleTokens.map(({ token, example, footNote }) => (
<NamingOption
key={token}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('EpisodeTitleFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('Quality')}>
<div className={styles.groups}>
{qualityTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
<FieldSet legend={translate('MediaInfo')}>
<div className={styles.groups}>
{mediaInfoTokens.map(({ token, example, footNote }) => (
<NamingOption
key={token}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('MediaInfoFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('Other')}>
<div className={styles.groups}>
{otherTokens.map(({ token, example, footNote }) => (
<NamingOption
key={token}
token={token}
example={example}
footNote={footNote}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))}
{anime
? otherAnimeTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
onPress={handleOptionPress}
/>
))
: null}
</div>
<div className={styles.footNote}>
<Icon className={styles.icon} name={icons.FOOTNOTE} />
<InlineMarkdown data={translate('ReleaseGroupFootNote')} />
</div>
</FieldSet>
<FieldSet legend={translate('Original')}>
<div className={styles.groups}>
{originalTokens.map(({ token, example }) => (
<NamingOption
key={token}
token={token}
example={example}
tokenSeparator={tokenSeparator}
tokenCase={tokenCase}
size={sizes.LARGE}
onPress={handleOptionPress}
/>
))}
</div>
</FieldSet>
</div>
) : null}
</ModalBody>
<ModalFooter>
<TextInput
name={name}
value={value}
onChange={onInputChange}
onSelectionChange={handleInputSelectionChange}
/>
<Button onPress={onModalClose}>{translate('Close')}</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}
export default NamingModal;

4
frontend/src/Settings/MediaManagement/Naming/NamingOption.css
Unescape View File

@ -45,6 +45,10 @@
} }
} }
.title {
text-transform: none;
}
.lower { .lower {
text-transform: lowercase; text-transform: lowercase;
} }

1
frontend/src/Settings/MediaManagement/Naming/NamingOption.css.d.ts vendored
Unescape View File

@ -8,6 +8,7 @@ interface CssExports {
'lower': string; 'lower': string;
'option': string; 'option': string;
'small': string; 'small': string;
'title': string;
'token': string; 'token': string;
'upper': string; 'upper': string;
} }

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

@ -1,93 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Icon from 'Components/Icon';
import Link from 'Components/Link/Link';
import { icons, sizes } from 'Helpers/Props';
import styles from './NamingOption.css';
class NamingOption extends Component {
//
// Listeners
onPress = () => {
const {
token,
tokenSeparator,
tokenCase,
isFullFilename,
onPress
} = this.props;
let tokenValue = token;
tokenValue = tokenValue.replace(/ /g, tokenSeparator);
if (tokenCase === 'lower') {
tokenValue = token.toLowerCase();
} else if (tokenCase === 'upper') {
tokenValue = token.toUpperCase();
}
onPress({ isFullFilename, tokenValue });
};
//
// Render
render() {
const {
token,
tokenSeparator,
example,
footNote,
tokenCase,
isFullFilename,
size
} = this.props;
return (
<Link
className={classNames(
styles.option,
styles[size],
styles[tokenCase],
isFullFilename && styles.isFullFilename
)}
onPress={this.onPress}
>
<div className={styles.token}>
{token.replace(/ /g, tokenSeparator)}
</div>
<div className={styles.example}>
{example.replace(/ /g, tokenSeparator)}
{
footNote !== 0 &&
<Icon className={styles.footNote} name={icons.FOOTNOTE} />
}
</div>
</Link>
);
}
}
NamingOption.propTypes = {
token: PropTypes.string.isRequired,
example: PropTypes.string.isRequired,
footNote: PropTypes.number.isRequired,
tokenSeparator: PropTypes.string.isRequired,
tokenCase: PropTypes.string.isRequired,
isFullFilename: PropTypes.bool.isRequired,
size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),
onPress: PropTypes.func.isRequired
};
NamingOption.defaultProps = {
footNote: 0,
size: sizes.SMALL,
isFullFilename: false
};
export default NamingOption;

77
frontend/src/Settings/MediaManagement/Naming/NamingOption.tsx
Unescape View File

@ -0,0 +1,77 @@
import classNames from 'classnames';
import React, { useCallback } from 'react';
import Icon from 'Components/Icon';
import Link from 'Components/Link/Link';
import { icons } from 'Helpers/Props';
import { Size } from 'Helpers/Props/sizes';
import TokenCase from './TokenCase';
import TokenSeparator from './TokenSeparator';
import styles from './NamingOption.css';
interface NamingOptionProps {
token: string;
tokenSeparator: TokenSeparator;
example: string;
tokenCase: TokenCase;
isFullFilename?: boolean;
footNote?: boolean;
size?: Extract<Size, keyof typeof styles>;
onPress: ({
isFullFilename,
tokenValue,
}: {
isFullFilename: boolean;
tokenValue: string;
}) => void;
}
function NamingOption(props: NamingOptionProps) {
const {
token,
tokenSeparator,
example,
tokenCase,
isFullFilename = false,
footNote = false,
size = 'small',
onPress,
} = props;
const handlePress = useCallback(() => {
let tokenValue = token;
tokenValue = tokenValue.replace(/ /g, tokenSeparator);
if (tokenCase === 'lower') {
tokenValue = token.toLowerCase();
} else if (tokenCase === 'upper') {
tokenValue = token.toUpperCase();
}
onPress({ isFullFilename, tokenValue });
}, [token, tokenCase, tokenSeparator, isFullFilename, onPress]);
return (
<Link
className={classNames(
styles.option,
styles[size],
styles[tokenCase],
isFullFilename && styles.isFullFilename
)}
onPress={handlePress}
>
<div className={styles.token}>{token.replace(/ /g, tokenSeparator)}</div>
<div className={styles.example}>
{example.replace(/ /g, tokenSeparator)}
{footNote ? (
<Icon className={styles.footNote} name={icons.FOOTNOTE} />
) : null}
</div>
</Link>
);
}
export default NamingOption;

3
frontend/src/Settings/MediaManagement/Naming/TokenCase.ts
Unescape View File

@ -0,0 +1,3 @@
type TokenCase = 'title' | 'lower' | 'upper';
export default TokenCase;

3
frontend/src/Settings/MediaManagement/Naming/TokenSeparator.ts
Unescape View File

@ -0,0 +1,3 @@
type TokenSeparator = ' ' | '.' | '_' | '-';
export default TokenSeparator;

13
frontend/src/typings/Settings/NamingConfig.ts
Unescape View File

@ -0,0 +1,13 @@
export default interface NamingConfig {
renameEpisodes: boolean;
replaceIllegalCharacters: boolean;
colonReplacementFormat: number;
customColonReplacementFormat: string;
multiEpisodeStyle: number;
standardEpisodeFormat: string;
dailyEpisodeFormat: string;
animeEpisodeFormat: string;
seriesFolderFormat: string;
seasonFolderFormat: string;
specialsFolderFormat: string;
}

10
frontend/src/typings/Settings/NamingExample.ts
Unescape View File

@ -0,0 +1,10 @@
export default interface NamingExample {
singleEpisodeExample: string;
multiEpisodeExample: string;
dailyEpisodeExample: string;
animeEpisodeExample: string;
animeMultiEpisodeExample: string;
seriesFolderExample: string;
seasonFolderExample: string;
specialsFolderExample: string;
}

1
src/NzbDrone.Core/Localization/Core/en.json
Unescape View File

@ -727,6 +727,7 @@
"FirstDayOfWeek": "First Day of Week", "FirstDayOfWeek": "First Day of Week",
"Fixed": "Fixed", "Fixed": "Fixed",
"Folder": "Folder", "Folder": "Folder",
"FolderNameTokens": "Folder Name Tokens",
"Folders": "Folders", "Folders": "Folders",
"Forecast": "Forecast", "Forecast": "Forecast",
"FormatAgeDay": "day", "FormatAgeDay": "day",

Write Preview
Loading…
Cancel
Save