mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-20 05:56:10 +05:00
eslint added. lots of refactor
This commit is contained in:
Daniel Shleifman
@@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
|
||||
export default function AboutDialog() {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItem button key="Settings" onClick={()=>{setOpen(true)}}>
|
||||
<ListItemIcon>
|
||||
<InfoIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="About" />
|
||||
</ListItem>
|
||||
<Dialog open={open} onClose={()=>{setOpen(false)}} aria-labelledby="form-dialog-title" fullWidth={true} maxWidth={'lg'}>
|
||||
<DialogTitle id="form-dialog-title">About</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
<center><h2>Thanks to everyone who tested and helped.</h2></center><br/>
|
||||
<h2>Special thanks:</h2>
|
||||
<b>Anacrolix Matt Joiner</b> <a href={'https://github.com/anacrolix/'}>github.com/anacrolix</a><br/>
|
||||
<b>tsynik nikk Никита</b> <a href={'https://github.com/tsynik'}>github.com/tsynik</a><br/>
|
||||
<b>Tw1cker Руслан Пахнев</b> <a href={'https://github.com/Nemiroff'}>github.com/Nemiroff</a><br/>
|
||||
<b>SpAwN_LMG</b><br/>
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={()=>{setOpen(false)}} color="primary" variant="outlined" autoFocus>
|
||||
Close
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
56
web/src/components/About.jsx
Normal file
56
web/src/components/About.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogContentText from '@material-ui/core/DialogContentText'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import InfoIcon from '@material-ui/icons/Info'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
|
||||
export default function AboutDialog() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItem button key='Settings' onClick={() => setOpen(true)}>
|
||||
<ListItemIcon>
|
||||
<InfoIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='About' />
|
||||
</ListItem>
|
||||
|
||||
<Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='lg'>
|
||||
<DialogTitle id='form-dialog-title'>About</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<DialogContent>
|
||||
<DialogContentText id='alert-dialog-description'>
|
||||
<center>
|
||||
<h2>Thanks to everyone who tested and helped.</h2>
|
||||
</center>
|
||||
<br />
|
||||
<h2>Special thanks:</h2>
|
||||
<b>Anacrolix Matt Joiner</b> <a href='https://github.com/anacrolix/'>github.com/anacrolix</a>
|
||||
<br />
|
||||
<b>tsynik nikk Никита</b> <a href='https://github.com/tsynik'>github.com/tsynik</a>
|
||||
<br />
|
||||
<b>Tw1cker Руслан Пахнев</b> <a href='https://github.com/Nemiroff'>github.com/Nemiroff</a>
|
||||
<br />
|
||||
<b>SpAwN_LMG</b>
|
||||
<br />
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
|
||||
Close
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import { torrentsHost } from '../../utils/Hosts'
|
||||
|
||||
export default function AddDialog({ handleClose }) {
|
||||
const [magnet, setMagnet] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [poster, setPoster] = useState('')
|
||||
|
||||
const inputMagnet = ({ target: { value } }) => setMagnet(value)
|
||||
const inputTitle = ({ target: { value } }) => setTitle(value)
|
||||
const inputPoster = ({ target: { value } }) => setPoster(value)
|
||||
|
||||
const handleCloseSave = () => {
|
||||
try {
|
||||
if (!magnet) return
|
||||
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
action: 'add',
|
||||
link: magnet,
|
||||
title: title,
|
||||
poster: poster,
|
||||
save_to_db: true,
|
||||
}),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
handleClose()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open onClose={handleClose} aria-labelledby="form-dialog-title" fullWidth>
|
||||
<DialogTitle id="form-dialog-title">Add magnet or link to torrent file</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<TextField onChange={inputTitle} margin="dense" id="title" label="Title" type="text" fullWidth />
|
||||
<TextField onChange={inputPoster} margin="dense" id="poster" label="Poster" type="url" fullWidth />
|
||||
<TextField onChange={inputMagnet} autoFocus margin="dense" id="magnet" label="Magnet or torrent file link" type="text" fullWidth />
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="primary" variant="outlined">
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button disabled={!magnet} onClick={handleCloseSave} color="primary" variant="outlined">
|
||||
Add
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
72
web/src/components/Add/AddDialog.jsx
Normal file
72
web/src/components/Add/AddDialog.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import { torrentsHost } from 'utils/Hosts'
|
||||
|
||||
export default function AddDialog({ handleClose }) {
|
||||
const [magnet, setMagnet] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [poster, setPoster] = useState('')
|
||||
|
||||
const inputMagnet = ({ target: { value } }) => setMagnet(value)
|
||||
const inputTitle = ({ target: { value } }) => setTitle(value)
|
||||
const inputPoster = ({ target: { value } }) => setPoster(value)
|
||||
|
||||
const handleCloseSave = () => {
|
||||
try {
|
||||
if (!magnet) return
|
||||
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
action: 'add',
|
||||
link: magnet,
|
||||
title,
|
||||
poster,
|
||||
save_to_db: true,
|
||||
}),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
handleClose()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
|
||||
<DialogTitle id='form-dialog-title'>Add magnet or link to torrent file</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<TextField onChange={inputTitle} margin='dense' id='title' label='Title' type='text' fullWidth />
|
||||
<TextField onChange={inputPoster} margin='dense' id='poster' label='Poster' type='url' fullWidth />
|
||||
<TextField
|
||||
onChange={inputMagnet}
|
||||
autoFocus
|
||||
margin='dense'
|
||||
id='magnet'
|
||||
label='Magnet or torrent file link'
|
||||
type='text'
|
||||
fullWidth
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color='primary' variant='outlined'>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button disabled={!magnet} onClick={handleCloseSave} color='primary' variant='outlined'>
|
||||
Add
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import AddDialog from './AddDialog'
|
||||
|
||||
export default function AddDialogButton() {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
|
||||
const handleClickOpen = () => setIsDialogOpen(true)
|
||||
const handleClose = () => setIsDialogOpen(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItem button key="Add" onClick={handleClickOpen}>
|
||||
<ListItemIcon>
|
||||
<LibraryAddIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Add from link" />
|
||||
</ListItem>
|
||||
|
||||
{isDialogOpen && <AddDialog handleClose={handleClose} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
web/src/components/Add/index.jsx
Normal file
27
web/src/components/Add/index.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { useState } from 'react'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
|
||||
import AddDialog from './AddDialog'
|
||||
|
||||
export default function AddDialogButton() {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
|
||||
const handleClickOpen = () => setIsDialogOpen(true)
|
||||
const handleClose = () => setIsDialogOpen(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItem button key='Add' onClick={handleClickOpen}>
|
||||
<ListItemIcon>
|
||||
<LibraryAddIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Add from link' />
|
||||
</ListItem>
|
||||
|
||||
{isDialogOpen && <AddDialog handleClose={handleClose} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { useTheme } from '@material-ui/core/styles'
|
||||
import Drawer from '@material-ui/core/Drawer'
|
||||
import AppBar from '@material-ui/core/AppBar'
|
||||
import Toolbar from '@material-ui/core/Toolbar'
|
||||
import List from '@material-ui/core/List'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Divider from '@material-ui/core/Divider'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import MenuIcon from '@material-ui/icons/Menu'
|
||||
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
|
||||
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import CreditCardIcon from '@material-ui/icons/CreditCard'
|
||||
|
||||
import ListIcon from '@material-ui/icons/List'
|
||||
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
|
||||
|
||||
import TorrentList from '../TorrentList'
|
||||
|
||||
import AddDialogButton from '../Add'
|
||||
import RemoveAll from '../RemoveAll'
|
||||
import SettingsDialog from '../Settings'
|
||||
import AboutDialog from '../About'
|
||||
import { playlistAllHost, shutdownHost, torrserverHost } from '../../utils/Hosts'
|
||||
import DonateSnackbar from '../Donate'
|
||||
import DonateDialog from '../Donate/DonateDialog'
|
||||
import UploadDialog from '../Upload'
|
||||
import useStyles from './useStyles'
|
||||
|
||||
export default function MiniDrawer() {
|
||||
const classes = useStyles()
|
||||
const theme = useTheme()
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
|
||||
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
|
||||
const [tsVersion, setTSVersion] = useState('')
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setIsDrawerOpen(true)
|
||||
}
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setIsDrawerOpen(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch(torrserverHost + '/echo')
|
||||
.then((resp) => resp.text())
|
||||
.then((txt) => {
|
||||
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
|
||||
})
|
||||
}, [isDrawerOpen])
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
className={clsx(classes.appBar, {
|
||||
[classes.appBarShift]: isDrawerOpen,
|
||||
})}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={handleDrawerOpen}
|
||||
edge="start"
|
||||
className={clsx(classes.menuButton, {
|
||||
[classes.hide]: isDrawerOpen,
|
||||
})}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap>
|
||||
TorrServer {tsVersion}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
className={clsx(classes.drawer, {
|
||||
[classes.drawerOpen]: isDrawerOpen,
|
||||
[classes.drawerClose]: !isDrawerOpen,
|
||||
})}
|
||||
classes={{
|
||||
paper: clsx({
|
||||
[classes.drawerOpen]: isDrawerOpen,
|
||||
[classes.drawerClose]: !isDrawerOpen,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<div className={classes.toolbar}>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<AddDialogButton />
|
||||
<UploadDialog />
|
||||
<RemoveAll />
|
||||
<ListItem button component="a" key="Playlist all torrents" target="_blank" href={playlistAllHost()}>
|
||||
<ListItemIcon>
|
||||
<ListIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Playlist all torrents" />
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<SettingsDialog />
|
||||
<AboutDialog />
|
||||
<ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
|
||||
<ListItemIcon>
|
||||
<PowerSettingsNewIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Close server" />
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<ListItem button key="Donation" onClick={() => setIsDonationDialogOpen(true)}>
|
||||
<ListItemIcon>
|
||||
<CreditCardIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Donate" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Drawer>
|
||||
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
|
||||
<TorrentList />
|
||||
</main>
|
||||
|
||||
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
|
||||
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
149
web/src/components/Appbar/index.jsx
Normal file
149
web/src/components/Appbar/index.jsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { useTheme } from '@material-ui/core/styles'
|
||||
import Drawer from '@material-ui/core/Drawer'
|
||||
import AppBar from '@material-ui/core/AppBar'
|
||||
import Toolbar from '@material-ui/core/Toolbar'
|
||||
import List from '@material-ui/core/List'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Divider from '@material-ui/core/Divider'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import MenuIcon from '@material-ui/icons/Menu'
|
||||
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
|
||||
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import CreditCardIcon from '@material-ui/icons/CreditCard'
|
||||
import ListIcon from '@material-ui/icons/List'
|
||||
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
|
||||
import { playlistAllHost, shutdownHost, getTorrServerHost } from 'utils/Hosts'
|
||||
import TorrentList from 'components/TorrentList'
|
||||
import AddDialogButton from 'components/Add'
|
||||
import RemoveAll from 'components/RemoveAll'
|
||||
import SettingsDialog from 'components/Settings'
|
||||
import AboutDialog from 'components/About'
|
||||
import DonateSnackbar from 'components/Donate'
|
||||
import DonateDialog from 'components/Donate/DonateDialog'
|
||||
import UploadDialog from 'components/Upload'
|
||||
|
||||
import useStyles from './useStyles'
|
||||
|
||||
export default function MiniDrawer() {
|
||||
const classes = useStyles()
|
||||
const theme = useTheme()
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
|
||||
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
|
||||
const [tsVersion, setTSVersion] = useState('')
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setIsDrawerOpen(true)
|
||||
}
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setIsDrawerOpen(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${getTorrServerHost()}/echo`)
|
||||
.then(resp => resp.text())
|
||||
.then(txt => {
|
||||
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
|
||||
})
|
||||
}, [isDrawerOpen])
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar
|
||||
position='fixed'
|
||||
className={clsx(classes.appBar, {
|
||||
[classes.appBarShift]: isDrawerOpen,
|
||||
})}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color='inherit'
|
||||
aria-label='open drawer'
|
||||
onClick={handleDrawerOpen}
|
||||
edge='start'
|
||||
className={clsx(classes.menuButton, {
|
||||
[classes.hide]: isDrawerOpen,
|
||||
})}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant='h6' noWrap>
|
||||
TorrServer {tsVersion}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Drawer
|
||||
variant='permanent'
|
||||
className={clsx(classes.drawer, {
|
||||
[classes.drawerOpen]: isDrawerOpen,
|
||||
[classes.drawerClose]: !isDrawerOpen,
|
||||
})}
|
||||
classes={{
|
||||
paper: clsx({
|
||||
[classes.drawerOpen]: isDrawerOpen,
|
||||
[classes.drawerClose]: !isDrawerOpen,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<div className={classes.toolbar}>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<AddDialogButton />
|
||||
<UploadDialog />
|
||||
<RemoveAll />
|
||||
<ListItem button component='a' key='Playlist all torrents' target='_blank' href={playlistAllHost()}>
|
||||
<ListItemIcon>
|
||||
<ListIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Playlist all torrents' />
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<SettingsDialog />
|
||||
<AboutDialog />
|
||||
<ListItem button key='Close server' onClick={() => fetch(shutdownHost())}>
|
||||
<ListItemIcon>
|
||||
<PowerSettingsNewIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Close server' />
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<ListItem button key='Donation' onClick={() => setIsDonationDialogOpen(true)}>
|
||||
<ListItemIcon>
|
||||
<CreditCardIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Donate' />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Drawer>
|
||||
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
|
||||
<TorrentList />
|
||||
</main>
|
||||
|
||||
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
|
||||
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,64 +2,64 @@ import { makeStyles } from '@material-ui/core/styles'
|
||||
|
||||
const drawerWidth = 240
|
||||
|
||||
export default makeStyles((theme) => ({
|
||||
export default makeStyles(theme => ({
|
||||
root: {
|
||||
display: 'flex',
|
||||
display: 'flex',
|
||||
},
|
||||
appBar: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
},
|
||||
appBarShift: {
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
menuButton: {
|
||||
marginRight: 36,
|
||||
marginRight: 36,
|
||||
},
|
||||
hide: {
|
||||
display: 'none',
|
||||
display: 'none',
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
width: drawerWidth,
|
||||
flexShrink: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
drawerOpen: {
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
drawerClose: {
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
width: theme.spacing(7) + 1,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: theme.spacing(9) + 1,
|
||||
},
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
width: theme.spacing(7) + 1,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: theme.spacing(9) + 1,
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3),
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3),
|
||||
},
|
||||
}))
|
||||
}))
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
|
||||
import { getPeerString, humanizeSize } from '../utils/Utils'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import { cacheHost } from '../utils/Hosts'
|
||||
|
||||
export default function DialogCacheInfo(props) {
|
||||
const [hash] = React.useState(props.hash)
|
||||
const [cache, setCache] = React.useState({})
|
||||
const timerID = useRef(-1)
|
||||
const [pMap, setPMap] = React.useState([])
|
||||
|
||||
useEffect(() => {
|
||||
if (hash)
|
||||
timerID.current = setInterval(() => {
|
||||
getCache(hash, (cache) => {
|
||||
setCache(cache)
|
||||
})
|
||||
}, 100)
|
||||
else clearInterval(timerID.current)
|
||||
|
||||
return () => {
|
||||
clearInterval(timerID.current)
|
||||
}
|
||||
}, [hash, props.open])
|
||||
|
||||
useEffect(() => {
|
||||
if (cache && cache.PiecesCount && cache.Pieces) {
|
||||
var map = [];
|
||||
for (let i = 0; i < cache.PiecesCount; i++) {
|
||||
var reader = 0
|
||||
var cls = "piece"
|
||||
var prc = 0
|
||||
if (cache.Pieces[i]) {
|
||||
if (cache.Pieces[i].Completed && cache.Pieces[i].Size >= cache.Pieces[i].Length)
|
||||
cls += " piece-complete"
|
||||
else
|
||||
cls += " piece-loading"
|
||||
prc = (cache.Pieces[i].Size / cache.Pieces[i].Length * 100).toFixed(2)
|
||||
}
|
||||
|
||||
cache.Readers.forEach(r => {
|
||||
if (i >= r.Start && i <= r.End && i !== r.Reader)
|
||||
cls += " reader-range"
|
||||
if (i === r.Reader) {
|
||||
cls += " piece-reader"
|
||||
}
|
||||
})
|
||||
map.push({
|
||||
prc: prc,
|
||||
class: cls,
|
||||
info: i,
|
||||
reader: reader,
|
||||
})
|
||||
}
|
||||
setPMap(map)
|
||||
}
|
||||
}, [cache.Pieces])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DialogTitle id="form-dialog-title">
|
||||
<Typography>
|
||||
<b>Hash </b> {cache.Hash}
|
||||
<br />
|
||||
<b>Capacity </b> {humanizeSize(cache.Capacity)}
|
||||
<br />
|
||||
<b>Filled </b> {humanizeSize(cache.Filled)}
|
||||
<br />
|
||||
<b>Torrent size </b> {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)}
|
||||
<br />
|
||||
<b>Pieces length </b> {humanizeSize(cache.PiecesLength)}
|
||||
<br />
|
||||
<b>Pieces count </b> {cache.PiecesCount}
|
||||
<br />
|
||||
<b>Peers: </b> {getPeerString(cache.Torrent)}
|
||||
<br />
|
||||
<b>Download speed </b> {cache.Torrent && cache.Torrent.download_speed ? humanizeSize(cache.Torrent.download_speed) + '/sec' : ''}
|
||||
<br />
|
||||
<b>Upload speed </b> {cache.Torrent && cache.Torrent.upload_speed ? humanizeSize(cache.Torrent.upload_speed) + '/sec' : ''}
|
||||
<br />
|
||||
<b>Status </b> {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<div className="cache">
|
||||
{pMap.map(itm => (
|
||||
<span key={itm.info} className={itm.class} title={itm.info}>
|
||||
{itm.prc > 0 && itm.prc < 100 && (
|
||||
<div className="piece-progress" style={{ height: itm.prc / 100 * 12 + "px" }}></div>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getCache(hash, callback) {
|
||||
try {
|
||||
fetch(cacheHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'get', hash: hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then(
|
||||
(json) => {
|
||||
callback(json)
|
||||
},
|
||||
(error) => {
|
||||
callback({})
|
||||
console.error(error)
|
||||
}
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
callback({})
|
||||
}
|
||||
}
|
||||
/*
|
||||
{
|
||||
"Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e",
|
||||
"Capacity": 209715200,
|
||||
"Filled": 2914808,
|
||||
"PiecesLength": 4194304,
|
||||
"PiecesCount": 2065,
|
||||
"DownloadSpeed": 32770.860273455524,
|
||||
"Pieces": {
|
||||
"2064": {
|
||||
"Id": 2064,
|
||||
"Length": 2914808,
|
||||
"Size": 162296,
|
||||
"Completed": false
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
142
web/src/components/DialogCacheInfo.jsx
Normal file
142
web/src/components/DialogCacheInfo.jsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import { getPeerString, humanizeSize } from 'utils/Utils'
|
||||
import { cacheHost } from 'utils/Hosts'
|
||||
|
||||
export default function DialogCacheInfo({ hash, open }) {
|
||||
const [cache, setCache] = useState({})
|
||||
const timerID = useRef(-1)
|
||||
const [pMap, setPMap] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
if (hash)
|
||||
timerID.current = setInterval(() => {
|
||||
getCache(hash, cache => {
|
||||
setCache(cache)
|
||||
})
|
||||
}, 100)
|
||||
else clearInterval(timerID.current)
|
||||
|
||||
return () => {
|
||||
clearInterval(timerID.current)
|
||||
}
|
||||
}, [hash, open])
|
||||
|
||||
useEffect(() => {
|
||||
if (cache && cache.PiecesCount && cache.Pieces) {
|
||||
const map = []
|
||||
for (let i = 0; i < cache.PiecesCount; i++) {
|
||||
const reader = 0
|
||||
let cls = 'piece'
|
||||
let prc = 0
|
||||
if (cache.Pieces[i]) {
|
||||
if (cache.Pieces[i].Completed && cache.Pieces[i].Size >= cache.Pieces[i].Length) cls += ' piece-complete'
|
||||
else cls += ' piece-loading'
|
||||
prc = ((cache.Pieces[i].Size / cache.Pieces[i].Length) * 100).toFixed(2)
|
||||
}
|
||||
|
||||
cache.Readers.forEach(r => {
|
||||
if (i >= r.Start && i <= r.End && i !== r.Reader) cls += ' reader-range'
|
||||
if (i === r.Reader) {
|
||||
cls += ' piece-reader'
|
||||
}
|
||||
})
|
||||
map.push({
|
||||
prc,
|
||||
class: cls,
|
||||
info: i,
|
||||
reader,
|
||||
})
|
||||
}
|
||||
setPMap(map)
|
||||
}
|
||||
}, [cache.Pieces])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DialogTitle id='form-dialog-title'>
|
||||
<Typography>
|
||||
<b>Hash </b> {cache.Hash}
|
||||
<br />
|
||||
<b>Capacity </b> {humanizeSize(cache.Capacity)}
|
||||
<br />
|
||||
<b>Filled </b> {humanizeSize(cache.Filled)}
|
||||
<br />
|
||||
<b>Torrent size </b> {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)}
|
||||
<br />
|
||||
<b>Pieces length </b> {humanizeSize(cache.PiecesLength)}
|
||||
<br />
|
||||
<b>Pieces count </b> {cache.PiecesCount}
|
||||
<br />
|
||||
<b>Peers: </b> {getPeerString(cache.Torrent)}
|
||||
<br />
|
||||
<b>Download speed </b>{' '}
|
||||
{cache.Torrent && cache.Torrent.download_speed ? `${humanizeSize(cache.Torrent.download_speed)}/sec` : ''}
|
||||
<br />
|
||||
<b>Upload speed </b>{' '}
|
||||
{cache.Torrent && cache.Torrent.upload_speed ? `${humanizeSize(cache.Torrent.upload_speed)}/sec` : ''}
|
||||
<br />
|
||||
<b>Status </b> {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<div className='cache'>
|
||||
{pMap.map(itm => (
|
||||
<span key={itm.info} className={itm.class} title={itm.info}>
|
||||
{itm.prc > 0 && itm.prc < 100 && (
|
||||
<div className='piece-progress' style={{ height: `${(itm.prc / 100) * 12}px` }} />
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getCache(hash, callback) {
|
||||
try {
|
||||
fetch(cacheHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'get', hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
json => {
|
||||
callback(json)
|
||||
},
|
||||
error => {
|
||||
callback({})
|
||||
console.error(error)
|
||||
},
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
callback({})
|
||||
}
|
||||
}
|
||||
/*
|
||||
{
|
||||
"Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e",
|
||||
"Capacity": 209715200,
|
||||
"Filled": 2914808,
|
||||
"PiecesLength": 4194304,
|
||||
"PiecesCount": 2065,
|
||||
"DownloadSpeed": 32770.860273455524,
|
||||
"Pieces": {
|
||||
"2064": {
|
||||
"Id": 2064,
|
||||
"Length": 2914808,
|
||||
"Size": 162296,
|
||||
"Completed": false
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -1,229 +0,0 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { Button, ButtonGroup, Grid, List, ListItem } from '@material-ui/core'
|
||||
import CachedIcon from '@material-ui/icons/Cached'
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
|
||||
import { getPeerString, humanizeSize } from '../utils/Utils'
|
||||
import { playlistTorrHost, streamHost, viewedHost } from '../utils/Hosts'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
|
||||
const style = {
|
||||
width100: {
|
||||
width: '100%',
|
||||
},
|
||||
width80: {
|
||||
width: '80%',
|
||||
},
|
||||
poster: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
}
|
||||
|
||||
export default function DialogTorrentInfo(props) {
|
||||
const [torrent, setTorrent] = React.useState(props.torrent)
|
||||
const [viewed, setViewed] = React.useState(null)
|
||||
const [progress, setProgress] = React.useState(-1)
|
||||
|
||||
useEffect(() => {
|
||||
setTorrent(props.torrent)
|
||||
if(torrent.stat==2)
|
||||
setProgress(torrent.preloaded_bytes * 100 / torrent.preload_size)
|
||||
getViewed(props.torrent.hash,(list) => {
|
||||
if (list) {
|
||||
let lst = list.map((itm) => itm.file_index)
|
||||
setViewed(lst)
|
||||
}else
|
||||
setViewed(null)
|
||||
})
|
||||
}, [props.torrent, props.open])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DialogTitle id="form-dialog-title">
|
||||
<Grid container spacing={1}>
|
||||
<Grid item>{torrent.poster && <img alt="" height="200" align="left" style={style.poster} src={torrent.poster} />}</Grid>
|
||||
<Grid style={style.width80} item>
|
||||
{torrent.title} {torrent.name && torrent.name !== torrent.title && ' | ' + torrent.name}
|
||||
<Typography>
|
||||
<b>Peers: </b> {getPeerString(torrent)}
|
||||
<br />
|
||||
<b>Loaded: </b> {getPreload(torrent)}
|
||||
<br />
|
||||
<b>Speed: </b> {humanizeSize(torrent.download_speed)}
|
||||
<br />
|
||||
<b>Status: </b> {torrent.stat_string}
|
||||
<br />
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{torrent.stat==2 && <LinearProgress style={{marginTop:'10px'}} variant="determinate" value={progress} />}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ButtonGroup style={style.width100} variant="contained" color="primary" aria-label="contained primary button group">
|
||||
<Button style={style.width100} href={playlistTorrHost() + '/' + encodeURIComponent(torrent.name || torrent.title || 'file') + '.m3u?link=' + torrent.hash + '&m3u'}>
|
||||
Playlist
|
||||
</Button>
|
||||
<Button style={style.width100} href={playlistTorrHost() + '/' + encodeURIComponent(torrent.name || torrent.title || 'file') + '.m3u?link=' + torrent.hash + '&m3u&fromlast'}>
|
||||
Playlist after last view
|
||||
</Button>
|
||||
<Button style={style.width100} onClick={()=>{
|
||||
remViews(torrent.hash)
|
||||
setViewed(null)
|
||||
}} >
|
||||
Remove views
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</ListItem>
|
||||
{getPlayableFile(torrent) &&
|
||||
getPlayableFile(torrent).map((file) => (
|
||||
<ButtonGroup style={style.width100} disableElevation variant="contained" color="primary">
|
||||
<Button
|
||||
style={style.width100}
|
||||
href={streamHost() + '/' + encodeURIComponent(file.path.split('\\').pop().split('/').pop()) + '?link=' + torrent.hash + '&index=' + file.id + '&play'}
|
||||
>
|
||||
<Typography>
|
||||
{file.path.split('\\').pop().split('/').pop()} | {humanizeSize(file.length)} {viewed && viewed.indexOf(file.id)!=-1 && "| ✓"}
|
||||
</Typography>
|
||||
</Button>
|
||||
<Button onClick={() => fetch(streamHost() + '?link=' + torrent.hash + '&index=' + file.id + '&preload')}>
|
||||
<CachedIcon />
|
||||
<Typography>Preload</Typography>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
))}
|
||||
</List>
|
||||
</DialogContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function remViews(hash){
|
||||
try {
|
||||
if (hash)
|
||||
fetch(viewedHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'rem', hash: hash, file_index:-1 }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function getViewed(hash, callback) {
|
||||
try {
|
||||
fetch(viewedHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'list', hash: hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then(
|
||||
(json) => {
|
||||
callback(json)
|
||||
},
|
||||
(error) => {
|
||||
callback(null)
|
||||
}
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function getPlayableFile(torrent){
|
||||
if (!torrent || !torrent.file_stats)
|
||||
return null
|
||||
return torrent.file_stats.filter(file => extPlayable.includes(getExt(file.path)))
|
||||
}
|
||||
|
||||
function getExt(filename){
|
||||
const ext = filename.split('.').pop()
|
||||
if (ext == filename)
|
||||
return ''
|
||||
return ext.toLowerCase()
|
||||
}
|
||||
|
||||
function getPreload(torrent) {
|
||||
if (torrent.preloaded_bytes > 0 && torrent.preload_size > 0 && torrent.preloaded_bytes < torrent.preload_size) {
|
||||
let progress = ((torrent.preloaded_bytes * 100) / torrent.preload_size).toFixed(2)
|
||||
return humanizeSize(torrent.preloaded_bytes) + ' / ' + humanizeSize(torrent.preload_size) + ' ' + progress + '%'
|
||||
}
|
||||
|
||||
if (!torrent.preloaded_bytes) return humanizeSize(0)
|
||||
|
||||
return humanizeSize(torrent.preloaded_bytes)
|
||||
}
|
||||
|
||||
const extPlayable = [
|
||||
// video
|
||||
"3g2",
|
||||
"3gp",
|
||||
"aaf",
|
||||
"asf",
|
||||
"avchd",
|
||||
"avi",
|
||||
"drc",
|
||||
"flv",
|
||||
"iso",
|
||||
"m2v",
|
||||
"m2ts",
|
||||
"m4p",
|
||||
"m4v",
|
||||
"mkv",
|
||||
"mng",
|
||||
"mov",
|
||||
"mp2",
|
||||
"mp4",
|
||||
"mpe",
|
||||
"mpeg",
|
||||
"mpg",
|
||||
"mpv",
|
||||
"mxf",
|
||||
"nsv",
|
||||
"ogg",
|
||||
"ogv",
|
||||
"ts",
|
||||
"qt",
|
||||
"rm",
|
||||
"rmvb",
|
||||
"roq",
|
||||
"svi",
|
||||
"vob",
|
||||
"webm",
|
||||
"wmv",
|
||||
"yuv",
|
||||
// audio
|
||||
"aac",
|
||||
"aiff",
|
||||
"ape",
|
||||
"au",
|
||||
"flac",
|
||||
"gsm",
|
||||
"it",
|
||||
"m3u",
|
||||
"m4a",
|
||||
"mid",
|
||||
"mod",
|
||||
"mp3",
|
||||
"mpa",
|
||||
"pls",
|
||||
"ra",
|
||||
"s3m",
|
||||
"sid",
|
||||
"wav",
|
||||
"wma",
|
||||
"xm"
|
||||
]
|
||||
254
web/src/components/DialogTorrentInfo.jsx
Normal file
254
web/src/components/DialogTorrentInfo.jsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { Button, ButtonGroup, Grid, List, ListItem } from '@material-ui/core'
|
||||
import CachedIcon from '@material-ui/icons/Cached'
|
||||
import LinearProgress from '@material-ui/core/LinearProgress'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import { getPeerString, humanizeSize } from 'utils/Utils'
|
||||
import { playlistTorrHost, streamHost, viewedHost } from 'utils/Hosts'
|
||||
|
||||
const style = {
|
||||
width100: {
|
||||
width: '100%',
|
||||
},
|
||||
width80: {
|
||||
width: '80%',
|
||||
},
|
||||
poster: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
}
|
||||
|
||||
export default function DialogTorrentInfo({ torrent, open }) {
|
||||
const [torrentLocalComponentValue, setTorrentLocalComponentValue] = useState(torrent)
|
||||
const [viewed, setViewed] = useState(null)
|
||||
const [progress, setProgress] = useState(-1)
|
||||
|
||||
useEffect(() => {
|
||||
setTorrentLocalComponentValue(torrent)
|
||||
if (torrentLocalComponentValue.stat === 2)
|
||||
setProgress((torrentLocalComponentValue.preloaded_bytes * 100) / torrentLocalComponentValue.preload_size)
|
||||
getViewed(torrent.hash, list => {
|
||||
if (list) {
|
||||
const lst = list.map(itm => itm.file_index)
|
||||
setViewed(lst)
|
||||
} else setViewed(null)
|
||||
})
|
||||
}, [torrent, open])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DialogTitle id='form-dialog-title'>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item>
|
||||
{torrentLocalComponentValue.poster && (
|
||||
<img alt='' height='200' align='left' style={style.poster} src={torrentLocalComponentValue.poster} />
|
||||
)}
|
||||
</Grid>
|
||||
<Grid style={style.width80} item>
|
||||
{torrentLocalComponentValue.title}{' '}
|
||||
{torrentLocalComponentValue.name &&
|
||||
torrentLocalComponentValue.name !== torrentLocalComponentValue.title &&
|
||||
` | ${torrentLocalComponentValue.name}`}
|
||||
<Typography>
|
||||
<b>Peers: </b> {getPeerString(torrentLocalComponentValue)}
|
||||
<br />
|
||||
<b>Loaded: </b> {getPreload(torrentLocalComponentValue)}
|
||||
<br />
|
||||
<b>Speed: </b> {humanizeSize(torrentLocalComponentValue.download_speed)}
|
||||
<br />
|
||||
<b>Status: </b> {torrentLocalComponentValue.stat_string}
|
||||
<br />
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{torrentLocalComponentValue.stat === 2 && (
|
||||
<LinearProgress style={{ marginTop: '10px' }} variant='determinate' value={progress} />
|
||||
)}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ButtonGroup
|
||||
style={style.width100}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
aria-label='contained primary button group'
|
||||
>
|
||||
<Button
|
||||
style={style.width100}
|
||||
href={`${playlistTorrHost()}/${encodeURIComponent(
|
||||
torrentLocalComponentValue.name || torrentLocalComponentValue.title || 'file',
|
||||
)}.m3u?link=${torrentLocalComponentValue.hash}&m3u`}
|
||||
>
|
||||
Playlist
|
||||
</Button>
|
||||
<Button
|
||||
style={style.width100}
|
||||
href={`${playlistTorrHost()}/${encodeURIComponent(
|
||||
torrentLocalComponentValue.name || torrentLocalComponentValue.title || 'file',
|
||||
)}.m3u?link=${torrentLocalComponentValue.hash}&m3u&fromlast`}
|
||||
>
|
||||
Playlist after last view
|
||||
</Button>
|
||||
<Button
|
||||
style={style.width100}
|
||||
onClick={() => {
|
||||
remViews(torrentLocalComponentValue.hash)
|
||||
setViewed(null)
|
||||
}}
|
||||
>
|
||||
Remove views
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</ListItem>
|
||||
|
||||
{getPlayableFile(torrentLocalComponentValue) &&
|
||||
getPlayableFile(torrentLocalComponentValue).map(file => (
|
||||
<ButtonGroup style={style.width100} disableElevation variant='contained' color='primary'>
|
||||
<Button
|
||||
style={style.width100}
|
||||
href={`${streamHost()}/${encodeURIComponent(file.path.split('\\').pop().split('/').pop())}?link=${
|
||||
torrentLocalComponentValue.hash
|
||||
}&index=${file.id}&play`}
|
||||
>
|
||||
<Typography>
|
||||
{file.path.split('\\').pop().split('/').pop()} | {humanizeSize(file.length)}{' '}
|
||||
{viewed && viewed.indexOf(file.id) !== -1 && '| ✓'}
|
||||
</Typography>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() =>
|
||||
fetch(`${streamHost()}?link=${torrentLocalComponentValue.hash}&index=${file.id}&preload`)
|
||||
}
|
||||
>
|
||||
<CachedIcon />
|
||||
<Typography>Preload</Typography>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
))}
|
||||
</List>
|
||||
</DialogContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function remViews(hash) {
|
||||
try {
|
||||
if (hash)
|
||||
fetch(viewedHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'rem', hash, file_index: -1 }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function getViewed(hash, callback) {
|
||||
try {
|
||||
fetch(viewedHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'list', hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(callback)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function getPlayableFile(torrent) {
|
||||
if (!torrent || !torrent.file_stats) return null
|
||||
return torrent.file_stats.filter(file => extPlayable.includes(getExt(file.path)))
|
||||
}
|
||||
|
||||
function getExt(filename) {
|
||||
const ext = filename.split('.').pop()
|
||||
if (ext === filename) return ''
|
||||
return ext.toLowerCase()
|
||||
}
|
||||
|
||||
function getPreload(torrent) {
|
||||
if (torrent.preloaded_bytes > 0 && torrent.preload_size > 0 && torrent.preloaded_bytes < torrent.preload_size) {
|
||||
const progress = ((torrent.preloaded_bytes * 100) / torrent.preload_size).toFixed(2)
|
||||
return `${humanizeSize(torrent.preloaded_bytes)} / ${humanizeSize(torrent.preload_size)} ${progress}%`
|
||||
}
|
||||
|
||||
if (!torrent.preloaded_bytes) return humanizeSize(0)
|
||||
|
||||
return humanizeSize(torrent.preloaded_bytes)
|
||||
}
|
||||
|
||||
const extPlayable = [
|
||||
// video
|
||||
'3g2',
|
||||
'3gp',
|
||||
'aaf',
|
||||
'asf',
|
||||
'avchd',
|
||||
'avi',
|
||||
'drc',
|
||||
'flv',
|
||||
'iso',
|
||||
'm2v',
|
||||
'm2ts',
|
||||
'm4p',
|
||||
'm4v',
|
||||
'mkv',
|
||||
'mng',
|
||||
'mov',
|
||||
'mp2',
|
||||
'mp4',
|
||||
'mpe',
|
||||
'mpeg',
|
||||
'mpg',
|
||||
'mpv',
|
||||
'mxf',
|
||||
'nsv',
|
||||
'ogg',
|
||||
'ogv',
|
||||
'ts',
|
||||
'qt',
|
||||
'rm',
|
||||
'rmvb',
|
||||
'roq',
|
||||
'svi',
|
||||
'vob',
|
||||
'webm',
|
||||
'wmv',
|
||||
'yuv',
|
||||
// audio
|
||||
'aac',
|
||||
'aiff',
|
||||
'ape',
|
||||
'au',
|
||||
'flac',
|
||||
'gsm',
|
||||
'it',
|
||||
'm3u',
|
||||
'm4a',
|
||||
'mid',
|
||||
'mod',
|
||||
'mp3',
|
||||
'mpa',
|
||||
'pls',
|
||||
'ra',
|
||||
's3m',
|
||||
'sid',
|
||||
'wav',
|
||||
'wma',
|
||||
'xm',
|
||||
]
|
||||
@@ -1,38 +0,0 @@
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import List from '@material-ui/core/List'
|
||||
import ButtonGroup from '@material-ui/core/ButtonGroup'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
const donateFrame =
|
||||
'<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
|
||||
|
||||
export default function DonateDialog ({ onClose }) {
|
||||
return (
|
||||
<Dialog open onClose={onClose} aria-labelledby="form-dialog-title" fullWidth>
|
||||
<DialogTitle id="form-dialog-title">Donate</DialogTitle>
|
||||
<DialogContent>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ButtonGroup variant="outlined" color="primary" aria-label="contained primary button group">
|
||||
<Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
|
||||
<Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>
|
||||
</ButtonGroup>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<div dangerouslySetInnerHTML={{ __html: donateFrame }} />
|
||||
</ListItem>
|
||||
</List>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="primary" variant="outlined">
|
||||
Ok
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
41
web/src/components/Donate/DonateDialog.jsx
Normal file
41
web/src/components/Donate/DonateDialog.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import List from '@material-ui/core/List'
|
||||
import ButtonGroup from '@material-ui/core/ButtonGroup'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
const donateFrame =
|
||||
'<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
|
||||
|
||||
export default function DonateDialog({ onClose }) {
|
||||
return (
|
||||
<Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth>
|
||||
<DialogTitle id='form-dialog-title'>Donate</DialogTitle>
|
||||
<DialogContent>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ButtonGroup variant='outlined' color='primary' aria-label='contained primary button group'>
|
||||
<Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
|
||||
<Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>
|
||||
Yandex.Money
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
{/* eslint-disable-next-line react/no-danger */}
|
||||
<div dangerouslySetInnerHTML={{ __html: donateFrame }} />
|
||||
</ListItem>
|
||||
</List>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color='primary' variant='outlined'>
|
||||
Ok
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Snackbar from '@material-ui/core/Snackbar'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import CreditCardIcon from '@material-ui/icons/CreditCard'
|
||||
import CloseIcon from '@material-ui/icons/Close'
|
||||
import DonateDialog from './DonateDialog'
|
||||
|
||||
export default function DonateSnackbar() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [snackbarOpen, setSnackbarOpen] = useState(true)
|
||||
|
||||
const disableSnackbar = () => {
|
||||
setSnackbarOpen(false)
|
||||
localStorage.setItem('snackbarIsClosed', true)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{open && <DonateDialog onClose={() => setOpen(false)} />}
|
||||
|
||||
<Snackbar
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
open={snackbarOpen}
|
||||
onClose={disableSnackbar}
|
||||
message="Donate?"
|
||||
action={
|
||||
<>
|
||||
<Button style={{ marginRight: '10px' }} color="secondary" size="small" onClick={() => {
|
||||
setOpen(true)
|
||||
disableSnackbar()
|
||||
}}>
|
||||
<CreditCardIcon style={{ marginRight: '10px' }} fontSize="small" />
|
||||
Support
|
||||
</Button>
|
||||
|
||||
<IconButton size="small" aria-label="close" color="inherit" onClick={disableSnackbar}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
54
web/src/components/Donate/index.jsx
Normal file
54
web/src/components/Donate/index.jsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Snackbar from '@material-ui/core/Snackbar'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import CreditCardIcon from '@material-ui/icons/CreditCard'
|
||||
import CloseIcon from '@material-ui/icons/Close'
|
||||
|
||||
import DonateDialog from './DonateDialog'
|
||||
|
||||
export default function DonateSnackbar() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [snackbarOpen, setSnackbarOpen] = useState(true)
|
||||
|
||||
const disableSnackbar = () => {
|
||||
setSnackbarOpen(false)
|
||||
localStorage.setItem('snackbarIsClosed', true)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{open && <DonateDialog onClose={() => setOpen(false)} />}
|
||||
|
||||
<Snackbar
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
open={snackbarOpen}
|
||||
onClose={disableSnackbar}
|
||||
message='Donate?'
|
||||
action={
|
||||
<>
|
||||
<Button
|
||||
style={{ marginRight: '10px' }}
|
||||
color='secondary'
|
||||
size='small'
|
||||
onClick={() => {
|
||||
setOpen(true)
|
||||
disableSnackbar()
|
||||
}}
|
||||
>
|
||||
<CreditCardIcon style={{ marginRight: '10px' }} fontSize='small' />
|
||||
Support
|
||||
</Button>
|
||||
|
||||
<IconButton size='small' aria-label='close' color='inherit' onClick={disableSnackbar}>
|
||||
<CloseIcon fontSize='small' />
|
||||
</IconButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from 'react'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import DeleteIcon from '@material-ui/icons/Delete'
|
||||
import { torrentsHost } from '../utils/Hosts'
|
||||
|
||||
const fnRemoveAll = () => {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'list' }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
json.forEach((torr) => {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'rem', hash: torr.hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default function RemoveAll() {
|
||||
return (
|
||||
<ListItem button key="Remove all" onClick={fnRemoveAll}>
|
||||
<ListItemIcon>
|
||||
<DeleteIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Remove all" />
|
||||
</ListItem>
|
||||
)
|
||||
}
|
||||
41
web/src/components/RemoveAll.jsx
Normal file
41
web/src/components/RemoveAll.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import DeleteIcon from '@material-ui/icons/Delete'
|
||||
import { torrentsHost } from 'utils/Hosts'
|
||||
|
||||
const fnRemoveAll = () => {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'list' }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
json.forEach(torr => {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'rem', hash: torr.hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default function RemoveAll() {
|
||||
return (
|
||||
<ListItem button key='Remove all' onClick={fnRemoveAll}>
|
||||
<ListItemIcon>
|
||||
<DeleteIcon />
|
||||
</ListItemIcon>
|
||||
|
||||
<ListItemText primary='Remove all' />
|
||||
</ListItem>
|
||||
)
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import React, { useEffect } from 'react'
|
||||
import SettingsIcon from '@material-ui/icons/Settings'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
|
||||
import { settingsHost, setTorrServerHost, torrserverHost } from '../utils/Hosts'
|
||||
|
||||
export default function SettingsDialog() {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [settings, setSets] = React.useState({})
|
||||
const [show, setShow] = React.useState(false)
|
||||
const [tsHost, setTSHost] = React.useState(torrserverHost ? torrserverHost : window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''))
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
const handleClose = () => {
|
||||
setOpen(false)
|
||||
}
|
||||
const handleCloseSave = () => {
|
||||
setOpen(false)
|
||||
let sets = JSON.parse(JSON.stringify(settings))
|
||||
sets.CacheSize *= 1024 * 1024
|
||||
sets.PreloadBufferSize *= 1024 * 1024
|
||||
fetch(settingsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'set', sets: sets }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch(settingsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'get' }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then(
|
||||
(json) => {
|
||||
json.CacheSize /= 1024 * 1024
|
||||
json.PreloadBufferSize /= 1024 * 1024
|
||||
setSets(json)
|
||||
setShow(true)
|
||||
},
|
||||
(error) => {
|
||||
setShow(false)
|
||||
console.log(error)
|
||||
}
|
||||
)
|
||||
.catch((e) => {
|
||||
setShow(false)
|
||||
console.log(e)
|
||||
})
|
||||
}, [tsHost])
|
||||
|
||||
const onInputHost = (event) => {
|
||||
let host = event.target.value
|
||||
setTorrServerHost(host)
|
||||
setTSHost(host)
|
||||
}
|
||||
|
||||
const inputForm = (event) => {
|
||||
let sets = JSON.parse(JSON.stringify(settings))
|
||||
if (event.target.type === 'number' || event.target.type === 'select-one') {
|
||||
sets[event.target.id] = Number(event.target.value)
|
||||
} else if (event.target.type === 'checkbox') {
|
||||
sets[event.target.id] = Boolean(event.target.checked)
|
||||
} else if (event.target.type === 'url') {
|
||||
sets[event.target.id] = event.target.value
|
||||
}
|
||||
setSets(sets)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItem button key="Settings" onClick={handleClickOpen}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItem>
|
||||
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title" fullWidth={true}>
|
||||
<DialogTitle id="form-dialog-title">Settings</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField onChange={onInputHost} margin="dense" id="TorrServerHost" label="Host" value={tsHost} type="url" fullWidth />
|
||||
{show && (
|
||||
<>
|
||||
<TextField onChange={inputForm} margin="dense" id="CacheSize" label="Cache size" value={settings.CacheSize} type="number" fullWidth />
|
||||
<FormControlLabel control={<Switch checked={settings.PreloadBuffer} onChange={inputForm} id="PreloadBuffer" color="primary" />} label="Preload buffer" />
|
||||
<TextField onChange={inputForm} margin="dense" id="ReaderReadAHead" label="Reader readahead" value={settings.ReaderReadAHead} type="number" fullWidth />
|
||||
<h1 />
|
||||
<InputLabel htmlFor="RetrackersMode">Retracker mode</InputLabel>
|
||||
<Select onChange={inputForm} type="number" native="true" id="RetrackersMode" value={settings.RetrackersMode}>
|
||||
<option value={0}>Don't add retrackers</option>
|
||||
<option value={1}>Add retrackers</option>
|
||||
<option value={2}>Remove retrackers</option>
|
||||
<option value={3}>Replace retrackers</option>
|
||||
</Select>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin="dense"
|
||||
id="TorrentDisconnectTimeout"
|
||||
label="Torrent disconnect timeout"
|
||||
value={settings.TorrentDisconnectTimeout}
|
||||
type="number"
|
||||
fullWidth
|
||||
/>
|
||||
<FormControlLabel control={<Switch checked={settings.EnableIPv6} onChange={inputForm} id="EnableIPv6" color="primary" />} label="Enable IPv6" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.ForceEncrypt} onChange={inputForm} id="ForceEncrypt" color="primary" />} label="Force encrypt" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.DisableTCP} onChange={inputForm} id="DisableTCP" color="primary" />} label="Disable TCP" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.DisableUTP} onChange={inputForm} id="DisableUTP" color="primary" />} label="Disable UTP" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.DisableUPNP} onChange={inputForm} id="DisableUPNP" color="primary" />} label="Disable UPNP" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.DisableDHT} onChange={inputForm} id="DisableDHT" color="primary" />} label="Disable DHT" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.DisablePEX} onChange={inputForm} id="DisablePEX" color="primary" />} label="Disable PEX" />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.DisableUpload} onChange={inputForm} id="DisableUpload" color="primary" />} label="Disable upload" />
|
||||
<br />
|
||||
<TextField onChange={inputForm} margin="dense" id="DownloadRateLimit" label="Download rate limit" value={settings.DownloadRateLimit} type="number" fullWidth />
|
||||
<TextField onChange={inputForm} margin="dense" id="UploadRateLimit" label="Upload rate limit" value={settings.UploadRateLimit} type="number" fullWidth />
|
||||
<TextField onChange={inputForm} margin="dense" id="ConnectionsLimit" label="Connections limit" value={settings.ConnectionsLimit} type="number" fullWidth />
|
||||
<TextField onChange={inputForm} margin="dense" id="DhtConnectionLimit" label="Dht connection limit" value={settings.DhtConnectionLimit} type="number" fullWidth />
|
||||
<TextField onChange={inputForm} margin="dense" id="PeersListenPort" label="Peers listen port" value={settings.PeersListenPort} type="number" fullWidth />
|
||||
<br />
|
||||
<FormControlLabel control={<Switch checked={settings.UseDisk} onChange={inputForm} id="UseDisk" color="primary" />} label="Use disk" />
|
||||
<br />
|
||||
<TextField onChange={inputForm} margin="dense" id="TorrentsSavePath" label="Torrents save path" value={settings.TorrentsSavePath} type="url" fullWidth />
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="primary" variant="outlined">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCloseSave} color="primary" variant="outlined">
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
281
web/src/components/Settings.jsx
Normal file
281
web/src/components/Settings.jsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import { useEffect, useState } from 'react'
|
||||
import SettingsIcon from '@material-ui/icons/Settings'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
|
||||
import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
|
||||
|
||||
export default function SettingsDialog() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [settings, setSets] = useState({})
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
const { protocol, hostname, port } = window.location
|
||||
const [tsHost, setTSHost] = useState(getTorrServerHost() || `${protocol}//${hostname}${port ? `:${port}` : ''}`)
|
||||
|
||||
const handleClickOpen = () => setOpen(true)
|
||||
const handleClose = () => setOpen(false)
|
||||
const handleCloseSave = () => {
|
||||
setOpen(false)
|
||||
const sets = JSON.parse(JSON.stringify(settings))
|
||||
sets.CacheSize *= 1024 * 1024
|
||||
sets.PreloadBufferSize *= 1024 * 1024
|
||||
fetch(settingsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'set', sets }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch(settingsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'get' }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
json => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
json.CacheSize /= 1024 * 1024
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
json.PreloadBufferSize /= 1024 * 1024
|
||||
setSets(json)
|
||||
setShow(true)
|
||||
},
|
||||
error => {
|
||||
setShow(false)
|
||||
console.log(error)
|
||||
},
|
||||
)
|
||||
.catch(e => {
|
||||
setShow(false)
|
||||
console.log(e)
|
||||
})
|
||||
}, [tsHost])
|
||||
|
||||
const onInputHost = event => {
|
||||
const host = event.target.value
|
||||
setTorrServerHost(host)
|
||||
setTSHost(host)
|
||||
}
|
||||
|
||||
const inputForm = event => {
|
||||
const sets = JSON.parse(JSON.stringify(settings))
|
||||
if (event.target.type === 'number' || event.target.type === 'select-one') {
|
||||
sets[event.target.id] = Number(event.target.value)
|
||||
} else if (event.target.type === 'checkbox') {
|
||||
sets[event.target.id] = Boolean(event.target.checked)
|
||||
} else if (event.target.type === 'url') {
|
||||
sets[event.target.id] = event.target.value
|
||||
}
|
||||
setSets(sets)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItem button key='Settings' onClick={handleClickOpen}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Settings' />
|
||||
</ListItem>
|
||||
|
||||
<Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
|
||||
<DialogTitle id='form-dialog-title'>Settings</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
onChange={onInputHost}
|
||||
margin='dense'
|
||||
id='TorrServerHost'
|
||||
label='Host'
|
||||
value={tsHost}
|
||||
type='url'
|
||||
fullWidth
|
||||
/>
|
||||
{show && (
|
||||
<>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='CacheSize'
|
||||
label='Cache size'
|
||||
value={settings.CacheSize}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={settings.PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />
|
||||
}
|
||||
label='Preload buffer'
|
||||
/>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='ReaderReadAHead'
|
||||
label='Reader readahead'
|
||||
value={settings.ReaderReadAHead}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<InputLabel htmlFor='RetrackersMode'>Retracker mode</InputLabel>
|
||||
<Select
|
||||
onChange={inputForm}
|
||||
type='number'
|
||||
native='true'
|
||||
id='RetrackersMode'
|
||||
value={settings.RetrackersMode}
|
||||
>
|
||||
<option value={0}>Don't add retrackers</option>
|
||||
<option value={1}>Add retrackers</option>
|
||||
<option value={2}>Remove retrackers</option>
|
||||
<option value={3}>Replace retrackers</option>
|
||||
</Select>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='TorrentDisconnectTimeout'
|
||||
label='Torrent disconnect timeout'
|
||||
value={settings.TorrentDisconnectTimeout}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Switch checked={settings.EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
|
||||
label='Enable IPv6'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={settings.ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />
|
||||
}
|
||||
label='Force encrypt'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={<Switch checked={settings.DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
|
||||
label='Disable TCP'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={<Switch checked={settings.DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
|
||||
label='Disable UTP'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={settings.DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />
|
||||
}
|
||||
label='Disable UPNP'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={<Switch checked={settings.DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
|
||||
label='Disable DHT'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={<Switch checked={settings.DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
|
||||
label='Disable PEX'
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={settings.DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />
|
||||
}
|
||||
label='Disable upload'
|
||||
/>
|
||||
<br />
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='DownloadRateLimit'
|
||||
label='Download rate limit'
|
||||
value={settings.DownloadRateLimit}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='UploadRateLimit'
|
||||
label='Upload rate limit'
|
||||
value={settings.UploadRateLimit}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='ConnectionsLimit'
|
||||
label='Connections limit'
|
||||
value={settings.ConnectionsLimit}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='DhtConnectionLimit'
|
||||
label='Dht connection limit'
|
||||
value={settings.DhtConnectionLimit}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='PeersListenPort'
|
||||
label='Peers listen port'
|
||||
value={settings.PeersListenPort}
|
||||
type='number'
|
||||
fullWidth
|
||||
/>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={<Switch checked={settings.UseDisk} onChange={inputForm} id='UseDisk' color='primary' />}
|
||||
label='Use disk'
|
||||
/>
|
||||
<br />
|
||||
<TextField
|
||||
onChange={inputForm}
|
||||
margin='dense'
|
||||
id='TorrentsSavePath'
|
||||
label='Torrents save path'
|
||||
value={settings.TorrentsSavePath}
|
||||
type='url'
|
||||
fullWidth
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color='primary' variant='outlined'>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button onClick={handleCloseSave} color='primary' variant='outlined'>
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
import 'fontsource-roboto'
|
||||
|
||||
import HeightIcon from '@material-ui/icons/Height';
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
import DeleteIcon from '@material-ui/icons/Delete'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
|
||||
import { getPeerString, humanizeSize } from '../../utils/Utils'
|
||||
|
||||
import DialogTorrentInfo from '../DialogTorrentInfo'
|
||||
import { torrentsHost } from '../../utils/Hosts'
|
||||
import DialogCacheInfo from '../DialogCacheInfo'
|
||||
import DataUsageIcon from '@material-ui/icons/DataUsage'
|
||||
import { NoImageIcon } from '../../icons';
|
||||
import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardDescriptionContent, TorrentCardDescriptionLabel, TorrentCardPoster } from './style';
|
||||
|
||||
export default function Torrent(props) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [showCache, setShowCache] = useState(false)
|
||||
const [torrent, setTorrent] = useState(props.torrent)
|
||||
const timerID = useRef(-1)
|
||||
|
||||
useEffect(() => {
|
||||
setTorrent(props.torrent)
|
||||
}, [props.torrent])
|
||||
|
||||
useEffect(() => {
|
||||
if (open)
|
||||
timerID.current = setInterval(() => {
|
||||
getTorrent(torrent.hash, (torr, error) => {
|
||||
if (error) console.error(error)
|
||||
else if (torr) setTorrent(torr)
|
||||
})
|
||||
}, 1000)
|
||||
else clearInterval(timerID.current)
|
||||
|
||||
return () => {
|
||||
clearInterval(timerID.current)
|
||||
}
|
||||
}, [torrent.hash, open])
|
||||
|
||||
const { title, name, poster, torrent_size, download_speed } = torrent
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<TorrentCard>
|
||||
<TorrentCardPoster isPoster={poster}>
|
||||
{poster
|
||||
? <img src={poster} alt="poster" />
|
||||
: <NoImageIcon />}
|
||||
</TorrentCardPoster>
|
||||
|
||||
<TorrentCardButtons>
|
||||
<StyledButton
|
||||
onClick={() => {
|
||||
setShowCache(true)
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
<DataUsageIcon />
|
||||
Cache
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton
|
||||
onClick={() => dropTorrent(torrent)}
|
||||
>
|
||||
<CloseIcon />
|
||||
Drop
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton
|
||||
onClick={() => deleteTorrent(torrent)}
|
||||
>
|
||||
<DeleteIcon />
|
||||
Delete
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton
|
||||
onClick={() => {
|
||||
setShowCache(false)
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
<HeightIcon />
|
||||
Details
|
||||
</StyledButton>
|
||||
</TorrentCardButtons>
|
||||
|
||||
<TorrentCardDescription>
|
||||
<TorrentCardDescriptionLabel>Name</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>{title || name}</TorrentCardDescriptionContent>
|
||||
|
||||
<TorrentCardDescriptionLabel>Size</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>{torrent_size > 0 && humanizeSize(torrent_size)}</TorrentCardDescriptionContent>
|
||||
|
||||
<TorrentCardDescriptionLabel>Download speed</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>{download_speed > 0 ? humanizeSize(download_speed) : '---'}</TorrentCardDescriptionContent>
|
||||
|
||||
<TorrentCardDescriptionLabel>Peers</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>{getPeerString(torrent) || '---'}</TorrentCardDescriptionContent>
|
||||
</TorrentCardDescription>
|
||||
</TorrentCard>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
aria-labelledby="form-dialog-title"
|
||||
fullWidth
|
||||
maxWidth={'lg'}
|
||||
>
|
||||
{!showCache ? <DialogTorrentInfo torrent={(open, torrent)} /> : <DialogCacheInfo hash={(open, torrent.hash)} />}
|
||||
<DialogActions>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
OK
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function getTorrent(hash, callback) {
|
||||
try {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'get', hash: hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then(
|
||||
(json) => {
|
||||
callback(json, null)
|
||||
},
|
||||
(error) => {
|
||||
callback(null, error)
|
||||
}
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function deleteTorrent(torrent) {
|
||||
try {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
action: 'rem',
|
||||
hash: torrent.hash,
|
||||
}),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function dropTorrent(torrent) {
|
||||
try {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
action: 'drop',
|
||||
hash: torrent.hash,
|
||||
}),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
188
web/src/components/Torrent/index.jsx
Normal file
188
web/src/components/Torrent/index.jsx
Normal file
@@ -0,0 +1,188 @@
|
||||
/* eslint-disable camelcase */
|
||||
import 'fontsource-roboto'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import HeightIcon from '@material-ui/icons/Height'
|
||||
import CloseIcon from '@material-ui/icons/Close'
|
||||
import DeleteIcon from '@material-ui/icons/Delete'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DataUsageIcon from '@material-ui/icons/DataUsage'
|
||||
import { getPeerString, humanizeSize } from 'utils/Utils'
|
||||
import { torrentsHost } from 'utils/Hosts'
|
||||
import { NoImageIcon } from 'icons'
|
||||
import DialogTorrentInfo from 'components/DialogTorrentInfo'
|
||||
import DialogCacheInfo from 'components/DialogCacheInfo'
|
||||
|
||||
import {
|
||||
StyledButton,
|
||||
TorrentCard,
|
||||
TorrentCardButtons,
|
||||
TorrentCardDescription,
|
||||
TorrentCardDescriptionContent,
|
||||
TorrentCardDescriptionLabel,
|
||||
TorrentCardPoster,
|
||||
} from './style'
|
||||
|
||||
export default function Torrent({ torrent }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [showCache, setShowCache] = useState(false)
|
||||
const [torrentLocalComponentValue, setTorrentLocalComponentValue] = useState(torrent)
|
||||
const timerID = useRef(-1)
|
||||
|
||||
useEffect(() => {
|
||||
setTorrentLocalComponentValue(torrent)
|
||||
}, [torrent])
|
||||
|
||||
useEffect(() => {
|
||||
if (open)
|
||||
timerID.current = setInterval(() => {
|
||||
getTorrent(torrentLocalComponentValue.hash, (torr, error) => {
|
||||
if (error) console.error(error)
|
||||
else if (torr) setTorrentLocalComponentValue(torr)
|
||||
})
|
||||
}, 1000)
|
||||
else clearInterval(timerID.current)
|
||||
|
||||
return () => {
|
||||
clearInterval(timerID.current)
|
||||
}
|
||||
}, [torrentLocalComponentValue.hash, open])
|
||||
|
||||
const { title, name, poster, torrent_size, download_speed } = torrentLocalComponentValue
|
||||
|
||||
return (
|
||||
<>
|
||||
<TorrentCard>
|
||||
<TorrentCardPoster isPoster={poster}>
|
||||
{poster ? <img src={poster} alt='poster' /> : <NoImageIcon />}
|
||||
</TorrentCardPoster>
|
||||
|
||||
<TorrentCardButtons>
|
||||
<StyledButton
|
||||
onClick={() => {
|
||||
setShowCache(true)
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
<DataUsageIcon />
|
||||
Cache
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton onClick={() => dropTorrent(torrentLocalComponentValue)}>
|
||||
<CloseIcon />
|
||||
Drop
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton onClick={() => deleteTorrent(torrentLocalComponentValue)}>
|
||||
<DeleteIcon />
|
||||
Delete
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton
|
||||
onClick={() => {
|
||||
setShowCache(false)
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
<HeightIcon />
|
||||
Details
|
||||
</StyledButton>
|
||||
</TorrentCardButtons>
|
||||
|
||||
<TorrentCardDescription>
|
||||
<TorrentCardDescriptionLabel>Name</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>{title || name}</TorrentCardDescriptionContent>
|
||||
|
||||
<TorrentCardDescriptionLabel>Size</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>
|
||||
{torrent_size > 0 && humanizeSize(torrent_size)}
|
||||
</TorrentCardDescriptionContent>
|
||||
|
||||
<TorrentCardDescriptionLabel>Download speed</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>
|
||||
{download_speed > 0 ? humanizeSize(download_speed) : '---'}
|
||||
</TorrentCardDescriptionContent>
|
||||
|
||||
<TorrentCardDescriptionLabel>Peers</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>
|
||||
{getPeerString(torrentLocalComponentValue) || '---'}
|
||||
</TorrentCardDescriptionContent>
|
||||
</TorrentCardDescription>
|
||||
</TorrentCard>
|
||||
|
||||
<Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='lg'>
|
||||
{!showCache ? (
|
||||
<DialogTorrentInfo torrent={(open, torrentLocalComponentValue)} />
|
||||
) : (
|
||||
<DialogCacheInfo hash={(open, torrentLocalComponentValue.hash)} />
|
||||
)}
|
||||
<DialogActions>
|
||||
<Button variant='outlined' color='primary' onClick={() => setOpen(false)}>
|
||||
OK
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function getTorrent(hash, callback) {
|
||||
try {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'get', hash }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
json => {
|
||||
callback(json, null)
|
||||
},
|
||||
error => {
|
||||
callback(null, error)
|
||||
},
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function deleteTorrent(torrent) {
|
||||
try {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
action: 'rem',
|
||||
hash: torrent.hash,
|
||||
}),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function dropTorrent(torrent) {
|
||||
try {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
action: 'drop',
|
||||
hash: torrent.hash,
|
||||
}),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
@@ -1,99 +1,98 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled, { css } from 'styled-components'
|
||||
|
||||
export const TorrentCard = styled.div`
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 175px minmax(min-content, 1fr);
|
||||
grid-template-areas:
|
||||
"poster buttons"
|
||||
"description description";
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #3fb57a;
|
||||
box-shadow:
|
||||
0px 2px 4px -1px rgb(0 0 0 / 20%),
|
||||
0px 4px 5px 0px rgb(0 0 0 / 14%),
|
||||
0px 1px 10px 0px rgb(0 0 0 / 12%);
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 175px minmax(min-content, 1fr);
|
||||
grid-template-areas:
|
||||
'poster buttons'
|
||||
'description description';
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #3fb57a;
|
||||
box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
||||
`
|
||||
|
||||
export const TorrentCardPoster = styled.div`
|
||||
grid-area: poster;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
grid-area: poster;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
${({ isPoster }) => isPoster ? css`
|
||||
img {
|
||||
${({ isPoster }) =>
|
||||
isPoster
|
||||
? css`
|
||||
img {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
`: css`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #74c39c;
|
||||
border: 1px solid;
|
||||
}
|
||||
`
|
||||
: css`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #74c39c;
|
||||
border: 1px solid;
|
||||
|
||||
svg {
|
||||
svg {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
`};
|
||||
}
|
||||
`};
|
||||
`
|
||||
export const TorrentCardButtons = styled.div`
|
||||
grid-area: buttons;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
grid-area: buttons;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
`
|
||||
export const TorrentCardDescription = styled.div`
|
||||
grid-area: description;
|
||||
background: #74c39c;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
word-break: break-word;
|
||||
grid-area: description;
|
||||
background: #74c39c;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
word-break: break-word;
|
||||
`
|
||||
|
||||
export const TorrentCardDescriptionLabel = styled.div`
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4px;
|
||||
color: #216e47;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4px;
|
||||
color: #216e47;
|
||||
`
|
||||
|
||||
export const TorrentCardDescriptionContent = styled.div`
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
export const StyledButton = styled.button`
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
background: #216e47;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
letter-spacing: 0.009em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
background: #216e47;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
letter-spacing: 0.009em;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 0.7rem;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 0.7rem;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:hover {
|
||||
background: #2a7e54;
|
||||
}
|
||||
`
|
||||
:hover {
|
||||
background: #2a7e54;
|
||||
}
|
||||
`
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Torrent from './Torrent'
|
||||
import { Typography } from '@material-ui/core'
|
||||
import { torrentsHost } from '../utils/Hosts'
|
||||
|
||||
const TorrentListWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
|
||||
gap: 30px;
|
||||
`
|
||||
|
||||
export default function TorrentList() {
|
||||
const [torrents, setTorrents] = useState([])
|
||||
const [offline, setOffline] = useState(true)
|
||||
const timerID = useRef(-1)
|
||||
|
||||
useEffect(() => {
|
||||
timerID.current = setInterval(() => {
|
||||
getTorrentList((torrs) => {
|
||||
if (torrs) setOffline(false)
|
||||
else setOffline(true)
|
||||
setTorrents(torrs)
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(timerID.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<TorrentListWrapper>
|
||||
{offline ? <Typography>Offline</Typography> : (
|
||||
torrents && torrents.map(torrent => <Torrent key={torrent.hash} torrent={torrent} />)
|
||||
)}
|
||||
</TorrentListWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
function getTorrentList(callback) {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'list' }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then(
|
||||
(json) => {
|
||||
callback(json)
|
||||
},
|
||||
(error) => {
|
||||
callback(null)
|
||||
}
|
||||
)
|
||||
}
|
||||
55
web/src/components/TorrentList.jsx
Normal file
55
web/src/components/TorrentList.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import styled from 'styled-components'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Typography } from '@material-ui/core'
|
||||
import { torrentsHost } from 'utils/Hosts'
|
||||
|
||||
import Torrent from './Torrent'
|
||||
|
||||
const TorrentListWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
|
||||
gap: 30px;
|
||||
`
|
||||
|
||||
export default function TorrentList() {
|
||||
const [torrents, setTorrents] = useState([])
|
||||
const [offline, setOffline] = useState(true)
|
||||
const timerID = useRef(-1)
|
||||
|
||||
useEffect(() => {
|
||||
timerID.current = setInterval(() => {
|
||||
getTorrentList(torrs => {
|
||||
if (torrs) setOffline(false)
|
||||
else setOffline(true)
|
||||
setTorrents(torrs)
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(timerID.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<TorrentListWrapper>
|
||||
{offline ? (
|
||||
<Typography>Offline</Typography>
|
||||
) : (
|
||||
torrents && torrents.map(torrent => <Torrent key={torrent.hash} torrent={torrent} />)
|
||||
)}
|
||||
</TorrentListWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
function getTorrentList(callback) {
|
||||
fetch(torrentsHost(), {
|
||||
method: 'post',
|
||||
body: JSON.stringify({ action: 'list' }),
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(callback)
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react'
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import PublishIcon from '@material-ui/icons/Publish'
|
||||
import { torrentUploadHost } from '../utils/Hosts'
|
||||
|
||||
const classes = {
|
||||
input: {
|
||||
display: 'none',
|
||||
},
|
||||
}
|
||||
|
||||
export default function UploadDialog() {
|
||||
const handleCapture = ({ target }) => {
|
||||
let data = new FormData()
|
||||
data.append('save', 'true')
|
||||
for (let i = 0; i < target.files.length; i++) {
|
||||
data.append('file' + i, target.files[i])
|
||||
}
|
||||
fetch(torrentUploadHost(), {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input onChange={handleCapture} accept="*/*" type="file" className={classes.input} style={{ display: 'none' }} id="raised-button-file" multiple />
|
||||
<label htmlFor="raised-button-file">
|
||||
<ListItem button variant="raised" type="submit" component="span" className={classes.button} key="Upload file">
|
||||
<ListItemIcon>
|
||||
<PublishIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Upload file" />
|
||||
</ListItem>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
49
web/src/components/Upload.jsx
Normal file
49
web/src/components/Upload.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||
import ListItemText from '@material-ui/core/ListItemText'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import PublishIcon from '@material-ui/icons/Publish'
|
||||
import { torrentUploadHost } from 'utils/Hosts'
|
||||
|
||||
const classes = {
|
||||
input: {
|
||||
display: 'none',
|
||||
},
|
||||
}
|
||||
|
||||
export default function UploadDialog() {
|
||||
const handleCapture = ({ target }) => {
|
||||
const data = new FormData()
|
||||
data.append('save', 'true')
|
||||
for (let i = 0; i < target.files.length; i++) {
|
||||
data.append(`file${i}`, target.files[i])
|
||||
}
|
||||
fetch(torrentUploadHost(), {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor='raised-button-file'>
|
||||
<input
|
||||
onChange={handleCapture}
|
||||
accept='*/*'
|
||||
type='file'
|
||||
className={classes.input}
|
||||
style={{ display: 'none' }}
|
||||
id='raised-button-file'
|
||||
multiple
|
||||
/>
|
||||
|
||||
<ListItem button variant='raised' type='submit' component='span' className={classes.button} key='Upload file'>
|
||||
<ListItemIcon>
|
||||
<PublishIcon />
|
||||
</ListItemIcon>
|
||||
|
||||
<ListItemText primary='Upload file' />
|
||||
</ListItem>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user