mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-19 13:36:09 +05:00
194 lines
6.4 KiB
JavaScript
194 lines
6.4 KiB
JavaScript
import React, { useEffect } from 'react'
|
|
import clsx from 'clsx'
|
|
import { makeStyles, 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 CssBaseline from '@material-ui/core/CssBaseline'
|
|
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 ListIcon from '@material-ui/icons/List'
|
|
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
|
|
|
|
import TorrentList from './TorrentList'
|
|
import { Box } from '@material-ui/core'
|
|
|
|
import AddDialog from './Add'
|
|
import RemoveAll from './RemoveAll'
|
|
import SettingsDialog from './Settings'
|
|
import AboutDialog from './About'
|
|
import { playlistAllHost, shutdownHost, torrserverHost } from '../utils/Hosts'
|
|
import DonateDialog from './Donate'
|
|
import UploadDialog from './Upload'
|
|
|
|
const drawerWidth = 240
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: 'flex',
|
|
},
|
|
appBar: {
|
|
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,
|
|
}),
|
|
},
|
|
menuButton: {
|
|
marginRight: 36,
|
|
},
|
|
hide: {
|
|
display: 'none',
|
|
},
|
|
drawer: {
|
|
width: drawerWidth,
|
|
flexShrink: 0,
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
drawerOpen: {
|
|
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,
|
|
},
|
|
},
|
|
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),
|
|
},
|
|
}))
|
|
|
|
export default function MiniDrawer() {
|
|
const classes = useStyles()
|
|
const theme = useTheme()
|
|
const [open, setOpen] = React.useState(false)
|
|
const [tsVersion, setTSVersion] = React.useState('')
|
|
|
|
const handleDrawerOpen = () => {
|
|
setOpen(true)
|
|
}
|
|
|
|
const handleDrawerClose = () => {
|
|
setOpen(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetch(torrserverHost + '/echo')
|
|
.then((resp) => resp.text())
|
|
.then((txt) => {
|
|
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
|
|
})
|
|
}, [open])
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<CssBaseline />
|
|
<AppBar
|
|
position="fixed"
|
|
className={clsx(classes.appBar, {
|
|
[classes.appBarShift]: open,
|
|
})}
|
|
>
|
|
<Toolbar>
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="open drawer"
|
|
onClick={handleDrawerOpen}
|
|
edge="start"
|
|
className={clsx(classes.menuButton, {
|
|
[classes.hide]: open,
|
|
})}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" noWrap>
|
|
TorrServer {tsVersion}
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Drawer
|
|
variant="permanent"
|
|
className={clsx(classes.drawer, {
|
|
[classes.drawerOpen]: open,
|
|
[classes.drawerClose]: !open,
|
|
})}
|
|
classes={{
|
|
paper: clsx({
|
|
[classes.drawerOpen]: open,
|
|
[classes.drawerClose]: !open,
|
|
}),
|
|
}}
|
|
>
|
|
<div className={classes.toolbar}>
|
|
<IconButton onClick={handleDrawerClose}>{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}</IconButton>
|
|
</div>
|
|
<Divider />
|
|
<List>
|
|
<AddDialog />
|
|
<UploadDialog />
|
|
<RemoveAll />
|
|
<ListItem button key="Playlist all torrents" onClick={() => window.open(playlistAllHost(), '_blank')}>
|
|
<ListItemIcon>
|
|
<ListIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Playlist all torrents" />
|
|
</ListItem>
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
<SettingsDialog />
|
|
<DonateDialog />
|
|
<AboutDialog />
|
|
<ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
|
|
<ListItemIcon>
|
|
<PowerSettingsNewIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Close server" />
|
|
</ListItem>
|
|
</List>
|
|
<Divider />
|
|
</Drawer>
|
|
<main className={classes.content}>
|
|
<Box m="5em" />
|
|
<TorrentList />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|