diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js index 3a895e1d3e..a7435192f2 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 31ae81c498..a3b9e6b054 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 0000000000..8630f4d450 --- /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 0000000000..1435ddbf8a --- /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 0000000000..efd6b29f78 --- /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 d7fb6e039d..e87519cfdf 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,