canary

main/controllers/description.ts

@@ -2,7 +2,6 @@ import { Request, Response } from "express";
 import { parse } from "parse-torrent-title";
 import { isMovieOrShow } from "../utils/isMovieOrShow";
 import { Description } from "../helpers/Description";
-import { sampleDescriptions } from "../../sample/descriptions";
 
 const tvdb = new Description();
 
@@ -12,13 +11,12 @@ export async function description(
 ) {
   const { name } = req.query;
 
-  const sample = sampleDescriptions.filter(
-    (sample) => sample.title.toLowerCase() === name.toLowerCase()
-  );
-  if (sample.length) return res.json(sample[0]);
-
   const info = parse(name);
-  const response = isMovieOrShow(name) ? await tvdb.find(info) : null;
+  try {
+    const response = isMovieOrShow(name) ? await tvdb.find(info) : null;
 
-  res.json(response);
+    res.json(response);
+  } catch (e) {
+    res.json(null);
+  }
 }

package.json

@@ -30,34 +30,35 @@
     "internal-ip": "^6.0.0",
     "mime": "^2.4.5",
     "range-parser": "^1.2.1",
+    "sweetalert2": "^9.17.1",
     "universal-analytics": "^0.4.23",
-    "uuid": "^8.2.0",
+    "uuid": "^8.3.0",
     "vlc-command": "^1.2.0",
     "webtorrent": "0.108.6"
   },
   "devDependencies": {
-    "@mdi/js": "^5.2.45",
+    "@mdi/js": "^5.4.55",
     "@mdi/react": "^1.3.0",
     "@types/express": "^4.17.7",
-    "@types/lodash": "^4.14.157",
-    "@types/node": "^14.0.23",
+    "@types/lodash": "^4.14.158",
+    "@types/node": "^14.0.27",
     "@types/react": "^16.9.43",
     "@types/react-table": "^7.0.19",
     "@types/webtorrent": "^0.107.1",
     "babel-loader": "^8.1.0",
     "buffer": "^5.6.0",
     "classnames": "^2.2.6",
     "dotenv": "^8.2.0",
-    "electron": "^9.0.5",
-    "electron-builder": "^22.6.1",
+    "electron": "^9.1.2",
+    "electron-builder": "^22.8.0",
     "electron-notarize": "^1.0.0",
-    "electron-updater": "^4.3.1",
+    "electron-updater": "^4.3.4",
     "husky": "^4.2.3",
     "imagemin-lint-staged": "^0.4.0",
     "lint-staged": "^10.2.11",
     "lodash": "^4.17.19",
     "mitt": "^2.1.0",
-    "next": "9.4.4",
+    "next": "9.5.1",
     "nextron": "^5.15.0",
     "opensubtitles-api": "^5.1.2",
     "parse-torrent-title": "^1.3.0",
@@ -71,13 +72,13 @@
     "react-dom": "16.13.1",
     "react-dropzone": "^11.0.2",
     "react-spring": "^8.0.27",
-    "react-table": "^7.3.0",
+    "react-table": "^7.3.3",
     "react-tiny-popover": "^5.1.0",
     "sass": "^1.26.10",
     "simplebar-react": "^2.2.1",
     "srt-webvtt": "^1.0.1",
     "typescript": "3.9.7",
-    "webpack": "^4.43.0"
+    "webpack": "^4.44.1"
   },
   "husky": {
     "hooks": {

renderer/components/Cast/Cast.tsx

@@ -21,7 +21,7 @@ export interface CastDevice {
   host: string;
 }
 
-export const Cast: React.FC<IProps> = () => {
+export const Cast: React.FC<IProps> = React.memo(() => {
   const [devices, setDevices] = useState<CastDevice[]>(null);
   const [show, setShow] = useState(false);
   const { setSelectedCast, selectedCast } = useContext(SelectedCastContext);
@@ -79,7 +79,7 @@ export const Cast: React.FC<IProps> = () => {
         )}
       >
         {(ref) => (
-          <button ref={ref} onClick={fetchAndOpen} title="Cast">
+          <button ref={ref} onClick={fetchAndOpen} title="Cast / DLNA">
             <Icon
               path={selectedCast ? mdiCastConnected : mdiCast}
               size={0.72}
@@ -90,4 +90,4 @@ export const Cast: React.FC<IProps> = () => {
       </Popover>
     </>
   );
-};
+});

renderer/components/Container/Container.module.scss

@@ -0,0 +1,25 @@
+.pane {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.noDownload {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  text-align: center;
+  line-height: 22px;
+
+  & > div {
+    background-color: #17171730;
+    padding: 20px;
+    border-radius: 5px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

renderer/components/Container/Container.tsx

@@ -1,6 +1,6 @@
 import { Header } from "../Header";
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import styles from "./Container.module.css";
+import styles from "./Container.module.scss";
 import { Download, Downloads } from "@components/Downloads";
 import { DragAndDrop } from "@components/DragAndDrop";
 import { TorrentDetails } from "@components/TorrentDetails";
@@ -15,22 +15,25 @@ import { parseFileInfo } from "@utils/parseFileInfo";
 import fs from "fs";
 import MagnetUri from "magnet-uri";
 import ParseTorrent from "parse-torrent";
+import Icon from "@mdi/react";
+import { mdiFilePlus } from "@mdi/js";
+import { Empty } from "@components/Empty";
 
 const { searchParams } = new URL(window.location.href);
 
 const path = searchParams.get("path") && decodeURI(searchParams.get("path"));
 const magnetUri =
   searchParams.get("magnet") && decodeURI(searchParams.get("magnet"));
 
-export default function () {
+export default React.memo(function Container() {
   const [selectedTorrent, setSelectedTorrent] = useState<DownloadingTorrent>(
     null
   );
   const [downloads, setDownloads] = useState<Download[]>(
     store.get("torrents") as Download[]
   );
 
-  const [color, setColor] = useState(store.get("color"));
+  const [color, setColor] = useState(store.get("color") as string);
   const { selectedCast } = useContext(SelectedCastContext);
 
   useEffect(() => {
@@ -128,6 +131,7 @@ export default function () {
 
   const onTorrentDelete = useCallback(
     (infoHash) => {
+      // @ts-ignore
       store.delete(`descriptions.${infoHash}`);
 
       setDownloads((_downloads) =>
@@ -155,19 +159,25 @@ export default function () {
         You are connected to {selectedCast?.name}
       </Message>
       <DragAndDrop onFileSelect={onFileSelect}>
-        <Downloads
-          onTorrentDelete={onTorrentDelete}
-          downloads={downloads}
-          onTorrentSelect={setSelectedTorrent}
-        />
-
-        <TorrentDetails
-          infoHash={selectedTorrent?.infoHash}
-          name={selectedTorrent?.name}
-        />
+        {!downloads?.length ? (
+          <Empty onFileSelect={onFileSelect} />
+        ) : (
+          <>
+            <Downloads
+              onTorrentDelete={onTorrentDelete}
+              downloads={downloads}
+              onTorrentSelect={setSelectedTorrent}
+            />
+
+            <TorrentDetails
+              infoHash={selectedTorrent?.infoHash}
+              name={selectedTorrent?.name}
+            />
+          </>
+        )}
       </DragAndDrop>
 
       <Toast />
     </div>
   );
-}
+});

renderer/components/DropUI/DropUI.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from "react";
 import Icon from "@mdi/react";
-import { mdiFileDownload } from "@mdi/js";
+import { mdiFilePlus } from "@mdi/js";
 import styles from "./DropUI.module.scss";
 import cn from "classnames";
 import { useTransition, animated, config } from "react-spring";
@@ -32,7 +32,7 @@ export const DropUI: React.FC<IProps> = memo(({ isDragActive }) => {
               style={props}
             >
               <Icon
-                path={mdiFileDownload}
+                path={mdiFilePlus}
                 size={3}
                 title="Drag and drop torrent file"
               />

renderer/components/Empty/Empty.module.scss

@@ -0,0 +1,31 @@
+.empty {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  text-align: center;
+  line-height: 22px;
+}
+
+.emptyInner {
+  background-color: #17171730;
+  padding: 20px;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.button {
+  all: unset;
+  border: 2px dashed #ffffff50;
+  border-radius: 5px;
+  padding: 30px;
+  margin: 0 10px;
+  cursor: pointer;
+  transition: all 200ms;
+
+  &:hover {
+    border-color: #ffffff;
+  }
+}

renderer/components/Empty/Empty.tsx

@@ -0,0 +1,35 @@
+import React, { memo } from "react";
+import styles from "./Empty.module.scss";
+import Icon from "@mdi/react";
+import { mdiFilePlus, mdiMagnet } from "@mdi/js";
+import { Download } from "@components/Downloads";
+import { handleFileSelect } from "@utils/handleFileSelect";
+import { handleMagnetSelect } from "@utils/handleMagnetSelect";
+
+interface IProps {
+  onFileSelect: (info: Download) => void;
+}
+
+export const Empty: React.FC<IProps> = memo(({ onFileSelect }) => {
+  return (
+    <div className={styles.empty}>
+      <div className={styles.emptyInner}>
+        <button
+          onClick={() => handleFileSelect(onFileSelect)}
+          className={styles.button}
+          title="Add Torrent File"
+        >
+          <Icon path={mdiFilePlus} size={2.3} />
+        </button>
+
+        <button
+          onClick={() => handleMagnetSelect(onFileSelect)}
+          className={styles.button}
+          title="Add Magnet URL"
+        >
+          <Icon path={mdiMagnet} size={2.3} />
+        </button>
+      </div>
+    </div>
+  );
+});

renderer/components/Empty/index.ts

@@ -0,0 +1 @@
+export * from "./Empty";