Add a pretty name to the listed torrents

frontend/js/components/torrents/list.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 
-import { prettySize } from "../../utils";
+import { prettySize, prettyEpisodeName } from "../../utils";
 import { addTorrent, removeTorrent } from "../../actions/torrents";
 
 export const TorrentList = () => {
@@ -81,6 +81,23 @@ const Torrent = ({ torrent }) => {
     percentDone = Number(percentDone).toFixed(1) + "%";
   }
 
+  const torrentTitle = (torrent) => {
+    switch (torrent.type) {
+      case "movie":
+        return torrent.video ? torrent.video.title : torrent.status.name;
+      case "episode":
+        return torrent.video
+          ? prettyEpisodeName(
+              torrent.video.show_title,
+              torrent.video.season,
+              torrent.video.episode
+            )
+          : torrent.status.name;
+      default:
+        return torrent.status.name;
+    }
+  };
+
   // Pretty sizes
   const downloadedSize = prettySize(torrent.status.downloaded_size);
   const totalSize = prettySize(torrent.status.total_size);
@@ -88,7 +105,7 @@ const Torrent = ({ torrent }) => {
   return (
     <div className="card w-100 mb-3">
       <h5 className="card-header">
-        <span className="text text-break">{torrent.status.name}</span>
+        <span className="text text-break">{torrentTitle(torrent)}</span>
         <span
           className="fa fa-trash clickable pull-right"
           onClick={() => dispatch(removeTorrent(torrent.status.id))}