Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-12 16:35:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Address PR comments

Browse Source
This commit is contained in:
ajnart
2022-11-22 18:17:05 +09:00
parent fb78736a83
commit 24c50dda29
1 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/modules/usenet/UsenetModule.tsx
View File

@@ -1,4 +1,14 @@
import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core'; import {
Badge,
Button,
Group,
Select,
Stack,
Tabs,
Text,
Title,
useMantineTheme,
} from '@mantine/core';
import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons'; import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
import { FunctionComponent, useEffect, useState } from 'react'; import { FunctionComponent, useEffect, useState } from 'react';
@@ -50,47 +60,45 @@ export const UsenetComponent: FunctionComponent = () => {
} }
const { ref, width, height } = useElementSize(); const { ref, width, height } = useElementSize();
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
return ( return (
<Tabs keepMounted={false} defaultValue="queue"> <Tabs keepMounted={false} defaultValue="queue">
<Tabs.List ref={ref} mb="md" style={{ flex: 1 }}> <Tabs.List ref={ref} mb="md" style={{ flex: 1 }}>
<Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab> <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
<Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab> <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
{data && ( {data && (
<Group position="right" ml="auto"> <Group position="right" ml="auto">
{ {width > MIN_WIDTH_MOBILE && (
// Only show if the width is > 400px <>
width > 400 && ( <Badge>{humanFileSize(data?.speed)}/s</Badge>
<> <Badge>
<Badge>{humanFileSize(data?.speed)}/s</Badge> {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
<Badge> </Badge>
{t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)} </>
</Badge>
</>
)
}
{data.paused ? (
<Button uppercase onClick={() => resume()} radius="xl" size="xs">
<IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
</Button>
) : (
<Button uppercase onClick={() => pause()} radius="xl" size="xs">
<IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
{dayjs.duration(data.eta, 's').format('HH:mm')}
</Button>
)}
</Group>
)} )}
</Tabs.List>
{downloadServices.length > 1 && ( {data.paused ? (
<Select <Button uppercase onClick={() => resume()} radius="xl" size="xs">
value={selectedServiceId} <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
onChange={setSelectedService} </Button>
ml="xs" ) : (
data={downloadServices.map((service) => ({ value: service.id, label: service.name }))} <Button uppercase onClick={() => pause()} radius="xl" size="xs">
/> <IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
{dayjs.duration(data.eta, 's').format('HH:mm')}
</Button>
)}
</Group>
)} )}
</Tabs.List>
{downloadServices.length > 1 && (
<Select
value={selectedServiceId}
onChange={setSelectedService}
ml="xs"
data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
/>
)}
<Tabs.Panel value="queue"> <Tabs.Panel value="queue">
<UsenetQueueList serviceId={selectedServiceId} /> <UsenetQueueList serviceId={selectedServiceId} />
</Tabs.Panel> </Tabs.Panel>