New: Keywords custom filter and autotagging for movies

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

@@ -43,7 +43,8 @@
 .physicalRelease,
 .digitalRelease,
 .releaseDate,
-.genres {
+.genres,
+.keywords {
   composes: cell;
 
   flex: 0 0 180px;

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

@@ -12,6 +12,7 @@ interface CssExports {
   'genres': string;
   'imdbRating': string;
   'inCinemas': string;
+  'keywords': string;
   'minimumAvailability': string;
   'movieStatus': string;
   'originalLanguage': string;

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

@@ -72,6 +72,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     minimumAvailability,
     path,
     genres = [],
+    keywords = [],
     ratings,
     popularity,
     certification,
@@ -339,6 +340,20 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           );
         }
 
+        if (name === 'keywords') {
+          const joinedKeywords = keywords.join(', ');
+          const truncatedKeywords =
+            keywords.length > 3
+              ? `${keywords.slice(0, 3).join(', ')}...`
+              : joinedKeywords;
+
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <span title={joinedKeywords}>{truncatedKeywords}</span>
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'movieStatus') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

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

@@ -36,7 +36,8 @@
 .physicalRelease,
 .digitalRelease,
 .releaseDate,
-.genres {
+.genres,
+.keywords {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 180px;

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

@@ -9,6 +9,7 @@ interface CssExports {
   'genres': string;
   'imdbRating': string;
   'inCinemas': string;
+  'keywords': string;
   'minimumAvailability': string;
   'movieStatus': string;
   'originalLanguage': string;

frontend/src/Movie/Movie.ts

@@ -82,6 +82,7 @@ interface Movie extends ModelBase {
   minimumAvailability: MovieAvailability;
   path: string;
   genres: string[];
+  keywords: string[];
   ratings: Ratings;
   popularity: number;
   certification: string;

frontend/src/Store/Actions/movieIndexActions.js

@@ -181,6 +181,12 @@ export const defaultState = {
       isSortable: false,
       isVisible: false
     },
+    {
+      name: 'keywords',
+      label: () => translate('Keywords'),
+      isSortable: false,
+      isVisible: false
+    },
     {
       name: 'movieStatus',
       label: () => translate('Status'),
@@ -473,8 +479,8 @@ export const defaultState = {
       label: () => translate('Genres'),
       type: filterBuilderTypes.ARRAY,
       optionsSelector: function(items) {
-        const genreList = items.reduce((acc, movie) => {
-          movie.genres.forEach((genre) => {
+        const genreList = items.reduce((acc, { genres = [] }) => {
+          genres.forEach((genre) => {
             acc.push({
               id: genre,
               name: genre
@@ -487,6 +493,27 @@ export const defaultState = {
         return genreList.sort(sortByProp('name'));
       }
     },
+    {
+      name: 'keywords',
+      label: () => translate('Keywords'),
+      type: filterBuilderTypes.ARRAY,
+      optionsSelector: function(items) {
+        const keywordList = items.reduce((acc, { keywords = [] }) => {
+          keywords.forEach((keyword) => {
+            if (acc.findIndex((a) => a.id === keyword) === -1) {
+              acc.push({
+                id: keyword,
+                name: keyword
+              });
+            }
+          });
+
+          return acc;
+        }, []);
+
+        return keywordList.sort(sortByProp('name'));
+      }
+    },
     {
       name: 'tmdbRating',
       label: () => translate('TmdbRating'),