New: View, Sort, Filter by Movie popularity on Index and Discover

Fixes #1947

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css

@@ -39,6 +39,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css

@@ -64,6 +64,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: cell;
 

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -13,6 +13,7 @@ import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import { icons } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import translate from 'Utilities/String/translate';
 import ListMovieStatusCell from './ListMovieStatusCell';
@@ -73,6 +74,7 @@ class DiscoverMovieRow extends Component {
       images,
       genres,
       ratings,
+      popularity,
       certification,
       collection,
       columns,
@@ -261,6 +263,14 @@ class DiscoverMovieRow extends Component {
               );
             }
 
+            if (name === 'popularity') {
+              return (
+                <VirtualTableRowCell key={name} className={styles[name]}>
+                  <MoviePopularityIndex popularity={popularity} />
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'certification') {
               return (
                 <VirtualTableRowCell
@@ -384,6 +394,7 @@ DiscoverMovieRow.propTypes = {
   runtime: PropTypes.number,
   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   ratings: PropTypes.object.isRequired,
+  popularity: PropTypes.number.isRequired,
   certification: PropTypes.string,
   collection: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Helpers/Props/icons.js

@@ -61,6 +61,7 @@ import {
   faFileInvoice as farFileInvoice,
   faFilm as fasFilm,
   faFilter as fasFilter,
+  faFire as fasFire,
   faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
   faForward as fasForward,
@@ -192,6 +193,7 @@ export const PAUSED = fasPause;
 export const PENDING = farClock;
 export const PLAY = fasPlay;
 export const PROFILE = fasUser;
+export const POPULAR = fasFire;
 export const POSTER = fasTh;
 export const QUEUED = fasCloud;
 export const QUICK = fasRocket;

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

@@ -118,6 +118,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           {translate('TmdbRating')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="popularity"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Popularity')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="path"
           sortKey={sortKey}

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

@@ -48,6 +48,7 @@
 }
 
 .added,
+.popularity,
 .runtime {
   composes: cell;
 

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

@@ -18,6 +18,7 @@ interface CssExports {
   'originalTitle': string;
   'path': string;
   'physicalRelease': string;
+  'popularity': string;
   'qualityProfileId': string;
   'rottenTomatoesRating': string;
   'runtime': string;

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

@@ -19,6 +19,7 @@ import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import createMovieIndexItemSelector from 'Movie/Index/createMovieIndexItemSelector';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -69,6 +70,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     sizeOnDisk,
     genres = [],
     ratings,
+    popularity,
     certification,
     tags = [],
     tmdbId,
@@ -362,6 +364,14 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           );
         }
 
+        if (name === 'popularity') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <MoviePopularityIndex popularity={popularity} />
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'certification') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

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

@@ -41,6 +41,7 @@
 }
 
 .added,
+.popularity,
 .runtime {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css.d.ts

@@ -15,6 +15,7 @@ interface CssExports {
   'originalTitle': string;
   'path': string;
   'physicalRelease': string;
+  'popularity': string;
   'qualityProfileId': string;
   'rottenTomatoesRating': string;
   'runtime': string;

frontend/src/Movie/Movie.ts

@@ -49,6 +49,7 @@ interface Movie extends ModelBase {
   sizeOnDisk: number;
   genres: string[];
   ratings: Ratings;
+  popularity: number;
   certification: string;
   tags: number[];
   images: Image[];

frontend/src/Movie/MoviePopularityIndex.css

@@ -0,0 +1,5 @@
+.popularityIcon {
+  margin-right: 2px;
+  width: 12px !important;
+  text-align: center;
+}

frontend/src/Movie/MoviePopularityIndex.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'popularityIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Movie/MoviePopularityIndex.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './MoviePopularityIndex.css';
+
+interface MoviePopularityIndexProps {
+  popularity: number;
+}
+
+function MoviePopularityIndex(props: MoviePopularityIndexProps) {
+  const { popularity } = props;
+
+  return (
+    <Label kind={kinds.INVERSE} title={translate('PopularityIndex')}>
+      <Icon className={styles.popularityIcon} name={icons.POPULAR} size={11} />
+      {popularity.toFixed()}
+    </Label>
+  );
+}
+
+export default MoviePopularityIndex;

frontend/src/Store/Actions/discoverMovieActions.js

@@ -148,6 +148,12 @@ export const defaultState = {
       isSortable: true,
       isVisible: false
     },
+    {
+      name: 'popularity',
+      label: translate('Popularity'),
+      isSortable: true,
+      isVisible: false
+    },
     {
       name: 'certification',
       label: translate('Certification'),
@@ -380,6 +386,11 @@ export const defaultState = {
       label: translate('ImdbVotes'),
       type: filterBuilderTypes.NUMBER
     },
+    {
+      name: 'popularity',
+      label: translate('Popularity'),
+      type: filterBuilderTypes.NUMBER
+    },
     {
       name: 'certification',
       label: 'Certification',

frontend/src/Store/Actions/movieIndexActions.js

@@ -191,6 +191,12 @@ export const defaultState = {
       isSortable: true,
       isVisible: false
     },
+    {
+      name: 'popularity',
+      label: translate('Popularity'),
+      isSortable: true,
+      isVisible: false
+    },
     {
       name: 'certification',
       label: translate('Certification'),
@@ -443,6 +449,11 @@ export const defaultState = {
       label: translate('ImdbVotes'),
       type: filterBuilderTypes.NUMBER
     },
+    {
+      name: 'popularity',
+      label: translate('Popularity'),
+      type: filterBuilderTypes.NUMBER
+    },
     {
       name: 'certification',
       label: translate('Certification'),

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

@@ -732,6 +732,8 @@
   "Permissions": "Permissions",
   "PhysicalRelease": "Physical Release",
   "PhysicalReleaseDate": "Physical Release Date",
+  "Popularity": "Popularity",
+  "PopularityIndex": "Current Popularity Index",
   "Port": "Port",
   "PortNumber": "Port Number",
   "PosterOptions": "Poster Options",

src/Radarr.Api.V3/ImportLists/ImportListMoviesResource.cs

@@ -36,6 +36,7 @@ namespace Radarr.Api.V3.ImportLists
         public int TmdbId { get; set; }
         public string Folder { get; set; }
         public string Certification { get; set; }
+        public float Popularity { get; set; }
         public List<string> Genres { get; set; }
         public Ratings Ratings { get; set; }
         public MovieCollection Collection { get; set; }
@@ -78,6 +79,7 @@ namespace Radarr.Api.V3.ImportLists
                 Website = model.MovieMetadata.Value.Website,
                 Genres = model.MovieMetadata.Value.Genres,
                 Ratings = model.MovieMetadata.Value.Ratings,
+                Popularity = model.MovieMetadata.Value.Popularity,
                 YouTubeTrailerId = model.MovieMetadata.Value.YouTubeTrailerId,
                 Collection = new MovieCollection { Title = model.MovieMetadata.Value.CollectionTitle, TmdbId = model.MovieMetadata.Value.CollectionTmdbId },
                 Studio = model.MovieMetadata.Value.Studio
@@ -115,6 +117,7 @@ namespace Radarr.Api.V3.ImportLists
                 Genres = model.MovieMetadata.Value.Genres,
                 Ratings = model.MovieMetadata.Value.Ratings,
                 YouTubeTrailerId = model.MovieMetadata.Value.YouTubeTrailerId,
+                Popularity = model.MovieMetadata.Value.Popularity,
                 Studio = model.MovieMetadata.Value.Studio,
                 Collection = new MovieCollection { Title = model.MovieMetadata.Value.CollectionTitle, TmdbId = model.MovieMetadata.Value.CollectionTmdbId },
                 Lists = new HashSet<int> { model.ListId }