New: Add runtime format option in Settings > UI so users can choose between a mins view and h/m view

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)}
                 </VirtualTableRowCell>
               );
             }
@@ -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 = {

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}
         />
       </VirtualTableRow>
     );
@@ -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;

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
       };
     }
   );