New: Series genres for search results

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -70,10 +70,15 @@
 }
 
 .originalLanguageName,
-.network {
+.network,
+.genres {
   margin-left: 8px;
 }
 
+.genres {
+  pointer-events: all;
+}
+
 .tvdbLink {
   composes: link from '~Components/Link/Link.css';
 

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'alreadyExistsIcon': string;
   'content': string;
+  'genres': string;
   'icons': string;
   'network': string;
   'originalLanguageName': string;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -6,6 +6,7 @@ import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
 import MetadataAttribution from 'Components/MetadataAttribution';
 import { icons, kinds, sizes } from 'Helpers/Props';
+import SeriesGenres from 'Series/SeriesGenres';
 import SeriesPoster from 'Series/SeriesPoster';
 import translate from 'Utilities/String/translate';
 import AddNewSeriesModal from './AddNewSeriesModal';
@@ -56,6 +57,7 @@ class AddNewSeriesSearchResult extends Component {
       year,
       network,
       originalLanguage,
+      genres,
       status,
       overview,
       statistics,
@@ -181,6 +183,18 @@ class AddNewSeriesSearchResult extends Component {
                   null
               }
 
+              {
+                genres.length > 0 ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.GENRE}
+                      size={13}
+                    />
+                    <SeriesGenres className={styles.genres} genres={genres} />
+                  </Label> :
+                  null
+              }
+
               {
                 seasonCount ?
                   <Label size={sizes.LARGE}>
@@ -243,6 +257,7 @@ AddNewSeriesSearchResult.propTypes = {
   year: PropTypes.number.isRequired,
   network: PropTypes.string,
   originalLanguage: PropTypes.object,
+  genres: PropTypes.arrayOf(PropTypes.string),
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   statistics: PropTypes.object.isRequired,
@@ -254,4 +269,8 @@ AddNewSeriesSearchResult.propTypes = {
   isSmallScreen: PropTypes.bool.isRequired
 };
 
+AddNewSeriesSearchResult.defaultProps = {
+  genres: []
+};
+
 export default AddNewSeriesSearchResult;

frontend/src/Helpers/Props/icons.ts

@@ -102,6 +102,7 @@ import {
   faTable as fasTable,
   faTags as fasTags,
   faTh as fasTh,
+  faTheaterMasks as fasTheaterMasks,
   faThList as fasThList,
   faTimes as fasTimes,
   faTimesCircle as fasTimesCircle,
@@ -162,6 +163,7 @@ export const FLAG = fasFlag;
 export const FOOTNOTE = fasAsterisk;
 export const FOLDER = farFolder;
 export const FOLDER_OPEN = fasFolderOpen;
+export const GENRE = fasTheaterMasks;
 export const GROUP = farObjectGroup;
 export const HEALTH = fasMedkit;
 export const HEART = fasHeart;

frontend/src/Series/Details/SeriesDetails.css

@@ -110,7 +110,8 @@
   font-size: 20px;
 }
 
-.runtime {
+.runtime,
+.genres {
   margin-right: 15px;
 }
 

frontend/src/Series/Details/SeriesDetails.css.d.ts

@@ -8,6 +8,7 @@ interface CssExports {
   'details': string;
   'detailsLabel': string;
   'fileCountMessage': string;
+  'genres': string;
   'header': string;
   'headerContent': string;
   'info': string;

frontend/src/Series/Details/SeriesDetails.js

@@ -27,6 +27,7 @@ import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModal from 'Series/Edit/EditSeriesModal';
 import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
 import MonitoringOptionsModal from 'Series/MonitoringOptions/MonitoringOptionsModal';
+import SeriesGenres from 'Series/SeriesGenres';
 import SeriesPoster from 'Series/SeriesPoster';
 import { getSeriesStatusDetails } from 'Series/SeriesStatus';
 import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
@@ -38,7 +39,6 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import SeriesAlternateTitles from './SeriesAlternateTitles';
 import SeriesDetailsLinks from './SeriesDetailsLinks';
 import SeriesDetailsSeasonConnector from './SeriesDetailsSeasonConnector';
-import SeriesGenres from './SeriesGenres';
 import SeriesTagsConnector from './SeriesTagsConnector';
 import styles from './SeriesDetails.css';
 
@@ -419,7 +419,7 @@ class SeriesDetails extends Component {
                         null
                     }
 
-                    <SeriesGenres genres={genres} />
+                    <SeriesGenres className={styles.genres} genres={genres} />
 
                     <span>
                       {runningYears}

frontend/src/Series/Details/SeriesGenres.css

@@ -1,3 +0,0 @@
-.genres {
-  margin-right: 15px;
-}

frontend/src/Series/Details/SeriesGenres.css.d.ts

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

frontend/src/Series/Details/SeriesGenres.js

@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
-import styles from './SeriesGenres.css';
-
-function SeriesGenres({ genres }) {
-  const [firstGenre, ...otherGenres] = genres;
-
-  if (otherGenres.length) {
-    return (
-      <Tooltip
-        anchor={
-          <span className={styles.genres}>
-            {firstGenre}
-          </span>
-        }
-        tooltip={
-          <div>
-            {
-              otherGenres.map((tag) => {
-                return (
-                  <Label
-                    key={tag}
-                    kind={kinds.INFO}
-                    size={sizes.LARGE}
-                  >
-                    {tag}
-                  </Label>
-                );
-              })
-            }
-          </div>
-        }
-        kind={kinds.INVERSE}
-        position={tooltipPositions.TOP}
-      />
-    );
-  }
-
-  return (
-    <span className={styles.genres}>
-      {firstGenre}
-    </span>
-  );
-}
-
-SeriesGenres.propTypes = {
-  genres: PropTypes.arrayOf(PropTypes.string).isRequired
-};
-
-export default SeriesGenres;

frontend/src/Series/SeriesGenres.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+
+interface SeriesGenresProps {
+  className?: string;
+  genres: string[];
+}
+
+function SeriesGenres({ className, genres }: SeriesGenresProps) {
+  const [firstGenre, ...otherGenres] = genres;
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={<span className={className}>{firstGenre}</span>}
+        tooltip={
+          <div>
+            {otherGenres.map((tag) => {
+              return (
+                <Label key={tag} kind={kinds.INFO} size={sizes.LARGE}>
+                  {tag}
+                </Label>
+              );
+            })}
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return <span className={className}>{firstGenre}</span>;
+}
+
+export default SeriesGenres;