From df35e78e1fae232970fb623216179bee76a91829 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 25 Jul 2024 21:33:19 +0300
Subject: [PATCH] New: Display original language on movie details and search
 results page

Closes #10206
---
 .../AddNewMovie/AddNewMovieSearchResult.css   |  1 +
 .../AddNewMovieSearchResult.css.d.ts          |  1 +
 .../AddNewMovie/AddNewMovieSearchResult.js    | 23 +++++++++++---
 frontend/src/Helpers/Props/icons.js           |  1 +
 frontend/src/Movie/Details/MovieDetails.css   |  1 +
 .../src/Movie/Details/MovieDetails.css.d.ts   |  1 +
 frontend/src/Movie/Details/MovieDetails.js    | 31 +++++++++++++++----
 7 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
index 980f2681a..63edbd447 100644
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
@@ -85,6 +85,7 @@
   margin-top: 20px;
 }
 
+.originalLanguage,
 .studio,
 .genres {
   margin-left: 5px;
diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts
index a0d0e2c81..6dfa2d8a2 100644
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts
+++ b/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;
diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
index e72f7695d..e41df3dba 100644
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
+++ b/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.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,
diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js
index 81db4866b..de79dc406 100644
--- a/frontend/src/Helpers/Props/icons.js
+++ b/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;
diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css
index 60be33a4c..1c8f955fc 100644
--- a/frontend/src/Movie/Details/MovieDetails.css
+++ b/frontend/src/Movie/Details/MovieDetails.css
@@ -151,6 +151,7 @@
 .sizeOnDisk,
 .qualityProfileName,
 .statusName,
+.originalLanguage,
 .studio,
 .collection,
 .genres {
diff --git a/frontend/src/Movie/Details/MovieDetails.css.d.ts b/frontend/src/Movie/Details/MovieDetails.css.d.ts
index 8724ec28f..96ca37e3c 100644
--- a/frontend/src/Movie/Details/MovieDetails.css.d.ts
+++ b/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;
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index 2edd0d1d7..34f9f613f 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/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,