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

Closes #6984

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';
 

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;

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,

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;

frontend/src/Series/Details/SeriesDetails.css

@@ -129,6 +129,7 @@
 .path,
 .sizeOnDisk,
 .qualityProfileName,
+.originalLanguageName,
 .network,
 .links,
 .tags {

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;

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('Network')}
+                        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,