Initial setup of Sabnzbd integration

src/components/AppShelf/AddAppShelfItem.tsx

@@ -269,7 +269,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                 form.values.type === 'Lidarr' ||
                 form.values.type === 'Overseerr' ||
                 form.values.type === 'Jellyseerr' ||
-                form.values.type === 'Readarr') && (
+                form.values.type === 'Readarr' ||
+                form.values.type === 'Sabnzbd') && (
                 <>
                   <TextInput
                     required

src/components/AppShelf/AppShelf.tsx

@@ -16,8 +16,8 @@ import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
 import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
-import { DownloadsModule } from '../../modules';
-import DownloadComponent from '../../modules/downloads/DownloadsModule';
+import { NzbModule, TorrentsModule } from '../../modules';
+import TorrentsComponent from '../../modules/torrents/TorrentsModule';
 
 const AppShelf = (props: any) => {
   const { config, setConfig } = useConfig();
@@ -150,7 +150,7 @@ const AppShelf = (props: any) => {
           {/* Return the item for all services without category */}
           {noCategory && noCategory.length > 0 ? (
             <Accordion.Item key="Other" value="Other">
-              <Accordion.Control>{t('accordions.others.text')}</Accordion.Control>
+              <Accordion.Control>Other</Accordion.Control>
               <Accordion.Panel>{getItems()}</Accordion.Panel>
             </Accordion.Item>
           ) : null}
@@ -170,8 +170,8 @@ const AppShelf = (props: any) => {
                 ${(config.settings.appOpacity || 100) / 100}`,
                   }}
                 >
-                  <ModuleMenu module={DownloadsModule} />
-                  <DownloadComponent />
+                  <ModuleMenu module={TorrentsModule} />
+                  <TorrentsComponent />
                 </Paper>
               </Accordion.Panel>
             </Accordion.Item>
@@ -183,7 +183,8 @@ const AppShelf = (props: any) => {
   return (
     <Stack>
       {getItems()}
-      <ModuleWrapper mt="xl" module={DownloadsModule} />
+      <ModuleWrapper mt="xl" module={TorrentsModule} />
+      <ModuleWrapper mt="xl" module={NzbModule} />
     </Stack>
   );
 };

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';

src/pages/api/modules/nzbs.ts

@@ -0,0 +1,60 @@
+import { getCookie } from 'cookies-next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Client } from 'sabnzbd-api';
+import { getConfig } from '../../../tools/getConfig';
+import { Config, DownloadItem } from '../../../tools/types';
+
+dayjs.extend(duration);
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const configName = getCookie('config-name', { req });
+    const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+    const nzbServices = config.services.filter((service) => service.type === 'Sabnzbd');
+
+    const downloads: DownloadItem[] = [];
+
+    await Promise.all(
+      nzbServices.map(async (service) => {
+        if (!service.apiKey) {
+          throw new Error(`API Key for service "${service.name}" is missing`);
+        }
+        const queue = await new Client(service.url, service.apiKey).queue();
+
+        queue.slots.forEach((slot) => {
+          const [hours, minutes, seconds] = slot.timeleft.split(':');
+          const eta = dayjs.duration({
+            hour: parseInt(hours, 10),
+            minutes: parseInt(minutes, 10),
+            seconds: parseInt(seconds, 10),
+          } as any);
+          downloads.push({
+            id: slot.nzo_id,
+            eta: eta.asSeconds(),
+            name: slot.filename,
+            progress: parseFloat(slot.percentage),
+            size: parseFloat(slot.mb),
+            state: slot.status.toLowerCase() as any,
+          });
+        });
+      })
+    );
+
+    return res.status(200).json(downloads);
+  } catch (err) {
+    return res.status(401).json(err);
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/tools/types.ts

@@ -72,6 +72,7 @@ export const ServiceTypeList = [
   'Transmission',
   'Overseerr',
   'Jellyseerr',
+  'Sabnzbd',
 ];
 export type ServiceType =
   | 'Other'
@@ -86,7 +87,8 @@ export type ServiceType =
   | 'Sonarr'
   | 'Overseerr'
   | 'Jellyseerr'
-  | 'Transmission';
+  | 'Transmission'
+  | 'Sabnzbd';
 
 export function tryMatchPort(name: string | undefined, form?: any) {
   if (!name) {
@@ -112,6 +114,7 @@ export const portmap = [
   { name: 'emby', value: '8096' },
   { name: 'overseerr', value: '5055' },
   { name: 'dash.', value: '3001' },
+  { name: 'sabnzbd', value: '8080' },
 ];
 
 export const MatchingImages: {
@@ -185,3 +188,12 @@ export interface serviceItem {
   newTab?: boolean;
   status?: string[];
 }
+
+export interface DownloadItem {
+  name: string;
+  progress: number;
+  size: number;
+  id: string;
+  state: 'paused' | 'downloading' | 'queued';
+  eta: number;
+}