Cleanup the html head

* Create a separate file for css
* Clean the css from unused styles

frontend/js/components/details/downloadProgress.js

@@ -1,77 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-import { useHistory } from "react-router-dom";
-
-export const DownloadProgress = ({ imdbId, season, episode }) => {
-  let history = useHistory();
-  const torrentGroup = useSelector((state) =>
-    state.torrents.torrents.get(imdbId)
-  );
-  if (!torrentGroup || torrentGroup.length === 0) {
-    return null;
-  }
-
-  let torrent;
-  const type = torrentGroup[0].type;
-  switch (type) {
-    case "movie":
-      torrent = torrentGroup[0];
-      break;
-    case "episode": {
-      if (!season || !episode) {
-        return null;
-      }
-
-      const torrents = torrentGroup.filter(
-        (torrent) => torrent.episode === episode && torrent.season === season
-      );
-      if (torrents.length !== 1) {
-        return null;
-      }
-      torrent = torrents[0];
-
-      break;
-    }
-    default:
-      return null;
-  }
-
-  if (!torrent || !torrent.status) {
-    return null;
-  }
-
-  const progress = Number(torrent.status.percent_done).toFixed(1);
-  if (progress === 0) {
-    return null;
-  }
-
-  const handleClick = () => {
-    history.push("/torrents/list");
-  };
-
-  return (
-    <div className="w-100 mt-n2 clickable" onClick={handleClick}>
-      <small className="text text-muted">Downloading...</small>
-      <div
-        className="progress"
-        style={{
-          height: "0.2rem",
-        }}
-      >
-        <div
-          className="progress-bar bg-warning"
-          style={{
-            width: `${progress}%`,
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-DownloadProgress.propTypes = {
-  imdbId: PropTypes.string.isRequired,
-  season: PropTypes.number,
-  episode: PropTypes.number,
-};

frontend/js/components/list/details.js

@@ -12,7 +12,6 @@ import { Rating } from "../details/rating";
 import { ReleaseDate } from "../details/releaseDate";
 import { Runtime } from "../details/runtime";
 import { Title } from "../details/title";
-import { DownloadProgress } from "../details/downloadProgress";
 
 const ListDetails = (props) => {
   if (!props.data || Object.keys(props.data).length === 0) {
@@ -42,7 +41,6 @@ const ListDetails = (props) => {
           subtitles={props.data.subtitles}
         />
       </div>
-      <DownloadProgress imdbId={props.data.imdb_id} />
       <TrackingLabel
         wishlisted={props.data.wishlisted}
         inLibrary={props.data.polochon_url !== ""}

frontend/js/components/movies/details.js

@@ -20,7 +20,6 @@ import { PolochonMetadata } from "../details/polochon";
 import { TrackingLabel } from "../details/tracking";
 import { Genres } from "../details/genres";
 import { Runtime } from "../details/runtime";
-import { DownloadProgress } from "../details/downloadProgress";
 
 import { DownloadAndStream } from "../buttons/download";
 import { ImdbBadge } from "../buttons/imdb";
@@ -123,9 +122,6 @@ export const Header = () => {
                 subtitles={subtitles}
               />
             </div>
-            <div className="card-text mt-2">
-              <DownloadProgress imdbId={imdbId} />
-            </div>
             <p className="card-text">
               <TrackingLabel inLibrary={inLibrary} wishlisted={wishlisted} />
             </p>

frontend/js/components/shows/details/episode.js

@@ -11,7 +11,6 @@ import { PolochonMetadata } from "../../details/polochon";
 import { ReleaseDate } from "../../details/releaseDate";
 import { Runtime } from "../../details/runtime";
 import { Title } from "../../details/title";
-import { DownloadProgress } from "../../details/downloadProgress";
 
 import { DownloadAndStream } from "../../buttons/download";
 import { ShowMore } from "../../buttons/showMore";
@@ -63,7 +62,6 @@ export const Episode = ({ season, episode }) => {
         />
         <ReleaseDate date={data.aired} />
         <Runtime runtime={data.runtime} />
-        <DownloadProgress imdbId={imdbId} season={season} episode={episode} />
         <Plot plot={data.plot} />
         <DownloadAndStream
           name={prettyEpisodeName(showTitle, season, episode)}

frontend/webpack.config.js

@@ -113,6 +113,9 @@ const config = {
     new MiniCssExtractPlugin({
       filename: "[contenthash].css",
     }),
+    new PurgeCSSPlugin({
+      paths: () => glob.sync(`${SRC_DIR}/**/*`, { nodir: true }),
+    }),
     new WorkboxPlugin.GenerateSW(),
   ],
   resolve: {
@@ -121,12 +124,4 @@ const config = {
   devtool: mode === "production" ? false : "source-map",
 };
 
-if (mode === "production") {
-  config.plugins.push(
-    new PurgeCSSPlugin({
-      paths: () => glob.sync(`${SRC_DIR}/**/*`, { nodir: true }),
-    })
-  );
-}
-
 module.exports = config;