Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-12 08:25:47 +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 { FunctionComponent, useEffect, useState } from 'react';
@@ -50,47 +60,45 @@ export const UsenetComponent: FunctionComponent = () => {
}
const { ref, width, height } = useElementSize();
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
return (
<Tabs keepMounted={false} defaultValue="queue">
<Tabs.List ref={ref} mb="md" style={{ flex: 1 }}>
<Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
<Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
{data && (
<Group position="right" ml="auto">
{
// Only show if the width is > 400px
width > 400 && (
<>
<Badge>{humanFileSize(data?.speed)}/s</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 ref={ref} mb="md" style={{ flex: 1 }}>
<Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
<Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
{data && (
<Group position="right" ml="auto">
{width > MIN_WIDTH_MOBILE && (
<>
<Badge>{humanFileSize(data?.speed)}/s</Badge>
<Badge>
{t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
</Badge>
</>
)}
</Tabs.List>
{downloadServices.length > 1 && (
<Select
value={selectedServiceId}
onChange={setSelectedService}
ml="xs"
data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
/>
{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 && (
<Select
value={selectedServiceId}
onChange={setSelectedService}
ml="xs"
data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
/>
)}
<Tabs.Panel value="queue">
<UsenetQueueList serviceId={selectedServiceId} />
</Tabs.Panel>