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 &&
- {year}
+
+ }
+ position={tooltipPositions.BOTTOM}
+ />
}
@@ -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 (
+
+ {
+ !!inCinemas &&
+
+
+
+
+ {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
+
+ }
+ {
+ !!physicalRelease &&
+
+
+
+
+ {getRelativeDate(physicalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
+
+ }
+
+ {
+ !!digitalRelease &&
+
+
+
+
+ {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { timeFormat, timeForToday: false })}
+
+ }
+
+ );
+}
+
+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
+
+ Year
+
+
+
+ Digital Release
+
+
+ );
+ }
+
if (name === 'runtime') {
return (
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,