Merge branch 'dev' into ui/docker

2025-11-12 00:15:48 +01:00 · 2022-09-02 13:02:50 +02:00
parent c08512d464 17364f46cd
commit 713dec2969
345 changed files with 4226 additions and 1999 deletions
--- a/src/modules/index.ts
+++ b/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 './usenet';
--- a/src/modules/downloads/DownloadsModule.tsx
+++ b/src/modules/downloads/DownloadsModule.tsx
@@ -13,9 +13,9 @@ import {
 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 { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useTranslation } from 'next-i18next';
 import { IModule } from '../ModuleTypes';
 import { useConfig } from '../../tools/state';
@@ -23,20 +23,20 @@ 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: 'torrents-status',
  title: 'Torrent',
  icon: Download,
-  component: DownloadComponent,
+  component: TorrentsComponent,
  options: {
    hidecomplete: {
      name: 'descriptor.settings.hideComplete',
      value: false,
    },
  },
-  id: 'torrents-status',
 };

-export default function DownloadComponent() {
+export default function TorrentsComponent() {
  const { config } = useConfig();
  const { height, width } = useViewportSize();
  const downloadServices =
@@ -46,13 +46,14 @@ export default function DownloadComponent() {
        service.type === 'Transmission' ||
        service.type === 'Deluge'
    ) ?? [];
+
  const hideComplete: boolean =
-    (config?.modules?.[DownloadsModule.id]?.options?.hidecomplete?.value as boolean) ?? false;
+    (config?.modules?.[TorrentsModule.id]?.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}`);
+  const { t } = useTranslation(`modules/${TorrentsModule.id}`);

  useEffect(() => {
    setIsLoading(true);
@@ -60,7 +61,7 @@ export default function DownloadComponent() {
    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);
--- a/src/modules/downloads/TotalDownloadsModule.tsx
+++ b/src/modules/downloads/TotalDownloadsModule.tsx
@@ -37,7 +37,7 @@ export default function TotalDownloadsComponent() {
        service.type === 'Transmission' ||
        service.type === 'Deluge'
    ) ?? [];
-    const { t } = useTranslation(`modules/${TotalDownloadsModule.id}`);
+  const { t } = useTranslation(`modules/${TotalDownloadsModule.id}`);

  const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
  const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
--- a/src/modules/downloads/index.ts
+++ b/src/modules/downloads/index.ts
@@ -1,2 +1,2 @@
-export { DownloadsModule } from './DownloadsModule';
+export { TorrentsModule } from './TorrentsModule';
 export { TotalDownloadsModule } from './TotalDownloadsModule';
--- a/src/modules/usenet/UsenetHistoryList.tsx
+++ b/src/modules/usenet/UsenetHistoryList.tsx
@@ -0,0 +1,133 @@
+import {
+  Alert,
+  Center,
+  Code,
+  Group,
+  Pagination,
+  Skeleton,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { useTranslation } from 'next-i18next';
+import { FunctionComponent, useState } from 'react';
+import { useGetUsenetHistory } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { parseDuration } from '../../tools/parseDuration';
+
+dayjs.extend(duration);
+
+interface UsenetHistoryListProps {
+  serviceId: string;
+}
+
+const PAGE_SIZE = 10;
+
+export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
+  const [page, setPage] = useState(1);
+  const { t } = useTranslation(['modules/usenet', 'common']);
+
+  const { data, isLoading, isError, error } = useGetUsenetHistory({
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    serviceId,
+  });
+  const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          my="lg"
+          title={t('modules/usenet:history.error.title')}
+          color="red"
+          radius="md"
+        >
+          {t('modules/usenet:history.error.message')}
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
+  if (!data || data.items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>{t('modules/usenet:history.empty')}</Title>
+      </Center>
+    );
+  }
+
+  return (
+    <>
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
+        <colgroup>
+          <col span={1} />
+          <col span={1} style={{ width: 100 }} />
+          <col span={1} style={{ width: 200 }} />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>{t('modules/usenet:history.header.name')}</th>
+            <th>{t('modules/usenet:history.header.size')}</th>
+            <th>{t('modules/usenet:history.header.duration')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.items.map((history) => (
+            <tr key={history.id}>
+              <td>
+                <Tooltip position="top" label={history.name}>
+                  <Text
+                    size="xs"
+                    style={{
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {history.name}
+                  </Text>
+                </Tooltip>
+              </td>
+              <td>
+                <Text size="xs">{humanFileSize(history.size)}</Text>
+              </td>
+              <td>
+                <Text size="xs">{parseDuration(history.time, t)}</Text>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+      {totalPages > 1 && (
+        <Pagination
+          size="sm"
+          position="center"
+          mt="md"
+          total={totalPages}
+          page={page}
+          onChange={setPage}
+        />
+      )}
+    </>
+  );
+};
--- a/src/modules/usenet/UsenetModule.tsx
+++ b/src/modules/usenet/UsenetModule.tsx
@@ -0,0 +1,102 @@
+import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
+import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { FunctionComponent, useEffect, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { IModule } from '../ModuleTypes';
+import { UsenetQueueList } from './UsenetQueueList';
+import { UsenetHistoryList } from './UsenetHistoryList';
+import { useGetServiceByType } from '../../tools/hooks/useGetServiceByType';
+import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
+
+dayjs.extend(duration);
+
+export const UsenetComponent: FunctionComponent = () => {
+  const downloadServices = useGetServiceByType('Sabnzbd');
+
+  const { t } = useTranslation('modules/usenet');
+
+  const [selectedServiceId, setSelectedService] = useState<string | null>(downloadServices[0]?.id);
+  const { data } = useGetUsenetInfo({ serviceId: selectedServiceId! });
+
+  useEffect(() => {
+    if (!selectedServiceId && downloadServices.length) {
+      setSelectedService(downloadServices[0].id);
+    }
+  }, [downloadServices, selectedServiceId]);
+
+  const { mutate: pause } = usePauseUsenetQueue({ serviceId: selectedServiceId! });
+  const { mutate: resume } = useResumeUsenetQueue({ serviceId: selectedServiceId! });
+
+  if (downloadServices.length === 0) {
+    return (
+      <Stack>
+        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
+        <Group>
+          <Text>{t('card.errors.noDownloadClients.text')}</Text>
+          <AddItemShelfButton />
+        </Group>
+      </Stack>
+    );
+  }
+
+  if (!selectedServiceId) {
+    return null;
+  }
+
+  return (
+    <Tabs keepMounted={false} defaultValue="queue">
+      <Group mb="md">
+        <Tabs.List style={{ flex: 1 }}>
+          <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
+          <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
+          {data && (
+            <Group position="right" ml="auto" mb="lg">
+              <Badge>{humanFileSize(data?.speed)}/s</Badge>
+              <Badge>
+                {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
+              </Badge>
+              {data.paused ? (
+                <Button uppercase onClick={() => resume()} radius="xl" size="xs">
+                  <IconPlayerPlay size={16} style={{ marginRight: 5 }} /> {t('info.paused')}
+                </Button>
+              ) : (
+                <Button uppercase onClick={() => pause()} radius="xl" size="xs">
+                  <IconPlayerPause size={16} style={{ marginRight: 5 }} />{' '}
+                  {dayjs.duration(data.eta, 's').format('HH:mm:ss')}
+                </Button>
+              )}
+            </Group>
+          )}
+        </Tabs.List>
+        {downloadServices.length > 1 && (
+          <Select
+            value={selectedServiceId}
+            onChange={setSelectedService}
+            ml="xs"
+            data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
+          />
+        )}
+      </Group>
+      <Tabs.Panel value="queue">
+        <UsenetQueueList serviceId={selectedServiceId} />
+      </Tabs.Panel>
+      <Tabs.Panel value="history">
+        <UsenetHistoryList serviceId={selectedServiceId} />
+      </Tabs.Panel>
+    </Tabs>
+  );
+};
+
+export const UsenetModule: IModule = {
+  id: 'usenet',
+  title: 'Usenet',
+  icon: IconDownload,
+  component: UsenetComponent,
+};
+
+export default UsenetComponent;
--- a/src/modules/usenet/UsenetQueueList.tsx
+++ b/src/modules/usenet/UsenetQueueList.tsx
@@ -0,0 +1,167 @@
+import {
+  ActionIcon,
+  Alert,
+  Center,
+  Code,
+  Group,
+  Pagination,
+  Progress,
+  Skeleton,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { useTranslation } from 'next-i18next';
+import { FunctionComponent, useState } from 'react';
+import { useGetUsenetDownloads } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
+
+dayjs.extend(duration);
+
+interface UsenetQueueListProps {
+  serviceId: string;
+}
+
+const PAGE_SIZE = 10;
+
+export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ serviceId }) => {
+  const theme = useMantineTheme();
+  const { t } = useTranslation('modules/usenet');
+
+  const [page, setPage] = useState(1);
+  const { data, isLoading, isError, error } = useGetUsenetDownloads({
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    serviceId,
+  });
+  const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          my="lg"
+          title={t('queue.error.title')}
+          color="red"
+          radius="md"
+        >
+          {t('queue.error.message')}
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
+  if (!data || data.items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>{t('queue.empty')}</Title>
+      </Center>
+    );
+  }
+
+  return (
+    <>
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
+        <thead>
+          <tr>
+            <th style={{ width: 50 }} />
+            <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
+            <th style={{ width: 100 }}>{t('queue.header.size')}</th>
+            <th style={{ width: 100 }}>{t('queue.header.eta')}</th>
+            <th style={{ width: 200 }}>{t('queue.header.progress')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.items.map((nzb) => (
+            <tr key={nzb.id}>
+              <td>
+                {nzb.state === 'paused' ? (
+                  <Tooltip label="NOT IMPLEMENTED">
+                    <ActionIcon color="gray" variant="subtle" radius="xl" size="sm">
+                      <IconPlayerPlay size="16" />
+                    </ActionIcon>
+                  </Tooltip>
+                ) : (
+                  <Tooltip label="NOT IMPLEMENTED">
+                    <ActionIcon color="primary" variant="subtle" radius="xl" size="sm">
+                      <IconPlayerPause size="16" />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </td>
+              <td>
+                <Tooltip position="top" label={nzb.name}>
+                  <Text
+                    style={{
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                    size="xs"
+                    color={nzb.state === 'paused' ? 'dimmed' : undefined}
+                  >
+                    {nzb.name}
+                  </Text>
+                </Tooltip>
+              </td>
+              <td>
+                <Text size="xs">{humanFileSize(nzb.size)}</Text>
+              </td>
+              <td>
+                {nzb.eta <= 0 ? (
+                  <Text size="xs" color="dimmed">
+                    {t('queue.paused')}
+                  </Text>
+                ) : (
+                  <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
+                )}
+              </td>
+              <td style={{ display: 'flex', alignItems: 'center' }}>
+                <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
+                  {nzb.progress.toFixed(1)}%
+                </Text>
+                <Progress
+                  radius="lg"
+                  color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
+                  value={nzb.progress}
+                  size="lg"
+                  style={{ width: '100%' }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+      {totalPages > 1 && (
+        <Pagination
+          size="sm"
+          position="center"
+          mt="md"
+          total={totalPages}
+          page={page}
+          onChange={setPage}
+        />
+      )}
+    </>
+  );
+};
--- a/src/modules/usenet/index.ts
+++ b/src/modules/usenet/index.ts
@@ -0,0 +1,2 @@
+export { UsenetModule } from './UsenetModule';
+export * from './types';
--- a/src/modules/usenet/types.ts
+++ b/src/modules/usenet/types.ts
@@ -0,0 +1,20 @@
+export interface UsenetQueueItem {
+  name: string;
+  progress: number;
+  /**
+   * Size in bytes
+   */
+  size: number;
+  id: string;
+  state: 'paused' | 'downloading' | 'queued';
+  eta: number;
+}
+export interface UsenetHistoryItem {
+  name: string;
+  /**
+   * Size in bytes
+   */
+  size: number;
+  id: string;
+  time: number;
+}