diff --git a/src/widgets/bitTorrent/BitTorrentTile.tsx b/src/widgets/bitTorrent/BitTorrentTile.tsx index 654ca0020..b9485f021 100644 --- a/src/widgets/bitTorrent/BitTorrentTile.tsx +++ b/src/widgets/bitTorrent/BitTorrentTile.tsx @@ -1,6 +1,7 @@ -import { NormalizedTorrent, TorrentState } from '@ctrl/shared-torrent'; +import { NormalizedTorrent } from '@ctrl/shared-torrent'; import { Center, + Flex, Group, Loader, ScrollArea, @@ -12,6 +13,9 @@ import { } from '@mantine/core'; import { useElementSize } from '@mantine/hooks'; import { IconFileDownload } from '@tabler/icons'; +import dayjs from 'dayjs'; +import duration from 'dayjs/plugin/duration'; +import relativeTime from 'dayjs/plugin/relativeTime'; import { useTranslation } from 'next-i18next'; import { useEffect, useState } from 'react'; import { useConfigContext } from '../../config/provider'; @@ -21,6 +25,9 @@ import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; import { BitTorrrentQueueItem } from './BitTorrentQueueItem'; +dayjs.extend(duration); +dayjs.extend(relativeTime); + const downloadAppTypes: AppIntegrationType['type'][] = ['deluge', 'qBittorrent', 'transmission']; const definition = defineWidget({ @@ -62,7 +69,9 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) { []; const [selectedAppId, setSelectedApp] = useState(downloadApps[0]?.id); - const { data, isFetching, isError } = useGetTorrentData({ appId: selectedAppId! }); + const { data, isError, isInitialLoading, dataUpdatedAt } = useGetTorrentData({ + appId: selectedAppId!, + }); useEffect(() => { if (!selectedAppId && downloadApps.length) { @@ -92,7 +101,7 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) { ); } - if (isFetching) { + if (isInitialLoading) { return ( @@ -124,26 +133,35 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) { return true; }; + const difference = new Date().getTime() - dataUpdatedAt; + const duration = dayjs.duration(difference, 'ms'); + const humanizedDuration = duration.humanize(); + return ( - - - - - - - {width > MIN_WIDTH_MOBILE && } - {width > MIN_WIDTH_MOBILE && } - {width > MIN_WIDTH_MOBILE && } - - - - - {data.filter(filter).map((item: NormalizedTorrent, index: number) => ( - - ))} - -
{t('card.table.header.name')}{t('card.table.header.size')}{t('card.table.header.download')}{t('card.table.header.upload')}{t('card.table.header.estimatedTimeOfArrival')}{t('card.table.header.progress')}
-
+ + + + + + + + {width > MIN_WIDTH_MOBILE && } + {width > MIN_WIDTH_MOBILE && } + {width > MIN_WIDTH_MOBILE && } + + + + + {data.filter(filter).map((item: NormalizedTorrent, index: number) => ( + + ))} + +
{t('card.table.header.name')}{t('card.table.header.size')}{t('card.table.header.download')}{t('card.table.header.upload')}{t('card.table.header.estimatedTimeOfArrival')}{t('card.table.header.progress')}
+
+ + Last updated {humanizedDuration} ago + +
); } diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx index 653f813c5..a7aee4fc9 100644 --- a/src/widgets/date/DateTile.tsx +++ b/src/widgets/date/DateTile.tsx @@ -1,4 +1,4 @@ -import { Center, Stack, Text, Title } from '@mantine/core'; +import { Stack, Text, Title } from '@mantine/core'; import { IconClock } from '@tabler/icons'; import dayjs from 'dayjs'; import { useEffect, useRef, useState } from 'react';