New: Add Original Country information

Closes #5143

frontend/src/Series/Index/Menus/SeriesIndexSortMenu.tsx

@@ -46,6 +46,15 @@ function SeriesIndexSortMenu(props: SeriesIndexSortMenuProps) {
           {translate('Network')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="originalCountry"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('OriginalCountry')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="originalLanguage"
           sortKey={sortKey}

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -103,6 +103,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
     status,
     path,
     titleSlug,
+    originalCountry,
     originalLanguage,
     network,
     nextAiring,
@@ -256,6 +257,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
       ) : null}
 
       <SeriesIndexPosterInfo
+        originalCountry={originalCountry}
         originalLanguage={originalLanguage}
         network={network}
         previousAiring={previousAiring}

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import HeartRating from 'Components/HeartRating';
 import SeriesTagList from 'Components/SeriesTagList';
+import useCountryName from 'Internationalization/useCountryName';
 import Language from 'Language/Language';
 import { Ratings } from 'Series/Series';
 import { QualityProfileModel } from 'Settings/Profiles/Quality/useQualityProfiles';
@@ -11,6 +12,7 @@ import translate from 'Utilities/String/translate';
 import styles from './SeriesIndexPosterInfo.css';
 
 interface SeriesIndexPosterInfoProps {
+  originalCountry?: string;
   originalLanguage?: Language;
   network?: string;
   showQualityProfile: boolean;
@@ -32,6 +34,7 @@ interface SeriesIndexPosterInfoProps {
 
 function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
   const {
+    originalCountry,
     originalLanguage,
     network,
     qualityProfile,
@@ -51,6 +54,8 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     showTags,
   } = props;
 
+  const originalCountryName = useCountryName(originalCountry);
+
   if (sortKey === 'network' && network) {
     return (
       <div className={styles.info} title={translate('Network')}>
@@ -59,6 +64,14 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     );
   }
 
+  if (sortKey === 'originalCountry' && !!originalCountryName) {
+    return (
+      <div className={styles.info} title={translate('OriginalCountry')}>
+        {originalCountryName}
+      </div>
+    );
+  }
+
   if (sortKey === 'originalLanguage' && !!originalLanguage?.name) {
     return (
       <div className={styles.info} title={translate('OriginalLanguage')}>

frontend/src/Series/Index/Table/SeriesIndexRow.css

@@ -66,6 +66,7 @@
   flex: 2 0 90px;
 }
 
+.originalCountry,
 .originalLanguage,
 .qualityProfileId {
   composes: cell;

frontend/src/Series/Index/Table/SeriesIndexRow.css.d.ts

@@ -17,6 +17,7 @@ interface CssExports {
   'monitorNewItems': string;
   'network': string;
   'nextAiring': string;
+  'originalCountry': string;
   'originalLanguage': string;
   'overlayTitle': string;
   'path': string;

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -14,6 +14,7 @@ import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import Column from 'Components/Table/Column';
 import { icons } from 'Helpers/Props';
+import useCountryName from 'Internationalization/useCountryName';
 import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModal from 'Series/Edit/EditSeriesModal';
 import { Statistics } from 'Series/Series';
@@ -56,6 +57,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
   const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
   const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
   const { getIsSelected, toggleSelected } = useSelect();
+  const originalCountryName = useCountryName(series?.originalCountry);
 
   const onRefreshPress = useCallback(() => {
     executeCommand({
@@ -230,6 +232,14 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
           );
         }
 
+        if (name === 'originalCountry') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {originalCountryName}
+            </VirtualTableRowCell>
+          );
+        }
+
         if (name === 'originalLanguage') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

frontend/src/Series/Index/Table/SeriesIndexTableHeader.css

@@ -30,6 +30,7 @@
   flex: 2 0 90px;
 }
 
+.originalCountry,
 .originalLanguage,
 .qualityProfileId {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';

frontend/src/Series/Index/Table/SeriesIndexTableHeader.css.d.ts

@@ -13,6 +13,7 @@ interface CssExports {
   'monitorNewItems': string;
   'network': string;
   'nextAiring': string;
+  'originalCountry': string;
   'originalLanguage': string;
   'path': string;
   'previousAiring': string;