Fixed: Status Cell Working

frontend/src/Movie/MovieStatus.css

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

frontend/src/Movie/MovieStatus.js

@@ -5,9 +5,28 @@ 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 formatBytes from 'Utilities/Number/formatBytes';
+import Label from 'Components/Label';
 import styles from './MovieStatus.css';
 
+function getTooltip(title, quality, size) {
+  const revision = quality.revision;
+
+  if (revision.real && revision.real > 0) {
+    title += ' [REAL]';
+  }
+
+  if (revision.version && revision.version > 1) {
+    title += ' [PROPER]';
+  }
+
+  if (size) {
+    title += ` - ${formatBytes(size)}`;
+  }
+
+  return title;
+}
+
 function MovieStatus(props) {
   const {
     inCinemas,
@@ -19,7 +38,7 @@ function MovieStatus(props) {
 
   const hasMovieFile = !!movieFile;
   const isQueued = !!queueItem;
-  const hasAired = isBefore(inCinemas);
+  const hasReleased = isBefore(inCinemas);
 
   if (isQueued) {
     const {
@@ -59,16 +78,17 @@ function MovieStatus(props) {
 
   if (hasMovieFile) {
     const quality = movieFile.quality;
-    const isCutoffNotMet = movieFile.qualityCutoffNotMet;
+    // TODO: Fix on Backend
+    // const isCutoffNotMet = movieFile.qualityCutoffNotMet;
 
     return (
       <div className={styles.center}>
-        <MovieQuality
-          quality={quality}
-          size={movieFile.size}
-          isCutoffNotMet={isCutoffNotMet}
-          title="Movie Downloaded"
-        />
+        <Label
+          kind={kinds.SUCCESS}
+          title={getTooltip('Movie Downloaded', quality, movieFile.size)}
+        >
+          {quality.quality.name}
+        </Label>
       </div>
     );
   }
@@ -87,32 +107,37 @@ function MovieStatus(props) {
   if (!monitored) {
     return (
       <div className={styles.center}>
-        <Icon
-          name={icons.UNMONITORED}
-          kind={kinds.DISABLED}
-          title="Movie is not monitored"
-        />
+        <Label
+          title="Announced"
+          kind={kinds.WARNING}
+        >
+          Not Monitored
+        </Label>
       </div>
     );
   }
 
-  if (hasAired) {
+  if (hasReleased) {
     return (
       <div className={styles.center}>
-        <Icon
-          name={icons.MISSING}
-          title="Movie missing from disk"
-        />
+        <Label
+          title="Movie Available, but Missing"
+          kind={kinds.DANGER}
+        >
+          Missing
+        </Label>
       </div>
     );
   }
 
   return (
     <div className={styles.center}>
-      <Icon
-        name={icons.NOT_AIRED}
-        title="Movie has not aired"
-      />
+      <Label
+        title="Announced"
+        kind={kinds.INFO}
+      >
+        Not Available
+      </Label>
     </div>
   );
 }