eslint added. lots of refactor

web/src/components/DialogTorrentInfo.jsx

@@ -0,0 +1,254 @@
+import { useEffect, useState } from 'react'
+import Typography from '@material-ui/core/Typography'
+import { Button, ButtonGroup, Grid, List, ListItem } from '@material-ui/core'
+import CachedIcon from '@material-ui/icons/Cached'
+import LinearProgress from '@material-ui/core/LinearProgress'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContent from '@material-ui/core/DialogContent'
+import { getPeerString, humanizeSize } from 'utils/Utils'
+import { playlistTorrHost, streamHost, viewedHost } from 'utils/Hosts'
+
+const style = {
+  width100: {
+    width: '100%',
+  },
+  width80: {
+    width: '80%',
+  },
+  poster: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderRadius: '5px',
+  },
+}
+
+export default function DialogTorrentInfo({ torrent, open }) {
+  const [torrentLocalComponentValue, setTorrentLocalComponentValue] = useState(torrent)
+  const [viewed, setViewed] = useState(null)
+  const [progress, setProgress] = useState(-1)
+
+  useEffect(() => {
+    setTorrentLocalComponentValue(torrent)
+    if (torrentLocalComponentValue.stat === 2)
+      setProgress((torrentLocalComponentValue.preloaded_bytes * 100) / torrentLocalComponentValue.preload_size)
+    getViewed(torrent.hash, list => {
+      if (list) {
+        const lst = list.map(itm => itm.file_index)
+        setViewed(lst)
+      } else setViewed(null)
+    })
+  }, [torrent, open])
+
+  return (
+    <div>
+      <DialogTitle id='form-dialog-title'>
+        <Grid container spacing={1}>
+          <Grid item>
+            {torrentLocalComponentValue.poster && (
+              <img alt='' height='200' align='left' style={style.poster} src={torrentLocalComponentValue.poster} />
+            )}
+          </Grid>
+          <Grid style={style.width80} item>
+            {torrentLocalComponentValue.title}{' '}
+            {torrentLocalComponentValue.name &&
+              torrentLocalComponentValue.name !== torrentLocalComponentValue.title &&
+              ` | ${torrentLocalComponentValue.name}`}
+            <Typography>
+              <b>Peers: </b> {getPeerString(torrentLocalComponentValue)}
+              <br />
+              <b>Loaded: </b> {getPreload(torrentLocalComponentValue)}
+              <br />
+              <b>Speed: </b> {humanizeSize(torrentLocalComponentValue.download_speed)}
+              <br />
+              <b>Status: </b> {torrentLocalComponentValue.stat_string}
+              <br />
+            </Typography>
+          </Grid>
+        </Grid>
+        {torrentLocalComponentValue.stat === 2 && (
+          <LinearProgress style={{ marginTop: '10px' }} variant='determinate' value={progress} />
+        )}
+      </DialogTitle>
+
+      <DialogContent>
+        <List>
+          <ListItem>
+            <ButtonGroup
+              style={style.width100}
+              variant='contained'
+              color='primary'
+              aria-label='contained primary button group'
+            >
+              <Button
+                style={style.width100}
+                href={`${playlistTorrHost()}/${encodeURIComponent(
+                  torrentLocalComponentValue.name || torrentLocalComponentValue.title || 'file',
+                )}.m3u?link=${torrentLocalComponentValue.hash}&m3u`}
+              >
+                Playlist
+              </Button>
+              <Button
+                style={style.width100}
+                href={`${playlistTorrHost()}/${encodeURIComponent(
+                  torrentLocalComponentValue.name || torrentLocalComponentValue.title || 'file',
+                )}.m3u?link=${torrentLocalComponentValue.hash}&m3u&fromlast`}
+              >
+                Playlist after last view
+              </Button>
+              <Button
+                style={style.width100}
+                onClick={() => {
+                  remViews(torrentLocalComponentValue.hash)
+                  setViewed(null)
+                }}
+              >
+                Remove views
+              </Button>
+            </ButtonGroup>
+          </ListItem>
+
+          {getPlayableFile(torrentLocalComponentValue) &&
+            getPlayableFile(torrentLocalComponentValue).map(file => (
+              <ButtonGroup style={style.width100} disableElevation variant='contained' color='primary'>
+                <Button
+                  style={style.width100}
+                  href={`${streamHost()}/${encodeURIComponent(file.path.split('\\').pop().split('/').pop())}?link=${
+                    torrentLocalComponentValue.hash
+                  }&index=${file.id}&play`}
+                >
+                  <Typography>
+                    {file.path.split('\\').pop().split('/').pop()} | {humanizeSize(file.length)}{' '}
+                    {viewed && viewed.indexOf(file.id) !== -1 && '| ✓'}
+                  </Typography>
+                </Button>
+                <Button
+                  onClick={() =>
+                    fetch(`${streamHost()}?link=${torrentLocalComponentValue.hash}&index=${file.id}&preload`)
+                  }
+                >
+                  <CachedIcon />
+                  <Typography>Preload</Typography>
+                </Button>
+              </ButtonGroup>
+            ))}
+        </List>
+      </DialogContent>
+    </div>
+  )
+}
+
+function remViews(hash) {
+  try {
+    if (hash)
+      fetch(viewedHost(), {
+        method: 'post',
+        body: JSON.stringify({ action: 'rem', hash, file_index: -1 }),
+        headers: {
+          Accept: 'application/json, text/plain, */*',
+          'Content-Type': 'application/json',
+        },
+      })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+function getViewed(hash, callback) {
+  try {
+    fetch(viewedHost(), {
+      method: 'post',
+      body: JSON.stringify({ action: 'list', hash }),
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => res.json())
+      .then(callback)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+function getPlayableFile(torrent) {
+  if (!torrent || !torrent.file_stats) return null
+  return torrent.file_stats.filter(file => extPlayable.includes(getExt(file.path)))
+}
+
+function getExt(filename) {
+  const ext = filename.split('.').pop()
+  if (ext === filename) return ''
+  return ext.toLowerCase()
+}
+
+function getPreload(torrent) {
+  if (torrent.preloaded_bytes > 0 && torrent.preload_size > 0 && torrent.preloaded_bytes < torrent.preload_size) {
+    const progress = ((torrent.preloaded_bytes * 100) / torrent.preload_size).toFixed(2)
+    return `${humanizeSize(torrent.preloaded_bytes)} / ${humanizeSize(torrent.preload_size)}   ${progress}%`
+  }
+
+  if (!torrent.preloaded_bytes) return humanizeSize(0)
+
+  return humanizeSize(torrent.preloaded_bytes)
+}
+
+const extPlayable = [
+  // video
+  '3g2',
+  '3gp',
+  'aaf',
+  'asf',
+  'avchd',
+  'avi',
+  'drc',
+  'flv',
+  'iso',
+  'm2v',
+  'm2ts',
+  'm4p',
+  'm4v',
+  'mkv',
+  'mng',
+  'mov',
+  'mp2',
+  'mp4',
+  'mpe',
+  'mpeg',
+  'mpg',
+  'mpv',
+  'mxf',
+  'nsv',
+  'ogg',
+  'ogv',
+  'ts',
+  'qt',
+  'rm',
+  'rmvb',
+  'roq',
+  'svi',
+  'vob',
+  'webm',
+  'wmv',
+  'yuv',
+  // audio
+  'aac',
+  'aiff',
+  'ape',
+  'au',
+  'flac',
+  'gsm',
+  'it',
+  'm3u',
+  'm4a',
+  'mid',
+  'mod',
+  'mp3',
+  'mpa',
+  'pls',
+  'ra',
+  's3m',
+  'sid',
+  'wav',
+  'wma',
+  'xm',
+]