diff --git a/web/.env b/web/.env
deleted file mode 100644
index 20a7ee3..0000000
--- a/web/.env
+++ /dev/null
@@ -1,3 +0,0 @@
-INLINE_RUNTIME_CHUNK=false
-GENERATE_SOURCEMAP=false
-SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/web/.env_example b/web/.env_example
new file mode 100644
index 0000000..166e2b4
--- /dev/null
+++ b/web/.env_example
@@ -0,0 +1 @@
+REACT_APP_SERVER_HOST=
\ No newline at end of file
diff --git a/web/.eslintcache b/web/.eslintcache
deleted file mode 100644
index c0f4296..0000000
--- a/web/.eslintcache
+++ /dev/null
@@ -1 +0,0 @@
-[{"/home/yourok/MEGAWork/go/TorrServer/web/src/index.js":"1","/home/yourok/MEGAWork/go/TorrServer/web/src/App.js":"2","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Appbar/index.js":"3","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Settings.js":"4","/home/yourok/MEGAWork/go/TorrServer/web/src/components/TorrentList.js":"5","/home/yourok/MEGAWork/go/TorrServer/web/src/components/RemoveAll.js":"6","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Donate/DonateDialog.js":"7","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Appbar/useStyles.js":"8","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Upload.js":"9","/home/yourok/MEGAWork/go/TorrServer/web/src/utils/Hosts.js":"10","/home/yourok/MEGAWork/go/TorrServer/web/src/components/About.js":"11","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Add/index.js":"12","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Donate/index.js":"13","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Torrent/index.js":"14","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Add/AddDialog.js":"15","/home/yourok/MEGAWork/go/TorrServer/web/src/components/Torrent/style.js":"16","/home/yourok/MEGAWork/go/TorrServer/web/src/components/DialogCacheInfo.js":"17","/home/yourok/MEGAWork/go/TorrServer/web/src/components/DialogTorrentInfo.js":"18","/home/yourok/MEGAWork/go/TorrServer/web/src/utils/Utils.js":"19","/home/yourok/MEGAWork/go/TorrServer/web/src/icons/index.js":"20"},{"size":224,"mtime":1607328766846,"results":"21","hashOfConfig":"22"},{"size":753,"mtime":1621921809285,"results":"23","hashOfConfig":"22"},{"size":5537,"mtime":1621922466004,"results":"24","hashOfConfig":"22"},{"size":9039,"mtime":1621236854096,"results":"25","hashOfConfig":"22"},{"size":1618,"mtime":1621921809293,"results":"26","hashOfConfig":"22"},{"size":1325,"mtime":1621921809293,"results":"27","hashOfConfig":"22"},{"size":1919,"mtime":1621922466008,"results":"28","hashOfConfig":"22"},{"size":1728,"mtime":1621922466008,"results":"29","hashOfConfig":"22"},{"size":1348,"mtime":1607335733737,"results":"30","hashOfConfig":"22"},{"size":796,"mtime":1614236974272,"results":"31","hashOfConfig":"22"},{"size":2278,"mtime":1608810011199,"results":"32","hashOfConfig":"22"},{"size":880,"mtime":1621921809285,"results":"33","hashOfConfig":"22"},{"size":1700,"mtime":1621922466016,"results":"34","hashOfConfig":"22"},{"size":6309,"mtime":1621921809293,"results":"35","hashOfConfig":"22"},{"size":2440,"mtime":1621921809285,"results":"36","hashOfConfig":"22"},{"size":2167,"mtime":1621922466020,"results":"37","hashOfConfig":"22"},{"size":4995,"mtime":1621921809289,"results":"38","hashOfConfig":"22"},{"size":7486,"mtime":1617970930041,"results":"39","hashOfConfig":"22"},{"size":419,"mtime":1614236662474,"results":"40","hashOfConfig":"22"},{"size":2468,"mtime":1621921809293,"results":"41","hashOfConfig":"22"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},"1btbc6o",{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"51","usedDeprecatedRules":"44"},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"76","messages":"77","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"78","usedDeprecatedRules":"44"},{"filePath":"79","messages":"80","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"81"},{"filePath":"82","messages":"83","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"44"},{"filePath":"84","messages":"85","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yourok/MEGAWork/go/TorrServer/web/src/index.js",[],["86","87"],"/home/yourok/MEGAWork/go/TorrServer/web/src/App.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Appbar/index.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Settings.js",["88"],"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 \n \n \n \n \n \n \n \n
\n )\n}\n\n","/home/yourok/MEGAWork/go/TorrServer/web/src/components/TorrentList.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/RemoveAll.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Donate/DonateDialog.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Appbar/useStyles.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Upload.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/utils/Hosts.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/About.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Add/index.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Donate/index.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Torrent/index.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Add/AddDialog.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/Torrent/style.js",[],"/home/yourok/MEGAWork/go/TorrServer/web/src/components/DialogCacheInfo.js",["89","90"],"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\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 => {\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 \n
\n \n Hash {cache.Hash}\n
\n Capacity {humanizeSize(cache.Capacity)}\n
\n Filled {humanizeSize(cache.Filled)}\n
\n Torrent size {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)}\n
\n Pieces length {humanizeSize(cache.PiecesLength)}\n
\n Pieces count {cache.PiecesCount}\n
\n Peers: {getPeerString(cache.Torrent)}\n
\n Download speed {cache.Torrent && cache.Torrent.download_speed ? humanizeSize(cache.Torrent.download_speed) + '/sec' : ''}\n
\n Upload speed {cache.Torrent && cache.Torrent.upload_speed ? humanizeSize(cache.Torrent.upload_speed) + '/sec' : ''}\n
\n Status {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string}\n \n \n \n
\n \n {pMap.map(itm => (\n
\n {itm.prc > 0 && itm.prc < 100 && (\n \n )}\n \n ))}\n
\n
\n
\n \n {torrent.poster && 
}\n \n {torrent.title} {torrent.name && torrent.name !== torrent.title && ' | ' + torrent.name}\n \n Peers: {getPeerString(torrent)}\n
\n Loaded: {getPreload(torrent)}\n
\n Speed: {humanizeSize(torrent.download_speed)}\n
\n Status: {torrent.stat_string}\n
\n \n \n \n {torrent.stat==2 && }\n \n
\n \n \n \n \n \n \n \n \n {getPlayableFile(torrent) &&\n getPlayableFile(torrent).map((file) => (\n \n \n \n {file.path.split('\\\\').pop().split('/').pop()} | {humanizeSize(file.length)} {viewed && viewed.indexOf(file.id)!=-1 && \"| ✓\"}\n \n \n \n \n ))}\n
\n \n
-
{setOpen(true)}}>
-
-
-
-
-
-
-
+
setOpen(true)}>
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- {isDialogOpen &&
}
-
+
+
+
+
+
+
+
+ {isDialogOpen &&
}
+
-
-
-
-
-
-
- TorrServer {tsVersion}
-
-
-
-
-
-
-
- {theme.direction === 'rtl' ? : }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- fetch(shutdownHost())}>
-
-
-
-
-
-
-
-
-
-
- setIsDonationDialogOpen(true)}>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {isDonationDialogOpen &&
setIsDonationDialogOpen(false)} />}
- {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && }
-
+
+
+
+
+
+
+ TorrServer {tsVersion}
+
+
+
+
+
+
+
+ {theme.direction === 'rtl' ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fetch(shutdownHost())}>
+
+
+
+
+
+
+
+
+
+
+ setIsDonationDialogOpen(true)}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isDonationDialogOpen &&
setIsDonationDialogOpen(false)} />}
+ {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && }
+
-
-
- Hash {cache.Hash}
-
- Capacity {humanizeSize(cache.Capacity)}
-
- Filled {humanizeSize(cache.Filled)}
-
- Torrent size {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)}
-
- Pieces length {humanizeSize(cache.PiecesLength)}
-
- Pieces count {cache.PiecesCount}
-
- Peers: {getPeerString(cache.Torrent)}
-
- Download speed {cache.Torrent && cache.Torrent.download_speed ? humanizeSize(cache.Torrent.download_speed) + '/sec' : ''}
-
- Upload speed {cache.Torrent && cache.Torrent.upload_speed ? humanizeSize(cache.Torrent.upload_speed) + '/sec' : ''}
-
- Status {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string}
-
-
-
-
-
- {pMap.map(itm => (
-
- {itm.prc > 0 && itm.prc < 100 && (
-
- )}
-
- ))}
-
-
+
+
+ Hash {cache.Hash}
+
+ Capacity {humanizeSize(cache.Capacity)}
+
+ Filled {humanizeSize(cache.Filled)}
+
+ Torrent size {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)}
+
+ Pieces length {humanizeSize(cache.PiecesLength)}
+
+ Pieces count {cache.PiecesCount}
+
+ Peers: {getPeerString(cache.Torrent)}
+
+ Download speed {' '}
+ {cache.Torrent && cache.Torrent.download_speed ? `${humanizeSize(cache.Torrent.download_speed)}/sec` : ''}
+
+ Upload speed {' '}
+ {cache.Torrent && cache.Torrent.upload_speed ? `${humanizeSize(cache.Torrent.upload_speed)}/sec` : ''}
+
+ Status {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string}
+
+
+
+
+
+ {pMap.map(itm => (
+
+ {itm.prc > 0 && itm.prc < 100 && (
+
+ )}
+
+ ))}
+
+
-
-
- {torrent.poster && }
-
- {torrent.title} {torrent.name && torrent.name !== torrent.title && ' | ' + torrent.name}
-
- Peers: {getPeerString(torrent)}
-
- Loaded: {getPreload(torrent)}
-
- Speed: {humanizeSize(torrent.download_speed)}
-
- Status: {torrent.stat_string}
-
-
-
-
- {torrent.stat==2 && }
-
-
-
-
-
-
-
-
-
-
- {getPlayableFile(torrent) &&
- getPlayableFile(torrent).map((file) => (
-
-
-
-
- ))}
-
-
-
+
+
+
+ {torrentLocalComponentValue.poster && (
+ 
+ )}
+
+
+ {torrentLocalComponentValue.title}{' '}
+ {torrentLocalComponentValue.name &&
+ torrentLocalComponentValue.name !== torrentLocalComponentValue.title &&
+ ` | ${torrentLocalComponentValue.name}`}
+
+ Peers: {getPeerString(torrentLocalComponentValue)}
+
+ Loaded: {getPreload(torrentLocalComponentValue)}
+
+ Speed: {humanizeSize(torrentLocalComponentValue.download_speed)}
+
+ Status: {torrentLocalComponentValue.stat_string}
+
+
+
+
+ {torrentLocalComponentValue.stat === 2 && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {getPlayableFile(torrentLocalComponentValue) &&
+ getPlayableFile(torrentLocalComponentValue).map(file => (
+
+
+
+
+ ))}
+
+
+
-
-
-
-
-
-
-
-
- )
-}
-
diff --git a/web/src/components/Settings.jsx b/web/src/components/Settings.jsx
new file mode 100644
index 0000000..ceb623a
--- /dev/null
+++ b/web/src/components/Settings.jsx
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/web/src/components/Torrent/index.js b/web/src/components/Torrent/index.js
deleted file mode 100644
index 1d905a3..0000000
--- a/web/src/components/Torrent/index.js
+++ /dev/null
@@ -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 (
- <>
-
-
-
- {poster
- ? 
- : }
-
-
-
- {
- setShowCache(true)
- setOpen(true)
- }}
- >
-
- Cache
-
-
- dropTorrent(torrent)}
- >
-
- Drop
-
-
- deleteTorrent(torrent)}
- >
-
- Delete
-
-
- {
- setShowCache(false)
- setOpen(true)
- }}
- >
-
- Details
-
-
-
-
- Name
- {title || name}
-
- Size
- {torrent_size > 0 && humanizeSize(torrent_size)}
-
- Download speed
- {download_speed > 0 ? humanizeSize(download_speed) : '---'}
-
- Peers
- {getPeerString(torrent) || '---'}
-
-
-
-
-
- )
-}
-
-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)
- }
-}
diff --git a/web/src/components/Torrent/index.jsx b/web/src/components/Torrent/index.jsx
new file mode 100644
index 0000000..f48f314
--- /dev/null
+++ b/web/src/components/Torrent/index.jsx
@@ -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 (
+ <>
+
+
+ {poster ? : }
+
+
+
+ {
+ setShowCache(true)
+ setOpen(true)
+ }}
+ >
+
+ Cache
+
+
+ dropTorrent(torrentLocalComponentValue)}>
+
+ Drop
+
+
+ deleteTorrent(torrentLocalComponentValue)}>
+
+ Delete
+
+
+ {
+ setShowCache(false)
+ setOpen(true)
+ }}
+ >
+
+ Details
+
+
+
+
+ Name
+ {title || name}
+
+ Size
+
+ {torrent_size > 0 && humanizeSize(torrent_size)}
+
+
+ Download speed
+
+ {download_speed > 0 ? humanizeSize(download_speed) : '---'}
+
+
+ Peers
+
+ {getPeerString(torrentLocalComponentValue) || '---'}
+
+
+
+
+
+
+ )
+}
+
+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)
+ }
+}
diff --git a/web/src/components/Torrent/style.js b/web/src/components/Torrent/style.js
index f7cd3b3..927b636 100644
--- a/web/src/components/Torrent/style.js
+++ b/web/src/components/Torrent/style.js
@@ -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;
- }
-`
\ No newline at end of file
+ :hover {
+ background: #2a7e54;
+ }
+`
diff --git a/web/src/components/TorrentList.js b/web/src/components/TorrentList.js
deleted file mode 100644
index e33fb05..0000000
--- a/web/src/components/TorrentList.js
+++ /dev/null
@@ -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 (
-
- {offline ? Offline : (
- torrents && torrents.map(torrent => )
- )}
-
- )
-}
-
-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)
- }
- )
-}
diff --git a/web/src/components/TorrentList.jsx b/web/src/components/TorrentList.jsx
new file mode 100644
index 0000000..3dc434b
--- /dev/null
+++ b/web/src/components/TorrentList.jsx
@@ -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 (
+
+ {offline ? (
+ Offline
+ ) : (
+ torrents && torrents.map(torrent => )
+ )}
+
+ )
+}
+
+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)
+}
diff --git a/web/src/components/Upload.js b/web/src/components/Upload.js
deleted file mode 100644
index 53eba54..0000000
--- a/web/src/components/Upload.js
+++ /dev/null
@@ -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 (
-
- )
-}
diff --git a/web/src/components/Upload.jsx b/web/src/components/Upload.jsx
new file mode 100644
index 0000000..e2af75e
--- /dev/null
+++ b/web/src/components/Upload.jsx
@@ -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 (
+
+ )
+}
diff --git a/web/src/icons/index.js b/web/src/icons/index.js
deleted file mode 100644
index 7ccab70..0000000
--- a/web/src/icons/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const NoImageIcon = () => (
-
-)
\ No newline at end of file
diff --git a/web/src/icons/index.jsx b/web/src/icons/index.jsx
new file mode 100644
index 0000000..f454f2b
--- /dev/null
+++ b/web/src/icons/index.jsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/prefer-default-export
+export const NoImageIcon = () => (
+
+)
diff --git a/web/src/index.js b/web/src/index.js
deleted file mode 100644
index b01d9fe..0000000
--- a/web/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
-
-ReactDOM.render(
-
-
- ,
- document.getElementById('root')
-)
diff --git a/web/src/index.jsx b/web/src/index.jsx
new file mode 100644
index 0000000..52bdd23
--- /dev/null
+++ b/web/src/index.jsx
@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom'
+
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+
+
+ ,
+ document.getElementById('root'),
+)
diff --git a/web/src/utils/Hosts.js b/web/src/utils/Hosts.js
index 0522d7d..4970306 100644
--- a/web/src/utils/Hosts.js
+++ b/web/src/utils/Hosts.js
@@ -1,17 +1,17 @@
-export var torrserverHost = ''
-// export var torrserverHost = 'http://127.0.0.1:8090'
+let torrserverHost = process.env.REACT_APP_SERVER_HOST || ''
-export const torrentsHost = () => torrserverHost + '/torrents'
-export const viewedHost = () => torrserverHost + '/viewed'
-export const cacheHost = () => torrserverHost + '/cache'
-export const torrentUploadHost = () => torrserverHost + '/torrent/upload'
-export const settingsHost = () => torrserverHost + '/settings'
-export const streamHost = () => torrserverHost + '/stream'
-export const shutdownHost = () => torrserverHost + '/shutdown'
-export const echoHost = () => torrserverHost + '/echo'
-export const playlistAllHost = () => torrserverHost + '/playlistall/all.m3u'
-export const playlistTorrHost = () => torrserverHost + '/stream'
+export const torrentsHost = () => `${torrserverHost}/torrents`
+export const viewedHost = () => `${torrserverHost}/viewed`
+export const cacheHost = () => `${torrserverHost}/cache`
+export const torrentUploadHost = () => `${torrserverHost}/torrent/upload`
+export const settingsHost = () => `${torrserverHost}/settings`
+export const streamHost = () => `${torrserverHost}/stream`
+export const shutdownHost = () => `${torrserverHost}/shutdown`
+export const echoHost = () => `${torrserverHost}/echo`
+export const playlistAllHost = () => `${torrserverHost}/playlistall/all.m3u`
+export const playlistTorrHost = () => `${torrserverHost}/stream`
-export const setTorrServerHost = (host) => {
- torrserverHost = host
+export const getTorrServerHost = () => torrserverHost
+export const setTorrServerHost = host => {
+ torrserverHost = host
}
diff --git a/web/src/utils/Utils.js b/web/src/utils/Utils.js
index 9e3bd89..766489f 100644
--- a/web/src/utils/Utils.js
+++ b/web/src/utils/Utils.js
@@ -1,10 +1,10 @@
export function humanizeSize(size) {
- if (!size) return ''
- var i = Math.floor(Math.log(size) / Math.log(1024))
- return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+ if (!size) return ''
+ const i = Math.floor(Math.log(size) / Math.log(1024))
+ return `${(size / Math.pow(1024, i)).toFixed(2) * 1} ${['B', 'kB', 'MB', 'GB', 'TB'][i]}`
}
export function getPeerString(torrent) {
- if (!torrent || !torrent.connected_seeders) return ''
- return '[' + torrent.connected_seeders + '] ' + torrent.active_peers + ' / ' + torrent.total_peers
+ if (!torrent || !torrent.connected_seeders) return ''
+ return `[${torrent.connected_seeders}] ${torrent.active_peers} / ${torrent.total_peers}`
}