diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index bd2a1664b..5bc19d27a 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -18,6 +18,7 @@ import { IModule } from '../modules'; import { useConfig } from '../../../tools/state'; import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem'; import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval'; +import { useViewportSize } from '@mantine/hooks'; export const DownloadsModule: IModule = { title: 'Torrent', @@ -34,6 +35,7 @@ export const DownloadsModule: IModule = { export default function DownloadComponent() { const { config } = useConfig(); + const { height, width } = useViewportSize(); const downloadServices = config.services.filter( (service) => @@ -85,10 +87,10 @@ export default function DownloadComponent() { const ths = ( Name - Size - Download - Upload - ETA + {width > 576 ? Size : ``} + Down + Up + {width > 576 ? ETA : ``} Progress ); @@ -137,18 +139,22 @@ export default function DownloadComponent() { + {width > 576 ? - {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } - + {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } + : + ``} {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} + {width > 576 ? {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} - + : + ``} {(torrent.progress * 100).toFixed(1)}%