diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css
index f24bcf9a6..74180e7e8 100644
--- a/frontend/src/Movie/Details/MovieDetails.css
+++ b/frontend/src/Movie/Details/MovieDetails.css
@@ -118,7 +118,6 @@
}
.links,
-.tags,
.rating,
.year,
.runtime {
@@ -209,10 +208,13 @@
.certification,
.links,
- .tags,
.rating,
.year,
.runtime {
- margin-right: 10px;
+ margin-right: 9px;
+ }
+
+ .details {
+ font-size: 19px;
}
}
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index 751a7e543..048e477a5 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -268,7 +268,8 @@ class MovieDetails extends Component {
nextMovie,
onMonitorTogglePress,
onRefreshPress,
- onSearchPress
+ onSearchPress,
+ movieRuntimeFormat
} = this.props;
const {
@@ -426,7 +427,7 @@ class MovieDetails extends Component {
{
!!runtime &&
- {formatRuntime(runtime)}
+ {formatRuntime(runtime, movieRuntimeFormat)}
}
@@ -465,7 +466,7 @@ class MovieDetails extends Component {
{
!!tags.length &&
-
+
state.app.isSidebarVisible,
- (titleSlug, movieFiles, movieCredits, extraFiles, allMovies, commands, dimensions, isSidebarVisible) => {
+ (state) => state.settings.ui.item.movieRuntimeFormat,
+ (titleSlug, movieFiles, movieCredits, extraFiles, allMovies, commands, dimensions, isSidebarVisible, movieRuntimeFormat) => {
const sortedMovies = _.orderBy(allMovies, 'sortTitle');
const movieIndex = _.findIndex(sortedMovies, { titleSlug });
const movie = sortedMovies[movieIndex];
@@ -160,7 +161,8 @@ function createMapStateToProps() {
previousMovie,
nextMovie,
isSmallScreen: dimensions.isSmallScreen,
- isSidebarVisible
+ isSidebarVisible,
+ movieRuntimeFormat
};
}
);
diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.js b/frontend/src/Movie/Index/Table/MovieIndexRow.js
index e5fae7080..b63ad5f4f 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexRow.js
+++ b/frontend/src/Movie/Index/Table/MovieIndexRow.js
@@ -97,7 +97,8 @@ class MovieIndexRow extends Component {
isSelected,
onRefreshMoviePress,
onSearchPress,
- onSelectedChange
+ onSelectedChange,
+ movieRuntimeFormat
} = this.props;
const {
@@ -253,7 +254,7 @@ class MovieIndexRow extends Component {
key={name}
className={styles[name]}
>
- {formatRuntime(runtime)}
+ {formatRuntime(runtime, movieRuntimeFormat)}
);
}
@@ -462,7 +463,8 @@ MovieIndexRow.propTypes = {
onSelectedChange: PropTypes.func.isRequired,
tmdbId: PropTypes.number.isRequired,
imdbId: PropTypes.string,
- youTubeTrailerId: PropTypes.string
+ youTubeTrailerId: PropTypes.string,
+ movieRuntimeFormat: PropTypes.string.isRequired
};
MovieIndexRow.defaultProps = {
diff --git a/frontend/src/Movie/Index/Table/MovieIndexTable.js b/frontend/src/Movie/Index/Table/MovieIndexTable.js
index a8b409bff..9c2f6542c 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexTable.js
+++ b/frontend/src/Movie/Index/Table/MovieIndexTable.js
@@ -49,7 +49,8 @@ class MovieIndexTable extends Component {
columns,
selectedState,
onSelectedChange,
- isMovieEditorActive
+ isMovieEditorActive,
+ movieRuntimeFormat
} = this.props;
const movie = items[rowIndex];
@@ -68,6 +69,7 @@ class MovieIndexTable extends Component {
isSelected={selectedState[movie.id]}
onSelectedChange={onSelectedChange}
isMovieEditorActive={isMovieEditorActive}
+ movieRuntimeFormat={movieRuntimeFormat}
/>
);
@@ -135,7 +137,8 @@ MovieIndexTable.propTypes = {
selectedState: PropTypes.object.isRequired,
onSelectedChange: PropTypes.func.isRequired,
onSelectAllChange: PropTypes.func.isRequired,
- isMovieEditorActive: PropTypes.bool.isRequired
+ isMovieEditorActive: PropTypes.bool.isRequired,
+ movieRuntimeFormat: PropTypes.string.isRequired
};
export default MovieIndexTable;
diff --git a/frontend/src/Movie/Index/Table/MovieIndexTableConnector.js b/frontend/src/Movie/Index/Table/MovieIndexTableConnector.js
index f13c4a8c8..1ba04366c 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexTableConnector.js
+++ b/frontend/src/Movie/Index/Table/MovieIndexTableConnector.js
@@ -8,11 +8,13 @@ function createMapStateToProps() {
(state) => state.app.dimensions,
(state) => state.movieIndex.tableOptions,
(state) => state.movieIndex.columns,
- (dimensions, tableOptions, columns) => {
+ (state) => state.settings.ui.item.movieRuntimeFormat,
+ (dimensions, tableOptions, columns, movieRuntimeFormat) => {
return {
isSmallScreen: dimensions.isSmallScreen,
showBanners: tableOptions.showBanners,
- columns
+ columns,
+ movieRuntimeFormat
};
}
);
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
index 5526213a1..024c3d924 100644
--- a/frontend/src/Settings/UI/UISettings.js
+++ b/frontend/src/Settings/UI/UISettings.js
@@ -43,6 +43,11 @@ export const timeFormatOptions = [
{ key: 'HH:mm', value: '17:00/17:30' }
];
+export const movieRuntimeFormatOptions = [
+ { key: 'hoursMinutes', value: '1h 15m' },
+ { key: 'minutes', value: '75 mins' }
+];
+
class UISettings extends Component {
//
@@ -111,9 +116,21 @@ class UISettings extends Component {
-