New: Use absolute timestamps for series and episode history

frontend/src/Episode/History/EpisodeHistory.js

@@ -66,6 +66,8 @@ class EpisodeHistory extends Component {
       isPopulated,
       error,
       items,
+      timeFormat,
+      shortDateFormat,
       onMarkAsFailedPress
     } = this.props;
 
@@ -101,6 +103,8 @@ class EpisodeHistory extends Component {
                   <EpisodeHistoryRow
                     key={item.id}
                     {...item}
+                    timeFormat={timeFormat}
+                    shortDateFormat={shortDateFormat}
                     onMarkAsFailedPress={onMarkAsFailedPress}
                   />
                 );
@@ -120,6 +124,8 @@ EpisodeHistory.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 

frontend/src/Episode/History/EpisodeHistoryConnector.js

@@ -3,13 +3,19 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { clearEpisodeHistory, episodeHistoryMarkAsFailed, fetchEpisodeHistory } from 'Store/Actions/episodeHistoryActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import EpisodeHistory from './EpisodeHistory';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.episodeHistory,
-    (episodeHistory) => {
-      return episodeHistory;
+    createUISettingsSelector(),
+    (episodeHistory, uiSettings) => {
+      return {
+        ...episodeHistory,
+        timeFormat: uiSettings.timeFormat,
+        shortDateFormat: uiSettings.shortDateFormat
+      };
     }
   );
 }

frontend/src/Episode/History/EpisodeHistoryRow.js

@@ -5,7 +5,6 @@ import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import Icon from 'Components/Icon';
 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 Popover from 'Components/Tooltip/Popover';
@@ -13,6 +12,7 @@ import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './EpisodeHistoryRow.css';
@@ -72,7 +72,9 @@ class EpisodeHistoryRow extends Component {
       customFormatScore,
       date,
       data,
-      downloadId
+      downloadId,
+      timeFormat,
+      shortDateFormat
     } = this.props;
 
     const {
@@ -109,9 +111,9 @@ class EpisodeHistoryRow extends Component {
           {formatCustomFormatScore(customFormatScore, customFormats.length)}
         </TableRowCell>
 
-        <RelativeDateCellConnector
-          date={date}
-        />
+        <TableRowCell>
+          {formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+        </TableRowCell>
 
         <TableRowCell className={styles.actions}>
           <Popover
@@ -169,6 +171,8 @@ EpisodeHistoryRow.propTypes = {
   date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   downloadId: PropTypes.string,
+  timeFormat: PropTypes.string.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 

frontend/src/Series/History/SeriesHistoryModal.js

@@ -14,7 +14,7 @@ function SeriesHistoryModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       onModalClose={onModalClose}
     >
       <SeriesHistoryModalContentConnector

frontend/src/Series/History/SeriesHistoryRow.js

@@ -5,7 +5,6 @@ import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import Icon from 'Components/Icon';
 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 Popover from 'Components/Tooltip/Popover';
@@ -15,6 +14,7 @@ import EpisodeNumber from 'Episode/EpisodeNumber';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './SeriesHistoryRow.css';
@@ -77,7 +77,9 @@ class SeriesHistoryRow extends Component {
       fullSeries,
       series,
       episode,
-      customFormatScore
+      customFormatScore,
+      timeFormat,
+      shortDateFormat
     } = this.props;
 
     const {
@@ -129,9 +131,9 @@ class SeriesHistoryRow extends Component {
           {formatCustomFormatScore(customFormatScore, customFormats.length)}
         </TableRowCell>
 
-        <RelativeDateCellConnector
-          date={date}
-        />
+        <TableRowCell>
+          {formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+        </TableRowCell>
 
         <TableRowCell className={styles.actions}>
           <Popover
@@ -192,6 +194,8 @@ SeriesHistoryRow.propTypes = {
   series: PropTypes.object.isRequired,
   episode: PropTypes.object.isRequired,
   customFormatScore: PropTypes.number.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 

frontend/src/Series/History/SeriesHistoryRowConnector.js

@@ -3,16 +3,20 @@ import { createSelector } from 'reselect';
 import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
 import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import SeriesHistoryRow from './SeriesHistoryRow';
 
 function createMapStateToProps() {
   return createSelector(
     createSeriesSelector(),
     createEpisodeSelector(),
-    (series, episode) => {
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
       return {
         series,
-        episode
+        episode,
+        timeFormat: uiSettings.timeFormat,
+        shortDateFormat: uiSettings.shortDateFormat
       };
     }
   );