From a2cad761b9aacbd49bcbaf4b3d2640a902ddfaf9 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Thu, 3 Oct 2019 21:42:22 -0400
Subject: [PATCH] Fixed: Status Cell Working

---
 frontend/src/Movie/MovieStatus.css |  7 ++-
 frontend/src/Movie/MovieStatus.js  | 71 ++++++++++++++++++++----------
 2 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/frontend/src/Movie/MovieStatus.css b/frontend/src/Movie/MovieStatus.css
index 848612649..3833887df 100644
--- a/frontend/src/Movie/MovieStatus.css
+++ b/frontend/src/Movie/MovieStatus.css
@@ -1,5 +1,4 @@
 .center {
-    display: flex;
-    justify-content: center;
-  }
-  
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+}
diff --git a/frontend/src/Movie/MovieStatus.js b/frontend/src/Movie/MovieStatus.js
index d28b79e09..046777078 100644
--- a/frontend/src/Movie/MovieStatus.js
+++ b/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>
   );
 }