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-06-01 19:37:40 +03:00
parent 950b84e34e
commit 0ccf0caf32
5 changed files with 91 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx Normal file
View File

@@ -0,0 +1,45 @@
import { SectionTitle, WidgetWrapper } from '../style'
import { DetailedViewCacheSection, DetailedViewWidgetSection } from './style'
import TorrentCache from '../TorrentCache'
import {
SizeWidget,
PiecesLengthWidget,
StatusWidget,
PiecesCountWidget,
PeersWidget,
UploadSpeedWidget,
DownlodSpeedWidget,
} from '../widgets'
export default function Test({
downloadSpeed,
uploadSpeed,
torrent,
torrentSize,
PiecesCount,
PiecesLength,
statString,
cache,
}) {
return (
<>
<DetailedViewWidgetSection>
<SectionTitle mb={20}>Data</SectionTitle>
<WidgetWrapper detailedView>
<DownlodSpeedWidget data={downloadSpeed} />
<UploadSpeedWidget data={uploadSpeed} />
<PeersWidget data={torrent} />
<SizeWidget data={torrentSize} />
<PiecesCountWidget data={PiecesCount} />
<PiecesLengthWidget data={PiecesLength} />
<StatusWidget data={statString} />
</WidgetWrapper>
</DetailedViewWidgetSection>
<DetailedViewCacheSection>
<SectionTitle mb={20}>Cache</SectionTitle>
<TorrentCache cache={cache} />
</DetailedViewCacheSection>
</>
)
}

19
web/src/components/DialogTorrentDetailsContent/DetailedView/style.js Normal file
View File

@@ -0,0 +1,19 @@
import styled from 'styled-components'
export const DetailedViewWidgetSection = styled.section`
padding: 40px;
background: linear-gradient(145deg, #e4f6ed, #b5dec9);
@media (max-width: 800px) {
padding: 20px;
}
`
export const DetailedViewCacheSection = styled.section`
padding: 40px;
box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
@media (max-width: 800px) {
padding: 20px;
}
`

13
web/src/components/DialogTorrentDetailsContent/Table/index.jsx
View File

@@ -73,6 +73,7 @@ const Table = memo(
})}
</tbody>
</TableStyle>
<ShortTableWrapper>
{playableFileList.map(({ id, path, length }) => {
const { title, resolution, episode, season } = ptt.parse(path)
@@ -84,12 +85,14 @@ const Table = memo(
<ShortTable key={id} isViewed={isViewed}>
<div className='short-table-name'>{title}</div>
<div className='short-table-data'>
<div className='short-table-field'>
<div className='short-table-field-name'>viewed</div>
<div className='short-table-field-value'>
<div className='short-table-viewed-indicator' />
{isViewed && (
<div className='short-table-field'>
<div className='short-table-field-name'>viewed</div>
<div className='short-table-field-value'>
<div className='short-table-viewed-indicator' />
</div>
</div>
</div>
)}
{fileHasSeasonText && seasonAmount?.length === 1 && (
<div className='short-table-field'>
<div className='short-table-field-name'>season</div>

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

@@ -12,9 +12,8 @@ import { useUpdateCache, useGetSettings } from './customHooks'
import DialogHeader from './DialogHeader'
import TorrentCache from './TorrentCache'
import Table from './Table'
import DetailedView from './DetailedView'
import {
DetailedViewWidgetSection,
DetailedViewCacheSection,
DialogContentGrid,
MainSection,
Poster,
@@ -27,20 +26,18 @@ import {
TorrentFilesSection,
Divider,
} from './style'
import {
DownlodSpeedWidget,
UploadSpeedWidget,
PeersWidget,
SizeWidget,
PiecesCountWidget,
PiecesLengthWidget,
StatusWidget,
} from './widgets'
import { DownlodSpeedWidget, UploadSpeedWidget, PeersWidget, SizeWidget } from './widgets'
import TorrentFunctions from './TorrentFunctions'
import { isFilePlayable } from './helpers'
const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
const Loader = () => (
<div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
<CircularProgress />
</div>
)
export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
const [isLoading, setIsLoading] = useState(true)
const [isDetailedCacheView, setIsDetailedCacheView] = useState(false)
@@ -115,29 +112,18 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
<div style={{ minHeight: '80vh', overflow: 'auto' }}>
{isLoading ? (
<div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
<CircularProgress />
</div>
<Loader />
) : isDetailedCacheView ? (
<>
<DetailedViewWidgetSection>
<SectionTitle mb={20}>Data</SectionTitle>
<WidgetWrapper detailedView>
<DownlodSpeedWidget data={downloadSpeed} />
<UploadSpeedWidget data={uploadSpeed} />
<PeersWidget data={torrent} />
<SizeWidget data={torrentSize} />
<PiecesCountWidget data={PiecesCount} />
<PiecesLengthWidget data={PiecesLength} />
<StatusWidget data={statString} />
</WidgetWrapper>
</DetailedViewWidgetSection>
<DetailedViewCacheSection>
<SectionTitle mb={20}>Cache</SectionTitle>
<TorrentCache cache={cache} />
</DetailedViewCacheSection>
</>
<DetailedView
downloadSpeed={downloadSpeed}
uploadSpeed={uploadSpeed}
torrent={torrent}
torrentSize={torrentSize}
PiecesCount={PiecesCount}
PiecesLength={PiecesLength}
statString={statString}
cache={cache}
/>
) : (
<DialogContentGrid>
<MainSection>

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

@@ -251,21 +251,3 @@ export const Divider = styled.div`
background-color: rgba(0, 0, 0, 0.12);
margin: 30px 0;
`
export const DetailedViewWidgetSection = styled.section`
padding: 40px;
background: linear-gradient(145deg, #e4f6ed, #b5dec9);
@media (max-width: 800px) {
padding: 20px;
}
`
export const DetailedViewCacheSection = styled.section`
padding: 40px;
box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
@media (max-width: 800px) {
padding: 20px;
}
`