refactor

web/src/components/DialogTorrentDetailsContent/style.js

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components'
 
 export const DialogContentGrid = styled.div`
   display: grid;
+  overflow: auto;
   grid-template-columns: 70% 1fr;
   grid-template-rows: repeat(2, min-content);
   grid-template-areas:
@@ -91,6 +92,8 @@ export const SectionHeader = styled.div`
 
 export const DetailedTorrentCacheViewWrapper = styled.div`
   padding-top: 50px;
+  overflow: auto;
+  min-height: 80vh;
 `
 
 export const StatisticsWrapper = styled.div`

web/src/components/DialogTorrentInfo.jsx

@@ -1,254 +0,0 @@
-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 key='TorrentMenu'>
-            <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 key={file.id} 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',
-]