New: First Pass Movie Index Status Cell

frontend/src/Movie/Index/Table/MovieIndexHeader.css

@@ -31,6 +31,7 @@
   flex: 0 0 180px;
 }
 
+.movieStatus,
 .certification {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -31,6 +31,7 @@
   flex: 0 0 180px;
 }
 
+.movieStatus,
 .certification {
   composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 

frontend/src/Movie/Index/Table/MovieIndexRow.js

@@ -15,6 +15,7 @@ import MovieTitleLink from 'Movie/MovieTitleLink';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieStatusCell from './MovieStatusCell';
+import MovieStatusConnector from 'Movie/MovieStatusConnector';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import styles from './MovieIndexRow.css';
 
@@ -226,6 +227,19 @@ class MovieIndexRow extends Component {
               );
             }
 
+            if (name === 'movieStatus') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <MovieStatusConnector
+                    movieId={id}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'ratings') {
               return (
                 <VirtualTableRowCell

frontend/src/Movie/MovieStatus.css

@@ -0,0 +1,5 @@
+.center {
+    display: flex;
+    justify-content: center;
+  }
+  

frontend/src/Movie/MovieStatus.js

@@ -0,0 +1,128 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import isBefore from 'Utilities/Date/isBefore';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import ProgressBar from 'Components/ProgressBar';
+import QueueDetails from 'Activity/Queue/QueueDetails';
+import MovieQuality from './MovieQuality';
+import styles from './MovieStatus.css';
+
+function MovieStatus(props) {
+  const {
+    inCinemas,
+    monitored,
+    grabbed,
+    queueItem,
+    movieFile
+  } = props;
+
+  const hasMovieFile = !!movieFile;
+  const isQueued = !!queueItem;
+  const hasAired = isBefore(inCinemas);
+
+  if (isQueued) {
+    const {
+      sizeleft,
+      size
+    } = queueItem;
+
+    const progress = (100 - sizeleft / size * 100);
+
+    return (
+      <div className={styles.center}>
+        <QueueDetails
+          {...queueItem}
+          progressBar={
+            <ProgressBar
+              title={`Movie is downloading - ${progress.toFixed(1)}% ${queueItem.title}`}
+              progress={progress}
+              kind={kinds.PURPLE}
+              size={sizes.MEDIUM}
+            />
+          }
+        />
+      </div>
+    );
+  }
+
+  if (grabbed) {
+    return (
+      <div className={styles.center}>
+        <Icon
+          name={icons.DOWNLOADING}
+          title="Movie is downloading"
+        />
+      </div>
+    );
+  }
+
+  if (hasMovieFile) {
+    const quality = movieFile.quality;
+    const isCutoffNotMet = movieFile.qualityCutoffNotMet;
+
+    return (
+      <div className={styles.center}>
+        <MovieQuality
+          quality={quality}
+          size={movieFile.size}
+          isCutoffNotMet={isCutoffNotMet}
+          title="Movie Downloaded"
+        />
+      </div>
+    );
+  }
+
+  if (!inCinemas) {
+    return (
+      <div className={styles.center}>
+        <Icon
+          name={icons.TBA}
+          title="TBA"
+        />
+      </div>
+    );
+  }
+
+  if (!monitored) {
+    return (
+      <div className={styles.center}>
+        <Icon
+          name={icons.UNMONITORED}
+          kind={kinds.DISABLED}
+          title="Movie is not monitored"
+        />
+      </div>
+    );
+  }
+
+  if (hasAired) {
+    return (
+      <div className={styles.center}>
+        <Icon
+          name={icons.MISSING}
+          title="Movie missing from disk"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.center}>
+      <Icon
+        name={icons.NOT_AIRED}
+        title="Movie has not aired"
+      />
+    </div>
+  );
+}
+
+MovieStatus.propTypes = {
+  inCinemas: PropTypes.string,
+  monitored: PropTypes.bool.isRequired,
+  grabbed: PropTypes.bool,
+  queueItem: PropTypes.object,
+  movieFile: PropTypes.object
+};
+
+export default MovieStatus;

frontend/src/Movie/MovieStatusConnector.js

@@ -0,0 +1,50 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector';
+import MovieStatus from './MovieStatus';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createQueueItemSelector(),
+    (movie, queueItem) => {
+      const result = _.pick(movie, [
+        'inCinemas',
+        'monitored',
+        'grabbed'
+      ]);
+
+      result.queueItem = queueItem;
+      result.movieFile = movie.movieFile;
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+};
+
+class MovieStatusConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MovieStatus
+        {...this.props}
+      />
+    );
+  }
+}
+
+MovieStatusConnector.propTypes = {
+  movieId: PropTypes.number.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MovieStatusConnector);

frontend/src/Store/Actions/movieIndexActions.js

@@ -120,6 +120,12 @@ export const defaultState = {
       isSortable: false,
       isVisible: false
     },
+    {
+      name: 'movieStatus',
+      label: 'Status',
+      isSortable: true,
+      isVisible: true
+    },
     {
       name: 'ratings',
       label: 'Rating',