New: Separate Ratings Columns

Fixes #7281

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
+import TmdbRating from 'Components/TmdbRating';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
@@ -190,7 +190,7 @@ class AddNewMovieSearchResult extends Component {
 
             <div>
               <Label size={sizes.LARGE}>
-                <HeartRating
+                <TmdbRating
                   ratings={ratings}
                   iconSize={13}
                 />

frontend/src/Components/HeartRating.css

@@ -1,5 +0,0 @@
-.image {
-  align-content: center;
-  margin-right: 5px;
-  vertical-align: -0.125em;
-}

frontend/src/Components/ImdbRating.js

@@ -22,11 +22,11 @@ class ImdbRating extends PureComponent {
     let ratingString = '0.0';
 
     if (rating) {
-      ratingString = `${rating.value}`;
+      ratingString = `${rating.value.toFixed(1)}`;
     }
 
     return (
-      <span title={`${rating.votes} votes`}>
+      <span title={`${rating ? rating.votes : 0} votes`}>
         {
           !hideIcon &&
             <img

frontend/src/Components/RottenTomatoRating.js

@@ -21,9 +21,11 @@ class RottenTomatoRating extends PureComponent {
     const rating = ratings.rottenTomatoes;
 
     let ratingString = '0%';
+    let ratingImage = rtFresh;
 
     if (rating) {
       ratingString = `${rating.value}%`;
+      ratingImage = rating.value > 50 ? rtFresh : rtRotten;
     }
 
     return (
@@ -32,7 +34,7 @@ class RottenTomatoRating extends PureComponent {
           !hideIcon &&
             <img
               className={styles.image}
-              src={rating.value > 50 ? rtFresh : rtRotten}
+              src={ratingImage}
               style={{
                 height: `${iconSize}px`
               }}

frontend/src/Components/TmdbRating.js

@@ -22,7 +22,7 @@ class TmdbRating extends PureComponent {
     let ratingString = '0%';
 
     if (rating) {
-      ratingString = `${rating.value * 10}%`;
+      ratingString = `${(rating.value * 10).toFixed()}%`;
     }
 
     return (

frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import HeartRating from 'Components/HeartRating';
+import TmdbRating from 'Components/TmdbRating';
 import { getMovieStatusDetails } from 'Movie/MovieStatus';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
@@ -111,7 +111,7 @@ function DiscoverMoviePosterInfo(props) {
   if (sortKey === 'ratings' && ratings) {
     return (
       <div className={styles.info}>
-        <HeartRating
+        <TmdbRating
           ratings={ratings}
         />
       </div>

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import ImportListListConnector from 'Components/ImportListListConnector';
 import IconButton from 'Components/Link/IconButton';
@@ -8,6 +7,7 @@ import Link from 'Components/Link/Link';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import TmdbRating from 'Components/TmdbRating';
 import Popover from 'Components/Tooltip/Popover';
 import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
@@ -245,7 +245,7 @@ class DiscoverMovieRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
-                  <HeartRating
+                  <TmdbRating
                     ratings={ratings}
                   />
                 </VirtualTableRowCell>

frontend/src/Movie/Index/Menus/MovieIndexSortMenu.js

@@ -102,12 +102,21 @@ function MovieIndexSortMenu(props) {
         </SortMenuItem>
 
         <SortMenuItem
-          name="ratings"
+          name="imdbRating"
           sortKey={sortKey}
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('Ratings')}
+          {translate('ImdbRating')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="tmdbRating"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('TmdbRating')}
         </SortMenuItem>
 
         <SortMenuItem

frontend/src/Movie/Index/Table/MovieIndexHeader.css

@@ -77,7 +77,9 @@
   flex: 0 0 120px;
 }
 
-.ratings {
+.imdbRating,
+.tmdbRating,
+.rottenTomatoesRating {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 80px;

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -84,7 +84,9 @@
   flex: 0 0 120px;
 }
 
-.ratings {
+.imdbRating,
+.tmdbRating,
+.rottenTomatoesRating {
   composes: cell;
 
   flex: 0 0 80px;

frontend/src/Movie/Index/Table/MovieIndexRow.js

@@ -1,13 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
+import ImdbRating from 'Components/ImdbRating';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import RottenTomatoRating from 'Components/RottenTomatoRating';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import TagListConnector from 'Components/TagListConnector';
+import TmdbRating from 'Components/TmdbRating';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -349,13 +351,39 @@ class MovieIndexRow extends Component {
               );
             }
 
-            if (name === 'ratings') {
+            if (name === 'tmdbRating') {
               return (
                 <VirtualTableRowCell
                   key={name}
                   className={styles[name]}
                 >
-                  <HeartRating
+                  <TmdbRating
+                    ratings={ratings}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'rottenTomatoesRating') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <RottenTomatoRating
+                    ratings={ratings}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'imdbRating') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <ImdbRating
                     ratings={ratings}
                   />
                 </VirtualTableRowCell>

frontend/src/Store/Actions/movieActions.js

@@ -162,6 +162,14 @@ export const filterPredicates = {
     return predicate(rating, filterValue);
   },
 
+  rottenTomatoesRating: function(item, filterValue, type) {
+    const predicate = filterTypePredicates[type];
+
+    const rating = item.ratings.rottenTomatoes ? item.ratings.rottenTomatoes.value : 0;
+
+    return predicate(rating, filterValue);
+  },
+
   imdbVotes: function(item, filterValue, type) {
     const predicate = filterTypePredicates[type];
 

frontend/src/Store/Actions/movieIndexActions.js

@@ -178,8 +178,20 @@ export const defaultState = {
       isVisible: true
     },
     {
-      name: 'ratings',
-      label: translate('Ratings'),
+      name: 'tmdbRating',
+      label: translate('TmdbRating'),
+      isSortable: true,
+      isVisible: false
+    },
+    {
+      name: 'rottenTomatoesRating',
+      label: translate('RottenTomatoesRating'),
+      isSortable: true,
+      isVisible: false
+    },
+    {
+      name: 'imdbRating',
+      label: translate('ImdbRating'),
       isSortable: true,
       isVisible: false
     },
@@ -224,10 +236,22 @@ export const defaultState = {
       return originalLanguage.name;
     },
 
-    ratings: function(item) {
+    imdbRating: function(item) {
       const { ratings = {} } = item;
 
-      return ratings.tmdb? ratings.tmdb.value : 0;
+      return ratings.imdb ? ratings.imdb.value : 0;
+    },
+
+    tmdbRating: function(item) {
+      const { ratings = {} } = item;
+
+      return ratings.tmdb ? ratings.tmdb.value : 0;
+    },
+
+    rottenTomatoesRating: function(item) {
+      const { ratings = {} } = item;
+
+      return ratings.rottenTomatoes ? ratings.rottenTomatoes.value : 0;
     }
   },
 
@@ -413,6 +437,11 @@ export const defaultState = {
       label: translate('ImdbRating'),
       type: filterBuilderTypes.NUMBER
     },
+    {
+      name: 'rottenTomatoesRating',
+      label: translate('RottenTomatoesRating'),
+      type: filterBuilderTypes.NUMBER
+    },
     {
       name: 'imdbVotes',
       label: translate('ImdbVotes'),

src/NzbDrone.Core/Localization/Core/en.json

@@ -859,6 +859,7 @@
   "RootFolderCheckMultipleMessage": "Multiple root folders are missing: {0}",
   "RootFolderCheckSingleMessage": "Missing root folder: {0}",
   "RootFolders": "Root Folders",
+  "RottenTomatoesRating": "Tomato Rating",
   "RSS": "RSS",
   "RSSIsNotSupportedWithThisIndexer": "RSS is not supported with this indexer",
   "RSSSync": "RSS Sync",