Merge pull request #64 from tsynik/MatriX-i18n

MatriX i18n
2025-12-19 21:46:11 +05:00 · 2021-06-06 21:37:36 +03:00
parent 0d61c5192f 4773363854
commit 08b75e4a9b
26 changed files with 552 additions and 267 deletions
--- a/build-all.sh
+++ b/build-all.sh
@@ -34,6 +34,7 @@ OUTPUT="${ROOT}/dist/TorrServer"
 #### Build web
 echo "Build web"
 cd "${ROOT}/web" || exit 1
+npm install --silent
 npm run --silent build-js
 cp "${ROOT}/web/dest/index.html" "${ROOT}/server/web/pages/template/pages/"

--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,8 @@
    "axios": "^0.21.1",
    "clsx": "^1.1.1",
    "fontsource-roboto": "^4.0.0",
+    "i18next": "^20.3.1",
+    "i18next-browser-languagedetector": "^6.1.1",
    "konva": "^8.0.1",
    "lodash": "^4.17.21",
    "material-ui-image": "^3.3.2",
@@ -16,6 +18,7 @@
    "react-copy-to-clipboard": "^5.0.3",
    "react-div-100vh": "^0.6.0",
    "react-dom": "^17.0.2",
+    "react-i18next": "^11.10.0",
    "react-konva": "^17.0.2-4",
    "react-measure": "^2.5.2",
    "react-scripts": "4.0.3",
--- a/web/public/index.html
+++ b/web/public/index.html
--- a/web/src/App/Sidebar.jsx
+++ b/web/src/App/Sidebar.jsx
@@ -11,21 +11,23 @@ import UploadDialog from 'components/Upload'
 import { CreditCard as CreditCardIcon, List as ListIcon } from '@material-ui/icons'
 import List from '@material-ui/core/List'
 import CloseServer from 'components/CloseServer'
+import { useTranslation } from 'react-i18next'

 import { AppSidebarStyle } from './style'

 export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
+  const { t } = useTranslation()
  return (
    <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
      <List>
        <AddDialogButton />
        <UploadDialog />
        <RemoveAll />
-        <ListItem button component='a' key='Playlist all torrents' target='_blank' href={playlistAllHost()}>
+        <ListItem button component='a' key={t('PlaylistAll')} target='_blank' href={playlistAllHost()}>
          <ListItemIcon>
            <ListIcon />
          </ListItemIcon>
-          <ListItemText primary='Playlist all torrents' />
+          <ListItemText primary={t('PlaylistAll')} />
        </ListItem>
      </List>

@@ -44,7 +46,7 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
          <ListItemIcon>
            <CreditCardIcon />
          </ListItemIcon>
-          <ListItemText primary='Donate' />
+          <ListItemText primary={t('Donate')} />
        </ListItem>
      </List>
    </AppSidebarStyle>
--- a/web/src/App/index.jsx
+++ b/web/src/App/index.jsx
@@ -16,7 +16,7 @@ import Sidebar from './Sidebar'

 const baseTheme = createMuiTheme({
  overrides: { MuiCssBaseline: { '@global': { html: { WebkitFontSmoothing: 'auto' } } } },
-  palette: { primary: { main: '#3fb57a' }, secondary: { main: '#FFA724' }, tonalOffset: 0.2 },
+  palette: { primary: { main: '#00a572' }, secondary: { main: '#ffa724' }, tonalOffset: 0.2 },
 })

 export default function App() {
--- a/web/src/App/style.js
+++ b/web/src/App/style.js
@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components'

 export const AppWrapper = styled.div`
  height: 100%;
+  background: #cbe8d9;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: 60px 1fr;
@@ -17,7 +18,7 @@ export const CenteredGrid = styled.div`
 `

 export const AppHeader = styled.div`
-  background: #3fb57a;
+  background: #00a572;
  color: rgba(0, 0, 0, 0.87);
  grid-area: head;
  display: flex;
@@ -34,7 +35,7 @@ export const AppSidebarStyle = styled.div`
    overflow-x: hidden;
    transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
-    background: #fff;
+    background: #eee;
    white-space: nowrap;
  `}
 `
--- a/web/src/components/About.jsx
+++ b/web/src/components/About.jsx
@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import axios from 'axios'
+import { useEffect, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
@@ -8,9 +9,16 @@ import InfoIcon from '@material-ui/icons/Info'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
+import { useTranslation } from 'react-i18next'
+import { echoHost } from 'utils/Hosts'

 export default function AboutDialog() {
+  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
+  const [torrServerVersion, setTorrServerVersion] = useState('')
+  useEffect(() => {
+    axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
+  }, [])

  return (
    <div>
@@ -18,26 +26,30 @@ export default function AboutDialog() {
        <ListItemIcon>
          <InfoIcon />
        </ListItemIcon>
-        <ListItemText primary='About' />
+        <ListItemText primary={t('About')} />
      </ListItem>

      <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='lg'>
-        <DialogTitle id='form-dialog-title'>About</DialogTitle>
+        <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>

        <DialogContent>
+          <center>
+            <h2>TorrServer {torrServerVersion}</h2>
+            <a href='https://github.com/YouROK/TorrServer'>https://github.com/YouROK/TorrServer</a>
+          </center>
          <DialogContent>
            <center>
-              <h2>Thanks to everyone who tested and helped.</h2>
+              <h2>{t('ThanksToEveryone')}</h2>
            </center>
            <br />
-            <h2>Special thanks:</h2>
-            <b>Anacrolix Matt Joiner</b> <a href='https://github.com/anacrolix/'>github.com/anacrolix</a>
+            <h2>{t('SpecialThanks')}</h2>
+            <b>anacrolix Matt Joiner</b> <a href='https://github.com/anacrolix/'>github.com/anacrolix</a>
            <br />
-            <b>tsynik nikk Никита</b> <a href='https://github.com/tsynik'>github.com/tsynik</a>
+            <b>nikk</b> <a href='https://github.com/tsynik'>github.com/tsynik</a>
            <br />
            <b>dancheskus</b> <a href='https://github.com/dancheskus'>github.com/dancheskus</a>
            <br />
-            <b>Tw1cker Руслан Пахнев</b> <a href='https://github.com/Nemiroff'>github.com/Nemiroff</a>
+            <b>tw1cker Руслан Пахнев</b> <a href='https://github.com/Nemiroff'>github.com/Nemiroff</a>
            <br />
            <b>SpAwN_LMG</b>
            <br />
@@ -46,7 +58,7 @@ export default function AboutDialog() {

        <DialogActions>
          <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
-            Close
+            {t('Close')}
          </Button>
        </DialogActions>
      </Dialog>
--- a/web/src/components/Add/AddDialog.jsx
+++ b/web/src/components/Add/AddDialog.jsx
@@ -7,8 +7,10 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { torrentsHost } from 'utils/Hosts'
 import axios from 'axios'
+import { useTranslation } from 'react-i18next'

 export default function AddDialog({ handleClose }) {
+  const { t } = useTranslation()
  const [link, setLink] = useState('')
  const [title, setTitle] = useState('')
  const [poster, setPoster] = useState('')
@@ -23,17 +25,17 @@ export default function AddDialog({ handleClose }) {

  return (
    <Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
-      <DialogTitle id='form-dialog-title'>Add magnet or link to torrent file</DialogTitle>
+      <DialogTitle id='form-dialog-title'>{t('AddMagnetOrLink')}</DialogTitle>

      <DialogContent>
-        <TextField onChange={inputTitle} margin='dense' id='title' label='Title' type='text' fullWidth />
-        <TextField onChange={inputPoster} margin='dense' id='poster' label='Poster' type='url' fullWidth />
+        <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='Magnet or torrent file link'
+          label={t('MagnetOrTorrentFileLink')}
          type='text'
          fullWidth
        />
@@ -41,11 +43,11 @@ export default function AddDialog({ handleClose }) {

      <DialogActions>
        <Button onClick={handleClose} color='primary' variant='outlined'>
-          Cancel
+          {t('Cancel')}
        </Button>

        <Button variant='contained' disabled={!link} onClick={handleSave} color='primary'>
-          Add
+          {t('Add')}
        </Button>
      </DialogActions>
    </Dialog>
--- a/web/src/components/Add/index.jsx
+++ b/web/src/components/Add/index.jsx
@@ -3,12 +3,13 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'
 import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 import ListItemText from '@material-ui/core/ListItemText'
 import ListItem from '@material-ui/core/ListItem'
+import { useTranslation } from 'react-i18next'

 import AddDialog from './AddDialog'

 export default function AddDialogButton() {
+  const { t } = useTranslation()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
-
  const handleClickOpen = () => setIsDialogOpen(true)
  const handleClose = () => setIsDialogOpen(false)

@@ -18,7 +19,7 @@ export default function AddDialogButton() {
        <ListItemIcon>
          <LibraryAddIcon />
        </ListItemIcon>
-        <ListItemText primary='Add from link' />
+        <ListItemText primary={t('AddFromLink')} />
      </ListItem>

      {isDialogOpen && <AddDialog handleClose={handleClose} />}
--- a/web/src/components/CloseServer.jsx
+++ b/web/src/components/CloseServer.jsx
@@ -2,27 +2,29 @@ import { useState } from 'react'
 import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
 import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
 import { shutdownHost } from 'utils/Hosts'
+import { useTranslation } from 'react-i18next'

 export default function CloseServer() {
+  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const closeDialog = () => setOpen(false)
  const openDialog = () => setOpen(true)

  return (
    <>
-      <ListItem button key='Close server' onClick={openDialog}>
+      <ListItem button key={t('CloseServer')} onClick={openDialog}>
        <ListItemIcon>
          <PowerSettingsNewIcon />
        </ListItemIcon>

-        <ListItemText primary='Close server' />
+        <ListItemText primary={t('CloseServer')} />
      </ListItem>

      <Dialog open={open} onClose={closeDialog}>
-        <DialogTitle>Close server?</DialogTitle>
+        <DialogTitle>{t('CloseServer?')}</DialogTitle>
        <DialogActions>
          <Button variant='outlined' onClick={closeDialog} color='primary'>
-            Cancel
+            {t('Cancel')}
          </Button>

          <Button
@@ -34,7 +36,7 @@ export default function CloseServer() {
            color='primary'
            autoFocus
          >
-            Ok
+            {t('OK')}
          </Button>
        </DialogActions>
      </Dialog>
--- a/web/src/components/DialogTorrentDetailsContent/DialogHeader.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/DialogHeader.jsx
@@ -2,6 +2,7 @@ import Button from '@material-ui/core/Button'
 import { AppBar, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { ArrowBack } from '@material-ui/icons'
+import { useTranslation } from 'react-i18next'

 const useStyles = makeStyles(theme => ({
  appBar: { position: 'relative' },
@@ -9,6 +10,7 @@ const useStyles = makeStyles(theme => ({
 }))

 export default function DialogHeader({ title, onClose, onBack }) {
+  const { t } = useTranslation()
  const classes = useStyles()

  return (
@@ -24,7 +26,7 @@ export default function DialogHeader({ title, onClose, onBack }) {

        {onBack && (
          <Button autoFocus color='inherit' onClick={onClose}>
-            close
+            {t('Close')}
          </Button>
        )}
      </Toolbar>
--- a/web/src/components/DialogTorrentDetailsContent/Table/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/Table/index.jsx
@@ -4,6 +4,7 @@ import { humanizeSize } from 'utils/Utils'
 import ptt from 'parse-torrent-title'
 import { Button } from '@material-ui/core'
 import CopyToClipboard from 'react-copy-to-clipboard'
+import { useTranslation } from 'react-i18next'

 import { TableStyle, ShortTableWrapper, ShortTable } from './style'

@@ -11,6 +12,7 @@ const { memo } = require('react')

 const Table = memo(
  ({ playableFileList, viewedFileList, selectedSeason, seasonAmount, hash }) => {
+    const { t } = useTranslation()
    const preloadBuffer = fileId => fetch(`${streamHost()}?link=${hash}&index=${fileId}&preload`)
    const getFileLink = (path, id) =>
      `${streamHost()}/${encodeURIComponent(path.split('\\').pop().split('/').pop())}?link=${hash}&index=${id}&play`
@@ -25,13 +27,13 @@ const Table = memo(
        <TableStyle>
          <thead>
            <tr>
-              <th style={{ width: '0' }}>viewed</th>
-              <th>name</th>
-              {fileHasSeasonText && seasonAmount?.length === 1 && <th style={{ width: '0' }}>season</th>}
-              {fileHasEpisodeText && <th style={{ width: '0' }}>episode</th>}
-              {fileHasResolutionText && <th style={{ width: '0' }}>resolution</th>}
-              <th style={{ width: '100px' }}>size</th>
-              <th style={{ width: '400px' }}>actions</th>
+              <th style={{ width: '0' }}>{t('Viewed')}</th>
+              <th>{t('Name')}</th>
+              {fileHasSeasonText && seasonAmount?.length === 1 && <th style={{ width: '0' }}>{t('Season')}</th>}
+              {fileHasEpisodeText && <th style={{ width: '0' }}>{t('Episode')}</th>}
+              {fileHasResolutionText && <th style={{ width: '0' }}>{t('Resolution')}</th>}
+              <th style={{ width: '100px' }}>{t('Size')}</th>
+              <th style={{ width: '400px' }}>{t('Actions')}</th>
            </tr>
          </thead>

@@ -52,18 +54,18 @@ const Table = memo(
                    <td data-label='size'>{humanizeSize(length)}</td>
                    <td className='button-cell'>
                      <Button onClick={() => preloadBuffer(id)} variant='outlined' color='primary' size='small'>
-                        Preload
+                        {t('Preload')}
                      </Button>

                      <a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
                        <Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
-                          Open link
+                          {t('OpenLink')}
                        </Button>
                      </a>

                      <CopyToClipboard text={link}>
                        <Button variant='outlined' color='primary' size='small'>
-                          Copy link
+                          {t('CopyLink')}
                        </Button>
                      </CopyToClipboard>
                    </td>
@@ -87,7 +89,7 @@ const Table = memo(
                  <div className='short-table-data'>
                    {isViewed && (
                      <div className='short-table-field'>
-                        <div className='short-table-field-name'>viewed</div>
+                        <div className='short-table-field-name'>{t('Viewed')}</div>
                        <div className='short-table-field-value'>
                          <div className='short-table-viewed-indicator' />
                        </div>
@@ -95,41 +97,41 @@ const Table = memo(
                    )}
                    {fileHasSeasonText && seasonAmount?.length === 1 && (
                      <div className='short-table-field'>
-                        <div className='short-table-field-name'>season</div>
+                        <div className='short-table-field-name'>{t('Season')}</div>
                        <div className='short-table-field-value'>{season}</div>
                      </div>
                    )}
                    {fileHasEpisodeText && (
                      <div className='short-table-field'>
-                        <div className='short-table-field-name'>epoisode</div>
+                        <div className='short-table-field-name'>{t('Episode')}</div>
                        <div className='short-table-field-value'>{episode}</div>
                      </div>
                    )}
                    {fileHasResolutionText && (
                      <div className='short-table-field'>
-                        <div className='short-table-field-name'>resolution</div>
+                        <div className='short-table-field-name'>{t('Resolution')}</div>
                        <div className='short-table-field-value'>{resolution}</div>
                      </div>
                    )}
                    <div className='short-table-field'>
-                      <div className='short-table-field-name'>size</div>
+                      <div className='short-table-field-name'>{t('Size')}</div>
                      <div className='short-table-field-value'>{humanizeSize(length)}</div>
                    </div>
                  </div>
                  <div className='short-table-buttons'>
                    <Button onClick={() => preloadBuffer(id)} variant='outlined' color='primary' size='small'>
-                      Preload
+                      {t('Preload')}
                    </Button>

                    <a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
                      <Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
-                        Open link
+                        {t('OpenLink')}
                      </Button>
                    </a>

                    <CopyToClipboard text={link}>
                      <Button variant='outlined' color='primary' size='small'>
-                        Copy link
+                        {t('CopyLink')}
                      </Button>
                    </CopyToClipboard>
                  </div>
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/colors.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/colors.js
@@ -1,7 +1,7 @@
 export const defaultBorderColor = '#eef2f4'
 export const defaultBackgroundColor = '#fff'
-export const completeColor = '#3fb57a'
-export const progressColor = '#00d0d0'
+export const completeColor = '#00a572'
+export const progressColor = '#ffa724'
 export const activeColor = '#000'
 export const rangeColor = '#9a9aff'

--- a/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/index.jsx
@@ -4,12 +4,14 @@ import { playlistTorrHost, torrentsHost, viewedHost } from 'utils/Hosts'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Button } from '@material-ui/core'
 import ptt from 'parse-torrent-title'
+import { useTranslation } from 'react-i18next'

 import { SmallLabel, MainSectionButtonGroup } from './style'
 import { SectionSubName } from '../style'

 const TorrentFunctions = memo(
  ({ hash, viewedFileList, playableFileList, name, title, setViewedFileList }) => {
+    const { t } = useTranslation()
    const latestViewedFileId = viewedFileList?.[viewedFileList?.length - 1]
    const latestViewedFile = playableFileList?.find(({ id }) => id === latestViewedFileId)?.path
    const isOnlyOnePlayableFile = playableFileList?.length === 1
@@ -24,13 +26,13 @@ const TorrentFunctions = memo(
      <>
        {!isOnlyOnePlayableFile && !!viewedFileList?.length && (
          <>
-            <SmallLabel>Download Playlist</SmallLabel>
+            <SmallLabel>{t('DownloadPlaylist')}</SmallLabel>
            <SectionSubName mb={10}>
-              <strong>Latest file played:</strong> {latestViewedFileData?.title}.
+              <strong>{t('LatestFilePlayed')}</strong> {latestViewedFileData?.title}.
              {latestViewedFileData?.season && (
                <>
                  {' '}
-                  Season: {latestViewedFileData?.season}. Episode: {latestViewedFileData?.episode}.
+                  {t('Season')}: {latestViewedFileData?.season}. {t('Episode')}: {latestViewedFileData?.episode}.
                </>
              )}
            </SectionSubName>
@@ -38,39 +40,39 @@ const TorrentFunctions = memo(
            <MainSectionButtonGroup>
              <a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
                <Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
-                  full
+                  {t('Full')}
                </Button>
              </a>

              <a style={{ textDecoration: 'none' }} href={partialPlaylistLink}>
                <Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
-                  from latest file
+                  {t('FromLatestFile')}
                </Button>
              </a>
            </MainSectionButtonGroup>
          </>
        )}
-        <SmallLabel mb={10}>Torrent State</SmallLabel>
+        <SmallLabel mb={10}>{t('TorrentState')}</SmallLabel>
        <MainSectionButtonGroup>
          <Button onClick={() => removeTorrentViews()} variant='contained' color='primary' size='large'>
-            remove views
+            {t('RemoveViews')}
          </Button>
          <Button onClick={() => dropTorrent()} variant='contained' color='primary' size='large'>
-            reset torrent
+            {t('DropTorrent')}
          </Button>
        </MainSectionButtonGroup>
-        <SmallLabel mb={10}>Info</SmallLabel>
+        <SmallLabel mb={10}>{t('Info')}</SmallLabel>
        <MainSectionButtonGroup>
          {(isOnlyOnePlayableFile || !viewedFileList?.length) && (
            <a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
              <Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
-                download playlist
+                {t('DownloadPlaylist')}
              </Button>
            </a>
          )}
          <CopyToClipboard text={hash}>
            <Button variant='contained' color='primary' size='large'>
-              copy hash
+              {t('CopyHash')}
            </Button>
          </CopyToClipboard>
        </MainSectionButtonGroup>
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/index.jsx
@@ -7,6 +7,7 @@ import axios from 'axios'
 import { viewedHost } from 'utils/Hosts'
 import { GETTING_INFO, IN_DB } from 'torrentStates'
 import CircularProgress from '@material-ui/core/CircularProgress'
+import { useTranslation } from 'react-i18next'

 import { useUpdateCache, useGetSettings } from './customHooks'
 import DialogHeader from './DialogHeader'
@@ -37,6 +38,7 @@ const Loader = () => (
 )

 export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
+  const { t } = useTranslation()
  const [isLoading, setIsLoading] = useState(true)
  const [isDetailedCacheView, setIsDetailedCacheView] = useState(false)
  const [viewedFileList, setViewedFileList] = useState()
@@ -99,6 +101,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
  }, [hash])

  const bufferSize = settings?.PreloadBuffer ? Capacity : 33554432 // Default is 32mb if PreloadBuffer is false
+  // const bufferSize = Capacity

  const getTitle = value => {
    const torrentParsedName = value && ptt.parse(value)
@@ -115,7 +118,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
    <>
      <DialogHeader
        onClose={closeDialog}
-        title={isDetailedCacheView ? 'Detailed Cache View' : 'Torrent Details'}
+        title={isDetailedCacheView ? t('DetailedCacheView') : t('TorrentDetails')}
        {...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
      />

@@ -171,10 +174,8 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {

            <CacheSection>
              <SectionHeader>
-                <SectionTitle mb={20}>Buffer</SectionTitle>
-                {!settings?.PreloadBuffer && (
-                  <SectionSubName>Enable &quot;Preload Buffer&quot; in settings to change buffer size</SectionSubName>
-                )}
+                <SectionTitle mb={20}>{t('Buffer')}</SectionTitle>
+                {!settings?.PreloadBuffer && <SectionSubName>{t('BufferNote')}</SectionSubName>}
                <LoadingProgress
                  value={Filled}
                  fullAmount={bufferSize}
@@ -190,16 +191,16 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                size='large'
                onClick={() => setIsDetailedCacheView(true)}
              >
-                Detailed cache view
+                {t('DetailedCacheView')}
              </Button>
            </CacheSection>

            <TorrentFilesSection>
-              <SectionTitle mb={20}>Torrent Content</SectionTitle>
+              <SectionTitle mb={20}>{t('TorrentContent')}</SectionTitle>

              {seasonAmount?.length > 1 && (
                <>
-                  <SectionSubName mb={7}>Select Season</SectionSubName>
+                  <SectionSubName mb={7}>{t('SelectSeason')}</SectionSubName>
                  <ButtonGroup style={{ marginBottom: '30px' }} color='primary'>
                    {seasonAmount.map(season => (
                      <Button
@@ -212,7 +213,9 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                    ))}
                  </ButtonGroup>

-                  <SectionTitle mb={20}>Season {selectedSeason}</SectionTitle>
+                  <SectionTitle mb={20}>
+                    {t('Season')} {selectedSeason}
+                  </SectionTitle>
                </>
              )}

--- a/web/src/components/DialogTorrentDetailsContent/widgets.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/widgets.jsx
@@ -8,61 +8,81 @@ import {
  Build as BuildIcon,
 } from '@material-ui/icons'
 import { getPeerString, humanizeSize } from 'utils/Utils'
+import { useTranslation } from 'react-i18next'

 import StatisticsField from './StatisticsField'

-export const DownlodSpeedWidget = ({ data }) => (
-  <StatisticsField
-    title='Download speed'
-    value={humanizeSize(data) || '0 B'}
-    iconBg='#118f00'
-    valueBg='#13a300'
-    icon={ArrowDownwardIcon}
-  />
-)
+export const DownlodSpeedWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('DownloadSpeed')}
+      value={humanizeSize(data) || '0 B'}
+      iconBg='#118f00'
+      valueBg='#13a300'
+      icon={ArrowDownwardIcon}
+    />
+  )
+}

-export const UploadSpeedWidget = ({ data }) => (
-  <StatisticsField
-    title='Upload speed'
-    value={humanizeSize(data) || '0 B'}
-    iconBg='#0146ad'
-    valueBg='#0058db'
-    icon={ArrowUpwardIcon}
-  />
-)
+export const UploadSpeedWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('UploadSpeed')}
+      value={humanizeSize(data) || '0 B'}
+      iconBg='#0146ad'
+      valueBg='#0058db'
+      icon={ArrowUpwardIcon}
+    />
+  )
+}

-export const PeersWidget = ({ data }) => (
-  <StatisticsField
-    title='Peers'
-    value={getPeerString(data) || '[0] 0 / 0'}
-    iconBg='#cdc118'
-    valueBg='#d8cb18'
-    icon={SwapVerticalCircleIcon}
-  />
-)
+export const PeersWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('Peers')}
+      value={getPeerString(data) || '[0] 0 / 0'}
+      iconBg='#cdc118'
+      valueBg='#d8cb18'
+      icon={SwapVerticalCircleIcon}
+    />
+  )
+}

-export const PiecesCountWidget = ({ data }) => (
-  <StatisticsField title='Pieces count' value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
-)
-export const PiecesLengthWidget = ({ data }) => (
-  <StatisticsField
-    title='Pieces length'
-    value={humanizeSize(data)}
-    iconBg='#0982c8'
-    valueBg='#098cd7'
-    icon={PhotoSizeSelectSmallIcon}
-  />
-)
-export const StatusWidget = ({ data }) => (
-  <StatisticsField title='Torrent status' value={data} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
-)
+export const PiecesCountWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return <StatisticsField title={t('PiecesCount')} value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
+}

-export const SizeWidget = ({ data }) => (
-  <StatisticsField
-    title='Torrent size'
-    value={humanizeSize(data)}
-    iconBg='#9b01ad'
-    valueBg='#ac03bf'
-    icon={ViewAgendaIcon}
-  />
-)
+export const PiecesLengthWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('PiecesLength')}
+      value={humanizeSize(data)}
+      iconBg='#0982c8'
+      valueBg='#098cd7'
+      icon={PhotoSizeSelectSmallIcon}
+    />
+  )
+}
+
+export const StatusWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return <StatisticsField title={t('TorrentStatus')} value={data} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
+}
+
+export const SizeWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('TorrentSize')}
+      value={humanizeSize(data)}
+      iconBg='#9b01ad'
+      valueBg='#ac03bf'
+      icon={ViewAgendaIcon}
+    />
+  )
+}
--- a/web/src/components/Donate/DonateDialog.jsx
+++ b/web/src/components/Donate/DonateDialog.jsx
@@ -6,22 +6,23 @@ import DialogActions from '@material-ui/core/DialogActions'
 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'

 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="100%" height="302" 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()
+
  return (
    <Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth>
-      <DialogTitle id='form-dialog-title'>Donate</DialogTitle>
+      <DialogTitle id='form-dialog-title'>{t('Donate')}</DialogTitle>
      <DialogContent>
        <List>
          <ListItem key='DonateLinks'>
            <ButtonGroup variant='outlined' color='primary' aria-label='contained primary button group'>
              <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
-              <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>
-                Yandex.Money
-              </Button>
+              <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>IO.Money</Button>
            </ButtonGroup>
          </ListItem>
          <ListItem key='DonateForm'>
--- a/web/src/components/RemoveAll.jsx
+++ b/web/src/components/RemoveAll.jsx
@@ -5,6 +5,7 @@ import ListItemText from '@material-ui/core/ListItemText'
 import DeleteIcon from '@material-ui/icons/Delete'
 import { useState } from 'react'
 import { torrentsHost } from 'utils/Hosts'
+import { useTranslation } from 'react-i18next'

 const fnRemoveAll = () => {
  fetch(torrentsHost(), {
@@ -31,25 +32,25 @@ const fnRemoveAll = () => {
 }

 export default function RemoveAll() {
+  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const closeDialog = () => setOpen(false)
  const openDialog = () => setOpen(true)
-
  return (
    <>
-      <ListItem button key='Remove all' onClick={openDialog}>
+      <ListItem button key={t('RemoveAll')} onClick={openDialog}>
        <ListItemIcon>
          <DeleteIcon />
        </ListItemIcon>

-        <ListItemText primary='Remove all' />
+        <ListItemText primary={t('RemoveAll')} />
      </ListItem>

      <Dialog open={open} onClose={closeDialog}>
-        <DialogTitle>Delete Torrent?</DialogTitle>
+        <DialogTitle>{t('DeleteTorrents?')}</DialogTitle>
        <DialogActions>
          <Button variant='outlined' onClick={closeDialog} color='primary'>
-            Cancel
+            {t('Cancel')}
          </Button>

          <Button
@@ -61,7 +62,7 @@ export default function RemoveAll() {
            color='primary'
            autoFocus
          >
-            Ok
+            {t('OK')}
          </Button>
        </DialogActions>
      </Dialog>
--- a/web/src/components/Settings.jsx
+++ b/web/src/components/Settings.jsx
@@ -1,3 +1,4 @@
+import axios from 'axios'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
@@ -11,9 +12,10 @@ import DialogActions from '@material-ui/core/DialogActions'
 import Button from '@material-ui/core/Button'
 import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
 import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
-import axios from 'axios'
+import { useTranslation } from 'react-i18next'

 export default function SettingsDialog() {
+  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const [settings, setSets] = useState({})
  const [show, setShow] = useState(false)
@@ -49,7 +51,16 @@ export default function SettingsDialog() {
    if (type === 'number' || type === 'select-one') {
      sets[id] = Number(value)
    } else if (type === 'checkbox') {
-      sets[id] = Boolean(checked)
+      if (
+        id === 'DisableTCP' ||
+        id === 'DisableUTP' ||
+        id === 'DisableUPNP' ||
+        id === 'DisableDHT' ||
+        id === 'DisablePEX' ||
+        id === 'DisableUpload'
+      )
+        sets[id] = Boolean(!checked)
+      else sets[id] = Boolean(checked)
    } else if (type === 'url') {
      sets[id] = value
    }
@@ -82,21 +93,21 @@ export default function SettingsDialog() {

  return (
    <div>
-      <ListItem button key='Settings' onClick={handleClickOpen}>
+      <ListItem button key={t('Settings')} onClick={handleClickOpen}>
        <ListItemIcon>
          <SettingsIcon />
        </ListItemIcon>
-        <ListItemText primary='Settings' />
+        <ListItemText primary={t('Settings')} />
      </ListItem>

      <Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
-        <DialogTitle id='form-dialog-title'>Settings</DialogTitle>
+        <DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
        <DialogContent>
          <TextField
            onChange={onInputHost}
            margin='dense'
            id='TorrServerHost'
-            label='Host'
+            label={t('Host')}
            value={tsHost}
            type='url'
            fullWidth
@@ -107,162 +118,170 @@ export default function SettingsDialog() {
                onChange={inputForm}
                margin='dense'
                id='CacheSize'
-                label='Cache size'
+                label={t('CacheSize')}
                value={CacheSize}
                type='number'
                fullWidth
              />
-              <FormControlLabel
-                control={<Switch checked={PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />}
-                label='Preload buffer'
-              />
+              <br />
              <TextField
                onChange={inputForm}
                margin='dense'
                id='ReaderReadAHead'
-                label='Reader readahead'
+                label={t('ReaderReadAHead')}
                value={ReaderReadAHead}
                type='number'
                fullWidth
              />
              <br />
-              <br />
-              <InputLabel htmlFor='RetrackersMode'>Retracker mode</InputLabel>
-              <Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}>
-                <option value={0}>Don&apos;t add retrackers</option>
-                <option value={1}>Add retrackers</option>
-                <option value={2}>Remove retrackers</option>
-                <option value={3}>Replace retrackers</option>
-              </Select>
-              <TextField
-                onChange={inputForm}
-                margin='dense'
-                id='TorrentDisconnectTimeout'
-                label='Torrent disconnect timeout'
-                value={TorrentDisconnectTimeout}
-                type='number'
-                fullWidth
-              />
              <FormControlLabel
-                control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
-                label='Enable IPv6'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />}
-                label='Force encrypt'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
-                label='Disable TCP'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
-                label='Disable UTP'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />}
-                label='Disable UPNP'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
-                label='Disable DHT'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
-                label='Disable PEX'
-              />
-              <br />
-              <FormControlLabel
-                control={<Switch checked={DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
-                label='Disable upload'
-              />
-              <br />
-              <TextField
-                onChange={inputForm}
-                margin='dense'
-                id='DownloadRateLimit'
-                label='Download rate limit'
-                value={DownloadRateLimit}
-                type='number'
-                fullWidth
-              />
-              <TextField
-                onChange={inputForm}
-                margin='dense'
-                id='UploadRateLimit'
-                label='Upload rate limit'
-                value={UploadRateLimit}
-                type='number'
-                fullWidth
-              />
-              <TextField
-                onChange={inputForm}
-                margin='dense'
-                id='ConnectionsLimit'
-                label='Connections limit'
-                value={ConnectionsLimit}
-                type='number'
-                fullWidth
-              />
-              <TextField
-                onChange={inputForm}
-                margin='dense'
-                id='DhtConnectionLimit'
-                label='Dht connection limit'
-                value={DhtConnectionLimit}
-                type='number'
-                fullWidth
-              />
-              <TextField
-                onChange={inputForm}
-                margin='dense'
-                id='PeersListenPort'
-                label='Peers listen port'
-                value={PeersListenPort}
-                type='number'
-                fullWidth
+                control={<Switch checked={PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />}
+                label={t('PreloadBuffer')}
              />
              <br />
              <FormControlLabel
                control={<Switch checked={UseDisk} onChange={inputForm} id='UseDisk' color='primary' />}
-                label='Use disk'
+                label={t('UseDisk')}
              />
              <br />
              <FormControlLabel
                control={
                  <Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='primary' />
                }
-                label='Remove cache from disk on drop torrent'
+                label={t('RemoveCacheOnDrop')}
              />
              <br />
-              <small>If disabled, remove cache on delete torrent</small>
+              <small>{t('RemoveCacheOnDropDesc')}</small>
              <br />
              <TextField
                onChange={inputForm}
                margin='dense'
                id='TorrentsSavePath'
-                label='Torrents save path'
+                label={t('TorrentsSavePath')}
                value={TorrentsSavePath}
                type='url'
                fullWidth
              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
+                label={t('EnableIPv6')}
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
+                label={t('TCP')}
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
+                label={t('UTP')}
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
+                label={t('PEX')}
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />}
+                label={t('ForceEncrypt')}
+              />
+              <br />
+              <TextField
+                onChange={inputForm}
+                margin='dense'
+                id='TorrentDisconnectTimeout'
+                label={t('TorrentDisconnectTimeout')}
+                value={TorrentDisconnectTimeout}
+                type='number'
+                fullWidth
+              />
+              <br />
+              <TextField
+                onChange={inputForm}
+                margin='dense'
+                id='ConnectionsLimit'
+                label={t('ConnectionsLimit')}
+                value={ConnectionsLimit}
+                type='number'
+                fullWidth
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
+                label={t('DHT')}
+              />
+              <br />
+              <TextField
+                onChange={inputForm}
+                margin='dense'
+                id='DhtConnectionLimit'
+                label={t('DhtConnectionLimit')}
+                value={DhtConnectionLimit}
+                type='number'
+                fullWidth
+              />
+              <br />
+              <TextField
+                onChange={inputForm}
+                margin='dense'
+                id='DownloadRateLimit'
+                label={t('DownloadRateLimit')}
+                value={DownloadRateLimit}
+                type='number'
+                fullWidth
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
+                label={t('Upload')}
+              />
+              <br />
+              <TextField
+                onChange={inputForm}
+                margin='dense'
+                id='UploadRateLimit'
+                label={t('UploadRateLimit')}
+                value={UploadRateLimit}
+                type='number'
+                fullWidth
+              />
+              <br />
+              <TextField
+                onChange={inputForm}
+                margin='dense'
+                id='PeersListenPort'
+                label={t('PeersListenPort')}
+                value={PeersListenPort}
+                type='number'
+                fullWidth
+              />
+              <br />
+              <FormControlLabel
+                control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />}
+                label={t('UPNP')}
+              />
+              <br />
+              <InputLabel htmlFor='RetrackersMode'>{t('RetrackersMode')}</InputLabel>
+              <Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}>
+                <option value={0}>{t('DontAddRetrackers')}</option>
+                <option value={1}>{t('AddRetrackers')}</option>
+                <option value={2}>{t('RemoveRetrackers')}</option>
+                <option value={3}>{t('ReplaceRetrackers')}</option>
+              </Select>
+              <br />
            </>
          )}
        </DialogContent>

        <DialogActions>
          <Button onClick={handleClose} color='primary' variant='outlined'>
-            Cancel
+            {t('Cancel')}
          </Button>

          <Button onClick={handleSave} color='primary' variant='outlined'>
-            Save
+            {t('Save')}
          </Button>
        </DialogActions>
      </Dialog>
--- a/web/src/components/TorrentCard/index.jsx
+++ b/web/src/components/TorrentCard/index.jsx
@@ -10,12 +10,14 @@ import Slide from '@material-ui/core/Slide'
 import { Button, DialogActions, DialogTitle, useMediaQuery, useTheme } from '@material-ui/core'
 import axios from 'axios'
 import ptt from 'parse-torrent-title'
+import { useTranslation } from 'react-i18next'

 import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style'

 const Transition = forwardRef((props, ref) => <Slide direction='up' ref={ref} {...props} />)

 export default function Torrent({ torrent }) {
+  const { t } = useTranslation()
  const [isDetailedInfoOpened, setIsDetailedInfoOpened] = useState(false)
  const [isDeleteTorrentOpened, setIsDeleteTorrentOpened] = useState(false)

@@ -44,41 +46,41 @@ export default function Torrent({ torrent }) {
        <TorrentCardButtons>
          <StyledButton onClick={openDetailedInfo}>
            <UnfoldMoreIcon />
-            <span>Details</span>
+            <span>{t('Details')}</span>
          </StyledButton>

          <StyledButton onClick={() => dropTorrent(torrent)}>
            <CloseIcon />
-            <span>Drop</span>
+            <span>{t('Drop')}</span>
          </StyledButton>

          <StyledButton onClick={openDeleteTorrentAlert}>
            <DeleteIcon />
-            <span>Delete</span>
+            <span>{t('Delete')}</span>
          </StyledButton>
        </TorrentCardButtons>

        <TorrentCardDescription>
          <div className='description-title-wrapper'>
-            <div className='description-section-name'>Name</div>
+            <div className='description-section-name'>{t('Name')}</div>
            <div className='description-torrent-title'>{shortenText(parsedTitle, 100)}</div>
          </div>

          <div className='description-statistics-wrapper'>
            <div className='description-statistics-element-wrapper'>
-              <div className='description-section-name'>Size</div>
+              <div className='description-section-name'>{t('Size')}</div>
              <div className='description-statistics-element-value'>{torrentSize > 0 && humanizeSize(torrentSize)}</div>
            </div>

            <div className='description-statistics-element-wrapper'>
-              <div className='description-section-name'>Speed</div>
+              <div className='description-section-name'>{t('Speed')}</div>
              <div className='description-statistics-element-value'>
                {downloadSpeed > 0 ? humanizeSize(downloadSpeed) : '---'}
              </div>
            </div>

            <div className='description-statistics-element-wrapper'>
-              <div className='description-section-name'>Peers</div>
+              <div className='description-section-name'>{t('Peers')}</div>
              <div className='description-statistics-element-value'>{getPeerString(torrent) || '---'}</div>
            </div>
          </div>
@@ -97,10 +99,10 @@ export default function Torrent({ torrent }) {
      </Dialog>

      <Dialog open={isDeleteTorrentOpened} onClose={closeDeleteTorrentAlert}>
-        <DialogTitle>Delete Torrent?</DialogTitle>
+        <DialogTitle>{t('DeleteTorrent?')}</DialogTitle>
        <DialogActions>
          <Button variant='outlined' onClick={closeDeleteTorrentAlert} color='primary'>
-            Cancel
+            {t('Cancel')}
          </Button>

          <Button
@@ -112,7 +114,7 @@ export default function Torrent({ torrent }) {
            color='primary'
            autoFocus
          >
-            Ok
+            {t('OK')}
          </Button>
        </DialogActions>
      </Dialog>
--- a/web/src/components/TorrentCard/style.js
+++ b/web/src/components/TorrentCard/style.js
@@ -8,7 +8,7 @@ export const TorrentCard = styled.div`
  grid-template-areas: 'poster description buttons';
  gap: 10px;
  padding: 10px;
-  background: #3fb57a;
+  background: #00a572;
  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);

  @media (max-width: 1260px), (max-height: 500px) {
--- a/web/src/components/TorrentList.jsx
+++ b/web/src/components/TorrentList.jsx
@@ -5,8 +5,10 @@ import TorrentCard from 'components/TorrentCard'
 import axios from 'axios'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { TorrentListWrapper, CenteredGrid } from 'App/style'
+import { useTranslation } from 'react-i18next'

 export default function TorrentList() {
+  const { t } = useTranslation()
  const [torrents, setTorrents] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [isOffline, setIsOffline] = useState(true)
@@ -39,9 +41,9 @@ export default function TorrentList() {
        {isLoading ? (
          <CircularProgress />
        ) : isOffline ? (
-          <Typography>Offline</Typography>
+          <Typography>{t('Offline')}</Typography>
        ) : (
-          !torrents.length && <Typography>No torrents added</Typography>
+          !torrents.length && <Typography>{t('NoTorrentsAdded')}</Typography>
        )}
      </CenteredGrid>
    )
--- a/web/src/components/Upload.jsx
+++ b/web/src/components/Upload.jsx
@@ -4,8 +4,10 @@ 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()
@@ -13,18 +15,17 @@ export default function UploadDialog() {
    data.append('file', file)
    axios.post(torrentUploadHost(), data)
  }
-
  return (
    <div>
      <label htmlFor='raised-button-file'>
        <input onChange={handleCapture} accept='*/*' type='file' style={{ display: 'none' }} id='raised-button-file' />

-        <ListItem button variant='raised' type='submit' component='span' key='Upload file'>
+        <ListItem button variant='raised' type='submit' component='span' key={t('UploadFile')}>
          <ListItemIcon>
            <PublishIcon />
          </ListItemIcon>

-          <ListItemText primary='Upload file' />
+          <ListItemText primary={t('UploadFile')} />
        </ListItem>
      </label>
    </div>
--- a/web/src/index.jsx
+++ b/web/src/index.jsx
@@ -1,12 +1,40 @@
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
+import { I18nextProvider } from 'react-i18next'
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'

 import './index.css'
 import App from './App'

+i18n.use(LanguageDetector).init({
+  lng: 'en', // default
+  fallbackLng: 'en', // use en if detected lng is not available
+  keySeparator: false, // we do not use keys in form messages.welcome
+  interpolation: {
+    escapeValue: false, // react already safes from xss
+  },
+  resources: {
+    en: {
+      // eslint-disable-next-line global-require
+      translations: require('./locales/en/translation.json'),
+    },
+    ru: {
+      // eslint-disable-next-line global-require
+      translations: require('./locales/ru/translation.json'),
+    },
+  },
+  ns: ['translations'],
+  defaultNS: 'translations',
+})
+
+i18n.languages = ['en', 'ru']
+
 ReactDOM.render(
  <StrictMode>
-    <App />
+    <I18nextProvider i18n={i18n}>
+      <App />
+    </I18nextProvider>
  </StrictMode>,
  document.getElementById('root'),
 )
--- a/web/src/locales/en/translation.json
+++ b/web/src/locales/en/translation.json
@@ -0,0 +1,89 @@
+{
+  "About": "About",
+  "Actions": "Actions",
+  "Add": "Add",
+  "AddFromLink": "Add from Link",
+  "AddMagnetOrLink": "Add magnet or link to torrent file",
+  "AddRetrackers": "Add retrackers",
+  "Buffer": "Preload Buffer / Cache",
+  "BufferNote": "Enable &quot;Preload Buffer&quot; in settings to see cache loading progress",
+  "CacheSize": "Cache Size (Megabytes)",
+  "Cancel": "Cancel",
+  "Close": "Close",
+  "CloseServer": "Close Server",
+  "CloseServer?": "Close server?",
+  "ConnectionsLimit": "Connections Limit",
+  "CopyHash": "Copy Hash",
+  "CopyLink": "Copy link",
+  "Delete": "Delete",
+  "DeleteTorrent?": "Delete Torrent?",
+  "DeleteTorrents?": "Delete All Torrents?",
+  "DetailedCacheView": "Detailed Cache View",
+  "Details": "Details",
+  "DHT": "DHT (Distributed Hash Table)",
+  "DhtConnectionLimit": "DHT Connection Limit",
+  "Donate": "Donate",
+  "DontAddRetrackers": "Don&apos;t add retrackers",
+  "DownloadPlaylist": "Download Playlist",
+  "DownloadRateLimit": "Download Rate Limit (Kilobytes)",
+  "DownloadSpeed": "Download speed",
+  "Drop": "Drop",
+  "DropTorrent": "Reset Torrent",
+  "EnableIPv6": "IPv6",
+  "Episode": "Episode",
+  "ForceEncrypt": "Force Encrypt Headers",
+  "FromLatestFile": "From Latest File",
+  "Full": "Full",
+  "Host": "Host",
+  "Info": "Info",
+  "LatestFilePlayed": "Latest file played:",
+  "MagnetOrTorrentFileLink": "Magnet or torrent file link",
+  "Name": "Name",
+  "NoTorrentsAdded": "No torrents added",
+  "Offline": "Offline",
+  "OK": "OK",
+  "OpenLink": "Open link",
+  "Peers": "Peers",
+  "PeersListenPort": "Peers Listen Port",
+  "PEX": "PEX (Peer Exchange)",
+  "PiecesCount": "Pieces count",
+  "PiecesLength": "Pieces length",
+  "PlaylistAll": "Playlist All",
+  "Poster": "Poster",
+  "Preload": "Preload",
+  "PreloadBuffer": "Preload Buffer",
+  "ReaderReadAHead": "Reader Read Ahead (5-100%)",
+  "RemoveAll": "Remove All",
+  "RemoveCacheOnDrop": "Remove Cache from Disk on Drop Torrent",
+  "RemoveCacheOnDropDesc": "If disabled, remove cache on delete torrent.",
+  "RemoveRetrackers": "Remove retrackers",
+  "RemoveViews": "Remove View States",
+  "ReplaceRetrackers": "Replace retrackers",
+  "Resolution": "Resolution",
+  "RetrackersMode": "Retrackers Mode",  
+  "Save": "Save",
+  "Season": "Season",
+  "SelectSeason": "Select Season",
+  "Settings": "Settings",
+  "Size": "Size",
+  "SpecialThanks": "Special Thanks:",
+  "Speed": "Speed",
+  "TCP": "TCP (Transmission Control Protocol)",
+  "ThanksToEveryone": "Thanks to everyone who tested and helped.",
+  "Title": "Title",
+  "TorrentContent": "Torrent Content",
+  "TorrentDetails": "Torrent Details",
+  "TorrentDisconnectTimeout": "Torrent Disconnect Timeout",
+  "TorrentSize": "Torrent size",
+  "TorrentsSavePath": "Torrents Save Path",
+  "TorrentState": "Torrent State",
+  "TorrentStatus": "Torrent Status",
+  "Upload": "Upload (not recommended to disable)",
+  "UploadFile": "Upload File",
+  "UploadRateLimit": "Upload Rate Limit (Kilobytes)",
+  "UploadSpeed": "Upload speed",
+  "UPNP": "UPnP (Universal Plug and Play)",
+  "UseDisk": "Use Disk",
+  "UTP": "μTP (Micro Transport Protocol)",
+  "Viewed": "Viewed"
+}
--- a/web/src/locales/ru/translation.json
+++ b/web/src/locales/ru/translation.json
@@ -0,0 +1,89 @@
+{
+  "About": "О сервере",
+  "Actions": "Действия",
+  "Add": "Добавить",
+  "AddFromLink": "Добавить",
+  "AddMagnetOrLink": "Добавьте magnet или ссылку на торрент",
+  "AddRetrackers": "Добавлять",
+  "Buffer": "Предзагрузка / Кеш",
+  "BufferNote": "Включите «Наполнять кеш перед началом воспроизведения» в настройках для показа заполнения кеша",
+  "CacheSize": "Размер кеша (Мегабайты)",
+  "Cancel": "Отмена",
+  "Close": "Закрыть",
+  "CloseServer": "Выкл. сервер",
+  "CloseServer?": "Остановить сервер?",
+  "ConnectionsLimit": "Торрент-соединения (рек. 20-25)",
+  "CopyHash": "Скопировать хеш",
+  "CopyLink": "Копировать",
+  "Delete": "Удалить",
+  "DeleteTorrent?": "Удалить торрент?",
+  "DeleteTorrents?": "Удалить все торренты?",
+  "DetailedCacheView": "Информация о заполнении кеша",
+  "Details": "Инфо",
+  "DHT": "DHT (Distributed Hash Table)",
+  "DhtConnectionLimit": "Лимит подключений DHT",
+  "Donate": "Поддержка",
+  "DontAddRetrackers": "Ничего не делать",
+  "DownloadPlaylist": "Скачать плейлист",
+  "DownloadRateLimit": "Ограничение скорости загрузки (Килобайты)",
+  "DownloadSpeed": "Скорость загрузки",
+  "Drop": "Сброс",
+  "DropTorrent": "Сбросить торрент",
+  "EnableIPv6": "IPv6",
+  "Episode": "Серия",
+  "ForceEncrypt": "Принудительное шифрование заголовков",
+  "FromLatestFile": "C последнего файла",
+  "Full": "Полный",
+  "Host": "Хост",
+  "Info": "Инфо",
+  "LatestFilePlayed": "Последний воспроизведенный файл:",
+  "MagnetOrTorrentFileLink": "Ссылка на файл торрента или magnet-ссылка",
+  "Name": "Название",
+  "NoTorrentsAdded": "Нет торрентов",
+  "Offline": "Сервер не доступен",
+  "OK": "OK",
+  "OpenLink": "Открыть",
+  "Peers": "Подкл./Пиры",
+  "PeersListenPort": "Порт для входящих подключений",
+  "PEX": "PEX (Peer Exchange)",
+  "PiecesCount": "Кол-во блоков",
+  "PiecesLength": "Размер блока",
+  "PlaylistAll": "Плейлист всех",
+  "Poster": "Постер",
+  "Preload": "Предзагр.",
+  "PreloadBuffer": "Наполнять кеш перед началом воспроизведения",
+  "ReaderReadAHead": "Кеш предзагрузки (5-100%, рек. 95%)",
+  "RemoveAll": "Удалить все",
+  "RemoveCacheOnDrop": "Очищать кеш на диске при отключении торрента",
+  "RemoveCacheOnDropDesc": "Если отключено, кэш очищается при удалении торрента.",
+  "RemoveRetrackers": "Удалять",
+  "RemoveViews": "Очистить просмотры",
+  "ReplaceRetrackers": "Заменять",
+  "Resolution": "Разреш.",
+  "RetrackersMode": "Ретрекеры",
+  "Save": "Сохранить",
+  "Season": "Сезон",
+  "SelectSeason": "Выбор сезона",
+  "Settings": "Настройки",
+  "Size": "Размер",
+  "SpecialThanks": "Отдельное спасибо:",
+  "Speed": "Скорость",
+  "TCP": "TCP (Transmission Control Protocol)",
+  "ThanksToEveryone": "Спасибо всем, кто тестировал и помогал!",
+  "Title": "Название",
+  "TorrentContent": "Содержимое торрента",
+  "TorrentDetails": "Информация о торренте",
+  "TorrentDisconnectTimeout": "Тайм-аут отключения торрента (секунды)",
+  "TorrentSize": "Размер торрента",
+  "TorrentsSavePath": "Путь хранения кеша",
+  "TorrentState": "Данные торрента",
+  "TorrentStatus": "Состояние",
+  "Upload": "Отдача (не рекомендуется отключать)",
+  "UploadFile": "Загрузить файл",
+  "UploadRateLimit": "Ограничение скорости отдачи (Килобайты)",
+  "UploadSpeed": "Скорость отдачи",
+  "UPNP": "UPnP (Universal Plug and Play)",
+  "UseDisk": "Использовать кеш на диске",
+  "UTP": "μTP (Micro Transport Protocol)",
+  "Viewed": "Просм."
+}