New: Add table options for movie files details

2023-08-20 16:48:39 +03:00 · 2023-08-20 16:48:39 +03:00 · 4b9107465c
parent 329e43c331
commit 4b9107465c
9 changed files with 315 additions and 192 deletions
--- a/frontend/src/Components/Link/IconButton.js
+++ b/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}
    >
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/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}
              >
--- a/frontend/src/MovieFile/Editor/MovieFileEditorRow.css
+++ b/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';

--- a/frontend/src/MovieFile/Editor/MovieFileEditorRow.css.d.ts
+++ b/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;
--- a/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
+++ b/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
@ -81,7 +81,8 @@ class MovieFileEditorRow extends Component {
      qualityCutoffNotMet,
      customFormats,
      customFormatScore,
-      languages
+      languages,
+      columns
    } = this.props;

    const {
@ -91,138 +92,214 @@ class MovieFileEditorRow extends Component {
    } = this.state;

    const showQualityPlaceholder = !quality;
-
    const showLanguagePlaceholder = !languages;

    return (
      <TableRow>
-        <TableRowCell
-          className={styles.relativePath}
-          title={relativePath}
-        >
-          {relativePath}
-        </TableRowCell>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;

-        <TableRowCell>
-          <MediaInfoConnector
-            movieFileId={id}
-            type={mediaInfoTypes.VIDEO}
-          />
-        </TableRowCell>
+            if (!isVisible) {
+              return null;
+            }

-        <TableRowCell>
-          <MediaInfoConnector
-            movieFileId={id}
-            type={mediaInfoTypes.AUDIO}
-          />
-        </TableRowCell>
+            if (name === 'relativePath') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.relativePath}
+                  title={relativePath}
+                >
+                  {relativePath}
+                </TableRowCell>
+              );
+            }

-        <TableRowCell
-          className={styles.audioLanguages}
-        >
-          <MediaInfoConnector
-            type={mediaInfoTypes.AUDIO_LANGUAGES}
-            movieFileId={id}
-          />
-        </TableRowCell>
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }

-        <TableRowCell
-          className={styles.subtitles}
-        >
-          <MediaInfoConnector
-            type={mediaInfoTypes.SUBTITLES}
-            movieFileId={id}
-          />
-        </TableRowCell>
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.TOP}
+                  />
+                </TableRowCell>
+              );
+            }

-        <TableRowCell
-          className={styles.size}
-          title={size}
-        >
-          {formatBytes(size)}
-        </TableRowCell>
+            if (name === 'languages') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.languages}
+                >
+                  {
+                    showLanguagePlaceholder ?
+                      <MovieFileRowCellPlaceholder /> :
+                      null
+                  }

-        <TableRowCell
-          className={styles.language}
-        >
-          {
-            showLanguagePlaceholder &&
-              <MovieFileRowCellPlaceholder />
-          }
+                  {
+                    !showLanguagePlaceholder && !!languages &&
+                      <MovieLanguage
+                        className={styles.label}
+                        languages={languages}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }

-          {
-            !showLanguagePlaceholder && !!languages &&
-              <MovieLanguage
-                className={styles.label}
-                languages={languages}
-              />
-          }
-        </TableRowCell>
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  {
+                    showQualityPlaceholder ?
+                      <MovieFileRowCellPlaceholder /> :
+                      null
+                  }

-        <TableRowCell
-          className={styles.quality}
-        >
-          {
-            showQualityPlaceholder &&
-              <MovieFileRowCellPlaceholder />
-          }
+                  {
+                    !showQualityPlaceholder && !!quality &&
+                      <MovieQuality
+                        className={styles.label}
+                        quality={quality}
+                        isCutoffNotMet={qualityCutoffNotMet}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }

-          {
-            !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>
+              );
+            }

-        <TableRowCell
-          className={styles.releaseGroup}
-        >
-          {releaseGroup}
-        </TableRowCell>
+            if (name === 'audioLanguages') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.audioLanguages}
+                >
+                  <MediaInfoConnector
+                    type={mediaInfoTypes.AUDIO_LANGUAGES}
+                    movieFileId={id}
+                  />
+                </TableRowCell>
+              );
+            }

-        <TableRowCell
-          className={styles.formats}
-        >
-          <MovieFormats
-            formats={customFormats}
-          />
-        </TableRowCell>
+            if (name === 'subtitleLanguages') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.subtitles}
+                >
+                  <MediaInfoConnector
+                    type={mediaInfoTypes.SUBTITLES}
+                    movieFileId={id}
+                  />
+                </TableRowCell>
+              );
+            }

-        <TableRowCell
-          className={styles.customFormatScore}
-        >
-          <Tooltip
-            anchor={formatCustomFormatScore(
-              customFormatScore,
-              customFormats.length
-            )}
-            tooltip={<MovieFormats formats={customFormats} />}
-            position={tooltipPositions.TOP}
-          />
-        </TableRowCell>
+            if (name === 'videoCodec') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.video}
+                >
+                  <MediaInfoConnector
+                    movieFileId={id}
+                    type={mediaInfoTypes.VIDEO}
+                  />
+                </TableRowCell>
+              );
+            }

-        <TableRowCell className={styles.actions}>
-          <IconButton
-            title={translate('EditMovieFile')}
-            name={icons.EDIT}
-            onPress={this.onFileEditPress}
-          />
+            if (name === 'size') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.size}
+                  title={size}
+                >
+                  {formatBytes(size)}
+                </TableRowCell>
+              );
+            }

-          <IconButton
-            title={translate('Details')}
-            name={icons.MEDIA_INFO}
-            onPress={this.onFileDetailsPress}
-          />
+            if (name === 'releaseGroup') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.releaseGroup}
+                >
+                  {releaseGroup}
+                </TableRowCell>
+              );
+            }

-          <IconButton
-            title={translate('DeleteFile')}
-            name={icons.REMOVE}
-            onPress={this.onDeletePress}
-          />
-        </TableRowCell>
+            if (name === 'actions') {
+              return (
+                <TableRowCell key={name} className={styles.actions}>
+                  <IconButton
+                    title={translate('EditMovieFile')}
+                    name={icons.EDIT}
+                    onPress={this.onFileEditPress}
+                  />
+
+                  <IconButton
+                    title={translate('Details')}
+                    name={icons.MEDIA_INFO}
+                    onPress={this.onFileDetailsPress}
+                  />
+
+                  <IconButton
+                    title={translate('DeleteFile')}
+                    name={icons.REMOVE}
+                    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;
--- a/frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js
+++ b/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
 };

--- a/frontend/src/MovieFile/Editor/MovieFileEditorTableContentConnector.js
+++ b/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
--- a/frontend/src/Store/Actions/movieFileActions.js
+++ b/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);
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/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}",