Add 5-star rating system(#986)

* Added Star Rating functionality for Songs

* Added Star Rating functionality for Artists

* Added Star Rating functionality for AlbumListView

* Added Star Rating functionality for AlbumDetails and improved typography for title

* Added functionality to turn on/off Star Rating functionality for Songs

* Added functionality to turn on/off Star Rating functionality for Artists

* Added functionality to turn on/off Star Rating functionality for Albums

* Added enableStarRating to server config

* Resolved the bugs and improved the ratings functionality.

* synced repo and removed duplicate key

* changed the default rating size to small, and changed the color to match the theme.

* Added translations for ratings, and Top Rated tab in side menu.

* Changed rating translation to topRated in albumLists, and added has_rating filter to topRated.

* Added empty stars icon to RatingField.

* Added sortable=false in AlbumSongs and added sortByOrder=DESC in all List components.

* Added translations for rating, for artists and albums, and removed the sortByOrder=DESC from SimpleLists.

ui/src/album/AlbumDetails.js

@@ -19,6 +19,7 @@ import {
   formatRange,
   SizeField,
   LoveButton,
+  RatingField,
 } from '../common'
 import config from '../config'
 
@@ -167,7 +168,10 @@ const AlbumDetails = ({ record }) => {
         </div>
         <div className={classes.details}>
           <CardContent className={classes.content}>
-            <Typography variant="h5" className={classes.recordName}>
+            <Typography
+              variant={isDesktop ? 'h5' : 'h6'}
+              className={classes.recordName}
+            >
               {record.name}
               {config.enableFavourites && (
                 <LoveButton
@@ -195,6 +199,13 @@ const AlbumDetails = ({ record }) => {
               {' · '}
               <SizeField record={record} source="size" />
             </Typography>
+            {config.enableStarRating && (
+              <RatingField
+                record={record}
+                resource={'album'}
+                size={isDesktop ? 'medium' : 'small'}
+              />
+            )}
             {isDesktop && record['comment'] && <AlbumComment record={record} />}
           </CardContent>
         </div>

ui/src/album/AlbumListView.js

@@ -25,6 +25,7 @@ import {
   SimpleList,
   MultiLineTextField,
   AlbumContextMenu,
+  RatingField,
 } from '../common'
 import config from '../config'
 
@@ -39,6 +40,9 @@ const useStyles = makeStyles({
       '& $contextMenu': {
         visibility: 'visible',
       },
+      '& $ratingField': {
+        visibility: 'visible',
+      },
     },
   },
   tableCell: {
@@ -47,6 +51,9 @@ const useStyles = makeStyles({
   contextMenu: {
     visibility: 'hidden',
   },
+  ratingField: {
+    visibility: 'hidden',
+  },
 })
 
 const AlbumDetails = (props) => {
@@ -105,7 +112,23 @@ const AlbumListView = ({
   return isXsmall ? (
     <SimpleList
       primaryText={(r) => r.name}
-      secondaryText={(r) => r.albumArtist}
+      secondaryText={(r) => (
+        <>
+          {r.albumArtist}
+          {config.enableStarRating && (
+            <>
+              <br />
+              <RatingField
+                record={r}
+                sortByOrder={'DESC'}
+                source={'rating'}
+                resource={'album'}
+                size={'small'}
+              />
+            </>
+          )}
+        </>
+      )}
       tertiaryText={(r) => (
         <>
           <RangeField record={r} source={'year'} sortBy={'maxYear'} />
@@ -129,6 +152,14 @@ const AlbumListView = ({
       {isDesktop && <NumberField source="playCount" sortByOrder={'DESC'} />}
       <RangeField source={'year'} sortBy={'maxYear'} sortByOrder={'DESC'} />
       {isDesktop && <DurationField source="duration" />}
+      {config.enableStarRating && (
+        <RatingField
+          source={'rating'}
+          resource={'album'}
+          sortByOrder={'DESC'}
+          className={classes.ratingField}
+        />
+      )}
       <AlbumContextMenu
         source={'starred'}
         sortBy={'starred ASC, starredAt ASC'}

ui/src/album/AlbumSongs.js

@@ -19,6 +19,7 @@ import {
   SongDatagrid,
   SongDetails,
   SongTitleField,
+  RatingField,
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
 import { QualityInfo } from '../common/QualityInfo'
@@ -63,11 +64,17 @@ const useStyles = makeStyles(
         '& $contextMenu': {
           visibility: 'visible',
         },
+        '& $ratingField': {
+          visibility: 'visible',
+        },
       },
     },
     contextMenu: {
       visibility: (props) => (props.isDesktop ? 'hidden' : 'visible'),
     },
+    ratingField: {
+      visibility: 'hidden',
+    },
   }),
   { name: 'RaList' }
 )
@@ -121,6 +128,14 @@ const AlbumSongs = (props) => {
             {isDesktop && <TextField source="artist" sortable={false} />}
             <DurationField source="duration" sortable={false} />
             <QualityInfo source="quality" sortable={false} />
+            {isDesktop && config.enableStarRating && (
+              <RatingField
+                source="rating"
+                resource={'albumSong'}
+                sortable={false}
+                className={classes.ratingField}
+              />
+            )}
             <SongContextMenu
               source={'starred'}
               sortable={false}

ui/src/album/albumLists.js

@@ -4,6 +4,7 @@ import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
 import RepeatIcon from '@material-ui/icons/Repeat'
 import AlbumIcon from '@material-ui/icons/Album'
 import FavoriteIcon from '@material-ui/icons/Favorite'
+import StarIcon from '@material-ui/icons/Star'
 import config from '../config'
 
 export default {
@@ -18,6 +19,12 @@ export default {
       params: 'sort=starred_at&order=DESC&filter={"starred":true}',
     },
   }),
+  ...(config.enableStarRating && {
+    topRated: {
+      icon: StarIcon,
+      params: 'sort=rating&order=DESC&filter={"has_rating":true}',
+    },
+  }),
   recentlyAdded: {
     icon: LibraryAddIcon,
     params: 'sort=recently_added&order=DESC',