mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-19 21:46:11 +05:00
loaders added
This commit is contained in:
Daniel Shleifman
@@ -7,6 +7,7 @@ import ptt from 'parse-torrent-title'
|
|||||||
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'
|
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress'
|
||||||
|
|
||||||
import { useUpdateCache, useCreateCacheMap, useGetSettings } from './customHooks'
|
import { useUpdateCache, useCreateCacheMap, useGetSettings } from './customHooks'
|
||||||
import DialogHeader from './DialogHeader'
|
import DialogHeader from './DialogHeader'
|
||||||
@@ -115,197 +116,201 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
|
|||||||
{...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
|
{...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{isLoading ? (
|
<div style={{ minHeight: '80vh' }}>
|
||||||
'loading'
|
{isLoading ? (
|
||||||
) : isDetailedCacheView ? (
|
<div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
|
||||||
<DetailedTorrentCacheViewWrapper>
|
<CircularProgress />
|
||||||
<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>
|
</div>
|
||||||
|
) : isDetailedCacheView ? (
|
||||||
<div>
|
<DetailedTorrentCacheViewWrapper>
|
||||||
<SectionTitle mb={20}>Cache</SectionTitle>
|
|
||||||
<TorrentCache cache={cache} cacheMap={cacheMap} />
|
|
||||||
</div>
|
|
||||||
</DetailedTorrentCacheViewWrapper>
|
|
||||||
) : (
|
|
||||||
<DialogContentGrid>
|
|
||||||
<MainSection>
|
|
||||||
<Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{name && name !== title ? (
|
<SectionTitle mb={20}>Data</SectionTitle>
|
||||||
<>
|
|
||||||
<SectionTitle>{shortenText(name, 50)}</SectionTitle>
|
|
||||||
<SectionSubName mb={20}>{shortenText(title, 160)}</SectionSubName>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<WidgetWrapper>
|
<WidgetWrapper>
|
||||||
<DownlodSpeedWidget data={downloadSpeed} />
|
<DownlodSpeedWidget data={downloadSpeed} />
|
||||||
<UploadSpeedWidget data={uploadSpeed} />
|
<UploadSpeedWidget data={uploadSpeed} />
|
||||||
<PeersWidget data={torrent} />
|
<PeersWidget data={torrent} />
|
||||||
<SizeWidget data={torrentSize} />
|
<SizeWidget data={torrentSize} />
|
||||||
|
<PiecesCountWidget data={PiecesCount} />
|
||||||
|
<PiecesLengthWidget data={PiecesLength} />
|
||||||
|
<StatusWidget data={statString} />
|
||||||
</WidgetWrapper>
|
</WidgetWrapper>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Divider />
|
<div>
|
||||||
|
<SectionTitle mb={20}>Cache</SectionTitle>
|
||||||
|
<TorrentCache cache={cache} cacheMap={cacheMap} />
|
||||||
|
</div>
|
||||||
|
</DetailedTorrentCacheViewWrapper>
|
||||||
|
) : (
|
||||||
|
<DialogContentGrid>
|
||||||
|
<MainSection>
|
||||||
|
<Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
|
||||||
|
|
||||||
{!isOnlyOnePlayableFile && !!viewedFileList?.length && (
|
<div>
|
||||||
<>
|
{name && name !== title ? (
|
||||||
<SmallLabel>Download Playlist</SmallLabel>
|
<>
|
||||||
<SectionSubName mb={10}>
|
<SectionTitle>{shortenText(name, 50)}</SectionTitle>
|
||||||
<strong>Latest file played:</strong> {latestViewedFileData.title}.
|
<SectionSubName mb={20}>{shortenText(title, 160)}</SectionSubName>
|
||||||
{latestViewedFileData.season && (
|
</>
|
||||||
<>
|
) : (
|
||||||
{' '}
|
<SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle>
|
||||||
Season: {latestViewedFileData.season}. Episode: {latestViewedFileData.episode}.
|
)}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</SectionSubName>
|
|
||||||
|
|
||||||
<MainSectionButtonGroup>
|
<WidgetWrapper>
|
||||||
|
<DownlodSpeedWidget data={downloadSpeed} />
|
||||||
|
<UploadSpeedWidget data={uploadSpeed} />
|
||||||
|
<PeersWidget data={torrent} />
|
||||||
|
<SizeWidget data={torrentSize} />
|
||||||
|
</WidgetWrapper>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
{!isOnlyOnePlayableFile && !!viewedFileList?.length && (
|
||||||
|
<>
|
||||||
|
<SmallLabel>Download Playlist</SmallLabel>
|
||||||
|
<SectionSubName mb={10}>
|
||||||
|
<strong>Latest file played:</strong> {latestViewedFileData.title}.
|
||||||
|
{latestViewedFileData.season && (
|
||||||
|
<>
|
||||||
|
{' '}
|
||||||
|
Season: {latestViewedFileData.season}. Episode: {latestViewedFileData.episode}.
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</SectionSubName>
|
||||||
|
|
||||||
|
<MainSectionButtonGroup>
|
||||||
|
<a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
|
||||||
|
<Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
|
||||||
|
full
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a style={{ textDecoration: 'none' }} href={partialPlaylistLink}>
|
||||||
|
<Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
|
||||||
|
from latest file
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</MainSectionButtonGroup>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<SmallLabel mb={10}>Torrent State</SmallLabel>
|
||||||
|
|
||||||
|
<MainSectionButtonGroup>
|
||||||
|
<Button onClick={() => removeTorrentViews()} variant='contained' color='primary' size='large'>
|
||||||
|
remove views
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => dropTorrent()} variant='contained' color='primary' size='large'>
|
||||||
|
drop torrent
|
||||||
|
</Button>
|
||||||
|
</MainSectionButtonGroup>
|
||||||
|
|
||||||
|
<SmallLabel mb={10}>Info</SmallLabel>
|
||||||
|
|
||||||
|
<MainSectionButtonGroup>
|
||||||
|
{(isOnlyOnePlayableFile || !viewedFileList?.length) && (
|
||||||
<a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
|
<a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
|
||||||
<Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
|
<Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
|
||||||
full
|
download playlist
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
|
)}
|
||||||
|
<CopyToClipboard text={hash}>
|
||||||
|
<Button variant='contained' color='primary' size='large'>
|
||||||
|
copy hash
|
||||||
|
</Button>
|
||||||
|
</CopyToClipboard>
|
||||||
|
</MainSectionButtonGroup>
|
||||||
|
</div>
|
||||||
|
</MainSection>
|
||||||
|
|
||||||
<a style={{ textDecoration: 'none' }} href={partialPlaylistLink}>
|
<CacheSection>
|
||||||
<Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
|
<SectionHeader>
|
||||||
from latest file
|
<SectionTitle mb={20}>Buffer</SectionTitle>
|
||||||
</Button>
|
{!settings?.PreloadBuffer && (
|
||||||
</a>
|
<SectionSubName>Enable "Preload Buffer" in settings to change buffer size</SectionSubName>
|
||||||
</MainSectionButtonGroup>
|
)}
|
||||||
|
<LoadingProgress
|
||||||
|
value={Filled}
|
||||||
|
fullAmount={bufferSize}
|
||||||
|
label={`${humanizeSize(Filled) || '0 B'} / ${humanizeSize(bufferSize)}`}
|
||||||
|
/>
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
|
<TorrentCache isMini cache={cache} cacheMap={cacheMap} />
|
||||||
|
<Button
|
||||||
|
style={{ marginTop: '30px' }}
|
||||||
|
variant='contained'
|
||||||
|
color='primary'
|
||||||
|
size='large'
|
||||||
|
onClick={() => setIsDetailedCacheView(true)}
|
||||||
|
>
|
||||||
|
Detailed cache view
|
||||||
|
</Button>
|
||||||
|
</CacheSection>
|
||||||
|
|
||||||
|
<TorrentFilesSection>
|
||||||
|
<SectionTitle mb={20}>Torrent Content</SectionTitle>
|
||||||
|
|
||||||
|
{!playableFileList?.length ? (
|
||||||
|
'No playable files in this torrent'
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: '0' }}>viewed</th>
|
||||||
|
<th>name</th>
|
||||||
|
{fileHasSeasonText && <th style={{ width: '0' }}>season</th>}
|
||||||
|
{fileHasEpisodeText && <th style={{ width: '0' }}>episode</th>}
|
||||||
|
{fileHasResolutionText && <th style={{ width: '0' }}>resolution</th>}
|
||||||
|
<th style={{ width: '100px' }}>size</th>
|
||||||
|
<th style={{ width: '400px' }}>actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{playableFileList.map(({ id, path, length }) => {
|
||||||
|
const { title, resolution, episode, season } = ptt.parse(path)
|
||||||
|
const isViewed = viewedFileList?.includes(id)
|
||||||
|
const link = getFileLink(path, id)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={id} className={isViewed ? 'viewed-file-row' : null}>
|
||||||
|
<td className={isViewed ? 'viewed-file-indicator' : null} />
|
||||||
|
<td>{title}</td>
|
||||||
|
{fileHasSeasonText && <td>{season}</td>}
|
||||||
|
{fileHasEpisodeText && <td>{episode}</td>}
|
||||||
|
{fileHasResolutionText && <td>{resolution}</td>}
|
||||||
|
<td>{humanizeSize(length)}</td>
|
||||||
|
<td className='button-cell'>
|
||||||
|
<Button onClick={() => preloadBuffer(id)} variant='outlined' color='primary' size='small'>
|
||||||
|
Preload
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
|
||||||
|
<Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
|
||||||
|
Open link
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<CopyToClipboard text={link}>
|
||||||
|
<Button variant='outlined' color='primary' size='small'>
|
||||||
|
Copy link
|
||||||
|
</Button>
|
||||||
|
</CopyToClipboard>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</TorrentFilesSection>
|
||||||
<SmallLabel mb={10}>Torrent State</SmallLabel>
|
</DialogContentGrid>
|
||||||
|
)}
|
||||||
<MainSectionButtonGroup>
|
</div>
|
||||||
<Button onClick={() => removeTorrentViews()} variant='contained' color='primary' size='large'>
|
|
||||||
remove views
|
|
||||||
</Button>
|
|
||||||
<Button onClick={() => dropTorrent()} variant='contained' color='primary' size='large'>
|
|
||||||
drop torrent
|
|
||||||
</Button>
|
|
||||||
</MainSectionButtonGroup>
|
|
||||||
|
|
||||||
<SmallLabel mb={10}>Info</SmallLabel>
|
|
||||||
|
|
||||||
<MainSectionButtonGroup>
|
|
||||||
{(isOnlyOnePlayableFile || !viewedFileList?.length) && (
|
|
||||||
<a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
|
|
||||||
<Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
|
|
||||||
download playlist
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
<CopyToClipboard text={hash}>
|
|
||||||
<Button variant='contained' color='primary' size='large'>
|
|
||||||
copy hash
|
|
||||||
</Button>
|
|
||||||
</CopyToClipboard>
|
|
||||||
</MainSectionButtonGroup>
|
|
||||||
</div>
|
|
||||||
</MainSection>
|
|
||||||
|
|
||||||
<CacheSection>
|
|
||||||
<SectionHeader>
|
|
||||||
<SectionTitle mb={20}>Buffer</SectionTitle>
|
|
||||||
{!settings?.PreloadBuffer && (
|
|
||||||
<SectionSubName>Enable "Preload Buffer" in settings to change buffer size</SectionSubName>
|
|
||||||
)}
|
|
||||||
<LoadingProgress
|
|
||||||
value={Filled}
|
|
||||||
fullAmount={bufferSize}
|
|
||||||
label={`${humanizeSize(Filled) || '0 B'} / ${humanizeSize(bufferSize)}`}
|
|
||||||
/>
|
|
||||||
</SectionHeader>
|
|
||||||
|
|
||||||
<TorrentCache isMini cache={cache} cacheMap={cacheMap} />
|
|
||||||
<Button
|
|
||||||
style={{ marginTop: '30px' }}
|
|
||||||
variant='contained'
|
|
||||||
color='primary'
|
|
||||||
size='large'
|
|
||||||
onClick={() => setIsDetailedCacheView(true)}
|
|
||||||
>
|
|
||||||
Detailed cache view
|
|
||||||
</Button>
|
|
||||||
</CacheSection>
|
|
||||||
|
|
||||||
<TorrentFilesSection>
|
|
||||||
<SectionTitle mb={20}>Torrent Content</SectionTitle>
|
|
||||||
|
|
||||||
{!playableFileList?.length ? (
|
|
||||||
'No playable files in this torrent'
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: '0' }}>viewed</th>
|
|
||||||
<th>name</th>
|
|
||||||
{fileHasSeasonText && <th style={{ width: '0' }}>season</th>}
|
|
||||||
{fileHasEpisodeText && <th style={{ width: '0' }}>episode</th>}
|
|
||||||
{fileHasResolutionText && <th style={{ width: '0' }}>resolution</th>}
|
|
||||||
<th style={{ width: '100px' }}>size</th>
|
|
||||||
<th style={{ width: '400px' }}>actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{playableFileList.map(({ id, path, length }) => {
|
|
||||||
const { title, resolution, episode, season } = ptt.parse(path)
|
|
||||||
const isViewed = viewedFileList?.includes(id)
|
|
||||||
const link = getFileLink(path, id)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr key={id} className={isViewed ? 'viewed-file-row' : null}>
|
|
||||||
<td className={isViewed ? 'viewed-file-indicator' : null} />
|
|
||||||
<td>{title}</td>
|
|
||||||
{fileHasSeasonText && <td>{season}</td>}
|
|
||||||
{fileHasEpisodeText && <td>{episode}</td>}
|
|
||||||
{fileHasResolutionText && <td>{resolution}</td>}
|
|
||||||
<td>{humanizeSize(length)}</td>
|
|
||||||
<td className='button-cell'>
|
|
||||||
<Button onClick={() => preloadBuffer(id)} variant='outlined' color='primary' size='small'>
|
|
||||||
Preload
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
|
|
||||||
<Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
|
|
||||||
Open link
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<CopyToClipboard text={link}>
|
|
||||||
<Button variant='outlined' color='primary' size='small'>
|
|
||||||
Copy link
|
|
||||||
</Button>
|
|
||||||
</CopyToClipboard>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</TorrentFilesSection>
|
|
||||||
</DialogContentGrid>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -92,7 +92,6 @@ export const SectionHeader = styled.div`
|
|||||||
|
|
||||||
export const DetailedTorrentCacheViewWrapper = styled.div`
|
export const DetailedTorrentCacheViewWrapper = styled.div`
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
min-height: 80vh;
|
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
> :not(:last-child) {
|
> :not(:last-child) {
|
||||||
padding-bottom: 50px;
|
padding-bottom: 50px;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { Typography } from '@material-ui/core'
|
|||||||
import { torrentsHost } from 'utils/Hosts'
|
import { torrentsHost } from 'utils/Hosts'
|
||||||
import TorrentCard from 'components/TorrentCard'
|
import TorrentCard from 'components/TorrentCard'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress'
|
||||||
|
|
||||||
const TorrentListWrapper = styled.div`
|
const TorrentListWrapper = styled.div`
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -20,9 +21,16 @@ const TorrentListWrapper = styled.div`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const CenteredGrid = styled.div`
|
||||||
|
height: 75vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
`
|
||||||
|
|
||||||
export default function TorrentList() {
|
export default function TorrentList() {
|
||||||
const [torrents, setTorrents] = useState([])
|
const [torrents, setTorrents] = useState([])
|
||||||
const [offline, setOffline] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [isOffline, setIsOffline] = useState(true)
|
||||||
const timerID = useRef(-1)
|
const timerID = useRef(-1)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -33,27 +41,34 @@ export default function TorrentList() {
|
|||||||
.then(({ data }) => {
|
.then(({ data }) => {
|
||||||
// updating torrent list
|
// updating torrent list
|
||||||
setTorrents(data)
|
setTorrents(data)
|
||||||
setOffline(false)
|
setIsOffline(false)
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
// resetting torrent list
|
// resetting torrent list
|
||||||
setTorrents([])
|
setTorrents([])
|
||||||
setOffline(true)
|
setIsOffline(true)
|
||||||
})
|
})
|
||||||
|
.finally(() => setIsLoading(false))
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
return () => clearInterval(timerID.current)
|
return () => clearInterval(timerID.current)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return isLoading ? (
|
||||||
|
<CenteredGrid>
|
||||||
|
<CircularProgress />
|
||||||
|
</CenteredGrid>
|
||||||
|
) : isOffline ? (
|
||||||
|
<CenteredGrid>
|
||||||
|
<Typography>Offline</Typography>
|
||||||
|
</CenteredGrid>
|
||||||
|
) : !torrents.length ? (
|
||||||
|
<Typography>No torrents added</Typography>
|
||||||
|
) : (
|
||||||
<TorrentListWrapper>
|
<TorrentListWrapper>
|
||||||
{offline ? (
|
{torrents.map(torrent => (
|
||||||
<Typography>Offline</Typography>
|
<TorrentCard key={torrent.hash} torrent={torrent} />
|
||||||
) : !torrents.length ? (
|
))}
|
||||||
<Typography>No torrents added</Typography>
|
|
||||||
) : (
|
|
||||||
torrents.map(torrent => <TorrentCard key={torrent.hash} torrent={torrent} />)
|
|
||||||
)}
|
|
||||||
</TorrentListWrapper>
|
</TorrentListWrapper>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user