Refactor include time for movie history

(cherry picked from commit 05edd44ed6dfe73c25da021ef2600e609852f7e0)
(cherry picked from commit ca372bee258523339aff2b868f8f9a619d44dbca)
(cherry picked from commit 2a662afaef0bed9f8cd153d60eee5ecbe85508ba)

Closes #10039
Closes #10045
Closes #10046

frontend/src/Activity/Queue/TimeleftCell.js

@@ -24,7 +24,11 @@ function TimeleftCell(props) {
   } = props;
 
   if (status === 'delay') {
-    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates
+    });
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
@@ -40,7 +44,11 @@ function TimeleftCell(props) {
   }
 
   if (status === 'downloadClientUnavailable') {
-    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates
+    });
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (

frontend/src/Calendar/Day/DayOfWeek.js

@@ -28,7 +28,7 @@ class DayOfWeek extends Component {
     if (view === calendarViews.WEEK) {
       formatedDate = momentDate.format(calendarWeekColumnHeader);
     } else if (view === calendarViews.FORECAST) {
-      formatedDate = getRelativeDate(date, shortDateFormat, showRelativeDates);
+      formatedDate = getRelativeDate({ date, shortDateFormat, showRelativeDates });
     }
 
     return (

frontend/src/Components/Table/Cells/RelativeDateCell.js

@@ -15,6 +15,7 @@ class RelativeDateCell extends PureComponent {
       className,
       date,
       includeSeconds,
+      includeTime,
       showRelativeDates,
       shortDateFormat,
       longDateFormat,
@@ -39,7 +40,7 @@ class RelativeDateCell extends PureComponent {
         title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
         {...otherProps}
       >
-        {getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })}
+        {getRelativeDate({ date, shortDateFormat, showRelativeDates, timeFormat, includeSeconds, includeTime, timeForToday: true })}
       </Component>
     );
   }
@@ -49,6 +50,7 @@ RelativeDateCell.propTypes = {
   className: PropTypes.string.isRequired,
   date: PropTypes.string,
   includeSeconds: PropTypes.bool.isRequired,
+  includeTime: PropTypes.bool.isRequired,
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
@@ -60,6 +62,7 @@ RelativeDateCell.propTypes = {
 RelativeDateCell.defaultProps = {
   className: styles.cell,
   includeSeconds: false,
+  includeTime: false,
   component: TableRowCell
 };
 

frontend/src/Movie/Details/MovieReleaseDates.tsx

@@ -38,7 +38,10 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
           <div className={styles.dateIcon}>
             <Icon name={icons.IN_CINEMAS} />
           </div>
-          {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: inCinemas,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: false,
           })}
@@ -50,7 +53,10 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
           <div className={styles.dateIcon}>
             <Icon name={icons.MOVIE_FILE} />
           </div>
-          {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: digitalRelease,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: false,
           })}
@@ -62,12 +68,13 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
           <div className={styles.dateIcon}>
             <Icon name={icons.DISC} />
           </div>
-          {getRelativeDate(
-            physicalRelease,
+          {getRelativeDate({
+            date: physicalRelease,
             shortDateFormat,
             showRelativeDates,
-            { timeFormat, timeForToday: false }
-          )}
+            timeFormat,
+            timeForToday: false,
+          })}
         </div>
       ) : null}
     </>

frontend/src/Movie/History/MovieHistoryRow.js

@@ -4,13 +4,13 @@ import HistoryDetailsModal from 'Activity/History/Details/HistoryDetailsModal';
 import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
-import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './MovieHistoryRow.css';
@@ -109,9 +109,11 @@ class MovieHistoryRow extends Component {
           {formatCustomFormatScore(customFormatScore, customFormats.length)}
         </TableRowCell>
 
-        <TableRowCell>
-          {formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
-        </TableRowCell>
+        <RelativeDateCellConnector
+          date={date}
+          includeSeconds={true}
+          includeTime={true}
+        />
 
         <TableRowCell className={styles.actions}>
           <IconButton

frontend/src/Movie/Index/Overview/MovieIndexOverviewInfo.tsx

@@ -118,7 +118,10 @@ function getInfoRowProps(
       title: `Added: ${formatDateTime(added, longDateFormat, timeFormat)}`,
       iconName: icons.ADD,
       label:
-        getRelativeDate(added, shortDateFormat, showRelativeDates, {
+        getRelativeDate({
+          date: added,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         }) ?? '',

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -243,7 +243,10 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       {showCinemaRelease && inCinemas ? (
         <div className={styles.title} title={translate('InCinemas')}>
           <Icon name={icons.IN_CINEMAS} />{' '}
-          {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: inCinemas,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: false,
           })}
@@ -253,7 +256,10 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       {showDigitalRelease && digitalRelease ? (
         <div className={styles.title} title={translate('DigitalRelease')}>
           <Icon name={icons.MOVIE_FILE} />{' '}
-          {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: digitalRelease,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: false,
           })}
@@ -263,22 +269,23 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       {showPhysicalRelease && physicalRelease ? (
         <div className={styles.title} title={translate('PhysicalRelease')}>
           <Icon name={icons.DISC} />{' '}
-          {getRelativeDate(
-            physicalRelease,
+          {getRelativeDate({
+            date: physicalRelease,
             shortDateFormat,
             showRelativeDates,
-            {
-              timeFormat,
-              timeForToday: false,
-            }
-          )}
+            timeFormat,
+            timeForToday: false,
+          })}
         </div>
       ) : null}
 
       {showReleaseDate && releaseDate ? (
         <div className={styles.title} title={translate('ReleaseDate')}>
           <Icon name={icons.CALENDAR} />{' '}
-          {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: releaseDate,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: false,
           })}

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -100,15 +100,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
   }
 
   if (sortKey === 'added' && added) {
-    const addedDate = getRelativeDate(
-      added,
+    const addedDate = getRelativeDate({
+      date: added,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false,
-      }
-    );
+      timeFormat,
+      timeForToday: false,
+    });
 
     return (
       <div
@@ -129,15 +127,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
   }
 
   if (sortKey === 'inCinemas' && inCinemas && !showCinemaRelease) {
-    const inCinemasDate = getRelativeDate(
-      inCinemas,
+    const inCinemasDate = getRelativeDate({
+      date: inCinemas,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false,
-      }
-    );
+      timeFormat,
+      timeForToday: false,
+    });
 
     return (
       <div className={styles.info} title={translate('InCinemas')}>
@@ -147,15 +143,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
   }
 
   if (sortKey === 'digitalRelease' && digitalRelease && !showDigitalRelease) {
-    const digitalReleaseDate = getRelativeDate(
-      digitalRelease,
+    const digitalReleaseDate = getRelativeDate({
+      date: digitalRelease,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false,
-      }
-    );
+      timeFormat,
+      timeForToday: false,
+    });
 
     return (
       <div className={styles.info} title={translate('DigitalRelease')}>
@@ -169,15 +163,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     physicalRelease &&
     !showPhysicalRelease
   ) {
-    const physicalReleaseDate = getRelativeDate(
-      physicalRelease,
+    const physicalReleaseDate = getRelativeDate({
+      date: physicalRelease,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false,
-      }
-    );
+      timeFormat,
+      timeForToday: false,
+    });
 
     return (
       <div className={styles.info} title={translate('PhysicalRelease')}>
@@ -190,7 +182,10 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     return (
       <div className={styles.info} title={translate('ReleaseDate')}>
         <Icon name={icons.CALENDAR} />{' '}
-        {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, {
+        {getRelativeDate({
+          date: releaseDate,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: false,
         })}

frontend/src/Utilities/Date/getRelativeDate.js

@@ -1,43 +0,0 @@
-import moment from 'moment';
-import formatTime from 'Utilities/Date/formatTime';
-import isInNextWeek from 'Utilities/Date/isInNextWeek';
-import isToday from 'Utilities/Date/isToday';
-import isTomorrow from 'Utilities/Date/isTomorrow';
-import isYesterday from 'Utilities/Date/isYesterday';
-import translate from 'Utilities/String/translate';
-
-function getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds = false, timeForToday = false } = {}) {
-  if (!date) {
-    return null;
-  }
-
-  const isTodayDate = isToday(date);
-
-  if (isTodayDate && timeForToday && timeFormat) {
-    return formatTime(date, timeFormat, { includeMinuteZero: true, includeSeconds });
-  }
-
-  if (!showRelativeDates) {
-    return moment(date).format(shortDateFormat);
-  }
-
-  if (isYesterday(date)) {
-    return translate('Yesterday');
-  }
-
-  if (isTodayDate) {
-    return translate('Today');
-  }
-
-  if (isTomorrow(date)) {
-    return translate('Tomorrow');
-  }
-
-  if (isInNextWeek(date)) {
-    return moment(date).format('dddd');
-  }
-
-  return moment(date).format(shortDateFormat);
-}
-
-export default getRelativeDate;

frontend/src/Utilities/Date/getRelativeDate.ts

@@ -0,0 +1,82 @@
+import moment from 'moment';
+import formatTime from 'Utilities/Date/formatTime';
+import isInNextWeek from 'Utilities/Date/isInNextWeek';
+import isToday from 'Utilities/Date/isToday';
+import isTomorrow from 'Utilities/Date/isTomorrow';
+import isYesterday from 'Utilities/Date/isYesterday';
+import translate from 'Utilities/String/translate';
+import formatDateTime from './formatDateTime';
+
+interface GetRelativeDateOptions {
+  date?: string;
+  shortDateFormat: string;
+  showRelativeDates: boolean;
+  timeFormat?: string;
+  includeSeconds?: boolean;
+  timeForToday?: boolean;
+  includeTime?: boolean;
+}
+
+function getRelativeDate({
+  date,
+  shortDateFormat,
+  showRelativeDates,
+  timeFormat,
+  includeSeconds = false,
+  timeForToday = false,
+  includeTime = false,
+}: GetRelativeDateOptions) {
+  if (!date) {
+    return '';
+  }
+
+  if ((includeTime || timeForToday) && !timeFormat) {
+    throw new Error(
+      "getRelativeDate: 'timeFormat' is required when 'includeTime' or 'timeForToday' is true"
+    );
+  }
+
+  const isTodayDate = isToday(date);
+  const time = timeFormat
+    ? formatTime(date, timeFormat, {
+        includeMinuteZero: true,
+        includeSeconds,
+      })
+    : '';
+
+  if (isTodayDate && timeForToday) {
+    return time;
+  }
+
+  if (!showRelativeDates) {
+    return moment(date).format(shortDateFormat);
+  }
+
+  if (isYesterday(date)) {
+    return includeTime
+      ? translate('YesterdayAt', { time })
+      : translate('Yesterday');
+  }
+
+  if (isTodayDate) {
+    return includeTime ? translate('TodayAt', { time }) : translate('Today');
+  }
+
+  if (isTomorrow(date)) {
+    return includeTime
+      ? translate('TomorrowAt', { time })
+      : translate('Tomorrow');
+  }
+
+  if (isInNextWeek(date)) {
+    const day = moment(date).format('dddd');
+
+    return includeTime ? translate('DayOfWeekAt', { day, time }) : day;
+  }
+
+  return includeTime
+    ? formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds })
+    : moment(date).format(shortDateFormat);
+}
+
+export default getRelativeDate;

src/NzbDrone.Core/Localization/Core/en.json

@@ -278,6 +278,7 @@
   "Date": "Date",
   "Dates": "Dates",
   "Day": "Day",
+  "DayOfWeekAt": "{day} at {time}",
   "Days": "Days",
   "Debug": "Debug",
   "Default": "Default",
@@ -1696,7 +1697,9 @@
   "TmdbRating": "TMDb Rating",
   "TmdbVotes": "TMDb Votes",
   "Today": "Today",
+  "TodayAt": "Today at {time}",
   "Tomorrow": "Tomorrow",
+  "TomorrowAt": "Tomorrow at {time}",
   "TorrentBlackhole": "Torrent Blackhole",
   "TorrentBlackholeSaveMagnetFiles": "Save Magnet Files",
   "TorrentBlackholeSaveMagnetFilesExtension": "Save Magnet Files Extension",
@@ -1811,5 +1814,6 @@
   "YesCancel": "Yes, Cancel",
   "YesMoveFiles": "Yes, Move the Files",
   "Yesterday": "Yesterday",
+  "YesterdayAt": "Yesterday at {time}",
   "YouCanAlsoSearch": "You can also search using TMDb ID or IMDb ID of a movie. e.g. `tmdb:71663`"
 }