diff --git a/frontend/src/Album/Details/TrackActionsCell.css b/frontend/src/Album/Details/TrackActionsCell.css new file mode 100644 index 000000000..6b80ba0e0 --- /dev/null +++ b/frontend/src/Album/Details/TrackActionsCell.css @@ -0,0 +1,6 @@ +.TrackActionsCell { + composes: cell from '~Components/Table/Cells/TableRowCell.css'; + + width: 70px; + white-space: nowrap; +} diff --git a/frontend/src/Album/Details/TrackActionsCell.js b/frontend/src/Album/Details/TrackActionsCell.js new file mode 100644 index 000000000..82d4b3466 --- /dev/null +++ b/frontend/src/Album/Details/TrackActionsCell.js @@ -0,0 +1,34 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import { icons } from 'Helpers/Props'; +import IconButton from 'Components/Link/IconButton'; +import TableRowCell from 'Components/Table/Cells/TableRowCell'; +import styles from './TrackActionsCell.css'; + +class TrackActionsCell extends Component { + + // + // Render + + render() { + + return ( + + // TODO: Placeholder until we figure out what to show here. + + + + + ); + } +} + +TrackActionsCell.propTypes = { + id: PropTypes.number.isRequired, + albumId: PropTypes.number.isRequired +}; + +export default TrackActionsCell; diff --git a/frontend/src/Album/Details/TrackRow.js b/frontend/src/Album/Details/TrackRow.js index 059dc630d..ffd34b510 100644 --- a/frontend/src/Album/Details/TrackRow.js +++ b/frontend/src/Album/Details/TrackRow.js @@ -6,6 +6,7 @@ import formatTimeSpan from 'Utilities/Date/formatTimeSpan'; import EpisodeStatusConnector from 'Album/EpisodeStatusConnector'; import TrackFileLanguageConnector from 'TrackFile/TrackFileLanguageConnector'; import MediaInfoConnector from 'TrackFile/MediaInfoConnector'; +import TrackActionsCell from './TrackActionsCell'; import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes'; import styles from './TrackRow.css'; @@ -36,6 +37,7 @@ class TrackRow extends Component { render() { const { id, + albumId, mediumNumber, trackFileId, absoluteTrackNumber, @@ -166,6 +168,16 @@ class TrackRow extends Component { ); } + if (name === 'actions') { + return ( + + ); + } + return null; }) } diff --git a/frontend/src/Album/Details/TrackRowConnector.js b/frontend/src/Album/Details/TrackRowConnector.js index 933fa32f5..50c290afd 100644 --- a/frontend/src/Album/Details/TrackRowConnector.js +++ b/frontend/src/Album/Details/TrackRowConnector.js @@ -1,17 +1,13 @@ -/* eslint max-params: 0 */ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector'; -import createCommandsSelector from 'Store/Selectors/createCommandsSelector'; import TrackRow from './TrackRow'; function createMapStateToProps() { return createSelector( (state, { id }) => id, - (state, { mediumNumber }) => mediumNumber, createTrackFileSelector(), - createCommandsSelector(), - (id, mediumNumber, trackFile, commands) => { + (id, trackFile) => { return { trackFilePath: trackFile ? trackFile.path : null, trackFileRelativePath: trackFile ? trackFile.relativePath : null