Rishi Ghan
9a3ccba719
* 🪢 Wiring up to addTorrent endpoint * 🧲 Added a torrent download sub-panel * 🧲 Fixed the auto-population of search box * 🧲 Added downloads panel * 🧲 Surfacing torrent progress in UI via scheduled job * 🧲 Added visual indicators of torrent progress * 💅🏼 Formatting improvements * 💅🏼 Formatting tweaks to tabs
78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import dayjs from "dayjs";
|
|
import prettyBytes from "pretty-bytes";
|
|
|
|
export const TorrentDownloads = (props) => {
|
|
const { data } = props;
|
|
console.log(Object.values(data));
|
|
return (
|
|
<>
|
|
{data.map(({ torrent }) => {
|
|
return (
|
|
<dl className="mt-5 dark:text-slate-200 text-slate-600">
|
|
<dt className="text-lg">{torrent.name}</dt>
|
|
<p className="text-sm">{torrent.hash}</p>
|
|
<p className="text-sm">
|
|
Added on {dayjs.unix(torrent.added_on).format("ddd, D MMM, YYYY")}
|
|
</p>
|
|
|
|
<p className="flex gap-2 mt-1">
|
|
{torrent.progress > 0 ? (
|
|
<>
|
|
<progress
|
|
className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-green-400 [&::-moz-progress-bar]:bg-green-400 h-2"
|
|
value={Math.floor(torrent.progress * 100).toString()}
|
|
max="100"
|
|
></progress>
|
|
|
|
<span>{Math.floor(torrent.progress * 100)}%</span>
|
|
|
|
{/* downloaded/left */}
|
|
<p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
|
|
<span className="pr-1">
|
|
<i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
|
|
</span>
|
|
<span className="text-md">
|
|
{prettyBytes(torrent.downloaded)}
|
|
</span>
|
|
{/* uploaded */}
|
|
<span className="pr-1 text-orange-800 dark:text-orange-900 ml-2">
|
|
<i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
|
|
</span>
|
|
<span className="text-md text-orange-800 dark:text-orange-900">
|
|
{prettyBytes(torrent.uploaded)}
|
|
</span>
|
|
</p>
|
|
</>
|
|
) : null}
|
|
</p>
|
|
<div className="flex gap-4 mt-2">
|
|
{/* Peers */}
|
|
<span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
|
<span className="pr-1">
|
|
<i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
|
|
</span>
|
|
<span className="text-md text-slate-900">
|
|
{torrent.trackers_count}
|
|
</span>
|
|
</span>
|
|
|
|
{/* Size */}
|
|
<span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
|
<span className="pr-1 pt-1">
|
|
<i className="icon-[solar--mirror-right-bold-duotone] h-4 w-4"></i>
|
|
</span>
|
|
<span className="text-md text-slate-900">
|
|
{prettyBytes(torrent.total_size)}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</dl>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TorrentDownloads;
|