New: Collection Column/Filter Movie Index

frontend/src/Movie/Details/MovieDetails.css

@@ -142,6 +142,7 @@
 .qualityProfileName,
 .statusName,
 .studio,
+.collection,
 .links,
 .tags {
   font-weight: 300;

frontend/src/Movie/Details/MovieDetails.js

@@ -165,6 +165,7 @@ class MovieDetails extends Component {
       qualityProfileId,
       monitored,
       studio,
+      collection,
       overview,
       youTubeTrailerId,
       inCinemas,
@@ -324,29 +325,31 @@ class MovieDetails extends Component {
                   </div>
                 </div>
 
-                <div className={styles.detailsLabels}>
+                <div className={styles.details}>
+                  <div>
+                    {
+                      !!runtime &&
+                        <span className={styles.runtime}>
+                          {runtime} Minutes
+                        </span>
+                    }
 
-                  <InfoLabel
-                    className={styles.detailsInfoLabel}
-                    title="Runtime"
-                    size={sizes.LARGE}
-                  >
-                    <span className={styles.runtime}>
-                      {runtime} Minutes
-                    </span>
-                  </InfoLabel>
+                    <HeartRating
+                      rating={ratings.value}
+                      iconSize={20}
+                    />
+                  </div>
+                </div>
 
+                <div className={styles.detailsLabels}>
                   <InfoLabel
                     className={styles.detailsInfoLabel}
-                    title="Rating"
+                    title="Path"
                     size={sizes.LARGE}
                   >
-                    <div>
-                      <HeartRating
-                        rating={ratings.value}
-                        iconSize={16}
-                      />
-                    </div>
+                    <span className={styles.path}>
+                      {path}
+                    </span>
                   </InfoLabel>
 
                   <InfoLabel
@@ -390,6 +393,19 @@ class MovieDetails extends Component {
                     </span>
                   </InfoLabel>
 
+                  {
+                    !!collection &&
+                      <InfoLabel
+                        className={styles.detailsInfoLabel}
+                        title="Collection"
+                        size={sizes.LARGE}
+                      >
+                        <span className={styles.collection}>
+                          {collection.name}
+                        </span>
+                      </InfoLabel>
+                  }
+
                   {
                     !!studio &&
                       <InfoLabel
@@ -569,6 +585,7 @@ MovieDetails.propTypes = {
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   studio: PropTypes.string,
+  collection: PropTypes.object,
   youTubeTrailerId: PropTypes.string,
   inCinemas: PropTypes.string.isRequired,
   overview: PropTypes.string.isRequired,

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

@@ -4,6 +4,7 @@
   flex: 0 0 60px;
 }
 
+.collection,
 .sortTitle {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

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

@@ -11,6 +11,7 @@
   flex: 0 0 60px;
 }
 
+.collection,
 .sortTitle {
   composes: cell;
 

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

@@ -65,6 +65,7 @@ class MovieIndexRow extends Component {
       status,
       title,
       titleSlug,
+      collection,
       studio,
       qualityProfile,
       added,
@@ -145,6 +146,17 @@ class MovieIndexRow extends Component {
               );
             }
 
+            if (name === 'collection') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {collection ? collection.name : null }
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'studio') {
               return (
                 <VirtualTableRowCell
@@ -359,6 +371,7 @@ MovieIndexRow.propTypes = {
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   studio: PropTypes.string,
+  collection: PropTypes.object,
   qualityProfile: PropTypes.object.isRequired,
   added: PropTypes.string,
   inCinemas: PropTypes.string,

frontend/src/Store/Actions/movieActions.js

@@ -110,6 +110,13 @@ export const filterPredicates = {
     return dateFilterPredicate(item.added, filterValue, type);
   },
 
+  collection: function(item, filterValue, type) {
+    const predicate = filterTypePredicates[type];
+    const { collection } = item;
+
+    return predicate(collection ? collection.name : '', filterValue);
+  },
+
   inCinemas: function(item, filterValue, type) {
     return dateFilterPredicate(item.inCinemas, filterValue, type);
   },

frontend/src/Store/Actions/movieIndexActions.js

@@ -78,6 +78,12 @@ export const defaultState = {
       isVisible: true,
       isModifiable: false
     },
+    {
+      name: 'collection',
+      label: 'Collection',
+      isSortable: true,
+      isVisible: false
+    },
     {
       name: 'studio',
       label: 'Studio',
@@ -173,6 +179,12 @@ export const defaultState = {
       return studio ? studio.toLowerCase() : '';
     },
 
+    collection: function(item) {
+      const { collection ={} } = item;
+
+      return collection.name;
+    },
+
     ratings: function(item) {
       const { ratings = {} } = item;
 
@@ -215,6 +227,25 @@ export const defaultState = {
         return tagList.sort(sortByName);
       }
     },
+    {
+      name: 'collection',
+      label: 'Collection',
+      type: filterBuilderTypes.ARRAY,
+      optionsSelector: function(items) {
+        const collectionList = items.reduce((acc, movie) => {
+          if (movie.collection) {
+            acc.push({
+              id: movie.collection.name,
+              name: movie.collection.name
+            });
+          }
+
+          return acc;
+        }, []);
+
+        return collectionList.sort(sortByName);
+      }
+    },
     {
       name: 'qualityProfileId',
       label: 'Quality Profile',
@@ -255,7 +286,7 @@ export const defaultState = {
       label: 'Genres',
       type: filterBuilderTypes.ARRAY,
       optionsSelector: function(items) {
-        const tagList = items.reduce((acc, movie) => {
+        const genreList = items.reduce((acc, movie) => {
           movie.genres.forEach((genre) => {
             acc.push({
               id: genre,
@@ -266,7 +297,7 @@ export const defaultState = {
           return acc;
         }, []);
 
-        return tagList.sort(sortByName);
+        return genreList.sort(sortByName);
       }
     },
     {