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.
2021-04-08 01:32:52 +05:30
parent 840521ffe2
commit 48ae4f7479
17 changed files with 277 additions and 16 deletions
@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import Rating from '@material-ui/lab/Rating'
+import { makeStyles } from '@material-ui/core/styles'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import clsx from 'clsx'
+import { useRating } from './useRating'
+
+const useStyles = makeStyles({
+  rating: {
+    color: (props) => props.color,
+    visibility: (props) => (props.visible === false ? 'hidden' : 'inherit'),
+  },
+  show: {
+    visibility: 'visible !important',
+  },
+  hide: {
+    visibility: 'hidden',
+  },
+})
+
+export const RatingField = ({
+  resource,
+  record,
+  visible,
+  className,
+  size,
+  color,
+}) => {
+  const [rate, rating] = useRating(resource, record)
+  const classes = useStyles({ visible, rating: record.rating, color })
+
+  const stopPropagation = (e) => {
+    e.stopPropagation()
+  }
+
+  const handleRating = useCallback(
+    (e, val) => {
+      rate(val, e.target.name)
+    },
+    [rate]
+  )
+
+  return (
+    <span onClick={(e) => stopPropagation(e)}>
+      <Rating
+        name={record.id}
+        className={clsx(
+          className,
+          classes.rating,
+          rating > 0 ? classes.show : classes.hide
+        )}
+        value={rating}
+        size={size}
+        emptyIcon={<StarBorderIcon fontSize="inherit" />}
+        onChange={(e, newValue) => handleRating(e, newValue)}
+      />
+    </span>
+  )
+}
+RatingField.propTypes = {
+  resource: PropTypes.string.isRequired,
+  record: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  size: PropTypes.string,
+}
+
+RatingField.defaultProps = {
+  record: {},
+  visible: true,
+  size: 'small',
+  color: 'inherit',
+}