sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 21:46:11 +05:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Daniel Shleifman
2021-05-31 17:33:17 +03:00
parent 34ff7c5d53
commit 2432ebc9fb
3 changed files with 106 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
web/src/components/DialogTorrentDetailsContent/index.jsx
View File

@@ -1,18 +1,9 @@
import { NoImageIcon } from 'icons' import { NoImageIcon } from 'icons'
import { getPeerString, humanizeSize } from 'utils/Utils' import { humanizeSize } from 'utils/Utils'
import { CopyToClipboard } from 'react-copy-to-clipboard' import { CopyToClipboard } from 'react-copy-to-clipboard'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Button } from '@material-ui/core' import { Button } from '@material-ui/core'
import ptt from 'parse-torrent-title' 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 axios from 'axios'
import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts' import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts'
import { GETTING_INFO, IN_DB } from 'torrentStates' import { GETTING_INFO, IN_DB } from 'torrentStates'
@@ -28,7 +19,7 @@ import {
Poster, Poster,
SectionTitle, SectionTitle,
SectionSubName, SectionSubName,
StatisticsWrapper, WidgetWrapper,
LoadingProgress, LoadingProgress,
SectionHeader, SectionHeader,
CacheSection, CacheSection,
@@ -37,7 +28,15 @@ import {
SmallLabel, SmallLabel,
Table, Table,
} from './style' } 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 ? '...' : '') const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
@@ -120,64 +119,23 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
'loading' 'loading'
) : isDetailedCacheView ? ( ) : isDetailedCacheView ? (
<DetailedTorrentCacheViewWrapper> <DetailedTorrentCacheViewWrapper>
<StatisticsWrapper> <div>
<StatisticsField <SectionTitle mb={20}>Data</SectionTitle>
title='Download speed' <WidgetWrapper>
value={humanizeSize(downloadSpeed) || '0 B'} <DownlodSpeedWidget data={downloadSpeed} />
iconBg='#118f00' <UploadSpeedWidget data={uploadSpeed} />
valueBg='#13a300' <PeersWidget data={torrent} />
icon={ArrowDownwardIcon} <SizeWidget data={torrentSize} />
/> <PiecesCountWidget data={PiecesCount} />
<PiecesLengthWidget data={PiecesLength} />
<StatusWidget data={statString} />
</WidgetWrapper>
</div>
<StatisticsField <div>
title='Upload speed' <SectionTitle mb={20}>Cache</SectionTitle>
value={humanizeSize(uploadSpeed) || '0 B'} <TorrentCache cache={cache} cacheMap={cacheMap} />
iconBg='#0146ad' </div>
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>
<TorrentCache cache={cache} cacheMap={cacheMap} />
</DetailedTorrentCacheViewWrapper> </DetailedTorrentCacheViewWrapper>
) : ( ) : (
<DialogContentGrid> <DialogContentGrid>
@@ -194,39 +152,12 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
<SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle> <SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle>
)} )}
<StatisticsWrapper> <WidgetWrapper>
<StatisticsField <DownlodSpeedWidget data={downloadSpeed} />
title='Download speed' <UploadSpeedWidget data={uploadSpeed} />
value={humanizeSize(downloadSpeed) || '0 B'} <PeersWidget data={torrent} />
iconBg='#118f00' <SizeWidget data={torrentSize} />
valueBg='#13a300' </WidgetWrapper>
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>
<Divider /> <Divider />

7
web/src/components/DialogTorrentDetailsContent/style.js
View File

@@ -91,12 +91,15 @@ export const SectionHeader = styled.div`
` `
export const DetailedTorrentCacheViewWrapper = styled.div` export const DetailedTorrentCacheViewWrapper = styled.div`
padding: 40px;
overflow: auto; overflow: auto;
min-height: 80vh; min-height: 80vh;
padding: 40px;
> :not(:last-child) {
padding-bottom: 50px;
}
` `
export const StatisticsWrapper = styled.div` export const WidgetWrapper = styled.div`
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(max-content, 220px)); grid-template-columns: repeat(auto-fit, minmax(max-content, 220px));
gap: 20px; gap: 20px;

68
web/src/components/DialogTorrentDetailsContent/widgets.jsx Normal file
View 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}
/>
)