From fbda2d54c7d1961997936d4f02916acee219629f Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 25 Jul 2024 07:31:29 +0300
Subject: [PATCH] New: Display original language on series details and search
 results page

Closes #6984
---
 .../AddNewSeries/AddNewSeriesSearchResult.css |  5 +++
 .../AddNewSeriesSearchResult.css.d.ts         |  2 ++
 .../AddNewSeries/AddNewSeriesSearchResult.js  | 26 +++++++++++++-
 frontend/src/Helpers/Props/icons.js           |  2 ++
 frontend/src/Series/Details/SeriesDetails.css |  1 +
 .../src/Series/Details/SeriesDetails.css.d.ts |  1 +
 frontend/src/Series/Details/SeriesDetails.js  | 36 +++++++++++++------
 7 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
index 469385630..c32e6efcb 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
@@ -69,6 +69,11 @@
   height: 55px;
 }
 
+.originalLanguageName,
+.network {
+  margin-left: 8px;
+}
+
 .tvdbLink {
   composes: link from '~Components/Link/Link.css';
 
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts
index 1380d41f3..4d51aab62 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts
@@ -4,6 +4,8 @@ interface CssExports {
   'alreadyExistsIcon': string;
   'content': string;
   'icons': string;
+  'network': string;
+  'originalLanguageName': string;
   'overlay': string;
   'overview': string;
   'poster': string;
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js
index 2efb480bc..9ec6cf283 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js
@@ -55,6 +55,7 @@ class AddNewSeriesSearchResult extends Component {
       titleSlug,
       year,
       network,
+      originalLanguage,
       status,
       overview,
       statistics,
@@ -150,10 +151,32 @@ class AddNewSeriesSearchResult extends Component {
                 />
               </Label>
 
+              {
+                originalLanguage?.name ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.LANGUAGE}
+                      size={13}
+                    />
+
+                    <span className={styles.originalLanguageName}>
+                      {originalLanguage.name}
+                    </span>
+                  </Label> :
+                  null
+              }
+
               {
                 network ?
                   <Label size={sizes.LARGE}>
-                    {network}
+                    <Icon
+                      name={icons.NETWORK}
+                      size={13}
+                    />
+
+                    <span className={styles.network}>
+                      {network}
+                    </span>
                   </Label> :
                   null
               }
@@ -219,6 +242,7 @@ AddNewSeriesSearchResult.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   network: PropTypes.string,
+  originalLanguage: PropTypes.object,
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   statistics: PropTypes.object.isRequired,
diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js
index 4fbd5914c..d297257db 100644
--- a/frontend/src/Helpers/Props/icons.js
+++ b/frontend/src/Helpers/Props/icons.js
@@ -69,6 +69,7 @@ import {
   faHistory as fasHistory,
   faHome as fasHome,
   faInfoCircle as fasInfoCircle,
+  faLanguage as fasLanguage,
   faLaptop as fasLaptop,
   faLevelUpAlt as fasLevelUpAlt,
   faListCheck as fasListCheck,
@@ -168,6 +169,7 @@ export const IGNORE = fasTimesCircle;
 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/Series/Details/SeriesDetails.css b/frontend/src/Series/Details/SeriesDetails.css
index d7a26e4f8..f62568a1d 100644
--- a/frontend/src/Series/Details/SeriesDetails.css
+++ b/frontend/src/Series/Details/SeriesDetails.css
@@ -129,6 +129,7 @@
 .path,
 .sizeOnDisk,
 .qualityProfileName,
+.originalLanguageName,
 .network,
 .links,
 .tags {
diff --git a/frontend/src/Series/Details/SeriesDetails.css.d.ts b/frontend/src/Series/Details/SeriesDetails.css.d.ts
index 1af767e38..ea026f8de 100644
--- a/frontend/src/Series/Details/SeriesDetails.css.d.ts
+++ b/frontend/src/Series/Details/SeriesDetails.css.d.ts
@@ -15,6 +15,7 @@ interface CssExports {
   'links': string;
   'monitorToggleButton': string;
   'network': string;
+  'originalLanguageName': string;
   'overview': string;
   'path': string;
   'poster': string;
diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
index babc171f4..10e7938ee 100644
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@@ -185,6 +185,7 @@ class SeriesDetails extends Component {
       monitored,
       status,
       network,
+      originalLanguage,
       overview,
       images,
       seasons,
@@ -431,7 +432,6 @@ class SeriesDetails extends Component {
                     className={styles.detailsLabel}
                     size={sizes.LARGE}
                   >
-
                     <div>
                       <Icon
                         name={icons.FOLDER}
@@ -449,7 +449,6 @@ class SeriesDetails extends Component {
                         className={styles.detailsLabel}
                         size={sizes.LARGE}
                       >
-
                         <div>
                           <Icon
                             name={icons.DRIVE}
@@ -477,7 +476,6 @@ class SeriesDetails extends Component {
                     title={translate('QualityProfile')}
                     size={sizes.LARGE}
                   >
-
                     <div>
                       <Icon
                         name={icons.PROFILE}
@@ -497,7 +495,6 @@ class SeriesDetails extends Component {
                     className={styles.detailsLabel}
                     size={sizes.LARGE}
                   >
-
                     <div>
                       <Icon
                         name={monitored ? icons.MONITORED : icons.UNMONITORED}
@@ -514,7 +511,6 @@ class SeriesDetails extends Component {
                     title={statusDetails.message}
                     size={sizes.LARGE}
                   >
-
                     <div>
                       <Icon
                         name={statusDetails.icon}
@@ -527,23 +523,43 @@ class SeriesDetails extends Component {
                   </Label>
 
                   {
-                    !!network &&
+                    originalLanguage?.name ?
+                      <Label
+                        className={styles.detailsLabel}
+                        title={translate('OriginalLanguage')}
+                        size={sizes.LARGE}
+                      >
+                        <div>
+                          <Icon
+                            name={icons.LANGUAGE}
+                            size={17}
+                          />
+                          <span className={styles.originalLanguageName}>
+                            {originalLanguage.name}
+                          </span>
+                        </div>
+                      </Label> :
+                      null
+                  }
+
+                  {
+                    network ?
                       <Label
                         className={styles.detailsLabel}
                         title={translate('Network')}
                         size={sizes.LARGE}
                       >
-
                         <div>
                           <Icon
                             name={icons.NETWORK}
                             size={17}
                           />
-                          <span className={styles.qualityProfileName}>
+                          <span className={styles.network}>
                             {network}
                           </span>
                         </div>
-                      </Label>
+                      </Label> :
+                      null
                   }
 
                   <Tooltip
@@ -552,7 +568,6 @@ class SeriesDetails extends Component {
                         className={styles.detailsLabel}
                         size={sizes.LARGE}
                       >
-
                         <div>
                           <Icon
                             name={icons.EXTERNAL_LINK}
@@ -734,6 +749,7 @@ SeriesDetails.propTypes = {
   monitor: PropTypes.string,
   status: PropTypes.string.isRequired,
   network: PropTypes.string,
+  originalLanguage: PropTypes.object,
   overview: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   seasons: PropTypes.arrayOf(PropTypes.object).isRequired,