New: Unmapped files view (#888)

* New: Unmapped files view

Displays all trackfiles that haven't been matched to a track.
Generalised the file details component and adds it to the album
details screen.

* Add sorting by quality

* New: MediaServiceTests & MediaRepoTests

frontend/src/UnmappedFiles/UnmappedFilesTable.js

@@ -0,0 +1,161 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { align, icons, sortDirections } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import VirtualTable from 'Components/Table/VirtualTable';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import UnmappedFilesTableRow from './UnmappedFilesTableRow';
+import UnmappedFilesTableHeader from './UnmappedFilesTableHeader';
+
+class UnmappedFilesTable extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      contentBody: null,
+      scrollTop: 0
+    };
+  }
+
+  //
+  // Control
+
+  setContentBodyRef = (ref) => {
+    this.setState({ contentBody: ref });
+  }
+
+  rowRenderer = ({ key, rowIndex, style }) => {
+    const {
+      items,
+      columns,
+      deleteUnmappedFile
+    } = this.props;
+
+    const item = items[rowIndex];
+
+    return (
+      <UnmappedFilesTableRow
+        style={style}
+        key={key}
+        columns={columns}
+        deleteUnmappedFile={deleteUnmappedFile}
+        {...item}
+      />
+    );
+  }
+
+  //
+  // Listeners
+
+  onScroll = ({ scrollTop }) => {
+    this.setState({ scrollTop });
+  }
+
+  render() {
+
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      sortKey,
+      sortDirection,
+      onTableOptionChange,
+      onSortPress,
+      deleteUnmappedFile,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scrollTop,
+      contentBody
+    } = this.state;
+
+    return (
+      <PageContent title="UnmappedFiles">
+        <PageToolbar>
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+              onTableOptionChange={onTableOptionChange}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector
+          ref={this.setContentBodyRef}
+          onScroll={this.onScroll}
+        >
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            isPopulated && !error && !items.length &&
+              <div>
+                Success! My work is done, all files on disk are matched to known tracks.
+              </div>
+          }
+
+          {
+            isPopulated && !error && !!items.length && contentBody &&
+              <VirtualTable
+                items={items}
+                columns={columns}
+                contentBody={contentBody}
+                isSmallScreen={false}
+                scrollTop={scrollTop}
+                onScroll={this.onScroll}
+                overscanRowCount={10}
+                rowRenderer={this.rowRenderer}
+                header={
+                  <UnmappedFilesTableHeader
+                    columns={columns}
+                    sortKey={sortKey}
+                    sortDirection={sortDirection}
+                    onTableOptionChange={onTableOptionChange}
+                    onSortPress={onSortPress}
+                  />
+                }
+                sortKey={sortKey}
+                sortDirection={sortDirection}
+              />
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+UnmappedFilesTable.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  onTableOptionChange: PropTypes.func.isRequired,
+  onSortPress: PropTypes.func.isRequired,
+  deleteUnmappedFile: PropTypes.func.isRequired
+};
+
+export default UnmappedFilesTable;

frontend/src/UnmappedFiles/UnmappedFilesTableConnector.js

@@ -0,0 +1,100 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import { fetchTrackFiles, deleteTrackFile, setTrackFilesSort, setTrackFilesTableOption } from 'Store/Actions/trackFileActions';
+import withCurrentPage from 'Components/withCurrentPage';
+import UnmappedFilesTable from './UnmappedFilesTable';
+
+function createMapStateToProps() {
+  return createSelector(
+    createClientSideCollectionSelector('trackFiles'),
+    createDimensionsSelector(),
+    (
+      trackFiles,
+      dimensionsState
+    ) => {
+      // trackFiles could pick up mapped entries via signalR so filter again here
+      const {
+        items,
+        ...otherProps
+      } = trackFiles;
+      const unmappedFiles = _.filter(items, { albumId: 0 });
+      return {
+        items: unmappedFiles,
+        ...otherProps,
+        isSmallScreen: dimensionsState.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onTableOptionChange(payload) {
+      dispatch(setTrackFilesTableOption(payload));
+    },
+
+    onSortPress(sortKey) {
+      dispatch(setTrackFilesSort({ sortKey }));
+    },
+
+    fetchUnmappedFiles() {
+      dispatch(fetchTrackFiles({ unmapped: true }));
+    },
+
+    deleteUnmappedFile(id) {
+      dispatch(deleteTrackFile({ id }));
+    }
+  };
+}
+
+class UnmappedFilesTableConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    registerPagePopulator(this.repopulate, ['trackFileUpdated']);
+
+    this.repopulate();
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchUnmappedFiles();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <UnmappedFilesTable
+        {...this.props}
+      />
+    );
+  }
+}
+
+UnmappedFilesTableConnector.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortPress: PropTypes.func.isRequired,
+  onTableOptionChange: PropTypes.func.isRequired,
+  fetchUnmappedFiles: PropTypes.func.isRequired,
+  deleteUnmappedFile: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, createMapDispatchToProps)(UnmappedFilesTableConnector)
+);

frontend/src/UnmappedFiles/UnmappedFilesTableHeader.css

@@ -0,0 +1,19 @@
+.quality,
+.size,
+.dateAdded {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 120px;
+}
+
+.path {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 400px;
+}
+
+.actions {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 90px;
+}

frontend/src/UnmappedFiles/UnmappedFilesTableHeader.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+// import hasGrowableColumns from './hasGrowableColumns';
+import styles from './UnmappedFilesTableHeader.css';
+
+function UnmappedFilesTableHeader(props) {
+  const {
+    columns,
+    onTableOptionChange,
+    ...otherProps
+  } = props;
+
+  return (
+    <VirtualTableHeader>
+      {
+        columns.map((column) => {
+          const {
+            name,
+            label,
+            isSortable,
+            isVisible
+          } = column;
+
+          if (!isVisible) {
+            return null;
+          }
+
+          if (name === 'actions') {
+            return (
+              <VirtualTableHeaderCell
+                key={name}
+                className={styles[name]}
+                name={name}
+                isSortable={false}
+                {...otherProps}
+              >
+
+                <TableOptionsModalWrapper
+                  columns={columns}
+                  onTableOptionChange={onTableOptionChange}
+                >
+                  <IconButton
+                    name={icons.ADVANCED_SETTINGS}
+                  />
+                </TableOptionsModalWrapper>
+              </VirtualTableHeaderCell>
+            );
+          }
+
+          return (
+            <VirtualTableHeaderCell
+              key={name}
+              className={styles[name]}
+              name={name}
+              isSortable={isSortable}
+              {...otherProps}
+            >
+              {label}
+            </VirtualTableHeaderCell>
+          );
+        })
+      }
+    </VirtualTableHeader>
+  );
+}
+
+UnmappedFilesTableHeader.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onTableOptionChange: PropTypes.func.isRequired
+};
+
+export default UnmappedFilesTableHeader;

frontend/src/UnmappedFiles/UnmappedFilesTableRow.css

@@ -0,0 +1,22 @@
+.path {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 4 0 400px;
+  font-size: 13px;
+  font-family: $monoSpaceFontFamily;
+}
+
+.quality,
+.dateAdded,
+.size {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 0 120px;
+  white-space: nowrap;
+}
+
+.actions {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 0 90px;
+}

frontend/src/UnmappedFiles/UnmappedFilesTableRow.js

@@ -0,0 +1,218 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import formatBytes from 'Utilities/Number/formatBytes';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import TrackQuality from 'Album/TrackQuality';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import FileDetailsModal from 'TrackFile/FileDetailsModal';
+import styles from './UnmappedFilesTableRow.css';
+
+class UnmappedFilesTableRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false,
+      isInteractiveImportModalOpen: false,
+      isConfirmDeleteModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  onInteractiveImportPress = () => {
+    this.setState({ isInteractiveImportModalOpen: true });
+  }
+
+  onInteractiveImportModalClose = () => {
+    this.setState({ isInteractiveImportModalOpen: false });
+  }
+
+  onDeleteFilePress = () => {
+    this.setState({ isConfirmDeleteModalOpen: true });
+  }
+
+  onConfirmDelete = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+    this.props.deleteUnmappedFile(this.props.id);
+  }
+
+  onConfirmDeleteModalClose = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      style,
+      id,
+      path,
+      size,
+      dateAdded,
+      quality,
+      columns
+    } = this.props;
+
+    const folder = path.substring(0, Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\')));
+
+    const {
+      isInteractiveImportModalOpen,
+      isDetailsModalOpen,
+      isConfirmDeleteModalOpen
+    } = this.state;
+
+    return (
+      <VirtualTableRow
+        style={style}
+      >
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'path') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {path}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'size') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {formatBytes(size)}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'dateAdded') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={dateAdded}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <TrackQuality
+                    quality={quality}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+
+                  <IconButton
+                    name={icons.INTERACTIVE}
+                    onPress={this.onInteractiveImportPress}
+                  />
+
+                  <IconButton
+                    name={icons.DELETE}
+                    onPress={this.onDeleteFilePress}
+                  />
+
+                </VirtualTableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          folder={folder}
+          showFilterExistingFiles={true}
+          filterExistingFiles={false}
+          showImportMode={false}
+          showReplaceExistingFiles={false}
+          replaceExistingFiles={false}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <FileDetailsModal
+          isOpen={isDetailsModalOpen}
+          onModalClose={this.onDetailsModalClose}
+          id={id}
+        />
+
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Track File"
+          message={`Are you sure you want to delete ${path}?`}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDelete}
+          onCancel={this.onConfirmDeleteModalClose}
+        />
+
+      </VirtualTableRow>
+    );
+  }
+
+}
+
+UnmappedFilesTableRow.propTypes = {
+  style: PropTypes.object.isRequired,
+  id: PropTypes.number.isRequired,
+  path: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  quality: PropTypes.object.isRequired,
+  dateAdded: PropTypes.string.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  deleteUnmappedFile: PropTypes.func.isRequired
+};
+
+export default UnmappedFilesTableRow;