diff --git a/src/widgets/torrent/TorrentQueueItem.tsx b/src/widgets/torrent/TorrentQueueItem.tsx index c1d9a7b5c..7750711cf 100644 --- a/src/widgets/torrent/TorrentQueueItem.tsx +++ b/src/widgets/torrent/TorrentQueueItem.tsx @@ -10,6 +10,7 @@ import { Progress, Stack, Text, + createStyles, useMantineTheme, } from '@mantine/core'; import { useDisclosure, useElementSize } from '@mantine/hooks'; @@ -24,6 +25,7 @@ import { IconUpload, } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; +import { MIN_WIDTH_MOBILE } from '~/constants/constants'; import { calculateETA } from '../../tools/client/calculateEta'; import { humanFileSize } from '../../tools/humanFileSize'; @@ -32,12 +34,13 @@ import { AppType } from '../../types/app'; interface TorrentQueueItemProps { torrent: NormalizedTorrent; app?: AppType; + width: number; } -export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) => { +export const BitTorrrentQueueItem = ({ torrent, width, app }: TorrentQueueItemProps) => { const [popoverOpened, { open: openPopover, close: closePopover }] = useDisclosure(false); const theme = useMantineTheme(); - const { width } = useElementSize(); + const { classes } = useStyles(); const { t } = useTranslation('modules/torrents-status'); const downloadSpeed = torrent.downloadSpeed / 1024 / 1024; @@ -74,25 +77,33 @@ export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) => - {humanFileSize(size, false)} + + {humanFileSize(size, false)} + - {theme.fn.largerThan('xs') && ( + {width > MIN_WIDTH_MOBILE && ( - {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} + + {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} + )} - {theme.fn.largerThan('xs') && ( + {width > MIN_WIDTH_MOBILE && ( - {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} + + {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} + )} - {theme.fn.largerThan('xs') && ( + {width > MIN_WIDTH_MOBILE && ( - {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} + + {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} + )} - {(torrent.progress * 100).toFixed(1)}% + {(torrent.progress * 100).toFixed(1)}% ); }; -const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => { +const TorrentQueuePopover = ({ torrent, app }: Omit) => { const { t } = useTranslation('modules/torrents-status'); const { colors } = useMantineTheme(); @@ -219,3 +230,9 @@ const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => { ); }; + +const useStyles = createStyles(() => ({ + noTextBreak: { + whiteSpace: 'nowrap', + }, +})); diff --git a/src/widgets/torrent/TorrentTile.tsx b/src/widgets/torrent/TorrentTile.tsx index 27b3ab026..b262eab0d 100644 --- a/src/widgets/torrent/TorrentTile.tsx +++ b/src/widgets/torrent/TorrentTile.tsx @@ -1,4 +1,4 @@ -import { NormalizedTorrent } from '@ctrl/shared-torrent'; +import { NormalizedTorrent, TorrentState } from '@ctrl/shared-torrent'; import { Badge, Center, @@ -19,9 +19,9 @@ import relativeTime from 'dayjs/plugin/relativeTime'; import { useTranslation } from 'next-i18next'; import { MIN_WIDTH_MOBILE } from '../../constants/constants'; -import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed'; import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse'; import { AppIntegrationType } from '../../types/app'; +import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed'; import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; import { BitTorrrentQueueItem } from './TorrentQueueItem'; @@ -154,7 +154,7 @@ function TorrentTile({ widget }: TorrentTileProps) { {filteredTorrents.map((torrent, index) => ( - + ))} {filteredTorrents.length !== torrents.length && (