New: Release Groups for movie table index

* New: Release Group for movie table index

Co-authored-by: Qstick <qstick@gmail.com>

* fixup! New: Release Group for movie table index

---------

Co-authored-by: Qstick <qstick@gmail.com>

frontend/src/Collection/Overview/CollectionMovieLabel.js

@@ -74,11 +74,7 @@ CollectionMovieLabel.propTypes = {
 
 CollectionMovieLabel.defaultProps = {
   isSaving: false,
-  statistics: {
-    episodeFileCount: 0,
-    totalEpisodeCount: 0,
-    percentOfEpisodes: 0
-  }
+  statistics: {}
 };
 
 export default CollectionMovieLabel;

frontend/src/Movie/Delete/DeleteMovieModalContent.js

@@ -50,12 +50,16 @@ class DeleteMovieModalContent extends Component {
       title,
       path,
       hasFile,
+      statistics,
       deleteOptions,
-      sizeOnDisk,
       onModalClose,
       onDeleteOptionChange
     } = this.props;
 
+    const {
+      sizeOnDisk = 0
+    } = statistics;
+
     const deleteFiles = this.state.deleteFiles;
     const addImportExclusion = deleteOptions.addImportExclusion;
 
@@ -151,12 +155,16 @@ class DeleteMovieModalContent extends Component {
 DeleteMovieModalContent.propTypes = {
   title: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
+  statistics: PropTypes.object.isRequired,
   hasFile: PropTypes.bool.isRequired,
-  sizeOnDisk: PropTypes.number.isRequired,
   deleteOptions: PropTypes.object.isRequired,
   onDeleteOptionChange: PropTypes.func.isRequired,
   onDeletePress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 
+DeleteMovieModalContent.defaultProps = {
+  statistics: {}
+};
+
 export default DeleteMovieModalContent;

frontend/src/Movie/Details/MovieDetails.js

@@ -238,7 +238,7 @@ class MovieDetails extends Component {
       certification,
       ratings,
       path,
-      sizeOnDisk,
+      statistics,
       qualityProfileId,
       monitored,
       studio,
@@ -267,6 +267,10 @@ class MovieDetails extends Component {
       movieRuntimeFormat
     } = this.props;
 
+    const {
+      sizeOnDisk = 0
+    } = statistics;
+
     const {
       isOrganizeModalOpen,
       isEditMovieModalOpen,
@@ -734,7 +738,7 @@ MovieDetails.propTypes = {
   certification: PropTypes.string,
   ratings: PropTypes.object.isRequired,
   path: PropTypes.string.isRequired,
-  sizeOnDisk: PropTypes.number.isRequired,
+  statistics: PropTypes.object.isRequired,
   qualityProfileId: PropTypes.number.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
@@ -773,9 +777,9 @@ MovieDetails.propTypes = {
 
 MovieDetails.defaultProps = {
   genres: [],
+  statistics: {},
   tags: [],
-  isSaving: false,
-  sizeOnDisk: 0
+  isSaving: false
 };
 
 export default MovieDetails;

frontend/src/Movie/Index/MovieIndexFooter.tsx

@@ -17,13 +17,13 @@ function createUnoptimizedSelector() {
     createClientSideCollectionSelector('movies', 'movieIndex'),
     (movies: MoviesAppState) => {
       return movies.items.map((m) => {
-        const { monitored, status, hasFile, sizeOnDisk } = m;
+        const { monitored, status, hasFile, statistics } = m;
 
         return {
           monitored,
           status,
           hasFile,
-          sizeOnDisk,
+          statistics,
         };
       });
     }
@@ -44,16 +44,20 @@ export default function MovieIndexFooter() {
   let monitored = 0;
   let totalFileSize = 0;
 
-  movies.forEach((s) => {
-    if (s.hasFile) {
+  movies.forEach((m) => {
+    const { statistics = { sizeOnDisk: 0 } } = m;
+
+    const { sizeOnDisk = 0 } = statistics;
+
+    if (m.hasFile) {
       movieFiles += 1;
     }
 
-    if (s.monitored) {
+    if (m.monitored) {
       monitored++;
     }
 
-    totalFileSize += s.sizeOnDisk;
+    totalFileSize += sizeOnDisk;
   });
 
   return (

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -13,6 +13,7 @@ import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MovieIndexPosterSelect from 'Movie/Index/Select/MovieIndexPosterSelect';
+import { Statistics } from 'Movie/Movie';
 import MoviePoster from 'Movie/MoviePoster';
 import { executeCommand } from 'Store/Actions/commandActions';
 import dimensions from 'Styles/Variables/dimensions';
@@ -66,17 +67,19 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     status,
     path,
     overview,
+    statistics = {} as Statistics,
     images,
     hasFile,
     isAvailable,
     tmdbId,
     imdbId,
     studio,
-    sizeOnDisk,
     added,
     youTubeTrailerId,
   } = movie;
 
+  const { sizeOnDisk = 0 } = statistics;
+
   const dispatch = useDispatch();
   const [isEditMovieModalOpen, setIsEditMovieModalOpen] = useState(false);
   const [isDeleteMovieModalOpen, setIsDeleteMovieModalOpen] = useState(false);

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -16,6 +16,7 @@ import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
 import MovieIndexPosterSelect from 'Movie/Index/Select/MovieIndexPosterSelect';
+import { Statistics } from 'Movie/Movie';
 import MoviePoster from 'Movie/MoviePoster';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -75,12 +76,14 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     path,
     movieFile,
     ratings,
-    sizeOnDisk,
+    statistics = {} as Statistics,
     certification,
     originalTitle,
     originalLanguage,
   } = movie;
 
+  const { sizeOnDisk = 0 } = statistics;
+
   const dispatch = useDispatch();
   const [hasPosterError, setHasPosterError] = useState(false);
   const [isEditMovieModalOpen, setIsEditMovieModalOpen] = useState(false);

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

@@ -38,6 +38,7 @@
   flex: 1 0 125px;
 }
 
+.releaseGroups,
 .inCinemas,
 .physicalRelease,
 .digitalRelease,

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

@@ -20,6 +20,7 @@ interface CssExports {
   'physicalRelease': string;
   'popularity': string;
   'qualityProfileId': string;
+  'releaseGroups': string;
   'rottenTomatoesRating': string;
   'runtime': string;
   'sizeOnDisk': 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 { Statistics } from 'Movie/Movie';
 import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import { executeCommand } from 'Store/Actions/commandActions';
@@ -60,6 +61,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     originalLanguage,
     originalTitle,
     added,
+    statistics = {} as Statistics,
     year,
     inCinemas,
     digitalRelease,
@@ -67,7 +69,6 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     runtime,
     minimumAvailability,
     path,
-    sizeOnDisk,
     genres = [],
     ratings,
     popularity,
@@ -82,6 +83,8 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     isSaving = false,
   } = movie;
 
+  const { sizeOnDisk = 0, releaseGroups = [] } = statistics;
+
   const dispatch = useDispatch();
   const [isEditMovieModalOpen, setIsEditMovieModalOpen] = useState(false);
   const [isDeleteMovieModalOpen, setIsDeleteMovieModalOpen] = useState(false);
@@ -380,6 +383,20 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           );
         }
 
+        if (name === 'releaseGroups') {
+          const joinedReleaseGroups = releaseGroups.join(', ');
+          const truncatedReleaseGroups =
+            releaseGroups.length > 3
+              ? `${releaseGroups.slice(0, 3).join(', ')}...`
+              : joinedReleaseGroups;
+
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <span title={joinedReleaseGroups}>{truncatedReleaseGroups}</span>
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'tags') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

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

@@ -31,6 +31,7 @@
   flex: 1 0 125px;
 }
 
+.releaseGroups,
 .inCinemas,
 .physicalRelease,
 .digitalRelease,

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

@@ -17,6 +17,7 @@ interface CssExports {
   'physicalRelease': string;
   'popularity': string;
   'qualityProfileId': string;
+  'releaseGroups': string;
   'rottenTomatoesRating': string;
   'runtime': string;
   'sizeOnDisk': string;

frontend/src/Movie/Movie.ts

@@ -12,6 +12,12 @@ export interface Collection {
   title: string;
 }
 
+export interface Statistics {
+  movieFileCount: number;
+  releaseGroups: string[];
+  sizeOnDisk: number;
+}
+
 export interface Ratings {
   imdb: object;
   tmdb: object;
@@ -42,11 +48,11 @@ interface Movie extends ModelBase {
   runtime: number;
   minimumAvailability: string;
   path: string;
-  sizeOnDisk: number;
   genres: string[];
   ratings: Ratings;
   popularity: number;
   certification: string;
+  statistics: Statistics;
   tags: number[];
   images: Image[];
   movieFile: MovieFile;

frontend/src/Store/Actions/movieActions.js

@@ -128,6 +128,22 @@ export const filterPredicates = {
     return predicate(originalLanguage ? originalLanguage.name : '', filterValue);
   },
 
+  releaseGroups: function(item, filterValue, type) {
+    const predicate = filterTypePredicates[type];
+    const { statistics = {} } = item;
+    const { releaseGroups = [] } = statistics;
+
+    return predicate(releaseGroups, filterValue);
+  },
+
+  sizeOnDisk: function(item, filterValue, type) {
+    const predicate = filterTypePredicates[type];
+    const { statistics = {} } = item;
+    const sizeOnDisk = statistics && statistics.sizeOnDisk ? statistics.sizeOnDisk : 0;
+
+    return predicate(sizeOnDisk, filterValue);
+  },
+
   inCinemas: function(item, filterValue, type) {
     return dateFilterPredicate(item.inCinemas, filterValue, type);
   },
@@ -290,6 +306,12 @@ export const sortPredicates = {
     }
 
     return Number.MAX_VALUE;
+  },
+
+  sizeOnDisk: function(item) {
+    const { statistics = {} } = item;
+
+    return statistics.sizeOnDisk || 0;
   }
 };
 

frontend/src/Store/Actions/movieIndexActions.js

@@ -206,6 +206,12 @@ export const defaultState = {
       isSortable: true,
       isVisible: false
     },
+    {
+      name: 'releaseGroups',
+      label: () => translate('ReleaseGroup'),
+      isSortable: true,
+      isVisible: false
+    },
     {
       name: 'tags',
       label: () => translate('Tags'),
@@ -241,6 +247,17 @@ export const defaultState = {
       return originalLanguage.name;
     },
 
+    releaseGroups: function(item) {
+      const { statistics = {} } = item;
+      const { releaseGroups = [] } = statistics;
+
+      return releaseGroups.length ?
+        releaseGroups
+          .map((group) => group.toLowerCase())
+          .sort((a, b) => a.localeCompare(b)) :
+        undefined;
+    },
+
     imdbRating: function(item) {
       const { ratings = {} } = item;
 
@@ -313,6 +330,28 @@ export const defaultState = {
         return collectionList.sort(sortByName);
       }
     },
+    {
+      name: 'releaseGroups',
+      label: () => translate('ReleaseGroups'),
+      type: filterBuilderTypes.ARRAY,
+      optionsSelector: function(items) {
+        const groupList = items.reduce((acc, movie) => {
+          const { statistics = {} } = movie;
+          const { releaseGroups = [] } = statistics;
+
+          releaseGroups.forEach((releaseGroup) => {
+            acc.push({
+              id: releaseGroup,
+              name: releaseGroup
+            });
+          });
+
+          return acc;
+        }, []);
+
+        return groupList.sort(sortByName);
+      }
+    },
     {
       name: 'status',
       label: () => translate('ReleaseStatus'),