mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-19 21:46:11 +05:00
refactor
This commit is contained in:
@@ -1,18 +1,9 @@
|
||||
import { NoImageIcon } from 'icons'
|
||||
import { getPeerString, humanizeSize } from 'utils/Utils'
|
||||
import { humanizeSize } from 'utils/Utils'
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button } from '@material-ui/core'
|
||||
import ptt from 'parse-torrent-title'
|
||||
import {
|
||||
ArrowDownward as ArrowDownwardIcon,
|
||||
ArrowUpward as ArrowUpwardIcon,
|
||||
SwapVerticalCircle as SwapVerticalCircleIcon,
|
||||
ViewAgenda as ViewAgendaIcon,
|
||||
Widgets as WidgetsIcon,
|
||||
PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
|
||||
Build as BuildIcon,
|
||||
} from '@material-ui/icons'
|
||||
import axios from 'axios'
|
||||
import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts'
|
||||
import { GETTING_INFO, IN_DB } from 'torrentStates'
|
||||
@@ -28,7 +19,7 @@ import {
|
||||
Poster,
|
||||
SectionTitle,
|
||||
SectionSubName,
|
||||
StatisticsWrapper,
|
||||
WidgetWrapper,
|
||||
LoadingProgress,
|
||||
SectionHeader,
|
||||
CacheSection,
|
||||
@@ -37,7 +28,15 @@ import {
|
||||
SmallLabel,
|
||||
Table,
|
||||
} from './style'
|
||||
import StatisticsField from './StatisticsField'
|
||||
import {
|
||||
DownlodSpeedWidget,
|
||||
UploadSpeedWidget,
|
||||
PeersWidget,
|
||||
SizeWidget,
|
||||
PiecesCountWidget,
|
||||
PiecesLengthWidget,
|
||||
StatusWidget,
|
||||
} from './widgets'
|
||||
|
||||
const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
|
||||
|
||||
@@ -120,64 +119,23 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
|
||||
'loading'
|
||||
) : isDetailedCacheView ? (
|
||||
<DetailedTorrentCacheViewWrapper>
|
||||
<StatisticsWrapper>
|
||||
<StatisticsField
|
||||
title='Download speed'
|
||||
value={humanizeSize(downloadSpeed) || '0 B'}
|
||||
iconBg='#118f00'
|
||||
valueBg='#13a300'
|
||||
icon={ArrowDownwardIcon}
|
||||
/>
|
||||
<div>
|
||||
<SectionTitle mb={20}>Data</SectionTitle>
|
||||
<WidgetWrapper>
|
||||
<DownlodSpeedWidget data={downloadSpeed} />
|
||||
<UploadSpeedWidget data={uploadSpeed} />
|
||||
<PeersWidget data={torrent} />
|
||||
<SizeWidget data={torrentSize} />
|
||||
<PiecesCountWidget data={PiecesCount} />
|
||||
<PiecesLengthWidget data={PiecesLength} />
|
||||
<StatusWidget data={statString} />
|
||||
</WidgetWrapper>
|
||||
</div>
|
||||
|
||||
<StatisticsField
|
||||
title='Upload speed'
|
||||
value={humanizeSize(uploadSpeed) || '0 B'}
|
||||
iconBg='#0146ad'
|
||||
valueBg='#0058db'
|
||||
icon={ArrowUpwardIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Peers'
|
||||
value={getPeerString(torrent)}
|
||||
iconBg='#cdc118'
|
||||
valueBg='#d8cb18'
|
||||
icon={SwapVerticalCircleIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Torrent size'
|
||||
value={humanizeSize(torrentSize)}
|
||||
iconBg='#01a292'
|
||||
valueBg='#01ad9b'
|
||||
icon={ViewAgendaIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Pieces count'
|
||||
value={PiecesCount}
|
||||
iconBg='#b6c95e'
|
||||
valueBg='#c0d076'
|
||||
icon={WidgetsIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Pieces length'
|
||||
value={humanizeSize(PiecesLength)}
|
||||
iconBg='#0982c8'
|
||||
valueBg='#098cd7'
|
||||
icon={PhotoSizeSelectSmallIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Torrent status'
|
||||
value={statString}
|
||||
iconBg='#aea25b'
|
||||
valueBg='#b4aa6e'
|
||||
icon={BuildIcon}
|
||||
/>
|
||||
</StatisticsWrapper>
|
||||
<div>
|
||||
<SectionTitle mb={20}>Cache</SectionTitle>
|
||||
<TorrentCache cache={cache} cacheMap={cacheMap} />
|
||||
</div>
|
||||
</DetailedTorrentCacheViewWrapper>
|
||||
) : (
|
||||
<DialogContentGrid>
|
||||
@@ -194,39 +152,12 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
|
||||
<SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle>
|
||||
)}
|
||||
|
||||
<StatisticsWrapper>
|
||||
<StatisticsField
|
||||
title='Download speed'
|
||||
value={humanizeSize(downloadSpeed) || '0 B'}
|
||||
iconBg='#118f00'
|
||||
valueBg='#13a300'
|
||||
icon={ArrowDownwardIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Upload speed'
|
||||
value={humanizeSize(uploadSpeed) || '0 B'}
|
||||
iconBg='#0146ad'
|
||||
valueBg='#0058db'
|
||||
icon={ArrowUpwardIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Peers'
|
||||
value={getPeerString(torrent)}
|
||||
iconBg='#cdc118'
|
||||
valueBg='#d8cb18'
|
||||
icon={SwapVerticalCircleIcon}
|
||||
/>
|
||||
|
||||
<StatisticsField
|
||||
title='Torrent size'
|
||||
value={humanizeSize(torrentSize)}
|
||||
iconBg='#9b01ad'
|
||||
valueBg='#ac03bf'
|
||||
icon={ViewAgendaIcon}
|
||||
/>
|
||||
</StatisticsWrapper>
|
||||
<WidgetWrapper>
|
||||
<DownlodSpeedWidget data={downloadSpeed} />
|
||||
<UploadSpeedWidget data={uploadSpeed} />
|
||||
<PeersWidget data={torrent} />
|
||||
<SizeWidget data={torrentSize} />
|
||||
</WidgetWrapper>
|
||||
|
||||
<Divider />
|
||||
|
||||
|
||||
@@ -91,12 +91,15 @@ export const SectionHeader = styled.div`
|
||||
`
|
||||
|
||||
export const DetailedTorrentCacheViewWrapper = styled.div`
|
||||
padding: 40px;
|
||||
overflow: auto;
|
||||
min-height: 80vh;
|
||||
padding: 40px;
|
||||
> :not(:last-child) {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
`
|
||||
|
||||
export const StatisticsWrapper = styled.div`
|
||||
export const WidgetWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(max-content, 220px));
|
||||
gap: 20px;
|
||||
|
||||
68
web/src/components/DialogTorrentDetailsContent/widgets.jsx
Normal file
68
web/src/components/DialogTorrentDetailsContent/widgets.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
ArrowDownward as ArrowDownwardIcon,
|
||||
ArrowUpward as ArrowUpwardIcon,
|
||||
SwapVerticalCircle as SwapVerticalCircleIcon,
|
||||
ViewAgenda as ViewAgendaIcon,
|
||||
Widgets as WidgetsIcon,
|
||||
PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
|
||||
Build as BuildIcon,
|
||||
} from '@material-ui/icons'
|
||||
import { getPeerString, humanizeSize } from 'utils/Utils'
|
||||
|
||||
import StatisticsField from './StatisticsField'
|
||||
|
||||
export const DownlodSpeedWidget = ({ data }) => (
|
||||
<StatisticsField
|
||||
title='Download speed'
|
||||
value={humanizeSize(data) || '0 B'}
|
||||
iconBg='#118f00'
|
||||
valueBg='#13a300'
|
||||
icon={ArrowDownwardIcon}
|
||||
/>
|
||||
)
|
||||
|
||||
export const UploadSpeedWidget = ({ data }) => (
|
||||
<StatisticsField
|
||||
title='Upload speed'
|
||||
value={humanizeSize(data) || '0 B'}
|
||||
iconBg='#0146ad'
|
||||
valueBg='#0058db'
|
||||
icon={ArrowUpwardIcon}
|
||||
/>
|
||||
)
|
||||
|
||||
export const PeersWidget = ({ data }) => (
|
||||
<StatisticsField
|
||||
title='Peers'
|
||||
value={getPeerString(data)}
|
||||
iconBg='#cdc118'
|
||||
valueBg='#d8cb18'
|
||||
icon={SwapVerticalCircleIcon}
|
||||
/>
|
||||
)
|
||||
|
||||
export const PiecesCountWidget = ({ data }) => (
|
||||
<StatisticsField title='Pieces count' value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
|
||||
)
|
||||
export const PiecesLengthWidget = ({ data }) => (
|
||||
<StatisticsField
|
||||
title='Pieces length'
|
||||
value={humanizeSize(data)}
|
||||
iconBg='#0982c8'
|
||||
valueBg='#098cd7'
|
||||
icon={PhotoSizeSelectSmallIcon}
|
||||
/>
|
||||
)
|
||||
export const StatusWidget = ({ data }) => (
|
||||
<StatisticsField title='Torrent status' value={data} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
|
||||
)
|
||||
|
||||
export const SizeWidget = ({ data }) => (
|
||||
<StatisticsField
|
||||
title='Torrent size'
|
||||
value={humanizeSize(data)}
|
||||
iconBg='#9b01ad'
|
||||
valueBg='#ac03bf'
|
||||
icon={ViewAgendaIcon}
|
||||
/>
|
||||
)
|
||||
Reference in New Issue
Block a user