frontend/js/components/details/genres.js

@@ -1,15 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import { upperCaseFirst } from "../../utils";
+
 export const Genres = ({ genres = [] }) => {
   if (!genres || genres.length === 0) {
     return null;
   }
 
   // Uppercase first genres
-  const prettyGenres = genres
+  const prettyGenres = genres.map((w) => upperCaseFirst(w)).join(", ");
-    .map((word) => word[0].toUpperCase() + word.substr(1))
-    .join(", ");
 
   return (
     <span>

frontend/js/components/list/explorerOptions.js

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { withRouter } from "react-router-dom";
 import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";
 
+import { upperCaseFirst } from "../../utils";
+
 const ExplorerOptions = ({
   display,
   params,
@@ -45,7 +47,7 @@ const ExplorerOptions = ({
     return name
       .replace("_", " ")
       .split(" ")
-      .map((w) => w[0].toUpperCase() + w.substr(1))
+      .map((w) => upperCaseFirst(w))
       .join(" ");
   };
 

frontend/js/components/modules/modules.js

@@ -2,6 +2,8 @@ import React from "react";
 import Loader from "../loader/loader";
 import PropTypes from "prop-types";
 
+import { upperCaseFirst } from "../../utils";
+
 // TODO: udpate this
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
@@ -24,13 +26,11 @@ Modules.propTypes = {
 };
 export default Modules;
 
-const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
-
 const ModulesByVideoType = ({ type, modules }) => (
   <div className="col-12 col-md-6">
     <div className="card mb-3">
       <div className="card-header">
-        <h3>{`${capitalize(type)} modules`}</h3>
+        <h3>{`${upperCaseFirst(type)} modules`}</h3>
       </div>
       <div className="card-body">
         {Object.keys(modules).map((moduleType, i) => (
@@ -47,7 +47,7 @@ ModulesByVideoType.propTypes = {
 
 const ModuleByType = ({ type, modules }) => (
   <div>
-    <h4>{capitalize(type)}</h4>
+    <h4>{upperCaseFirst(type)}</h4>
     <table className="table">
       <tbody>
         {modules.map((module, type) => {

frontend/js/components/torrents/list/progress.js

@@ -1,13 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { prettySize } from "../../../utils";
+import { prettySize, upperCaseFirst } from "../../../utils";
 
 export const Progress = ({ torrent }) => {
-  var progressStyle = torrent.status.is_finished
+  const downloading = torrent.status.state === "downloading";
-    ? "success"
+  let progressBarClass = torrent.status.is_finished
-    : "info progress-bar-striped progress-bar-animated";
+    ? "progress-bar bg-success"
-  const progressBarClass = "progress-bar bg-" + progressStyle;
+    : "progress-bar bg-info";
+  if (torrent.status.state === "downloading") {
+    progressBarClass += " progress-bar-striped progress-bar-animated";
+  }
 
   var percentDone = torrent.status.percent_done;
   const started = percentDone !== 0;
@@ -31,14 +34,14 @@ export const Progress = ({ torrent }) => {
           aria-valuemax="100"
         ></div>
       </div>
-      {started && (
+      {downloading && (
         <p>
           {downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
         </p>
       )}
-      {!started && (
+      {!downloading && (
-        <p>
+        <p className="text-muted">
-          <small>Not yet started</small>
+          <small>{upperCaseFirst(torrent.status.state)}</small>
         </p>
       )}
     </div>

frontend/js/utils.js

@@ -55,3 +55,6 @@ export const formatTorrents = (input) => {
 
   return torrentMap;
 };
+
+export const upperCaseFirst = (string) =>
+  string.charAt(0).toUpperCase() + string.slice(1);