mirror of
https://github.com/Radarr/Radarr.git
synced 2024-08-16 15:29:40 +02:00
New: Add table options for movie files details
This commit is contained in:
parent
329e43c331
commit
4b9107465c
@ -2,6 +2,7 @@ import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Icon from 'Components/Icon';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import Link from './Link';
|
||||
import styles from './IconButton.css';
|
||||
|
||||
@ -23,7 +24,7 @@ function IconButton(props) {
|
||||
className,
|
||||
isDisabled && styles.isDisabled
|
||||
)}
|
||||
aria-label="Table Options Button"
|
||||
aria-label={translate('TableOptionsButton')}
|
||||
isDisabled={isDisabled}
|
||||
{...otherProps}
|
||||
>
|
||||
|
@ -654,7 +654,7 @@ class MovieDetails extends Component {
|
||||
</div>
|
||||
}
|
||||
|
||||
<Tabs selectedIndex={this.state.tabIndex} onSelect={this.onTabSelect}>
|
||||
<Tabs selectedIndex={selectedTabIndex} onSelect={this.onTabSelect}>
|
||||
<TabList
|
||||
className={styles.tabList}
|
||||
>
|
||||
|
@ -28,6 +28,9 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.languages,
|
||||
.audio,
|
||||
.video,
|
||||
.actions {
|
||||
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||
|
||||
|
@ -3,17 +3,20 @@
|
||||
interface CssExports {
|
||||
'actions': string;
|
||||
'age': string;
|
||||
'audio': string;
|
||||
'audioLanguages': string;
|
||||
'customFormatScore': string;
|
||||
'download': string;
|
||||
'formats': string;
|
||||
'language': string;
|
||||
'languages': string;
|
||||
'quality': string;
|
||||
'rejected': string;
|
||||
'relativePath': string;
|
||||
'releaseGroup': string;
|
||||
'size': string;
|
||||
'subtitles': string;
|
||||
'video': string;
|
||||
}
|
||||
export const cssExports: CssExports;
|
||||
export default cssExports;
|
||||
|
@ -81,7 +81,8 @@ class MovieFileEditorRow extends Component {
|
||||
qualityCutoffNotMet,
|
||||
customFormats,
|
||||
customFormatScore,
|
||||
languages
|
||||
languages,
|
||||
columns
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
@ -91,107 +92,47 @@ class MovieFileEditorRow extends Component {
|
||||
} = this.state;
|
||||
|
||||
const showQualityPlaceholder = !quality;
|
||||
|
||||
const showLanguagePlaceholder = !languages;
|
||||
|
||||
return (
|
||||
<TableRow>
|
||||
{
|
||||
columns.map((column) => {
|
||||
const {
|
||||
name,
|
||||
isVisible
|
||||
} = column;
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (name === 'relativePath') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.relativePath}
|
||||
title={relativePath}
|
||||
>
|
||||
{relativePath}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell>
|
||||
<MediaInfoConnector
|
||||
movieFileId={id}
|
||||
type={mediaInfoTypes.VIDEO}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell>
|
||||
<MediaInfoConnector
|
||||
movieFileId={id}
|
||||
type={mediaInfoTypes.AUDIO}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.audioLanguages}
|
||||
>
|
||||
<MediaInfoConnector
|
||||
type={mediaInfoTypes.AUDIO_LANGUAGES}
|
||||
movieFileId={id}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.subtitles}
|
||||
>
|
||||
<MediaInfoConnector
|
||||
type={mediaInfoTypes.SUBTITLES}
|
||||
movieFileId={id}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.size}
|
||||
title={size}
|
||||
>
|
||||
{formatBytes(size)}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.language}
|
||||
>
|
||||
{
|
||||
showLanguagePlaceholder &&
|
||||
<MovieFileRowCellPlaceholder />
|
||||
);
|
||||
}
|
||||
|
||||
{
|
||||
!showLanguagePlaceholder && !!languages &&
|
||||
<MovieLanguage
|
||||
className={styles.label}
|
||||
languages={languages}
|
||||
/>
|
||||
}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.quality}
|
||||
>
|
||||
{
|
||||
showQualityPlaceholder &&
|
||||
<MovieFileRowCellPlaceholder />
|
||||
}
|
||||
|
||||
{
|
||||
!showQualityPlaceholder && !!quality &&
|
||||
<MovieQuality
|
||||
className={styles.label}
|
||||
quality={quality}
|
||||
isCutoffNotMet={qualityCutoffNotMet}
|
||||
/>
|
||||
}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.releaseGroup}
|
||||
>
|
||||
{releaseGroup}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell
|
||||
className={styles.formats}
|
||||
>
|
||||
if (name === 'customFormats') {
|
||||
return (
|
||||
<TableRowCell key={name}>
|
||||
<MovieFormats
|
||||
formats={customFormats}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'customFormatScore') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.customFormatScore}
|
||||
>
|
||||
<Tooltip
|
||||
@ -203,8 +144,138 @@ class MovieFileEditorRow extends Component {
|
||||
position={tooltipPositions.TOP}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
<TableRowCell className={styles.actions}>
|
||||
if (name === 'languages') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.languages}
|
||||
>
|
||||
{
|
||||
showLanguagePlaceholder ?
|
||||
<MovieFileRowCellPlaceholder /> :
|
||||
null
|
||||
}
|
||||
|
||||
{
|
||||
!showLanguagePlaceholder && !!languages &&
|
||||
<MovieLanguage
|
||||
className={styles.label}
|
||||
languages={languages}
|
||||
/>
|
||||
}
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'quality') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.quality}
|
||||
>
|
||||
{
|
||||
showQualityPlaceholder ?
|
||||
<MovieFileRowCellPlaceholder /> :
|
||||
null
|
||||
}
|
||||
|
||||
{
|
||||
!showQualityPlaceholder && !!quality &&
|
||||
<MovieQuality
|
||||
className={styles.label}
|
||||
quality={quality}
|
||||
isCutoffNotMet={qualityCutoffNotMet}
|
||||
/>
|
||||
}
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'audioInfo') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.audio}
|
||||
>
|
||||
<MediaInfoConnector
|
||||
movieFileId={id}
|
||||
type={mediaInfoTypes.AUDIO}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'audioLanguages') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.audioLanguages}
|
||||
>
|
||||
<MediaInfoConnector
|
||||
type={mediaInfoTypes.AUDIO_LANGUAGES}
|
||||
movieFileId={id}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'subtitleLanguages') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.subtitles}
|
||||
>
|
||||
<MediaInfoConnector
|
||||
type={mediaInfoTypes.SUBTITLES}
|
||||
movieFileId={id}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'videoCodec') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.video}
|
||||
>
|
||||
<MediaInfoConnector
|
||||
movieFileId={id}
|
||||
type={mediaInfoTypes.VIDEO}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'size') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.size}
|
||||
title={size}
|
||||
>
|
||||
{formatBytes(size)}
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'releaseGroup') {
|
||||
return (
|
||||
<TableRowCell
|
||||
key={name}
|
||||
className={styles.releaseGroup}
|
||||
>
|
||||
{releaseGroup}
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'actions') {
|
||||
return (
|
||||
<TableRowCell key={name} className={styles.actions}>
|
||||
<IconButton
|
||||
title={translate('EditMovieFile')}
|
||||
name={icons.EDIT}
|
||||
@ -223,6 +294,12 @@ class MovieFileEditorRow extends Component {
|
||||
onPress={this.onDeletePress}
|
||||
/>
|
||||
</TableRowCell>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})
|
||||
}
|
||||
|
||||
<FileDetailsModal
|
||||
isOpen={isFileDetailsModalOpen}
|
||||
@ -263,7 +340,12 @@ MovieFileEditorRow.propTypes = {
|
||||
qualityCutoffNotMet: PropTypes.bool.isRequired,
|
||||
languages: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
mediaInfo: PropTypes.object,
|
||||
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
onDeletePress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
MovieFileEditorRow.defaultProps = {
|
||||
customFormats: []
|
||||
};
|
||||
|
||||
export default MovieFileEditorRow;
|
||||
|
@ -1,80 +1,10 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Icon from 'Components/Icon';
|
||||
import IconButton from 'Components/Link/IconButton';
|
||||
import Table from 'Components/Table/Table';
|
||||
import TableBody from 'Components/Table/TableBody';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import MovieFileEditorRow from './MovieFileEditorRow';
|
||||
import styles from './MovieFileEditorTableContent.css';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'title',
|
||||
label: () => translate('RelativePath'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'videoCodec',
|
||||
label: () => translate('VideoCodec'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'audioInfo',
|
||||
label: () => translate('AudioInfo'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'audioLanguages',
|
||||
label: () => translate('AudioLanguages'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'subtitleLanguages',
|
||||
label: () => translate('SubtitleLanguages'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
label: () => translate('Size'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'languages',
|
||||
label: () => translate('Languages'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'quality',
|
||||
label: () => translate('Quality'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'releaseGroup',
|
||||
label: () => translate('ReleaseGroup'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'customFormats',
|
||||
label: () => translate('Formats'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'customFormatScore',
|
||||
label: React.createElement(Icon, {
|
||||
name: icons.SCORE,
|
||||
title: () => translate('CustomFormatScore')
|
||||
}),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'action',
|
||||
label: React.createElement(IconButton, { name: icons.ADVANCED_SETTINGS }),
|
||||
isVisible: true
|
||||
}
|
||||
];
|
||||
|
||||
class MovieFileEditorTableContent extends Component {
|
||||
|
||||
//
|
||||
@ -82,7 +12,9 @@ class MovieFileEditorTableContent extends Component {
|
||||
|
||||
render() {
|
||||
const {
|
||||
items
|
||||
items,
|
||||
columns,
|
||||
onTableOptionChange
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
@ -96,13 +28,17 @@ class MovieFileEditorTableContent extends Component {
|
||||
|
||||
{
|
||||
!!items.length &&
|
||||
<Table columns={columns}>
|
||||
<Table
|
||||
columns={columns}
|
||||
onTableOptionChange={onTableOptionChange}
|
||||
>
|
||||
<TableBody>
|
||||
{
|
||||
items.map((item) => {
|
||||
return (
|
||||
<MovieFileEditorRow
|
||||
key={item.id}
|
||||
columns={columns}
|
||||
{...item}
|
||||
onDeletePress={this.props.onDeletePress}
|
||||
/>
|
||||
@ -122,6 +58,8 @@ MovieFileEditorTableContent.propTypes = {
|
||||
movieId: PropTypes.number,
|
||||
isDeleting: PropTypes.bool.isRequired,
|
||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
onTableOptionChange: PropTypes.func.isRequired,
|
||||
onDeletePress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
|
@ -1,9 +1,8 @@
|
||||
/* eslint max-params: 0 */
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { deleteMovieFile, updateMovieFiles } from 'Store/Actions/movieFileActions';
|
||||
import { deleteMovieFile, setMovieFilesTableOption, updateMovieFiles } from 'Store/Actions/movieFileActions';
|
||||
import { fetchLanguages, fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
|
||||
import createMovieSelector from 'Store/Selectors/createMovieSelector';
|
||||
import getQualities from 'Utilities/Quality/getQualities';
|
||||
@ -30,6 +29,7 @@ function createMapStateToProps() {
|
||||
|
||||
return {
|
||||
items: filesForMovie,
|
||||
columns: movieFiles.columns,
|
||||
isDeleting: movieFiles.isDeleting,
|
||||
isSaving: movieFiles.isSaving,
|
||||
error: null,
|
||||
@ -54,6 +54,10 @@ function createMapDispatchToProps(dispatch, props) {
|
||||
dispatch(updateMovieFiles(updateProps));
|
||||
},
|
||||
|
||||
onTableOptionChange(payload) {
|
||||
dispatch(setMovieFilesTableOption(payload));
|
||||
},
|
||||
|
||||
onDeletePress(movieFileId) {
|
||||
dispatch(deleteMovieFile({
|
||||
id: movieFileId
|
||||
|
@ -1,9 +1,15 @@
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import { createAction } from 'redux-actions';
|
||||
import { batchActions } from 'redux-batched-actions';
|
||||
import Icon from 'Components/Icon';
|
||||
import IconButton from 'Components/Link/IconButton';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import movieEntities from 'Movie/movieEntities';
|
||||
import createSetTableOptionReducer from 'Store/Actions/Creators/Reducers/createSetTableOptionReducer';
|
||||
import { createThunk, handleThunks } from 'Store/thunks';
|
||||
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import { removeItem, set, updateItem } from './baseActions';
|
||||
import createFetchHandler from './Creators/createFetchHandler';
|
||||
import createHandleActions from './Creators/createHandleActions';
|
||||
@ -25,9 +31,82 @@ export const defaultState = {
|
||||
deleteError: null,
|
||||
isSaving: false,
|
||||
saveError: null,
|
||||
items: []
|
||||
items: [],
|
||||
|
||||
columns: [
|
||||
{
|
||||
name: 'relativePath',
|
||||
label: () => translate('RelativePath'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'videoCodec',
|
||||
label: () => translate('VideoCodec'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'audioInfo',
|
||||
label: () => translate('AudioInfo'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'audioLanguages',
|
||||
label: () => translate('AudioLanguages'),
|
||||
isVisible: false
|
||||
},
|
||||
{
|
||||
name: 'subtitleLanguages',
|
||||
label: () => translate('SubtitleLanguages'),
|
||||
isVisible: false
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
label: () => translate('Size'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'languages',
|
||||
label: () => translate('Languages'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'quality',
|
||||
label: () => translate('Quality'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'releaseGroup',
|
||||
label: () => translate('ReleaseGroup'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'customFormats',
|
||||
label: () => translate('Formats'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'customFormatScore',
|
||||
columnLabel: () => translate('CustomFormatScore'),
|
||||
label: React.createElement(Icon, {
|
||||
name: icons.SCORE,
|
||||
title: () => translate('CustomFormatScore')
|
||||
}),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
columnLabel: () => translate('Actions'),
|
||||
label: React.createElement(IconButton, { name: icons.ADVANCED_SETTINGS }),
|
||||
isVisible: true,
|
||||
isModifiable: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const persistState = [
|
||||
'movieFiles.columns'
|
||||
];
|
||||
|
||||
//
|
||||
// Actions Types
|
||||
|
||||
@ -36,6 +115,7 @@ export const DELETE_MOVIE_FILE = 'movieFiles/deleteMovieFile';
|
||||
export const DELETE_MOVIE_FILES = 'movieFiles/deleteMovieFiles';
|
||||
export const UPDATE_MOVIE_FILES = 'movieFiles/updateMovieFiles';
|
||||
export const CLEAR_MOVIE_FILES = 'movieFiles/clearMovieFiles';
|
||||
export const SET_MOVIE_FILES_TABLE_OPTION = 'movieFiles/setMovieFilesTableOption';
|
||||
|
||||
//
|
||||
// Action Creators
|
||||
@ -45,6 +125,7 @@ export const deleteMovieFile = createThunk(DELETE_MOVIE_FILE);
|
||||
export const deleteMovieFiles = createThunk(DELETE_MOVIE_FILES);
|
||||
export const updateMovieFiles = createThunk(UPDATE_MOVIE_FILES);
|
||||
export const clearMovieFiles = createAction(CLEAR_MOVIE_FILES);
|
||||
export const setMovieFilesTableOption = createAction(SET_MOVIE_FILES_TABLE_OPTION);
|
||||
|
||||
//
|
||||
// Helpers
|
||||
@ -234,9 +315,19 @@ export const actionHandlers = handleThunks({
|
||||
// Reducers
|
||||
|
||||
export const reducers = createHandleActions({
|
||||
[SET_MOVIE_FILES_TABLE_OPTION]: createSetTableOptionReducer(section),
|
||||
|
||||
[CLEAR_MOVIE_FILES]: (state) => {
|
||||
return Object.assign({}, state, defaultState);
|
||||
return Object.assign({}, state, {
|
||||
isFetching: false,
|
||||
isPopulated: false,
|
||||
error: null,
|
||||
isDeleting: false,
|
||||
deleteError: null,
|
||||
isSaving: false,
|
||||
saveError: null,
|
||||
items: []
|
||||
});
|
||||
}
|
||||
|
||||
}, defaultState, section);
|
||||
|
@ -1109,6 +1109,7 @@
|
||||
"TMDb": "TMDb",
|
||||
"Table": "Table",
|
||||
"TableOptions": "Table Options",
|
||||
"TableOptionsButton": "Table Options Button",
|
||||
"TableOptionsColumnsMessage": "Choose which columns are visible and which order they appear in",
|
||||
"TagCannotBeDeletedWhileInUse": "Cannot be deleted while in use",
|
||||
"TagDetails": "Tag Details - {label}",
|
||||
|
Loading…
Reference in New Issue
Block a user