diff --git a/src/components/Dashboard/Tiles/UseNet/UseNetTile.tsx b/src/components/Dashboard/Tiles/UseNet/UseNetTile.tsx new file mode 100644 index 000000000..d704d9834 --- /dev/null +++ b/src/components/Dashboard/Tiles/UseNet/UseNetTile.tsx @@ -0,0 +1,124 @@ +import { + Badge, + Button, + Group, + Select, + Stack, + Tabs, + Text, + Title, + useMantineTheme, +} from '@mantine/core'; +import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons'; +import { useEffect, useState } from 'react'; + +import { useElementSize } from '@mantine/hooks'; +import dayjs from 'dayjs'; +import duration from 'dayjs/plugin/duration'; +import { useTranslation } from 'next-i18next'; +import { useConfigContext } from '../../../../config/provider'; +import { UsenetQueueList } from './UsenetQueueList'; +import { + useGetUsenetInfo, + usePauseUsenetQueue, + useResumeUsenetQueue, +} from '../../../../tools/hooks/api'; +import { humanFileSize } from '../../../../tools/humanFileSize'; +import { ServiceIntegrationType } from '../../../../types/service'; +import { HomarrCardWrapper } from '../HomarrCardWrapper'; +import { BaseTileProps } from '../type'; +import { UsenetHistoryList } from './UsenetHistoryList'; + +dayjs.extend(duration); + +const downloadServiceTypes: ServiceIntegrationType['type'][] = ['sabnzbd', 'nzbGet']; + +interface UseNetTileProps extends BaseTileProps {} + +export const UseNetTile = ({ className }: UseNetTileProps) => { + const { t } = useTranslation('modules/usenet'); + const { config } = useConfigContext(); + const downloadServices = + config?.services.filter( + (x) => x.integration && downloadServiceTypes.includes(x.integration.type) + ) ?? []; + + const [selectedServiceId, setSelectedService] = useState(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 ( + + + {t('card.errors.noDownloadClients.title')} + + {t('card.errors.noDownloadClients.text')} + + + + ); + } + + if (!selectedServiceId) { + return null; + } + + const { ref, width, height } = useElementSize(); + const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs; + + return ( + + + + {t('tabs.queue')} + {t('tabs.history')} + {data && ( + + {width > MIN_WIDTH_MOBILE && ( + <> + {humanFileSize(data?.speed)}/s + + {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)} + + + )} + + )} + + {downloadServices.length > 1 && ( +