New: Add table options for movie files details

frontend/src/Components/Link/IconButton.js

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

frontend/src/Movie/Details/MovieDetails.js

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

frontend/src/MovieFile/Editor/MovieFileEditorRow.css

@@ -28,6 +28,9 @@
   white-space: nowrap;
 }
 
+.languages,
+.audio,
+.video,
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/MovieFile/Editor/MovieFileEditorRow.css.d.ts

@@ -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;

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -81,7 +81,8 @@ class MovieFileEditorRow extends Component {
       qualityCutoffNotMet,
       customFormats,
       customFormatScore,
-      languages
+      languages,
+      columns
     } = this.props;
 
     const {
@@ -91,63 +92,71 @@ 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>
+            if (name === 'customFormats') {
-          <MediaInfoConnector
+              return (
-            movieFileId={id}
+                <TableRowCell key={name}>
-            type={mediaInfoTypes.VIDEO}
+                  <MovieFormats
-          />
+                    formats={customFormats}
-        </TableRowCell>
-
-        <TableRowCell>
-          <MediaInfoConnector
-            movieFileId={id}
-            type={mediaInfoTypes.AUDIO}
-          />
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.audioLanguages}
-        >
-          <MediaInfoConnector
-            type={mediaInfoTypes.AUDIO_LANGUAGES}
-            movieFileId={id}
                   />
                 </TableRowCell>
+              );
+            }
 
+            if (name === 'customFormatScore') {
+              return (
                 <TableRowCell
-          className={styles.subtitles}
+                  key={name}
+                  className={styles.customFormatScore}
                 >
-          <MediaInfoConnector
+                  <Tooltip
-            type={mediaInfoTypes.SUBTITLES}
+                    anchor={formatCustomFormatScore(
-            movieFileId={id}
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.TOP}
                   />
                 </TableRowCell>
+              );
+            }
 
+            if (name === 'languages') {
+              return (
                 <TableRowCell
-          className={styles.size}
+                  key={name}
-          title={size}
+                  className={styles.languages}
-        >
-          {formatBytes(size)}
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.language}
                 >
                   {
-            showLanguagePlaceholder &&
+                    showLanguagePlaceholder ?
-              <MovieFileRowCellPlaceholder />
+                      <MovieFileRowCellPlaceholder /> :
+                      null
                   }
 
                   {
@@ -158,13 +167,19 @@ class MovieFileEditorRow extends Component {
                       />
                   }
                 </TableRowCell>
+              );
+            }
 
+            if (name === 'quality') {
+              return (
                 <TableRowCell
+                  key={name}
                   className={styles.quality}
                 >
                   {
-            showQualityPlaceholder &&
+                    showQualityPlaceholder ?
-              <MovieFileRowCellPlaceholder />
+                      <MovieFileRowCellPlaceholder /> :
+                      null
                   }
 
                   {
@@ -176,35 +191,91 @@ class MovieFileEditorRow extends Component {
                       />
                   }
                 </TableRowCell>
+              );
+            }
 
+            if (name === 'audioInfo') {
+              return (
                 <TableRowCell
-          className={styles.releaseGroup}
+                  key={name}
+                  className={styles.audio}
                 >
-          {releaseGroup}
+                  <MediaInfoConnector
+                    movieFileId={id}
+                    type={mediaInfoTypes.AUDIO}
+                  />
                 </TableRowCell>
+              );
+            }
 
+            if (name === 'audioLanguages') {
+              return (
                 <TableRowCell
-          className={styles.formats}
+                  key={name}
+                  className={styles.audioLanguages}
                 >
-          <MovieFormats
+                  <MediaInfoConnector
-            formats={customFormats}
+                    type={mediaInfoTypes.AUDIO_LANGUAGES}
+                    movieFileId={id}
                   />
                 </TableRowCell>
+              );
+            }
 
+            if (name === 'subtitleLanguages') {
+              return (
                 <TableRowCell
-          className={styles.customFormatScore}
+                  key={name}
+                  className={styles.subtitles}
                 >
-          <Tooltip
+                  <MediaInfoConnector
-            anchor={formatCustomFormatScore(
+                    type={mediaInfoTypes.SUBTITLES}
-              customFormatScore,
+                    movieFileId={id}
-              customFormats.length
-            )}
-            tooltip={<MovieFormats formats={customFormats} />}
-            position={tooltipPositions.TOP}
                   />
                 </TableRowCell>
+              );
+            }
 
-        <TableRowCell className={styles.actions}>
+            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;

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js

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

frontend/src/MovieFile/Editor/MovieFileEditorTableContentConnector.js

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

frontend/src/Store/Actions/movieFileActions.js

@@ -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);

src/NzbDrone.Core/Localization/Core/en.json

@@ -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}",