Merge branch 'master' into old-engine

web/src/components/About/style.js

@@ -20,7 +20,7 @@ export const HeaderSection = styled.section`
   }
 
   @media (max-width: 930px) {
-    font-size: 24px;
+    font-size: 22px;
     padding: 10px 20px;
 
     img {

web/src/components/Add/helpers.js

@@ -4,6 +4,7 @@ import ptt from 'parse-torrent-title'
 
 export const getMoviePosters = (movieName, language = 'en') => {
   const url = 'http://api.themoviedb.org/3/search/multi'
+  const imgHost = language == 'ru' ? 'http://imagetmdb.com' : 'http://image.tmdb.org' // https:
 
   return axios
     .get(url, {
@@ -15,7 +16,7 @@ export const getMoviePosters = (movieName, language = 'en') => {
       },
     })
     .then(({ data: { results } }) =>
-      results.filter(el => el.poster_path).map(el => `https://image.tmdb.org/t/p/w300${el.poster_path}`),
+      results.filter(el => el.poster_path).map(el => `${imgHost}/t/p/w300${el.poster_path}`),
     )
     .catch(() => null)
 }

web/src/components/App/index.jsx

@@ -22,7 +22,7 @@ import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-component
 import { useQuery } from 'react-query'
 import { getTorrents, isStandaloneApp } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'
-import { lightTheme, THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
+import { /* lightTheme, */ THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
 import getStyledComponentsTheme from 'style/getStyledComponentsTheme'
 import checkIsIOS from 'utils/checkIsIOS'
 
@@ -132,9 +132,9 @@ export default function App() {
                   setIsDonationDialogOpen={setIsDonationDialogOpen}
                 />
 
-                <MuiThemeProvider theme={lightTheme}>
+                {/* <MuiThemeProvider theme={lightTheme}> */}
                 {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-                </MuiThemeProvider>
+                {/* </MuiThemeProvider> */}
 
                 {snackbarIsClosed ? checkIsIOS() && !isStandaloneApp && <PWAInstallationGuide /> : <DonateSnackbar />}
               </AppWrapper>

web/src/components/Donate/DonateDialog.jsx

@@ -1,16 +1,15 @@
-import ListItem from '@material-ui/core/ListItem'
+// import ListItem from '@material-ui/core/ListItem'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogActions from '@material-ui/core/DialogActions'
-import List from '@material-ui/core/List'
+// import List from '@material-ui/core/List'
 import ButtonGroup from '@material-ui/core/ButtonGroup'
 import Button from '@material-ui/core/Button'
 import { useTranslation } from 'react-i18next'
 import { StyledDialog } from 'style/CustomMaterialUiStyles'
 import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
-const donateFrame =
+// const donateFrame = '<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="320" height="320" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
-  '<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="320" height="320" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
 
 export default function DonateDialog({ onClose }) {
   const { t } = useTranslation()
@@ -20,20 +19,20 @@ export default function DonateDialog({ onClose }) {
     <StyledDialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='xs' ref={ref}>
       <DialogTitle id='form-dialog-title'>{t('Donate')}</DialogTitle>
       <DialogContent>
-        <List>
+        {/* <List> */}
-          <ListItem key='DonateLinks'>
+        {/* <ListItem key='DonateLinks'> */}
-            <ButtonGroup variant='outlined' color='primary' aria-label='contained primary button group'>
+        <ButtonGroup variant='outlined' color='secondary' aria-label='contained primary button group'>
           <Button onClick={() => window.open('https://boosty.to/yourok', '_blank')}>Boosty</Button>
           <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>IO.Money</Button>
           <Button onClick={() => window.open('https://qiwi.com/n/YOUROK85', '_blank')}>QIWI</Button>
-              <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
+          {/* <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button> */}
         </ButtonGroup>
-          </ListItem>
+        {/* </ListItem> */}
-          <ListItem key='DonateForm'>
+        {/* <ListItem key='DonateForm'> */}
         {/* eslint-disable-next-line react/no-danger */}
-            <div dangerouslySetInnerHTML={{ __html: donateFrame }} />
+        {/* <div dangerouslySetInnerHTML={{ __html: donateFrame }} /> */}
-          </ListItem>
+        {/* </ListItem> */}
-        </List>
+        {/* </List> */}
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose} color='secondary' variant='contained'>

web/src/components/Settings/MobileAppSettings.jsx

@@ -1,4 +1,4 @@
-import { FormControlLabel, Switch } from '@material-ui/core'
+import { FormControlLabel, FormGroup, FormHelperText, Switch } from '@material-ui/core'
 import { useTranslation } from 'react-i18next'
 
 import { SecondarySettingsContent, SettingSectionLabel } from './style'
@@ -9,12 +9,14 @@ export default function MobileAppSettings({ isVlcUsed, setIsVlcUsed }) {
   return (
     <SecondarySettingsContent>
       <SettingSectionLabel>{t('SettingsDialog.MobileAppSettings')}</SettingSectionLabel>
-
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={isVlcUsed} onChange={() => setIsVlcUsed(prev => !prev)} color='secondary' />}
           label={t('SettingsDialog.UseVLC')}
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.UseVLCHint')}</FormHelperText>
+      </FormGroup>
     </SecondarySettingsContent>
   )
 }

web/src/components/Settings/SecondarySettingsComponent.jsx

@@ -39,32 +39,46 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
   return (
     <SecondarySettingsContent>
       <SettingSectionLabel>{t('SettingsDialog.AdditionalSettings')}</SettingSectionLabel>
-
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='secondary' />}
           label='IPv6'
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.EnableIPv6Hint')}</FormHelperText>
+      </FormGroup>
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='secondary' />}
           label='TCP (Transmission Control Protocol)'
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.DisableTCPHint')}</FormHelperText>
+      </FormGroup>
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='secondary' />}
           label='μTP (Micro Transport Protocol)'
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.DisableUTPHint')}</FormHelperText>
+      </FormGroup>
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='secondary' />}
           label='PEX (Peer Exchange)'
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.DisablePEXHint')}</FormHelperText>
+      </FormGroup>
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='secondary' />}
           label={t('SettingsDialog.ForceEncrypt')}
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.ForceEncryptHint')}</FormHelperText>
+      </FormGroup>
       <TextField
         onChange={inputForm}
         margin='normal'
@@ -91,11 +105,14 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         fullWidth
       />
       <br />
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='secondary' />}
           label={t('SettingsDialog.DHT')}
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.DisableDHTHint')}</FormHelperText>
+      </FormGroup>
       <TextField
         onChange={inputForm}
         margin='normal'
@@ -143,11 +160,14 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         variant='outlined'
         fullWidth
       />
+      <FormGroup>
         <FormControlLabel
           control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='secondary' />}
           label='UPnP (Universal Plug and Play)'
           labelPlacement='start'
         />
+        <FormHelperText margin='none'>{t('SettingsDialog.DisableUPNPHint')}</FormHelperText>
+      </FormGroup>
       <FormControlLabel
         control={<Switch checked={EnableDLNA} onChange={inputForm} id='EnableDLNA' color='secondary' />}
         label={t('SettingsDialog.DLNA')}
@@ -164,11 +184,6 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         variant='outlined'
         fullWidth
       />
-      <FormControlLabel
-        control={<Switch checked={EnableDebug} onChange={inputForm} id='EnableDebug' color='secondary' />}
-        label={t('SettingsDialog.EnableDebug')}
-        labelPlacement='start'
-      />
       <FormGroup>
         <FormControlLabel
           control={<Switch checked={EnableRutorSearch} onChange={inputForm} id='EnableRutorSearch' color='secondary' />}
@@ -177,6 +192,11 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
         />
         <FormHelperText margin='none'>{t('SettingsDialog.EnableRutorSearchHint')}</FormHelperText>
       </FormGroup>
+      <FormControlLabel
+        control={<Switch checked={EnableDebug} onChange={inputForm} id='EnableDebug' color='secondary' />}
+        label={t('SettingsDialog.EnableDebug')}
+        labelPlacement='start'
+      />
       <br />
       <InputLabel htmlFor='RetrackersMode'>{t('SettingsDialog.RetrackersMode')}</InputLabel>
       <Select

web/src/components/Settings/SettingsDialog.jsx

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import Button from '@material-ui/core/Button'
-import Checkbox from '@material-ui/core/Checkbox'
+import Switch from '@material-ui/core/Switch'
 import { FormControlLabel, useMediaQuery, useTheme } from '@material-ui/core'
 import { settingsHost } from 'utils/Hosts'
 import { useEffect, useState } from 'react'
@@ -94,7 +94,7 @@ export default function SettingsDialog({ handleClose }) {
         <div>{t('SettingsDialog.Settings')}</div>
         <FormControlLabel
           control={
-            <Checkbox
+            <Switch
               checked={isProMode}
               onChange={({ target: { checked } }) => {
                 setIsProMode(checked)
@@ -105,6 +105,7 @@ export default function SettingsDialog({ handleClose }) {
             />
           }
           label={t('SettingsDialog.ProMode')}
+          labelPlacement='start'
         />
       </SettingsHeader>
 

web/src/locales/en/translation.json

@@ -108,12 +108,19 @@
     "ConnectionsLimit": "Connections Limit",
     "ConnectionsLimitHint": "20-25 recommended",
     "DHT": "DHT (Distributed Hash Table)",
+    "DisableDHTHint": "Disable if there is no network after starting the server",
+    "DisablePEXHint": "Better leave enabled",
+    "DisableTCPHint": "Don't disable without μTP enabled",
+    "DisableUPNPHint": "Auto-open port on router",
+    "DisableUTPHint": "Not recommended to enable on weak devices",
     "Disk": "Disk",
     "DLNA": "DLNA Media Server",
     "DontAddRetrackers": "Don`t add retrackers",
     "DownloadRateLimit": "Download Rate Limit",
     "EnableDebug": "Enable Debug Server Log",
+    "EnableIPv6Hint": "Enable only if supported by ISP",
     "ForceEncrypt": "Force Encrypt Headers",
+    "ForceEncryptHint": "Can help with torrent blocking providers",
     "FriendlyName": "DLNA Server Name",
     "FriendlyNameHint": "Leave blank to use default",
     "EnableRutorSearch": "Turn on torrents search by RuTor",
@@ -143,7 +150,8 @@
       "AdditionalDisabled": "(enable PRO mode)",
       "App": "App"
     },
-    "UseVLC": "Prompt to open video in VLC"
+    "UseVLC": "Prompt to open video in VLC",
+    "UseVLCHint": "Add VLC player button to torrent content list"
   },
   "Size": "Size",
   "SpecialThanks": "Special Thanks",

web/src/locales/ru/translation.json

@@ -108,12 +108,19 @@
     "ConnectionsLimit": "Торрент-соединения",
     "ConnectionsLimitHint": "рекомендуется 20-25",
     "DHT": "DHT (Distributed Hash Table)",
+    "DisableDHTHint": "Распределенная хэш-таблица - отключите при отсутствии сети после запуска сервера",
+    "DisablePEXHint": "Обмен списками участников - не рекомендуется отключать",
+    "DisableTCPHint": "Не отключайте без включенного μTP",
+    "DisableUPNPHint": "Автоматическая настройка порта на роутере",
+    "DisableUTPHint": "Не рекомендуется включать на слабых устройствах",
     "Disk": "ПЗУ / Накопитель",
     "DLNA": "DLNA-медиасервер",
     "DontAddRetrackers": "Ничего не делать",
     "DownloadRateLimit": "Ограничение скорости загрузки",
     "EnableDebug": "Подробный журнал сервера",
+    "EnableIPv6Hint": "Включите только если поддерживается",
     "ForceEncrypt": "Шифрование заголовков",
+    "ForceEncryptHint": "Может помочь с блокирующими торрент провайдерами",
     "FriendlyName": "Имя сервера DLNA",
     "FriendlyNameHint": "Оставьте пустым, чтобы использовать значение по умолчанию.",
     "EnableRutorSearch": "Включить поиск по RuTor",
@@ -143,7 +150,8 @@
       "AdditionalDisabled": "(включите ПРО-режим)",
       "App": "Приложение"
     },
-    "UseVLC": "Предлагать открыть видео в VLC"
+    "UseVLC": "Предлагать открыть видео в VLC",
+    "UseVLCHint": "Добавить кнопку проигрывателя VLC в список торрент-контента"
   },
   "Size": "Размер",
   "SpecialThanks": "Отдельное спасибо",

web/src/locales/ua/translation.json

@@ -108,12 +108,19 @@
     "ConnectionsLimit": "Обмеження з'єдань",
     "ConnectionsLimitHint": "рекомендовано 20-25",
     "DHT": "DHT (Distributed Hash Table)",
+    "DisableDHTHint": "Відключіть при відсутності мережі після запуску сервера",
+    "DisablePEXHint": "Не рекомендується відключати",
+    "DisableTCPHint": "Не вимикайте без включеного μTP",
+    "DisableUPNPHint": "Автовідкриття порту на роутері",
+    "DisableUTPHint": "Не рекомендується на слабких пристроях",
     "Disk": "ПЗП / Носій",
     "DLNA": "DLNA-медиасервер",
     "DontAddRetrackers": "Нічого не робити",
     "DownloadRateLimit": "Обмеження швидкості завантаження",
     "EnableDebug": "Журнал налагодження сервера",
+    "EnableIPv6Hint": "Включите якщо підтримується",
     "ForceEncrypt": "Примусово шифрувати заголовки",
+    "ForceEncryptHint": "Може допомогти з блокуючими торрент провайдерами",
     "FriendlyName": "Ім'я сервера DLNA",
     "FriendlyNameHint": "Залиште порожнім, щоб використовувати значення за промовчанням.",
     "EnableRutorSearch": "Увімкніть пошук RuTor",
@@ -143,7 +150,8 @@
       "AdditionalDisabled": "(включіть ПРО-режим)",
       "App": "Додаток"
     },
-    "UseVLC": "Пропонувати відкрити відео у VLC"
+    "UseVLC": "Пропонувати відкрити відео у VLC",
+    "UseVLCHint": "Додати кнопку програвача VLC до списку торрент-контенту"
   },
   "Size": "Розмір",
   "SpecialThanks": "Окрема подяка",

web/src/style/colors.js

@@ -7,6 +7,7 @@ export const themeColors = {
       appSecondaryColor: '#cbe8d9',
       sidebarBGColor: '#575757',
       sidebarFillColor: '#dee3e5',
+      paperColor: '#eeeeee',
     },
     torrentCard: {
       accentCardColor: '#337a57',
@@ -58,6 +59,7 @@ export const themeColors = {
       appSecondaryColor: '#545a5e',
       sidebarBGColor: '#323637',
       sidebarFillColor: '#dee3e5',
+      paperColor: '#323637',
     },
     torrentCard: {
       accentCardColor: '#323637',

web/src/style/materialUISetup.js

@@ -1,7 +1,7 @@
 import { createTheme, useMediaQuery } from '@material-ui/core'
 import { useEffect, useMemo, useState } from 'react'
 
-import { mainColors } from './colors'
+import { mainColors, themeColors } from './colors'
 
 export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
 
@@ -53,6 +53,16 @@ export const useMaterialUITheme = () => {
           secondary: { main: mainColors[theme].secondary },
         },
         overrides: {
+          MuiTypography: {
+            h6: {
+              fontSize: '1.2rem',
+            },
+          },
+          MuiPaper: {
+            root: {
+              backgroundColor: themeColors[theme].app.paperColor,
+            },
+          },
           MuiInputBase: {
             input: {
               color: mainColors[theme].labels,
@@ -80,7 +90,7 @@ export const useMaterialUITheme = () => {
           MuiFormGroup: {
             root: {
               '& .MuiFormHelperText-root': {
-                marginTop: -10,
+                marginTop: -8,
               },
             },
           },