New: IMDb ratings and genres in add movie search results

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -85,8 +85,13 @@
   margin-top: 20px;
 }
 
+.studio,
+.genres {
+  margin-left: 5px;
+}
+
 .links {
-  margin-left: 8px;
+  margin-left: 5px;
   pointer-events: all;
 }
 

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'certification': string;
   'content': string;
   'exclusionIcon': string;
+  'genres': string;
   'icons': string;
   'links': string;
   'overlay': string;
@@ -14,6 +15,7 @@ interface CssExports {
   'runtime': string;
   'searchResult': string;
   'statusContainer': string;
+  'studio': string;
   'title': string;
   'titleContainer': string;
   'titleRow': string;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Icon from 'Components/Icon';
+import ImdbRating from 'Components/ImdbRating';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
 import TmdbRating from 'Components/TmdbRating';
@@ -61,6 +62,7 @@ class AddNewMovieSearchResult extends Component {
       titleSlug,
       year,
       studio,
+      genres,
       status,
       overview,
       ratings,
@@ -197,13 +199,46 @@ class AddNewMovieSearchResult extends Component {
                 />
               </Label>
 
+              {
+                ratings.imdb ?
+                  <Label size={sizes.LARGE}>
+                    <ImdbRating
+                      ratings={ratings}
+                      iconSize={13}
+                    />
+                  </Label> :
+                  null
+              }
+
               {
                 !!studio &&
                   <Label size={sizes.LARGE}>
-                    {studio}
+                    <Icon
+                      name={icons.STUDIO}
+                      size={13}
+                    />
+
+                    <span className={styles.studio}>
+                      {studio}
+                    </span>
                   </Label>
               }
 
+              {
+                genres.length > 0 ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.GENRE}
+                      size={13}
+                    />
+
+                    <span className={styles.genres}>
+                      {genres.slice(0, 3).join(', ')}
+                    </span>
+                  </Label> :
+                  null
+              }
+
               <Tooltip
                 anchor={
                   <Label
@@ -215,15 +250,15 @@ class AddNewMovieSearchResult extends Component {
                     />
 
                     <span className={styles.links}>
-                      Links
+                      {translate('Links')}
                     </span>
                   </Label>
                 }
                 tooltip={
                   <MovieDetailsLinks
                     tmdbId={tmdbId}
-                    youTubeTrailerId={youTubeTrailerId}
                     imdbId={imdbId}
+                    youTubeTrailerId={youTubeTrailerId}
                   />
                 }
                 canFlip={true}
@@ -273,6 +308,7 @@ AddNewMovieSearchResult.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   studio: PropTypes.string,
+  genres: PropTypes.arrayOf(PropTypes.string),
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   ratings: PropTypes.object.isRequired,
@@ -294,4 +330,8 @@ AddNewMovieSearchResult.propTypes = {
   certification: PropTypes.string
 };
 
+AddNewMovieSearchResult.defaultProps = {
+  genres: []
+};
+
 export default AddNewMovieSearchResult;