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}
       />