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',