Initial setup of Sabnzbd integration

src/modules/index.ts

@@ -1,9 +1,10 @@
 export * from './calendar';
 export * from './dashdot';
 export * from './date';
-export * from './downloads';
+export * from './torrents';
 export * from './ping';
 export * from './search';
 export * from './weather';
 export * from './docker';
 export * from './overseerr';
+export * from './nzb';

src/modules/nzb/NzbModule.tsx

@@ -0,0 +1,137 @@
+import { Center, Progress, ScrollArea, Skeleton, Table, Text, Title, Tooltip } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import { FunctionComponent, useEffect, useState } from 'react';
+import duration from 'dayjs/plugin/duration';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { DownloadItem } from '../../tools/types';
+import { IModule } from '../ModuleTypes';
+
+dayjs.extend(duration);
+
+export const NzbComponent: FunctionComponent = () => {
+  const [nzbs, setNzbs] = useState<DownloadItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setIsLoading(true);
+
+    const getData = async () => {
+      try {
+        const response = await axios.get('/api/modules/nzbs');
+        setNzbs(response.data);
+      } catch (error) {
+        setNzbs([]);
+        showNotification({
+          title: 'Error fetching torrents',
+          autoClose: 1000,
+          disallowClose: true,
+          id: 'fail-torrent-downloads-module',
+          color: 'red',
+          message:
+            'Please check your config for any potential errors, check the console for more info',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const interval = setInterval(getData, 10000);
+    getData();
+
+    () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  const ths = (
+    <tr>
+      <th />
+      <th>Name</th>
+      <th>Size</th>
+      <th>ETA</th>
+      <th>Progress</th>
+    </tr>
+  );
+
+  const rows = nzbs.map((nzb) => (
+    <tr key={nzb.id}>
+      <td>
+        {nzb.state === 'paused' ? (
+          <IconPlayerPause fill="grey" stroke={0} />
+        ) : (
+          <IconPlayerPlay fill="black" stroke={0} />
+        )}
+      </td>
+      <td>
+        <Tooltip position="top" label={nzb.name}>
+          <Text
+            style={{
+              maxWidth: '30vw',
+            }}
+            size="xs"
+          >
+            {nzb.name}
+          </Text>
+        </Tooltip>
+      </td>
+      <td>
+        <Text size="xs">{humanFileSize(nzb.size * 1000 * 1000)}</Text>
+      </td>
+      <td>
+        {nzb.eta <= 0 ? (
+          <Text size="xs" color="dimmed">
+            Paused
+          </Text>
+        ) : (
+          <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
+        )}
+      </td>
+      <td>
+        <Text>{nzb.progress.toFixed(1)}%</Text>
+        <Progress
+          radius="lg"
+          color={nzb.progress === 1 ? 'green' : nzb.state === 'downloading' ? 'blue' : 'lightgrey'}
+          value={nzb.progress}
+          size="lg"
+        />
+      </td>
+    </tr>
+  ));
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  return (
+    <ScrollArea sx={{ maxHeight: 300, width: '100%' }}>
+      {rows.length > 0 ? (
+        <Table highlightOnHover>
+          <thead>{ths}</thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      ) : (
+        <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Title order={3}>Queue is empty</Title>
+        </Center>
+      )}
+    </ScrollArea>
+  );
+};
+
+export const NzbModule: IModule = {
+  id: 'usenet',
+  title: 'Usenet',
+  icon: IconDownload,
+  component: NzbComponent,
+};
+
+export default NzbComponent;

src/modules/nzb/index.ts

@@ -0,0 +1 @@
+export { NzbModule } from './NzbModule';

src/modules/torrents/TorrentsModule.tsx

@@ -8,35 +8,33 @@ import {
   Skeleton,
   ScrollArea,
   Center,
-  Stack,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useViewportSize } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { useTranslation } from 'next-i18next';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { IModule } from '../ModuleTypes';
 import { useConfig } from '../../tools/state';
 import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { humanFileSize } from '../../tools/humanFileSize';
 
-export const DownloadsModule: IModule = {
+export const TorrentsModule: IModule = {
+  id: 'torrent',
   title: 'Torrent',
   icon: Download,
-  component: DownloadComponent,
+  component: TorrentsComponent,
   options: {
     hidecomplete: {
-      name: 'descriptor.settings.hideComplete',
+      name: 'Hide completed torrents',
       value: false,
     },
   },
-  id: 'torrents-status',
 };
 
-export default function DownloadComponent() {
+export default function TorrentsComponent() {
   const { config } = useConfig();
   const { height, width } = useViewportSize();
   const downloadServices =
@@ -44,23 +42,22 @@ export default function DownloadComponent() {
       (service) =>
         service.type === 'qBittorrent' ||
         service.type === 'Transmission' ||
-        service.type === 'Deluge'
+        service.type === 'Deluge' ||
+        service.type === 'Sabnzbd'
     ) ?? [];
+
   const hideComplete: boolean =
-    (config?.modules?.[DownloadsModule.id]?.options?.hidecomplete?.value as boolean) ?? false;
+    (config?.modules?.[TorrentsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
   const setSafeInterval = useSetSafeInterval();
   const [isLoading, setIsLoading] = useState(true);
-
-  const { t } = useTranslation(`modules/${DownloadsModule.id}`);
-
   useEffect(() => {
     setIsLoading(true);
     if (downloadServices.length === 0) return;
     const interval = setInterval(() => {
       // Send one request with each download service inside
       axios
-        .post('/api/modules/downloads')
+        .post('/api/modules/torrents')
         .then((response) => {
           setTorrents(response.data);
           setIsLoading(false);
@@ -86,13 +83,13 @@ export default function DownloadComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Stack>
-        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
+      <Group>
+        <Title order={3}>No supported download clients found!</Title>
         <Group>
-          <Text>{t('card.errors.noDownloadClients.text')}</Text>
+          <Text>Add a download service to view your current downloads</Text>
           <AddItemShelfButton />
         </Group>
-      </Stack>
+      </Group>
     );
   }
 
@@ -110,12 +107,12 @@ export default function DownloadComponent() {
   const DEVICE_WIDTH = 576;
   const ths = (
     <tr>
-      <th>{t('card.table.header.name')}</th>
-      <th>{t('card.table.header.size')}</th>
-      {width > 576 ? <th>{t('card.table.header.download')}</th> : ''}
-      {width > 576 ? <th>{t('card.table.header.upload')}</th> : ''}
-      <th>{t('card.table.header.estimatedTimeOfArrival')}</th>
-      <th>{t('card.table.header.progress')}</th>
+      <th>Name</th>
+      <th>Size</th>
+      {width > 576 ? <th>Down</th> : ''}
+      {width > 576 ? <th>Up</th> : ''}
+      <th>ETA</th>
+      <th>Progress</th>
     </tr>
   );
   // Convert Seconds to readable format.
@@ -200,7 +197,7 @@ export default function DownloadComponent() {
         </Table>
       ) : (
         <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <Title order={3}>{t('card.table.body.nothingFound')}</Title>
+          <Title order={3}>No torrents found</Title>
         </Center>
       )}
     </ScrollArea>

src/modules/torrents/TotalDownloadsModule.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { linearGradientDef } from '@nivo/core';
-import { useTranslation } from 'next-i18next';
 import { Datum, ResponsiveLine } from '@nivo/line';
 import { useListState } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
@@ -15,10 +14,10 @@ import { IModule } from '../ModuleTypes';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 
 export const TotalDownloadsModule: IModule = {
+  id: 'totalDownload',
   title: 'Download Speed',
   icon: Download,
   component: TotalDownloadsComponent,
-  id: 'dlspeed',
 };
 
 interface torrentHistory {
@@ -35,9 +34,9 @@ export default function TotalDownloadsComponent() {
       (service) =>
         service.type === 'qBittorrent' ||
         service.type === 'Transmission' ||
-        service.type === 'Deluge'
+        service.type === 'Deluge' ||
+        'Sabnzbd'
     ) ?? [];
-    const { t } = useTranslation(`modules/${TotalDownloadsModule.id}`);
 
   const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
@@ -71,30 +70,6 @@ export default function TotalDownloadsComponent() {
     }, 1000);
   }, [config.services]);
 
-  useEffect(() => {
-    torrentHistoryHandlers.append({
-      x: Date.now(),
-      down: totalDownloadSpeed,
-      up: totalUploadSpeed,
-    });
-  }, [totalDownloadSpeed, totalUploadSpeed]);
-
-  if (downloadServices.length === 0) {
-    return (
-      <Group>
-        <Title order={4}>{t('card.errors.noDownloadClients.title')}</Title>
-        <div>
-          <AddItemShelfButton
-            style={{
-              float: 'inline-end',
-            }}
-          />
-          {t('card.errors.noDownloadClients.text')}
-        </div>
-      </Group>
-    );
-  }
-
   const theme = useMantineTheme();
   // Load the last 10 values from the history
   const history = torrentHistory.slice(-10);
@@ -107,21 +82,41 @@ export default function TotalDownloadsComponent() {
     y: load.down,
   })) as Datum[];
 
+  useEffect(() => {
+    torrentHistoryHandlers.append({
+      x: Date.now(),
+      down: totalDownloadSpeed,
+      up: totalUploadSpeed,
+    });
+  }, [totalDownloadSpeed, totalUploadSpeed]);
+
+  if (downloadServices.length === 0) {
+    return (
+      <Group>
+        <Title order={4}>No supported download clients found!</Title>
+        <div>
+          <AddItemShelfButton
+            style={{
+              float: 'inline-end',
+            }}
+          />
+          Add a download service to view your current downloads
+        </div>
+      </Group>
+    );
+  }
+
   return (
     <Stack>
-      <Title order={4}>{t('card.lineChart.title')}</Title>
+      <Title order={4}>Current download speed</Title>
       <Stack>
         <Group>
           <ColorSwatch size={12} color={theme.colors.green[5]} />
-          <Text>
-            {t('card.lineChart.totalDownload', { download: humanFileSize(totalDownloadSpeed) })}
-          </Text>
+          <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
         </Group>
         <Group>
           <ColorSwatch size={12} color={theme.colors.blue[5]} />
-          <Text>
-            {t('card.lineChart.totalUpload', { upload: humanFileSize(totalUploadSpeed) })}
-          </Text>
+          <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
         </Group>
       </Stack>
       <Box
@@ -142,20 +137,16 @@ export default function TotalDownloadsComponent() {
             const roundedSeconds = Math.round(seconds);
             return (
               <Card p="sm" radius="md" withBorder>
-                <Text size="md">{t('card.lineChart.timeSpan', { seconds: roundedSeconds })}</Text>
+                <Text size="md">{roundedSeconds} seconds ago</Text>
                 <Card.Section p="sm">
                   <Stack>
                     <Group>
                       <ColorSwatch size={10} color={theme.colors.green[5]} />
-                      <Text size="md">
-                        {t('card.lineChart.download', { download: humanFileSize(Download) })}
-                      </Text>
+                      <Text size="md">Download: {humanFileSize(Download)}</Text>
                     </Group>
                     <Group>
                       <ColorSwatch size={10} color={theme.colors.blue[5]} />
-                      <Text size="md">
-                        {t('card.lineChart.upload', { upload: humanFileSize(Upload) })}
-                      </Text>
+                      <Text size="md">Upload: {humanFileSize(Upload)}</Text>
                     </Group>
                   </Stack>
                 </Card.Section>

src/modules/torrents/index.ts

@@ -1,2 +1,2 @@
-export { DownloadsModule } from './DownloadsModule';
+export { TorrentsModule } from './TorrentsModule';
 export { TotalDownloadsModule } from './TotalDownloadsModule';