refactor

web/src/App/Sidebar.jsx

@@ -7,7 +7,6 @@ import AddDialogButton from 'components/Add'
 import RemoveAll from 'components/RemoveAll'
 import SettingsDialog from 'components/Settings'
 import AboutDialog from 'components/About'
-import UploadDialog from 'components/Upload'
 import { CreditCard as CreditCardIcon, List as ListIcon, Language as LanguageIcon } from '@material-ui/icons'
 import List from '@material-ui/core/List'
 import CloseServer from 'components/CloseServer'
@@ -24,7 +23,6 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
     <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
       <List>
         <AddDialogButton />
-        <UploadDialog />
         <RemoveAll />
         <ListItem button component='a' target='_blank' href={playlistAllHost()}>
           <ListItemIcon>

web/src/components/Add/AddDialog.jsx

@@ -1,14 +1,10 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import TextField from '@material-ui/core/TextField'
 import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
 import { torrentsHost, torrentUploadHost } from 'utils/Hosts'
 import axios from 'axios'
 import { useTranslation } from 'react-i18next'
-import { Input, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
 import styled, { css } from 'styled-components'
 import { NoImageIcon, AddItemIcon, TorrentIcon } from 'icons'
 import debounce from 'lodash/debounce'
@@ -16,8 +12,7 @@ import { v4 as uuidv4 } from 'uuid'
 import useChangeLanguage from 'utils/useChangeLanguage'
 import { Cancel as CancelIcon } from '@material-ui/icons'
 
-const AddDialogStyle = styled.div``
-const TitleSection = styled.div`
+const Header = styled.div`
   background: #00a572;
   color: rgba(0, 0, 0, 0.87);
   font-size: 20px;
@@ -27,14 +22,14 @@ const TitleSection = styled.div`
   padding: 15px 24px;
   position: relative;
 `
-const MainSection = styled.div`
+const ContentWrapper = styled.div`
   background: linear-gradient(145deg, #e4f6ed, #b5dec9);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 `
 
-const MainSectionContentWrapper = styled.div`
+const Content = styled.div`
   flex: 1;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -110,6 +105,7 @@ const IconWrapper = styled.div`
 
 const FileUploadLabel = styled.label`
   transition: all 0.3s;
+  flex: 1;
 `
 
 const RightSideTopSection = styled.div`
@@ -290,6 +286,7 @@ export default function AddDialog({ handleClose }) {
       const data = new FormData()
       data.append('save', 'true')
       data.append('file', selectedFile)
+      title && data.append('title', title)
       posterUrl && data.append('poster', posterUrl)
       axios.post(torrentUploadHost(), data).finally(() => handleClose())
     } else {
@@ -307,8 +304,7 @@ export default function AddDialog({ handleClose }) {
     setTorrentSource(file.name)
   }
 
-  const clearSelectedFile = e => {
-    e.stopPropagation()
+  const clearSelectedFile = () => {
     setSelectedFile()
     setTorrentSource('')
   }
@@ -320,163 +316,118 @@ export default function AddDialog({ handleClose }) {
   }
 
   return (
-    <>
-      <Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='md'>
-        <AddDialogStyle>
-          <TitleSection>Add new torrent</TitleSection>
-          <MainSection>
-            <MainSectionContentWrapper>
-              <LeftSide>
-                <TextField
-                  onChange={handleTitleChange}
-                  value={title}
-                  margin='dense'
-                  label={t('Title')}
-                  type='text'
-                  fullWidth
-                />
-                <TextField
-                  onChange={handlePosterUrlChange}
-                  value={posterUrl}
-                  margin='dense'
-                  label={t('AddPosterLinkInput')}
-                  type='url'
-                  fullWidth
+    <Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='md'>
+      <Header>{t('AddNewTorrent')}</Header>
+
+      <ContentWrapper>
+        <Content>
+          <LeftSide>
+            <TextField
+              onChange={handleTitleChange}
+              value={title}
+              margin='dense'
+              label={t('Title')}
+              type='text'
+              fullWidth
+            />
+            <TextField
+              onChange={handlePosterUrlChange}
+              value={posterUrl}
+              margin='dense'
+              label={t('AddPosterLinkInput')}
+              type='url'
+              fullWidth
+            />
+
+            <PosterWrapper>
+              <Poster poster={+isPosterUrlCorrect}>
+                {isPosterUrlCorrect ? <img src={posterUrl} alt='poster' /> : <NoImageIcon />}
+              </Poster>
+
+              <PosterSuggestions>
+                {posterList
+                  ?.filter(url => url !== posterUrl)
+                  .slice(0, 12)
+                  .map(url => (
+                    <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={uuidv4()}>
+                      <img src={url} alt='poster' />
+                    </PosterSuggestionsItem>
+                  ))}
+              </PosterSuggestions>
+
+              <Button
+                style={{ justifySelf: 'center' }}
+                onClick={removePoster}
+                color='primary'
+                variant='outlined'
+                size='small'
+                disabled={!posterUrl}
+              >
+                {t('Clear')}
+              </Button>
+            </PosterWrapper>
+          </LeftSide>
+
+          <RightSide>
+            <RightSideTopSection active={torrentSourceSelected}>
+              <TextField
+                onChange={handleTorrentSourceChange}
+                value={torrentSource}
+                margin='dense'
+                label={t('TorrentSourceLink')}
+                helperText={t('TorrentSourceOptions')}
+                type='text'
+                fullWidth
+                onFocus={() => setTorrentSourceSelected(true)}
+                onBlur={() => setTorrentSourceSelected(false)}
+                inputProps={{ autoComplete: 'off' }}
+                disabled={!!selectedFile}
+              />
+            </RightSideTopSection>
+
+            {selectedFile ? (
+              <RightSideBottomSectionFileSelected>
+                <TorrentIconWrapper>
+                  <TorrentIcon />
+
+                  <CancelIconWrapper onClick={clearSelectedFile}>
+                    <CancelIcon />
+                  </CancelIconWrapper>
+                </TorrentIconWrapper>
+              </RightSideBottomSectionFileSelected>
+            ) : (
+              <FileUploadLabel htmlFor='upload-file'>
+                <input
+                  onChange={handleCapture}
+                  accept='.torrent'
+                  type='file'
+                  style={{ display: 'none' }}
+                  id='upload-file'
                 />
 
-                <PosterWrapper>
-                  <Poster poster={+isPosterUrlCorrect}>
-                    {isPosterUrlCorrect ? <img src={posterUrl} alt='poster' /> : <NoImageIcon />}
-                  </Poster>
+                <RightSideBottomSectionNoFile selectedFile={selectedFile} type='submit'>
+                  <div>{t('AppendFile.Or')}</div>
 
-                  <PosterSuggestions>
-                    {posterList
-                      ?.filter(url => url !== posterUrl)
-                      .slice(0, 12)
-                      .map(url => (
-                        <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={uuidv4()}>
-                          <img src={url} alt='poster' />
-                        </PosterSuggestionsItem>
-                      ))}
-                  </PosterSuggestions>
+                  <IconWrapper>
+                    <AddItemIcon color='primary' />
+                    <div>{t('AppendFile.ClickOrDrag')}</div>
+                  </IconWrapper>
+                </RightSideBottomSectionNoFile>
+              </FileUploadLabel>
+            )}
+          </RightSide>
+        </Content>
 
-                  <Button
-                    style={{ justifySelf: 'center' }}
-                    onClick={removePoster}
-                    color='primary'
-                    variant='outlined'
-                    size='small'
-                    disabled={!posterUrl}
-                  >
-                    Clear
-                  </Button>
-                </PosterWrapper>
-              </LeftSide>
-
-              <RightSide>
-                <RightSideTopSection active={torrentSourceSelected}>
-                  <TextField
-                    onChange={handleTorrentSourceChange}
-                    value={torrentSource}
-                    margin='dense'
-                    label={t('TorrentSourceLink')}
-                    helperText='magnet / hash / .torrent file link'
-                    type='text'
-                    fullWidth
-                    onFocus={() => setTorrentSourceSelected(true)}
-                    onBlur={() => setTorrentSourceSelected(false)}
-                    inputProps={{ autoComplete: 'off' }}
-                    disabled={selectedFile}
-                  />
-                </RightSideTopSection>
-
-                {selectedFile ? (
-                  <RightSideBottomSectionFileSelected>
-                    <TorrentIconWrapper>
-                      <TorrentIcon />
-
-                      <CancelIconWrapper onClick={clearSelectedFile}>
-                        <CancelIcon />
-                      </CancelIconWrapper>
-                    </TorrentIconWrapper>
-                  </RightSideBottomSectionFileSelected>
-                ) : (
-                  <FileUploadLabel htmlFor='upload-file' style={{ flex: 1 }}>
-                    <input
-                      onChange={handleCapture}
-                      accept='.torrent'
-                      type='file'
-                      style={{ display: 'none' }}
-                      id='upload-file'
-                    />
-
-                    <RightSideBottomSectionNoFile selectedFile={selectedFile} type='submit'>
-                      <div>OR</div>
-
-                      <IconWrapper>
-                        <AddItemIcon color='primary' />
-                        <div>CLICK / DRAG & DROP</div>
-                      </IconWrapper>
-                    </RightSideBottomSectionNoFile>
-                  </FileUploadLabel>
-                )}
-              </RightSide>
-            </MainSectionContentWrapper>
-            <ButtonWrapper>
-              <Button onClick={handleClose} color='primary' variant='outlined'>
-                {t('Cancel')}
-              </Button>
-
-              <Button variant='contained' disabled={!torrentSource} onClick={handleSave} color='primary'>
-                {t('Add')}
-              </Button>
-            </ButtonWrapper>
-          </MainSection>
-        </AddDialogStyle>
-        {/* <DialogTitle id='form-dialog-title'>{t('AddMagnetOrLink')}</DialogTitle>
-  
-        <DialogContent>
-          <TextField onChange={inputTitle} margin='dense' id='title' label={t('Title')} type='text' fullWidth />
-          <TextField onChange={inputPoster} margin='dense' id='poster' label={t('Poster')} type='url' fullWidth />
-          <TextField
-            onChange={inputMagnet}
-            autoFocus
-            margin='dense'
-            id='magnet'
-            label={t('MagnetOrTorrentFileLink')}
-            type='text'
-            fullWidth
-          />
-  
-          <Button color='primary' variant='outlined' component='label'>
-            {t('UploadFile')}
-            <input onChange={handleCapture} type='file' accept='.torrent' hidden />
-          </Button> */}
-        {/* <label htmlFor='upload-file'>
-          <Input onChange={handleCapture} accept='.torrent' type='file' id='upload-file' />
-          <Button htmlFor='upload-file' type='submit' color='primary' variant='outlined'>
-            {t('UploadFile')}
-          </Button>
-          <ListItem button variant='raised' type='submit' component='span' key={t('UploadFile')}>
-            <ListItemIcon>
-              <PublishIcon />
-            </ListItemIcon>
-
-            <ListItemText primary={t('UploadFile')} />
-          </ListItem>
-        </label> */}
-        {/* </DialogContent>
-  
-        <DialogActions>
+        <ButtonWrapper>
           <Button onClick={handleClose} color='primary' variant='outlined'>
             {t('Cancel')}
           </Button>
-  
-          <Button variant='contained' disabled={!link} onClick={handleSave} color='primary'>
+
+          <Button variant='contained' disabled={!torrentSource} onClick={handleSave} color='primary'>
             {t('Add')}
           </Button>
-        </DialogActions> */}
-      </Dialog>
-    </>
+        </ButtonWrapper>
+      </ContentWrapper>
+    </Dialog>
   )
 }

web/src/components/DialogTorrentDetailsContent/widgets.jsx

@@ -72,19 +72,15 @@ export const PiecesLengthWidget = ({ data }) => {
 export const StatusWidget = ({ data }) => {
   const { t } = useTranslation()
   let i18nd = data
-  if (data.toLowerCase() === 'torrent added')
-    i18nd = t('TorrentAdded')
-  else if (data.toLowerCase() === 'torrent getting info')
-    i18nd = t('TorrentGettingInfo')
-  else if (data.toLowerCase() === 'torrent preload')
-    i18nd = t('TorrentPreload')
-  else if (data.toLowerCase() === 'torrent working')
-    i18nd = t('TorrentWorking')
-  else if (data.toLowerCase() === 'torrent closed')
-    i18nd = t('TorrentClosed')
-  else if (data.toLowerCase() === 'torrent in db')
-    i18nd = t('TorrentInDb')
-  return <StatisticsField title={t('TorrentStatus')} value={i18nd} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
+  if (data.toLowerCase() === 'torrent added') i18nd = t('TorrentAdded')
+  else if (data.toLowerCase() === 'torrent getting info') i18nd = t('TorrentGettingInfo')
+  else if (data.toLowerCase() === 'torrent preload') i18nd = t('TorrentPreload')
+  else if (data.toLowerCase() === 'torrent working') i18nd = t('TorrentWorking')
+  else if (data.toLowerCase() === 'torrent closed') i18nd = t('TorrentClosed')
+  else if (data.toLowerCase() === 'torrent in db') i18nd = t('TorrentInDb')
+  return (
+    <StatisticsField title={t('TorrentStatus')} value={i18nd} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
+  )
 }
 
 export const SizeWidget = ({ data }) => {

web/src/components/Upload.jsx

@@ -1,33 +0,0 @@
-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'
-import axios from 'axios'
-import { useTranslation } from 'react-i18next'
-
-export default function UploadDialog() {
-  const { t } = useTranslation()
-  const handleCapture = ({ target: { files } }) => {
-    const [file] = files
-    const data = new FormData()
-    data.append('save', 'true')
-    data.append('file', file)
-    axios.post(torrentUploadHost(), data)
-  }
-  return (
-    <div>
-      {/* <label htmlFor='upload-file'>
-        <input onChange={handleCapture} accept='.torrent' type='file' style={{ display: 'none' }} id='upload-file' />
-
-        <ListItem button variant='raised' type='submit' component='span' key={t('UploadFile')}>
-          <ListItemIcon>
-            <PublishIcon />
-          </ListItemIcon>
-
-          <ListItemText primary={t('UploadFile')} />
-        </ListItem>
-      </label> */}
-    </div>
-  )
-}

web/src/locales/en/translation.json

@@ -3,7 +3,7 @@
   "Actions": "Actions",
   "Add": "Add",
   "AddFromLink": "Add from Link",
-  "AddMagnetOrLink": "Add magnet or link to torrent file",
+  "AddNewTorrent": "Add new torrent",
   "AddRetrackers": "Add retrackers",
   "Buffer": "Preload Buffer / Cache",
   "BufferNote": "Enable “Preload Buffer” in settings to see cache loading progress",
@@ -62,7 +62,7 @@
   "RemoveViews": "Remove View States",
   "ReplaceRetrackers": "Replace retrackers",
   "Resolution": "Resolution",
-  "RetrackersMode": "Retrackers Mode",  
+  "RetrackersMode": "Retrackers Mode",
   "Save": "Save",
   "Season": "Season",
   "SelectSeason": "Select Season",
@@ -96,5 +96,11 @@
   "UseDisk": "Use Disk for Cache",
   "UseDiskDesc": "Better use external media on flash-based devices",
   "UTP": "μTP (Micro Transport Protocol)",
-  "Viewed": "Viewed"
+  "Viewed": "Viewed",
+  "AppendFile": {
+    "Or": "OR",
+    "ClickOrDrag": "CLICK / DRAG & DROP"
+  },
+  "TorrentSourceOptions": "magnet / hash / .torrent file link",
+  "Clear": "Clear"
 }

web/src/locales/ru/translation.json

@@ -3,7 +3,7 @@
   "Actions": "Действия",
   "Add": "Добавить",
   "AddFromLink": "Добавить",
-  "AddMagnetOrLink": "Добавьте magnet или ссылку на торрент",
+  "AddNewTorrent": "Добавить новый торрент",
   "AddRetrackers": "Добавлять",
   "Buffer": "Предзагрузка / Кеш",
   "BufferNote": "Включите «Наполнять кеш перед началом воспроизведения» в настройках для показа заполнения кеша",
@@ -96,5 +96,11 @@
   "UseDisk": "Использовать диск для кеша",
   "UseDiskDesc": "Рекомендуется использовать внешние носители на устройствах с flash-памятью",
   "UTP": "μTP (Micro Transport Protocol)",
-  "Viewed": "Просм."
+  "Viewed": "Просм.",
+  "AppendFile": {
+    "Or": "ИЛИ",
+    "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ"
+  },
+  "TorrentSourceOptions": "магнитная ссылка / хэш / ссылка на .torrent файл",
+  "Clear": "Очистить"
 }