From 3a50152b214246e9649b256121b13b1915bffa3b Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Tue, 7 Jul 2020 09:27:14 -0400
Subject: [PATCH] New: Digital Release Dates in UI

---
 frontend/src/Helpers/Props/icons.js           |  2 +
 frontend/src/Movie/Details/MovieDetails.js    | 21 +++++-
 .../src/Movie/Details/MovieReleaseDates.css   |  3 +
 .../src/Movie/Details/MovieReleaseDates.js    | 68 +++++++++++++++++++
 .../Details/MovieReleaseDatesConnector.js     | 21 ++++++
 .../Movie/Index/Menus/MovieIndexSortMenu.js   | 18 +++++
 .../Movie/Index/Table/MovieIndexHeader.css    |  1 +
 .../src/Movie/Index/Table/MovieIndexRow.css   |  1 +
 .../src/Movie/Index/Table/MovieIndexRow.js    | 13 ++++
 frontend/src/Store/Actions/movieActions.js    |  4 ++
 .../src/Store/Actions/movieIndexActions.js    | 12 ++++
 src/Radarr.Api.V3/Movies/MovieResource.cs     |  4 ++
 12 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/Movie/Details/MovieReleaseDates.css
 create mode 100644 frontend/src/Movie/Details/MovieReleaseDates.js
 create mode 100644 frontend/src/Movie/Details/MovieReleaseDatesConnector.js

diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js
index 3a895e1d3..a7435192f 100644
--- a/frontend/src/Helpers/Props/icons.js
+++ b/frontend/src/Helpers/Props/icons.js
@@ -45,6 +45,7 @@ import {
   faCloud as fasCloud,
   faCog as fasCog,
   faCogs as fasCogs,
+  faCompactDisc as fasCompactDisc,
   faCopy as fasCopy,
   faDesktop as fasDesktop,
   faDownload as fasDownload,
@@ -133,6 +134,7 @@ export const COLLAPSE = fasChevronCircleUp;
 export const COMPUTER = fasDesktop;
 export const DANGER = fasExclamationCircle;
 export const DELETE = fasTrashAlt;
+export const DISC = fasCompactDisc;
 export const DOWNLOAD = fasDownload;
 export const DOWNLOADED = fasDownload;
 export const DOWNLOADING = fasCloudDownloadAlt;
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index 31ae81c49..a3b9e6b05 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -40,6 +40,7 @@ import MovieDetailsLinks from './MovieDetailsLinks';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import MovieTagsConnector from './MovieTagsConnector';
+import MovieReleaseDatesConnector from './MovieReleaseDatesConnector';
 import styles from './MovieDetails.css';
 
 const defaultFontSize = parseInt(fonts.defaultFontSize);
@@ -232,6 +233,9 @@ class MovieDetails extends Component {
       imdbId,
       title,
       year,
+      inCinemas,
+      physicalRelease,
+      digitalRelease,
       runtime,
       certification,
       ratings,
@@ -398,7 +402,20 @@ class MovieDetails extends Component {
                     {
                       year > 0 &&
                         <span className={styles.year}>
-                          {year}
+                          <Popover
+                            anchor={
+                              year
+                            }
+                            title="Release Dates"
+                            body={
+                              <MovieReleaseDatesConnector
+                                inCinemas={inCinemas}
+                                physicalRelease={physicalRelease}
+                                digitalRelease={digitalRelease}
+                              />
+                            }
+                            position={tooltipPositions.BOTTOM}
+                          />
                         </span>
                     }
 
@@ -724,6 +741,8 @@ MovieDetails.propTypes = {
   youTubeTrailerId: PropTypes.string,
   isAvailable: PropTypes.bool.isRequired,
   inCinemas: PropTypes.string,
+  physicalRelease: PropTypes.string,
+  digitalRelease: PropTypes.string,
   overview: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired,
diff --git a/frontend/src/Movie/Details/MovieReleaseDates.css b/frontend/src/Movie/Details/MovieReleaseDates.css
new file mode 100644
index 000000000..8630f4d45
--- /dev/null
+++ b/frontend/src/Movie/Details/MovieReleaseDates.css
@@ -0,0 +1,3 @@
+.dateIcon {
+  padding-right: 15px;
+}
diff --git a/frontend/src/Movie/Details/MovieReleaseDates.js b/frontend/src/Movie/Details/MovieReleaseDates.js
new file mode 100644
index 000000000..1435ddbf8
--- /dev/null
+++ b/frontend/src/Movie/Details/MovieReleaseDates.js
@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import styles from './MovieReleaseDates.css';
+
+function MovieReleaseDates(props) {
+  const {
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat,
+    inCinemas,
+    physicalRelease,
+    digitalRelease
+  } = props;
+
+  return (
+    <div>
+      {
+        !!inCinemas &&
+          <div >
+            <span className={styles.dateIcon}>
+              <Icon
+                name={icons.IN_CINEMAS}
+              />
+            </span>
+            {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
+          </div>
+      }
+      {
+        !!physicalRelease &&
+          <div >
+            <span className={styles.dateIcon}>
+              <Icon
+                name={icons.DISC}
+              />
+            </span>
+            {getRelativeDate(physicalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
+          </div>
+      }
+
+      {
+        !!digitalRelease &&
+          <div >
+            <span className={styles.dateIcon}>
+              <Icon
+                name={icons.MOVIE_FILE}
+              />
+            </span>
+            {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
+          </div>
+      }
+    </div>
+  );
+}
+
+MovieReleaseDates.propTypes = {
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  inCinemas: PropTypes.string,
+  physicalRelease: PropTypes.string,
+  digitalRelease: PropTypes.string
+};
+
+export default MovieReleaseDates;
diff --git a/frontend/src/Movie/Details/MovieReleaseDatesConnector.js b/frontend/src/Movie/Details/MovieReleaseDatesConnector.js
new file mode 100644
index 000000000..efd6b29f7
--- /dev/null
+++ b/frontend/src/Movie/Details/MovieReleaseDatesConnector.js
@@ -0,0 +1,21 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import MovieReleaseDates from './MovieReleaseDates';
+
+function createMapStateToProps() {
+  return createSelector(
+    createUISettingsSelector(),
+    (uiSettings) => {
+      return _.pick(uiSettings, [
+        'showRelativeDates',
+        'shortDateFormat',
+        'longDateFormat',
+        'timeFormat'
+      ]);
+    }
+  );
+}
+
+export default connect(createMapStateToProps, null)(MovieReleaseDates);
diff --git a/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.js b/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.js
index d7fb6e039..e87519cfd 100644
--- a/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.js
+++ b/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.js
@@ -64,6 +64,15 @@ function MovieIndexSortMenu(props) {
           Added
         </SortMenuItem>
 
+        <SortMenuItem
+          name="year"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Year
+        </SortMenuItem>
+
         <SortMenuItem
           name="inCinemas"
           sortKey={sortKey}
@@ -82,6 +91,15 @@ function MovieIndexSortMenu(props) {
           Physical Release
         </SortMenuItem>
 
+        <SortMenuItem
+          name="digitalRelease"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Digital Release
+        </SortMenuItem>
+
         <SortMenuItem
           name="path"
           sortKey={sortKey}
diff --git a/frontend/src/Movie/Index/Table/MovieIndexHeader.css b/frontend/src/Movie/Index/Table/MovieIndexHeader.css
index 86d3bb501..66bd4a84c 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexHeader.css
+++ b/frontend/src/Movie/Index/Table/MovieIndexHeader.css
@@ -32,6 +32,7 @@
 .added,
 .inCinemas,
 .physicalRelease,
+.digitalRelease,
 .runtime,
 .genres {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.css b/frontend/src/Movie/Index/Table/MovieIndexRow.css
index 089facc74..031bf72c4 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexRow.css
+++ b/frontend/src/Movie/Index/Table/MovieIndexRow.css
@@ -39,6 +39,7 @@
 .added,
 .inCinemas,
 .physicalRelease,
+.digitalRelease,
 .runtime,
 .genres {
   composes: cell;
diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.js b/frontend/src/Movie/Index/Table/MovieIndexRow.js
index 9ee94eddc..fee29b285 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexRow.js
+++ b/frontend/src/Movie/Index/Table/MovieIndexRow.js
@@ -72,6 +72,7 @@ class MovieIndexRow extends Component {
       year,
       inCinemas,
       physicalRelease,
+      digitalRelease,
       runtime,
       minimumAvailability,
       path,
@@ -225,6 +226,17 @@ class MovieIndexRow extends Component {
               );
             }
 
+            if (name === 'digitalRelease') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={digitalRelease}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
             if (name === 'runtime') {
               return (
                 <VirtualTableRowCell
@@ -401,6 +413,7 @@ MovieIndexRow.propTypes = {
   year: PropTypes.number,
   inCinemas: PropTypes.string,
   physicalRelease: PropTypes.string,
+  digitalRelease: PropTypes.string,
   runtime: PropTypes.number,
   minimumAvailability: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
diff --git a/frontend/src/Store/Actions/movieActions.js b/frontend/src/Store/Actions/movieActions.js
index e5ea178db..2ce453c57 100644
--- a/frontend/src/Store/Actions/movieActions.js
+++ b/frontend/src/Store/Actions/movieActions.js
@@ -126,6 +126,10 @@ export const filterPredicates = {
     return dateFilterPredicate(item.physicalRelease, filterValue, type);
   },
 
+  digitalRelease: function(item, filterValue, type) {
+    return dateFilterPredicate(item.digitalRelease, filterValue, type);
+  },
+
   ratings: function(item, filterValue, type) {
     const predicate = filterTypePredicates[type];
 
diff --git a/frontend/src/Store/Actions/movieIndexActions.js b/frontend/src/Store/Actions/movieIndexActions.js
index 2a0a4f305..a9f235481 100644
--- a/frontend/src/Store/Actions/movieIndexActions.js
+++ b/frontend/src/Store/Actions/movieIndexActions.js
@@ -119,6 +119,12 @@ export const defaultState = {
       isSortable: true,
       isVisible: false
     },
+    {
+      name: 'digitalRelease',
+      label: 'Digital Release',
+      isSortable: true,
+      isVisible: false
+    },
     {
       name: 'runtime',
       label: 'Runtime',
@@ -293,6 +299,12 @@ export const defaultState = {
       type: filterBuilderTypes.DATE,
       valueType: filterBuilderValueTypes.DATE
     },
+    {
+      name: 'digitalRelease',
+      label: 'Digital Release',
+      type: filterBuilderTypes.DATE,
+      valueType: filterBuilderValueTypes.DATE
+    },
     {
       name: 'runtime',
       label: 'Runtime',
diff --git a/src/Radarr.Api.V3/Movies/MovieResource.cs b/src/Radarr.Api.V3/Movies/MovieResource.cs
index dcb7f750f..78abee3d9 100644
--- a/src/Radarr.Api.V3/Movies/MovieResource.cs
+++ b/src/Radarr.Api.V3/Movies/MovieResource.cs
@@ -35,6 +35,7 @@ public MovieResource()
         public string Overview { get; set; }
         public DateTime? InCinemas { get; set; }
         public DateTime? PhysicalRelease { get; set; }
+        public DateTime? DigitalRelease { get; set; }
         public string PhysicalReleaseNote { get; set; }
         public List<MediaCover> Images { get; set; }
         public string Website { get; set; }
@@ -94,6 +95,7 @@ public static MovieResource ToResource(this Movie model)
                 SortTitle = model.SortTitle,
                 InCinemas = model.InCinemas,
                 PhysicalRelease = model.PhysicalRelease,
+                DigitalRelease = model.DigitalRelease,
                 HasFile = model.HasFile,
 
                 SizeOnDisk = size,
@@ -156,6 +158,7 @@ public static MovieResource ToResource(this Movie model, MovieTranslation movieT
                 SortTitle = translatedTitle.NormalizeTitle(),
                 InCinemas = model.InCinemas,
                 PhysicalRelease = model.PhysicalRelease,
+                DigitalRelease = model.DigitalRelease,
                 HasFile = model.HasFile,
 
                 SizeOnDisk = size,
@@ -217,6 +220,7 @@ public static MovieResource ToResource(this Movie model, IUpgradableSpecificatio
                 SortTitle = translatedTitle.NormalizeTitle(),
                 InCinemas = model.InCinemas,
                 PhysicalRelease = model.PhysicalRelease,
+                DigitalRelease = model.DigitalRelease,
                 HasFile = model.HasFile,
 
                 SizeOnDisk = size,