diff --git a/frontend/src/Artist/Details/AlbumRow.js b/frontend/src/Artist/Details/AlbumRow.js index af5ee5739..c230d635a 100644 --- a/frontend/src/Artist/Details/AlbumRow.js +++ b/frontend/src/Artist/Details/AlbumRow.js @@ -9,6 +9,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell'; import formatTimeSpan from 'Utilities/Date/formatTimeSpan'; import AlbumSearchCellConnector from 'Album/AlbumSearchCellConnector'; import AlbumTitleLink from 'Album/AlbumTitleLink'; +import StarRating from 'Components/StarRating'; import styles from './AlbumRow.css'; function getTrackCountKind(monitored, trackFileCount, trackCount) { @@ -74,6 +75,7 @@ class AlbumRow extends Component { mediumCount, secondaryTypes, title, + ratings, isSaving, artistMonitored, foreignAlbumId, @@ -169,6 +171,19 @@ class AlbumRow extends Component { ); } + if (name === 'rating') { + return ( + + { + + } + + ); + } + if (name === 'releaseDate') { return ( label, - (state) => state.albums, + createClientSideCollectionSelector(), createArtistSelector(), createCommandsSelector(), createDimensionsSelector(), @@ -94,4 +96,10 @@ ArtistDetailsSeasonConnector.propTypes = { executeCommand: PropTypes.func.isRequired }; -export default connect(createMapStateToProps, mapDispatchToProps)(ArtistDetailsSeasonConnector); +export default connectSection( + createMapStateToProps, + mapDispatchToProps, + undefined, + undefined, + { section: 'albums' } +)(ArtistDetailsSeasonConnector); diff --git a/frontend/src/Components/StarRating.css b/frontend/src/Components/StarRating.css new file mode 100644 index 000000000..cd120e2b9 --- /dev/null +++ b/frontend/src/Components/StarRating.css @@ -0,0 +1,19 @@ +.starRating { + display: flex; + align-items: center; + justify-content: center; +} + +.backStar { + position: relative; + display: flex; + color: #515253; +} + +.frontStar { + position: absolute; + top: 0; + display: flex; + overflow: hidden; + color: #ffbc0b; +} diff --git a/frontend/src/Components/StarRating.js b/frontend/src/Components/StarRating.js new file mode 100644 index 000000000..f895345b4 --- /dev/null +++ b/frontend/src/Components/StarRating.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { icons } from 'Helpers/Props'; +import Icon from 'Components/Icon'; +import styles from './StarRating.css'; + +function StarRating({ rating, votes, iconSize }) { + const starWidth = { + width: `${rating * 10}%` + }; + + const helpText = `${rating/2} (${votes} Votes)`; + + return ( + +
+ + + + + +
+ + + + + +
+
+
+ ); +} + +StarRating.propTypes = { + rating: PropTypes.number.isRequired, + votes: PropTypes.number.isRequired, + iconSize: PropTypes.number.isRequired +}; + +StarRating.defaultProps = { + iconSize: 14 +}; + +export default StarRating; diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js index 74a158a24..6abbe9f1e 100644 --- a/frontend/src/Helpers/Props/icons.js +++ b/frontend/src/Helpers/Props/icons.js @@ -79,6 +79,7 @@ import fasSpinner from '@fortawesome/fontawesome-free-solid/faSpinner'; import fasSort from '@fortawesome/fontawesome-free-solid/faSort'; import fasSortDown from '@fortawesome/fontawesome-free-solid/faSortDown'; import fasSortUp from '@fortawesome/fontawesome-free-solid/faSortUp'; +import fasStar from '@fortawesome/fontawesome-free-solid/faStar'; import fasStop from '@fortawesome/fontawesome-free-solid/faStop'; import fasSync from '@fortawesome/fontawesome-free-solid/faSync'; import fasTags from '@fortawesome/fontawesome-free-solid/faTags'; @@ -178,6 +179,7 @@ export const SORT = fasSort; export const SORT_ASCENDING = fasSortUp; export const SORT_DESCENDING = fasSortDown; export const SPINNER = fasSpinner; +export const STAR_FULL = fasStar; export const SUBTRACT = fasMinus; export const SYSTEM = fasLaptop; export const TAGS = fasTags; diff --git a/frontend/src/Store/Actions/albumActions.js b/frontend/src/Store/Actions/albumActions.js index efc5541b2..937b48da6 100644 --- a/frontend/src/Store/Actions/albumActions.js +++ b/frontend/src/Store/Actions/albumActions.js @@ -31,6 +31,11 @@ export const defaultState = { sortDirection: sortDirections.DESCENDING, items: [], pendingChanges: {}, + sortPredicates: { + rating: function(item) { + return item.ratings.value; + } + }, columns: [ { @@ -73,6 +78,12 @@ export const defaultState = { isSortable: true, isVisible: false }, + { + name: 'rating', + label: 'Rating', + isSortable: true, + isVisible: true + }, { name: 'status', label: 'Status',