diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css index b99dec4f0..2fd52a728 100644 --- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css +++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css @@ -50,7 +50,7 @@ $hoverScale: 1.05; .title { @add-mixin truncate; - background-color: #fafbfc; + background-color: var(--movieBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.js b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.js index f50872584..d433a7d91 100644 --- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.js +++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.js @@ -92,6 +92,7 @@ class DiscoverMoviePoster extends Component { showRelativeDates, shortDateFormat, timeFormat, + movieRuntimeFormat, ...otherProps } = this.props; @@ -110,7 +111,7 @@ class DiscoverMoviePoster extends Component { return (
-
+
{
+
{title}
} @@ -194,6 +195,7 @@ class DiscoverMoviePoster extends Component { showRelativeDates={showRelativeDates} shortDateFormat={shortDateFormat} timeFormat={timeFormat} + movieRuntimeFormat={movieRuntimeFormat} {...otherProps} /> @@ -236,6 +238,7 @@ DiscoverMoviePoster.propTypes = { showRelativeDates: PropTypes.bool.isRequired, shortDateFormat: PropTypes.string.isRequired, timeFormat: PropTypes.string.isRequired, + movieRuntimeFormat: PropTypes.string.isRequired, isExisting: PropTypes.bool.isRequired, isExcluded: PropTypes.bool.isRequired, isSelected: PropTypes.bool, diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterConnector.js b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterConnector.js index 312468dd6..721981fcf 100644 --- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterConnector.js +++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterConnector.js @@ -5,9 +5,11 @@ import DiscoverMoviePoster from './DiscoverMoviePoster'; function createMapStateToProps() { return createSelector( + (state) => state.settings.ui.item.movieRuntimeFormat, createDimensionsSelector(), - ( dimensions) => { + (movieRuntimeFormat, dimensions) => { return { + movieRuntimeFormat, isSmallScreen: dimensions.isSmallScreen }; } diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css index aab27d827..ba79b97b8 100644 --- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css +++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css @@ -1,5 +1,5 @@ .info { - background-color: #fafbfc; + background-color: var(--movieBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js index 916301b19..43bfdfb9d 100644 --- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js +++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js @@ -1,9 +1,12 @@ import PropTypes from 'prop-types'; import React from 'react'; +import Icon from 'Components/Icon'; import TmdbRating from 'Components/TmdbRating'; +import { icons } from 'Helpers/Props'; import { getMovieStatusDetails } from 'Movie/MovieStatus'; import formatRuntime from 'Utilities/Date/formatRuntime'; import getRelativeDate from 'Utilities/Date/getRelativeDate'; +import translate from 'Utilities/String/translate'; import styles from './DiscoverMoviePosterInfo.css'; function DiscoverMoviePosterInfo(props) { @@ -19,12 +22,13 @@ function DiscoverMoviePosterInfo(props) { sortKey, showRelativeDates, shortDateFormat, - timeFormat + timeFormat, + movieRuntimeFormat } = props; if (sortKey === 'status' && status) { return ( -
+
{getMovieStatusDetails(status).title}
); @@ -32,7 +36,7 @@ function DiscoverMoviePosterInfo(props) { if (sortKey === 'studio' && studio) { return ( -
+
{studio}
); @@ -50,8 +54,8 @@ function DiscoverMoviePosterInfo(props) { ); return ( -
- {`In Cinemas ${inCinemasDate}`} +
+ {inCinemasDate}
); } @@ -68,8 +72,8 @@ function DiscoverMoviePosterInfo(props) { ); return ( -
- {`Digital ${digitalReleaseDate}`} +
+ {digitalReleaseDate}
); } @@ -86,15 +90,15 @@ function DiscoverMoviePosterInfo(props) { ); return ( -
- {`Released ${physicalReleaseDate}`} +
+ {physicalReleaseDate}
); } if (sortKey === 'certification' && certification) { return ( -
+
{certification}
); @@ -102,8 +106,8 @@ function DiscoverMoviePosterInfo(props) { if (sortKey === 'runtime' && runtime) { return ( -
- {formatRuntime(runtime)} +
+ {formatRuntime(runtime, movieRuntimeFormat)}
); } @@ -111,9 +115,7 @@ function DiscoverMoviePosterInfo(props) { if (sortKey === 'ratings' && ratings) { return (
- +
); } @@ -133,7 +135,8 @@ DiscoverMoviePosterInfo.propTypes = { sortKey: PropTypes.string.isRequired, showRelativeDates: PropTypes.bool.isRequired, shortDateFormat: PropTypes.string.isRequired, - timeFormat: PropTypes.string.isRequired + timeFormat: PropTypes.string.isRequired, + movieRuntimeFormat: PropTypes.string.isRequired }; export default DiscoverMoviePosterInfo; diff --git a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js index 47f914324..9eba81850 100644 --- a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js +++ b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js @@ -76,6 +76,7 @@ class DiscoverMovieRow extends Component { ratings, popularity, certification, + movieRuntimeFormat, collection, columns, isExisting, @@ -230,7 +231,7 @@ class DiscoverMovieRow extends Component { key={name} className={styles[name]} > - {formatRuntime(runtime)} + {formatRuntime(runtime, movieRuntimeFormat)} ); } @@ -397,6 +398,7 @@ DiscoverMovieRow.propTypes = { popularity: PropTypes.number.isRequired, certification: PropTypes.string, collection: PropTypes.object, + movieRuntimeFormat: PropTypes.string.isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired, isExisting: PropTypes.bool.isRequired, isExcluded: PropTypes.bool.isRequired, diff --git a/frontend/src/DiscoverMovie/Table/DiscoverMovieRowConnector.js b/frontend/src/DiscoverMovie/Table/DiscoverMovieRowConnector.js index 5d54eafc5..d799de22b 100644 --- a/frontend/src/DiscoverMovie/Table/DiscoverMovieRowConnector.js +++ b/frontend/src/DiscoverMovie/Table/DiscoverMovieRowConnector.js @@ -5,9 +5,11 @@ import DiscoverMovieRow from './DiscoverMovieRow'; function createMapStateToProps() { return createSelector( + (state) => state.settings.ui.item.movieRuntimeFormat, createDimensionsSelector(), - (dimensions) => { + (movieRuntimeFormat, dimensions) => { return { + movieRuntimeFormat, isSmallScreen: dimensions.isSmallScreen }; }