Bogdan
5 months ago
parent
38bd060960
commit
8b64f873f4
@ -1,229 +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: 'standardMovieFormat',
|
|
||||||
additional: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onMovieFolderNamingModalOpenClick = () => {
|
|
||||||
this.setState({
|
|
||||||
isNamingModalOpen: true,
|
|
||||||
namingModalOptions: {
|
|
||||||
name: 'movieFolderFormat'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onNamingModalClose = () => {
|
|
||||||
this.setState({ isNamingModalOpen: false });
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
advancedSettings,
|
|
||||||
isFetching,
|
|
||||||
error,
|
|
||||||
settings,
|
|
||||||
hasSettings,
|
|
||||||
examples,
|
|
||||||
examplesPopulated,
|
|
||||||
onInputChange
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
const {
|
|
||||||
isNamingModalOpen,
|
|
||||||
namingModalOptions
|
|
||||||
} = this.state;
|
|
||||||
|
|
||||||
const renameMovies = hasSettings && settings.renameMovies.value;
|
|
||||||
const replaceIllegalCharacters = hasSettings && settings.replaceIllegalCharacters.value;
|
|
||||||
|
|
||||||
const colonReplacementOptions = [
|
|
||||||
{ key: 'delete', value: translate('Delete') },
|
|
||||||
{ key: 'dash', value: translate('ReplaceWithDash') },
|
|
||||||
{ key: 'spaceDash', value: translate('ReplaceWithSpaceDash') },
|
|
||||||
{ key: 'spaceDashSpace', value: translate('ReplaceWithSpaceDashSpace') },
|
|
||||||
{ key: 'smart', value: translate('SmartReplace'), hint: translate('SmartReplaceHint') }
|
|
||||||
];
|
|
||||||
|
|
||||||
const standardMovieFormatHelpTexts = [];
|
|
||||||
const standardMovieFormatErrors = [];
|
|
||||||
const movieFolderFormatHelpTexts = [];
|
|
||||||
const movieFolderFormatErrors = [];
|
|
||||||
|
|
||||||
if (examplesPopulated) {
|
|
||||||
if (examples.movieExample) {
|
|
||||||
standardMovieFormatHelpTexts.push(`${translate('Movie')}: ${examples.movieExample}`);
|
|
||||||
} else {
|
|
||||||
standardMovieFormatErrors.push({ message: translate('MovieInvalidFormat') });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (examples.movieFolderExample) {
|
|
||||||
movieFolderFormatHelpTexts.push(`${translate('Example')}: ${examples.movieFolderExample}`);
|
|
||||||
} else {
|
|
||||||
movieFolderFormatErrors.push({ message: translate('InvalidFormat') });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FieldSet legend={translate('MovieNaming')}>
|
|
||||||
{
|
|
||||||
isFetching &&
|
|
||||||
<LoadingIndicator />
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
!isFetching && error &&
|
|
||||||
<Alert kind={kinds.DANGER}>
|
|
||||||
{translate('NamingSettingsLoadError')}
|
|
||||||
</Alert>
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
hasSettings && !isFetching && !error &&
|
|
||||||
<Form>
|
|
||||||
<FormGroup size={sizes.MEDIUM}>
|
|
||||||
<FormLabel>{translate('RenameMovies')}</FormLabel>
|
|
||||||
|
|
||||||
<FormInputGroup
|
|
||||||
type={inputTypes.CHECK}
|
|
||||||
name="renameMovies"
|
|
||||||
helpText={translate('RenameMoviesHelpText')}
|
|
||||||
onChange={onInputChange}
|
|
||||||
{...settings.renameMovies}
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
renameMovies &&
|
|
||||||
<FormGroup size={sizes.LARGE}>
|
|
||||||
<FormLabel>{translate('StandardMovieFormat')}</FormLabel>
|
|
||||||
|
|
||||||
<FormInputGroup
|
|
||||||
inputClassName={styles.namingInput}
|
|
||||||
type={inputTypes.TEXT}
|
|
||||||
name="standardMovieFormat"
|
|
||||||
buttons={<FormInputButton onPress={this.onStandardNamingModalOpenClick}>?</FormInputButton>}
|
|
||||||
onChange={onInputChange}
|
|
||||||
{...settings.standardMovieFormat}
|
|
||||||
helpTexts={standardMovieFormatHelpTexts}
|
|
||||||
errors={[...standardMovieFormatErrors, ...settings.standardMovieFormat.errors]}
|
|
||||||
/>
|
|
||||||
</FormGroup>
|
|
||||||
}
|
|
||||||
|
|
||||||
<FormGroup
|
|
||||||
advancedSettings={advancedSettings}
|
|
||||||
isAdvanced={true}
|
|
||||||
>
|
|
||||||
<FormLabel>{translate('MovieFolderFormat')}</FormLabel>
|
|
||||||
|
|
||||||
<FormInputGroup
|
|
||||||
inputClassName={styles.namingInput}
|
|
||||||
type={inputTypes.TEXT}
|
|
||||||
name="movieFolderFormat"
|
|
||||||
buttons={<FormInputButton onPress={this.onMovieFolderNamingModalOpenClick}>?</FormInputButton>}
|
|
||||||
onChange={onInputChange}
|
|
||||||
{...settings.movieFolderFormat}
|
|
||||||
helpTexts={[translate('MovieFolderFormatHelpText'), ...movieFolderFormatHelpTexts]}
|
|
||||||
errors={[...movieFolderFormatErrors, ...settings.movieFolderFormat.errors]}
|
|
||||||
/>
|
|
||||||
</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;
|
|
||||||
@ -0,0 +1,274 @@
|
|||||||
|
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, 'standardMovieFormat' | 'movieFolderFormat'>;
|
||||||
|
movie?: 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: 'standardMovieFormat',
|
||||||
|
movie: true,
|
||||||
|
additional: true,
|
||||||
|
});
|
||||||
|
}, [setNamingModalOpen, setNamingModalOptions]);
|
||||||
|
|
||||||
|
const onMovieFolderNamingModalOpenClick = useCallback(() => {
|
||||||
|
setNamingModalOpen();
|
||||||
|
|
||||||
|
setNamingModalOptions({
|
||||||
|
name: 'movieFolderFormat',
|
||||||
|
});
|
||||||
|
}, [setNamingModalOpen, setNamingModalOptions]);
|
||||||
|
|
||||||
|
const renameMovies = hasSettings && settings.renameMovies.value;
|
||||||
|
const replaceIllegalCharacters =
|
||||||
|
hasSettings && settings.replaceIllegalCharacters.value;
|
||||||
|
|
||||||
|
const colonReplacementOptions = [
|
||||||
|
{ key: 'delete', value: translate('Delete') },
|
||||||
|
{ key: 'dash', value: translate('ReplaceWithDash') },
|
||||||
|
{ key: 'spaceDash', value: translate('ReplaceWithSpaceDash') },
|
||||||
|
{ key: 'spaceDashSpace', value: translate('ReplaceWithSpaceDashSpace') },
|
||||||
|
{
|
||||||
|
key: 'smart',
|
||||||
|
value: translate('SmartReplace'),
|
||||||
|
hint: translate('SmartReplaceHint'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const standardMovieFormatHelpTexts = [];
|
||||||
|
const standardMovieFormatErrors = [];
|
||||||
|
const movieFolderFormatHelpTexts = [];
|
||||||
|
const movieFolderFormatErrors = [];
|
||||||
|
|
||||||
|
if (examplesPopulated) {
|
||||||
|
if (examples.movieExample) {
|
||||||
|
standardMovieFormatHelpTexts.push(
|
||||||
|
`${translate('Movie')}: ${examples.movieExample}`
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
standardMovieFormatErrors.push({
|
||||||
|
message: translate('MovieInvalidFormat'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (examples.movieFolderExample) {
|
||||||
|
movieFolderFormatHelpTexts.push(
|
||||||
|
`${translate('Example')}: ${examples.movieFolderExample}`
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
movieFolderFormatErrors.push({ message: translate('InvalidFormat') });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldSet legend={translate('MovieNaming')}>
|
||||||
|
{isFetching ? <LoadingIndicator /> : null}
|
||||||
|
|
||||||
|
{!isFetching && error ? (
|
||||||
|
<Alert kind={kinds.DANGER}>
|
||||||
|
{translate('NamingSettingsLoadError')}
|
||||||
|
</Alert>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{hasSettings && !isFetching && !error ? (
|
||||||
|
<Form>
|
||||||
|
<FormGroup size={sizes.MEDIUM}>
|
||||||
|
<FormLabel>{translate('RenameMovies')}</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.CHECK}
|
||||||
|
name="renameMovies"
|
||||||
|
helpText={translate('RenameMoviesHelpText')}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
{...settings.renameMovies}
|
||||||
|
/>
|
||||||
|
</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}
|
||||||
|
|
||||||
|
{renameMovies ? (
|
||||||
|
<FormGroup size={sizes.LARGE}>
|
||||||
|
<FormLabel>{translate('StandardMovieFormat')}</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
inputClassName={styles.namingInput}
|
||||||
|
type={inputTypes.TEXT}
|
||||||
|
name="standardMovieFormat"
|
||||||
|
buttons={
|
||||||
|
<FormInputButton onPress={onStandardNamingModalOpenClick}>
|
||||||
|
?
|
||||||
|
</FormInputButton>
|
||||||
|
}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
{...settings.standardMovieFormat}
|
||||||
|
helpTexts={standardMovieFormatHelpTexts}
|
||||||
|
errors={[
|
||||||
|
...standardMovieFormatErrors,
|
||||||
|
...settings.standardMovieFormat.errors,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<FormGroup
|
||||||
|
advancedSettings={advancedSettings}
|
||||||
|
isAdvanced={true}
|
||||||
|
size={sizes.MEDIUM}
|
||||||
|
>
|
||||||
|
<FormLabel>{translate('MovieFolderFormat')}</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
inputClassName={styles.namingInput}
|
||||||
|
type={inputTypes.TEXT}
|
||||||
|
name="movieFolderFormat"
|
||||||
|
buttons={
|
||||||
|
<FormInputButton onPress={onMovieFolderNamingModalOpenClick}>
|
||||||
|
?
|
||||||
|
</FormInputButton>
|
||||||
|
}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
{...settings.movieFolderFormat}
|
||||||
|
helpTexts={[
|
||||||
|
translate('MovieFolderFormatHelpText'),
|
||||||
|
...movieFolderFormatHelpTexts,
|
||||||
|
]}
|
||||||
|
errors={[
|
||||||
|
...movieFolderFormatErrors,
|
||||||
|
...settings.movieFolderFormat.errors,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
{namingModalOptions ? (
|
||||||
|
<NamingModal
|
||||||
|
isOpen={isNamingModalOpen}
|
||||||
|
advancedSettings={advancedSettings}
|
||||||
|
{...namingModalOptions}
|
||||||
|
value={settings[namingModalOptions.name].value}
|
||||||
|
onInputChange={handleInputChange}
|
||||||
|
onModalClose={setNamingModalClosed}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</Form>
|
||||||
|
) : null}
|
||||||
|
</FieldSet>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Naming;
|
||||||
@ -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);
|
|
||||||
@ -1,508 +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: '{Movie Title} - {Quality Full}',
|
|
||||||
example: 'Movie Title (2010) - HDTV-720p Proper'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const movieTokens = [
|
|
||||||
{ token: '{Movie Title}', example: 'Movie\'s Title', footNote: 1 },
|
|
||||||
{ token: '{Movie Title:DE}', example: 'Titel des Films', footNote: 1 },
|
|
||||||
{ token: '{Movie CleanTitle}', example: 'Movies Title', footNote: 1 },
|
|
||||||
{ token: '{Movie CleanTitle:DE}', example: 'Titel des Films', footNote: 1 },
|
|
||||||
{ token: '{Movie TitleThe}', example: 'Movie\'s Title, The', footNote: 1 },
|
|
||||||
{ token: '{Movie CleanTitleThe}', example: 'Movies Title, The', footNote: 1 },
|
|
||||||
{ token: '{Movie OriginalTitle}', example: 'Τίτλος ταινίας', footNote: 1 },
|
|
||||||
{ token: '{Movie CleanOriginalTitle}', example: 'Τίτλος ταινίας', footNote: 1 },
|
|
||||||
{ token: '{Movie TitleFirstCharacter}', example: 'M' },
|
|
||||||
{ token: '{Movie TitleFirstCharacter:DE}', example: 'T' },
|
|
||||||
{ token: '{Movie Collection}', example: 'The Movie Collection', footNote: 1 },
|
|
||||||
{ token: '{Movie Certification}', example: 'R' },
|
|
||||||
{ token: '{Release Year}', example: '2009' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const movieIdTokens = [
|
|
||||||
{ token: '{ImdbId}', example: 'tt12345' },
|
|
||||||
{ token: '{TmdbId}', example: '123456' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const qualityTokens = [
|
|
||||||
{ token: '{Quality Full}', example: 'HDTV-720p Proper' },
|
|
||||||
{ token: '{Quality Title}', example: 'HDTV-720p' }
|
|
||||||
];
|
|
||||||
|
|
||||||
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' },
|
|
||||||
{ token: '{MediaInfo 3D}', example: '3D' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const releaseGroupTokens = [
|
|
||||||
{ token: '{Release Group}', example: 'Rls Grp', footNote: 1 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const editionTokens = [
|
|
||||||
{ token: '{Edition Tags}', example: 'IMAX', footNote: 1 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const customFormatTokens = [
|
|
||||||
{ token: '{Custom Formats}', example: 'Surround Sound x264' },
|
|
||||||
{ token: '{Custom Format:FormatName}', example: 'AMZN' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const originalTokens = [
|
|
||||||
{ token: '{Original Title}', example: 'Movie.Title.HDTV.x264-EVOLVE' },
|
|
||||||
{ token: '{Original Filename}', example: 'movie title hdtv.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,
|
|
||||||
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('Movie')}>
|
|
||||||
<div className={styles.groups}>
|
|
||||||
{
|
|
||||||
movieTokens.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('MovieFootNote')} />
|
|
||||||
</div>
|
|
||||||
</FieldSet>
|
|
||||||
|
|
||||||
<FieldSet legend={translate('MovieID')}>
|
|
||||||
<div className={styles.groups}>
|
|
||||||
{
|
|
||||||
movieIdTokens.map(({ token, example }) => {
|
|
||||||
return (
|
|
||||||
<NamingOption
|
|
||||||
key={token}
|
|
||||||
name={name}
|
|
||||||
value={value}
|
|
||||||
token={token}
|
|
||||||
example={example}
|
|
||||||
tokenSeparator={tokenSeparator}
|
|
||||||
tokenCase={tokenCase}
|
|
||||||
onPress={this.onOptionPress}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</FieldSet>
|
|
||||||
|
|
||||||
{
|
|
||||||
additional &&
|
|
||||||
<div>
|
|
||||||
<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('ReleaseGroup')}>
|
|
||||||
<div className={styles.groups}>
|
|
||||||
{
|
|
||||||
releaseGroupTokens.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('ReleaseGroupFootNote')} />
|
|
||||||
</div>
|
|
||||||
</FieldSet>
|
|
||||||
|
|
||||||
<FieldSet legend={translate('Edition')}>
|
|
||||||
<div className={styles.groups}>
|
|
||||||
{
|
|
||||||
editionTokens.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('EditionFootNote')} />
|
|
||||||
</div>
|
|
||||||
</FieldSet>
|
|
||||||
|
|
||||||
<FieldSet legend={translate('CustomFormats')}>
|
|
||||||
<div className={styles.groups}>
|
|
||||||
{
|
|
||||||
customFormatTokens.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('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,
|
|
||||||
additional: PropTypes.bool.isRequired,
|
|
||||||
onInputChange: PropTypes.func.isRequired,
|
|
||||||
onModalClose: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
NamingModal.defaultProps = {
|
|
||||||
additional: false
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NamingModal;
|
|
||||||
@ -0,0 +1,457 @@
|
|||||||
|
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: '{Movie Title} - {Quality Full}',
|
||||||
|
example: 'Movie Title (2010) - HDTV-720p Proper',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const movieTokens = [
|
||||||
|
{ token: '{Movie Title}', example: "Movie's Title", footNote: true },
|
||||||
|
{ token: '{Movie Title:DE}', example: 'Titel des Films', footNote: true },
|
||||||
|
{ token: '{Movie CleanTitle}', example: 'Movies Title', footNote: true },
|
||||||
|
{
|
||||||
|
token: '{Movie CleanTitle:DE}',
|
||||||
|
example: 'Titel des Films',
|
||||||
|
footNote: true,
|
||||||
|
},
|
||||||
|
{ token: '{Movie TitleThe}', example: "Movie's Title, The", footNote: true },
|
||||||
|
{
|
||||||
|
token: '{Movie CleanTitleThe}',
|
||||||
|
example: 'Movies Title, The',
|
||||||
|
footNote: true,
|
||||||
|
},
|
||||||
|
{ token: '{Movie OriginalTitle}', example: 'Τίτλος ταινίας', footNote: true },
|
||||||
|
{
|
||||||
|
token: '{Movie CleanOriginalTitle}',
|
||||||
|
example: 'Τίτλος ταινίας',
|
||||||
|
footNote: true,
|
||||||
|
},
|
||||||
|
{ token: '{Movie TitleFirstCharacter}', example: 'M' },
|
||||||
|
{ token: '{Movie TitleFirstCharacter:DE}', example: 'T' },
|
||||||
|
{
|
||||||
|
token: '{Movie Collection}',
|
||||||
|
example: 'The Movie Collection',
|
||||||
|
footNote: true,
|
||||||
|
},
|
||||||
|
{ token: '{Movie Certification}', example: 'R' },
|
||||||
|
{ token: '{Release Year}', example: '2009' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const movieIdTokens = [
|
||||||
|
{ token: '{ImdbId}', example: 'tt12345' },
|
||||||
|
{ token: '{TmdbId}', example: '123456' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const qualityTokens = [
|
||||||
|
{ token: '{Quality Full}', example: 'HDTV-720p Proper' },
|
||||||
|
{ token: '{Quality Title}', example: 'HDTV-720p' },
|
||||||
|
];
|
||||||
|
|
||||||
|
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' },
|
||||||
|
{ token: '{MediaInfo 3D}', example: '3D' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const releaseGroupTokens = [
|
||||||
|
{ token: '{Release Group}', example: 'Rls Grp', footNote: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
const editionTokens = [
|
||||||
|
{ token: '{Edition Tags}', example: 'IMAX', footNote: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
const customFormatTokens = [
|
||||||
|
{ token: '{Custom Formats}', example: 'Surround Sound x264' },
|
||||||
|
{ token: '{Custom Format:FormatName}', example: 'AMZN' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const originalTokens = [
|
||||||
|
{ token: '{Original Title}', example: 'Movie.Title.HDTV.x264-EVOLVE' },
|
||||||
|
{ token: '{Original Filename}', example: 'movie title hdtv.x264-Evolve' },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface NamingModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
name: keyof Pick<NamingConfig, 'standardMovieFormat' | 'movieFolderFormat'>;
|
||||||
|
value: string;
|
||||||
|
advancedSettings: boolean;
|
||||||
|
movie?: boolean;
|
||||||
|
additional?: boolean;
|
||||||
|
onInputChange: ({ name, value }: { name: string; value: string }) => void;
|
||||||
|
onModalClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NamingModal(props: NamingModalProps) {
|
||||||
|
const {
|
||||||
|
isOpen,
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
advancedSettings,
|
||||||
|
movie = 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>
|
||||||
|
{movie ? 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('Movie')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{movieTokens.map(({ token, example, footNote }) => {
|
||||||
|
return (
|
||||||
|
<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('MovieFootNote')} />
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('MovieID')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{movieIdTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<NamingOption
|
||||||
|
key={token}
|
||||||
|
token={token}
|
||||||
|
example={example}
|
||||||
|
tokenSeparator={tokenSeparator}
|
||||||
|
tokenCase={tokenCase}
|
||||||
|
onPress={handleOptionPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
{additional ? (
|
||||||
|
<div>
|
||||||
|
<FieldSet legend={translate('Quality')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{qualityTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<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 }) => {
|
||||||
|
return (
|
||||||
|
<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('ReleaseGroup')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{releaseGroupTokens.map(({ token, example, footNote }) => {
|
||||||
|
return (
|
||||||
|
<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('ReleaseGroupFootNote')} />
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('Edition')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{editionTokens.map(({ token, example, footNote }) => {
|
||||||
|
return (
|
||||||
|
<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('EditionFootNote')} />
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('CustomFormats')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{customFormatTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<NamingOption
|
||||||
|
key={token}
|
||||||
|
token={token}
|
||||||
|
example={example}
|
||||||
|
tokenSeparator={tokenSeparator}
|
||||||
|
tokenCase={tokenCase}
|
||||||
|
onPress={handleOptionPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('Original')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{originalTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<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;
|
||||||
@ -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;
|
|
||||||
@ -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;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
type TokenCase = 'title' | 'lower' | 'upper';
|
||||||
|
|
||||||
|
export default TokenCase;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
type TokenSeparator = ' ' | '.' | '_' | '-';
|
||||||
|
|
||||||
|
export default TokenSeparator;
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
type ColonReplacementFormat =
|
||||||
|
| 'delete'
|
||||||
|
| 'dash'
|
||||||
|
| 'spaceDash'
|
||||||
|
| 'spaceDashSpace'
|
||||||
|
| 'smart';
|
||||||
|
|
||||||
|
export default interface NamingConfig {
|
||||||
|
renameMovies: boolean;
|
||||||
|
replaceIllegalCharacters: boolean;
|
||||||
|
colonReplacementFormat: ColonReplacementFormat;
|
||||||
|
standardMovieFormat: string;
|
||||||
|
movieFolderFormat: string;
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export default interface NamingExample {
|
||||||
|
movieExample: string;
|
||||||
|
movieFolderExample: string;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue