diff --git a/web/.eslintcache b/web/.eslintcache
index 3d15384..db27912 100644
--- a/web/.eslintcache
+++ b/web/.eslintcache
@@ -1 +1 @@
-[{"/Users/daniel/Desktop/TorrServer/web/src/index.js":"1","/Users/daniel/Desktop/TorrServer/web/src/App.js":"2","/Users/daniel/Desktop/TorrServer/web/src/components/RemoveAll.js":"3","/Users/daniel/Desktop/TorrServer/web/src/components/TorrentList.js":"4","/Users/daniel/Desktop/TorrServer/web/src/components/Settings.js":"5","/Users/daniel/Desktop/TorrServer/web/src/components/Donate.js":"6","/Users/daniel/Desktop/TorrServer/web/src/components/About.js":"7","/Users/daniel/Desktop/TorrServer/web/src/components/Upload.js":"8","/Users/daniel/Desktop/TorrServer/web/src/utils/Hosts.js":"9","/Users/daniel/Desktop/TorrServer/web/src/utils/Utils.js":"10","/Users/daniel/Desktop/TorrServer/web/src/components/DialogTorrentInfo.js":"11","/Users/daniel/Desktop/TorrServer/web/src/components/DialogCacheInfo.js":"12","/Users/daniel/Desktop/TorrServer/web/src/components/Add/index.js":"13","/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/index.js":"14","/Users/daniel/Desktop/TorrServer/web/src/components/Add/AddDialog.js":"15","/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/style.js":"16","/Users/daniel/Desktop/TorrServer/web/src/icons/index.js":"17","/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/index.js":"18","/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/useStyles.js":"19"},{"size":224,"mtime":1621760841794,"results":"20","hashOfConfig":"21"},{"size":753,"mtime":1621864551980,"results":"22","hashOfConfig":"21"},{"size":1325,"mtime":1621854678811,"results":"23","hashOfConfig":"21"},{"size":1618,"mtime":1621864039516,"results":"24","hashOfConfig":"21"},{"size":9039,"mtime":1621760841794,"results":"25","hashOfConfig":"21"},{"size":3848,"mtime":1621864449045,"results":"26","hashOfConfig":"21"},{"size":2278,"mtime":1621760841792,"results":"27","hashOfConfig":"21"},{"size":1348,"mtime":1621776545759,"results":"28","hashOfConfig":"21"},{"size":796,"mtime":1621864827984,"results":"29","hashOfConfig":"21"},{"size":419,"mtime":1621760841795,"results":"30","hashOfConfig":"21"},{"size":7486,"mtime":1621760841793,"results":"31","hashOfConfig":"21"},{"size":6709,"mtime":1621760841793,"results":"32","hashOfConfig":"21"},{"size":880,"mtime":1621854678809,"results":"33","hashOfConfig":"21"},{"size":6309,"mtime":1621864815460,"results":"34","hashOfConfig":"21"},{"size":2440,"mtime":1621854678808,"results":"35","hashOfConfig":"21"},{"size":2139,"mtime":1621856125233,"results":"36","hashOfConfig":"21"},{"size":2468,"mtime":1621854721593,"results":"37","hashOfConfig":"21"},{"size":4751,"mtime":1621864635792,"results":"38","hashOfConfig":"21"},{"size":1728,"mtime":1621864630062,"results":"39","hashOfConfig":"21"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},"x6sab4",{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"51","usedDeprecatedRules":"42"},{"filePath":"52","messages":"53","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"54","usedDeprecatedRules":"42"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"65","usedDeprecatedRules":"42"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"68","usedDeprecatedRules":"42"},{"filePath":"69","messages":"70","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"73","messages":"74","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"75","messages":"76","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"81","messages":"82","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/daniel/Desktop/TorrServer/web/src/index.js",[],["83","84"],"/Users/daniel/Desktop/TorrServer/web/src/App.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/RemoveAll.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/TorrentList.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Settings.js",["85"],"import ListItem from '@material-ui/core/ListItem'\nimport ListItemIcon from '@material-ui/core/ListItemIcon'\nimport ListItemText from '@material-ui/core/ListItemText'\nimport React, { useEffect } from 'react'\nimport SettingsIcon from '@material-ui/icons/Settings'\nimport Dialog from '@material-ui/core/Dialog'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport TextField from '@material-ui/core/TextField'\nimport DialogActions from '@material-ui/core/DialogActions'\nimport Button from '@material-ui/core/Button'\nimport { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'\nimport { settingsHost, setTorrServerHost, torrserverHost } from '../utils/Hosts'\n\nexport default function SettingsDialog() {\n    const [open, setOpen] = React.useState(false)\n    const [settings, setSets] = React.useState({})\n    const [show, setShow] = React.useState(false)\n    const [tsHost, setTSHost] = React.useState(torrserverHost ? torrserverHost : window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''))\n\n    const handleClickOpen = () => {\n        setOpen(true)\n    }\n    const handleClose = () => {\n        setOpen(false)\n    }\n    const handleCloseSave = () => {\n        setOpen(false)\n        let sets = JSON.parse(JSON.stringify(settings))\n        sets.CacheSize *= 1024 * 1024\n        sets.PreloadBufferSize *= 1024 * 1024\n        fetch(settingsHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'set', sets: sets }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n    }\n\n    useEffect(() => {\n        fetch(settingsHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'get' }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n            .then((res) => res.json())\n            .then(\n                (json) => {\n                    json.CacheSize /= 1024 * 1024\n                    json.PreloadBufferSize /= 1024 * 1024\n                    setSets(json)\n                    setShow(true)\n                },\n                (error) => {\n                    setShow(false)\n                    console.log(error)\n                }\n            )\n            .catch((e) => {\n                setShow(false)\n                console.log(e)\n            })\n    }, [tsHost])\n\n    const onInputHost = (event) => {\n        let host = event.target.value\n        setTorrServerHost(host)\n        setTSHost(host)\n    }\n\n    const inputForm = (event) => {\n        let sets = JSON.parse(JSON.stringify(settings))\n        if (event.target.type === 'number' || event.target.type === 'select-one') {\n            sets[event.target.id] = Number(event.target.value)\n        } else if (event.target.type === 'checkbox') {\n            sets[event.target.id] = Boolean(event.target.checked)\n        } else if (event.target.type === 'url') {\n            sets[event.target.id] = event.target.value\n        }\n        setSets(sets)\n    }\n\n    return (\n        <div>\n            <ListItem button key=\"Settings\" onClick={handleClickOpen}>\n                <ListItemIcon>\n                    <SettingsIcon />\n                </ListItemIcon>\n                <ListItemText primary=\"Settings\" />\n            </ListItem>\n            <Dialog open={open} onClose={handleClose} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\n                <DialogTitle id=\"form-dialog-title\">Settings</DialogTitle>\n                <DialogContent>\n                    <TextField onChange={onInputHost} margin=\"dense\" id=\"TorrServerHost\" label=\"Host\" value={tsHost} type=\"url\" fullWidth />\n                    {show && (\n                        <>\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"CacheSize\" label=\"Cache size\" value={settings.CacheSize} type=\"number\" fullWidth />\n                            <FormControlLabel control={<Switch checked={settings.PreloadBuffer} onChange={inputForm} id=\"PreloadBuffer\" color=\"primary\" />} label=\"Preload buffer\" />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"ReaderReadAHead\" label=\"Reader readahead\" value={settings.ReaderReadAHead} type=\"number\" fullWidth />\n                            <h1 />\n                            <InputLabel htmlFor=\"RetrackersMode\">Retracker mode</InputLabel>\n                            <Select onChange={inputForm} type=\"number\" native=\"true\" id=\"RetrackersMode\" value={settings.RetrackersMode}>\n                                <option value={0}>Don't add retrackers</option>\n                                <option value={1}>Add retrackers</option>\n                                <option value={2}>Remove retrackers</option>\n                                <option value={3}>Replace retrackers</option>\n                            </Select>\n                            <TextField\n                                onChange={inputForm}\n                                margin=\"dense\"\n                                id=\"TorrentDisconnectTimeout\"\n                                label=\"Torrent disconnect timeout\"\n                                value={settings.TorrentDisconnectTimeout}\n                                type=\"number\"\n                                fullWidth\n                            />\n                            <FormControlLabel control={<Switch checked={settings.EnableIPv6} onChange={inputForm} id=\"EnableIPv6\" color=\"primary\" />} label=\"Enable IPv6\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.ForceEncrypt} onChange={inputForm} id=\"ForceEncrypt\" color=\"primary\" />} label=\"Force encrypt\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableTCP} onChange={inputForm} id=\"DisableTCP\" color=\"primary\" />} label=\"Disable TCP\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableUTP} onChange={inputForm} id=\"DisableUTP\" color=\"primary\" />} label=\"Disable UTP\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableUPNP} onChange={inputForm} id=\"DisableUPNP\" color=\"primary\" />} label=\"Disable UPNP\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableDHT} onChange={inputForm} id=\"DisableDHT\" color=\"primary\" />} label=\"Disable DHT\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisablePEX} onChange={inputForm} id=\"DisablePEX\" color=\"primary\" />} label=\"Disable PEX\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableUpload} onChange={inputForm} id=\"DisableUpload\" color=\"primary\" />} label=\"Disable upload\" />\n                            <br />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"DownloadRateLimit\" label=\"Download rate limit\" value={settings.DownloadRateLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"UploadRateLimit\" label=\"Upload rate limit\" value={settings.UploadRateLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"ConnectionsLimit\" label=\"Connections limit\" value={settings.ConnectionsLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"DhtConnectionLimit\" label=\"Dht connection limit\" value={settings.DhtConnectionLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"PeersListenPort\" label=\"Peers listen port\" value={settings.PeersListenPort} type=\"number\" fullWidth />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.UseDisk} onChange={inputForm} id=\"UseDisk\" color=\"primary\" />} label=\"Use disk\" />\n                            <br />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"TorrentsSavePath\" label=\"Torrents save path\" value={settings.TorrentsSavePath} type=\"url\" fullWidth />\n                        </>\n                    )}\n                </DialogContent>\n                <DialogActions>\n                    <Button onClick={handleClose} color=\"primary\" variant=\"outlined\">\n                        Cancel\n                    </Button>\n                    <Button onClick={handleCloseSave} color=\"primary\" variant=\"outlined\">\n                        Save\n                    </Button>\n                </DialogActions>\n            </Dialog>\n        </div>\n    )\n}\n\n","/Users/daniel/Desktop/TorrServer/web/src/components/Donate.js",["86","87"],"import React from 'react'\nimport ListItem from '@material-ui/core/ListItem'\nimport ListItemIcon from '@material-ui/core/ListItemIcon'\nimport ListItemText from '@material-ui/core/ListItemText'\nimport Dialog from '@material-ui/core/Dialog'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport DialogActions from '@material-ui/core/DialogActions'\nimport Button from '@material-ui/core/Button'\nimport Snackbar from '@material-ui/core/Snackbar'\nimport IconButton from '@material-ui/core/IconButton'\nimport CreditCardIcon from '@material-ui/icons/CreditCard'\nimport List from '@material-ui/core/List'\nimport ButtonGroup from '@material-ui/core/ButtonGroup'\n\nconst donateFrame =\n    '<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>'\n\nexport default function DonateDialog() {\n    const [open, setOpen] = React.useState(false)\n    const [snakeOpen, setSnakeOpen] = React.useState(true)\n\n    // NOT USED FOR NOW\n    // const handleClickOpen = () => {\n    //     setOpen(true)\n    // }\n    const handleClose = () => {\n        setOpen(false)\n    }\n\n    return (\n        <div>\n            {/* !!!!!!!!!!! Should be removed or moved to sidebar because it is not visible. It is hiddent behind header */}\n            {/* <ListItem button key=\"Donate\" onClick={handleClickOpen}>\n                <ListItemIcon>\n                    <CreditCardIcon />\n                </ListItemIcon>\n                <ListItemText primary=\"Donate\" />\n            </ListItem> */}\n            {/* !!!!!!!!!!!!!!!!!!!! */}\n\n            <Dialog open={open} onClose={handleClose} aria-labelledby=\"form-dialog-title\" fullWidth>\n                <DialogTitle id=\"form-dialog-title\">Donate</DialogTitle>\n                <DialogContent>\n                    <List>\n                        <ListItem>\n                            <ButtonGroup variant=\"outlined\" color=\"primary\" aria-label=\"contained primary button group\">\n                                <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>\n                                <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>\n                            </ButtonGroup>\n                        </ListItem>\n                        <ListItem>\n                            <div dangerouslySetInnerHTML={{ __html: donateFrame }} />\n                        </ListItem>\n                    </List>\n                </DialogContent>\n                <DialogActions>\n                    <Button onClick={handleClose} color=\"primary\" variant=\"outlined\">\n                        Ok\n                    </Button>\n                </DialogActions>\n            </Dialog>\n\n            <Snackbar\n                anchorOrigin={{\n                    vertical: 'bottom',\n                    horizontal: 'center',\n                }}\n                open={snakeOpen}\n                onClose={() => { setSnakeOpen(false) }}\n                autoHideDuration={6000}\n                message=\"Donate?\"\n                action={\n                    <React.Fragment>\n                        <IconButton size=\"small\" aria-label=\"close\" color=\"inherit\" onClick={() => {\n                            setSnakeOpen(false)\n                            setOpen(true)\n                        }}>\n                            <CreditCardIcon fontSize=\"small\" />\n                        </IconButton>\n                    </React.Fragment>\n                }\n            />\n        </div>\n    )\n}\n","/Users/daniel/Desktop/TorrServer/web/src/components/About.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Upload.js",[],"/Users/daniel/Desktop/TorrServer/web/src/utils/Hosts.js",[],"/Users/daniel/Desktop/TorrServer/web/src/utils/Utils.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/DialogTorrentInfo.js",["88","89","90","91","92"],"import React, { useEffect } from 'react'\nimport Typography from '@material-ui/core/Typography'\nimport { Button, ButtonGroup, Grid, List, ListItem } from '@material-ui/core'\nimport CachedIcon from '@material-ui/icons/Cached'\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nimport { getPeerString, humanizeSize } from '../utils/Utils'\nimport { playlistTorrHost, streamHost, viewedHost } from '../utils/Hosts'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\n\nconst style = {\n    width100: {\n        width: '100%',\n    },\n    width80: {\n        width: '80%',\n    },\n    poster: {\n        display: 'flex',\n        flexDirection: 'row',\n        borderRadius: '5px',\n    },\n}\n\nexport default function DialogTorrentInfo(props) {\n    const [torrent, setTorrent] = React.useState(props.torrent)\n    const [viewed, setViewed] = React.useState(null)\n    const [progress, setProgress] = React.useState(-1)\n\n    useEffect(() => {\n        setTorrent(props.torrent)\n        if(torrent.stat==2)\n            setProgress(torrent.preloaded_bytes * 100 / torrent.preload_size)\n        getViewed(props.torrent.hash,(list) => {\n            if (list) {\n                let lst = list.map((itm) => itm.file_index)\n                setViewed(lst)\n            }else\n                setViewed(null)\n        })\n    }, [props.torrent, props.open])\n\n    return (\n        <div>\n            <DialogTitle id=\"form-dialog-title\">\n                <Grid container spacing={1}>\n                    <Grid item>{torrent.poster && <img alt=\"\" height=\"200\" align=\"left\" style={style.poster} src={torrent.poster} />}</Grid>\n                    <Grid style={style.width80} item>\n                        {torrent.title} {torrent.name && torrent.name !== torrent.title && ' | ' + torrent.name}\n                        <Typography>\n                            <b>Peers: </b> {getPeerString(torrent)}\n                            <br />\n                            <b>Loaded: </b> {getPreload(torrent)}\n                            <br />\n                            <b>Speed: </b> {humanizeSize(torrent.download_speed)}\n                            <br />\n                            <b>Status: </b> {torrent.stat_string}\n                            <br />\n                        </Typography>\n                    </Grid>\n                </Grid>\n                {torrent.stat==2 && <LinearProgress style={{marginTop:'10px'}} variant=\"determinate\" value={progress} />}\n            </DialogTitle>\n            <DialogContent>\n                <List>\n                    <ListItem>\n                        <ButtonGroup style={style.width100} variant=\"contained\" color=\"primary\" aria-label=\"contained primary button group\">\n                            <Button style={style.width100} href={playlistTorrHost() + '/' + encodeURIComponent(torrent.name || torrent.title || 'file') + '.m3u?link=' + torrent.hash + '&m3u'}>\n                                Playlist\n                            </Button>\n                            <Button style={style.width100} href={playlistTorrHost() + '/' + encodeURIComponent(torrent.name || torrent.title || 'file') + '.m3u?link=' + torrent.hash + '&m3u&fromlast'}>\n                                Playlist after last view\n                            </Button>\n                            <Button style={style.width100} onClick={()=>{\n                                remViews(torrent.hash)\n                                setViewed(null)\n                            }} >\n                                Remove views\n                            </Button>\n                        </ButtonGroup>\n                    </ListItem>\n                    {getPlayableFile(torrent) &&\n                        getPlayableFile(torrent).map((file) => (\n                            <ButtonGroup style={style.width100} disableElevation variant=\"contained\" color=\"primary\">\n                                <Button\n                                    style={style.width100}\n                                    href={streamHost() + '/' + encodeURIComponent(file.path.split('\\\\').pop().split('/').pop()) + '?link=' + torrent.hash + '&index=' + file.id + '&play'}\n                                >\n                                    <Typography>\n                                        {file.path.split('\\\\').pop().split('/').pop()} | {humanizeSize(file.length)} {viewed && viewed.indexOf(file.id)!=-1 && \"| ✓\"}\n                                    </Typography>\n                                </Button>\n                                <Button onClick={() => fetch(streamHost() + '?link=' + torrent.hash + '&index=' + file.id + '&preload')}>\n                                    <CachedIcon />\n                                    <Typography>Preload</Typography>\n                                </Button>\n                            </ButtonGroup>\n                        ))}\n                </List>\n            </DialogContent>\n        </div>\n    )\n}\n\nfunction remViews(hash){\n    try {\n        if (hash)\n        fetch(viewedHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'rem', hash: hash, file_index:-1 }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n    } catch (e) {\n        console.error(e)\n    }\n}\n\nfunction getViewed(hash, callback) {\n    try {\n        fetch(viewedHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'list', hash: hash }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n            .then((res) => res.json())\n            .then(\n                (json) => {\n                    callback(json)\n                },\n                (error) => {\n                    callback(null)\n                }\n            )\n    } catch (e) {\n        console.error(e)\n    }\n}\n\nfunction getPlayableFile(torrent){\n    if (!torrent || !torrent.file_stats)\n        return null\n    return torrent.file_stats.filter(file => extPlayable.includes(getExt(file.path)))\n}\n\nfunction getExt(filename){\n    const ext = filename.split('.').pop()\n    if (ext == filename)\n        return ''\n    return ext.toLowerCase()\n}\n\nfunction getPreload(torrent) {\n    if (torrent.preloaded_bytes > 0 && torrent.preload_size > 0 && torrent.preloaded_bytes < torrent.preload_size) {\n        let progress = ((torrent.preloaded_bytes * 100) / torrent.preload_size).toFixed(2)\n        return humanizeSize(torrent.preloaded_bytes) + ' / ' + humanizeSize(torrent.preload_size) + '   ' + progress + '%'\n    }\n\n    if (!torrent.preloaded_bytes) return humanizeSize(0)\n\n    return humanizeSize(torrent.preloaded_bytes)\n}\n\nconst extPlayable = [\n// video\n    \"3g2\",\n    \"3gp\",\n    \"aaf\",\n    \"asf\",\n    \"avchd\",\n    \"avi\",\n    \"drc\",\n    \"flv\",\n    \"iso\",\n    \"m2v\",\n    \"m2ts\",\n    \"m4p\",\n    \"m4v\",\n    \"mkv\",\n    \"mng\",\n    \"mov\",\n    \"mp2\",\n    \"mp4\",\n    \"mpe\",\n    \"mpeg\",\n    \"mpg\",\n    \"mpv\",\n    \"mxf\",\n    \"nsv\",\n    \"ogg\",\n    \"ogv\",\n    \"ts\",\n    \"qt\",\n    \"rm\",\n    \"rmvb\",\n    \"roq\",\n    \"svi\",\n    \"vob\",\n    \"webm\",\n    \"wmv\",\n    \"yuv\",\n// audio\n    \"aac\",\n    \"aiff\",\n    \"ape\",\n    \"au\",\n    \"flac\",\n    \"gsm\",\n    \"it\",\n    \"m3u\",\n    \"m4a\",\n    \"mid\",\n    \"mod\",\n    \"mp3\",\n    \"mpa\",\n    \"pls\",\n    \"ra\",\n    \"s3m\",\n    \"sid\",\n    \"wav\",\n    \"wma\",\n    \"xm\"\n]\n","/Users/daniel/Desktop/TorrServer/web/src/components/DialogCacheInfo.js",["93","94","95","96","97"],"import React, { useEffect, useRef } from 'react'\nimport Typography from '@material-ui/core/Typography'\n\nimport { getPeerString, humanizeSize } from '../utils/Utils'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport { cacheHost } from '../utils/Hosts'\n\nconst style = {\n    cache: {\n        paddingLeft: \"6px\",\n        paddingRight: \"2px\",\n        lineHeight: \"11px\",\n    },\n    piece: {\n        width: \"12px\",\n        height: \"12px\",\n        backgroundColor: \"#eef2f4\",\n        border: \"1px solid #eef2f4\",\n        display: \"inline-block\",\n        marginRight: \"1px\",\n    },\n    pieceComplete: {\n        backgroundColor: \"#3fb57a\",\n        borderColor: \"#3fb57a\",\n    },\n    pieceLoading: {\n        backgroundColor: \"#00d0d0\",\n        borderColor: \"#00d0d0\",\n    },\n    readerRange: {\n        borderColor: \"#9a9aff !important\",\n    },\n    pieceReader: {\n        borderColor: \"#000000 !important\",\n    },\n    pieceProgress: {\n        position: \"relative\",\n        zIndex: \"1\",\n        backgroundColor: \"#009090\",\n\n        left: \"-1px\",\n        top: \"-1px\",\n        width: \"12px\",\n    },\n}\n\nexport default function DialogCacheInfo(props) {\n    const [hash] = React.useState(props.hash)\n    const [cache, setCache] = React.useState({})\n    const timerID = useRef(-1)\n    const [pMap, setPMap] = React.useState([])\n\n    useEffect(() => {\n        if (hash)\n            timerID.current = setInterval(() => {\n                getCache(hash, (cache) => {\n                    setCache(cache)\n                })\n            }, 100)\n        else clearInterval(timerID.current)\n\n        return () => {\n            clearInterval(timerID.current)\n        }\n    }, [hash, props.open])\n\n    useEffect(()=>{\n        if (cache && cache.PiecesCount && cache.Pieces){\n            var map = [];\n            for (let i = 0; i < cache.PiecesCount; i++) {\n                var reader = 0\n                var cls = \"piece\"\n                var prc = 0\n                if (cache.Pieces[i]) {\n                    if (cache.Pieces[i].Completed && cache.Pieces[i].Size >= cache.Pieces[i].Length)\n                        cls += \" piece-complete\"\n                    else\n                        cls += \" piece-loading\"\n                    prc = (cache.Pieces[i].Size / cache.Pieces[i].Length * 100).toFixed(2)\n                }\n\n                cache.Readers.forEach((r, k) => {\n                    if (i >= r.Start && i <= r.End && i !== r.Reader)\n                        cls += \" reader-range\"\n                    if (i === r.Reader) {\n                        cls += \" piece-reader\"\n                    }\n                })\n                map.push({\n                    prc: prc,\n                    class: cls,\n                    info: i,\n                    reader: reader,\n                })\n            }\n            setPMap(map)\n        }\n    },[cache.Pieces])\n\n    return (\n        <div>\n            <DialogTitle id=\"form-dialog-title\">\n                <Typography fullWidth>\n                    <b>Hash </b> {cache.Hash}\n                    <br />\n                    <b>Capacity </b> {humanizeSize(cache.Capacity)}\n                    <br />\n                    <b>Filled </b> {humanizeSize(cache.Filled)}\n                    <br />\n                    <b>Torrent size </b> {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)}\n                    <br />\n                    <b>Pieces length </b> {humanizeSize(cache.PiecesLength)}\n                    <br />\n                    <b>Pieces count </b> {cache.PiecesCount}\n                    <br />\n                    <b>Peers: </b> {getPeerString(cache.Torrent)}\n                    <br />\n                    <b>Download speed </b> {cache.Torrent && cache.Torrent.download_speed ? humanizeSize(cache.Torrent.download_speed) + '/sec' : ''}\n                    <br />\n                    <b>Upload speed </b> {cache.Torrent && cache.Torrent.upload_speed ? humanizeSize(cache.Torrent.upload_speed) + '/sec' : ''}\n                    <br />\n                    <b>Status </b> {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string}\n                </Typography>\n            </DialogTitle>\n            <DialogContent>\n                <div className=\"cache\">\n                    {pMap.map((itm) => <span 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>)}\n                </div>\n            </DialogContent>\n        </div>\n    )\n}\n\nfunction getCacheMap(cache) {\n    if (!cache || !cache.PiecesCount) return ''\n    var html = ''\n    for (let i = 0; i < cache.PiecesCount; i++) {\n        html += \"<span class='piece\"\n        let info = i\n        var prcDiv = \"\"\n        if (cache.Pieces && cache.Pieces[i]) {\n            let prc = (cache.Pieces[i].Size/cache.Pieces[i].Length*100).toFixed(2)\n            let piece = cache.Pieces[i]\n            if (piece.Completed && piece.Size >= piece.Length) {\n                html += ' piece-complete'\n                info += ' 100%'\n            }else {\n                html += ' piece-loading'\n                info += ' ' + prc + '%'\n                prcDiv = \"<div class='piece-progress' style='height: \"+prc+\"%;'></div>\"\n            }\n        }\n        cache.Readers.forEach((r,k)=> {\n            if (i >= r.Start && i <= r.End && i !== r.Reader)\n                html += ' reader-range'\n            if (i === r.Reader) {\n                html += ' piece-reader'\n                info += ' reader'\n            }\n        })\n        html += \"' title='\" + info + \"'>\"\n        html += prcDiv\n        html += \"</span>\"\n    }\n    return html\n}\n\nfunction getCache(hash, callback) {\n    try {\n        fetch(cacheHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'get', hash: hash }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n            .then((res) => res.json())\n            .then(\n                (json) => {\n                    callback(json)\n                },\n                (error) => {\n                    callback({})\n                    console.error(error)\n                }\n            )\n    } catch (e) {\n        console.error(e)\n        callback({})\n    }\n}\n/*\n{\n\t\"Hash\": \"41e36c8de915d80db83fc134bee4e7e2d292657e\",\n\t\"Capacity\": 209715200,\n\t\"Filled\": 2914808,\n\t\"PiecesLength\": 4194304,\n\t\"PiecesCount\": 2065,\n\t\"DownloadSpeed\": 32770.860273455524,\n\t\"Pieces\": {\n\t\t\"2064\": {\n\t\t\t\"Id\": 2064,\n\t\t\t\"Length\": 2914808,\n\t\t\t\"Size\": 162296,\n\t\t\t\"Completed\": false\n\t\t}\n\t}\n}\n */\n","/Users/daniel/Desktop/TorrServer/web/src/components/Add/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Add/AddDialog.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/style.js",[],"/Users/daniel/Desktop/TorrServer/web/src/icons/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/useStyles.js",[],{"ruleId":"98","replacedBy":"99"},{"ruleId":"100","replacedBy":"101"},{"ruleId":"102","severity":1,"message":"103","line":105,"column":29,"nodeType":"104","endLine":105,"endColumn":35},{"ruleId":"105","severity":1,"message":"106","line":3,"column":8,"nodeType":"107","messageId":"108","endLine":3,"endColumn":20},{"ruleId":"105","severity":1,"message":"109","line":4,"column":8,"nodeType":"107","messageId":"108","endLine":4,"endColumn":20},{"ruleId":"110","severity":1,"message":"111","line":33,"column":24,"nodeType":"112","messageId":"113","endLine":33,"endColumn":26},{"ruleId":"114","severity":1,"message":"115","line":42,"column":8,"nodeType":"116","endLine":42,"endColumn":35,"suggestions":"117"},{"ruleId":"110","severity":1,"message":"111","line":63,"column":30,"nodeType":"112","messageId":"113","endLine":63,"endColumn":32},{"ruleId":"110","severity":1,"message":"118","line":91,"column":152,"nodeType":"112","messageId":"113","endLine":91,"endColumn":154},{"ruleId":"110","severity":1,"message":"111","line":154,"column":13,"nodeType":"112","messageId":"113","endLine":154,"endColumn":15},{"ruleId":"105","severity":1,"message":"119","line":9,"column":7,"nodeType":"107","messageId":"108","endLine":9,"endColumn":12},{"ruleId":"120","severity":1,"message":"121","line":83,"column":39,"nodeType":"122","messageId":"123","endLine":89,"endColumn":18},{"ruleId":"114","severity":1,"message":"124","line":99,"column":7,"nodeType":"116","endLine":99,"endColumn":21,"suggestions":"125"},{"ruleId":"105","severity":1,"message":"126","line":135,"column":10,"nodeType":"107","messageId":"108","endLine":135,"endColumn":21},{"ruleId":"120","severity":1,"message":"127","line":154,"column":31,"nodeType":"122","messageId":"123","endLine":161,"endColumn":10},"no-native-reassign",["128"],"no-negated-in-lhs",["129"],"jsx-a11y/heading-has-content","Headings must have content and the content must be accessible by a screen reader.","JSXOpeningElement","no-unused-vars","'ListItemIcon' is defined but never used.","Identifier","unusedVar","'ListItemText' is defined but never used.","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'torrent.preload_size', 'torrent.preloaded_bytes', and 'torrent.stat'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setProgress' needs the current value of 'torrent.preloaded_bytes'.","ArrayExpression",["130"],"Expected '!==' and instead saw '!='.","'style' is assigned a value but never used.","no-loop-func","Function declared in a loop contains unsafe references to variable(s) 'cls', 'cls'.","ArrowFunctionExpression","unsafeRefs","React Hook useEffect has a missing dependency: 'cache'. Either include it or remove the dependency array.",["131"],"'getCacheMap' is defined but never used.","Function declared in a loop contains unsafe references to variable(s) 'html', 'html'.","no-global-assign","no-unsafe-negation",{"desc":"132","fix":"133"},{"desc":"134","fix":"135"},"Update the dependencies array to be: [props.torrent, props.open, torrent.stat, torrent.preloaded_bytes, torrent.preload_size]",{"range":"136","text":"137"},"Update the dependencies array to be: [cache, cache.Pieces]",{"range":"138","text":"139"},[1372,1399],"[props.torrent, props.open, torrent.stat, torrent.preloaded_bytes, torrent.preload_size]",[2893,2907],"[cache, cache.Pieces]"]
\ No newline at end of file
+[{"/Users/daniel/Desktop/TorrServer/web/src/index.js":"1","/Users/daniel/Desktop/TorrServer/web/src/App.js":"2","/Users/daniel/Desktop/TorrServer/web/src/components/RemoveAll.js":"3","/Users/daniel/Desktop/TorrServer/web/src/components/TorrentList.js":"4","/Users/daniel/Desktop/TorrServer/web/src/components/Settings.js":"5","/Users/daniel/Desktop/TorrServer/web/src/components/Donate.js":"6","/Users/daniel/Desktop/TorrServer/web/src/components/About.js":"7","/Users/daniel/Desktop/TorrServer/web/src/components/Upload.js":"8","/Users/daniel/Desktop/TorrServer/web/src/utils/Hosts.js":"9","/Users/daniel/Desktop/TorrServer/web/src/utils/Utils.js":"10","/Users/daniel/Desktop/TorrServer/web/src/components/DialogTorrentInfo.js":"11","/Users/daniel/Desktop/TorrServer/web/src/components/DialogCacheInfo.js":"12","/Users/daniel/Desktop/TorrServer/web/src/components/Add/index.js":"13","/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/index.js":"14","/Users/daniel/Desktop/TorrServer/web/src/components/Add/AddDialog.js":"15","/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/style.js":"16","/Users/daniel/Desktop/TorrServer/web/src/icons/index.js":"17","/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/index.js":"18","/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/useStyles.js":"19"},{"size":224,"mtime":1621760841794,"results":"20","hashOfConfig":"21"},{"size":753,"mtime":1621864551980,"results":"22","hashOfConfig":"21"},{"size":1325,"mtime":1621854678811,"results":"23","hashOfConfig":"21"},{"size":1618,"mtime":1621864039516,"results":"24","hashOfConfig":"21"},{"size":9039,"mtime":1621760841794,"results":"25","hashOfConfig":"21"},{"size":3848,"mtime":1621864449045,"results":"26","hashOfConfig":"21"},{"size":2278,"mtime":1621760841792,"results":"27","hashOfConfig":"21"},{"size":1348,"mtime":1621776545759,"results":"28","hashOfConfig":"21"},{"size":796,"mtime":1621869043779,"results":"29","hashOfConfig":"21"},{"size":419,"mtime":1621760841795,"results":"30","hashOfConfig":"21"},{"size":7486,"mtime":1621760841793,"results":"31","hashOfConfig":"21"},{"size":7086,"mtime":1621869016630,"results":"32","hashOfConfig":"21"},{"size":880,"mtime":1621854678809,"results":"33","hashOfConfig":"21"},{"size":6309,"mtime":1621864815460,"results":"34","hashOfConfig":"21"},{"size":2440,"mtime":1621854678808,"results":"35","hashOfConfig":"21"},{"size":2139,"mtime":1621868258726,"results":"36","hashOfConfig":"21"},{"size":2468,"mtime":1621854721593,"results":"37","hashOfConfig":"21"},{"size":4751,"mtime":1621864635792,"results":"38","hashOfConfig":"21"},{"size":1728,"mtime":1621864630062,"results":"39","hashOfConfig":"21"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},"x6sab4",{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"51","usedDeprecatedRules":"42"},{"filePath":"52","messages":"53","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"54","usedDeprecatedRules":"42"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"65","usedDeprecatedRules":"42"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"42"},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/daniel/Desktop/TorrServer/web/src/index.js",[],["82","83"],"/Users/daniel/Desktop/TorrServer/web/src/App.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/RemoveAll.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/TorrentList.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Settings.js",["84"],"import ListItem from '@material-ui/core/ListItem'\nimport ListItemIcon from '@material-ui/core/ListItemIcon'\nimport ListItemText from '@material-ui/core/ListItemText'\nimport React, { useEffect } from 'react'\nimport SettingsIcon from '@material-ui/icons/Settings'\nimport Dialog from '@material-ui/core/Dialog'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport TextField from '@material-ui/core/TextField'\nimport DialogActions from '@material-ui/core/DialogActions'\nimport Button from '@material-ui/core/Button'\nimport { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'\nimport { settingsHost, setTorrServerHost, torrserverHost } from '../utils/Hosts'\n\nexport default function SettingsDialog() {\n    const [open, setOpen] = React.useState(false)\n    const [settings, setSets] = React.useState({})\n    const [show, setShow] = React.useState(false)\n    const [tsHost, setTSHost] = React.useState(torrserverHost ? torrserverHost : window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''))\n\n    const handleClickOpen = () => {\n        setOpen(true)\n    }\n    const handleClose = () => {\n        setOpen(false)\n    }\n    const handleCloseSave = () => {\n        setOpen(false)\n        let sets = JSON.parse(JSON.stringify(settings))\n        sets.CacheSize *= 1024 * 1024\n        sets.PreloadBufferSize *= 1024 * 1024\n        fetch(settingsHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'set', sets: sets }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n    }\n\n    useEffect(() => {\n        fetch(settingsHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'get' }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n            .then((res) => res.json())\n            .then(\n                (json) => {\n                    json.CacheSize /= 1024 * 1024\n                    json.PreloadBufferSize /= 1024 * 1024\n                    setSets(json)\n                    setShow(true)\n                },\n                (error) => {\n                    setShow(false)\n                    console.log(error)\n                }\n            )\n            .catch((e) => {\n                setShow(false)\n                console.log(e)\n            })\n    }, [tsHost])\n\n    const onInputHost = (event) => {\n        let host = event.target.value\n        setTorrServerHost(host)\n        setTSHost(host)\n    }\n\n    const inputForm = (event) => {\n        let sets = JSON.parse(JSON.stringify(settings))\n        if (event.target.type === 'number' || event.target.type === 'select-one') {\n            sets[event.target.id] = Number(event.target.value)\n        } else if (event.target.type === 'checkbox') {\n            sets[event.target.id] = Boolean(event.target.checked)\n        } else if (event.target.type === 'url') {\n            sets[event.target.id] = event.target.value\n        }\n        setSets(sets)\n    }\n\n    return (\n        <div>\n            <ListItem button key=\"Settings\" onClick={handleClickOpen}>\n                <ListItemIcon>\n                    <SettingsIcon />\n                </ListItemIcon>\n                <ListItemText primary=\"Settings\" />\n            </ListItem>\n            <Dialog open={open} onClose={handleClose} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\n                <DialogTitle id=\"form-dialog-title\">Settings</DialogTitle>\n                <DialogContent>\n                    <TextField onChange={onInputHost} margin=\"dense\" id=\"TorrServerHost\" label=\"Host\" value={tsHost} type=\"url\" fullWidth />\n                    {show && (\n                        <>\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"CacheSize\" label=\"Cache size\" value={settings.CacheSize} type=\"number\" fullWidth />\n                            <FormControlLabel control={<Switch checked={settings.PreloadBuffer} onChange={inputForm} id=\"PreloadBuffer\" color=\"primary\" />} label=\"Preload buffer\" />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"ReaderReadAHead\" label=\"Reader readahead\" value={settings.ReaderReadAHead} type=\"number\" fullWidth />\n                            <h1 />\n                            <InputLabel htmlFor=\"RetrackersMode\">Retracker mode</InputLabel>\n                            <Select onChange={inputForm} type=\"number\" native=\"true\" id=\"RetrackersMode\" value={settings.RetrackersMode}>\n                                <option value={0}>Don't add retrackers</option>\n                                <option value={1}>Add retrackers</option>\n                                <option value={2}>Remove retrackers</option>\n                                <option value={3}>Replace retrackers</option>\n                            </Select>\n                            <TextField\n                                onChange={inputForm}\n                                margin=\"dense\"\n                                id=\"TorrentDisconnectTimeout\"\n                                label=\"Torrent disconnect timeout\"\n                                value={settings.TorrentDisconnectTimeout}\n                                type=\"number\"\n                                fullWidth\n                            />\n                            <FormControlLabel control={<Switch checked={settings.EnableIPv6} onChange={inputForm} id=\"EnableIPv6\" color=\"primary\" />} label=\"Enable IPv6\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.ForceEncrypt} onChange={inputForm} id=\"ForceEncrypt\" color=\"primary\" />} label=\"Force encrypt\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableTCP} onChange={inputForm} id=\"DisableTCP\" color=\"primary\" />} label=\"Disable TCP\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableUTP} onChange={inputForm} id=\"DisableUTP\" color=\"primary\" />} label=\"Disable UTP\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableUPNP} onChange={inputForm} id=\"DisableUPNP\" color=\"primary\" />} label=\"Disable UPNP\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableDHT} onChange={inputForm} id=\"DisableDHT\" color=\"primary\" />} label=\"Disable DHT\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisablePEX} onChange={inputForm} id=\"DisablePEX\" color=\"primary\" />} label=\"Disable PEX\" />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.DisableUpload} onChange={inputForm} id=\"DisableUpload\" color=\"primary\" />} label=\"Disable upload\" />\n                            <br />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"DownloadRateLimit\" label=\"Download rate limit\" value={settings.DownloadRateLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"UploadRateLimit\" label=\"Upload rate limit\" value={settings.UploadRateLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"ConnectionsLimit\" label=\"Connections limit\" value={settings.ConnectionsLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"DhtConnectionLimit\" label=\"Dht connection limit\" value={settings.DhtConnectionLimit} type=\"number\" fullWidth />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"PeersListenPort\" label=\"Peers listen port\" value={settings.PeersListenPort} type=\"number\" fullWidth />\n                            <br />\n                            <FormControlLabel control={<Switch checked={settings.UseDisk} onChange={inputForm} id=\"UseDisk\" color=\"primary\" />} label=\"Use disk\" />\n                            <br />\n                            <TextField onChange={inputForm} margin=\"dense\" id=\"TorrentsSavePath\" label=\"Torrents save path\" value={settings.TorrentsSavePath} type=\"url\" fullWidth />\n                        </>\n                    )}\n                </DialogContent>\n                <DialogActions>\n                    <Button onClick={handleClose} color=\"primary\" variant=\"outlined\">\n                        Cancel\n                    </Button>\n                    <Button onClick={handleCloseSave} color=\"primary\" variant=\"outlined\">\n                        Save\n                    </Button>\n                </DialogActions>\n            </Dialog>\n        </div>\n    )\n}\n\n","/Users/daniel/Desktop/TorrServer/web/src/components/Donate.js",["85","86"],"import React from 'react'\nimport ListItem from '@material-ui/core/ListItem'\nimport ListItemIcon from '@material-ui/core/ListItemIcon'\nimport ListItemText from '@material-ui/core/ListItemText'\nimport Dialog from '@material-ui/core/Dialog'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport DialogActions from '@material-ui/core/DialogActions'\nimport Button from '@material-ui/core/Button'\nimport Snackbar from '@material-ui/core/Snackbar'\nimport IconButton from '@material-ui/core/IconButton'\nimport CreditCardIcon from '@material-ui/icons/CreditCard'\nimport List from '@material-ui/core/List'\nimport ButtonGroup from '@material-ui/core/ButtonGroup'\n\nconst donateFrame =\n    '<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>'\n\nexport default function DonateDialog() {\n    const [open, setOpen] = React.useState(false)\n    const [snakeOpen, setSnakeOpen] = React.useState(true)\n\n    // NOT USED FOR NOW\n    // const handleClickOpen = () => {\n    //     setOpen(true)\n    // }\n    const handleClose = () => {\n        setOpen(false)\n    }\n\n    return (\n        <div>\n            {/* !!!!!!!!!!! Should be removed or moved to sidebar because it is not visible. It is hiddent behind header */}\n            {/* <ListItem button key=\"Donate\" onClick={handleClickOpen}>\n                <ListItemIcon>\n                    <CreditCardIcon />\n                </ListItemIcon>\n                <ListItemText primary=\"Donate\" />\n            </ListItem> */}\n            {/* !!!!!!!!!!!!!!!!!!!! */}\n\n            <Dialog open={open} onClose={handleClose} aria-labelledby=\"form-dialog-title\" fullWidth>\n                <DialogTitle id=\"form-dialog-title\">Donate</DialogTitle>\n                <DialogContent>\n                    <List>\n                        <ListItem>\n                            <ButtonGroup variant=\"outlined\" color=\"primary\" aria-label=\"contained primary button group\">\n                                <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>\n                                <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>\n                            </ButtonGroup>\n                        </ListItem>\n                        <ListItem>\n                            <div dangerouslySetInnerHTML={{ __html: donateFrame }} />\n                        </ListItem>\n                    </List>\n                </DialogContent>\n                <DialogActions>\n                    <Button onClick={handleClose} color=\"primary\" variant=\"outlined\">\n                        Ok\n                    </Button>\n                </DialogActions>\n            </Dialog>\n\n            <Snackbar\n                anchorOrigin={{\n                    vertical: 'bottom',\n                    horizontal: 'center',\n                }}\n                open={snakeOpen}\n                onClose={() => { setSnakeOpen(false) }}\n                autoHideDuration={6000}\n                message=\"Donate?\"\n                action={\n                    <React.Fragment>\n                        <IconButton size=\"small\" aria-label=\"close\" color=\"inherit\" onClick={() => {\n                            setSnakeOpen(false)\n                            setOpen(true)\n                        }}>\n                            <CreditCardIcon fontSize=\"small\" />\n                        </IconButton>\n                    </React.Fragment>\n                }\n            />\n        </div>\n    )\n}\n","/Users/daniel/Desktop/TorrServer/web/src/components/About.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Upload.js",[],"/Users/daniel/Desktop/TorrServer/web/src/utils/Hosts.js",[],"/Users/daniel/Desktop/TorrServer/web/src/utils/Utils.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/DialogTorrentInfo.js",["87","88","89","90","91"],"import React, { useEffect } from 'react'\nimport Typography from '@material-ui/core/Typography'\nimport { Button, ButtonGroup, Grid, List, ListItem } from '@material-ui/core'\nimport CachedIcon from '@material-ui/icons/Cached'\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nimport { getPeerString, humanizeSize } from '../utils/Utils'\nimport { playlistTorrHost, streamHost, viewedHost } from '../utils/Hosts'\nimport DialogTitle from '@material-ui/core/DialogTitle'\nimport DialogContent from '@material-ui/core/DialogContent'\n\nconst style = {\n    width100: {\n        width: '100%',\n    },\n    width80: {\n        width: '80%',\n    },\n    poster: {\n        display: 'flex',\n        flexDirection: 'row',\n        borderRadius: '5px',\n    },\n}\n\nexport default function DialogTorrentInfo(props) {\n    const [torrent, setTorrent] = React.useState(props.torrent)\n    const [viewed, setViewed] = React.useState(null)\n    const [progress, setProgress] = React.useState(-1)\n\n    useEffect(() => {\n        setTorrent(props.torrent)\n        if(torrent.stat==2)\n            setProgress(torrent.preloaded_bytes * 100 / torrent.preload_size)\n        getViewed(props.torrent.hash,(list) => {\n            if (list) {\n                let lst = list.map((itm) => itm.file_index)\n                setViewed(lst)\n            }else\n                setViewed(null)\n        })\n    }, [props.torrent, props.open])\n\n    return (\n        <div>\n            <DialogTitle id=\"form-dialog-title\">\n                <Grid container spacing={1}>\n                    <Grid item>{torrent.poster && <img alt=\"\" height=\"200\" align=\"left\" style={style.poster} src={torrent.poster} />}</Grid>\n                    <Grid style={style.width80} item>\n                        {torrent.title} {torrent.name && torrent.name !== torrent.title && ' | ' + torrent.name}\n                        <Typography>\n                            <b>Peers: </b> {getPeerString(torrent)}\n                            <br />\n                            <b>Loaded: </b> {getPreload(torrent)}\n                            <br />\n                            <b>Speed: </b> {humanizeSize(torrent.download_speed)}\n                            <br />\n                            <b>Status: </b> {torrent.stat_string}\n                            <br />\n                        </Typography>\n                    </Grid>\n                </Grid>\n                {torrent.stat==2 && <LinearProgress style={{marginTop:'10px'}} variant=\"determinate\" value={progress} />}\n            </DialogTitle>\n            <DialogContent>\n                <List>\n                    <ListItem>\n                        <ButtonGroup style={style.width100} variant=\"contained\" color=\"primary\" aria-label=\"contained primary button group\">\n                            <Button style={style.width100} href={playlistTorrHost() + '/' + encodeURIComponent(torrent.name || torrent.title || 'file') + '.m3u?link=' + torrent.hash + '&m3u'}>\n                                Playlist\n                            </Button>\n                            <Button style={style.width100} href={playlistTorrHost() + '/' + encodeURIComponent(torrent.name || torrent.title || 'file') + '.m3u?link=' + torrent.hash + '&m3u&fromlast'}>\n                                Playlist after last view\n                            </Button>\n                            <Button style={style.width100} onClick={()=>{\n                                remViews(torrent.hash)\n                                setViewed(null)\n                            }} >\n                                Remove views\n                            </Button>\n                        </ButtonGroup>\n                    </ListItem>\n                    {getPlayableFile(torrent) &&\n                        getPlayableFile(torrent).map((file) => (\n                            <ButtonGroup style={style.width100} disableElevation variant=\"contained\" color=\"primary\">\n                                <Button\n                                    style={style.width100}\n                                    href={streamHost() + '/' + encodeURIComponent(file.path.split('\\\\').pop().split('/').pop()) + '?link=' + torrent.hash + '&index=' + file.id + '&play'}\n                                >\n                                    <Typography>\n                                        {file.path.split('\\\\').pop().split('/').pop()} | {humanizeSize(file.length)} {viewed && viewed.indexOf(file.id)!=-1 && \"| ✓\"}\n                                    </Typography>\n                                </Button>\n                                <Button onClick={() => fetch(streamHost() + '?link=' + torrent.hash + '&index=' + file.id + '&preload')}>\n                                    <CachedIcon />\n                                    <Typography>Preload</Typography>\n                                </Button>\n                            </ButtonGroup>\n                        ))}\n                </List>\n            </DialogContent>\n        </div>\n    )\n}\n\nfunction remViews(hash){\n    try {\n        if (hash)\n        fetch(viewedHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'rem', hash: hash, file_index:-1 }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n    } catch (e) {\n        console.error(e)\n    }\n}\n\nfunction getViewed(hash, callback) {\n    try {\n        fetch(viewedHost(), {\n            method: 'post',\n            body: JSON.stringify({ action: 'list', hash: hash }),\n            headers: {\n                Accept: 'application/json, text/plain, */*',\n                'Content-Type': 'application/json',\n            },\n        })\n            .then((res) => res.json())\n            .then(\n                (json) => {\n                    callback(json)\n                },\n                (error) => {\n                    callback(null)\n                }\n            )\n    } catch (e) {\n        console.error(e)\n    }\n}\n\nfunction getPlayableFile(torrent){\n    if (!torrent || !torrent.file_stats)\n        return null\n    return torrent.file_stats.filter(file => extPlayable.includes(getExt(file.path)))\n}\n\nfunction getExt(filename){\n    const ext = filename.split('.').pop()\n    if (ext == filename)\n        return ''\n    return ext.toLowerCase()\n}\n\nfunction getPreload(torrent) {\n    if (torrent.preloaded_bytes > 0 && torrent.preload_size > 0 && torrent.preloaded_bytes < torrent.preload_size) {\n        let progress = ((torrent.preloaded_bytes * 100) / torrent.preload_size).toFixed(2)\n        return humanizeSize(torrent.preloaded_bytes) + ' / ' + humanizeSize(torrent.preload_size) + '   ' + progress + '%'\n    }\n\n    if (!torrent.preloaded_bytes) return humanizeSize(0)\n\n    return humanizeSize(torrent.preloaded_bytes)\n}\n\nconst extPlayable = [\n// video\n    \"3g2\",\n    \"3gp\",\n    \"aaf\",\n    \"asf\",\n    \"avchd\",\n    \"avi\",\n    \"drc\",\n    \"flv\",\n    \"iso\",\n    \"m2v\",\n    \"m2ts\",\n    \"m4p\",\n    \"m4v\",\n    \"mkv\",\n    \"mng\",\n    \"mov\",\n    \"mp2\",\n    \"mp4\",\n    \"mpe\",\n    \"mpeg\",\n    \"mpg\",\n    \"mpv\",\n    \"mxf\",\n    \"nsv\",\n    \"ogg\",\n    \"ogv\",\n    \"ts\",\n    \"qt\",\n    \"rm\",\n    \"rmvb\",\n    \"roq\",\n    \"svi\",\n    \"vob\",\n    \"webm\",\n    \"wmv\",\n    \"yuv\",\n// audio\n    \"aac\",\n    \"aiff\",\n    \"ape\",\n    \"au\",\n    \"flac\",\n    \"gsm\",\n    \"it\",\n    \"m3u\",\n    \"m4a\",\n    \"mid\",\n    \"mod\",\n    \"mp3\",\n    \"mpa\",\n    \"pls\",\n    \"ra\",\n    \"s3m\",\n    \"sid\",\n    \"wav\",\n    \"wma\",\n    \"xm\"\n]\n","/Users/daniel/Desktop/TorrServer/web/src/components/DialogCacheInfo.js",["92","93","94","95"],"/Users/daniel/Desktop/TorrServer/web/src/components/Add/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Add/AddDialog.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Torrent/style.js",[],"/Users/daniel/Desktop/TorrServer/web/src/icons/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/index.js",[],"/Users/daniel/Desktop/TorrServer/web/src/components/Appbar/useStyles.js",[],{"ruleId":"96","replacedBy":"97"},{"ruleId":"98","replacedBy":"99"},{"ruleId":"100","severity":1,"message":"101","line":105,"column":29,"nodeType":"102","endLine":105,"endColumn":35},{"ruleId":"103","severity":1,"message":"104","line":3,"column":8,"nodeType":"105","messageId":"106","endLine":3,"endColumn":20},{"ruleId":"103","severity":1,"message":"107","line":4,"column":8,"nodeType":"105","messageId":"106","endLine":4,"endColumn":20},{"ruleId":"108","severity":1,"message":"109","line":33,"column":24,"nodeType":"110","messageId":"111","endLine":33,"endColumn":26},{"ruleId":"112","severity":1,"message":"113","line":42,"column":8,"nodeType":"114","endLine":42,"endColumn":35,"suggestions":"115"},{"ruleId":"108","severity":1,"message":"109","line":63,"column":30,"nodeType":"110","messageId":"111","endLine":63,"endColumn":32},{"ruleId":"108","severity":1,"message":"116","line":91,"column":152,"nodeType":"110","messageId":"111","endLine":91,"endColumn":154},{"ruleId":"108","severity":1,"message":"109","line":154,"column":13,"nodeType":"110","messageId":"111","endLine":154,"endColumn":15},{"ruleId":"117","severity":1,"message":"118","line":83,"column":39,"nodeType":"119","messageId":"120","endLine":89,"endColumn":18},{"ruleId":"112","severity":1,"message":"121","line":99,"column":8,"nodeType":"114","endLine":99,"endColumn":22,"suggestions":"122"},{"ruleId":"103","severity":1,"message":"123","line":141,"column":10,"nodeType":"105","messageId":"106","endLine":141,"endColumn":21},{"ruleId":"117","severity":1,"message":"124","line":160,"column":31,"nodeType":"119","messageId":"120","endLine":167,"endColumn":10},"no-native-reassign",["125"],"no-negated-in-lhs",["126"],"jsx-a11y/heading-has-content","Headings must have content and the content must be accessible by a screen reader.","JSXOpeningElement","no-unused-vars","'ListItemIcon' is defined but never used.","Identifier","unusedVar","'ListItemText' is defined but never used.","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'torrent.preload_size', 'torrent.preloaded_bytes', and 'torrent.stat'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setProgress' needs the current value of 'torrent.preloaded_bytes'.","ArrayExpression",["127"],"Expected '!==' and instead saw '!='.","no-loop-func","Function declared in a loop contains unsafe references to variable(s) 'cls', 'cls'.","ArrowFunctionExpression","unsafeRefs","React Hook useEffect has a missing dependency: 'cache'. Either include it or remove the dependency array.",["128"],"'getCacheMap' is defined but never used.","Function declared in a loop contains unsafe references to variable(s) 'html', 'html'.","no-global-assign","no-unsafe-negation",{"desc":"129","fix":"130"},{"desc":"131","fix":"132"},"Update the dependencies array to be: [props.torrent, props.open, torrent.stat, torrent.preloaded_bytes, torrent.preload_size]",{"range":"133","text":"134"},"Update the dependencies array to be: [cache, cache.Pieces]",{"range":"135","text":"136"},[1372,1399],"[props.torrent, props.open, torrent.stat, torrent.preloaded_bytes, torrent.preload_size]",[3008,3022],"[cache, cache.Pieces]"]
\ No newline at end of file
diff --git a/web/src/components/DialogCacheInfo.js b/web/src/components/DialogCacheInfo.js
index e2f2e30..22a97d6 100644
--- a/web/src/components/DialogCacheInfo.js
+++ b/web/src/components/DialogCacheInfo.js
@@ -6,44 +6,44 @@ import DialogTitle from '@material-ui/core/DialogTitle'
 import DialogContent from '@material-ui/core/DialogContent'
 import { cacheHost } from '../utils/Hosts'
 
-const style = {
-    cache: {
-        paddingLeft: "6px",
-        paddingRight: "2px",
-        lineHeight: "11px",
-    },
-    piece: {
-        width: "12px",
-        height: "12px",
-        backgroundColor: "#eef2f4",
-        border: "1px solid #eef2f4",
-        display: "inline-block",
-        marginRight: "1px",
-    },
-    pieceComplete: {
-        backgroundColor: "#3fb57a",
-        borderColor: "#3fb57a",
-    },
-    pieceLoading: {
-        backgroundColor: "#00d0d0",
-        borderColor: "#00d0d0",
-    },
-    readerRange: {
-        borderColor: "#9a9aff !important",
-    },
-    pieceReader: {
-        borderColor: "#000000 !important",
-    },
-    pieceProgress: {
-        position: "relative",
-        zIndex: "1",
-        backgroundColor: "#009090",
+// const style = {
+//     cache: {
+//         paddingLeft: "6px",
+//         paddingRight: "2px",
+//         lineHeight: "11px",
+//     },
+//     piece: {
+//         width: "12px",
+//         height: "12px",
+//         backgroundColor: "#eef2f4",
+//         border: "1px solid #eef2f4",
+//         display: "inline-block",
+//         marginRight: "1px",
+//     },
+//     pieceComplete: {
+//         backgroundColor: "#3fb57a",
+//         borderColor: "#3fb57a",
+//     },
+//     pieceLoading: {
+//         backgroundColor: "#00d0d0",
+//         borderColor: "#00d0d0",
+//     },
+//     readerRange: {
+//         borderColor: "#9a9aff !important",
+//     },
+//     pieceReader: {
+//         borderColor: "#000000 !important",
+//     },
+//     pieceProgress: {
+//         position: "relative",
+//         zIndex: "1",
+//         backgroundColor: "#009090",
 
-        left: "-1px",
-        top: "-1px",
-        width: "12px",
-    },
-}
+//         left: "-1px",
+//         top: "-1px",
+//         width: "12px",
+//     },
+// }
 
 export default function DialogCacheInfo(props) {
     const [hash] = React.useState(props.hash)
@@ -65,8 +65,8 @@ export default function DialogCacheInfo(props) {
         }
     }, [hash, props.open])
 
-    useEffect(()=>{
-        if (cache && cache.PiecesCount && cache.Pieces){
+    useEffect(() => {
+        if (cache && cache.PiecesCount && cache.Pieces) {
             var map = [];
             for (let i = 0; i < cache.PiecesCount; i++) {
                 var reader = 0
@@ -96,12 +96,12 @@ export default function DialogCacheInfo(props) {
             }
             setPMap(map)
         }
-    },[cache.Pieces])
+    }, [cache.Pieces])
 
     return (
         <div>
             <DialogTitle id="form-dialog-title">
-                <Typography fullWidth>
+                <Typography>
                     <b>Hash </b> {cache.Hash}
                     <br />
                     <b>Capacity </b> {humanizeSize(cache.Capacity)}
@@ -125,7 +125,13 @@ export default function DialogCacheInfo(props) {
             </DialogTitle>
             <DialogContent>
                 <div className="cache">
-                    {pMap.map((itm) => <span 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>)}
+                    {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>
@@ -140,18 +146,18 @@ function getCacheMap(cache) {
         let info = i
         var prcDiv = ""
         if (cache.Pieces && cache.Pieces[i]) {
-            let prc = (cache.Pieces[i].Size/cache.Pieces[i].Length*100).toFixed(2)
+            let prc = (cache.Pieces[i].Size / cache.Pieces[i].Length * 100).toFixed(2)
             let piece = cache.Pieces[i]
             if (piece.Completed && piece.Size >= piece.Length) {
                 html += ' piece-complete'
                 info += ' 100%'
-            }else {
+            } else {
                 html += ' piece-loading'
                 info += ' ' + prc + '%'
-                prcDiv = "<div class='piece-progress' style='height: "+prc+"%;'></div>"
+                prcDiv = "<div class='piece-progress' style='height: " + prc + "%;'></div>"
             }
         }
-        cache.Readers.forEach((r,k)=> {
+        cache.Readers.forEach((r, k) => {
             if (i >= r.Start && i <= r.End && i !== r.Reader)
                 html += ' reader-range'
             if (i === r.Reader) {
@@ -193,19 +199,19 @@ function getCache(hash, callback) {
 }
 /*
 {
-	"Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e",
-	"Capacity": 209715200,
-	"Filled": 2914808,
-	"PiecesLength": 4194304,
-	"PiecesCount": 2065,
-	"DownloadSpeed": 32770.860273455524,
-	"Pieces": {
-		"2064": {
-			"Id": 2064,
-			"Length": 2914808,
-			"Size": 162296,
-			"Completed": false
-		}
-	}
+    "Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e",
+    "Capacity": 209715200,
+    "Filled": 2914808,
+    "PiecesLength": 4194304,
+    "PiecesCount": 2065,
+    "DownloadSpeed": 32770.860273455524,
+    "Pieces": {
+        "2064": {
+            "Id": 2064,
+            "Length": 2914808,
+            "Size": 162296,
+            "Completed": false
+        }
+    }
 }
  */