Fix showing sorting values, add tooltips and translations to SeriesIndexPoster

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

@@ -14,7 +14,9 @@ import { Statistics } from 'Series/Series';
 import SeriesPoster from 'Series/SeriesPoster';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import translate from 'Utilities/String/translate';
 import createSeriesIndexItemSelector from '../createSeriesIndexItemSelector';
 import selectPosterOptions from './selectPosterOptions';
 import SeriesIndexPosterInfo from './SeriesIndexPosterInfo';
@@ -42,9 +44,8 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
 
   const {
     title,
@@ -52,7 +53,11 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
     status,
     path,
     titleSlug,
+    originalLanguage,
+    network,
     nextAiring,
+    previousAiring,
+    added,
     statistics = {} as Statistics,
     images,
   } = series;
@@ -122,14 +127,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
 
   return (
     <div className={styles.content}>
-      <div className={styles.posterContainer}>
+      <div className={styles.posterContainer} title={title}>
         {isSelectMode ? <SeriesIndexPosterSelect seriesId={seriesId} /> : null}
 
         <Label className={styles.controls}>
           <SpinnerIconButton
             className={styles.action}
             name={icons.REFRESH}
-            title="Refresh series"
+            title={translate('RefreshSeries')}
             isSpinning={isRefreshingSeries}
             onPress={onRefreshPress}
           />
@@ -138,7 +143,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
             <SpinnerIconButton
               className={styles.action}
               name={icons.SEARCH}
-              title="Search for monitored episodes"
+              title={translate('SearchForMonitoredEpisodes')}
               isSpinning={isSearchingSeries}
               onPress={onSearchPress}
             />
@@ -147,13 +152,13 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
           <IconButton
             className={styles.action}
             name={icons.EDIT}
-            title="Edit Series"
+            title={translate('EditSeries')}
             onPress={onEditSeriesPress}
           />
         </Label>
 
         {status === 'ended' ? (
-          <div className={styles.ended} title="Ended" />
+          <div className={styles.ended} title={translate('Ended')} />
         ) : null}
 
         <Link className={styles.link} style={elementStyle} to={link}>
@@ -185,20 +190,33 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         isStandalone={false}
       />
 
-      {showTitle ? <div className={styles.title}>{title}</div> : null}
+      {showTitle ? (
+        <div className={styles.title} title={title}>
+          {title}
+        </div>
+      ) : null}
 
       {showMonitored ? (
         <div className={styles.title}>
-          {monitored ? 'Monitored' : 'Unmonitored'}
+          {monitored ? translate('Monitored') : translate('Unmonitored')}
         </div>
       ) : null}
 
       {showQualityProfile ? (
-        <div className={styles.title}>{qualityProfile.name}</div>
+        <div className={styles.title} title={translate('QualityProfile')}>
+          {qualityProfile.name}
+        </div>
       ) : null}
 
       {nextAiring ? (
-        <div className={styles.nextAiring}>
+        <div
+          className={styles.nextAiring}
+          title={`${translate('NextAiring')}: ${formatDateTime(
+            nextAiring,
+            longDateFormat,
+            timeFormat
+          )}`}
+        >
           {getRelativeDate(nextAiring, shortDateFormat, showRelativeDates, {
             timeFormat,
             timeForToday: true,
@@ -207,6 +225,10 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
       ) : null}
 
       <SeriesIndexPosterInfo
+        originalLanguage={originalLanguage}
+        network={network}
+        previousAiring={previousAiring}
+        added={added}
         seasonCount={seasonCount}
         sizeOnDisk={sizeOnDisk}
         path={path}
@@ -215,6 +237,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         showRelativeDates={showRelativeDates}
         sortKey={sortKey}
         shortDateFormat={shortDateFormat}
+        longDateFormat={longDateFormat}
         timeFormat={timeFormat}
       />
 

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

@@ -1,10 +1,14 @@
 import React from 'react';
+import Language from 'Language/Language';
 import QualityProfile from 'typings/QualityProfile';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './SeriesIndexPosterInfo.css';
 
 interface SeriesIndexPosterInfoProps {
+  originalLanguage?: Language;
   network?: string;
   showQualityProfile: boolean;
   qualityProfile: QualityProfile;
@@ -16,11 +20,13 @@ interface SeriesIndexPosterInfoProps {
   sortKey: string;
   showRelativeDates: boolean;
   shortDateFormat: string;
+  longDateFormat: string;
   timeFormat: string;
 }
 
 function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
   const {
+    originalLanguage,
     network,
     qualityProfile,
     showQualityProfile,
@@ -32,20 +38,44 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     sortKey,
     showRelativeDates,
     shortDateFormat,
+    longDateFormat,
     timeFormat,
   } = props;
 
   if (sortKey === 'network' && network) {
-    return <div className={styles.info}>{network}</div>;
+    return (
+      <div className={styles.info} title={translate('Network')}>
+        {network}
+      </div>
+    );
+  }
+
+  if (sortKey === 'originalLanguage' && !!originalLanguage?.name) {
+    return (
+      <div className={styles.info} title={translate('Original Language')}>
+        {originalLanguage.name}
+      </div>
+    );
   }
 
   if (sortKey === 'qualityProfileId' && !showQualityProfile) {
-    return <div className={styles.info}>{qualityProfile.name}</div>;
+    return (
+      <div className={styles.info} title={translate('QualityProfile')}>
+        {qualityProfile.name}
+      </div>
+    );
   }
 
   if (sortKey === 'previousAiring' && previousAiring) {
     return (
-      <div className={styles.info}>
+      <div
+        className={styles.info}
+        title={`${translate('PreviousAiring')}: ${formatDateTime(
+          previousAiring,
+          longDateFormat,
+          timeFormat
+        )}`}
+      >
         {getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
           timeFormat,
           timeForToday: true,
@@ -65,27 +95,42 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
       }
     );
 
-    return <div className={styles.info}>{`Added ${addedDate}`}</div>;
+    return (
+      <div
+        className={styles.info}
+        title={formatDateTime(added, longDateFormat, timeFormat)}
+      >
+        {translate('Added')}: {addedDate}
+      </div>
+    );
   }
 
   if (sortKey === 'seasonCount') {
-    let seasons = '1 season';
+    let seasons = translate('OneSeason');
 
     if (seasonCount === 0) {
-      seasons = 'No seasons';
+      seasons = translate('NoSeasons');
     } else if (seasonCount > 1) {
-      seasons = `${seasonCount} seasons`;
+      seasons = translate('CountSeasons', { count: seasonCount });
     }
 
     return <div className={styles.info}>{seasons}</div>;
   }
 
   if (sortKey === 'path') {
-    return <div className={styles.info}>{path}</div>;
+    return (
+      <div className={styles.info} title={translate('Path')}>
+        {path}
+      </div>
+    );
   }
 
   if (sortKey === 'sizeOnDisk') {
-    return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
+    return (
+      <div className={styles.info} title={translate('SizeOnDisk')}>
+        {formatBytes(sizeOnDisk)}
+      </div>
+    );
   }
 
   return null;