New: Display original language on movie details and search results page

Closes #10206

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -85,6 +85,7 @@
   margin-top: 20px;
 }
 
+.originalLanguage,
 .studio,
 .genres {
   margin-left: 5px;

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

@@ -8,6 +8,7 @@ interface CssExports {
   'genres': string;
   'icons': string;
   'links': string;
+  'originalLanguage': string;
   'overlay': string;
   'overview': string;
   'poster': string;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -62,6 +62,7 @@ class AddNewMovieSearchResult extends Component {
       titleSlug,
       year,
       studio,
+      originalLanguage,
       genres,
       status,
       overview,
@@ -213,17 +214,31 @@ class AddNewMovieSearchResult extends Component {
               }
 
               {
-                !!studio &&
+                originalLanguage?.name ?
                   <Label size={sizes.LARGE}>
                     <Icon
-                      name={icons.STUDIO}
+                      name={icons.LANGUAGE}
                       size={13}
                     />
+                    <span className={styles.originalLanguage}>
+                      {originalLanguage.name}
+                    </span>
+                  </Label> :
+                  null
+              }
 
+              {
+                studio ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.STUDIO}
+                      size={13}
+                    />
                     <span className={styles.studio}>
                       {studio}
                     </span>
-                  </Label>
+                  </Label> :
+                  null
               }
 
               {
@@ -233,7 +248,6 @@ class AddNewMovieSearchResult extends Component {
                       name={icons.GENRE}
                       size={13}
                     />
-
                     <span className={styles.genres}>
                       {genres.slice(0, 3).join(', ')}
                     </span>
@@ -311,6 +325,7 @@ AddNewMovieSearchResult.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   studio: PropTypes.string,
+  originalLanguage: PropTypes.object,
   genres: PropTypes.arrayOf(PropTypes.string),
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,

frontend/src/Helpers/Props/icons.js

@@ -179,6 +179,7 @@ export const IN_CINEMAS = fasTicketAlt;
 export const INFO = fasInfoCircle;
 export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
+export const LANGUAGE = fasLanguage;
 export const LOGOUT = fasSignOutAlt;
 export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;

frontend/src/Movie/Details/MovieDetails.css

@@ -151,6 +151,7 @@
 .sizeOnDisk,
 .qualityProfileName,
 .statusName,
+.originalLanguage,
 .studio,
 .collection,
 .genres {

frontend/src/Movie/Details/MovieDetails.css.d.ts

@@ -21,6 +21,7 @@ interface CssExports {
   'monitorToggleButton': string;
   'movieNavigationButton': string;
   'movieNavigationButtons': string;
+  'originalLanguage': string;
   'overview': string;
   'path': string;
   'poster': string;

frontend/src/Movie/Details/MovieDetails.js

@@ -242,6 +242,7 @@ class MovieDetails extends Component {
       qualityProfileId,
       monitored,
       studio,
+      originalLanguage,
       genres,
       collection,
       overview,
@@ -574,7 +575,7 @@ class MovieDetails extends Component {
                   </InfoLabel>
 
                   {
-                    !!collection &&
+                    collection ?
                       <InfoLabel
                         className={styles.detailsInfoLabel}
                         title={translate('Collection')}
@@ -585,11 +586,26 @@ class MovieDetails extends Component {
                             tmdbId={collection.tmdbId}
                           />
                         </div>
-                      </InfoLabel>
+                      </InfoLabel> :
+                      null
                   }
 
                   {
-                    !!studio && !isSmallScreen &&
+                    originalLanguage?.name && !isSmallScreen ?
+                      <InfoLabel
+                        className={styles.detailsInfoLabel}
+                        title={translate('OriginalLanguage')}
+                        size={sizes.LARGE}
+                      >
+                        <span className={styles.originalLanguage}>
+                          {originalLanguage.name}
+                        </span>
+                      </InfoLabel> :
+                      null
+                  }
+
+                  {
+                    studio && !isSmallScreen ?
                       <InfoLabel
                         className={styles.detailsInfoLabel}
                         title={translate('Studio')}
@@ -598,11 +614,12 @@ class MovieDetails extends Component {
                         <span className={styles.studio}>
                           {studio}
                         </span>
-                      </InfoLabel>
+                      </InfoLabel> :
+                      null
                   }
 
                   {
-                    !!genres.length && !isSmallScreen &&
+                    genres.length && !isSmallScreen ?
                       <InfoLabel
                         className={styles.detailsInfoLabel}
                         title={translate('Genres')}
@@ -611,7 +628,8 @@ class MovieDetails extends Component {
                         <span className={styles.genres}>
                           {genres.join(', ')}
                         </span>
-                      </InfoLabel>
+                      </InfoLabel> :
+                      null
                   }
                 </div>
 
@@ -745,6 +763,7 @@ MovieDetails.propTypes = {
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   studio: PropTypes.string,
+  originalLanguage: PropTypes.object,
   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   collection: PropTypes.object,
   youTubeTrailerId: PropTypes.string,