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('')) setTSVersion(txt) }) }, [open]) return (
TorrServer {tsVersion}
{theme.direction === 'rtl' ? : }
window.open(playlistAllHost(), '_blank')}> fetch(shutdownHost())}>
) }