[UI] Refactor TrackFile Modal

frontend/src/TrackFile/Editor/TrackFileEditorModal.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TrackFileEditorModalContentConnector from './TrackFileEditorModalContentConnector';
+
+function TrackFileEditorModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      {
+        isOpen &&
+          <TrackFileEditorModalContentConnector
+            {...otherProps}
+            onModalClose={onModalClose}
+          />
+      }
+    </Modal>
+  );
+}
+
+TrackFileEditorModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default TrackFileEditorModal;

frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css

@@ -0,0 +1,8 @@
+.actions {
+  display: flex;
+  margin-right: auto;
+}
+
+.selectInput {
+  margin-left: 10px;
+}

frontend/src/TrackFile/Editor/TrackFileEditorModalContent.js

@@ -0,0 +1,268 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import { kinds } from 'Helpers/Props';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import SelectInput from 'Components/Form/SelectInput';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TrackFileEditorRow from './TrackFileEditorRow';
+import styles from './TrackFileEditorModalContent.css';
+
+const columns = [
+  {
+    name: 'trackNumber',
+    label: 'Track',
+    isVisible: true
+  },
+  {
+    name: 'relativePath',
+    label: 'Relative Path',
+    isVisible: true
+  },
+  {
+    name: 'language',
+    label: 'Language',
+    isVisible: true
+  },
+  {
+    name: 'quality',
+    label: 'Quality',
+    isVisible: true
+  }
+];
+
+class TrackFileEditorModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isConfirmDeleteModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.items !== this.props.items) {
+      this.onSelectAllChange({ value: false });
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    const selectedIds = getSelectedIds(this.state.selectedState);
+
+    return _.uniq(_.map(selectedIds, (id) => {
+      return _.find(this.props.items, { id }).trackFileId;
+    }));
+  }
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onDeletePress = () => {
+    this.setState({ isConfirmDeleteModalOpen: true });
+  }
+
+  onConfirmDelete = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+    this.props.onDeletePress(this.getSelectedIds());
+  }
+
+  onConfirmDeleteModalClose = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+  }
+
+  onLanguageChange = ({ value }) => {
+    const selectedIds = this.getSelectedIds();
+
+    if (!selectedIds.length) {
+      return;
+    }
+
+    this.props.onLanguageChange(selectedIds, parseInt(value));
+  }
+
+  onQualityChange = ({ value }) => {
+    const selectedIds = this.getSelectedIds();
+
+    if (!selectedIds.length) {
+      return;
+    }
+
+    this.props.onQualityChange(selectedIds, parseInt(value));
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isDeleting,
+      items,
+      languages,
+      qualities,
+      onModalClose
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmDeleteModalOpen
+    } = this.state;
+
+    const languageOptions = _.reduceRight(languages, (acc, language) => {
+      acc.push({
+        key: language.id,
+        value: language.name
+      });
+
+      return acc;
+    }, [{ key: 'selectLanguage', value: 'Select Language', disabled: true }]);
+
+    const qualityOptions = _.reduceRight(qualities, (acc, quality) => {
+      acc.push({
+        key: quality.id,
+        value: quality.name
+      });
+
+      return acc;
+    }, [{ key: 'selectQuality', value: 'Select Quality', disabled: true }]);
+
+    const hasSelectedFiles = this.getSelectedIds().length > 0;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manage Tracks
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            !items.length &&
+              <div>
+                No track files to manage.
+              </div>
+          }
+
+          {
+            !!items.length &&
+              <Table
+                columns={columns}
+                selectAll={true}
+                allSelected={allSelected}
+                allUnselected={allUnselected}
+                onSelectAllChange={this.onSelectAllChange}
+              >
+                <TableBody>
+                  {
+                    items.map((item) => {
+                      return (
+                        <TrackFileEditorRow
+                          key={item.id}
+                          isSelected={selectedState[item.id]}
+                          {...item}
+                          onSelectedChange={this.onSelectedChange}
+                        />
+                      );
+                    })
+                  }
+                </TableBody>
+              </Table>
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <div className={styles.actions}>
+            <SpinnerButton
+              kind={kinds.DANGER}
+              isSpinning={isDeleting}
+              isDisabled={!hasSelectedFiles}
+              onPress={this.onDeletePress}
+            >
+              Delete
+            </SpinnerButton>
+
+            <div className={styles.selectInput}>
+              <SelectInput
+                name="language"
+                value="selectLanguage"
+                values={languageOptions}
+                isDisabled={!hasSelectedFiles}
+                onChange={this.onLanguageChange}
+              />
+            </div>
+
+            <div className={styles.selectInput}>
+              <SelectInput
+                name="quality"
+                value="selectQuality"
+                values={qualityOptions}
+                isDisabled={!hasSelectedFiles}
+                onChange={this.onQualityChange}
+              />
+            </div>
+          </div>
+
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Selected Track Files"
+          message={'Are you sure you want to delete the selected track files?'}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDelete}
+          onCancel={this.onConfirmDeleteModalClose}
+        />
+      </ModalContent>
+    );
+  }
+}
+
+TrackFileEditorModalContent.propTypes = {
+  isDeleting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDeletePress: PropTypes.func.isRequired,
+  onLanguageChange: PropTypes.func.isRequired,
+  onQualityChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default TrackFileEditorModalContent;

frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js

@@ -0,0 +1,182 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import { deleteTrackFiles, updateTrackFiles } from 'Store/Actions/trackFileActions';
+import { fetchTracks, clearTracks } from 'Store/Actions/trackActions';
+import { fetchLanguageProfileSchema, fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
+import TrackFileEditorModalContent from './TrackFileEditorModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { albumId }) => albumId,
+    (state) => state.tracks,
+    (state) => state.trackFiles,
+    (state) => state.settings.languageProfiles.schema,
+    (state) => state.settings.qualityProfiles.schema,
+    createArtistSelector(),
+    (
+      albumId,
+      tracks,
+      trackFiles,
+      languageProfilesSchema,
+      qualityProfileSchema,
+      series
+    ) => {
+      const filtered = _.filter(tracks.items, (track) => {
+        if (albumId >= 0 && track.albumId !== albumId) {
+          return false;
+        }
+
+        if (!track.trackFileId) {
+          return false;
+        }
+
+        return _.some(trackFiles.items, { id: track.trackFileId });
+      });
+
+      const sorted = _.orderBy(filtered, ['albumId', 'trackNumber'], ['desc', 'asc']);
+
+      const items = _.map(sorted, (track) => {
+        const trackFile = _.find(trackFiles.items, { id: track.trackFileId });
+
+        return {
+          relativePath: trackFile.relativePath,
+          language: trackFile.language,
+          quality: trackFile.quality,
+          ...track
+        };
+      });
+
+      const languages = _.map(languageProfilesSchema.languages, 'language');
+      const qualities = _.map(qualityProfileSchema.items, 'quality');
+
+      return {
+        items,
+        seriesType: series.seriesType,
+        isDeleting: trackFiles.isDeleting,
+        isSaving: trackFiles.isSaving,
+        languages,
+        qualities
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    dispatchClearTracks() {
+      dispatch(clearTracks());
+    },
+
+    dispatchFetchTracks(updateProps) {
+      dispatch(fetchTracks(updateProps));
+    },
+
+    dispatchFetchLanguageProfileSchema(name, path) {
+      dispatch(fetchLanguageProfileSchema());
+    },
+
+    dispatchFetchQualityProfileSchema(name, path) {
+      dispatch(fetchQualityProfileSchema());
+    },
+
+    dispatchUpdateTrackFiles(updateProps) {
+      dispatch(updateTrackFiles(updateProps));
+    },
+
+    onDeletePress(trackFileIds) {
+      dispatch(deleteTrackFiles({ trackFileIds }));
+    },
+
+    onQualityChange(trackFileIds, qualityId) {
+      const quality = {
+        quality: _.find(this.props.qualities, { id: qualityId }),
+        revision: {
+          version: 1,
+          real: 0
+        }
+      };
+
+      dispatch(updateTrackFiles({ trackFileIds, quality }));
+    }
+  };
+}
+
+class TrackFileEditorModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const artistId = this.props.artistId;
+
+    this.props.dispatchFetchTracks({ artistId });
+
+    this.props.dispatchFetchLanguageProfileSchema();
+    this.props.dispatchFetchQualityProfileSchema();
+  }
+
+  componentWillUnmount() {
+    this.props.dispatchClearTracks();
+  }
+
+  //
+  // Render
+
+  //
+  // Listeners
+
+  onLanguageChange = (trackFileIds, languageId) => {
+    const language = _.find(this.props.languages, { id: languageId });
+
+    this.props.dispatchUpdateTrackFiles({ trackFileIds, language });
+  }
+
+  onQualityChange = (trackFileIds, qualityId) => {
+    const quality = {
+      quality: _.find(this.props.qualities, { id: qualityId }),
+      revision: {
+        version: 1,
+        real: 0
+      }
+    };
+
+    this.props.dispatchUpdateTrackFiles({ trackFileIds, quality });
+  }
+
+  render() {
+    const {
+      dispatchFetchLanguageProfileSchema,
+      dispatchFetchQualityProfileSchema,
+      dispatchUpdateTrackFiles,
+      dispatchFetchTracks,
+      dispatchClearTracks,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <TrackFileEditorModalContent
+        {...otherProps}
+        onLanguageChange={this.onLanguageChange}
+        onQualityChange={this.onQualityChange}
+      />
+    );
+  }
+}
+
+TrackFileEditorModalContentConnector.propTypes = {
+  artistId: PropTypes.number.isRequired,
+  albumId: PropTypes.number,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+  dispatchFetchTracks: PropTypes.func.isRequired,
+  dispatchClearTracks: PropTypes.func.isRequired,
+  dispatchFetchLanguageProfileSchema: PropTypes.func.isRequired,
+  dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
+  dispatchUpdateTrackFiles: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(TrackFileEditorModalContentConnector);

frontend/src/TrackFile/Editor/TrackFileEditorRow.css

@@ -0,0 +1,3 @@
+.absoluteEpisodeNumber {
+  margin-left: 5px;
+}

frontend/src/TrackFile/Editor/TrackFileEditorRow.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import padNumber from 'Utilities/Number/padNumber';
+import Label from 'Components/Label';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import styles from './TrackFileEditorRow';
+
+function TrackFileEditorRow(props) {
+  const {
+    id,
+    trackNumber,
+    relativePath,
+    language,
+    quality,
+    isSelected,
+    onSelectedChange
+  } = props;
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChange}
+      />
+
+      <TableRowCell>
+        {padNumber(trackNumber, 2)}
+      </TableRowCell>
+
+      <TableRowCell>
+        {relativePath}
+      </TableRowCell>
+
+      <TableRowCell>
+        <Label>
+          {language.name}
+        </Label>
+      </TableRowCell>
+
+      <TableRowCell>
+        <EpisodeQuality
+          quality={quality}
+        />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+TrackFileEditorRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  trackNumber: PropTypes.number.isRequired,
+  relativePath: PropTypes.string.isRequired,
+  language: PropTypes.object.isRequired,
+  quality: PropTypes.object.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired
+};
+
+export default TrackFileEditorRow;

frontend/src/TrackFile/MediaInfo.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import * as mediaInfoTypes from './mediaInfoTypes';
+
+function MediaInfo(props) {
+  const {
+    type,
+    audioChannels,
+    audioCodec,
+    videoCodec
+  } = props;
+
+  if (type === mediaInfoTypes.AUDIO) {
+    return (
+      <span>
+        {
+          !!audioCodec &&
+            audioCodec
+        }
+
+        {
+          !!audioCodec && !!audioChannels &&
+          ' - '
+        }
+
+        {
+          !!audioChannels &&
+          audioChannels.toFixed(1)
+        }
+      </span>
+    );
+  }
+
+  if (type === mediaInfoTypes.VIDEO) {
+    return (
+      <span>
+        {videoCodec}
+      </span>
+    );
+  }
+
+  return null;
+}
+
+MediaInfo.propTypes = {
+  type: PropTypes.string.isRequired,
+  audioChannels: PropTypes.number,
+  audioCodec: PropTypes.string,
+  videoCodec: PropTypes.string
+};
+
+export default MediaInfo;

frontend/src/TrackFile/MediaInfoConnector.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
+import MediaInfo from './MediaInfo';
+
+function createMapStateToProps() {
+  return createSelector(
+    createTrackFileSelector(),
+    (trackFile) => {
+      if (trackFile) {
+        return {
+          ...trackFile.mediaInfo
+        };
+      }
+
+      return {};
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(MediaInfo);

frontend/src/TrackFile/TrackFileLanguageConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
+import EpisodeLanguage from 'Episode/EpisodeLanguage';
+
+function createMapStateToProps() {
+  return createSelector(
+    createTrackFileSelector(),
+    (trackFile) => {
+      return {
+        language: trackFile ? trackFile.language : undefined
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(EpisodeLanguage);

frontend/src/TrackFile/mediaInfoTypes.js

@@ -0,0 +1,2 @@
+export const AUDIO = 'audio';
+export const VIDEO = 'video';