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 Header = styled.div`
-const TitleSection = 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 => {
+  const clearSelectedFile = () => {
-    e.stopPropagation()
     setSelectedFile()
     setTorrentSource('')
   }
@@ -320,12 +316,11 @@ export default function AddDialog({ handleClose }) {
   }
 
   return (
-    <>
     <Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='md'>
-        <AddDialogStyle>
+      <Header>{t('AddNewTorrent')}</Header>
-          <TitleSection>Add new torrent</TitleSection>
+
-          <MainSection>
+      <ContentWrapper>
-            <MainSectionContentWrapper>
+        <Content>
           <LeftSide>
             <TextField
               onChange={handleTitleChange}
@@ -368,7 +363,7 @@ export default function AddDialog({ handleClose }) {
                 size='small'
                 disabled={!posterUrl}
               >
-                    Clear
+                {t('Clear')}
               </Button>
             </PosterWrapper>
           </LeftSide>
@@ -380,13 +375,13 @@ export default function AddDialog({ handleClose }) {
                 value={torrentSource}
                 margin='dense'
                 label={t('TorrentSourceLink')}
-                    helperText='magnet / hash / .torrent file link'
+                helperText={t('TorrentSourceOptions')}
                 type='text'
                 fullWidth
                 onFocus={() => setTorrentSourceSelected(true)}
                 onBlur={() => setTorrentSourceSelected(false)}
                 inputProps={{ autoComplete: 'off' }}
-                    disabled={selectedFile}
+                disabled={!!selectedFile}
               />
             </RightSideTopSection>
 
@@ -401,7 +396,7 @@ export default function AddDialog({ handleClose }) {
                 </TorrentIconWrapper>
               </RightSideBottomSectionFileSelected>
             ) : (
-                  <FileUploadLabel htmlFor='upload-file' style={{ flex: 1 }}>
+              <FileUploadLabel htmlFor='upload-file'>
                 <input
                   onChange={handleCapture}
                   accept='.torrent'
@@ -411,17 +406,18 @@ export default function AddDialog({ handleClose }) {
                 />
 
                 <RightSideBottomSectionNoFile selectedFile={selectedFile} type='submit'>
-                      <div>OR</div>
+                  <div>{t('AppendFile.Or')}</div>
 
                   <IconWrapper>
                     <AddItemIcon color='primary' />
-                        <div>CLICK / DRAG & DROP</div>
+                    <div>{t('AppendFile.ClickOrDrag')}</div>
                   </IconWrapper>
                 </RightSideBottomSectionNoFile>
               </FileUploadLabel>
             )}
           </RightSide>
-            </MainSectionContentWrapper>
+        </Content>
+
         <ButtonWrapper>
           <Button onClick={handleClose} color='primary' variant='outlined'>
             {t('Cancel')}
@@ -431,52 +427,7 @@ export default function AddDialog({ handleClose }) {
             {t('Add')}
           </Button>
         </ButtonWrapper>
-          </MainSection>
+      </ContentWrapper>
-        </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>
-          <Button onClick={handleClose} color='primary' variant='outlined'>
-            {t('Cancel')}
-          </Button>
-  
-          <Button variant='contained' disabled={!link} onClick={handleSave} color='primary'>
-            {t('Add')}
-          </Button>
-        </DialogActions> */}
     </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')
+  if (data.toLowerCase() === 'torrent added') i18nd = t('TorrentAdded')
-    i18nd = t('TorrentAdded')
+  else if (data.toLowerCase() === 'torrent getting info') i18nd = t('TorrentGettingInfo')
-  else if (data.toLowerCase() === 'torrent getting info')
+  else if (data.toLowerCase() === 'torrent preload') i18nd = t('TorrentPreload')
-    i18nd = t('TorrentGettingInfo')
+  else if (data.toLowerCase() === 'torrent working') i18nd = t('TorrentWorking')
-  else if (data.toLowerCase() === 'torrent preload')
+  else if (data.toLowerCase() === 'torrent closed') i18nd = t('TorrentClosed')
-    i18nd = t('TorrentPreload')
+  else if (data.toLowerCase() === 'torrent in db') i18nd = t('TorrentInDb')
-  else if (data.toLowerCase() === 'torrent working')
+  return (
-    i18nd = t('TorrentWorking')
+    <StatisticsField title={t('TorrentStatus')} value={i18nd} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
-  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",
@@ -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": "Очистить"
 }